:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-strong: #eaf1ff;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: #ffffff;
  --line: rgba(15, 23, 42, 0.12);
  --text: #0f172a;
  --muted: #64748b;
  --blue: #2563eb;
  --blue-strong: #1d4ed8;
  --cyan: #0e7490;
  --green: #047857;
  --amber: #b45309;
  --red: #be123c;
  --purple: #7c3aed;
  --shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.08);
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 8%, rgba(37, 99, 235, 0.14), transparent 28rem),
    radial-gradient(circle at 92% 2%, rgba(124, 58, 237, 0.12), transparent 26rem),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 46%, #f7f3ff 100%);
}

a { color: var(--blue-strong); text-decoration: none; font-weight: 650; }
a:hover { color: #0f172a; text-decoration: underline; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #0891b2; outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 20; padding: .7rem 1rem; border-radius: .8rem; background: #0f172a; color: #ffffff; transform: translateY(-140%); }
.skip-link:focus { transform: translateY(0); }

.shell { display: grid; grid-template-columns: 18rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding: 1.2rem; display: flex; flex-direction: column; gap: 1.1rem; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px); box-shadow: 10px 0 40px rgba(15, 23, 42, .06); }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: .8rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 1rem; background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; font-weight: 800; box-shadow: 0 16px 36px rgba(37, 99, 235, .22); }
.brand strong, .brand small { display: block; }
.brand small, .tiny, .hint, small { color: var(--muted); }
.nav { display: grid; flex: 1 1 auto; min-height: 0; gap: .35rem; margin-right: -.45rem; padding: .1rem .45rem .35rem 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.nav::-webkit-scrollbar { width: .45rem; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .24); border-radius: 999px; }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(37, 99, 235, .34); }
.nav-link { display: block; color: #334155; padding: .72rem .9rem; border-radius: .9rem; font-weight: 750; }
.nav-link:hover, .nav-link.is-active { background: rgba(37, 99, 235, .10); color: var(--blue-strong); text-decoration: none; }
.nav-link.is-active { box-shadow: inset 3px 0 0 var(--blue); }
.sidebar-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.link-button { border: 0; background: transparent; color: var(--blue-strong); padding: 0; cursor: pointer; font-weight: 750; }

.main-wrap { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem 2rem 1rem; }
.eyebrow { margin: 0 0 .3rem; color: var(--cyan); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.05em; }
h2 { letter-spacing: -.03em; }
.content { padding: 1rem 2rem 3rem; display: grid; gap: 1.2rem; }
.topbar-actions, .actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: .95rem; background: rgba(255, 255, 255, .88); color: var(--blue-strong); cursor: pointer; font-weight: 850; box-shadow: var(--shadow-soft); }
.button:hover { text-decoration: none; background: #ffffff; color: #172554; }
.button.primary { border: 0; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 900; box-shadow: 0 16px 36px rgba(37, 99, 235, .24); }
.button.primary:hover { color: #fff; filter: saturate(1.08); }
.button:disabled { cursor: not-allowed; opacity: .62; box-shadow: none; }
.button.danger {
  border-color: rgba(190, 18, 60, .24);
  background: rgba(190, 18, 60, .08);
  color: #9f1239;
}
.button.danger:hover { background: rgba(190, 18, 60, .14); color: #881337; }
.button.ghost { background: transparent; box-shadow: none; }
.button.small { min-height: 2rem; padding: .35rem .65rem; border-radius: .7rem; font-size: .9rem; }
.button.full { width: 100%; }

.panel, .metric-card, .project-card, .hero-panel, .login-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.panel, .project-card, .hero-panel { padding: 1.1rem; }
.hero-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(124, 58, 237, .08)), var(--panel-strong); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metric-card { padding: 1rem; display: grid; gap: .55rem; }
.metric-card span { color: var(--muted); font-weight: 750; }
.metric-card strong { font-size: 2.2rem; letter-spacing: -.05em; }
.metric-card.danger strong { color: var(--red); }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.card-head, .panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.panel-header { margin-bottom: .8rem; }
.pill, .status { display: inline-flex; align-items: center; border-radius: 999px; padding: .24rem .6rem; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; border: 1px solid transparent; }
.pill { background: rgba(37, 99, 235, .10); color: #1e40af; border-color: rgba(37, 99, 235, .18); }
.pill.danger { background: rgba(190, 18, 60, .10); color: #9f1239; border-color: rgba(190, 18, 60, .22); }
.status.good { background: rgba(4, 120, 87, .10); color: #065f46; border-color: rgba(4, 120, 87, .18); }
.status.warn { background: rgba(180, 83, 9, .12); color: #92400e; border-color: rgba(180, 83, 9, .22); }
.status.bad { background: rgba(190, 18, 60, .10); color: #9f1239; border-color: rgba(190, 18, 60, .20); }
.status.muted { background: rgba(100, 116, 139, .12); color: #475569; border-color: rgba(100, 116, 139, .18); }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 42rem; }
caption { position: absolute; clip-path: inset(50%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; }
th, td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: #475569; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; background: rgba(248, 250, 252, .74); }

.analytics-workspace {
  --analytics-gap: 1rem;
  display: grid;
  gap: var(--analytics-gap);
  min-width: 0;
}
.analytics-hero,
.analytics-panel,
.analytics-signal-board,
.analytics-kpi-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}
.analytics-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 1.25rem;
  padding: 1.25rem;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(14, 116, 144, .06)),
    var(--panel-strong);
}
.analytics-hero h2,
.analytics-panel h2,
.analytics-signal-main h2 {
  margin-bottom: .25rem;
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -.04em;
}
.analytics-hero-copy {
  max-width: 68rem;
}
.analytics-range {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
.analytics-panel {
  padding: 1.15rem;
}
.analytics-panel-attention {
  border-color: rgba(190, 18, 60, .24);
  background:
    linear-gradient(135deg, rgba(190, 18, 60, .08), rgba(251, 191, 36, .08)),
    var(--panel-strong);
}
.analytics-panel-warning {
  border-color: rgba(180, 83, 9, .22);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, .10), rgba(255, 255, 255, .82)),
    var(--panel);
}
.analytics-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.analytics-panel-header.compact {
  margin-bottom: .55rem;
}
.analytics-panel-header > h2 {
  margin-bottom: 0;
}
.analytics-panel-header h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -.025em;
}
.analytics-funnel-panel {
  background:
    linear-gradient(135deg, rgba(14, 116, 144, .08), rgba(99, 102, 241, .06)),
    var(--panel);
}
.analytics-funnel-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) max-content;
  align-items: end;
  gap: .75rem;
  margin: .5rem 0 1rem;
  padding: .85rem;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .72);
}
.analytics-funnel-form label {
  display: grid;
  gap: .28rem;
  min-width: 0;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.analytics-funnel-form input {
  width: 100%;
  min-width: 0;
  padding: .56rem .65rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 750;
}
.analytics-funnel-grid {
  margin-top: 1rem;
}
.analytics-funnel-table-card {
  min-width: 0;
}
.analytics-funnel-table {
  min-width: 62rem;
}
.analytics-funnel-table tfoot th,
.analytics-funnel-table tfoot td {
  background: rgba(37, 99, 235, .06);
  font-weight: 900;
}
.analytics-signal-board {
  display: grid;
  grid-template-columns: minmax(18rem, 1.25fr) minmax(18rem, .95fr);
  gap: 1rem;
  padding: 1.15rem;
  background:
    radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .18), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(240, 249, 255, .86));
}
.analytics-signal-main,
.analytics-signal-rail,
.analytics-signal-row {
  min-width: 0;
}
.analytics-signal-main {
  display: grid;
  align-content: start;
  gap: .8rem;
}
.analytics-signal-score {
  display: grid;
  gap: .1rem;
}
.analytics-signal-score span {
  font-size: clamp(3.5rem, 9vw, 6.8rem);
  line-height: .9;
  letter-spacing: -.08em;
  font-weight: 950;
  color: #0f172a;
}
.analytics-signal-score small {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
}
.analytics-signal-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.analytics-signal-row {
  display: grid;
  align-content: space-between;
  gap: .4rem;
  min-height: 8rem;
  padding: .9rem;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .72);
}
.analytics-signal-row span,
.analytics-kpi-card span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.analytics-signal-row strong {
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: .85rem;
}
.analytics-kpi-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.analytics-kpi-card {
  display: grid;
  gap: .45rem;
  min-height: 9rem;
  padding: .95rem;
  box-shadow: var(--shadow-soft);
}
.analytics-kpi-card.compact {
  min-height: 7.4rem;
}
.analytics-kpi-card strong {
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.055em;
}
.analytics-kpi-card.danger strong {
  color: var(--red);
}
.analytics-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--analytics-gap);
  min-width: 0;
}
.analytics-section-grid > * {
  min-width: 0;
}
.analytics-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}
.analytics-table-wrap.wide {
  max-height: min(70vh, 46rem);
}
.analytics-table {
  min-width: 44rem;
  font-size: .94rem;
}
.analytics-table code {
  overflow-wrap: anywhere;
}
.analytics-table.compact {
  min-width: 34rem;
}
.analytics-table.attribution {
  min-width: 0;
  table-layout: fixed;
  font-size: .78rem;
}
.analytics-table th {
  font-size: .76rem;
}
.analytics-table td,
.analytics-table th {
  padding: .66rem .72rem;
}
.analytics-table tbody tr:hover {
  background: rgba(37, 99, 235, .035);
}
.analytics-attribution-panel .analytics-panel-header {
  align-items: flex-start;
}
.analytics-snapshot-pill {
  max-width: 100%;
  white-space: normal;
}
.analytics-table.attribution th,
.analytics-table.attribution td {
  padding: .48rem .4rem;
}
.analytics-table.attribution th {
  font-size: .64rem;
  letter-spacing: .045em;
}
.analytics-table.attribution code,
.analytics-table.attribution small,
.analytics-table.attribution strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.analytics-table.attribution .status {
  display: inline-block;
  max-width: 100%;
  padding: .16rem .36rem;
  font-size: .62rem;
  letter-spacing: .03em;
  line-height: 1.25;
  text-transform: none;
  white-space: normal;
}
.attr-col-site { width: 7%; }
.attr-col-profile { width: 15%; }
.attr-col-program { width: 13%; }
.attr-col-email { width: 10%; }
.attr-col-activity { width: 14%; }
.attr-col-quality { width: 9%; }
.attr-col-flag { width: 5%; }
.attr-col-user { width: 9%; }
.attr-col-verdict { width: 8%; }
.attr-code,
.attr-profile-cell,
.attr-email-cell,
.attr-time-cell,
.attr-activity-cell {
  min-width: 0;
}
.attr-email-cell {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.attr-time-cell time,
.attr-activity-cell time {
  white-space: nowrap;
}
.attr-activity-cell small {
  display: grid;
  gap: .16rem;
}
.attr-activity-cell b {
  color: var(--cyan);
  font-size: .68rem;
  letter-spacing: .04em;
}
.analytics-footnote {
  margin: .85rem 0 0;
}
.operator-table {
  min-width: 58rem;
  font-size: .95rem;
}
.operator-table th,
.operator-table td {
  padding: .58rem .72rem;
}
.operator-table tbody tr:hover {
  background: rgba(37, 99, 235, .035);
}
.operator-table code {
  overflow-wrap: anywhere;
}
.release-board-panel {
  overflow: hidden;
}
.release-site-table {
  min-width: 74rem;
}
.release-actions-head,
.release-actions-cell {
  width: 29rem;
}
.release-actions-cell {
  position: sticky;
  right: 0;
  z-index: 1;
  background: rgba(255, 255, 255, .94);
  box-shadow: -10px 0 22px rgba(15, 23, 42, .04);
}
.operator-table tbody tr:hover .release-actions-cell {
  background: #ffffff;
}
.release-actions {
  display: grid;
  gap: .55rem;
  align-items: start;
}
.release-primary-action {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto auto;
  gap: .45rem;
  align-items: center;
  margin: 0;
}
.release-select,
.release-toolbar select,
.release-toolbar input[type="search"] {
  width: 100%;
  min-height: 2rem;
  border: 1px solid rgba(100, 116, 139, .34);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .95);
  color: var(--text);
  padding: .38rem .55rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
.release-primary-action label,
.inline-form label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #334155;
  font-weight: 750;
  white-space: nowrap;
}
.inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin: 0;
}
.release-secondary-actions {
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: .85rem;
  background: rgba(248, 250, 252, .76);
}
.release-secondary-actions summary {
  cursor: pointer;
  padding: .45rem .6rem;
  color: #475569;
  font-weight: 850;
}
.release-secondary-actions[open] summary {
  border-bottom: 1px solid var(--line);
}
.release-secondary-actions-body {
  display: grid;
  gap: .5rem;
  padding: .55rem .6rem .65rem;
}
.sha-pair {
  display: grid;
  grid-template-columns: 3.4rem auto minmax(8rem, 1fr);
  gap: .24rem .45rem;
  align-items: center;
  margin-bottom: .32rem;
}
.sha-pair > span {
  color: #475569;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sha-pair .error-message,
.sha-pair small:last-child:nth-child(4) {
  grid-column: 2 / -1;
}
.release-meta-line {
  margin-top: .18rem;
}
.release-toolbar {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) minmax(9rem, .8fr) minmax(10rem, .9fr) minmax(7rem, .55fr) auto;
  gap: .75rem;
  align-items: end;
  margin: .75rem 0 1rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .72);
}
.compact-field {
  gap: .25rem;
}
.compact-field span {
  color: #475569;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.release-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}
.pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.pagination-summary {
  color: #475569;
  font-weight: 750;
}
.pagination-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  justify-content: flex-end;
}
.pagination-link {
  display: inline-flex;
  min-width: 2rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: rgba(255, 255, 255, .86);
  color: #1e40af;
  font-weight: 850;
}
.pagination-link:hover {
  text-decoration: none;
  background: #ffffff;
}
.pagination-link.is-current {
  border-color: rgba(37, 99, 235, .38);
  background: rgba(37, 99, 235, .12);
  color: #172554;
}
.pagination-ellipsis {
  color: #64748b;
  padding: 0 .25rem;
}
.button.disabled {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
}
.compact-runs-table {
  min-width: 62rem;
}
code, .code-block { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
code { color: #1e3a8a; background: rgba(37, 99, 235, .08); border-radius: .45rem; padding: .08rem .28rem; }
.code-block { max-height: 32rem; overflow: auto; padding: 1rem; border-radius: 1rem; background: #f8fafc; border: 1px solid var(--line); color: #0f172a; white-space: pre-wrap; }
.log-block { min-height: 16rem; }
.detail-list, .mini-dl { display: grid; gap: .7rem; }
.detail-list div, .mini-dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
dt { color: var(--muted); font-weight: 750; } dd { margin: 0; text-align: right; }
.clean-list, .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.clean-list li, .timeline li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255, 255, 255, .68); }
.dot { width: .7rem; height: .7rem; border-radius: 999px; background: var(--muted); flex: 0 0 auto; }
.dot.good { background: var(--green); } .dot.warn { background: var(--amber); } .dot.bad { background: var(--red); }

.stack-form { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 850; color: #1e293b; }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; border: 1px solid rgba(100, 116, 139, .34); border-radius: .9rem; background: rgba(255, 255, 255, .94); color: var(--text); padding: .72rem .8rem; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); }
.field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus { border-color: rgba(37, 99, 235, .54); background: #ffffff; }
.field input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: #2563eb; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.error, .error-message { color: #9f1239; font-weight: 750; }
.section-title { border-top: 1px solid var(--line); padding-top: 1rem; }
.callout { padding: .9rem; border: 1px solid rgba(37, 99, 235, .20); border-radius: 1rem; background: rgba(37, 99, 235, .08); color: #1e3a8a; }
.messages { display: grid; gap: .5rem; padding: 0 2rem; }
.message { border-radius: .9rem; padding: .75rem 1rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); color: var(--text); box-shadow: var(--shadow-soft); }
.message.success { border-color: rgba(4, 120, 87, .26); } .message.warning, .message.info { border-color: rgba(180, 83, 9, .28); }

.steps { list-style: none; counter-reset: steps; padding: 0; margin: 0; display: grid; gap: .8rem; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255, 255, 255, .68); }
.step-index { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .75rem; background: rgba(37, 99, 235, .10); color: #1e40af; font-weight: 900; }
.step.good { border-color: rgba(4, 120, 87, .22); } .step.warn { border-color: rgba(180, 83, 9, .28); } .step.bad { border-color: rgba(190, 18, 60, .22); }

.login-body { display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 28rem); padding: 1.4rem; }
.login-brand { margin-bottom: 1.4rem; }

.heavy-section-deferred { content-visibility: auto; contain-intrinsic-size: auto none auto 520px; }

.wizard-shell { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.wizard-steps { position: sticky; top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 1rem; box-shadow: var(--shadow); }
.wizard-steps ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.wizard-steps li { border-radius: 1rem; background: rgba(255, 255, 255, .68); border: 1px solid var(--line); overflow: hidden; }
.wizard-steps li.is-current { border-color: rgba(37, 99, 235, .42); box-shadow: inset 4px 0 0 var(--blue); }
.wizard-steps li.is-done { border-color: rgba(4, 120, 87, .22); }
.wizard-steps a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .7rem; align-items: center; padding: .7rem; color: var(--text); }
.wizard-steps a:hover { text-decoration: none; background: rgba(37, 99, 235, .06); }
.wizard-steps li span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .7rem; background: linear-gradient(135deg, var(--blue), var(--purple)); color: #ffffff; font-weight: 900; }
.wizard-steps li.is-done span { background: var(--green); }
.wizard-steps li small { grid-column: 2; }
.wizard-actions { justify-content: flex-end; }
.compact-list { gap: .5rem; margin-top: .75rem; }
.launch-form fieldset { border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; display: grid; gap: 1rem; background: rgba(255, 255, 255, .34); }
.launch-form legend { padding: 0 .35rem; font-weight: 900; color: #1e3a8a; }

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.raw-operator {
  display: grid;
  gap: 1.2rem;
  min-width: 0;
}
.raw-operator > *,
.raw-operator .panel,
.raw-operator .hero-panel,
.raw-operator .grid,
.raw-table-wrap {
  min-width: 0;
}
.raw-anchor-nav {
  position: sticky;
  top: .6rem;
  z-index: 4;
  padding: .45rem;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}
.raw-anchor-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.raw-anchor-nav a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  border-radius: .8rem;
  padding: .38rem .7rem;
  color: #334155;
  font-weight: 850;
}
.raw-anchor-nav a:hover {
  background: rgba(37, 99, 235, .08);
  text-decoration: none;
}
.raw-hero,
.raw-section-header,
.raw-admin-panel {
  scroll-margin-top: 5rem;
}
.raw-refresh-card {
  align-content: start;
}
.raw-hero-throughput {
  display: block;
  color: #0f172a;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 950;
  letter-spacing: -.06em;
  line-height: .95;
}
.raw-refresh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.raw-alert-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: .8rem;
}
.raw-alert {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-soft);
}
.raw-alert strong {
  display: block;
  margin-bottom: .18rem;
}
.raw-alert p {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}
.raw-alert.good { border-color: rgba(4, 120, 87, .20); background: rgba(4, 120, 87, .07); }
.raw-alert.info { border-color: rgba(37, 99, 235, .20); background: rgba(37, 99, 235, .07); }
.raw-alert.warning { border-color: rgba(180, 83, 9, .26); background: rgba(180, 83, 9, .09); }
.raw-alert.danger { border-color: rgba(190, 18, 60, .24); background: rgba(190, 18, 60, .08); }
.raw-import-coverage-panel {
  scroll-margin-top: 5rem;
}
.raw-coverage-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .75rem;
  margin-bottom: .8rem;
}
.raw-coverage-summary-card {
  display: grid;
  gap: .2rem;
  padding: .8rem;
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: .95rem;
  background: rgba(248, 250, 252, .72);
}
.raw-coverage-summary-card span {
  color: #475569;
  font-weight: 850;
}
.raw-coverage-summary-card strong {
  color: #0f172a;
  font-size: 1.55rem;
  letter-spacing: -.04em;
}
.raw-coverage-summary-card small {
  color: #64748b;
  line-height: 1.35;
}
.raw-coverage-summary-card.warning strong,
.raw-coverage-row-warning strong {
  color: var(--amber);
}
.raw-coverage-summary-card.danger strong,
.raw-coverage-row-danger strong,
.raw-danger-text {
  color: var(--red);
}
.raw-import-coverage-table {
  min-width: 86rem;
}
.raw-coverage-state,
.raw-source-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: .18rem .5rem;
  font-size: .74rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.raw-coverage-state-success,
