/* exim.ro */
/*
 * "Signal": mail as light moving through a network. Deep-space canvas, a
 * slow aurora, glass layers with light edges, spectral accents, instrument
 * typography. Dark by default; "pearl" when the system asks for light.
 * Motion is decorative only and stops under prefers-reduced-motion.
 */

@font-face {
  font-family: "Unbounded";
  src: url(/static/fonts/unbounded-latin.22f9b928aa.woff2) format("woff2");
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Only the Romanian letters (ă â î ș ț, both forms) and typographic quotes. */
  font-family: "Unbounded";
  src: url(/static/fonts/unbounded-ro.770b8d1387.woff2) format("woff2");
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0102-0103, U+00C2, U+00E2, U+00CE, U+00EE, U+0218-021B, U+015E-015F, U+0162-0163, U+201E, U+201D, U+2013-2014, U+2026;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/static/fonts/jetbrainsmono-latin.83c005d49d.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/static/fonts/jetbrainsmono-latin-ext.db5ff4db83.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --void: #04060c;
  --bg: #070a13;
  --ink: #eaf0ff;
  --ink-2: #b9c4de;
  --muted: #8e9ab6;
  --line: rgba(160, 190, 255, 0.14);
  --line-2: rgba(160, 190, 255, 0.08);
  --glass: rgba(15, 20, 38, 0.8);
  --glass-2: rgba(28, 36, 64, 0.45);
  --glass-hi: rgba(255, 255, 255, 0.07);
  --code-bg: rgba(110, 243, 255, 0.07);
  --code-ink: #b8f6ff;
  --cyan: #6ef3ff;
  --violet: #a68bff;
  --magenta: #ff6bd1;
  --accent: #7fe9ff;
  --accent-ink: #041018;
  --ok: #00ff9d;
  --ok-bg: rgba(0, 255, 157, 0.1);
  --warn: #ffcf6b;
  --warn-bg: rgba(255, 207, 107, 0.1);
  --fail: #ff6f96;
  --fail-bg: rgba(255, 111, 150, 0.11);
  --error: #b9a4ff;
  --error-bg: rgba(185, 164, 255, 0.11);
  --info: #9fb0d4;
  --info-bg: rgba(159, 176, 212, 0.1);
  --focus: #7fe9ff;
  --aurora-1: rgba(64, 214, 255, 0.34);
  --aurora-2: rgba(140, 92, 255, 0.34);
  --aurora-3: rgba(255, 92, 200, 0.18);
  --grid: rgba(150, 190, 255, 0.07);
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  --display: "Unbounded", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --r: 18px;
  --r-sm: 10px;
  --wrap: 1392px; /* content 1360 px wide, the same as the header */
  --spectrum: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--magenta));
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --void: #e9edf6;
    --bg: #eef2f9;
    --ink: #0b1020;
    --ink-2: #333d58;
    --muted: #4f5a74;
    --line: rgba(40, 60, 120, 0.16);
    --line-2: rgba(40, 60, 120, 0.09);
    --glass: rgba(255, 255, 255, 0.8);
    --glass-2: rgba(255, 255, 255, 0.5);
    --glass-hi: rgba(255, 255, 255, 0.9);
    --code-bg: rgba(20, 90, 160, 0.07);
    --code-ink: #0b4a7a;
    --cyan: #066b88;
    --violet: #6a4de0;
    --magenta: #c2338f;
    --accent: #075a85;
    --accent-ink: #ffffff;
    --ok: #005c38;
    --ok-bg: rgba(0, 150, 90, 0.11);
    --warn: #8a5600;
    --warn-bg: rgba(200, 130, 0, 0.12);
    --fail: #a01538;
    --fail-bg: rgba(179, 24, 63, 0.09);
    --error: #5b3fc4;
    --error-bg: rgba(91, 63, 196, 0.1);
    --info: #4a5670;
    --info-bg: rgba(74, 86, 112, 0.09);
    --focus: #075a85;
    --aurora-1: rgba(80, 200, 255, 0.35);
    --aurora-2: rgba(150, 120, 255, 0.3);
    --aurora-3: rgba(255, 140, 210, 0.22);
    --grid: rgba(40, 60, 120, 0.07);
    --shadow: 0 30px 70px -45px rgba(20, 30, 70, 0.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } /* the home hero's floor and glow run to the screen edges */
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 15.5px/1.6 var(--sans);
  min-height: 100vh;
  overflow-x: clip; /* not hidden: that would make body a scroll container and break every position: sticky */
  position: relative;
}

/* ---------------------------------------------------------------- the sky */
/* Aurora: three soft light fields drifting very slowly (transform only). */
body::before {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 22% 18%, var(--aurora-1), transparent 70%),
    radial-gradient(42vmax 34vmax at 78% 12%, var(--aurora-2), transparent 70%),
    radial-gradient(40vmax 30vmax at 60% 92%, var(--aurora-3), transparent 70%),
    var(--void);
  animation: drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
/* A fine grid of points, fading out below the fold. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--grid) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  will-change: transform;
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(-6deg) scale(1.02); }
}

/* ---------------------------------------------------------------- type */
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--cyan) 35%, transparent); color: var(--ink); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5rem; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, var(--ink) 20%, var(--cyan) 62%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
h2 { font-size: 1.12rem; }
h3 { font-size: 0.98rem; }
p { margin: 0 0 0.8rem; }
code, pre, kbd { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--code-bg); color: var(--code-ink); padding: 0.08em 0.36em; border-radius: 6px; overflow-wrap: anywhere; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--glass); padding: 8px 12px; border-radius: 10px; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.hint { color: var(--muted); font-size: 0.84rem; margin: 0.5rem 0 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- icons */
/* <svg class="ico"><use …#i-name/></svg>: stroked in currentColor, sized to the text. */
.ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; margin-right: 0.45em; overflow: visible; }
.sec-h h2 .ico { color: var(--c, var(--cyan)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c, var(--cyan)) 55%, transparent)); }
.h-sub .ico, .kv dt .ico, .checks dt .ico, .block > h2 .ico, .about > h2 .ico, .prose h2 .ico, .relay h2 .ico,
.check-row label .ico, .block-label .ico, .share label .ico, .guide-list a .ico, .sec h2 > .ico { color: var(--cyan); }
.kv dt .ico, .checks dt .ico, .block > h2 .ico, .about > h2 .ico { width: 1.5em; height: 1.5em; vertical-align: -0.4em; }
.records summary .ico, .meta .ico, .crumbs .ico, .foot .ico, .guide-link .ico { opacity: 0.8; }
button .ico, .btn .ico, .btn-sec .ico { margin-right: 0.5em; vertical-align: -0.22em; }
/* A glowing tile above page titles. */
.h-ico {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; color: var(--cyan);
  background: linear-gradient(color-mix(in srgb, var(--bg) 80%, var(--cyan)), color-mix(in srgb, var(--bg) 88%, var(--violet))) padding-box, var(--spectrum) border-box;
  border: 1px solid transparent; box-shadow: 0 0 34px -10px var(--cyan), inset 0 1px 0 var(--glass-hi);
}
.h-ico .ico { width: 26px; height: 26px; margin: 0; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent)); }
/* The tile sits on the title's line, not above it. */
.title-row { display: flex; align-items: center; gap: 18px; margin-bottom: 0.5rem; }
.title-row .h-ico { flex: none; margin: 0; }
.title-row h1 { margin: 0; min-width: 0; }

/* ---------------------------------------------------------------- glass */
.glass, .top-in, .check, .summary, .sec, .tool, .relay, .alert, .admin-card {
  background: linear-gradient(180deg, var(--glass-hi), transparent 42%), var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
}

/* ---------------------------------------------------------------- header */
.top { position: relative; z-index: 20; padding: 12px 16px 0; } /* not sticky: the result menu takes that role */
.top-in {
  display: flex; align-items: center; gap: 22px; min-height: 58px; flex-wrap: wrap;
  max-width: calc(var(--wrap) - 32px); margin: 0 auto; padding: 8px 12px 8px 16px; border-radius: 999px;
  /* more opaque than the other panes: text scrolls underneath it */
  background: linear-gradient(180deg, var(--glass-hi), transparent 42%), color-mix(in srgb, var(--bg) 82%, transparent);
}
.brand { font: 700 1rem/1 var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 700 0.8rem/1 var(--mono); color: var(--ink); background: var(--bg);
}
/* An orbit of light around the @. */
.brand-mark::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--cyan) 70%, var(--violet) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.menu a, .menu-soon {
  font: 500 0.88rem/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 10px 14px; border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.menu a:hover { color: var(--ink); background: var(--glass-2); }
.menu a { display: inline-flex; align-items: center; gap: 7px; }
.menu .ico { width: 17px; height: 17px; margin: 0; opacity: 0.7; transition: opacity 0.2s, transform 0.25s, filter 0.25s; }
.menu a:hover .ico { opacity: 1; transform: translateY(-1px); }
.menu a[aria-current="page"] .ico { opacity: 1; color: var(--cyan); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 70%, transparent)); }
.menu a[aria-current="page"] {
  /* opaque fill: a translucent one would let the spectrum show under the text */
  color: var(--ink); background: linear-gradient(color-mix(in srgb, var(--bg) 86%, var(--cyan)), color-mix(in srgb, var(--bg) 86%, var(--violet))) padding-box, var(--spectrum) border-box;
  border: 1px solid transparent; padding: 9px 13px;
  box-shadow: 0 0 22px -8px var(--cyan);
}
.menu-soon { color: var(--muted); }
/* Generators: a menu item that opens a small panel. */
.menu-gen { position: relative; }
.menu-gen summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px 10px 14px; border-radius: 999px;
  font: 500 0.88rem/1 var(--sans); color: var(--ink-2); transition: background 0.2s, color 0.2s; user-select: none;
}
.menu-gen summary::-webkit-details-marker { display: none; }
.menu-gen summary:hover, .menu-gen[open] summary { color: var(--ink); background: var(--glass-2); }
.menu-gen summary:hover .ico { opacity: 1; }
.mg-chev { display: inline-grid; transition: transform 0.2s; }
.mg-chev .ico { width: 14px; height: 14px; }
.menu-gen[open] .mg-chev { transform: rotate(180deg); }
.menu-gen.on summary {
  color: var(--ink); background: linear-gradient(color-mix(in srgb, var(--bg) 86%, var(--cyan)), color-mix(in srgb, var(--bg) 86%, var(--violet))) padding-box, var(--spectrum) border-box;
  border: 1px solid transparent; padding: 9px 11px 9px 13px; box-shadow: 0 0 22px -8px var(--cyan);
}
.menu-gen.on summary > .ico { opacity: 1; color: var(--cyan); }
.menu-pop {
  position: absolute; z-index: 40; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; padding: 8px; border-radius: 20px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 40%), color-mix(in srgb, var(--bg) 96%, var(--cyan)); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px color-mix(in srgb, var(--cyan) 12%, transparent);
}
.menu-pop::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--spectrum); }
.menu .menu-pop a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; font-size: 0.86rem; white-space: normal; text-align: left; }
.menu .menu-pop a[aria-current="page"] { padding: 9px; }
.mp-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent); }
.menu .mp-ico .ico { width: 20px; height: 20px; opacity: 1; }
.mp-t { display: grid; gap: 3px; }
.mp-t strong { font: 650 0.9rem/1.2 var(--display); color: var(--ink); }
.mp-t small { font-size: 0.76rem; color: var(--muted); line-height: 1.3; }
.mp-col { display: grid; gap: 4px; align-content: start; min-width: 0; }
.mp-h { margin: 0; padding: 8px 10px 2px; font: 600 0.66rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.langs .ico { width: 15px; height: 15px; margin: 0 4px 0 6px; align-self: center; color: var(--muted); }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); }
.langs a { font: 600 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; padding: 7px 10px; border-radius: 999px; }
.langs a[aria-current="true"] { background: var(--ink); color: var(--bg); }

main.wrap { padding-top: 40px; padding-bottom: 36px; min-height: 55vh; }

/* ---------------------------------------------------------------- motion */
/* Pages appear at once (no entrance animation). Decorative motion stops
   while the page scrolls and while it is off screen: site.js sets .still. */
.still, .still *, .still *::before, .still *::after { animation-play-state: paused !important; }
/* The home page's sections below the first screen are laid out and painted
   only when they come near it (the ticker, right under the hero, is not
   deferred). Only there: the result pages and guides jump to sections, and
   estimated heights would make those jumps land off. */
main > .ticker ~ * { content-visibility: auto; contain-intrinsic-size: auto 700px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- forms */
input[type="text"], input[type="email"], input[type="number"], input:not([type]), input[type="search"], textarea {
  font: inherit; color: var(--ink); background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input:focus, textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--cyan) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 18%, transparent), 0 0 30px -6px color-mix(in srgb, var(--cyan) 60%, transparent);
}
button, .btn {
  position: relative; overflow: hidden;
  font: 650 0.9rem/1 var(--display); letter-spacing: 0.01em; color: var(--accent-ink);
  background: var(--spectrum); border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer;
  text-decoration: none; display: inline-block; white-space: nowrap;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--violet) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.2s;
}
button::after, .btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transition: transform 0.7s;
}
button:hover::after, .btn:hover::after { transform: translateX(120%); }
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--cyan) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
button:active { transform: translateY(0); }
button[disabled] { opacity: 0.7; cursor: progress; }
.btn-sec {
  font: 500 0.8rem/1 var(--mono); background: var(--glass-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: none; letter-spacing: 0;
}
.btn-sec::after { display: none; }
.btn-sec:hover { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); box-shadow: 0 0 18px -6px var(--cyan); transform: none; }

.tool-head, .hero { margin-bottom: 30px; }
.lede { color: var(--ink-2); max-width: 66ch; font-size: 1.04rem; }
/* The command capsule. */
.check { padding: 16px; border-radius: 24px; } /* full width: the command line of the page */
.check-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.check-row label, .block-label {
  font: 600 0.7rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
}
.block-label { display: block; margin-bottom: 10px; }
.check-row input {
  width: 100%; font: 500 1.02rem var(--mono); padding: 15px 18px; border-radius: 999px;
  background: linear-gradient(color-mix(in srgb, var(--bg) 80%, transparent), color-mix(in srgb, var(--bg) 80%, transparent)) padding-box,
    linear-gradient(100deg, color-mix(in srgb, var(--cyan) 55%, transparent), color-mix(in srgb, var(--violet) 55%, transparent)) border-box;
  border: 1px solid transparent;
}
.check-wide { max-width: none; }
.check textarea { width: 100%; font: 0.8rem/1.5 var(--mono); resize: vertical; min-height: 13em; border-radius: 16px; }
/* DKIM selector: a disclosure that opens into a small console. */
.selector { margin-top: 12px; border-radius: 18px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 45%, transparent); transition: border-color 0.25s, box-shadow 0.25s; }
.selector[open] { border-color: color-mix(in srgb, var(--violet) 45%, transparent); box-shadow: 0 0 34px -18px var(--violet); }
.selector summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; font-size: 0.9rem; color: var(--ink-2); }
.selector summary::-webkit-details-marker { display: none; }
.selector summary:hover { color: var(--ink); }
.sel-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent); }
.sel-ico .ico { width: 17px; height: 17px; margin: 0; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--violet) 60%, transparent)); }
.sel-t { font: 600 0.92rem/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.sel-opt { font: 600 0.6rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 8px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line); }
.sel-cur { color: var(--violet); }
.sel-chev { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); transition: transform 0.3s; }
.sel-chev .ico { margin: 0; width: 16px; height: 16px; }
.selector[open] .sel-chev { transform: rotate(180deg); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 50%, transparent); }
.sel-body { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 12px 18px; align-items: start; padding: 4px 14px 14px; animation: rise 0.35s both; }
.sel-field { position: relative; }
.sel-field > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin: 0; color: var(--violet); }
.sel-field input { width: 100%; padding-left: 40px; border-radius: 999px; font-family: var(--mono); }
.sel-field input:focus { border-color: color-mix(in srgb, var(--violet) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent), 0 0 30px -6px color-mix(in srgb, var(--violet) 60%, transparent); }
.sel-body .hint { margin: 0; }
.sel-body .hint > .ico { color: var(--violet); opacity: 1; }
.sel-sample { grid-column: 1 / -1; margin: 0; }
.sel-sample .rec { font-size: 0.78rem; }
.sel-sample figcaption { flex-wrap: wrap; }
.sel-sample figcaption code, .ctype { white-space: nowrap; }
.sel-sample mark { background: color-mix(in srgb, var(--violet) 22%, transparent); color: var(--ink); padding: 1px 5px; margin: 0 2px; border-radius: 5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet) 60%, transparent); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.alert { padding: 14px 16px; max-width: 820px; border-color: color-mix(in srgb, var(--fail) 45%, transparent); background: linear-gradient(90deg, var(--fail-bg), transparent), var(--glass); }
.alert-ok, .alert-exists { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: linear-gradient(90deg, var(--ok-bg), transparent), var(--glass); }

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; padding: 40px 0 16px; min-height: 380px; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.6rem); max-width: 13ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font: 600 0.7rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-2);
  padding: 8px 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.hero .check { margin-top: 26px; }
/* Home: a two-column hero with a tool console and the path of an e-mail. */
.hx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px 44px; align-items: center; padding-top: 34px; }
.hx-main h1 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5rem); }
.console-x { margin-top: 28px; }
.ctabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ctabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; text-decoration: none;
  font: 600 0.84rem/1 var(--sans); color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--line); transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ctabs a .ico { margin: 0; color: var(--cyan); }
.ctabs a > .ico:last-child:not(:first-child) { width: 0.85em; height: 0.85em; opacity: 0.7; }
.ctabs a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.ctabs a[aria-current] { color: var(--ink); background: linear-gradient(color-mix(in srgb, var(--bg) 86%, var(--cyan)), color-mix(in srgb, var(--bg) 86%, var(--violet))) padding-box, var(--spectrum) border-box; border-color: transparent; box-shadow: 0 0 24px -8px var(--cyan); }
.console-x .check { margin-top: 0; }
.console-x .try { margin-top: 14px; }
.console-x .chip { background: color-mix(in srgb, var(--bg) 88%, var(--c)); } /* opaque over the grid floor */
/* Home hero, from the future: a perspective grid floor, a holographic globe
   with mail packets travelling its arcs, HUD labels. */
.hx { position: relative; min-height: min(86vh, 780px); isolation: isolate; }
.hx-floor {
  position: absolute !important; z-index: -2 !important; left: -12%; right: -12%; bottom: -60px; height: 48%; pointer-events: none;
}
/* The floor is drawn flat, its lines already in perspective: a 3D-rotated,
   masked layer this size cost more than the rest of the page on every
   scrolled frame. Painted once, it scrolls like text. */
