:root,
[data-theme="dark"] {
  --bg: #0a0c0f;
  --panel: #111418;
  --panel2: #171b20;
  --line: #242a32;
  --text: #e7ebf0;
  --muted: #8d97a5;
  --accent: #c3f53c;
  --link: #c3f53c;
  --sent: #3dd6c4;
  --deferred: #f5b33d;
  --bounced: #ff6b6b;
  --rejected: #ac98ff;
  --queued: #7cb7ff;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f2f4f6;
  --panel: #ffffff;
  --panel2: #f6f7f9;
  --line: #dfe3e8;
  --text: #0e1116;
  --muted: #586271;
  --accent: #3f6b06;
  --link: #3f6b06;
  --sent: #0c8276;
  --deferred: #a9650a;
  --bounced: #cc3838;
  --rejected: #6650d0;
  --queued: #2563b8;
  color-scheme: light;
}

:root, [data-density="compact"] { --py: 6px; --px: 12px; --fs: 13px; --gap: 12px; }
[data-density="comfortable"] { --py: 11px; --px: 16px; --fs: 14px; --gap: 18px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs)/1.5 Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono, kbd, pre { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
button { font: inherit; color: inherit; cursor: pointer; }
h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
h2 { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
h2 a { color: var(--text); }
h3 { margin: 16px 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* top bar */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px clamp(16px, 2vw, 28px);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 16px; }
.brand:hover { text-decoration: none; }
[data-theme="dark"] .brand img { background: #f3e5d3; border-radius: 50%; padding: 1px; }
.search {
  flex: 1 1 320px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.search:focus-within { border-color: var(--accent); }
.search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
kbd { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.top-right { display: flex; align-items: center; gap: 8px; }
.top-right form { margin: 0; }
.live { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; margin-right: 4px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live i.on { background: var(--sent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sent) 20%, transparent); }
.icon { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); display: grid; place-items: center; }
.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[data-theme="dark"] .icon .moon, [data-theme="light"] .icon .sun { display: none; }
.link { border: 0; background: none; color: var(--muted); padding: 6px 4px; }
.link:hover { color: var(--text); }

/* section tabs and pickers */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
  padding: 0 clamp(16px, 2vw, 28px);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.tabs > a { display: flex; align-items: center; gap: 7px; height: 44px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; }
.tabs > a:hover { color: var(--text); text-decoration: none; }
.tabs > a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
.count { font-family: "Geist Mono", monospace; font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.count.firing { background: color-mix(in srgb, var(--bounced) 18%, transparent); border-color: transparent; color: var(--bounced); }
.pickers { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; border: 1px solid var(--line); }
.seg a { padding: 3px 10px; border-radius: 6px; color: var(--muted); font-weight: 600; }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a[aria-current] { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 5px 28px 5px 11px; border: 1px solid var(--line); border-radius: 8px; font-weight: 500; white-space: nowrap; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "▾"; position: absolute; right: 10px; color: var(--muted); }
.menu > div {
  position: absolute; right: 0; z-index: 10; min-width: 100%; margin-top: 4px; padding: 4px; max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
}
.menu > div a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--text); white-space: nowrap; }
.menu > div a:hover { background: var(--panel2); text-decoration: none; }
.menu > div a[aria-current] { box-shadow: inset 3px 0 0 var(--accent); }

main { padding: 18px clamp(16px, 2vw, 28px) 40px; display: flex; flex-direction: column; gap: var(--gap); }
footer { padding: 0 clamp(16px, 2vw, 28px) 28px; color: var(--muted); font-size: 12px; }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.panel-head > :first-child { margin-right: auto; }
.panel.flush .panel-head { padding: 12px 16px 0; margin-bottom: 8px; }
.panel-head a { font-size: 12px; }
.sub { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); margin: 0; }
.panel.flush .empty { padding: 4px 16px 14px; }
.lede { color: var(--muted); margin: 0; }
.label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 0; }
.kpis > * { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-right: 1px solid var(--line); color: var(--text); }
.kpis > *:last-child { border-right: 0; }
.kpis a:hover { background: var(--panel2); text-decoration: none; }
.kpis strong { font-family: "Geist Mono", monospace; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.kpis em { font-style: normal; font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--muted); }
.t-sent { color: var(--sent); }
.t-deferred { color: var(--deferred); }
.t-bounced { color: var(--bounced); }
.t-rejected { color: var(--rejected); }

.split { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.split-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.split-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

/* chart */
.legend { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.legend li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; }
.legend .sent::before { background: var(--sent); }
.legend .deferred::before { background: var(--deferred); }
.legend .bounced::before { background: var(--bounced); }
.legend .rejected::before { background: var(--rejected); }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11px; font-family: "Geist Mono", monospace; text-anchor: middle; }
.chart text.max { text-anchor: start; }
.chart .axis { stroke: var(--line); }
.chart .grid { stroke: var(--line); stroke-dasharray: 3 4; }
.chart .hit { fill: transparent; }
.chart g:hover .hit { fill: var(--panel2); }
.chart .sent { fill: var(--sent); }
.chart .deferred { fill: var(--deferred); }
.chart .bounced { fill: var(--bounced); }
.chart .rejected { fill: var(--rejected); }

/* tables */
.scroll { overflow-x: auto; }
.scroll table { min-width: 900px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--py) var(--px); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
th { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-top: 0; white-space: nowrap; }
tbody tr:hover { background: var(--panel2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subject { max-width: 320px; }
.response { width: 40%; color: var(--muted); overflow-wrap: anywhere; }
td.response { font-size: 0.95em; }
.more { color: var(--muted); font-size: 12px; }
.wrap { overflow-wrap: anywhere; }

.badge { display: inline-block; padding: 0 7px; border-radius: 6px; font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; line-height: 1.7; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.s-sent, .s-clean, .s-pass { background: color-mix(in srgb, var(--sent) 15%, transparent); color: var(--sent); }
.s-deferred { background: color-mix(in srgb, var(--deferred) 16%, transparent); color: var(--deferred); }
.s-bounced, .s-expired, .s-listed, .s-deleted { background: color-mix(in srgb, var(--bounced) 15%, transparent); color: var(--bounced); }
.s-rejected, .s-discarded { background: color-mix(in srgb, var(--rejected) 16%, transparent); color: var(--rejected); }
.s-queued { background: color-mix(in srgb, var(--queued) 15%, transparent); color: var(--queued); }

/* messages */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chips a { padding: 3px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--panel); }
.chips a:hover { color: var(--text); text-decoration: none; }
.chips a[aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
.help { position: relative; }
.help summary { cursor: pointer; color: var(--muted); }
.help > div { position: absolute; right: 0; z-index: 10; width: min(560px, 90vw); margin-top: 6px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); }
.help p { margin: 0 0 10px; color: var(--muted); }
.help dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.help dd { margin: 0; color: var(--muted); }
.pager { display: flex; justify-content: space-between; }

/* message page */
.crumbs { margin: 0; color: var(--muted); }
.msghead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.msghead > div:first-child { flex: 1 1 360px; }
.msghead p { margin: 6px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-weight: 600; }
.btn:hover { text-decoration: none; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.facts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.facts dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.rcpt { display: flex; flex-direction: column; gap: 6px; }
.rcpt-head { display: flex; align-items: center; gap: 8px; }
.rcpt-head strong { flex: 1; overflow-wrap: anywhere; }
.raw { display: block; padding: 7px 9px; border-radius: 6px; background: var(--panel2); color: var(--muted); overflow-wrap: anywhere; }
.tabs-inline { display: flex; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid var(--line); margin: -4px 0 12px; }
.tabs-inline a { padding: 8px 0; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; }
.tabs-inline a:hover { color: var(--text); text-decoration: none; }
.tabs-inline a[aria-selected] { color: var(--text); border-bottom-color: var(--accent); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: var(--py) 0 var(--py) 20px; border-top: 1px solid var(--line); position: relative; }
.timeline li:first-child { border-top: 0; }
.timeline li::before { content: ""; position: absolute; left: 2px; top: calc(var(--py) + 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.timeline li.s-sent::before { background: var(--sent); }
.timeline li.s-deferred::before { background: var(--deferred); }
.timeline li.s-bounced::before, .timeline li.s-expired::before { background: var(--bounced); }
.timeline li.s-rejected::before { background: var(--rejected); }
.timeline li[class*=" s-"] { background: none; color: inherit; }
.timeline .when { color: var(--muted); }
.timeline strong { text-transform: capitalize; }
.timeline .line { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.headers { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.headers dt { font-size: 12px; }
.headers dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; font-size: 12px; }
.body-split { display: flex; flex-wrap: wrap; gap: var(--gap); }
.bodytext { flex: 3 1 420px; min-width: 0; }
.bodytext pre { margin: 0; padding: 14px; background: var(--panel2); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 520px; overflow: auto; }
.parts { flex: 1 1 220px; }
.parts p { margin: 0 0 6px; color: var(--muted); }
.htmlpreview { width: 100%; height: 480px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.log { margin: 0; padding: 14px; background: var(--panel2); border-radius: 8px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }

/* dashboard side panels */
.tail { list-style: none; margin: 0; padding: 0 0 4px; max-height: 420px; overflow: hidden; }
.tail li { display: flex; gap: 10px; padding: 6px 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
.tail li a { flex: 1; min-width: 0; color: var(--text); }
.tail li a:hover { text-decoration: none; }
.tail .when { color: var(--muted); }
.tail .to, .tail .what { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tail .what { color: var(--muted); font-size: 11.5px; }
.tail .new { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 18%, transparent); } }
.dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--muted); }
.dot.s-sent { background: var(--sent); }
.dot.s-deferred { background: var(--deferred); }
.dot.s-bounced, .dot.s-expired { background: var(--bounced); }
.dot.s-rejected, .dot.s-discarded { background: var(--rejected); }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.small { border: 1px solid var(--line); background: var(--panel2); border-radius: 6px; padding: 2px 9px; font-size: 12px; }
.ipline, .domline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ipline > :first-child, .domline > :first-child { flex: 1; min-width: 0; }
.ipline small { display: block; color: var(--muted); font-size: 11px; }
.zonebar { display: flex; gap: 3px; }
.zonebar i { width: 9px; height: 18px; border-radius: 3px; background: var(--muted); }
.zonebar .z-clean { background: var(--sent); }
.zonebar .z-listed { background: var(--bounced); }
.zonebar .z-error { background: var(--deferred); }

/* providers, servers */
.providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--gap); align-items: start; }
.rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rates div { display: flex; flex-direction: column; padding: 10px 12px; background: var(--panel2); border-radius: 8px; }
.rates strong { font-family: "Geist Mono", monospace; font-size: 20px; }
.rates em { font-style: normal; font-size: 12px; font-weight: 600; font-family: "Geist Mono", monospace; }
.good { color: var(--sent); }
.bad { color: var(--bounced); }
.flat { color: var(--muted); }
.responses { list-style: none; margin: 0; padding: 0; }
.responses li { padding: 8px 0; border-top: 1px solid var(--line); }
.responses .response { width: auto; margin-top: 4px; }
.ips { display: grid; gap: 14px; }
.ip-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.zones { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zones li { padding: 2px 9px; border-radius: 6px; font-size: 12px; border: 1px solid var(--line); cursor: help; }
.zones li::before { content: "●"; margin-right: 6px; color: var(--muted); }
.zones .z-clean::before { color: var(--sent); }
.zones .z-listed { border-color: var(--bounced); }
.zones .z-listed::before { color: var(--bounced); }
.zones .z-error::before { color: var(--deferred); }

/* sign in */
.login main { min-height: 100vh; display: grid; place-items: center; }
.signin { width: min(380px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 28px; }
.signin img { align-self: center; }
.signin h1 { text-align: center; font-size: 20px; margin-bottom: 8px; }
.signin label { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.signin input { height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; }
.signin input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.signin .btn { justify-content: center; margin-top: 14px; height: 42px; }
.error { margin: 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--bounced) 15%, transparent); color: var(--bounced); }

@media (max-width: 720px) {
  .brand span, .top kbd, .live { display: none; }
  .pickers { margin-left: 0; flex-wrap: wrap; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .providers { grid-template-columns: 1fr; }
}