.raw-source-chip.covered {
  border: 1px solid rgba(4, 120, 87, .18);
  background: rgba(4, 120, 87, .10);
  color: #065f46;
}
.raw-coverage-state-warning,
.raw-source-chip.warning {
  border: 1px solid rgba(180, 83, 9, .22);
  background: rgba(180, 83, 9, .12);
  color: #92400e;
}
.raw-coverage-state-danger,
.raw-source-chip.uncovered {
  border: 1px solid rgba(190, 18, 60, .20);
  background: rgba(190, 18, 60, .10);
  color: #9f1239;
}
.raw-coverage-state-neutral,
.raw-source-chip.muted {
  border: 1px solid rgba(100, 116, 139, .18);
  background: rgba(100, 116, 139, .12);
  color: #475569;
}
.raw-source-chip-list,
.raw-runner-source-list {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.raw-runner-source-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2rem .45rem;
  align-items: start;
  padding: .35rem 0;
}
.raw-runner-source-list li + li {
  border-top: 1px solid rgba(100, 116, 139, .12);
}
.raw-runner-source-list small {
  grid-column: 2;
  color: #64748b;
  overflow-wrap: anywhere;
}
.raw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  min-width: 0;
}
.raw-kpi-panel {
  min-width: 0;
}
.raw-kpi-list {
  display: grid;
  gap: .55rem;
}
.raw-kpi-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) auto;
  gap: .18rem .75rem;
  align-items: baseline;
  padding: .65rem .7rem;
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: .9rem;
  background: rgba(248, 250, 252, .72);
}
.raw-kpi-row span {
  color: #475569;
  font-weight: 850;
}
.raw-kpi-row strong {
  color: #0f172a;
  font-size: 1.45rem;
  letter-spacing: -.04em;
}
.raw-kpi-row small {
  grid-column: 1 / -1;
}
.raw-kpi-row.warning strong { color: var(--amber); }
.raw-kpi-row.danger strong { color: var(--red); }
.raw-table-wrap {
  max-width: 100%;
  border: 1px solid rgba(100, 116, 139, .14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .58);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.raw-tabs {
  display: grid;
  gap: .75rem;
}
.raw-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .35rem;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 999px;
  background: rgba(248, 250, 252, .78);
}
.raw-tab-button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .55rem .9rem;
  background: transparent;
  color: #475569;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.raw-tab-button:hover,