.hx-floor svg { display: block; width: 100%; height: 100%; }
.fl-v, .fl-h { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fl-v { stroke: color-mix(in srgb, var(--violet) 26%, transparent); }
.fl-h { stroke: color-mix(in srgb, var(--cyan) 26%, transparent); }
.hx-main h1 { background-size: 220% 100%; }
.hx-globe { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.hx-globe::before { content: ""; position: absolute; inset: 12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 26%, transparent) 38%, transparent 70%); pointer-events: none; }
.globe { width: 100%; height: 100%; overflow: visible; }
.gs-a { stop-color: color-mix(in srgb, var(--cyan) 38%, transparent); } .gs-b { stop-color: color-mix(in srgb, var(--violet) 16%, transparent); } .gs-c { stop-color: transparent; }
.ga-a { stop-color: var(--cyan); } .ga-b { stop-color: var(--magenta); }
.g-halo { fill: none; stroke: color-mix(in srgb, var(--cyan) 30%, transparent); stroke-width: 1; stroke-dasharray: 2 6; transform-origin: 200px 200px; animation: spin 60s linear infinite; }
.g-sphere { fill: url(#g-core); stroke: color-mix(in srgb, var(--cyan) 55%, transparent); stroke-width: 1.2; }
.g-par ellipse, .g-mer ellipse { fill: none; stroke: color-mix(in srgb, var(--cyan) 26%, transparent); stroke-width: 0.8; }
.g-mer ellipse { animation: mer 14s linear infinite; }
.g-mer .m2 { animation-delay: -2.33s; } .g-mer .m3 { animation-delay: -4.67s; } .g-mer .m4 { animation-delay: -7s; } .g-mer .m5 { animation-delay: -9.33s; } .g-mer .m6 { animation-delay: -11.67s; }
@keyframes mer { 0% { rx: 150px; } 25% { rx: 75px; } 50% { rx: 0px; } 75% { rx: 75px; } 100% { rx: 150px; } }
.g-arcs path { fill: none; stroke: url(#g-arc); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 4 5; opacity: 0.85; animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.g-pk circle { fill: #fff; stroke: color-mix(in srgb, var(--cyan) 45%, transparent); stroke-width: 5; paint-order: stroke; }
.g-nodes circle { fill: var(--cyan); stroke: color-mix(in srgb, var(--cyan) 30%, transparent); stroke-width: 6; paint-order: stroke; }
.g-nodes .ping { fill: none; stroke: var(--cyan); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ping 2.4s ease-out infinite; }
.g-nodes .p2 { animation-delay: 0.6s; } .g-nodes .p3 { animation-delay: 1.2s; } .g-nodes .p4 { animation-delay: 1.8s; }
@keyframes ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(5); opacity: 0; } }
.g-orbit ellipse { fill: none; stroke: color-mix(in srgb, var(--violet) 45%, transparent); stroke-width: 1; }
.g-orbit .sat { fill: var(--magenta); stroke: color-mix(in srgb, var(--magenta) 35%, transparent); stroke-width: 7; paint-order: stroke; }
.hud {
  position: absolute; padding: 6px 10px; border-radius: 10px; font: 600 0.68rem/1 var(--mono); letter-spacing: 0.12em; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: 0 0 20px -6px var(--cyan);
  animation: hud 6s ease-in-out infinite;
}
.hud::before { content: ""; position: absolute; width: 18px; height: 1px; top: 50%; background: color-mix(in srgb, var(--cyan) 70%, transparent); }
.hud.h1 { left: 12%; top: 26%; } .hud.h1::before { right: -18px; }
.hud.h2 { right: 2%; top: 20%; animation-delay: -1.5s; } .hud.h2::before { left: -18px; }
.hud.h3 { right: 4%; bottom: 22%; animation-delay: -3s; } .hud.h3::before { left: -18px; }
.hud.h4 { left: 6%; bottom: 20%; animation-delay: -4.5s; } .hud.h4::before { right: -18px; }
@keyframes hud { 50% { transform: translateY(-6px); } }
.hud-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 17%; aspect-ratio: 1; border-radius: 50%;
  font: 700 clamp(1.5rem, 1rem + 2vw, 2.4rem)/1 var(--display); color: var(--ink); background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--bg) 70%, var(--cyan)), var(--bg) 70%);
  border: 1px solid color-mix(in srgb, var(--cyan) 60%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--cyan) 55%, transparent), 0 0 80px color-mix(in srgb, var(--violet) 40%, transparent);
}
/* Error pages: a big holographic status code, a packet that loses its way. */
.err { padding: 30px 28px; }
.err-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 40px; align-items: center; }
.err-code { position: relative; isolation: isolate; display: grid; justify-items: center; }
.err-num {
  position: relative; font: 800 clamp(6rem, 3rem + 10vw, 11rem)/0.9 var(--display); letter-spacing: -0.06em;
  background: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The number's glow: a still gradient behind it (a filter on the number was
   redrawn at every glitch step). */
.err-code::before { content: ""; position: absolute; inset: -10% 5%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--cyan) 22%, transparent), transparent); }
.err-num::before, .err-num::after { content: attr(data-text); position: absolute; inset: 0; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.7; }
.err-num::before { animation: glitch1 3.2s steps(1) infinite; }
.err-num::after { animation: glitch2 2.7s steps(1) infinite; }
@keyframes glitch1 { 0%, 88%, 100% { transform: none; clip-path: inset(0 0 100% 0); } 90% { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); } 94% { transform: translate(5px, -2px); clip-path: inset(60% 0 12% 0); } }
@keyframes glitch2 { 0%, 84%, 100% { transform: none; clip-path: inset(100% 0 0 0); } 86% { transform: translate(6px, 1px); clip-path: inset(35% 0 40% 0); } 91% { transform: translate(-4px, -1px); clip-path: inset(75% 0 5% 0); } }
.err-lost { width: min(100%, 320px); margin-top: 6px; overflow: visible; }
.el-ok { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }
.el-broken { fill: none; stroke: var(--fail); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 8; opacity: 0.8; animation: dash 1.6s linear infinite; }
.el-node { fill: var(--cyan); stroke: color-mix(in srgb, var(--cyan) 30%, transparent); stroke-width: 6; paint-order: stroke; }
.el-lostnode { fill: color-mix(in srgb, var(--fail) 15%, var(--bg)); stroke: var(--fail); stroke-width: 1.5; }
.el-q { font: 700 13px var(--display); fill: var(--fail); }
.el-pk { fill: #fff; stroke: color-mix(in srgb, var(--cyan) 45%, transparent); stroke-width: 5; paint-order: stroke; }
.err-text .meta { margin: 0 0 16px; }
.err-path { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); max-width: 100%; }
.err-path .ico { margin: 0; color: var(--fail); }
.err-path code { background: none; padding: 0; overflow-wrap: anywhere; }
.err-path .ctype { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 45%, transparent); margin-left: 4px; }
.err-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.tiles.err-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.chips .chip.st-accent { color: var(--ink); }
.chips .chip.st-accent .ico { color: var(--cyan); }
/* Protocol ticker. */
.ticker { margin: 8px -16px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); border-block: 1px solid var(--line-2); }
.ticker-track { display: flex; width: max-content; animation: tick 48s linear infinite; }
.ticker-track > div { display: flex; }
.ticker span { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; font: 600 0.8rem/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-2); white-space: nowrap; }
.ticker .ico { margin: 0; color: var(--cyan); }
@keyframes tick { to { transform: translateX(-50%); } }
/* The path of an e-mail, as a full-width pipeline. */
.pipe { margin: 44px 0; }
.pipe .fp-card { padding: 22px 22px 18px; }
.pipe h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin: 0 0 18px; }
.pipe h2 .ico { width: 26px; height: 26px; margin: 0; color: var(--cyan); }
.fp-card { position: relative; z-index: 1; padding: 20px; border-radius: 24px; background: linear-gradient(180deg, var(--glass-hi), transparent 42%), var(--glass); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); }
.fp { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fp::before, .fp::after { content: ""; position: absolute; left: 29px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; }
.fp::before { background: var(--line); }
/* a beam of light running down the path */
.fp::after { background: linear-gradient(to bottom, transparent 0%, var(--cyan) 45%, var(--magenta) 55%, transparent 100%) no-repeat; background-size: 100% 26%; animation: beam 3.6s linear infinite; box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 50%, transparent); }
@keyframes beam { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
.fp li { display: flex; align-items: center; gap: 14px; }
.fp li:not(:has(a)) { padding: 9px; }
.fp li > a { flex: 1; display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 16px; text-decoration: none; color: var(--ink); border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
.fp li > a:hover { background: var(--glass-2); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.fp li > a > .ico:last-child { margin: 0 0 0 auto; color: var(--accent); opacity: 0.6; transition: transform 0.25s, opacity 0.25s; }
.fp li > a:hover > .ico:last-child { opacity: 1; transform: translateX(3px); }
.fp-node { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--cyan); background: color-mix(in srgb, var(--bg) 70%, var(--cyan)); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); animation: node 3.6s ease-in-out infinite; }
.fp-node .ico { margin: 0; width: 21px; height: 21px; }
.fp li:nth-child(2) .fp-node { animation-delay: 0.6s; } .fp li:nth-child(3) .fp-node { animation-delay: 1.2s; } .fp li:nth-child(4) .fp-node { animation-delay: 1.8s; }
.fp li:nth-child(5) .fp-node { animation-delay: 2.4s; } .fp li:nth-child(6) .fp-node { animation-delay: 3s; }
@keyframes node { 0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; } 15% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cyan) 18%, transparent), 0 0 26px var(--cyan); } }
.fp-t { display: grid; gap: 2px; min-width: 0; }
.fp-t strong { font: 600 0.95rem/1.2 var(--display); letter-spacing: -0.01em; }
.fp-t small { font-size: 0.78rem; color: var(--ink-2); line-height: 1.35; }
/* Figures strip. */
.stats { margin: 40px 0 8px; }
.stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stats li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 16px; border-radius: 20px; background: linear-gradient(180deg, var(--glass-hi), transparent 45%), var(--glass-2); border: 1px solid var(--line); }
.stat-ico { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.stat-ico .ico { margin: 0; width: 21px; height: 21px; }
.stats strong { font: 700 1.9rem/1 var(--display); letter-spacing: -0.03em; background: linear-gradient(100deg, var(--ink) 20%, var(--cyan) 70%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats li > span:last-child { font-size: 0.8rem; color: var(--ink-2); line-height: 1.3; }
/* Tools as a bento grid. */
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bento-card { min-height: 220px; }
.bento > li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd count: the last card takes the whole row */
.bento-card strong { font-size: 1.25rem; }
.bento-card .tool-ico { width: 52px; height: 52px; border-radius: 16px; }
.bento-card .tool-ico .ico { width: 27px; height: 27px; }

/* ---------------------------------------------------------------- sections */
.block { margin: 44px 0; }
.block > h2, .about > h2 { font-size: 0.72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); font-weight: 600; margin-bottom: 16px; }
.tools { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.tool {
  position: relative; overflow: hidden; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 170px;
  transition: transform 0.25s, border-color 0.25s;
}
/* A light that follows the pointer (--mx/--my set by site.js). */
.tool::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cyan) 22%, transparent), transparent 60%);
}
.tool:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.tool:hover::before { opacity: 1; }
.tool-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tool-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 9%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  box-shadow: 0 0 24px -10px var(--cyan); transition: box-shadow 0.3s, transform 0.3s;
}
.tool-ico .ico { width: 23px; height: 23px; margin: 0; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 55%, transparent)); }
.tool:hover .tool-ico { box-shadow: 0 0 30px -4px var(--cyan); transform: translateY(-1px) rotate(-4deg); }
.tool-n { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.16em; color: var(--muted); }
.tool strong { font: 600 1.02rem/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.tool a { text-decoration: none; }
.tool a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.tool > span:not([class]) { color: var(--ink-2); font-size: 0.9rem; }
.tool-go { margin-top: auto; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.tool-go .ico { margin: 0 0 0 0.3em; transition: transform 0.25s; }
.tool:hover .tool-go .ico { transform: translateX(4px); }
.tool-soon { opacity: 0.6; }
.soon { font: 600 0.66rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.points { padding-left: 0; list-style: none; max-width: 82ch; display: grid; gap: 10px; }
.points li { position: relative; padding: 14px 16px 14px 56px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.points li > .ico { position: absolute; left: 17px; top: 14px; width: 22px; height: 22px; margin: 0; color: var(--cyan); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 50%, transparent)); }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.guide-list li { padding: 16px 18px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; transition: border-color 0.2s; }
.guide-list li:hover { border-color: color-mix(in srgb, var(--violet) 50%, transparent); }
.guide-list a .ico { width: 1.2em; height: 1.2em; }
.guide-list a { font: 600 1rem/1.3 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.guide-list span { color: var(--ink-2); font-size: 0.9rem; }

/* ---------------------------------------------------------------- status */
.st-ok { --c: var(--ok); --cb: var(--ok-bg); }
.st-warn { --c: var(--warn); --cb: var(--warn-bg); }
.st-fail { --c: var(--fail); --cb: var(--fail-bg); }
.st-error { --c: var(--error); --cb: var(--error-bg); }
.st-info { --c: var(--info); --cb: var(--info-bg); }
/* Status icons (check, triangle, ban, offline, info) carry the status in
   shape as well as colour. */
.badge .ico, .tag .ico, .chip .ico { width: 1.25em; height: 1.25em; margin: 0; vertical-align: -0.28em; }
.tag .ico { margin-right: 0.35em; }
.chip .ico, .badge .ico { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 60%, transparent)); }
.badge {
  display: inline-flex; align-items: center; gap: 7px; font: 600 0.66rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c); background: var(--cb); padding: 6px 9px; border-radius: 999px; margin-right: 10px; vertical-align: 3px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.tag {
  font: 600 0.64rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c, var(--info)); background: var(--cb, var(--info-bg));
  padding: 4px 7px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; border: 1px solid color-mix(in srgb, var(--c, var(--info)) 30%, transparent);
}
.chips { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: 600 0.78rem/1 var(--mono);
  text-decoration: none; color: var(--c); background: var(--cb); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: 0 0 24px -12px var(--c); transition: transform 0.2s, box-shadow 0.2s;
}
a.chip:hover { transform: translateY(-2px); box-shadow: 0 0 26px -6px var(--c); }

/* ---------------------------------------------------------------- results */
/* Sticky section menu: one pill per section, the one in view lit; a thin
   bar at the bottom shows how far down the result the reader is. */
.jump {
  position: sticky; top: 10px; z-index: 15; display: flex; align-items: center; margin: 0 0 14px; padding: 6px; border-radius: 999px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 50%), color-mix(in srgb, var(--bg) 94%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.jump ol { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.jump ol::-webkit-scrollbar { display: none; }
.jump li a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; white-space: nowrap;
  font: 500 0.82rem/1 var(--sans); color: var(--ink-2); text-decoration: none; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.jump li a .ico { margin: 0; color: var(--c); }
/* The logo slides in when the menu sticks to the top (site.js sets .stuck). */
.jump-brand {
  display: inline-flex; align-items: center; gap: 9px; flex: none; max-width: 0; opacity: 0; visibility: hidden; overflow: hidden; white-space: nowrap;
  font: 700 0.95rem/1 var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  transition: max-width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s, visibility 0s 0.4s, padding 0.4s, margin 0.4s;
}
.jump-brand .brand-mark { flex: none; }
.jump.stuck .jump-brand {
  max-width: 170px; opacity: 1; visibility: visible; padding: 2px 14px 2px 4px; margin-right: 6px; border-right: 1px solid var(--line);
  transition: max-width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s 0.08s, visibility 0s, padding 0.4s, margin 0.4s;
}
.jump li a:hover { color: var(--ink); background: var(--glass-2); }
.jump-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.jump li a.on { color: var(--ink); background: color-mix(in srgb, var(--c) 12%, var(--bg)); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 0 20px -8px var(--c); }
.jump-bar { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: var(--spectrum); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0.9; }
/* DNS result deck: a status ring and one tile per record. */
.deck { padding: 24px 24px 18px; position: relative; overflow: hidden; }
.deck::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background: radial-gradient(420px 220px at 8% 0%, color-mix(in srgb, var(--c, var(--cyan)) 16%, transparent), transparent 70%);
}
.deck > * { position: relative; }
.deck-top { display: grid; grid-template-columns: 150px 1fr; gap: 12px 26px; align-items: center; margin-bottom: 20px; }
.ring { position: relative; width: 150px; height: 150px; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring circle { fill: none; }
.ring-bg { stroke: var(--line); stroke-width: 9; }
.ring-arc { stroke: var(--c); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--c)); }
.ring-arcs { transform-origin: 60px 60px; animation: ringin 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes ringin { from { transform: rotate(-120deg) scale(0.85); opacity: 0; } }
.ring-scan { stroke: color-mix(in srgb, var(--cyan) 45%, transparent); stroke-width: 1; stroke-dasharray: 1 3; }
.ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.ring-c strong { font: 700 2.1rem/1 var(--display); letter-spacing: -0.04em; color: var(--ink); }
.ring-c small { font-size: 0.5em; color: var(--muted); font-weight: 600; }
.ring-c > span { font: 600 0.58rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-2); max-width: 90px; }
.deck-id h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 12px; }
.deck-id h2 > .ico { width: 30px; height: 30px; margin: 0; color: var(--cyan); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 60%, transparent)); }
.deck .dom { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem); }
.deck .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.deck .meta > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); }
.deck .meta .ico { margin: 0; color: var(--cyan); opacity: 1; }
.deck .meta .dnssec { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.deck .meta .dnssec .ico { color: var(--ok); }
.deck .meta .nodnssec .ico { color: var(--muted); }
.tiles { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 10px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 13px 13px 12px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%), var(--glass-2);
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line-2)); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.tile::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 14px 30px -18px var(--c); }
.tile-top { display: flex; align-items: center; justify-content: space-between; }
.tile-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.tile-ico .ico { width: 19px; height: 19px; margin: 0; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 60%, transparent)); }
.tile-n { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.14em; color: var(--muted); }
.tile-name { font: 600 0.98rem/1.2 var(--display); letter-spacing: -0.01em; margin-top: 4px; }
.tile-fig { font: 0.74rem/1.35 var(--mono); color: var(--ink-2); }
.tiles-wide { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.deck-subj { flex: 1 1 14ch; min-width: 0; font: 650 clamp(1.3rem, 1rem + 1.4vw, 2rem)/1.2 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ring-dur { display: block; max-width: 100px; margin: 0 auto; font-size: 1.15rem !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; text-wrap: balance; }
.deck .meta > span { max-width: 100%; overflow-wrap: anywhere; }
.transit-legend .ico { color: var(--cyan); margin-right: 0.3em; }
.h-sub code { text-transform: none; letter-spacing: 0; }
/* EHLO capabilities as a row of chips. */
.caps { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.caps li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--line-2)); }
.caps .ico { margin: 0; width: 1em; height: 1em; color: var(--cyan); }
.caps code { background: none; padding: 0; font-size: 0.78rem; }
.records .console { margin-top: 10px; }
.sans { margin-top: 4px; }
.sans summary { cursor: pointer; font-size: 0.8rem; color: var(--ink-2); }
.sans summary .ico { color: var(--cyan); }
.engine .h-sub .muted { display: block; margin-top: 8px; } /* the header name on its own line, clear of the badge */
.tile-addr { font: 600 0.9rem/1.25 var(--mono); letter-spacing: 0; overflow-wrap: anywhere; }
.tile-src { font: 0.68rem/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.tile-src code { font-size: 0.95em; padding: 0 0.25em; }
.deck-id h2 { flex-wrap: wrap; }
.deck-id h2 .badge { margin: 0; }
.deck-id .verdict { margin-top: 10px; }
.lname { font-weight: 600; }
td a .ico, th a .ico { width: 1em; height: 1em; margin: 0 0 0 0.3em; }
td a.small .ico { margin: 0 0.25em 0 0; }
.tile-st { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 5px; font: 600 0.62rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c); }
.tile-st .ico { width: 1.35em; height: 1.35em; margin: 0; }
/* Section head: status-coloured icon tile, name and badge, verdict, number. */
.sec-head { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: start; margin-bottom: 8px; }
.sec-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); box-shadow: 0 0 26px -10px var(--c); }
.sec-ico .ico { width: 25px; height: 25px; margin: 0; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); }
.sec-t h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0 4px; font-size: 1.3rem; }
.sec-t h2 .badge { margin: 0; vertical-align: 0; }
.sec-n { font: 700 1.2rem/1 var(--display); color: color-mix(in srgb, var(--c) 45%, var(--muted)); letter-spacing: -0.02em; padding-top: 4px; }
.sec-n small { font: 600 0.62rem var(--mono); color: var(--muted); margin-left: 2px; }
.explain > .ico { color: var(--cyan); opacity: 0.85; }
.hint > .ico { opacity: 0.8; }
th .ico { color: var(--cyan); width: 1.35em; height: 1.35em; margin-right: 0.4em; vertical-align: -0.35em; }
td > .ico { color: var(--muted); }
.pref { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 8px; font: 700 0.8rem var(--mono); color: var(--accent); background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.tried { color: var(--muted); font-size: 0.84rem; }
.tried > .ico { color: var(--cyan); }
.tried code { margin: 0 2px 4px 0; display: inline-block; }
/* A record as a terminal line. */
.console { margin: 12px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 75%, transparent); box-shadow: inset 0 1px 0 var(--glass-hi); }
.console figcaption { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font: 0.74rem var(--mono); color: var(--muted); background: var(--glass-2); border-bottom: 1px solid var(--line-2); }
.console figcaption .ico { margin: 0; color: var(--cyan); }
.console figcaption code { background: none; padding: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.ctype { margin-left: auto; padding: 3px 8px; border-radius: 999px; font: 700 0.62rem var(--mono); letter-spacing: 0.12em; color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); }
.console .rec { margin: 0; border: 0; border-radius: 0; background: none; }
/* DKIM key strength: four rising bars. */
.kstr { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; vertical-align: -1px; }
.kstr i { display: block; width: 4px; border-radius: 1px; background: var(--line); }
.kstr i:nth-child(1) { height: 6px; } .kstr i:nth-child(2) { height: 10px; } .kstr i:nth-child(3) { height: 14px; }
.kstr i.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.kstr.weak i.on { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
/* DMARC policy scale: none → quarantine → reject, lit up to the policy in force. */
.scale { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 520px; margin: 14px 0 6px; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 0.68rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); --s: var(--muted); }
.step:nth-child(1) { --s: var(--warn); } .step:nth-child(2) { --s: var(--cyan); } .step:nth-child(3) { --s: var(--ok); }
.step .ico { width: 20px; height: 20px; margin: 0; padding: 9px; box-sizing: content-box; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--line); position: relative; z-index: 1; }
.step + .step::before { content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.step.on { color: var(--s); }
.step.on .ico { color: var(--s); border-color: color-mix(in srgb, var(--s) 55%, transparent); background: color-mix(in srgb, var(--s) 12%, var(--bg)); }
.step.on + .step.on::before { background: linear-gradient(90deg, var(--warn), var(--cyan)); box-shadow: 0 0 8px var(--s); }
.step.on + .step.on + .step.on::before { background: linear-gradient(90deg, var(--cyan), var(--ok)); }
.step.cur .ico { box-shadow: 0 0 0 4px color-mix(in srgb, var(--s) 18%, transparent), 0 0 22px var(--s); }
.step.cur > span { color: var(--ink); }
.summary { padding: 22px 22px 18px; margin-bottom: 18px; }
.summary-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.summary-head h2 { margin: 0; }
.dom { font: 650 clamp(1.2rem, 1rem + 1vw, 1.7rem) var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.meta { color: var(--muted); font: 0.8rem var(--mono); margin: 0; }
.dnssec { color: var(--ok); font-weight: 700; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.share label { font: 600 0.66rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.share input { flex: 1 1 280px; font: 0.8rem var(--mono); padding: 10px 14px; border-radius: 999px; }
.sec { position: relative; padding: 20px 22px 18px 26px; margin-bottom: 16px; scroll-margin-top: 84px; overflow: hidden; }
.summary { scroll-margin-top: 84px; }
/* The status as a light filament on the left edge. */
.sec::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, transparent, var(--c, var(--info)) 20%, var(--c, var(--info)) 80%, transparent);
  box-shadow: 0 0 18px 1px var(--c, var(--info));
}
.sec::after {
  content: ""; position: absolute; left: 0; top: 0; width: 45%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--cyan)) 70%, transparent), transparent);
}
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 6px; }
.sec-h h2 { margin: 0; font-size: 1.02rem; }
.verdict { font: 600 1rem/1.45 var(--sans); margin: 2px 0 0; overflow-wrap: anywhere; color: var(--ink); }
.explain { color: var(--ink-2); font-size: 0.93rem; max-width: 92ch; margin: 8px 0 12px; overflow-wrap: break-word; }
.h-sub { font: 600 0.68rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: 18px 0 10px; }
.rec {
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--code-ink); padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; font-size: 0.82rem;
}
.rec-sm { font-size: 0.76rem; margin: 6px 0; padding: 8px 10px; }
.findings { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.findings li {
  padding: 10px 12px; font-size: 0.9rem; overflow-wrap: anywhere; border-radius: 12px;
  background: linear-gradient(90deg, var(--cb, var(--info-bg)), transparent 70%); border: 1px solid var(--line-2);
}
.records { margin-top: 12px; font-size: 0.84rem; }
.records summary { cursor: pointer; color: var(--muted); font-family: var(--mono); font-size: 0.78rem; }
.records pre { background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--code-ink); padding: 10px 12px; border-radius: 12px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.76rem; border: 1px solid var(--line-2); }
.table-wrap { overflow-x: auto; margin: 10px 0; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.86rem; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font: 600 0.64rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
tbody tr { transition: background 0.2s; }
tbody tr:hover { background: color-mix(in srgb, var(--cyan) 5%, transparent); }
tr.st-warn td:first-child, tr.st-fail td:first-child, tr.st-error td:first-child { box-shadow: inset 3px 0 0 var(--c); padding-left: 10px; }
td.addrs code { display: inline-block; margin: 0 4px 4px 0; }
/* SPF qualifier: what a matching term yields. pass = authorised. */
.q { display: inline-flex; align-items: center; gap: 5px; font: 600 0.76rem var(--mono); }
.q .ico { margin: 0; }
.q-pass { color: var(--cyan); }
.q-fail { color: var(--fail); }
.q-softfail { color: var(--warn); }
.q-neutral { color: var(--muted); }
.lk { font-family: var(--mono); color: var(--muted); }
.lk.on { color: var(--cyan); font-weight: 700; }
/* SPF lookup meter: ten cells of light. */
.meter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 14px; }
.meter-t { font: 0.8rem var(--mono); color: var(--ink-2); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.meter-t .ico { color: var(--cyan); margin-right: 2px; }
.meter-t .sep { margin: 0 6px; color: var(--muted); }
/* Ten lookup cells that light up one after the other. */
.cells { display: inline-grid; grid-template-columns: repeat(10, 18px); gap: 4px; --on: var(--cyan); --on2: var(--ok); }
.cells.near { --on: var(--ok); --on2: var(--warn); }
.cells.over { --on: var(--warn); --on2: var(--fail); }
.cells i { display: block; height: 12px; border-radius: 3px; background: var(--line); }
.cells i.on { background: linear-gradient(180deg, var(--on2), var(--on)); box-shadow: 0 0 10px -1px var(--on); animation: cellon 0.5s both; }
.cells i:nth-child(2) { animation-delay: 0.05s; } .cells i:nth-child(3) { animation-delay: 0.1s; } .cells i:nth-child(4) { animation-delay: 0.15s; }
.cells i:nth-child(5) { animation-delay: 0.2s; } .cells i:nth-child(6) { animation-delay: 0.25s; } .cells i:nth-child(7) { animation-delay: 0.3s; }
.cells i:nth-child(8) { animation-delay: 0.35s; } .cells i:nth-child(9) { animation-delay: 0.4s; } .cells i:nth-child(10) { animation-delay: 0.45s; }
@keyframes cellon { from { opacity: 0.15; transform: scaleY(0.3); } }
/* SPF include tree: a circuit of nodes. */
.tree, .tree ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.tree { padding-left: 0; border-left: 0; }
.tree li { padding: 6px 0 6px 10px; font-size: 0.86rem; position: relative; }
.tree ul > li::before { content: ""; position: absolute; left: -22px; top: 17px; width: 20px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 50%, transparent), var(--c, var(--cyan))); }
.tree ul > li::after { content: ""; position: absolute; left: -3px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--cyan)); box-shadow: 0 0 8px var(--c, var(--cyan)); }
.tree-root { padding-left: 0 !important; }
.tree-root > code { font-weight: 600; }
.tree-root > .ico { color: var(--cyan); }
.tree .via .ico { color: var(--cyan); width: 1em; height: 1em; margin-right: 0.3em; }
.tree .small .ico { width: 1em; height: 1em; margin-right: 0.2em; }
.via { color: var(--muted); font: 0.76rem var(--mono); margin-right: 4px; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 5px 0; font-size: 0.88rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 12px 0; font-size: 0.88rem; }
.kv dt { font: 600 0.66rem/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.kv dd { margin: 0; }
.route td { overflow-wrap: break-word; }
.route td:first-child { white-space: nowrap; }
tr.longest td { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.engine { border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 10px; }
.engine:first-of-type { border-top: 0; }

/* Transit strip (header analyzer): each hop's share of the total time. */
.transit { display: none; }
.transit.ready { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 14px 0 4px; background: var(--line-2); gap: 2px; }
.transit span { display: block; min-width: 3px; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); opacity: 0.55; transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.transit span.slow { opacity: 1; background: linear-gradient(90deg, var(--warn), var(--magenta)); box-shadow: 0 0 16px var(--warn); }
.transit-legend { display: none; justify-content: space-between; font: 0.72rem var(--mono); color: var(--muted); }
.transit.ready + .transit-legend { display: flex; }

/* ---------------------------------------------------------------- content */
/* Blacklist page, before a check: examples, how it works, the lists. */
.try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.try-h { display: inline-flex; align-items: center; gap: 6px; font: 600 0.66rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-right: 4px; }
.try-h .ico { margin: 0; color: var(--cyan); }
.try .chip .ico { margin: 0; }
.try-x { font: 400 0.72rem/1 var(--sans); color: var(--ink-2); opacity: 0.85; }
.how { margin: 40px 0 10px; }
.how > h2, .about-head h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin: 0 0 16px; }
.how > h2 .ico, .about-head h2 .ico { width: 26px; height: 26px; margin: 0; color: var(--cyan); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 55%, transparent)); }
/* Four steps joined by a lit wire. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flow li { position: relative; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, var(--glass-hi), transparent 45%), var(--glass-2); border: 1px solid var(--line); }
.flow li + li::before { content: ""; position: absolute; left: -17px; top: 37px; width: 18px; height: 2px; background: var(--spectrum); box-shadow: 0 0 10px color-mix(in srgb, var(--violet) 60%, transparent); }
.flow-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent); box-shadow: 0 0 24px -10px var(--cyan); }
.flow-ico .ico { width: 23px; height: 23px; margin: 0; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 55%, transparent)); }
.flow-n { position: absolute; right: 16px; top: 18px; font: 700 1.05rem/1 var(--display); color: color-mix(in srgb, var(--cyan) 40%, var(--muted)); }
.flow p { margin: 12px 0 0; font-size: 0.9rem; color: var(--ink-2); }
.about.bl-about, .about.wide-about { max-width: none; margin-top: 44px; }
.st-accent { --c: var(--cyan); --cb: color-mix(in srgb, var(--cyan) 10%, transparent); }
.about-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 6px; }
.about-head h2 { margin: 0; }
.about-head .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.about-head .meta > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); }
.about-head .meta .ico { margin: 0; color: var(--cyan); opacity: 1; }
.about-head .meta .allok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.about-head .meta .allok .ico { color: var(--ok); }
/* One card per list. */
.lcards { list-style: none; margin: 16px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.lcard {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 60%), var(--glass-2);
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line-2)); transition: transform 0.25s, box-shadow 0.25s;
}
.lcard::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.lcard:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px var(--c); }
.lcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lcard-kind { display: inline-flex; align-items: center; gap: 5px; font: 600 0.62rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); }
.lcard-kind .ico { margin: 0; color: var(--cyan); }
.lcard-name { font-size: 1.12rem; margin: 6px 0 0; }
.lcard p { margin: 0; }
.lcard-zone { font-size: 0.84rem; }
.lcard-zone .ico, .lcard-when .ico { color: var(--muted); }
.lcard-probe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lcard-when { font: 0.7rem var(--mono); color: var(--muted); }
.lcard-why { font-size: 0.8rem; color: var(--ink-2); }
.lcard-link { margin-top: auto; padding-top: 4px; font-size: 0.84rem; align-self: flex-start; }
.lcard-link .ico { margin-right: 0.35em; }
/* What each answer means: three status cards. */
.meanings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.meanings li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 70%), var(--glass-2); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line-2)); }
.meanings .sec-ico { flex: none; width: 42px; height: 42px; border-radius: 13px; }
.meanings .sec-ico .ico { width: 22px; height: 22px; }
.meanings strong { display: block; font: 600 1rem/1.2 var(--display); color: var(--c); margin: 2px 0 6px; }
.meanings p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.about { margin-top: 40px; max-width: 980px; }
.checks { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.checks dt { font: 600 0.8rem/1.6 var(--mono); color: var(--accent); }
.checks dd { margin: 0; color: var(--ink-2); }
.guide-link { margin-top: 26px; color: var(--muted); }
.narrow { max-width: 740px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 0.78rem var(--mono); color: var(--muted); margin-bottom: 16px; }
.crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; }
.crumbs [aria-current] { color: var(--ink-2); }
.crumbs .ico { color: var(--cyan); opacity: 1; }
.crumb-sep .ico { width: 0.9em; height: 0.9em; margin: 0; color: var(--muted); opacity: 0.7; }
/* Guide page: a header card, then a sticky side menu beside the article. */
.guide-head { padding: 24px 26px 22px; margin-bottom: 22px; }
.guide-head .title-row h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
.guide-head .lede { margin: 10px 0 14px; }
.guide-head .meta { margin: 0; }
.guide-cta { margin: 18px 0 0; }
.guide-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.guide-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.side-card {
  display: block; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, var(--glass-hi), transparent 42%), var(--glass); border: 1px solid var(--line);
}
.side-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 4px; font: 600 0.66rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.side-h .ico { margin: 0; color: var(--cyan); }
.side-toc ol, .side-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-toc a, .side-guides a {
  position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 11px; font-size: 0.86rem; line-height: 1.3;
  color: var(--ink-2); text-decoration: none; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.side-toc a .ico, .side-guides a .ico { flex: none; width: 17px; height: 17px; margin: 1px 0 0; color: var(--cyan); opacity: 0.85; }
.side-toc a:hover, .side-guides a:hover { color: var(--ink); background: var(--glass-2); }
.side-toc a.on, .side-guides a[aria-current] {
  color: var(--ink); background: color-mix(in srgb, var(--cyan) 10%, var(--bg)); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); box-shadow: 0 0 20px -10px var(--cyan);
}
.side-toc a.on::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--spectrum); box-shadow: 0 0 10px var(--cyan); }
.side-toc a.on .ico, .side-guides a[aria-current] .ico { opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 60%, transparent)); }
.side-toc .lv3 a { padding-left: 34px; font-size: 0.8rem; }
.side-toc .lv3 a .ico { width: 14px; height: 14px; }
.side-bar { position: relative; display: block; height: 3px; margin: 12px 4px 2px; border-radius: 3px; background: var(--line); overflow: hidden; }
.side-bar .jump-bar { left: 0; right: 0; top: 0; bottom: 0; height: auto; }
.side-tool { display: flex; align-items: center; gap: 12px; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; --c: var(--cyan); }
.side-tool:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); box-shadow: 0 14px 30px -18px var(--cyan); }
.side-tool > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }
.side-k { font: 600 0.6rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.side-tool strong { font: 600 0.95rem/1.2 var(--display); }
.side-go .ico { margin: 0; color: var(--accent); transition: transform 0.25s; }
.side-tool:hover .side-go .ico { transform: translateX(4px); }
.guide-head + .jump { display: none; } /* the side menu does this job on wide screens */
.guide { min-width: 0; }
.guide-layout > .prose { min-width: 0; }
.psec:first-child h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.wl-head .alert { margin: 16px 0 0; display: flex; align-items: center; gap: 8px; max-width: none; }
.wl-head .alert .ico { margin: 0; flex: none; }
.wl-form { margin-top: 20px; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 35%, var(--line)); box-shadow: 0 0 40px -22px var(--violet); }
.wl-form .relay-form { grid-template-columns: 1fr 1fr auto; }
.flow-3 { grid-template-columns: repeat(3, 1fr); }
.meanings-2 { grid-template-columns: repeat(2, 1fr); }
.meanings strong a { color: inherit; }
.guide-head .tiles { margin: 20px 0 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.prose h2 { display: flex; align-items: center; gap: 14px; margin: 2.4rem 0 0.9rem; padding-top: 1.6rem; border-top: 1px solid var(--line-2); scroll-margin-top: 20px; font-size: 1.3rem; }
.prose > h2:first-child, .prose > p:first-child + h2 { border-top: 0; padding-top: 0; }
.prose h2 .ico {
  flex: none; width: 42px; height: 42px; padding: 10px; margin: 0; box-sizing: border-box; border-radius: 13px; color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
  box-shadow: 0 0 24px -10px var(--cyan);
}
.prose h3 { display: flex; align-items: center; gap: 10px; margin-top: 1.6rem; scroll-margin-top: 20px; }
.prose h3 .ico { margin: 0; width: 20px; height: 20px; color: var(--violet); }
.prose p, .prose li { max-width: 74ch; color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose a .ico { width: 0.85em; height: 0.85em; margin: 0 0 0 0.25em; vertical-align: -0.05em; opacity: 0.8; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 24px; margin: 6px 0; }
.prose ul > li::before { content: ""; position: absolute; left: 6px; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.prose ol { counter-reset: n; list-style: none; padding-left: 0; }
.prose ol > li { counter-increment: n; position: relative; padding-left: 36px; margin: 8px 0; }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font: 700 0.75rem/1 var(--mono); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.prose pre { position: relative; background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--code-ink); padding: 38px 16px 14px; border-radius: 14px; overflow-x: auto; font-size: 0.82rem; border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-hi); }
.prose pre::before { content: ""; position: absolute; left: 14px; top: 13px; width: 44px; height: 10px; background: radial-gradient(circle 5px at 5px 5px, var(--fail) 98%, transparent), radial-gradient(circle 5px at 22px 5px, var(--warn) 98%, transparent), radial-gradient(circle 5px at 39px 5px, var(--ok) 98%, transparent); opacity: 0.8; }
.prose pre::after { content: ""; position: absolute; left: 0; right: 0; top: 32px; height: 1px; background: var(--line-2); }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose .note { border-left: 3px solid var(--cyan); background: var(--glass-2); padding: 10px 14px; border-radius: 0 12px 12px 0; }
.prose table { margin: 12px 0; }
.prose .table-wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); padding: 4px 14px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 40px 0 10px; }
.pager-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--glass-2); border: 1px solid var(--line); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.pager-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); box-shadow: 0 14px 30px -18px var(--cyan); }
.pager-card.next { grid-column: 2; text-align: right; align-items: flex-end; }
.pager-k { display: inline-flex; align-items: center; gap: 6px; font: 600 0.62rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.pager-k .ico { margin: 0; color: var(--accent); }
.prev .pager-k .ico { transform: rotate(180deg); }
.pager-t { display: inline-flex; align-items: flex-start; gap: 8px; font: 600 0.95rem/1.3 var(--display); }
.pager-t .ico { flex: none; margin: 2px 0 0; color: var(--cyan); }
.gcards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gcard strong { font-size: 1.1rem; }
.gcard-d { color: var(--ink-2); font-size: 0.9rem; }
.gcard-toc { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.gcard-toc li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; font-size: 0.74rem; color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--line-2); }
.gcard-toc .ico { margin: 0; width: 13px; height: 13px; color: var(--cyan); }
.gcard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font: 0.72rem var(--mono); color: var(--muted); }
.gcard-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.gcard-meta .ico { margin: 0; color: var(--cyan); }

/* ---------------------------------------------------------------- waiting list */
.relay {
  display: grid; grid-template-columns: 1fr minmax(320px, 620px); gap: 18px 32px; align-items: center;
  max-width: calc(var(--wrap) - 32px); margin: 20px auto 36px; padding: 26px 28px; position: relative; overflow: hidden;
}
.relay::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background: radial-gradient(500px 200px at 0% 0%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%),
    radial-gradient(400px 200px at 100% 100%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 70%);
}
.relay > * { position: relative; }
.relay h2 { font-size: 1.1rem; }
.relay-text p { color: var(--ink-2); font-size: 0.93rem; margin: 0; max-width: 60ch; }
.relay-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.relay-form input[type="email"], .relay-form input[type="text"] { width: 100%; border-radius: 999px; }
.relay-note { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); margin: 0; }
.relay-msg { grid-column: 1 / -1; font-size: 0.88rem; margin: 0; color: var(--ok); }
.relay-msg:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- footer */
.foot { font: 0.78rem var(--mono); color: var(--muted); border-top: 1px solid var(--line-2); }
.foot-in { padding-top: 20px; padding-bottom: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px; }
.foot p { margin: 0; }
.foot a { color: var(--ink-2); }

/* ---------------------------------------------------------------- small screens */
td.tagcol code, .rtable td:first-child code { white-space: nowrap; }

/* The header menu, nine items. From 1180 px: one row, the items tighter;
   below 1380 px the top-level items drop
   their icons to fit. From 721 to 1179 px: a dock under the logo, icon above
   label, nine in a row (as on phones). Up to 720 px: the phone dock, two rows. */