.raw-tab-button:focus-visible {
  background: rgba(37, 99, 235, .08);
  color: #1d4ed8;
}
.raw-tab-button.is-active {
  border-color: rgba(37, 99, 235, .18);
  background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(14, 165, 233, .12));
  color: #1e3a8a;
  box-shadow: var(--shadow-soft);
}
.raw-tab-panel[hidden] {
  display: none !important;
}
.raw-tab-note {
  margin: .15rem 0 .75rem;
}
.raw-run-diagnostics {
  margin-top: .75rem;
}
.mailer-tabs {
  scroll-margin-top: 5rem;
}
.mailer-tab-panel {
  display: grid;
  gap: 1rem;
}
.azure-headroom-panel {
  display: grid;
  gap: .85rem;
}
.azure-headroom-panel table {
  min-width: 58rem;
}
.azure-headroom-panel tr.warning-row th,
.azure-headroom-panel tr.warning-row td {
  background: rgba(255, 251, 235, .72);
}
.headroom-meta {
  display: block;
  margin-top: .15rem;
  color: #64748b;
  font-size: .78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.azure-headroom-alerts {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.raw-compact-table {
  min-width: 68rem;
  font-size: .9rem;
}
.raw-compact-table th,
.raw-compact-table td {
  padding: .55rem .62rem;
}
.raw-compact-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.raw-code-token,
.raw-code-muted {
  display: inline-block;
  max-inline-size: min(100%, 22rem);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.raw-code-muted {
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.raw-details-panel {
  margin-top: .45rem;
  border-radius: .8rem;
  box-shadow: none;
}
.raw-details-panel summary {
  padding: .5rem .65rem;
}
.raw-json-block {
  max-block-size: 20rem;
  max-inline-size: min(70rem, 80vw);
  margin: .55rem;
  white-space: pre;
  overflow: auto;
}
.raw-stats-summary {
  display: block;
  max-inline-size: 30rem;
  color: #334155;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.raw-error-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  max-inline-size: 34rem;
  overflow: clip;
  line-height: 1.45;
}
.raw-inline-action {
  display: grid;
  gap: .45rem;
  min-width: 10rem;
}
.raw-inline-action input {
  width: 100%;
  min-height: 2rem;
  border: 1px solid rgba(100, 116, 139, .34);
  border-radius: .75rem;
  padding: .38rem .5rem;
}
.raw-run-grid {
  align-items: start;
}
.raw-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.raw-items-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .45rem .9rem;
  align-items: center;
  padding: .75rem .85rem;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: .95rem;
  background: rgba(37, 99, 235, .06);
  color: #334155;
}
.raw-items-summary strong {
  color: #0f172a;
}
.raw-items-table {
  min-width: 82rem;
}
.raw-failed-seeds,
.raw-retry-panel {
  margin-top: .8rem;
}
.raw-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: 1rem;
}
.raw-admin-wide {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .metric-grid, .grid.two, .grid.three, .wizard-shell { grid-template-columns: 1fr; }
  .analytics-hero,
  .analytics-signal-board,
  .analytics-section-grid {
    grid-template-columns: 1fr;
  }
  .analytics-range {
    justify-content: flex-start;
  }
  .analytics-funnel-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wizard-steps { position: static; }
  .release-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-toolbar-actions { justify-content: flex-start; }
  .raw-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raw-admin-wide { grid-column: auto; }
}
@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 1.2rem; }
  .content { padding: 1rem 1.2rem 2rem; }
  .messages { padding: 0 1.2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-panel { flex-direction: column; }
  .analytics-signal-rail,
  .analytics-kpi-grid,
  .analytics-kpi-grid.compact {
    grid-template-columns: 1fr;
  }
  .analytics-signal-row,
  .analytics-kpi-card,
  .analytics-kpi-card.compact {
    min-height: auto;
  }
  .analytics-panel-header {
    flex-direction: column;
  }
  .analytics-funnel-form {
    grid-template-columns: 1fr;
  }
  .analytics-funnel-form .button {
    width: 100%;
  }
  .runtime-connect-form { grid-template-columns: 1fr; }
  .runtime-connect-form .button { width: 100%; }
  .release-toolbar,
  .release-primary-action {
    grid-template-columns: 1fr;
  }
  .release-actions-cell {
    position: static;
    box-shadow: none;
  }
  .release-actions-head,
  .release-actions-cell {
    width: auto;
  }
  .pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .pagination-links {
    justify-content: flex-start;
  }
  .raw-anchor-nav { top: .35rem; }
  .raw-anchor-nav ul { gap: .2rem; }
  .raw-anchor-nav a { padding: .32rem .55rem; }
  .raw-alert { flex-direction: column; }
  .raw-filter-grid { grid-template-columns: 1fr; }
  .raw-json-block { max-inline-size: 72vw; }
}


.theme-swatches, .theme-summary {
  --preview-primary: #2563eb;
  --preview-accent: #22c55e;
}
.theme-swatches {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .55rem;
}
.theme-summary .theme-swatches { margin-top: 0; }
.theme-swatch-large {
  display: inline-block;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .8rem;
  background: var(--swatch-color, var(--preview-primary));
  border: 1px solid rgba(15, 23, 42, .18);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .5), 0 10px 22px rgba(15, 23, 42, .12);
}
.theme-swatch-large[data-theme-swatch="primary"] { --swatch-color: var(--preview-primary); }
.theme-swatch-large[data-theme-swatch="accent"] { --swatch-color: var(--preview-accent); }
.field input[data-theme-color] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: lowercase; }
.field input[data-theme-color][aria-invalid="true"] { border-color: var(--red); }
.prewrap { white-space: pre-wrap; line-height: 1.6; color: #475569; }

.mailer-thread-page {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.mailer-thread-page > *,
.mailer-thread-page .panel,
.mailer-thread-page .hero-panel,
.mailer-thread-shell > *,
.mailer-message-card,
.mailer-message-title,
.mailer-message-body {
  min-width: 0;
}
.mailer-thread-hero {
  align-items: stretch;
}
.mailer-thread-hero > div:first-child {
  min-width: 0;
}
.mailer-thread-hero h2 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.mailer-thread-hero .prewrap,
.mailer-thread-hero code,
.mailer-message-card code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mailer-thread-actions {
  background: rgba(255, 255, 255, .96);
}
.mailer-thread-actions .panel-header {
  margin-bottom: .65rem;
}
.mailer-thread-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem);
  gap: 1rem;
  align-items: start;
  min-width: 0;
}
.mailer-latest-inbound,
.mailer-conversation-panel,
.mailer-reply-panel {
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}
.mailer-latest-inbound {
  border-color: rgba(4, 120, 87, .22);
  background:
    linear-gradient(135deg, rgba(4, 120, 87, .08), rgba(37, 99, 235, .05)),
    rgba(255, 255, 255, .98);
}
.mailer-latest-inbound .panel-header h2 {
  margin-bottom: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.mailer-reply-panel {
  position: sticky;
  top: 1rem;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.mailer-reply-panel .hint {
  margin-bottom: .9rem;
  line-height: 1.5;
}
.mailer-message-list {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mailer-message-item {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  min-width: 0;
}
.mailer-message-dot {
  inline-size: .8rem;
  block-size: .8rem;
  margin-top: 1rem;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 .32rem rgba(100, 116, 139, .12);
}
.mailer-message-dot.inbound {
  background: var(--green);
  box-shadow: 0 0 0 .32rem rgba(4, 120, 87, .13);
}
.mailer-message-dot.outbound {
  background: var(--blue);
  box-shadow: 0 0 0 .32rem rgba(37, 99, 235, .13);
}
.mailer-message-card {
  padding: .95rem;
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  overflow: hidden;
}
.mailer-message-card.inbound {
  border-color: rgba(4, 120, 87, .22);
  background: linear-gradient(180deg, rgba(240, 253, 244, .92), #ffffff);
}
.mailer-message-card.outbound {
  border-color: rgba(37, 99, 235, .18);
  background: linear-gradient(180deg, rgba(239, 246, 255, .92), #ffffff);
}
.mailer-message-card.is-highlight {
  padding: 1rem;
  border-color: rgba(4, 120, 87, .28);
}
.mailer-message-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .45rem .9rem;
  min-width: 0;
}
.mailer-message-title {
  display: grid;
  gap: .18rem;
  flex: 1 1 18rem;
}
.mailer-message-title strong,
.mailer-message-title small,
.mailer-message-time {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mailer-message-title strong {
  color: #0f172a;
}
.mailer-message-time {
  flex: 0 1 16rem;
  text-align: right;
}
.mailer-message-body {
  margin: .85rem 0 0;
  color: #334155;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mailer-provider-meta {
  display: block;
  margin-top: .8rem;
}
.mailer-provider-meta code {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mailer-html-details,
.mailer-html-compose {
  margin-top: .85rem;
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: .9rem;
  background: rgba(248, 250, 252, .82);
}
.mailer-html-details summary,
.mailer-html-compose summary {
  cursor: pointer;
  padding: .65rem .8rem;
  color: #334155;
  font-weight: 850;
}
.mailer-html-details[open] summary,
.mailer-html-compose[open] summary {
  border-bottom: 1px solid rgba(100, 116, 139, .16);
}
.mailer-html-details pre {
  max-width: 100%;
  max-height: 18rem;
  margin: .8rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mailer-html-compose .field {
  padding: .8rem;
}
.mailer-reply-form textarea {
  resize: vertical;
  line-height: 1.55;
}
.mailer-reply-form #reply-text-body {
  min-block-size: 14rem;
}
.mailer-reply-form #reply-html-body {
  min-block-size: 9rem;
}
.mailer-reply-panel .button.full {
  min-height: 3rem;
}
.mailer-empty-state {
  padding: .9rem;
  border: 1px dashed rgba(100, 116, 139, .32);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .72);
  color: var(--muted);
  font-weight: 750;
}

@media (max-width: 1100px) {
  .mailer-thread-shell {
    grid-template-columns: 1fr;
  }
  .mailer-reply-panel {
    position: static;
    order: -1;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .mailer-thread-actions .actions form,
  .mailer-thread-actions .button {
    width: 100%;
  }
  .mailer-message-item {
    grid-template-columns: 1fr;
  }
  .mailer-message-dot {
    display: none;
  }
  .mailer-message-header {
    flex-direction: column;
  }
  .mailer-message-time {
    flex-basis: auto;
    text-align: left;
  }
}

.inference-hero { container-type: inline-size; }
.endpoint-card {
  display: grid;
  gap: .35rem;
  min-width: min(100%, 22rem);
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-soft);
}
.endpoint-card code { word-break: break-word; }
.runtime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  align-items: start;
}
.runtime-card {
  container-type: inline-size;
  min-width: 0;
  align-self: start;
  align-content: start;
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68));
  box-shadow: var(--shadow-soft);
}
.runtime-card .card-head,
.runtime-card .card-head > div,
.runtime-card .field,
.runtime-card dd { min-width: 0; }
.runtime-card h3,
.runtime-card code,
.runtime-card dd { overflow-wrap: anywhere; }
.runtime-card h3 { margin-bottom: .25rem; }
.connect-runtime-panel {
  border-color: rgba(124, 58, 237, .24);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .09), rgba(124, 58, 237, .09)),
    var(--panel);
}
.account-create-form { margin-top: .95rem; }
.account-create-form .form-grid { gap: .85rem; }
.account-create-form .field input,
.account-create-form .field select {
  min-height: 2.8rem;
}
.runtime-edit-panel {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .68);
  overflow: hidden;
}
.runtime-edit-panel summary {
  padding: .75rem .85rem;
  cursor: pointer;
  color: #1e3a8a;
  font-weight: 900;
}
.runtime-edit-body {
  display: grid;
  gap: .8rem;
  padding: .85rem;
  border-top: 1px solid var(--line);
}
.runtime-edit-form .form-grid { grid-template-columns: 1fr; gap: .75rem; }
.inline-field {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: .55rem;
}
.inline-field label { padding: 0; }
.runtime-delete-form { margin: 0; padding-top: .8rem; border-top: 1px solid rgba(190, 18, 60, .16); }
.runtime-connect-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem .7rem;
  align-items: end;
  margin-top: .9rem;
}
.runtime-connect-form.compact { margin-top: .65rem; }
.runtime-connect-form label {
  grid-column: 1 / -1;
  color: #1e293b;
  font-weight: 850;
}
.runtime-connect-form select {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid rgba(100, 116, 139, .34);
  border-radius: .95rem;
  background: rgba(255, 255, 255, .95);
  color: var(--text);
  padding: .72rem .8rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
.runtime-connect-form select:focus {
  border-color: rgba(37, 99, 235, .54);
  background: #ffffff;
}
.advanced-runtime-panel { padding: 0; overflow: hidden; }
.advanced-disclosure summary {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: 1rem 1.1rem;
  cursor: pointer;
}
.advanced-disclosure summary::marker { color: #2563eb; }
.advanced-disclosure summary span:not(.eyebrow) {
  display: grid;
  gap: .2rem;
}
.advanced-disclosure summary strong {
  color: var(--text);
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.advanced-disclosure[open] summary {
  background: rgba(37, 99, 235, .06);
  border-bottom: 1px solid var(--line);
}
.advanced-disclosure-body { padding: 1rem 1.1rem 1.1rem; }
.runtime-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.runtime-actions form { margin: 0; }
.runtime-dl div { align-items: center; }
.runtime-error {
  max-height: 7rem;
  overflow: auto;
  padding: .65rem;
  border-radius: .9rem;
  background: rgba(190, 18, 60, .07);
}
.runtime-login-history, .device-code-box {
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .72);
}
.device-code-box { display: grid; gap: .4rem; place-items: center; text-align: center; }
.device-code-box strong { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: clamp(1.2rem, 5vw, 2rem); letter-spacing: .06em; }
.device-code-box.compact {
  place-items: start;
  text-align: left;
}
.device-code-box.compact strong {
  font-size: clamp(1rem, 3vw, 1.35rem);
}
.connected-note {
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid rgba(4, 120, 87, .18);
  border-radius: 1rem;
  background: rgba(4, 120, 87, .08);
  color: #065f46;
  font-weight: 850;
}
.connected-detail,
.login-meta {
  display: grid;
  gap: .25rem;
}
.connected-detail span,
.connected-detail small,
.login-meta {
  color: #334155;
  font-weight: 700;
}
.login-meta {
  margin: .45rem 0 0;
}
.login-meta strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}
.rate-limits-box {
  display: grid;
  gap: .65rem;
  padding: .75rem;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .74);
}
.rate-limits-head,
.rate-limit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
}
.rate-limits-head strong {
  display: block;
  color: #0f172a;
  text-transform: capitalize;
}
.rate-limit-list {
  list-style: none;
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
}
.rate-limit-row {
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .72);
}
.rate-limit-row.warn {
  border-color: rgba(180, 83, 9, .22);
  background: rgba(180, 83, 9, .07);
}
.rate-limit-row.bad {
  border-color: rgba(190, 18, 60, .22);
  background: rgba(190, 18, 60, .07);
}
.rate-limit-copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.rate-limit-meter {
  display: grid;
  gap: .25rem;
  min-width: 7.5rem;
  text-align: right;
  color: #334155;
  font-weight: 850;
}
.rate-limit-meter progress {
  width: 100%;
  height: .62rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}