@media (min-width: 1180px) {
  .menu { gap: 2px; flex-wrap: nowrap; justify-content: center; }
  .menu a { padding: 10px 11px; gap: 6px; white-space: nowrap; }
  .menu-gen summary { white-space: nowrap; }
  .menu a[aria-current="page"] { padding: 9px 10px; }
  .menu-gen summary { padding: 10px 9px 10px 11px; gap: 6px; }
  .menu-gen.on summary { padding: 9px 8px 9px 10px; }
}
@media (min-width: 1180px) and (max-width: 1379px) {
  .menu > a > .ico, .menu-gen > summary > .ico { display: none; }
}
@media (min-width: 721px) and (max-width: 1179px) {
  .top-in { gap: 8px 12px; border-radius: 24px; }
  .langs { margin-left: auto; }
  .menu { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
  .menu a { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px 7px; border-radius: 14px; font-size: 0.74rem; line-height: 1.15; text-align: center; min-height: 54px; }
  .menu a[aria-current="page"] { padding: 7px 1px 6px; }
  .menu-gen summary { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px 7px; border-radius: 14px; font-size: 0.74rem; line-height: 1.15; text-align: center; min-height: 54px; height: 100%; }
  .menu-gen.on summary { padding: 7px 1px 6px; }
  .mg-chev { display: none; }
  .menu .ico { width: 20px; height: 20px; }
  .menu .menu-pop a { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 0; font-size: 0.86rem; }
}
@media (min-width: 721px) and (max-width: 860px) {
  .menu a, .menu-gen summary { font-size: 0.66rem; padding-inline: 0; }
}
/* Below this width decorations would reach past the viewport edge. */
@media (max-width: 1480px) {
  main.wrap { overflow-x: clip; } /* clips at the padding edge, i.e. the screen edge */
}
/* While the menu wraps, a panel hangs from the header's right edge, whatever
   row its item lands on. */
@media (max-width: 1379px) {
  .top-in { position: relative; }
  .menu-gen { position: static; }
  .menu-pop { left: auto; right: 8px; transform: none; width: min(620px, calc(100% - 16px)); }
}
@media (min-width: 1001px) {
  .fp-h { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .fp-h::before, .fp-h::after { left: 8%; right: 8%; top: 30px; bottom: auto; width: auto; height: 2px; }
  .fp-h::after { background: linear-gradient(90deg, transparent 0%, var(--cyan) 45%, var(--magenta) 55%, transparent 100%) no-repeat; background-size: 26% 100%; animation: beamx 3.6s linear infinite; }
  .fp-h li, .fp-h li > a { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .fp-h li > a { padding: 8px 6px; height: 100%; }
  .fp-h li > a > .ico:last-child { display: none; }
  .fp-h .fp-t { justify-items: center; }
}
@keyframes beamx { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (max-width: 1000px) {
  .hx { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hx-globe { max-width: 380px; }
  .hx-floor { display: none; } /* one column: the floor would run behind the figures */
  .hud { font-size: 0.6rem; padding: 5px 8px; }
  .stats ul { grid-template-columns: repeat(3, 1fr); }
  /* Narrow screens: the sticky pill bar replaces the side contents; the
     tool and the other guides follow the article. */
  .guide-head + .jump { display: flex; }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-side { position: static; max-height: none; overflow: visible; order: 2; }
  .side-toc { display: none; }
  .prose h2, .prose h3 { scroll-margin-top: 84px; }
}
@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow li:nth-child(3)::before { display: none; }
  .meanings { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .deck { padding: 18px 14px 14px; }
  /* phones: the ring gets its own row, centred and large enough for its label */
  .deck-top { grid-template-columns: 1fr; gap: 14px; }
  .ring { width: 132px; height: 132px; justify-self: center; }
  .ring-c strong { font-size: 1.7rem; }
  .ring-dur { font-size: 1rem !important; max-width: 84px; }
  .ring-c > span { font-size: 0.5rem; max-width: 76px; }
  .deck-subj { font-size: 1.15rem; }
  .deck-id h2 > .ico { width: 22px; height: 22px; }
  .deck .meta > span { padding: 5px 9px; font-size: 0.72rem; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tiles-wide { grid-template-columns: 1fr; }
  .guide-head { padding: 18px 16px; }
  .guide-head .tiles { grid-template-columns: repeat(2, 1fr); }
  .err-grid { grid-template-columns: 1fr; }
  .err { padding: 22px 16px; }
  .tiles.err-tiles { grid-template-columns: repeat(2, 1fr); }
  .stats ul { grid-template-columns: repeat(2, 1fr); }
  .stats li:last-child { grid-column: 1 / -1; }
  .bento { grid-template-columns: 1fr; }
  .ctabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .ctabs a { flex: none; padding: 8px 11px; font-size: 0.8rem; }
  .wl-form .relay-form, .flow-3, .meanings-2 { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager-card.next { grid-column: auto; }
  .gcards { grid-template-columns: 1fr; }
  .flow, .meanings { grid-template-columns: 1fr; }
  .flow li + li::before, .flow li:nth-child(3)::before { display: block; left: 37px; top: -17px; width: 2px; height: 18px; }
  .try-x { display: none; }
  .sec-head { gap: 4px 12px; }
  .sec-ico { width: 40px; height: 40px; border-radius: 13px; }
  .sec-ico .ico { width: 21px; height: 21px; }
  .sec-t h2 { font-size: 1.1rem; }
  .sec-n { font-size: 0.95rem; }
  .step { font-size: 0.6rem; letter-spacing: 0.06em; }
  body { font-size: 15px; }
  .top { position: static; padding: 8px 10px 0; } /* two rows: too tall to follow the page */
  .wrap { padding-inline: 10px; } /* the content lines up with the header */
  .top-in { gap: 6px 10px; border-radius: 22px; padding: 8px 10px; }
  /* phones: a dock, icon above a short label, in two rows: five above and
     four below, each row filling the width (20 columns: spans of 4, then 5) */
  .menu { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
  .menu > * { grid-column: span 4; }
  .menu > :nth-child(n+6) { grid-column: span 5; }
  .menu a { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px 7px; border-radius: 14px; font-size: 0.68rem; line-height: 1.15; text-align: center; min-height: 52px; }
  .top-in { position: relative; }
  .menu-gen { position: static; }
  .menu-gen summary { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px 7px; border-radius: 14px; font-size: 0.68rem; line-height: 1.15; text-align: center; min-height: 52px; height: 100%; }
  .menu-gen.on summary { padding: 7px 1px 6px; }
  .mg-chev { display: none; }
  .menu-pop { left: 8px; right: 8px; width: auto; transform: none; top: calc(100% + 8px); grid-template-columns: 1fr; }
  .menu .menu-pop a { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 0; font-size: 0.86rem; }
  .gen-row .btn-sec { flex: 1 1 100%; white-space: normal; text-align: center; }
  .menu a[aria-current="page"] { padding: 7px 1px 6px; }
  .menu .ico { width: 20px; height: 20px; }
  .h-ico { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 12px; }
  .title-row { gap: 12px; }
  .h-ico .ico { width: 22px; height: 22px; }
  .langs { margin-left: auto; }
  main.wrap { padding-top: 24px; }
  .hero { padding-top: 16px; min-height: 0; }
  /* on phones the core sits past the right edge; only the rings cross the text */
  .check { border-radius: 20px; padding: 14px; }
  .jump { top: 6px; }
  .jump li a { padding: 8px 11px; font-size: 0.78rem; }
  .jump-brand .bt { display: none; }
  .jump.stuck .jump-brand { padding-right: 8px; }
  .sec, .summary { scroll-margin-top: 70px; }
  .sel-body { grid-template-columns: 1fr; }
  .selector summary { flex-wrap: wrap; }
  .check-row { grid-template-columns: 1fr; gap: 10px; }
  .check-row button { width: 100%; }
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
  .relay { grid-template-columns: 1fr; padding: 20px; margin-left: 16px; margin-right: 16px; }
  .relay-form { grid-template-columns: 1fr; }
  .sec { padding: 16px 14px 14px 18px; }
  .summary { padding: 18px 16px 14px; }
  .checks { grid-template-columns: 1fr; gap: 2px; }
  .checks dd { margin-bottom: 10px; }
  th, td { padding-right: 8px; }
  .points li { padding-left: 50px; }
  /* Tables become stacked rows: the first cell leads, the others carry
     their column name from data-l. */
  .rtable thead { display: none; }
  .rtable tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
  .rtable td { display: block; border: 0; padding: 2px 0; text-align: left; }
  .rtable td.empty { display: none; }
  .rtable td[data-l]::before { content: attr(data-l) ": "; font: 600 0.62rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
  .rtable td:first-child code { white-space: normal; }
  .route td { overflow-wrap: anywhere; }
  tr.st-warn td:first-child, tr.st-fail td:first-child, tr.st-error td:first-child { box-shadow: none; padding-left: 0; }
  .rtable tr.st-warn, .rtable tr.st-fail, .rtable tr.st-error { box-shadow: inset 3px 0 0 var(--c); padding-left: 10px; }
}

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

/* ---------------------------------------------------------------- generators */
.gen-form { display: grid; gap: 0; }
.gen-step { border: 0; margin: 0; padding: 16px 2px 14px; min-width: 0; border-top: 1px solid var(--line-2); }
.gen-step:first-of-type { border-top: 0; padding-top: 4px; }
.gen-step legend { display: flex; align-items: center; gap: 9px; padding: 0; margin-bottom: 12px; font: 650 0.98rem/1.2 var(--display); color: var(--ink); }
.gen-step legend .ico { margin: 0; color: var(--cyan); }
.gen-n { font: 600 0.66rem/1 var(--mono); letter-spacing: 0.12em; color: var(--cyan); padding: 5px 7px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.gen-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gen-row input { flex: 1 1 260px; }
.gen-row .btn-sec { padding: 13px 16px; }
.gen-form .hint { margin-top: 10px; }
.gen-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.gen-opt { position: relative; display: block; cursor: pointer; height: 100%; }
.gen-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gen-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; height: 100%; padding: 14px 40px 14px 14px; border-radius: 16px;
  background: var(--glass-2); border: 1px solid var(--line); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.gen-card .gen-ico { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.gen-card .gen-ico .ico { margin: 0; width: 19px; height: 19px; }
.gen-card strong { font-size: 0.92rem; }
.gen-card code, .gen-card > span:not([class]) { grid-column: 2; font-size: 0.74rem; color: var(--ink-2); overflow-wrap: anywhere; }
.gen-card code { background: none; padding: 0; border: 0; color: var(--code-ink); }
.gen-check { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); color: transparent; }
.gen-check .ico { margin: 0; width: 14px; height: 14px; }
.gen-opt:hover .gen-card { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.gen-opt input:checked + .gen-card { border-color: color-mix(in srgb, var(--cyan) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 70%), var(--glass-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 35%, transparent); }
.gen-opt input:checked + .gen-card .gen-check { background: var(--cyan); border-color: var(--cyan); color: var(--accent-ink); }
.gen-opt input:focus-visible + .gen-card { outline: 2px solid var(--focus); outline-offset: 2px; }
.gen-policies .pol-quarantine { --c: var(--warn); } .gen-policies .pol-reject { --c: var(--fail); } .gen-policies .pol-none { --c: var(--cyan); }
.gen-policies .gen-card .gen-ico { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.gen-policies .gen-opt input:checked + .gen-card { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 70%), var(--glass-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.gen-policies .gen-opt input:checked + .gen-card .gen-check { background: var(--c); border-color: var(--c); }
.gen-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 16px; margin-top: 12px; }
.gen-step .gen-two:first-child { margin-top: 0; }
.gen-two label:not(.gen-radio) { display: flex; align-items: center; gap: 7px; margin: 0 0 7px 2px; font: 600 0.66rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.gen-two label .ico { margin: 0; color: var(--cyan); }
.gen-form textarea { width: 100%; min-height: 5.6em; font: 0.82rem/1.5 var(--mono); resize: vertical; }
.gen-form select, .lk-form select { width: 100%; font: inherit; color: var(--ink); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.gen-radios { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gen-lbl { display: inline-flex; align-items: center; gap: 6px; font: 600 0.7rem/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); margin-right: 4px; min-width: 56px; }
.gen-lbl .ico { margin: 0; color: var(--cyan); }
.gen-radio { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--line); cursor: pointer; font-size: 0.86rem; color: var(--ink-2); }
.gen-radio input { accent-color: var(--cyan); margin: 0; }
.gen-radio:has(input:checked) { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); color: var(--ink); }
.gen-none { margin-top: 10px; }
.gen-go { padding-top: 14px; border-top: 1px solid var(--line-2); }
.gen-go button .ico { margin-right: 0.5em; }
.gen-out { scroll-margin-top: 20px; }
.gen-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-bottom: 8px; }
.gen-top h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.gen-top h2 > .ico { width: 26px; height: 26px; margin: 0; color: var(--cyan); }
.gen-meter { margin: 0; }
.gen-rec pre { font-size: 0.98rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.gen-entry { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.gen-entry > div { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); }
.gen-entry dt { display: inline-flex; align-items: center; gap: 5px; font: 600 0.62rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.gen-entry dt .ico { margin: 0; width: 13px; height: 13px; color: var(--cyan); }
.gen-entry dd { margin: 0; }
.gen-src { overflow-wrap: anywhere; }
/* Generator landing: the steps on a lit timeline, a live preview beside them. */
.gen-head .eyebrow { margin-bottom: 14px; }
.gen-grid .gen-step { position: relative; padding-left: 52px; border-top: 0; padding-top: 16px; }
.gen-grid .gen-step:first-of-type { padding-top: 6px; }
.gen-grid .gen-step::before { content: ""; position: absolute; left: 16px; top: 52px; bottom: -8px; width: 2px; border-radius: 2px; background: var(--line); transition: background 0.3s; }
.gen-grid .gen-step:first-of-type::before { top: 42px; }
.gen-grid .gen-n {
  position: absolute; left: 0; top: 12px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: 0.72rem; background: var(--bg); transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.gen-grid .gen-step:first-of-type .gen-n { top: 2px; }
.gen-grid .gen-step:has(input:checked, textarea:not(:placeholder-shown), input[name="domain"]:not(:placeholder-shown)) .gen-n {
  background: var(--cyan); color: var(--accent-ink); border-color: var(--cyan); box-shadow: 0 0 18px -2px var(--cyan);
}
.gen-grid .gen-step:has(input:checked, textarea:not(:placeholder-shown), input[name="domain"]:not(:placeholder-shown))::before { background: linear-gradient(var(--cyan), color-mix(in srgb, var(--violet) 60%, transparent)); }
.gen-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.gen-go .hint { margin: 0; }
.gen-try { margin-top: 18px; }
.gen-live {
  position: relative; padding: 18px 18px 16px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%), color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 60px -34px color-mix(in srgb, var(--cyan) 60%, transparent);
}
.gen-live::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--spectrum); box-shadow: 0 0 14px var(--cyan); }
.live-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 0.68rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-2); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2.4s ease-in-out infinite; }
.live-name { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.8rem; color: var(--muted); }
.live-name .ico { margin: 0; color: var(--cyan); }
.live-name code { overflow-wrap: anywhere; }
.live-name .ctype { margin-left: auto; }
.live-rec {
  margin: 0 0 14px; padding: 14px; min-height: 5.4em; border-radius: 14px; background: color-mix(in srgb, var(--void) 70%, transparent); border: 1px solid var(--line-2);
  font: 0.92rem/2 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted);
}
.live-rec.bump { animation: bump 0.6s ease-out; }
@keyframes bump { from { border-color: var(--cyan); box-shadow: 0 0 26px -6px var(--cyan); } }
.lt { --lc: var(--muted); display: inline; padding: 2px 6px; border-radius: 7px; color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lt-v { --lc: var(--ink-2); }
.lt-ip { --lc: var(--ok); }
.lt-host { --lc: var(--cyan); }
.lt-inc { --lc: var(--violet); }
.lt-soft { --lc: var(--warn); }
.lt-fail { --lc: var(--fail); }
.lt-tag { --lc: var(--ink-2); }
.lt-rep { --lc: var(--violet); }
.lt-pol-none { --lc: var(--warn); }
.lt-pol-quarantine { --lc: var(--cyan); }
.lt-pol-reject { --lc: var(--ok); }
.live-meter { margin: 0 0 12px; }
.live-lbl { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; font: 0.76rem var(--mono); color: var(--ink-2); }
.live-lbl .ico { margin: 0; color: var(--cyan); width: 14px; height: 14px; }
.live-lbl strong { color: var(--ink); }
.live-meter .hint { margin-top: 6px; font-size: 0.74rem; }
.live-bar svg { display: block; width: 100%; height: 6px; }
.lb-bg { fill: var(--line); }
.lb-fill { fill: var(--cyan); }
.live-level { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lv { height: 8px; border-radius: 4px; background: var(--line); transition: background 0.3s, box-shadow 0.3s; }
.live-level[data-live-level="1"] .lv-1 { background: var(--warn); box-shadow: 0 0 10px -2px var(--warn); }
.live-level[data-live-level="2"] .lv-1, .live-level[data-live-level="2"] .lv-2 { background: var(--cyan); box-shadow: 0 0 10px -2px var(--cyan); }
.live-level[data-live-level="3"] .lv { background: var(--ok); box-shadow: 0 0 10px -2px var(--ok); }
.live-key { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 7px; font-size: 0.76rem; color: var(--muted); }
.live-key li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.live-key .lt { font: 0.7rem/1.6 var(--mono); }
@media (min-width: 1000px) {
  .gen-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; align-items: start; }
  .gen-grid > .gen-step, .gen-grid > .gen-go { grid-column: 1; }
  .gen-grid > .gen-live { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 18px; margin-top: 6px; }
}
@media (max-width: 999px) {
  .gen-grid .gen-live { margin: 8px 0 16px; }
}
@media (max-width: 720px) {
  .gen-grid .gen-step { padding-left: 38px; }
  .gen-grid .gen-n { width: 28px; height: 28px; font-size: 0.62rem; }
  .gen-grid .gen-step::before { left: 13px; top: 46px; }
  .gen-grid .gen-step:first-of-type::before { top: 36px; }
}

/* DMARC report analyzer */
.rep-form { display: grid; gap: 14px; }
.drop {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 34px 20px 28px; text-align: center; cursor: pointer; border-radius: 20px;
  border: 1.5px dashed color-mix(in srgb, var(--cyan) 45%, var(--line)); background: radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 60%, transparent);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.drop:hover, .drop.over { border-color: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 14%, transparent), 0 0 40px -12px var(--cyan); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-orb { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); box-shadow: 0 0 30px -8px var(--cyan); }
.drop-orb .ico { width: 26px; height: 26px; margin: 0; }
.drop strong { font: 650 1.05rem/1.25 var(--display); color: var(--ink); }
.drop-sub { font: 0.78rem var(--mono); color: var(--muted); }
.drop-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.drop-files:empty { display: none; }
.drop-files span { font: 0.72rem var(--mono); padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.rep-paste { margin: 0; }
.rep-paste-body { display: block; }
.rep-paste textarea { width: 100%; min-height: 8em; font: 0.8rem/1.5 var(--mono); }
.rep-form .gen-go { border-top: 0; padding-top: 0; }
.rep-name { display: flex; align-items: center; gap: 5px; margin-top: 4px; font: 0.72rem var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.rep-name .ico { margin: 0; width: 12px; height: 12px; color: var(--cyan); }
.rep-bar { display: inline-block; width: 90px; vertical-align: middle; margin-right: 8px; }
.rep-bar svg { display: block; width: 100%; height: 6px; }
.rb-fail { fill: color-mix(in srgb, var(--fail) 55%, transparent); }
.rb-pass { fill: var(--ok); }
.rep-pct { font: 0.8rem var(--mono); }
.rep-table code { overflow-wrap: anywhere; }
.rep-orgs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.rep-orgs li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line); }
.rep-orgs .gen-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.rep-orgs .gen-ico .ico { margin: 0; }
.rep-orgs strong { display: block; }
.rep-orgs code { font-size: 0.74rem; overflow-wrap: anywhere; }
.rep-orgs .hint { margin-top: 4px; }

/* MTA-STS generator: modes coloured from withdrawal to enforcement, the
   three things to publish, the hosting checklist. */
.gen-policies .mode-none { --c: var(--warn); } .gen-policies .mode-testing { --c: var(--cyan); } .gen-policies .mode-enforce { --c: var(--ok); }
.lt-mode-none { --lc: var(--warn); }
.lt-mode-testing { --lc: var(--cyan); }
.lt-mode-enforce { --lc: var(--ok); }
.lt-none { --lc: var(--muted); font-style: italic; }
.live-file { min-height: 9em; }
.gen-live .live-name + .live-rec + .live-name { margin-top: 4px; }
.sts-pub { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sts-pub > li { min-width: 0; padding: 16px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--line); }
.sts-pub h3, .sts-h { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 6px; font: 650 1rem/1.3 var(--display); color: var(--ink); }
.sts-pub h3 .ico, .sts-h .ico { margin: 0; color: var(--cyan); }
.sts-pub .hint { margin: 0 0 10px; }
.sts-pub .actions { margin-top: 10px; }
.dkim-types { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.dkim-out { scroll-margin-top: 84px; }
.rec-key { font-size: 0.74rem; line-height: 1.45; max-height: 16em; overflow: auto; white-space: pre; overflow-wrap: normal; }
.dkim-priv-note { margin: 0; }
.dkim-ossl > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font: 650 1rem/1.3 var(--display); color: var(--ink); }
.dkim-ossl > summary .ico { color: var(--cyan); }
.dkim-ossl[open] > summary { margin-bottom: 10px; }
.sts-h { margin-top: 20px; }
.sts-check { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.sts-check li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 13px; background: var(--glass-2); border: 1px solid var(--line-2); font-size: 0.9rem; }
.sts-check .ico { flex: none; margin: 2px 0 0; color: var(--cyan); }
.sts-check code { overflow-wrap: anywhere; }

/* Delivery test */
.mt-form .gen-go { border-top: 0; padding-top: 0; }
.mt-start { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.mt-start strong { font: 650 1.05rem/1.25 var(--display); color: var(--ink); }
.mt-start .hint { margin: 4px 0 0; }
.mt-wait { padding: 22px; }
.mt-wait-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.mt-wait-top h2 { margin: 0; }
.mt-wait-top .hint { margin: 4px 0 0; }
.mt-pulse { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); animation: mtpulse 1.8s ease-in-out infinite; }
.mt-pulse .ico { width: 26px; height: 26px; margin: 0; }
@keyframes mtpulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--cyan) 0%, transparent), 0 0 26px -4px var(--cyan); } }
.mt-addr .rec { font-size: clamp(0.95rem, 0.8rem + 1vw, 1.3rem); color: var(--ink); overflow-wrap: anywhere; }
.mt-steps { list-style: none; margin: 16px 0 10px; padding: 0; display: grid; gap: 8px; }
.mt-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-2); }
.mt-steps .ico { flex: none; margin: 2px 0 0; color: var(--cyan); }
.mt-live { display: flex; align-items: center; gap: 8px; }

/* TLS report analyzer */
.tls-pols { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tls-pols > li { min-width: 0; padding: 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--c) 32%, var(--line)); }
.tls-pol-head { display: flex; gap: 12px; align-items: flex-start; }
.tls-pol-head > div { flex: 1; min-width: 0; }
.tls-pol-head .hint { margin-top: 4px; }
.tls-pol-head code { overflow-wrap: anywhere; }
.tls-pol-head .gen-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.tls-pol-head .gen-ico .ico { margin: 0; }
.tls-pol-head .rep-pct { font: 700 1.1rem var(--display); color: var(--c); }
.tls-pols .rep-bar { display: block; width: 100%; margin: 12px 0 10px; }
.tls-pol-n { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font: 0.78rem var(--mono); color: var(--ink-2); }
.tls-pol-n span { display: inline-flex; align-items: center; gap: 6px; }
.tls-pol-n .ico { margin: 0; width: 14px; height: 14px; color: var(--c, var(--cyan)); }
.tls-types { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.tls-types > li { min-width: 0; padding: 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--fail) 30%, var(--line)); }
.tls-type-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.tls-type-head code { overflow-wrap: anywhere; }
.tls-type-head strong { font: 700 1.15rem var(--display); color: var(--fail); }
.tls-types p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }

/* provider monograms: a letter in the tile, no brand artwork */
.gen-mono { font: 800 1.05rem/1 var(--display); letter-spacing: -0.02em; }
.gen-card .gm-google { --m: var(--cyan); } .gen-card .gm-microsoft { --m: var(--violet); } .gen-card .gm-zoho { --m: var(--magenta); }
.gen-card .gen-mono { color: var(--m); background: color-mix(in srgb, var(--m) 14%, transparent); border-color: color-mix(in srgb, var(--m) 38%, transparent); text-shadow: 0 0 12px color-mix(in srgb, var(--m) 60%, transparent); }
.st-off { --c: var(--line); --cb: transparent; }
.ring-arc.st-off { filter: none; opacity: 0.55; }
.gen-st { color: var(--c); border-color: color-mix(in srgb, var(--c) 40%, transparent) !important; background: var(--cb) !important; }
.gen-tiles { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); }
.gen-out .deck-id .dom { font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); overflow-wrap: anywhere; }
.gen-out .deck-id .hint { margin-top: 8px; }
.gen-ext { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.gen-ext li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line-2)); }
.gen-ext li .ico { margin: 0; color: var(--c); }
.gen-ext .small { font: 0.72rem var(--mono); color: var(--muted); overflow-wrap: anywhere; }
#record .actions button .ico { margin-right: 0.5em; }
.gen-link { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 0.9rem; }
.gen-link .ico { margin: 0; color: var(--cyan); }

/* ---------------------------------------------------------------- admin */

.admin-range { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); }
.admin-range .ico { width: 15px; height: 15px; margin: 0 4px 0 8px; color: var(--muted); }
.admin-range a { font: 600 0.74rem/1 var(--mono); color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.admin-range a[aria-current="true"] { background: var(--ink); color: var(--bg); }

.admin-card { padding: 18px 20px; margin: 0 0 16px; }
.admin-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; margin: 0 0 12px; }
.admin-card h2 .ico { margin: 0; color: var(--cyan); }

.chart-key { margin: 0 0 8px; font: 0.74rem/1 var(--mono); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key-views { background: color-mix(in srgb, var(--cyan) 55%, transparent); }
.key-visitors { background: var(--magenta); margin-left: 10px; }
.chart { display: block; width: 100%; height: 220px; }

.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: grid; grid-template-columns: 1fr auto 3.2em; gap: 2px 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 0.88rem; }
.rank li:last-child { border-bottom: 0; }
.rank-name { min-width: 0; overflow-wrap: anywhere; }
.rank-n, .rank-pct { font: 0.8rem var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.rank-pct { color: var(--muted); }
.rank-bar { grid-column: 1 / -1; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--glass-2); appearance: none; -webkit-appearance: none; }
.rank-bar::-webkit-meter-bar { background: var(--glass-2); border: 0; border-radius: 2px; height: 4px; }
.rank-bar::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--cyan), var(--violet)); border-radius: 2px; }
.rank-bar::-moz-meter-bar { background: linear-gradient(90deg, var(--cyan), var(--violet)); border-radius: 2px; }

.admin-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-acts form { margin: 0; }
.btn-sm { padding: 7px 11px; font-size: 0.74rem; }
.btn-danger { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 45%, transparent); }
.btn-danger:hover { border-color: var(--fail); box-shadow: 0 0 18px -6px var(--fail); }
/* Sign-in: one card in the middle of the screen, a glowing lock above it. */
.login-stage { display: grid; place-items: center; min-height: calc(100svh - 230px); padding: 28px 0 40px; }
.login-card {
  position: relative; width: min(100%, 440px); padding: 30px 30px 24px; text-align: center; overflow: hidden;
  border-radius: 28px; border: 1px solid var(--line);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 60%), linear-gradient(180deg, var(--glass-hi), transparent 42%), var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 40px 120px -50px color-mix(in srgb, var(--violet) 70%, transparent), var(--shadow);
}
.login-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--spectrum); box-shadow: 0 0 18px var(--cyan); }
.login-orb { position: relative; width: 108px; height: 108px; margin: 2px auto 14px; }
.orb-rings { position: absolute; inset: 0; width: 100%; height: 100%; animation: orb-spin 18s linear infinite; }
.orb-r1 { fill: none; stroke: var(--line); stroke-dasharray: 2 6; }
.orb-r2 { fill: none; stroke: color-mix(in srgb, var(--cyan) 22%, transparent); stroke-width: 1.5; }
.orb-arc { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 28 72; filter: drop-shadow(0 0 5px var(--cyan)); }
.orb-dot { fill: var(--magenta); filter: drop-shadow(0 0 5px var(--magenta)); }
.orb-core {
  position: absolute; inset: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--cyan);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cyan) 30%, transparent), color-mix(in srgb, var(--bg) 85%, transparent) 70%);
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: 0 0 34px -6px var(--cyan), inset 0 0 18px color-mix(in srgb, var(--cyan) 25%, transparent);
}
.orb-core .ico { width: 28px; height: 28px; margin: 0; filter: drop-shadow(0 0 6px var(--cyan)); }
@keyframes orb-spin { to { transform: rotate(360deg); } }
.login-kicker { margin: 0 0 6px; font: 600 0.66rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: var(--cyan); }
.login-card h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); margin: 0 0 8px; }
.login-sub { margin: 0 auto 18px; max-width: 32ch; color: var(--ink-2); font-size: 0.95rem; }
.login-card .alert { text-align: left; margin: 0 0 14px; font-size: 0.9rem; }
.login-form { display: grid; gap: 14px; text-align: left; }
.field label { display: block; margin: 0 0 7px 4px; font: 600 0.64rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.field-in {
  position: relative; display: flex; align-items: center; border-radius: 16px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 72%, transparent); transition: border-color 0.2s, box-shadow 0.2s;
}
.field-in:focus-within { border-color: color-mix(in srgb, var(--cyan) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 16%, transparent), 0 0 30px -8px var(--cyan); }
.field-in > .ico { flex: none; width: 18px; height: 18px; margin: 0 0 0 14px; color: var(--muted); transition: color 0.2s; }
.field-in:focus-within > .ico { color: var(--cyan); }
.field-in input, .field-in input[type="text"] { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 14px 12px; font: inherit; color: var(--ink); }
.field-in input:focus { outline: none; box-shadow: none; border: 0; }
.reveal { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 5px; padding: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--muted); }
.reveal::after { display: none; }
.reveal:hover { transform: none; box-shadow: none; color: var(--ink); background: var(--glass-2); }
.reveal .ico { width: 18px; height: 18px; margin: 0; }
.reveal .r-hide, .reveal[aria-pressed="true"] .r-show { display: none; }
.reveal[aria-pressed="true"] .r-hide { display: inline; }
.caps { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 4px; font: 0.74rem var(--mono); color: var(--warn); }
.caps[hidden] { display: none; }
.caps .ico { margin: 0; width: 15px; height: 15px; }
.login-go { width: 100%; margin-top: 6px; padding: 16px 22px; font-size: 0.98rem; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.login-go .ico { margin: 0; transition: transform 0.2s; }
.login-go:hover .ico { transform: translateX(3px); }
.login-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); }
.login-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); font: 0.7rem/1 var(--mono); color: var(--ink-2); }
.login-facts .ico { width: 13px; height: 13px; margin: 0; color: var(--cyan); }
/* Access list: the visitor's own address, lit by whether it is allowed. */
.acc-you { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); background: linear-gradient(90deg, var(--cb), transparent 60%), var(--glass); }

.acc-state { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--c); font-size: 0.9rem; }
.acc-state .ico { margin: 0; }
.acc-addme { max-width: 340px; }
.acc-addme .hint { margin-top: 8px; }
.acc-add-h { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; margin: 20px 0 10px; }
.acc-add-h .ico { margin: 0; color: var(--cyan); }
.acc-add input[name="note"] { flex: 1 1 180px; }
.acc-recover p { margin: 0; color: var(--ink-2); font-size: 0.9rem; max-width: 80ch; }
/* Monitoring: one card per check, lit by its state. */
.mon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mon-actions form { margin: 0; }
.mon-actions button .ico { margin-right: 0.5em; }

.mon-mute { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mon-wd { border-color: color-mix(in srgb, var(--c) 35%, var(--line)); background: linear-gradient(90deg, var(--cb), transparent 60%), var(--glass); }
.mon-wd p { margin: 0 0 8px; font-size: 0.88rem; color: var(--ink-2); }
.mon-add { margin-top: 12px; }
.rank li form { grid-column: 2 / -1; justify-self: end; margin: 0; }
/* The domain's own reports */

.rep-src { border-color: color-mix(in srgb, var(--c, var(--line)) 35%, var(--line)); background: linear-gradient(90deg, var(--cb, transparent), transparent 60%), var(--glass); }
.rep-src .rec { margin: 8px 0 10px; }
.rep-dl { display: grid; gap: 6px; margin: 10px 0 0; font-size: 0.86rem; }
.rep-dl div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rep-dl dt { font: 600 0.66rem/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); min-width: 150px; }
.rep-dl dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.rep-none { margin: 0 0 16px; }
.key-ok { background: color-mix(in srgb, var(--ok) 60%, transparent); }
.key-fail { background: var(--fail); margin-left: 10px; }
.bar-ok { fill: color-mix(in srgb, var(--ok) 50%, transparent); transition: fill 0.2s; }
.bar-fail { fill: var(--fail); }
.bar:hover .bar-ok { fill: var(--ok); }
@media (max-width: 720px) {
  .chart { height: 170px; }
  .admin-acts { padding-top: 6px; }
}
@media (max-width: 360px) {
  .menu { gap: 2px; }
  .menu a, .menu-gen summary { font-size: 0.6rem; padding-inline: 0; }
}

/* ---------------------------------------------------------------- SMTP error codes */
.se-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.se-h-code { font-family: var(--mono); letter-spacing: -0.02em; color: var(--c); }
.se-h-name { font-size: clamp(1.15rem, 0.9rem + 1.4vw, 1.9rem); line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.se-head .h-ico { color: var(--c); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.se-facts { margin: 6px 0 22px; }
.se-facts li { min-width: 0; }
.se-facts .hint { margin: 8px 0 0; }
.se-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.se-chips .chip { padding: 6px 11px; }
.se-msgs, .se-found { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.se-msgs li, .se-found li { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line); }
.se-found li { border-color: color-mix(in srgb, var(--c) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 70%), var(--glass-2); }
.se-msgs p, .se-found p { margin: 6px 0 0; font-size: 0.9rem; color: var(--ink-2); overflow-wrap: anywhere; }
.se-quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.se-quote q { color: var(--ink); font-style: italic; quotes: "“" "”"; }
.se-code { font: 600 0.8rem/1 var(--mono); color: var(--code-ink); padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line-2); white-space: nowrap; }
.se-code a { color: inherit; }
.se-prov { display: inline-flex; align-items: center; gap: 6px; font: 600 0.66rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.se-found-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.se-found-h strong { font: 600 1rem/1.3 var(--display); color: var(--ink); }
.se-found-h .chip { padding: 5px 10px; font-size: 0.66rem; }
.se-line code { display: block; font-size: 0.74rem; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.se-more a { display: inline-flex; align-items: center; gap: 6px; font: 600 0.74rem/1 var(--mono); }
.se-dsn { margin: 12px 0 4px; }
.se-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.se-toc a { font: 600 0.72rem/1 var(--mono); padding: 7px 11px; border-radius: 999px; text-decoration: none; color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--line); }
.se-toc a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.se-index h3 { display: flex; align-items: center; gap: 9px; margin: 22px 0 4px; font: 650 1rem/1.3 var(--display); color: var(--ink); scroll-margin-top: 20px; }
.se-index h3 .ico { color: var(--cyan); margin: 0; }
.se-codes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 6px; }
.se-codes a { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: 12px; text-decoration: none; background: var(--glass-2); border: 1px solid var(--line); }
.se-codes a:hover { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.se-codes code { flex: none; min-width: 4.6em; font-weight: 600; color: var(--code-ink); }
.se-codes span { min-width: 0; font-size: 0.84rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#providers h3, #tools h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font: 650 0.95rem/1.3 var(--display); }
@media (max-width: 720px) {
  .se-facts { grid-template-columns: 1fr; }
  .se-codes span { white-space: normal; }
}

/* ---------------------------------------------------------------- SPF tree */
.spft-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.spft-fields input { width: 100%; }
.spft-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 6px 0 10px; }
.spft-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; }
.spft-leg-path { color: var(--ok); display: inline-flex; }
.spft { overflow-x: auto; }
.spft-node { min-width: 0; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--c, var(--cyan)) 70%, transparent); }
.spft-node.st-ok { --c: var(--cyan); }
.spft-node.unr { opacity: 0.62; border-left-style: dashed; }
.spft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.spft-ico { display: inline-flex; color: var(--c, var(--cyan)); }
.spft-ico .ico { margin: 0; }
.spft-dom { font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
.spft-sum { margin-left: auto; font: 600 0.7rem/1 var(--mono); color: var(--muted); white-space: nowrap; }
.spft-problem { margin: 8px 0 0; font-size: 0.86rem; color: var(--c); display: flex; gap: 6px; align-items: center; }
.spft-terms { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; display: grid; gap: 4px; }
.spft-t { min-width: 0; padding: 4px 0 4px 10px; border-left: 1px solid var(--line-2); }
.spft-t > .spft-node { margin: 8px 0 6px; }
.spft-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.spft-at { flex: none; display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; border-radius: 8px; font: 700 0.72rem/1 var(--mono); color: var(--muted); border: 1px dashed var(--line-2); }
.spft-at.on { color: var(--accent-ink); background: var(--cyan); border: 0; }
.spft-raw { font-size: 0.8rem; color: var(--code-ink); overflow-wrap: anywhere; }
.spft-mean { font-size: 0.8rem; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.spft-t.over .spft-at.on { background: var(--fail); }
.spft-t.after .spft-at.on { background: color-mix(in srgb, var(--fail) 45%, transparent); }
.spft-t.after .spft-raw, .spft-t.unr .spft-raw { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.spft-t.unr { opacity: 0.7; }
.spft-t.path { border-left: 2px solid var(--ok); }
.spft-t.path > .spft-row .spft-raw { color: var(--ok); font-weight: 700; }
.spft-note { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.spft-note.over { color: var(--fail); font-weight: 600; }
.spft-note.path { color: var(--ok); font-weight: 600; }
.spft-note .ico { margin: 0; }
.spft-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.spft-notes li { display: flex; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--c); }
.spft-path { margin: 10px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.86rem; }
.spft-path li { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .spft-fields { grid-template-columns: 1fr; }
  .spft-sum { margin-left: 0; width: 100%; }
  .spft-terms { padding-left: 0; }
  .spft-t { padding-left: 6px; }
  .spft-node { padding: 10px; }
}
.spft-t.grp summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 600 0.74rem/1.4 var(--mono); color: var(--muted); }
.spft-t.grp summary:hover { color: var(--ink); }
.spft-t.grp summary .ico { margin: 0; }

/* ---------------------------------------------------------------- DNS lookup */
.lk-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 12px; }
.lk-fields input, .lk-fields select { width: 100%; }
.lk-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.lk-types a { font: 600 0.72rem/1 var(--mono); padding: 7px 11px; border-radius: 999px; text-decoration: none; color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--line); }
.lk-types a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.lk-types a[aria-current] { color: var(--accent-ink); background: var(--cyan); border-color: var(--cyan); }
.lk-asked { font-size: 0.95em; background: none; border: 0; padding: 0; color: var(--ink); overflow-wrap: anywhere; }
.lk-ans { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--c) 70%, transparent); min-width: 0; }
.lk-ans-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lk-type { font: 700 0.9rem/1 var(--mono); color: var(--ink); min-width: 3.4em; }
.lk-ans-h .chip { padding: 5px 10px; font-size: 0.68rem; }
.lk-ms { margin-left: auto; font: 0.7rem var(--mono); color: var(--muted); }
.lk-chain { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lk-ans > .hint { margin: 8px 0 0; }
.lk-recs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.lk-recs > li { min-width: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--line-2); }
.lk-rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.lk-val { font-size: 0.84rem; color: var(--code-ink); background: none; border: 0; padding: 0; overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; flex: 1 1 18em; }
.lk-ttl { display: inline-flex; align-items: center; gap: 5px; font: 0.7rem var(--mono); color: var(--muted); white-space: nowrap; }
.lk-ttl .ico { margin: 0; }
.lk-fields-dl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.lk-fields-dl div { display: flex; gap: 6px; align-items: baseline; }
.lk-fields-dl dt { font: 600 0.62rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.lk-fields-dl dd { margin: 0; font-size: 0.8rem; }
.lk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 0.8rem; }
.lk-acts a { display: inline-flex; align-items: center; gap: 5px; }
.lk-acts .ico { margin: 0; }
.lk-about { max-width: 90ch; color: var(--ink-2); margin: 0 0 16px; }
.lk-typelist { margin-top: 16px; }
@media (max-width: 720px) {
  .lk-fields { grid-template-columns: 1fr; }
  .lk-ms { margin-left: 0; }
}