.rate-limit-meter progress::-webkit-progress-bar {
  background: #e2e8f0;
  border-radius: 999px;
}
.rate-limit-meter progress::-webkit-progress-value {
  background: linear-gradient(90deg, #2563eb, #22c55e);
  border-radius: 999px;
}
.rate-limit-meter progress::-moz-progress-bar {
  background: linear-gradient(90deg, #2563eb, #22c55e);
  border-radius: 999px;
}
.routing-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .65rem; color: #475569; line-height: 1.55; }
.login-job-panel { border-color: rgba(37, 99, 235, .24); background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(34, 197, 94, .07)), var(--panel); }
.status.good, .status.ready { background: rgba(4, 120, 87, .10); color: #065f46; border-color: rgba(4, 120, 87, .18); }
.status.login_required, .status.degraded { background: rgba(180, 83, 9, .12); color: #92400e; border-color: rgba(180, 83, 9, .22); }
.status.offline, .status.disabled { background: rgba(190, 18, 60, .10); color: #9f1239; border-color: rgba(190, 18, 60, .20); }
@container (max-width: 360px) {
  .runtime-actions { display: grid; }
  .runtime-actions .button { width: 100%; }
  .rate-limits-head,
  .rate-limit-row { align-items: flex-start; flex-direction: column; }
  .rate-limit-meter { min-width: 0; width: 100%; text-align: left; }
}
@container (max-width: 640px) {
  .inference-hero { flex-direction: column; }
  .endpoint-card { width: 100%; }
}

/* Mailing orchestration stage board */
.mailer-orchestration-hero .endpoint-card code { word-break: break-word; }
.orchestration-controls .actions,
.program-actions.actions {
  flex-wrap: wrap;
}
.compact-number {
  width: 7rem;
}
.compact-confirm {
  width: 7.5rem;
}
.mailing-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
  align-items: end;
}
.mailing-filter-grid label,
.inline-operator-form label {
  display: grid;
  gap: .35rem;
  color: #475569;
  font-weight: 800;
}
.mailing-filter-grid input,
.mailing-filter-grid select,
.inline-operator-form input,
.inline-operator-form select,
.danger-lite-form input {
  min-height: 2.35rem;
  border: 1px solid rgba(100, 116, 139, .28);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .92);
  padding: .45rem .65rem;
  color: #0f172a;
  font-weight: 750;
}
.inline-operator-form {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: end;
}
.danger-lite-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.button.danger {
  background: linear-gradient(135deg, #dc2626, #be123c);
  color: #fff;
}
.program-status-stack {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: .45rem;
}
.vertical-program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.vertical-program-card {
  display: grid;
  gap: .85rem;
}
.attached-program-list {
  display: grid;
  gap: .5rem;
}
.attached-program-list a {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .9rem;
  background: rgba(248, 250, 252, .82);
  text-decoration: none;
  color: #1e293b;
}
.program-card-grid,
.funnel-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .65rem;
  margin: 1rem 0;
}
.program-card-grid div,
.funnel-strip div {
  padding: .75rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .9rem;
  background: rgba(248, 250, 252, .84);
}
.program-card-grid span,
.funnel-strip span {
  display: block;
  color: #64748b;
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.program-card-grid strong,
.funnel-strip strong {
  display: block;
  margin-top: .15rem;
  color: #0f172a;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.program-card-grid small {
  display: block;
  margin-top: .2rem;
  color: #64748b;
}
.funnel-strip div.hot {
  border-color: rgba(37, 99, 235, .30);
  background: rgba(37, 99, 235, .08);
}
.mailing-trends-panel {
  display: grid;
  gap: 1rem;
}
.mailing-trend-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
  align-items: end;
  gap: .35rem;
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, .72), rgba(255, 255, 255, .92));
}
.trend-day {
  min-height: 10rem;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: .35rem;
  position: relative;
}
.trend-bar {
  display: block;
  width: 100%;
  min-height: .25rem;
  border-radius: .45rem .45rem .2rem .2rem;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  grid-row: 1;
  align-self: end;
}
.trend-bar.due {
  position: absolute;
  bottom: 1.55rem;
  left: 0;
  width: 45%;
  background: linear-gradient(180deg, rgba(245, 158, 11, .85), rgba(217, 119, 6, .8));
}
.trend-bar.sent {
  margin-left: 50%;
  width: 50%;
}
.trend-day small {
  color: #64748b;
  font-size: .65rem;
  font-weight: 800;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
}
.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  color: #64748b;
  font-weight: 800;
}
.legend-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  display: inline-block;
}
.legend-dot.due { background: #d97706; }
.legend-dot.sent { background: #2563eb; }
.snapshot-banner {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  align-items: center;
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 1rem;
  background: rgba(37, 99, 235, .06);
  color: #334155;
}
.snapshot-banner.warning {
  border-color: rgba(180, 83, 9, .22);
  background: rgba(180, 83, 9, .08);
}
.stage-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.stage-card {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}
.stage-card.fallback {
  border-color: rgba(99, 102, 241, .25);
  background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(255, 255, 255, .88));
}
.stage-card.due {
  border-color: rgba(37, 99, 235, .30);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .10);
}
.stage-card-header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
}
.stage-card-header h3 {
  margin: .15rem 0 .2rem;
  color: #0f172a;
}
.stage-order {
  display: inline-flex;
  color: #64748b;
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stage-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.stage-metrics div {
  padding: .55rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .8rem;
  background: rgba(248, 250, 252, .84);
}
.stage-metrics div.hot {
  border-color: rgba(37, 99, 235, .30);
  background: rgba(37, 99, 235, .08);
}
.stage-metrics span,
.stage-template-line .tiny {
  display: block;
  color: #64748b;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stage-metrics strong {
  display: block;
  margin-top: .15rem;
  color: #0f172a;
  font-size: 1.25rem;
}
.stage-template-line {
  display: grid;
  gap: .2rem;
  padding-top: .2rem;
}
.stage-profiles summary,
.stage-json summary,
.sequence-editor summary {
  cursor: pointer;
  color: #1d4ed8;
  font-weight: 800;
}
.profile-mini-list {
  list-style: none;
  display: grid;
  gap: .55rem;
  margin: .75rem 0 0;
  padding: 0;
}
.profile-mini-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: .8rem;
  background: #fff;
}
.profile-mini-list small {
  display: block;
  color: #64748b;
}
.button.tiny {
  padding: .35rem .55rem;
  font-size: .75rem;
}
.metric-card.warning {
  border-color: rgba(180, 83, 9, .20);
  background: rgba(180, 83, 9, .06);
}
@container (max-width: 640px) {
  .program-status-stack { align-items: flex-start; }
  .stage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-mini-list li { align-items: flex-start; flex-direction: column; }
}