/* ---------------------------------------------------------------- DNS propagation */
.pr-zone { margin: 12px 0 0; }
.pr-groups { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pr-groups li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); min-width: 0; }
.pr-groups li > div { min-width: 0; }
.pr-letter { flex: none; display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 9px; font: 700 0.8rem/1 var(--mono); color: var(--accent-ink); background: var(--c, var(--cyan)); }
.pr-letter.sm { width: 1.7em; height: 1.7em; font-size: 0.7rem; }
.pr-table .pr-letter.sm { background: var(--c, var(--cyan)); }
.pr-gh { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.pr-vals { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.pr-vals code { overflow-wrap: anywhere; }
.pr-table td code { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- visitors' monitoring */
.wt-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wt-more { margin: 12px 0 0; }
.wt-more summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--ink-2); }
.wt-more summary .ico { margin: 0; color: var(--cyan); }
.wt-more input { width: 100%; max-width: 320px; margin-top: 8px; }
.wt-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: 0.86rem; color: var(--ink-2); max-width: 80ch; }
.wt-consent input { margin-top: 3px; flex: none; }
.wt-done .hint { margin: 10px 0 0; }
.wt-doms { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 10px; }
.wt-doms > li { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--c, var(--cyan)) 35%, var(--line)); border-left: 3px solid color-mix(in srgb, var(--c, var(--cyan)) 70%, transparent); }
.wt-dom-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wt-dom { font-size: 0.95rem; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
.wt-rm { margin-left: auto; }
.wt-doms .findings { margin-top: 10px; }
.wt-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 0.82rem; }
.wt-links a { display: inline-flex; align-items: center; gap: 5px; }
.wt-links .ico { margin: 0; }
.wt-add { margin-top: 8px; }
.watch-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 0.9rem; color: var(--ink-2); background: linear-gradient(100deg, color-mix(in srgb, var(--cyan) 10%, transparent), color-mix(in srgb, var(--violet) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); }
.watch-cta > .ico { color: var(--cyan); margin: 0; }
.watch-cta a { font-weight: 600; }
.aw-form .form-actions { margin-top: 14px; }
.aw-toggles, .aw-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 14px; }
.aw-checks { border: 0; padding: 0; }
.aw-checks legend { font: 600 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; }
.aw-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.aw-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-bottom: 14px; }
.aw-fields label { display: block; font-size: 0.86rem; margin-bottom: 6px; color: var(--ink); }
.aw-fields input { width: 100%; max-width: 160px; }
.aw-fields .hint { margin: 6px 0 0; }
.aw-acts { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 720px) {
  .wt-fields { grid-template-columns: 1fr; }
  .wt-rm { margin-left: 0; }
}

/* ---------------------------------------------------------------- admin: exim.ro Send */
.as-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.as-row input, .as-row select { width: 100%; }
.as-row select { font: inherit; color: var(--ink); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.as-row.as-one { grid-template-columns: 1fr; }
.as-del { margin-top: 14px; }
.as-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.as-inline input { flex: 1 1 260px; min-width: 0; }
.as-group { border: 1px solid var(--line-2); border-radius: 16px; padding: 12px 14px 4px; margin: 0 0 14px; }
.as-group legend { font: 600 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); padding: 0 6px; }
.as-group textarea { width: 100%; font-family: var(--mono); font-size: 0.84rem; }

.as-cred-new { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.as-cred-new code { font-size: 0.9rem; }
/* A sending domain: its records and keys. */
.sd { border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 16px; padding: 14px 16px; margin: 12px 0 16px; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.sd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sd-head h3 { margin: 0; font-size: 1rem; }
.sd-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sd-acts form { margin: 0; }
.sd .hint { margin: 8px 0 4px; }
.sd-kind { margin: 6px 0 2px; font-weight: 600; color: var(--ink); font-size: 0.86rem; }
.sd-want { max-width: 46ch; margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sd-got { font-size: 0.76rem; display: inline-block; max-width: 40ch; }
.sd-table td, .sd-keys td { vertical-align: top; }
.sd-keys caption { text-align: left; font: 600 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); padding: 8px 0; }
.as-group .as-date { width: 100%; max-width: 200px; }
.as-group .as-mail { width: 100%; max-width: 420px; }

/* ---------------------------------------------------------------- admin frame (2026-09-27)
   The admin pages as an application: a side bar in groups, a top bar with
   the page's path, flat surfaces, sans-serif headings, dense tables. */
:root {
  --adm-bg: #080c16;
  --adm-side: #0b101e;
  --adm-surface: #0f1528;
  --adm-surface-2: #141b31;
  --adm-line: rgba(160, 190, 255, 0.12);
  --adm-line-2: rgba(160, 190, 255, 0.07);
  --adm-hover: rgba(127, 233, 255, 0.06);
  --adm-sel: rgba(127, 233, 255, 0.1);
}
@media (prefers-color-scheme: light) {
  :root {
    --adm-bg: #f1f4f9;
    --adm-side: #fbfcfe;
    --adm-surface: #ffffff;
    --adm-surface-2: #f5f7fb;
    --adm-line: rgba(30, 50, 110, 0.13);
    --adm-line-2: rgba(30, 50, 110, 0.08);
    --adm-hover: rgba(7, 90, 133, 0.05);
    --adm-sel: rgba(7, 90, 133, 0.09);
  }
}
body.is-admin { background: var(--adm-bg); }
body.is-admin::before, body.is-admin::after { display: none; }
.adm { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.adm [id] { scroll-margin-top: 112px; }

/* The side bar. */
.adm-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; background: var(--adm-side); border-right: 1px solid var(--adm-line); }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; color: var(--ink); text-decoration: none; font: 700 0.98rem/1 var(--display); letter-spacing: -0.02em; }
.adm-brand .brand-mark { width: 28px; height: 28px; }
.adm-brand .brand-mark { border: 1px solid var(--adm-line); }
.adm-brand .brand-mark::before { display: none; }
.adm-brand small { margin-left: auto; font: 600 0.58rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding: 4px 6px; border: 1px solid var(--adm-line); border-radius: 6px; }
.adm-nav { display: grid; align-content: start; gap: 14px; flex: 1; }
.adm-glabel { margin: 0 0 4px; padding: 0 10px; font: 600 0.6rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.adm-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.adm-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 0.88rem; font-weight: 500; }
.adm-nav a .ico { width: 17px; height: 17px; margin: 0; flex: none; color: var(--muted); }
.adm-nav a:hover { background: var(--adm-hover); color: var(--ink); }
.adm-nav a[aria-current="page"] { background: var(--adm-sel); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.adm-nav a[aria-current="page"] .ico { color: var(--accent); }
.adm-nav .dot { margin-left: auto; }
.adm-side-foot { display: grid; gap: 8px; padding: 12px 10px 2px; border-top: 1px solid var(--adm-line); font-size: 0.82rem; }
.adm-side-foot .ico { width: 15px; height: 15px; margin: 0; flex: none; }
.adm-user { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); }
.adm-public { display: flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; }
.adm-public:hover { color: var(--ink); }

/* Lights: the state of a check. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--info); }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-fail { background: var(--fail); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fail) 22%, transparent); }
.dot-none { background: transparent; border: 1.5px solid var(--muted); }

/* The top bar. */
.adm-col { min-width: 0; display: flex; flex-direction: column; }
.adm-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 28px; background: var(--adm-bg); border-bottom: 1px solid var(--adm-line); }
.adm-crumbs { min-width: 0; }
.adm-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: 0.86rem; color: var(--muted); }
.adm-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.adm-crumbs a { color: var(--muted); text-decoration: none; }
.adm-crumbs a:hover { color: var(--ink); }
.adm-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.adm-bar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.adm-health { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; text-decoration: none; color: var(--ink-2); background: var(--adm-surface); border: 1px solid var(--adm-line); }
.adm-health.st-fail { color: var(--fail); background: var(--fail-bg); border-color: color-mix(in srgb, var(--fail) 40%, transparent); }
.adm-out { margin: 0; }
.adm-main { width: 100%; max-width: 1480px; padding: 24px 28px 56px; }

/* Controls: flat, the same height. */
.adm button, .adm .btn { font: 600 0.84rem/1 var(--sans); letter-spacing: 0; color: var(--accent-ink); background: var(--accent); border-radius: 8px; padding: 10px 14px; box-shadow: none; }
.adm button::after, .adm .btn::after { display: none; }
.adm button:hover, .adm .btn:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.adm .btn-sec { font: 500 0.82rem/1 var(--sans); color: var(--ink); background: var(--adm-surface-2); border: 1px solid var(--adm-line); border-radius: 8px; padding: 9px 12px; }
.adm .btn-sec:hover { background: var(--adm-hover); border-color: color-mix(in srgb, var(--accent) 45%, var(--adm-line)); box-shadow: none; }
.adm .btn-sm { padding: 7px 10px; font-size: 0.8rem; }
.adm .btn-danger { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 40%, var(--adm-line)); }
.adm .btn-danger:hover { background: var(--fail-bg); border-color: var(--fail); }
.adm input[type="text"], .adm input[type="email"], .adm input[type="number"], .adm input:not([type]), .adm input[type="search"], .adm textarea, .adm select {
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--adm-bg); border: 1px solid var(--adm-line); border-radius: 8px; padding: 8px 11px;
}
.adm input:focus, .adm textarea:focus, .adm select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.adm .block-label, .adm .aw-fields label { font: 500 0.8rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-bottom: 6px; }

/* A page's heading. */
.adm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 20px; }
.adm h1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px;
  font: 650 1.5rem/1.25 var(--sans); letter-spacing: -0.01em; color: var(--ink);
  background: none; -webkit-background-clip: border-box; background-clip: border-box; padding: 0;
}
.adm h1 .tag { font-size: 0.62rem; }
.adm-lede { margin: 0; max-width: 84ch; font-size: 0.9rem; color: var(--muted); }
.adm-head-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-head-acts form { margin: 0; }
.adm .admin-range { background: var(--adm-surface); border-color: var(--adm-line); border-radius: 8px; }
.adm .admin-range a { border-radius: 6px; font-family: var(--sans); font-size: 0.8rem; }

/* Surfaces. */
.adm .admin-card, .adm .alert { background: var(--adm-surface); border: 1px solid var(--adm-line); border-radius: 12px; box-shadow: none; }
.adm .admin-card { padding: 16px 18px; margin: 0 0 16px; }
.adm .admin-card.st-fail { border-color: color-mix(in srgb, var(--fail) 35%, var(--adm-line)); }
.adm .admin-card h2 { font: 600 0.95rem/1.3 var(--sans); letter-spacing: 0; margin: 0 0 12px; }
.adm .admin-card h2 .ico { width: 17px; height: 17px; color: var(--muted); }
.adm .admin-card h3 { font: 600 0.9rem/1.3 var(--sans); letter-spacing: 0; }
.adm .alert { max-width: none; border-radius: 10px; margin: 0 0 16px; background: var(--fail-bg); border-color: color-mix(in srgb, var(--fail) 35%, transparent); }
.adm .alert-ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.adm .card-h h2 { margin: 0; }
.card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; white-space: nowrap; text-decoration: none; }
.card-link .ico { width: 14px; height: 14px; margin: 0; }

.adm .as-group { background: var(--adm-surface); border: 1px solid var(--adm-line); border-radius: 12px; padding: 14px 18px 4px; }
.adm .sd { border-radius: 10px; }

/* Figures. */
.kpis { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.kpi > a, .kpi > div { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 13px 16px; border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--adm-surface); border: 1px solid var(--adm-line); }
.kpi.st-fail > *, .kpi.st-warn > * { box-shadow: inset 3px 0 0 var(--c); }
.kpi > a:hover { background: var(--adm-surface-2); border-color: color-mix(in srgb, var(--c, var(--accent)) 45%, var(--adm-line)); }
.kpi-l { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.kpi-l .ico { width: 15px; height: 15px; margin: 0; flex: none; color: var(--c, var(--muted)); }
.kpi-v { font: 650 1.55rem/1.1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi.st-fail .kpi-v { color: var(--fail); }
.kpi-h { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }

/* Tables: from edge to edge of their card. */
.adm table { font-size: 0.86rem; }
.adm th, .adm td { padding: 9px 12px; border-bottom-color: var(--adm-line-2); }
.adm thead th { background: var(--adm-surface-2); border-bottom: 1px solid var(--adm-line); }
.adm .admin-card > .table-wrap, .adm .sd > .table-wrap { margin: 10px -18px; }
.adm .admin-card > .table-wrap:last-child { margin-bottom: -16px; }
.adm .admin-card > .table-wrap:last-child tbody tr:last-child td { border-bottom: 0; }
.adm .admin-card > .table-wrap th:first-child, .adm .admin-card > .table-wrap td:first-child { padding-left: 18px; }
.adm .admin-card > .table-wrap th:last-child, .adm .admin-card > .table-wrap td:last-child { padding-right: 18px; }
.adm tbody tr:hover { background: var(--adm-hover); }

.usage { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.usage meter { width: 80px; height: 6px; }
.log-rcpts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.adm-more { margin: 14px 0 0; }
.adm-more .ico { width: 14px; height: 14px; margin: 0 0 0 6px; }

/* Filters. */
.adm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.adm-filter input[type="search"] { flex: 1 1 280px; }

/* The overview. */

.adm-allgood { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 600; color: var(--ok); }
.adm-allgood .ico { margin: 0; }

.adm-feed { list-style: none; margin: 0; padding: 0; }
.adm-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--adm-line-2); font-size: 0.86rem; }
.adm-feed li:last-child { border-bottom: 0; }
.adm-feed .dot { margin-top: 6px; }
.adm-feed p { margin: 0; overflow-wrap: anywhere; }
.adm-feed .hint { margin: 2px 0 0; }
.adm-feed time { margin: 0; font-size: 0.76rem; }

/* Settings in tabs (site.js), with the save bar always in reach. */
.adm-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--adm-line); }
.adm-tabs a { padding: 9px 12px; margin-bottom: -1px; font-size: 0.86rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.adm-tabs a:hover { color: var(--ink); }
.adm-tabs a[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs-on .as-group > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 961px) {
  .adm-menu { display: none; }
  .adm-settings.tabs-on { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 20px; align-items: start; }
  .adm-settings.tabs-on > :not(.adm-tabs) { grid-column: 2; }
  .adm-settings.tabs-on .adm-tabs { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 72px; flex-direction: column; gap: 1px; margin: 0; border: 0; }
  .adm-settings.tabs-on .adm-tabs a { margin: 0; padding: 8px 12px; border: 0; border-radius: 8px; color: var(--ink-2); }
  .adm-settings.tabs-on .adm-tabs a:hover { background: var(--adm-hover); }
  .adm-settings.tabs-on .adm-tabs a[aria-current="true"] { background: var(--adm-sel); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
}
.adm-save { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 16px; border-radius: 12px; background: var(--adm-surface-2); border: 1px solid var(--adm-line); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.6); }
.adm-save .hint { margin: 0; }

/* The sections of an account. */

@media (max-width: 960px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--adm-line); }
  .adm.js-nav .adm-side { display: none; }
  .adm.js-nav.open .adm-side { display: flex; position: fixed; inset: 56px 0 0; z-index: 30; overflow-y: auto; }
  .adm-bar { padding: 8px 12px; }
  .adm-main { padding: 16px 12px 48px; }
  .adm-crumbs li:not(:last-child) { display: none; }
  .adm-crumbs li + li::before { display: none; }
  .adm-health.st-ok span, .adm-out span { display: none; }
  .adm-out .ico, .adm-menu .ico { margin: 0; }
  .adm-menu span { display: none; }
  .adm-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .adm-tabs a { white-space: nowrap; }
  .adm .admin-card { padding: 14px; }
  .adm .admin-card > .table-wrap, .adm .sd > .table-wrap { margin-inline: -14px; }
  .adm .admin-card > .table-wrap th:first-child, .adm .admin-card > .table-wrap td:first-child { padding-left: 14px; }
  .adm .admin-card > .table-wrap:last-child { margin-bottom: -14px; }
  .adm-feed li { grid-template-columns: auto minmax(0, 1fr); }
  .adm-feed time { grid-column: 2; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi > a, .kpi > div { padding: 11px 12px; }
  .kpi-v { font-size: 1.3rem; }
}
@media (max-width: 720px) {
  .adm .rtable tr { padding: 10px 14px; }
  .adm .rtable td { padding: 2px 0; }
  .adm .admin-card > .table-wrap td:first-child { padding-left: 0; }
  .adm thead th { background: none; }
}

/* ---------------------------------------------------------------- admin overview (2026-09-28)
   The system's pulse: a ring of the checks in order, a strip of every
   check, the last 14 days as lines; then the figures and three feeds. */
.pulse {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: 18px 26px;
  margin: 0 0 14px; padding: 20px 24px; border-radius: 18px; border: 1px solid transparent;
  background:
    linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 65%, transparent), color-mix(in srgb, var(--violet) 35%, transparent) 50%, color-mix(in srgb, var(--magenta) 55%, transparent)) border-box;
}
.pulse-fail { background: linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box, linear-gradient(120deg, var(--fail), color-mix(in srgb, var(--magenta) 40%, transparent) 55%, color-mix(in srgb, var(--fail) 60%, transparent)) border-box; }
.pulse-warn { background: linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box, linear-gradient(120deg, var(--warn), color-mix(in srgb, var(--violet) 35%, transparent) 55%, color-mix(in srgb, var(--warn) 55%, transparent)) border-box; }
.pulse-glow {
  position: absolute; z-index: -1; top: -60%; right: -10%; width: 70%; height: 220%; pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 70%),
    radial-gradient(closest-side at 30% 70%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%);
  animation: pulse-drift 16s ease-in-out infinite alternate;
}
.pulse-fail .pulse-glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--fail) 20%, transparent), transparent 70%); }
@keyframes pulse-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-35%, 12%, 0); } }

.pulse-ring { position: relative; display: grid; place-items: center; width: 132px; height: 132px; color: var(--ink); text-decoration: none; border-radius: 50%; }
.pulse-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-track { fill: none; stroke: var(--adm-line); stroke-width: 9; }
.ring-arc { fill: none; stroke: url(#ring-g); stroke-width: 9; stroke-linecap: round; animation: ring-in 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes ring-in { from { stroke-dashoffset: 326.73; } }
.rg-a { stop-color: var(--cyan); }
.rg-b { stop-color: var(--ok); }
.rg-c { stop-color: var(--violet); }
.pulse-fail .rg-a, .pulse-fail .rg-c { stop-color: var(--fail); }
.pulse-fail .rg-b { stop-color: var(--magenta); }
.pulse-warn .rg-b { stop-color: var(--warn); }
.ring-n { display: flex; align-items: baseline; gap: 2px; }
.ring-n strong { font: 700 2.1rem/1 var(--display); letter-spacing: -0.04em; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.pulse-fail .ring-n strong { background: linear-gradient(100deg, var(--fail), var(--magenta)); -webkit-background-clip: text; background-clip: text; }
.ring-n small { font: 600 0.9rem/1 var(--mono); color: var(--muted); }

.pulse-main { min-width: 0; }
.pulse-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 0.64rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.adm .pulse h1 {
  display: block; margin: 0 0 6px; font: 700 clamp(1.35rem, 0.9rem + 1.2vw, 1.95rem)/1.15 var(--display); letter-spacing: -0.035em;
  background: linear-gradient(100deg, var(--ink) 25%, var(--cyan) 70%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.adm .pulse-fail h1 { background: linear-gradient(100deg, var(--ink) 10%, var(--fail) 60%, var(--magenta)); -webkit-background-clip: text; background-clip: text; }
.adm .pulse-warn h1 { background: linear-gradient(100deg, var(--ink) 15%, var(--warn) 70%); -webkit-background-clip: text; background-clip: text; }
.pulse-sub { margin: 0 0 12px; font-size: 0.86rem; color: var(--ink-2); }
.pulse-issues { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.pulse-issues a { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 0.84rem; color: var(--ink); text-decoration: none; background: var(--cb); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.pulse-issues li.st-fail { --c: var(--fail); --cb: var(--fail-bg); }
.pulse-issues li.st-warn { --c: var(--warn); --cb: var(--warn-bg); }
.pulse-issues .dot { align-self: center; }
.pulse-issues span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.pulse-bar { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; height: 10px; }
.seg { flex: 1; min-width: 4px; border-radius: 3px; background: var(--adm-line); transition: transform 0.15s; }
.seg:hover { transform: scaleY(1.6); }
.seg-ok { background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 55%, var(--cyan))); }
.seg-warn { background: var(--warn); }
.seg-fail { background: var(--fail); box-shadow: 0 0 10px color-mix(in srgb, var(--fail) 70%, transparent); }
.seg-none { background: transparent; border: 1px dashed var(--adm-line); }

.pulse-sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.spark { display: grid; gap: 2px; min-width: 0; padding: 12px 14px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid var(--adm-line); transition: border-color 0.2s, transform 0.2s; }
.spark:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sp) 50%, var(--adm-line)); }
.sp-views { --sp: var(--cyan); }
.sp-send { --sp: var(--magenta); }
.spark-l { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); }
.spark-l .ico { width: 14px; height: 14px; margin: 0; color: var(--sp); }
.spark-v { font: 700 1.55rem/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.spark-g { display: block; width: 100%; height: 38px; margin: 4px 0 2px; overflow: visible; }
.spark-line { fill: none; stroke: var(--sp); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: color-mix(in srgb, var(--sp) 16%, transparent); }
.spark-h { font-size: 0.72rem; color: var(--muted); overflow-wrap: anywhere; }

.kpis-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; margin-bottom: 14px; }
.kpis-sm .kpi > a { padding: 11px 14px; gap: 4px; }
.kpis-sm .kpi-v { font: 700 1.2rem/1.15 var(--display); letter-spacing: -0.03em; }
.kpis-sm .kpi-h { font-size: 0.72rem; }
.kpis-sm .kpi > a { position: relative; overflow: hidden; }
.kpis-sm .kpi > a::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c, var(--cyan)), transparent); opacity: 0.7; }

.adm-cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 14px; align-items: start; }
.feed-card { padding: 14px 16px; }
.feed-card .card-h { margin-bottom: 6px; }
.feed-card .adm-feed li { padding: 7px 0; font-size: 0.82rem; gap: 8px; }
.feed-card .adm-feed .dot { margin-top: 5px; }
.feed-card .adm-feed p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-card .adm-feed code { font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
  .pulse-glow, .ring-arc { animation: none; }
}
@media (max-width: 1280px) {
  .pulse { grid-template-columns: auto minmax(0, 1fr); }
  .pulse-sparks { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pulse { gap: 14px 16px; padding: 16px; }
  .pulse-ring { width: 96px; height: 96px; grid-row: span 3; align-self: start; }
  .ring-n strong { font-size: 1.55rem; }
  .ring-n small { font-size: 0.74rem; }
  .pulse-sub { margin-bottom: 0; }
  .pulse-issues, .pulse-bar { grid-column: 1 / -1; }
  .pulse-main { display: contents; }
  .pulse-main > .pulse-kicker, .pulse-main > h1, .pulse-main > .pulse-sub { grid-column: 2; }
  .pulse-time { display: none; }
  .kpis-sm { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin-inline: -12px; padding: 0 12px 4px; scrollbar-width: none; }
  .kpis-sm .kpi { flex: 0 0 158px; scroll-snap-align: start; }
  .feed-card .adm-feed li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .feed-card .adm-feed time { grid-column: auto; font-size: 0.7rem; }
}

/* ---------------------------------------------------------------- admin statistics (2026-09-28)
   The totals with their change, the days as a glowing area, the rankings
   as numbered bars, screens and languages as rings, the days of the week. */
.st-hero {
  position: relative; overflow: hidden; isolation: isolate; margin: 0 0 14px; padding: 18px 22px 16px; border-radius: 18px; border: 1px solid transparent;
  background:
    linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 65%, transparent), color-mix(in srgb, var(--violet) 35%, transparent) 50%, color-mix(in srgb, var(--magenta) 55%, transparent)) border-box;
}
.st-figs { list-style: none; margin: 0 0 14px; padding: 0 0 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-bottom: 1px solid var(--adm-line-2); }
.st-fig { display: grid; gap: 4px; min-width: 0; padding-left: 14px; border-left: 2px solid var(--fc); }
.sf-views { --fc: var(--cyan); }
.sf-visitors { --fc: var(--magenta); }
.sf-entries { --fc: var(--violet); }
.sf-runs { --fc: var(--warn); }
.st-fig-l { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--muted); }
.st-fig-l .ico { width: 15px; height: 15px; margin: 0; color: var(--fc); }
.st-fig-v { font: 700 clamp(1.5rem, 1rem + 1.4vw, 2.15rem)/1.05 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--ink) 30%, var(--fc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-fig-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.74rem; }
.st-fig-d .hint { margin: 0; font-size: 0.74rem; }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font: 600 0.7rem/1.3 var(--mono); white-space: nowrap; color: var(--info); background: var(--info-bg); }
.d-up { color: var(--ok); background: var(--ok-bg); }
.d-down { color: var(--fail); background: var(--fail-bg); }

.st-chart-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 8px; }
.st-chart-top .chart-key { margin: 0; }
.st-peak { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: 999px; font: 600 0.72rem/1.2 var(--mono); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.st-peak .ico { width: 13px; height: 13px; margin: 0; }
.ac-box { position: relative; height: 250px; margin-left: 34px; }
.ac-grid { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.ac-grid li { position: relative; border-top: 1px dashed var(--adm-line); }
.ac-grid span { position: absolute; right: calc(100% + 8px); top: -0.55em; font: 0.66rem/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ac-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acf-0 { stop-color: color-mix(in srgb, var(--cyan) 42%, transparent); }
.acf-1 { stop-color: color-mix(in srgb, var(--violet) 0%, transparent); }
.acs-0 { stop-color: var(--cyan); }
.acs-1 { stop-color: var(--violet); }
.acs-2 { stop-color: var(--magenta); }
.ac-area { fill: url(#ac-fill); }
.ac-varea { fill: color-mix(in srgb, var(--magenta) 8%, transparent); }
.ac-line { fill: none; stroke: url(#ac-stroke); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 55%, transparent)); }
.ac-vline { fill: none; stroke: var(--magenta); stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ac-cols { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; display: flex; }
.ac-cols li { position: relative; flex: 1; min-width: 0; }
.ac-cols li::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--cyan), transparent); opacity: 0; transition: opacity 0.15s; }
.ac-cols li:hover::before { opacity: 0.8; }
.ac-cols li.today::after { content: ""; position: absolute; left: calc(50% - 3px); bottom: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.ac-tip {
  position: absolute; z-index: 3; bottom: calc(100% - 26px); left: 50%; transform: translate(-50%, -8px); display: none; gap: 3px; min-width: 150px; padding: 8px 10px;
  border-radius: 10px; font-size: 0.76rem; white-space: nowrap; color: var(--ink); background: var(--adm-surface-2); border: 1px solid var(--adm-line); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.7);
}
.ac-cols li:hover .ac-tip { display: grid; }
.ac-cols li:nth-child(-n+4) .ac-tip { left: 0; transform: translate(0, -8px); }
.ac-cols li:nth-last-child(-n+4) .ac-tip { left: auto; right: 0; transform: translate(0, -8px); }
.ac-tip span { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ac-tip .key { width: 8px; height: 8px; margin: 0; }
.ac-ticks { display: flex; justify-content: space-between; margin: 8px 0 0 34px; font: 0.68rem/1 var(--mono); color: var(--muted); }

.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.st-grid > .admin-card { margin: 0; }
.st-wide { grid-column: span 2; }
.st-tools { grid-column: 1 / -1; }
.srank { list-style: none; margin: 0; padding: 0; counter-reset: rk; display: grid; gap: 2px; }
.srank li { counter-increment: rk; display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto 3.2em; align-items: baseline; gap: 1px 10px; padding: 3px 0; font-size: 0.84rem; }
.srank[start="11"] { counter-reset: rk 10; margin-top: 2px; }
.srank-more summary { cursor: pointer; margin: 8px 0 0; font-size: 0.8rem; color: var(--accent); list-style: none; }
.srank-more summary::-webkit-details-marker { display: none; }
.srank-more summary::before { content: "+ "; font-family: var(--mono); }
.srank-more[open] summary::before { content: "− "; }
.srank li::before { content: counter(rk); font: 600 0.7rem/1 var(--mono); color: var(--muted); text-align: right; }
.srank li:nth-child(-n+3)::before { color: var(--cyan); }
.srank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srank-n { font: 600 0.8rem var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.srank-pct { font: 0.74rem var(--mono); color: var(--muted); text-align: right; }
.srank-bar { grid-column: 2 / -1; width: 100%; height: 4px; border: 0; border-radius: 3px; background: var(--adm-line-2); appearance: none; -webkit-appearance: none; }
.srank-bar::-webkit-meter-bar { background: var(--adm-line-2); border: 0; border-radius: 3px; height: 5px; }
.srank-bar::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta)); border-radius: 3px; }
.srank-bar::-moz-meter-bar { background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta)); border-radius: 3px; }

.sring-wrap { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 18px; }
.sring { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.sring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sring-track { fill: none; stroke: var(--adm-line-2); stroke-width: 12; }
.sring-part { fill: none; stroke-width: 12; animation: ring-fade 1s ease-out both; }
@keyframes ring-fade { from { opacity: 0; } }
.rp-0 { --rc: var(--cyan); }
.rp-1 { --rc: var(--magenta); }
.rp-2 { --rc: var(--violet); }
.rp-3 { --rc: var(--warn); }
.rp-4 { --rc: var(--ok); }
.sring-part { stroke: var(--rc); }
.sring-total { display: grid; justify-items: center; line-height: 1.1; }
.sring-total strong { font: 700 1.35rem/1 var(--display); letter-spacing: -0.03em; }
.sring-total small { font-size: 0.68rem; color: var(--muted); }
.sring-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.86rem; }
.sring-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.sring-legend b { font: 600 0.8rem var(--mono); }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--rc); box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent); }

.wk-svg { display: block; width: 100%; height: 120px; }
.wk-bar { fill: color-mix(in srgb, var(--violet) 45%, transparent); }
.wk-bar.best { fill: var(--cyan); }
.wk-labels { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 0.72rem; color: var(--muted); }
.wk-labels li { display: grid; gap: 2px; }
.wk-labels b { font: 600 0.74rem var(--mono); color: var(--ink-2); }
.wk-labels li.best, .wk-labels li.best b { color: var(--cyan); }

.tl-head { margin: 0; font-size: 0.72rem; }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 4px 28px; }
.tl-list li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--adm-line-2); font-size: 0.85rem; }
.tl-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-name .ico { width: 16px; height: 16px; margin: 0; flex: none; color: var(--cyan); }
.tl-bar { width: 100%; height: 5px; border: 0; border-radius: 3px; background: var(--adm-line-2); appearance: none; -webkit-appearance: none; }
.tl-bar::-webkit-meter-bar { background: var(--adm-line-2); border: 0; border-radius: 3px; height: 5px; }
.tl-bar::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--warn), var(--magenta)); border-radius: 3px; }
.tl-bar::-moz-meter-bar { background: linear-gradient(90deg, var(--warn), var(--magenta)); border-radius: 3px; }
.tl-n { font: 600 0.82rem var(--mono); text-align: right; min-width: 2.5em; }
.tl-t { display: flex; gap: 4px; }
.tl-t span { padding: 2px 6px; border-radius: 6px; font: 0.7rem/1.3 var(--mono); color: var(--ink-2); background: var(--adm-surface-2); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .sring-part { animation: none; }
}
@media (max-width: 1100px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-wide { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .st-hero { padding: 14px; }
  .st-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .ac-box { height: 190px; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .sring-wrap { grid-template-columns: 110px minmax(0, 1fr); }
  .sring { width: 110px; height: 110px; }
  .sring-total strong { font-size: 1.05rem; }
  .sring-total small { font-size: 0.6rem; }
  .tl-list li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tl-bar { display: none; }
}

/* ---------------------------------------------------------------- admin monitor (2026-09-28, compact)
   A short pulse (ring, verdict, counts, actions, the day's share without
   problems and its strip), then the checks as small tiles in groups, each
   with its alert switch always in view, then events, recipients, watchdog. */
.mon-hero { grid-template-columns: auto minmax(0, 1fr) 230px; gap: 12px 22px; padding: 16px 20px 12px; }
.mon-hero .pulse-ring { width: 104px; height: 104px; }
.mon-hero .ring-n strong { font-size: 1.75rem; }
.mon-hero .pulse-kicker { margin-bottom: 4px; }
.adm .mon-hero h1 { margin: 0 0 10px; font-size: clamp(1.3rem, 0.9rem + 1vw, 1.75rem); }
.mon-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mon-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mon-counts li { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; color: var(--ink-2); background: color-mix(in srgb, var(--mc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 32%, transparent); }
.mon-counts b { font: 700 0.9rem/1 var(--mono); color: var(--mc); }
.mc-ok { --mc: var(--ok); }
.mc-fail { --mc: var(--fail); }
.mc-warn { --mc: var(--warn); }
.mc-none { --mc: var(--muted); }
.mon-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mon-actions form { margin: 0; }
.mon-up { display: grid; gap: 2px; align-content: center; align-self: stretch; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid var(--adm-line); }
.mon-up .spark-l { margin: 0; }
.mon-up .spark-l .ico { color: var(--ok); }
.mon-up .spark-h { margin: 0; }
.mon-up-v { margin: 2px 0; font: 700 2.3rem/1 var(--display); letter-spacing: -0.04em; background: linear-gradient(100deg, var(--ok), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mon-up-v.dirty { background: linear-gradient(100deg, var(--warn), var(--fail)); -webkit-background-clip: text; background-clip: text; }
.mon-up-v small { font-size: 0.5em; margin-left: 2px; }
.mon-tl { grid-column: 1 / -1; }
.tl-svg { display: block; width: 100%; height: 20px; overflow: visible; }
.tlg-0 { stop-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tlg-1 { stop-color: var(--ok); }
.tl-track { fill: url(#tl-g); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ok) 45%, transparent)); }
.tl-band { fill: var(--fail); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--fail) 75%, transparent)); }
.tl-mark { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tm-down { stroke: var(--fail); }
.tm-up { stroke: var(--ok); }
.tl-ticks { display: flex; justify-content: space-between; margin: 3px 0 0; font: 0.64rem/1 var(--mono); color: var(--muted); }

.mon-group { margin: 0 0 14px; }
.mon-group h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font: 600 0.84rem/1.3 var(--sans); letter-spacing: 0; }
.mon-group h2 .ico { width: 16px; height: 16px; margin: 0; color: var(--cyan); }
.mg-bar { flex: 0 1 140px; height: 4px; margin-left: auto; border: 0; border-radius: 2px; background: var(--adm-line-2); appearance: none; -webkit-appearance: none; }
.mg-bar::-webkit-meter-bar { background: var(--adm-line-2); border: 0; border-radius: 2px; height: 4px; }
.mg-bar::-webkit-meter-optimum-value, .mg-bar::-webkit-meter-suboptimum-value, .mg-bar::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, var(--cyan), var(--ok)); border-radius: 2px; }
.mg-bar::-moz-meter-bar { background: linear-gradient(90deg, var(--cyan), var(--ok)); border-radius: 2px; }
.mg-ok { font: 600 0.72rem var(--mono); color: var(--muted); }
.mtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; }
.mtile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px 9px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c, var(--info)) 9%, transparent), transparent 45%), var(--adm-surface);
  border: 1px solid color-mix(in srgb, var(--c, var(--info)) 24%, var(--adm-line)); transition: border-color 0.2s, box-shadow 0.2s;
}
.mtile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--info)); box-shadow: 0 0 12px var(--c, var(--info)); }
.mtile:hover { border-color: color-mix(in srgb, var(--c, var(--info)) 55%, var(--adm-line)); box-shadow: 0 8px 24px -16px var(--c, var(--info)); }
.mtile.st-fail { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fail) 35%, transparent), 0 10px 28px -14px var(--fail); }
.mtile.muted { opacity: 0.75; }
.mtile-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--c, var(--info)); background: color-mix(in srgb, var(--c, var(--info)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--info)) 30%, transparent); }
.mtile-ico .ico { width: 16px; height: 16px; margin: 0; }
.mtile-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.mtile-body > * { min-width: 0; }
.mtile-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0; }
.mtile-h strong { min-width: 0; font-size: 0.88rem; line-height: 1.3; overflow-wrap: anywhere; }
.mtile-what { margin: 0; font-size: 0.74rem; line-height: 1.4; color: var(--muted); }
.mtile .tag { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--c); background: var(--cb); }
.mtile-detail { margin: 2px 0 0; padding: 6px 9px; border-radius: 8px; font-size: 0.8rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; background: color-mix(in srgb, var(--c, var(--info)) 8%, var(--adm-bg)); border: 1px solid var(--adm-line-2); }
.mtile-detail.empty { color: var(--muted); font-style: italic; }
.mtile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: 2px; }
.mtile-meta { margin: 0; min-width: 0; font: 0.68rem/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.mtile .mon-mute { margin: 0; flex: none; }
.adm .mute-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font: 500 0.7rem/1 var(--sans); color: var(--ink-2); background: var(--adm-surface-2); border: 1px solid var(--adm-line); }
.adm .mute-btn .ico { width: 12px; height: 12px; margin: 0; }
.adm .mute-btn:hover { color: var(--ink); background: var(--adm-hover); border-color: color-mix(in srgb, var(--accent) 45%, var(--adm-line)); }
.adm .mute-btn.is-muted { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.adm-live { animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.35; transform: scale(0.7); } }

.mon-aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin-top: 4px; }
.mon-aside > .admin-card { margin: 0; }
.mon-events { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.mon-events li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 0 0 10px; font-size: 0.8rem; }
.mon-events li::before { content: ""; position: absolute; left: 3.5px; top: 12px; bottom: 0; width: 1px; background: var(--adm-line); }
.mon-events li:last-child::before { display: none; }
.mon-events .dot { margin-top: 5px; }
.mon-events p { margin: 0; overflow-wrap: anywhere; }
.mon-events time { font-size: 0.68rem; }
.mon-rcpts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.mon-rcpts li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mon-rcpts form { margin: 0; }
.mon-rcpts .btn-sm .ico { margin: 0; }
.mon-wd .card-h .dot { width: 10px; height: 10px; }
.mon-wd .acc-state { margin: 0 0 6px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .adm-live { animation: none; } }
@media (max-width: 1280px) {
  .mon-hero { grid-template-columns: auto minmax(0, 1fr); }
  .mon-up { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 14px; }
  .mon-up-v { font-size: 1.7rem; }
}
@media (max-width: 1100px) {
  .mon-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mon-hero .pulse-ring { width: 80px; height: 80px; grid-row: span 2; }
  .mon-hero .ring-n strong { font-size: 1.3rem; }
  .mon-hero .mon-bar { grid-column: 1 / -1; }
  .mon-up { grid-template-columns: 1fr auto; }
  .mon-up .spark-h { grid-column: 1 / -1; }
  .mg-bar { flex-basis: 70px; }
  .mon-group h2 > span:first-of-type { white-space: nowrap; }
  .tl-ticks span:nth-child(2), .tl-ticks span:nth-child(4) { display: none; }
}

/* ---------------------------------------------------------------- admin reports (2026-09-28)
   The kind as two large switches, the pass rate as a ring with the totals,
   the days as stacked bars with hover details, the sources as tiles, the
   latest reports and the rejected ones as feeds with every field shown. */
.rep-hero.rep-fail { background: linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box, linear-gradient(120deg, var(--fail), color-mix(in srgb, var(--magenta) 40%, transparent) 55%, color-mix(in srgb, var(--fail) 60%, transparent)) border-box; }
.rep-hero.rep-warn { background: linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box, linear-gradient(120deg, var(--warn), color-mix(in srgb, var(--violet) 35%, transparent) 55%, color-mix(in srgb, var(--warn) 55%, transparent)) border-box; }
.rep-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.rep-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-kinds a { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 12px; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid var(--adm-line); transition: border-color 0.2s, background 0.2s; }
.rep-kinds a .ico { width: 18px; height: 18px; margin: 0; color: var(--muted); }
.rep-kinds a span { display: grid; line-height: 1.2; }
.rep-kinds strong { font: 700 0.95rem/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.rep-kinds small { font-size: 0.7rem; color: var(--muted); }
.rep-kinds a:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--adm-line)); }
.rep-kinds a[aria-current="true"] { background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 16%, transparent), color-mix(in srgb, var(--violet) 12%, transparent)); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); box-shadow: 0 0 22px -10px var(--cyan); }
.rep-kinds a[aria-current="true"] .ico { color: var(--cyan); }
.rep-figs { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--adm-line-2); }
.rep-ring { width: 118px; height: 118px; }
.rep-ring .ring-n strong { font-size: 1.45rem; }
.rep-fail .rg-a, .rep-fail .rg-c { stop-color: var(--fail); }
.rep-fail .rg-b { stop-color: var(--magenta); }
.rep-warn .rg-b { stop-color: var(--warn); }
.rep-fail .ring-n strong { background: linear-gradient(100deg, var(--fail), var(--magenta)); -webkit-background-clip: text; background-clip: text; }
.rep-figs .st-figs { margin: 0; padding: 0; border: 0; }
.sf-ok { --fc: var(--ok); }
.sf-fail { --fc: var(--fail); }
.rb-box { height: 200px; }
.rbo-0 { stop-color: var(--ok); }
.rbo-1 { stop-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.rb-ok { fill: url(#rb-ok); }
.rb-fail { fill: var(--fail); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fail) 70%, transparent)); }
.ac-tip .key-ok, .ac-tip .key-fail { width: 8px; height: 8px; }