/* Mailing orchestration cockpit v1.2 */
.mailing-cockpit-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 1rem;
  align-items: start;
}
.mailing-cockpit-control {
  display: grid;
  grid-template-columns: minmax(200px, .36fr) minmax(0, 1fr);
  gap: .65rem .9rem;
  align-items: start;
  align-content: start;
  min-width: 0;
  padding: .95rem;
  border-color: rgba(37, 99, 235, .18);
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(14, 165, 233, .06)), var(--panel);
  box-shadow: var(--shadow-soft);
}
.mailing-cockpit-control .cockpit-filter-form {
  grid-column: auto;
}
.cockpit-control-copy h2 {
  margin: .15rem 0 .35rem;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
}
.cockpit-help summary,
.operator-actions-panel summary,
.audit-trail-panel > summary {
  cursor: pointer;
  color: #1d4ed8;
  font-weight: 850;
}
.cockpit-help p { margin: .45rem 0 0; color: #475569; line-height: 1.5; }
.cockpit-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: end;
  min-width: 0;
}
.cockpit-filter-form label,
.operator-action-card label {
  display: grid;
  gap: .3rem;
  color: #475569;
  font-weight: 850;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.cockpit-filter-form label {
  min-width: 0;
}
.cockpit-filter-form label:nth-of-type(1) { flex: 0 1 7.5rem; }
.cockpit-filter-form label:nth-of-type(2) { flex: 1 1 10rem; }
.cockpit-filter-form label:nth-of-type(3) { flex: 2 1 18rem; }
.cockpit-filter-form label:nth-of-type(4) { flex: 0 1 7rem; }
.cockpit-filter-form input,
.cockpit-filter-form select {
  width: 100%;
  min-height: 2.2rem;
  border: 1px solid rgba(100, 116, 139, .25);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .95);
  padding: .45rem .65rem;
  color: #0f172a;
  font-weight: 760;
}
.cockpit-filter-form .button {
  flex: 0 0 auto;
  min-height: 2.2rem;
  padding: .5rem .85rem;
}
.cockpit-quick-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  margin-top: .1rem;
}
.hourly-mailer-card {
  display: grid;
  align-content: start;
  gap: .62rem;
  padding: .85rem;
  border-color: rgba(37, 99, 235, .18);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, .14), transparent 12rem),
    rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-soft);
}
.hourly-mailer-card.success { border-color: rgba(5, 150, 105, .26); }
.hourly-mailer-card.warning { border-color: rgba(217, 119, 6, .30); background: linear-gradient(135deg, rgba(255, 251, 235, .88), rgba(255, 255, 255, .94)); }
.hourly-mailer-card.danger { border-color: rgba(220, 38, 38, .30); background: linear-gradient(135deg, rgba(254, 242, 242, .9), rgba(255, 255, 255, .94)); }
.hourly-mailer-card header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
}
.hourly-mailer-card h2 {
  margin-bottom: 0;
  font-size: 1.15rem;
}
.hourly-rate-grid,
.hourly-provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}
.hourly-provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hourly-rate-grid div,
.hourly-provider-grid div {
  min-width: 0;
  padding: .48rem .52rem;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: .85rem;
  background: rgba(248, 250, 252, .92);
}
.hourly-rate-grid span,
.hourly-provider-grid span {
  display: block;
  color: #64748b;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.hourly-rate-grid strong,
.hourly-provider-grid strong {
  display: block;
  margin-top: .25rem;
  color: #0f172a;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.hourly-health-lines {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.hourly-health-lines span {
  display: inline-flex;
  align-items: center;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, .08);
  color: #1e40af;
  font-size: .76rem;
  font-weight: 900;
}
.hourly-mailer-card.warning .hourly-health-lines span { background: rgba(245, 158, 11, .12); color: #92400e; }
.hourly-mailer-card.danger .hourly-health-lines span { background: rgba(248, 113, 113, .13); color: #9f1239; }
.hourly-mailer-card > small {
  color: #64748b;
  line-height: 1.35;
}
.cockpit-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .8rem;
}
.cockpit-summary-card {
  min-height: 8.25rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .06);
}
.cockpit-summary-card span,
.cockpit-program-card .eyebrow,
.funnel-node-top span {
  display: block;
  color: #64748b;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cockpit-summary-card strong {
  display: block;
  margin-top: .45rem;
  color: #0f172a;
  font-size: clamp(1.55rem, 2.5vw, 2.45rem);
  line-height: 1;
  overflow-wrap: anywhere;
}
.cockpit-summary-card.metric-client strong {
  font-size: clamp(1.15rem, 1.8vw, 1.85rem);
}
.cockpit-summary-card small,
.cockpit-program-card small,
.cockpit-program-card .program-card-stats {
  display: block;
  margin-top: .45rem;
  color: #64748b;
  line-height: 1.35;
}
.cockpit-summary-card.warning { border-color: rgba(217, 119, 6, .32); background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(255,255,255,.94)); }
.cockpit-summary-card.success { border-color: rgba(5, 150, 105, .28); background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(255,255,255,.94)); }
.cockpit-summary-card.danger { border-color: rgba(220, 38, 38, .30); background: linear-gradient(135deg, rgba(248, 113, 113, .12), rgba(255,255,255,.94)); }
.capacity-stakan-panel {
  display: grid;
  gap: 1rem;
  container-type: inline-size;
}
.capacity-alerts {
  display: grid;
  gap: .55rem;
}
.capacity-alert {
  display: grid;
  gap: .2rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: .95rem;
  background: rgba(248, 250, 252, .9);
}
.capacity-alert strong { color: #0f172a; }
.capacity-alert span { color: #475569; }
.capacity-alert.danger { border-color: rgba(220, 38, 38, .28); background: rgba(254, 242, 242, .9); }
.capacity-alert.warning,
.capacity-alert.warn { border-color: rgba(217, 119, 6, .28); background: rgba(255, 251, 235, .9); }
.capacity-stakan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: .75rem;
}
.capacity-day-card {
  display: grid;
  gap: .7rem;
  padding: .85rem;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 1rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .05);
}
.capacity-day-card.overflow { border-color: rgba(220, 38, 38, .32); background: linear-gradient(135deg, rgba(254, 242, 242, .9), rgba(255,255,255,.92)); }
.capacity-day-card.underfilled { border-color: rgba(217, 119, 6, .30); background: linear-gradient(135deg, rgba(255, 251, 235, .92), rgba(255,255,255,.92)); }
.capacity-day-card header {
  display: flex;
  justify-content: space-between;
  gap: .65rem;
  align-items: baseline;
}
.capacity-day-card header span {
  color: #64748b;
  font-size: .72rem;
  font-weight: 850;
}
.capacity-day-card header strong { color: #0f172a; }
.capacity-day-meter {
  height: .7rem;
  border-radius: 999px;
  background: rgba(226, 232, 240, .95);
  overflow: hidden;
}
.capacity-day-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}
.capacity-day-card.overflow .capacity-day-meter span { background: linear-gradient(90deg, #dc2626, #f97316); }
.capacity-day-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin: 0;
}
.capacity-day-card dl div {
  padding: .45rem;
  border-radius: .75rem;
  background: rgba(248, 250, 252, .9);
}
.capacity-day-card dt {
  color: #64748b;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.capacity-day-card dd {
  margin: .15rem 0 0;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 900;
}
.capacity-day-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.capacity-day-card details summary {
  cursor: pointer;
  color: #1d4ed8;
  font-weight: 800;
}
.capacity-day-card ul {
  margin: .45rem 0 0 1rem;
  padding: 0;
  color: #475569;
  font-size: .8rem;
}
@container (min-width: 760px) {
  .capacity-alerts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cockpit-program-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .8rem;
}
.cockpit-program-card {
  display: grid;
  gap: .2rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 1rem;
  background: rgba(239, 246, 255, .76);
  text-decoration: none;
  color: #0f172a;
}
.cockpit-program-card strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.cockpit-program-card.stale { border-color: rgba(217, 119, 6, .24); background: rgba(255, 251, 235, .72); }
.mailing-trends-panel.compact .mailing-trend-chart { min-height: 8rem; }
.mailing-trends-panel.compact .trend-day { min-height: 6.5rem; }
.mailing-program-cockpit { display: grid; gap: 1rem; }
.program-cockpit-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.program-cockpit-header h2 { margin: .15rem 0 .3rem; }
.program-card-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0;
}
.cockpit-funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  align-items: stretch;
}
.cockpit-funnel-node {
  position: relative;
  display: grid;
  gap: .55rem;
  padding: .9rem;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 1rem;
  background: rgba(255,255,255,.9);
  overflow: hidden;
}
.cockpit-funnel-node.step { border-color: rgba(37, 99, 235, .20); }
.cockpit-funnel-node.fallback { border-color: rgba(99, 102, 241, .25); background: linear-gradient(135deg, rgba(99, 102, 241, .09), rgba(255,255,255,.92)); }
.cockpit-funnel-node.exit { border-color: rgba(5, 150, 105, .22); }
.cockpit-funnel-node.warning { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .16); }
.cockpit-funnel-node.danger { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .16); }
.funnel-node-top { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.funnel-node-top strong { color: #0f172a; font-size: 1.55rem; line-height: 1; }
.funnel-meter {
  height: .65rem;
  border-radius: 999px;
  background: rgba(226, 232, 240, .92);
  overflow: hidden;
}
.funnel-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}
.cockpit-funnel-node.fallback .funnel-meter span { background: linear-gradient(90deg, #6366f1, #a855f7); }
.cockpit-funnel-node.exit .funnel-meter span { background: linear-gradient(90deg, #059669, #14b8a6); }
.cockpit-funnel-node small { color: #64748b; line-height: 1.35; }
.funnel-submetrics {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.funnel-submetrics span {
  padding: .25rem .42rem;
  border-radius: 999px;
  background: rgba(241, 245, 249, .92);
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
}
.stage-board.compact { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.stage-card.compact { padding: .85rem; gap: .7rem; }
.stage-card.compact .stage-card-header { display: block; }
.stage-card.compact h3 { font-size: 1rem; }
.stage-metrics.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.stage-metrics.compact div { padding: .45rem; }
.stage-metrics.compact strong { font-size: 1rem; }
.stage-template-line {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
}
.stage-trigger-diagnostics {
  display: grid;
  gap: .45rem;
  padding: .55rem;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: .85rem;
  background: rgba(239, 246, 255, .56);
}
.stage-trigger-diagnostics small {
  display: block;
  margin-bottom: .25rem;
  color: #1d4ed8;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stage-trigger-diagnostics p {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
}
.stage-trigger-diagnostics .tiny {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .18rem .42rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .26);
}
.operator-actions-panel {
  border: 1px dashed rgba(37, 99, 235, .24);
  border-radius: 1rem;
  padding: .9rem 1rem;
  background: rgba(248, 250, 252, .78);
}
.operator-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
  margin-top: .85rem;
}
.operator-action-card {
  display: grid;
  gap: .45rem;
  padding: .8rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .9rem;
  background: rgba(255,255,255,.88);
}
.operator-action-card strong { color: #0f172a; }
.operator-action-card small { color: #64748b; line-height: 1.35; }
.command-cookbook {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
}
.command-cookbook div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
}
.command-cookbook span { color: #475569; font-weight: 850; }
.command-cookbook code { white-space: normal; overflow-wrap: anywhere; }
.audit-trail-panel { display: block; }
.audit-trail-panel > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.audit-trail-panel > summary span { color: #0f172a; font-size: 1.15rem; }
.audit-trail-panel > summary small { color: #64748b; }
.audit-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.empty-cockpit { display: grid; gap: .8rem; }
@media (max-width: 1200px) {
  .mailing-cockpit-top-grid { grid-template-columns: 1fr; }
  .mailing-cockpit-control { grid-template-columns: 1fr; }
  .cockpit-quick-actions { justify-content: flex-start; }
  .cockpit-summary-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
}
@media (max-width: 760px) {
  .cockpit-filter-form { grid-template-columns: 1fr 1fr; }
  .cockpit-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-cockpit-header { flex-direction: column; }
  .stage-metrics.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-cookbook div { grid-template-columns: 1fr; }
}
.section-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-top: .4rem;
}
.section-kicker h3 { margin: .1rem 0 0; color: #0f172a; font-size: 1.05rem; }
@media (max-width: 760px) {
  .section-kicker { align-items: flex-start; flex-direction: column; }
}

/* Mailing template approval governance */
.template-kicker { margin-top: .25rem; }
.template-governance-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  padding: .85rem;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(239, 246, 255, .78), rgba(255, 255, 255, .92));
}
.template-governance-card {
  display: grid;
  gap: .4rem;
  min-height: 7.5rem;
  padding: .85rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .95rem;
  background: rgba(255, 255, 255, .9);
}
.template-governance-card > span,
.template-stage-card header > span {
  color: #64748b;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.template-governance-card strong { color: #0f172a; overflow-wrap: anywhere; }
.template-governance-card small { color: #64748b; line-height: 1.35; }
.template-governance-card code { width: fit-content; }
.template-governance-card.success { border-color: rgba(5, 150, 105, .24); background: rgba(236, 253, 245, .72); }
.template-governance-card.warning { border-color: rgba(217, 119, 6, .28); background: rgba(255, 251, 235, .78); }
.template-map-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .2rem .15rem 0;
}
.template-map-heading p { margin: 0; }
.template-map-heading strong { color: #0f172a; font-size: 1.02rem; }
.template-stage-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
}
.template-stage-card {
  display: grid;
  gap: .65rem;
  padding: .9rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 1rem;
  background: rgba(255,255,255,.92);
}
.template-stage-card.fallback { border-color: rgba(99, 102, 241, .25); background: linear-gradient(135deg, rgba(99, 102, 241, .09), rgba(255,255,255,.92)); }
.template-stage-card.stage-order-2 { border-color: rgba(20, 184, 166, .28); background: linear-gradient(135deg, rgba(236, 253, 248, .9), rgba(255,255,255,.94)); }
.template-stage-card.stage-order-3 { border-color: rgba(15, 23, 42, .30); background: linear-gradient(135deg, rgba(15, 23, 42, .09), rgba(255,255,255,.92)); }
.template-stage-card.stage-order-4 { border-color: rgba(249, 115, 22, .30); background: linear-gradient(135deg, rgba(255, 247, 237, .95), rgba(255,255,255,.92)); }
.template-stage-card header { display: grid; gap: .2rem; }
.template-stage-card h4 { margin: 0; color: #0f172a; font-size: 1rem; }
.template-stage-card p { margin: 0; color: #475569; line-height: 1.45; }
.template-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.template-chip {
  display: inline-grid;
  gap: .12rem;
  min-width: min(100%, 13rem);
  padding: .45rem .6rem;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: .8rem;
  background: rgba(239, 246, 255, .76);
}
.template-chip strong { color: #1d4ed8; font-size: .78rem; overflow-wrap: anywhere; }
.template-chip small { color: #64748b; font-size: .72rem; line-height: 1.25; }
.template-chip.warning { border-color: rgba(217, 119, 6, .28); background: rgba(255, 251, 235, .82); }
.template-stage-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.template-stage-card footer span,
.branch-map-list span {
  padding: .22rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(248, 250, 252, .92);
  color: #475569;
  font-size: .74rem;
  font-weight: 800;
}
.template-stage-card details summary {
  cursor: pointer;
  color: #1d4ed8;
  font-weight: 850;
}
.branch-map-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .45rem;
}

/* Server observability */
.observability-hero {
  container-type: inline-size;
}
.observability-summary {
  container-type: inline-size;
}
.block {
  display: block;
  margin-top: .22rem;
}
.inline-list {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inline-list li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.compact-panel {
  display: grid;
  gap: .35rem;
  min-height: 8rem;
}
.compact-panel h2,
.observability-chart-card h2 {
  margin-bottom: .1rem;
  font-size: 1rem;
}
.range-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.observability-table th,
.observability-table td {
  min-width: 9rem;
}
.load-cell {
  display: grid;
  grid-template-columns: 6rem minmax(8rem, 1fr);
  gap: .65rem;
  align-items: center;
}
.sparkline,
.observability-chart {
  display: block;
  width: 100%;
  min-height: 2rem;
  overflow: visible;
}
.sparkline {
  height: 2rem;
  border-radius: .75rem;
  background: linear-gradient(180deg, rgba(239, 246, 255, .95), rgba(255, 255, 255, .78));
}
.observability-chart-grid,
.observability-specs {
  container-type: inline-size;
}
.observability-chart-card {
  min-width: 0;
}
.observability-chart {
  height: 12rem;
  border-radius: 1rem;
  background:
    linear-gradient(rgba(148, 163, 184, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .13) 1px, transparent 1px),
    rgba(248, 250, 252, .86);
  background-size: 100% 25%, 16.66% 100%, auto;
  border: 1px solid rgba(148, 163, 184, .20);
}
.observability-chart path,
.sparkline path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparkline path {
  stroke-width: 4;
}
.observability-chart circle,
.sparkline circle {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 2;
}
.empty-state {
  display: grid;
  place-items: center;
  min-height: 12rem;
  margin: 0;
  border: 1px dashed rgba(100, 116, 139, .32);
  border-radius: 1rem;
  color: var(--muted);
  background: rgba(248, 250, 252, .66);
  text-align: center;
}
.grafana-panel {
  min-width: 0;
}
.grafana-frame {
  width: 100%;
  min-height: 42rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 1.1rem;
  background: #ffffff;
}
@container (max-width: 620px) {
  .load-cell {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .observability-chart-grid.grid.two,
  .observability-specs.grid.three {
    grid-template-columns: 1fr;
  }
}