.rep-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0 0 14px; }
.rep-sources > .admin-card { margin: 0; }
.adm .rep-src { background: linear-gradient(110deg, color-mix(in srgb, var(--c, var(--info)) 8%, transparent), transparent 50%), var(--adm-surface); border-color: color-mix(in srgb, var(--c, var(--info)) 26%, var(--adm-line)); }
.rep-src .card-h .dot { width: 10px; height: 10px; }
.rep-src .acc-state { margin: 0 0 8px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rep-src .acc-state .ico { margin: 0; }
.rep-pills { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rep-pills li { padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; color: var(--ink-2); background: var(--adm-surface-2); border: 1px solid var(--adm-line); }
.rep-pills b { font: 700 0.86rem var(--mono); color: var(--ink); }
.rep-pills li.ok b { color: var(--ok); }
.rep-pills li.bad b { color: var(--fail); }
.rep-rua { display: grid; gap: 6px; justify-items: start; }
.rep-rua .rec { width: 100%; margin: 4px 0 0; }

.rep-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rep-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(100deg, color-mix(in srgb, var(--c, var(--info)) 7%, transparent), transparent 50%), var(--adm-surface-2); border: 1px solid color-mix(in srgb, var(--c, var(--info)) 22%, var(--adm-line)); }
.rep-kind { display: grid; place-items: center; min-width: 58px; padding: 6px 8px; border-radius: 8px; font: 700 0.7rem/1 var(--mono); letter-spacing: 0.08em; }
.k-tls { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); }
.k-dmarc { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent); }
.rep-main { min-width: 0; display: grid; gap: 3px; }
.rep-org { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.rep-org .hint { margin: 0; font: 0.72rem var(--mono); }
.rep-meta { margin: 0; font-size: 0.74rem; color: var(--muted); overflow-wrap: anywhere; }
.rep-nums { display: grid; gap: 5px; justify-items: end; }
.rep-nums p { margin: 0; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.rep-nums b { font: 700 0.9rem var(--mono); color: var(--ink); }
.rep-nums b.bad { color: var(--fail); }
.rep-split { width: 130px; height: 6px; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--ok) 55%, transparent); appearance: none; -webkit-appearance: none; }
.rep-split::-webkit-meter-bar { background: color-mix(in srgb, var(--ok) 55%, transparent); border: 0; border-radius: 3px; height: 6px; }
.rep-split::-webkit-meter-optimum-value, .rep-split::-webkit-meter-suboptimum-value, .rep-split::-webkit-meter-even-less-good-value { background: var(--fail); border-radius: 3px; }
.rep-split::-moz-meter-bar { background: var(--fail); border-radius: 3px; }
.rep-rej li { grid-template-columns: auto minmax(0, 1fr); }
.rep-more { margin-top: 8px; }
.rep-rej .dot { margin: 0 4px; }

@media (max-width: 720px) {
  .rep-figs { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rep-figs .st-figs { width: 100%; }
  .rep-feed li { grid-template-columns: auto minmax(0, 1fr); }
  .rep-nums { grid-column: 1 / -1; justify-items: start; }
  .rep-kinds { width: 100%; }
  .rep-kinds a { flex: 1; }
}

/* ---------------------------------------------------------------- admin monitor: section menu (2026-09-28)
   A small menu on the left that follows the page (site.js [data-spy] lights
   the section in view and fills the bar); on narrow screens a row of pills
   under the top bar. */
.mon-page { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 20px; align-items: start; }
.mon-content { min-width: 0; }
.mon-nav { position: sticky; top: 72px; padding: 12px 10px; border-radius: 14px; background: var(--adm-surface); border: 1px solid var(--adm-line); }
.mon-nav-h { margin: 0 0 8px; padding: 0 8px; font: 600 0.6rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.mon-nav ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.mon-nav li { min-width: 0; }
.mon-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 0.82rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.mon-nav a .ico { width: 15px; height: 15px; margin: 0; flex: none; color: var(--muted); }
.mon-nav a .dot { flex: none; margin: 0 3px; }
.mon-nav a span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mon-nav a b { margin-left: auto; font: 600 0.68rem var(--mono); color: var(--muted); }
.mon-nav a b.bad { color: var(--fail); }
.mon-nav a > .dot:last-child { margin-left: auto; }
.mon-nav a:hover { background: var(--adm-hover); color: var(--ink); }
.mon-nav a.on { color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 16%, transparent), transparent); box-shadow: inset 2px 0 0 var(--cyan); }
.mon-nav a.on .ico { color: var(--cyan); }
.mon-nav-track { position: relative; height: 2px; margin: 10px 8px 0; border-radius: 2px; background: var(--adm-line-2); overflow: hidden; }
.mon-nav-track .jump-bar { left: 0; right: 0; top: 0; bottom: 0; height: auto; }
@media (max-width: 1100px) {
  .mon-page { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mon-nav { top: 56px; z-index: 12; padding: 6px; border-radius: 12px; }
  .mon-nav-h { display: none; }
  .mon-nav ol { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .mon-nav ol::-webkit-scrollbar { display: none; }
  .mon-nav li { flex: none; }
  .mon-nav a span { flex: none; overflow: visible; }
  .mon-nav a { padding: 6px 10px; }
  .mon-nav a.on { box-shadow: inset 0 -2px 0 var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
  .mon-nav-track { margin: 6px 4px 0; }
}
/* The reports page uses the same side menu; the analysis' own pill bar
   would repeat it. */
.rep-page .jump { display: none; }
.dot-error { background: var(--error); }
.dot-info { background: var(--info); }

/* ---------------------------------------------------------------- admin Send accounts (2026-09-28)
   Today's traffic as figures, the 14 days as a large line, the server's
   facts beside it; the accounts as tiles with every field shown. */
.send-hero .st-figs { margin-bottom: 14px; }
.send-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.send-spark { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid var(--adm-line); transition: border-color 0.2s; }
.send-spark:hover { border-color: color-mix(in srgb, var(--magenta) 45%, var(--adm-line)); }
.send-spark .spark-l .ico { color: var(--magenta); }
.send-spark-g { display: block; width: 100%; height: 110px; overflow: visible; }
.ssg-0 { stop-color: color-mix(in srgb, var(--magenta) 40%, transparent); }
.ssg-1 { stop-color: color-mix(in srgb, var(--violet) 0%, transparent); }
.send-spark-area { fill: url(#ss-g); }
.send-spark-line { fill: none; stroke: var(--magenta); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--magenta) 60%, transparent)); }
.send-facts { margin: 0; display: grid; gap: 0; padding: 4px 14px; border-radius: 14px; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid var(--adm-line); }
.send-facts div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--adm-line-2); }
.send-facts div:last-child { border-bottom: 0; }
.send-facts dt { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.send-facts dt .ico { width: 15px; height: 15px; margin: 0; flex: none; color: var(--cyan); }
.send-facts dd { margin: 0; font-size: 0.82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.send-facts dd b { font: 700 0.9rem var(--mono); color: var(--ink); }
.send-facts .tag { margin: 1px 0; }

.send-accs { margin: 0 0 16px; }
.send-sec-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 600 0.9rem/1.3 var(--sans); letter-spacing: 0; }
.send-sec-h .ico { width: 16px; height: 16px; margin: 0; color: var(--cyan); }
.acc-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.acc-tile {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 55%), var(--adm-surface);
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--adm-line)); transition: border-color 0.2s, box-shadow 0.2s;
}
.acc-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.acc-tile:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--adm-line)); box-shadow: 0 12px 30px -18px var(--c); }
.acc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.acc-name { font: 700 1.1rem/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.acc-name:hover { color: var(--accent); }
.acc-tile .tag { flex: none; color: var(--c); background: var(--cb); }
.acc-note { margin: -4px 0 0; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.acc-reason { display: flex; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 9px; font-size: 0.8rem; color: var(--ink); background: var(--fail-bg); border: 1px solid color-mix(in srgb, var(--fail) 35%, transparent); overflow-wrap: anywhere; }
.acc-reason .ico { flex: none; width: 15px; height: 15px; margin: 2px 0 0; color: var(--fail); }
.acc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acc-stats > div { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid var(--adm-line-2); }
.acc-stats .hint { margin: 0; font-size: 0.7rem; }
.acc-stats b { font: 700 0.9rem var(--mono); }
.acc-use meter { width: 100%; height: 5px; border: 0; border-radius: 3px; background: var(--adm-line-2); appearance: none; -webkit-appearance: none; }
.acc-use meter::-webkit-meter-bar { background: var(--adm-line-2); border: 0; border-radius: 3px; height: 5px; }
.acc-use meter::-webkit-meter-optimum-value, .acc-use meter::-webkit-meter-suboptimum-value, .acc-use meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, var(--cyan), var(--magenta)); border-radius: 3px; }
.acc-use meter::-moz-meter-bar { background: linear-gradient(90deg, var(--cyan), var(--magenta)); border-radius: 3px; }
.acc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: auto; }
.acc-foot .hint { margin: 0; font-size: 0.72rem; }
@media (max-width: 900px) {
  .send-row { grid-template-columns: minmax(0, 1fr); }
}
.st-fig-d .delta { white-space: normal; max-width: 100%; }

/* ---------------------------------------------------------------- admin Send account (2026-09-28)
   The account's card: name, state and reason; today against the daily
   limit as a ring; today's outcome and the limits; the last 14 days. */
.acc-hero.acc-fail { background: linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box, linear-gradient(120deg, var(--fail), color-mix(in srgb, var(--magenta) 40%, transparent) 55%, color-mix(in srgb, var(--fail) 60%, transparent)) border-box; }
.acc-hero.acc-warn { background: linear-gradient(var(--adm-surface), var(--adm-surface)) padding-box, linear-gradient(120deg, var(--warn), color-mix(in srgb, var(--violet) 35%, transparent) 55%, color-mix(in srgb, var(--warn) 55%, transparent)) border-box; }
.acc-hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--adm-line-2); }
.acc-hero-id { min-width: 0; flex: 1 1 360px; }
.adm .acc-hero h1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 clamp(1.5rem, 1rem + 1.4vw, 2.1rem)/1.1 var(--display); letter-spacing: -0.035em;
}
.adm .acc-hero h1 .tag { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.1em; color: var(--c); background: var(--cb); }
.acc-hero .pulse-sub { margin: 0 0 8px; overflow-wrap: anywhere; }
.acc-hero .acc-reason { margin-top: 4px; }
.acc-hero-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); align-items: center; gap: 18px; }
.acc-ring { width: 124px; height: 124px; }
.acc-ring-n { display: grid; justify-items: center; gap: 2px; line-height: 1; }
.acc-ring-n strong { font-size: 1.7rem; }
.acc-ring-n small { font: 600 0.72rem/1 var(--mono); color: var(--muted); }
.acc-ring-n em { font: 600 0.6rem/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.acc-ring-fail .rg-a, .acc-ring-fail .rg-c { stop-color: var(--fail); }
.acc-ring-fail .rg-b { stop-color: var(--magenta); }
.acc-ring-warn .rg-b { stop-color: var(--warn); }
.acc-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border: 0; gap: 14px 12px; }
.acc-figs .st-fig-v { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); }
.acc-figs .st-fig-v small { font-size: 0.5em; margin-left: 2px; }
.acc-spark .send-spark-g { height: 90px; }
@media (max-width: 1280px) {
  .acc-hero-row { grid-template-columns: auto minmax(0, 1fr); }
  .acc-spark { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .acc-hero-row { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .acc-figs { width: 100%; }
}

/* ---------------------------------------------------------------- admin Send log (2026-09-28)
   Quick filters in the side menu; each message as a card with every field:
   sender, Message-ID, each recipient with its state, code and the whole
   answer of the receiving server. */
.mon-nav-h2 { margin-top: 14px; }
.mon-nav-filters { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mon-nav-filters a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 0.8rem; color: var(--ink-2); text-decoration: none; }
.mon-nav-filters a .ico { width: 14px; height: 14px; margin: 0; color: var(--muted); }
.mon-nav-filters a .dot { margin: 0 3px; }
.mon-nav-filters a:hover { background: var(--adm-hover); color: var(--ink); }
.mon-nav-filters a.cur { color: var(--ink); font-weight: 600; background: var(--adm-sel); }
.send-hero .pulse-kicker { margin-bottom: 12px; }
.log-spark .send-spark-g { height: 80px; }
.log-search .adm-filter { margin: 0; }
.log-list { margin: 0 0 16px; }
.log-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.log-card {
  position: relative; display: grid; gap: 8px; padding: 12px 14px 10px 16px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 45%), var(--adm-surface);
  border: 1px solid color-mix(in srgb, var(--c) 24%, var(--adm-line));
}
.log-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.log-head time { font: 600 0.82rem var(--mono); color: var(--ink); }
.log-acc { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; text-decoration: none; color: var(--ink-2); background: var(--adm-surface-2); border: 1px solid var(--adm-line); }
.log-acc .ico { width: 12px; height: 12px; margin: 0; color: var(--cyan); }
.log-acc:hover { color: var(--ink); border-color: color-mix(in srgb, var(--cyan) 45%, var(--adm-line)); }
.log-size { margin-left: auto; font: 0.74rem var(--mono); color: var(--muted); }
.log-kv { margin: 0; display: grid; gap: 3px; }
.log-kv div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 0.8rem; }
.log-kv dt { font: 600 0.62rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.log-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.log-card .log-rcpts { gap: 6px; }
.log-card .log-rcpts li { padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--adm-line-2)); }
.lr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lr-top code { overflow-wrap: anywhere; }
.lr-top .tag { color: var(--c); background: var(--cb); }
.lr-top .hint { margin: 0 0 0 auto; font: 0.7rem var(--mono); }
.lr-code { color: var(--c); }
.lr-resp { margin: 5px 0 0; font: 0.74rem/1.45 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.log-meta { margin: 0; font-size: 0.72rem; color: var(--muted); overflow-wrap: anywhere; }
.log-meta code { font-size: 0.95em; }
@media (max-width: 1100px) {
  .mon-nav-h2 { display: none; }
  .mon-nav-filters { display: none; }
}

/* ---------------------------------------------------------------- admin Send pages, second round (2026-09-28)
   Suppressions, settings, history and the waiting list: the same menu,
   a summary on top and cards with every field. */
.st-figs-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.set-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
.set-figs .st-fig-v small { font-size: 0.45em; margin-left: 3px; letter-spacing: 0; }
.st-fig-v.set-small { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
.st-hero > .st-figs:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.supp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.supp-card {
  position: relative; display: grid; gap: 8px; align-content: start; padding: 12px 14px 10px 16px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 45%), var(--adm-surface);
  border: 1px solid color-mix(in srgb, var(--c) 24%, var(--adm-line));
}
.supp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.supp-card .tag { color: var(--c); background: var(--cb); }
.supp-addr { font-size: 0.86rem; overflow-wrap: anywhere; }
.supp-card .acc-foot form { margin: 0; }
.supp-card .admin-acts { padding: 0; }
.au-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.au-feed li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 0 0 12px; }
.au-feed li::before { content: ""; position: absolute; left: 9px; top: 16px; bottom: 0; width: 1px; background: var(--adm-line); }
.au-feed li:last-child::before { display: none; }
.au-dot { width: 12px; height: 12px; margin: 4px 0 0 3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 0 10px var(--c); }
.au-body { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--adm-surface); border: 1px solid color-mix(in srgb, var(--c) 20%, var(--adm-line)); min-width: 0; }
.au-what { margin: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.au-body .log-meta .ico { width: 12px; height: 12px; margin: 0 3px 0 0; vertical-align: -1px; }
.au-body .tag { color: var(--c); background: var(--cb); }

/* Settings: the groups as a menu card like the others. */
.adm-settings.tabs-on .adm-tabs { padding: 12px 10px; border-radius: 14px; background: var(--adm-surface); border: 1px solid var(--adm-line); }
.adm-settings .adm-tabs .mon-nav-h { flex-basis: 100%; }
.adm-settings .adm-tabs a { display: flex; align-items: center; gap: 8px; }
.adm-settings .adm-tabs a .ico { width: 15px; height: 15px; margin: 0; flex: none; color: var(--muted); }
.adm-settings .adm-tabs a .dot { margin-left: auto; }
.adm-settings .adm-tabs a[aria-current="true"] .ico { color: var(--cyan); }
@media (min-width: 961px) {
  .adm-settings.tabs-on .adm-tabs a { font-size: 0.84rem; }
  .adm-settings.tabs-on .adm-tabs a[aria-current="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 16%, transparent), transparent); box-shadow: inset 2px 0 0 var(--cyan); }
}
@media (max-width: 960px) {
  .adm-settings .adm-tabs .mon-nav-h { display: none; }
  .set-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- admin visitors' monitoring and access (2026-09-28) */
.aw-cap { display: grid !important; gap: 4px; }
.aw-cap meter { width: 100%; height: 5px; border: 0; border-radius: 3px; background: var(--adm-line-2); appearance: none; -webkit-appearance: none; }
.aw-cap meter::-webkit-meter-bar { background: var(--adm-line-2); border: 0; border-radius: 3px; height: 5px; }
.aw-cap meter::-webkit-meter-optimum-value, .aw-cap meter::-webkit-meter-suboptimum-value, .aw-cap meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, var(--violet), var(--magenta)); border-radius: 3px; }
.aw-cap meter::-moz-meter-bar { background: linear-gradient(90deg, var(--violet), var(--magenta)); border-radius: 3px; }
.aw-run { margin: 12px 0 0; }
.aw-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.aw-chip { padding: 6px 12px; border-radius: 999px; background: var(--adm-surface-2); border: 1px solid var(--adm-line); }
.aw-chip:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 45%, var(--adm-line)); background: var(--ok-bg); }
.aw-doms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aw-doms > li { padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--adm-bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--adm-line-2)); }
.aw-doms .tag { color: var(--c); background: var(--cb); }
.aw-probs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.78rem; color: var(--ink-2); }
.aw-probs li { padding-left: 10px; border-left: 2px solid var(--c); overflow-wrap: anywhere; }
.aw-probs li.st-fail { --c: var(--fail); }
.aw-probs li.st-warn { --c: var(--warn); }

.acc-you-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; }
.acc-ip-big { margin: 4px 0 6px; font: 700 clamp(1.4rem, 1rem + 1.4vw, 2.1rem)/1.1 var(--mono); letter-spacing: -0.02em; overflow-wrap: anywhere; background: linear-gradient(100deg, var(--ink) 20%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-you-hero .acc-state { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.acc-you-hero .acc-state .ico { margin: 0; }
.acc-addme { display: grid; gap: 6px; justify-items: end; max-width: 320px; }
.acc-addme .hint { margin: 0; text-align: right; }
.acc-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.acc-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--adm-surface-2); border: 1px solid color-mix(in srgb, var(--c, var(--info)) 24%, var(--adm-line)); }
.acc-list li.you { --c: var(--ok); box-shadow: 0 0 20px -12px var(--ok); }
.acc-list code { font-size: 0.9rem; }
.acc-list form { margin: 0; }
@media (max-width: 720px) {
  .acc-you-hero { grid-template-columns: minmax(0, 1fr); }
  .acc-addme { justify-items: start; }
  .acc-addme .hint { text-align: left; }
  .acc-list li { grid-template-columns: auto minmax(0, 1fr); }
  .acc-list form { grid-column: 1 / -1; }
}
.acc-you-figs { margin: 14px 0 0; padding: 14px 0 0; border-bottom: 0; border-top: 1px solid var(--adm-line-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-recover p:last-child { margin: 0; color: var(--ink-2); }

/* ---------------------------------------------------------------- admin account (2026-09-28) */
.me-pass { position: relative; display: flex; align-items: center; }
.me-pass input { width: 100%; padding-right: 44px; }
.adm .me-pass .reveal { position: absolute; right: 4px; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.adm .me-pass .reveal:hover { background: var(--adm-hover); color: var(--ink); }
.me-form .caps { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 0.76rem; color: var(--warn); }
.me-form .caps[hidden] { display: none; }
.me-form .caps .ico { margin: 0; width: 14px; height: 14px; }
.me-form button[disabled] { opacity: 0.5; cursor: not-allowed; }
.me-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.me-agent { font: 0.7rem/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.acc-list .rep-org strong { font-size: 0.84rem; }
.me-hours { margin: 6px 0 0; }
.me-hours input { width: 110px; flex: none; }
.me-hours .block-label { margin: 0; }
.me-hours .hint { margin: 0; }
@media (max-width: 960px) { .me-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm input[type="password"] { font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--adm-bg); border: 1px solid var(--adm-line); border-radius: 8px; padding: 8px 44px 8px 11px; min-height: 38px; }
.adm input[type="password"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.lr-close { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.lr-close .hint { margin: 0; font-size: 0.72rem; }