/* AnonyMail web app (preview) — COPIED from AnonyVPN's static/app.css (the Anony Labs signed-in style, itself
   AnonyChat's design system) so every product dashboard looks the same: ink #151719, off-white #F3F2ED, the same
   graphite grounds and rules, type scale, radii (chip 6, control 10, card 14), focus ring, 44 px targets, the rail
   (72 px, hover-expands to 240 px over the content, labelled from 1280 px), the 300 px Settings pane and the phone
   bottom bar. ONLY the brand changes: ONE accent, AnonyMail mail blue #4DA3FF (was AnonyVPN orange), and asset paths
   under /static/. Sections copied verbatim except those swaps; AnonyMail-only additions are at the end ("AnonyMail
   additions"). test/unit/tokens.test.ts checks the shared tokens against AnonyVPN's file. No inline styles anywhere
   (CSP style-src 'self'). */
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/static/fonts/plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-latin.woff2?v=1") format("woff2"); font-weight: 300 700; font-style: normal; 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: "Space Grotesk Fallback"; src: local("Arial"); ascent-override: 89.71%; descent-override: 26.62%; line-gap-override: 0%; size-adjust: 109.69%; }

:root {
  /* grounds and rules (AnonyChat's palette) */
  --bg: #151719; --surface: #1c1f21; --raised: #24282b; --overlay: #2b2f32; --field: #1b1e20;
  --rule: #303538; --rule-strong: #3c4246; --rule-hover: #4a5156;
  /* text */
  --fg: #f3f2ed; --fg-soft: #dad9d4; --fg-2: #bbbfc1; --fg-3: #999fa3; --placeholder: #6f7579;
  /* the one accent: AnonyMail mail blue (AnonyVPN: orange #ff9f43) */
  --accent: #4da3ff; --accent-hover: #7cbcff; --accent-soft: #1c2937; --accent-line: rgba(77, 163, 255, 0.4); --on-accent: #151719;
  /* status colours (badges, meters, banners) — never decoration */
  --ok: #3ce8a0; --warn: #f2c94c; --danger: #ff6b8a; --info: #6cb6ff;
  --ok-line: rgba(60, 232, 160, 0.4); --warn-line: rgba(242, 201, 76, 0.4); --danger-line: rgba(255, 107, 138, 0.45); --info-line: rgba(108, 182, 255, 0.4);
  --warn-bg: rgba(242, 201, 76, 0.07); --danger-bg: rgba(255, 107, 138, 0.08); --info-bg: rgba(108, 182, 255, 0.07); --note-bg: rgba(243, 242, 237, 0.04);
  /* shape, type, motion */
  --r-chip: 6px; --r-control: 10px; --r-card: 14px; --radius: var(--r-control);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", system-ui, sans-serif;
  --display: "Archivo Black", "Archivo Black Fallback", var(--font);
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --shadow-overlay: 0 16px 48px -12px rgba(0, 0, 0, 0.7);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 400 16px/1.55 var(--font); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: var(--fg); text-underline-offset: 3px; }
a:hover { color: #fff; }
::selection { background: rgba(77, 163, 255, 0.4); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(28px, 5vw, 40px); }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: 0.88em; }
.lead { color: var(--fg-2); font-size: 17px; }
.small, .hint { color: var(--fg-3); font-size: 14px; }
.mono { font-family: var(--mono); font-size: 13px; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; }
.ico--sm { width: 16px; height: 16px; }
.ico--xs { width: 14px; height: 14px; }

/* ---- public pages (legal, "not open yet"): a slim top bar and a footer ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; height: 25px; width: auto; }
.main { width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; flex: 1; }
.main--wide { max-width: 1100px; }
/* The public footer: static/footer.css (the shared Anony Labs footer, owner 2026-10-13 — the same file as AnonyVPN's
   and anonylabs.com's). AnonyMail's colours and faces for it: */
:root {
  --foot-fg: var(--fg); --foot-fg-2: var(--fg-2); --foot-fg-3: var(--fg-3); --foot-rule: var(--rule); --foot-rule-strong: var(--rule-strong);
  --foot-accent: var(--accent); --foot-panel: var(--surface); --foot-hover: var(--raised); --foot-current: var(--accent-soft);
  --foot-sans: var(--font); --foot-mono: var(--mono);
}
.eyebrow { font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.legal h2 { margin-top: 1.6em; }
.legal li { margin: 0 0 6px; color: var(--fg-2); }
.head { margin: 0 0 20px; }
.plain { list-style: none; padding: 0; margin: 0 0 16px; }
.plain li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.plain li:last-child { border-bottom: 0; }
.steps { padding-left: 20px; color: var(--fg-2); margin: 0 0 12px; }
.steps li { margin: 0 0 6px; padding-left: 4px; }
.steps li::marker { color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* ---- cards (AnonyChat's Card: elevation 1 = surface + a 1 px rule, card radius, no shadow) ---- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 24px; margin: 0 0 24px; min-width: 0; }
.card--quiet { background: transparent; }
.card--empty { padding: 0; }
.card__head { margin: 0 0 16px; }
.card__head h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.card__head h2 .ico { color: var(--fg-3); }
.card__desc { margin: 0; color: var(--fg-3); font-size: 14px; max-width: 70ch; }
.card > :last-child { margin-bottom: 0; }

/* ---- notes, banners, toasts ---- */
.note { background: var(--note-bg); border: 1px solid var(--rule); border-radius: var(--r-control); padding: 12px 14px; font-size: 15px; }
.note--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.warn-text { color: var(--warn); }
.banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--note-bg); color: var(--fg-soft); font-size: 14px; line-height: 1.45; }
.banner > .ico { margin-top: 1px; }
.banner > div > :last-child { margin-bottom: 0; }
.banner strong { color: var(--fg); }
.banner--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.banner--warn > .ico { color: var(--warn); }
.banner--danger { background: var(--danger-bg); border-color: var(--danger-line); }
.banner--danger > .ico { color: var(--danger); }
.banner--info { background: var(--info-bg); border-color: var(--info-line); }
.banner--info > .ico { color: var(--info); }
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); translate: -50% 0; width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border: 1px solid var(--rule-strong); border-radius: 12px;
  background: var(--overlay); box-shadow: var(--shadow-overlay); color: var(--fg); font: 500 14px/1.35 var(--ui);
  animation: toast-in 220ms var(--ease) both, toast-out 320ms var(--ease) 6s forwards;
}
.toast > .ico { color: var(--ok); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; transform: translateY(8px); } }
@media (min-width: 768px) { .toast { left: auto; right: 24px; top: 20px; bottom: auto; translate: none; } }

/* ---- buttons (AnonyChat's Button: 44 px, radius 10; secondary = surface + rule; primary = the accent, at most one per
   screen; danger tinted, never the brand fill) ---- */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-control);
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--fg-soft); cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; transition: color 150ms, background-color 150ms, border-color 150ms;
}
.button:hover, button:hover { border-color: var(--accent-line); color: var(--fg); }
.primary, .button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.danger, .button.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); font-weight: 600; }
.danger:hover, .button.danger:hover { background: rgba(255, 107, 138, 0.15); border-color: var(--danger); color: var(--danger); }
.link { min-height: 0; background: none; border: 0; padding: 0; font: inherit; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--fg); }
.small-btn { min-height: 36px; padding: 0 12px; font-size: 13px; gap: 6px; }
.icon-btn { min-height: 32px; width: 32px; padding: 0; border-color: transparent; background: transparent; color: var(--fg-3); }
.icon-btn:hover { background: var(--raised); color: var(--fg); border-color: transparent; }
.icon-btn.is-done { color: var(--ok); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
@media (max-width: 767.98px), (pointer: coarse) {
  .small-btn { min-height: 44px; }
  .icon-btn { min-height: 44px; width: 44px; }
}
form.inline { display: inline; margin: 0; }
.row, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.stack { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.stack button { align-self: flex-start; margin-top: 8px; }

/* ---- form controls ---- */
label { font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--fg-2); }
label.check { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-soft); min-height: 24px; }
label.check input { margin-top: 3px; }
input, select, textarea {
  font-family: inherit; font-size: 16px; line-height: 1.3; color: var(--fg); background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--r-control);
  padding: 11px 12px; width: 100%; min-height: 44px; transition: border-color 150ms;
}
input:hover, select:hover, textarea:hover { border-color: var(--rule-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--accent); flex: none; }
select option { background: var(--surface); }
textarea { font: 400 13.5px/1.5 var(--mono); }
input.date { width: auto; min-height: 36px; padding: 6px 8px; font-size: 13px; }
fieldset { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px 18px 18px; margin: 0 0 8px; min-width: 0; }
legend { padding: 0 6px; font-weight: 600; }

/* ---- badges (AnonyChat's Badge: a label, never a control; one colour per status) ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border: 1px solid var(--rule-strong); border-radius: var(--r-chip);
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--fg-3); white-space: nowrap; vertical-align: middle; text-decoration: none;
}
.pill--accent { color: var(--accent); border-color: var(--accent-line); }
.pill--ok { color: var(--ok); border-color: var(--ok-line); }
.pill--warn { color: var(--warn); border-color: var(--warn-line); }
.pill--danger { color: var(--danger); border-color: var(--danger-line); }
.pill--info { color: var(--info); border-color: var(--info-line); }
.pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill--wrap { display: inline-block; white-space: normal; }
.pill--wrap.pill--dot::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.pill--link { min-height: 32px; padding: 0 10px; transition: background-color 150ms; }
.pill--link:hover { background: var(--accent-soft); color: var(--accent); }

/* ---- meters ---- */
.meter { display: block; height: 6px; margin: 10px 0 0; border-radius: 99px; background: var(--raised); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter--warn .meter__fill { background: var(--warn); }
.meter--danger .meter__fill { background: var(--danger); }
.meter--ok .meter__fill { background: var(--ok); }
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; }
.w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; }
.w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.load { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.load__bars { display: inline-flex; gap: 3px; }
.load__bar { width: 12px; height: 6px; border-radius: 2px; background: var(--rule-strong); }
.load--low .is-on { background: var(--ok); }
.load--medium .is-on { background: var(--warn); }
.load--high .is-on { background: var(--danger); }

/* ---- tables (sticky headers, tabular numbers) ---- */
.tablewrap { overflow: auto; margin: 0 0 24px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); }
.tablewrap--scroll { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overscroll-behavior: contain; }
.card .tablewrap { border: 0; border-radius: 0; background: transparent; margin: 0 -24px 16px; padding: 0 12px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.table th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--fg-3); padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table tbody th[scope="row"] { color: var(--fg-2); font-size: 13.5px; white-space: normal; }
.table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover > td { background: rgba(243, 242, 237, 0.02); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions { margin: 0; gap: 6px; }
.table td.actions { display: table-cell; }
.table td.actions > * { margin: 0 4px 4px 0; }
.table tr.group th { color: var(--fg); font-size: 13px; font-weight: 600; padding: 14px 12px 8px; background: var(--bg); border-bottom: 1px solid var(--rule); }
.table tr.group th .ico { color: var(--fg-3); vertical-align: -3px; margin-right: 6px; }
.table td.mono { white-space: nowrap; }
h1 .mono { font-size: 0.8em; letter-spacing: 0; }
.row > input:not([type=hidden]), .row > select { width: auto; flex: 0 1 140px; min-width: 80px; }
.table .sub { display: block; color: var(--fg-3); font-size: 12.5px; margin-top: 2px; }
.table .key { word-break: break-all; }
.tabnum { font-variant-numeric: tabular-nums; }


/* ---- the app shell (signed-in pages): AnonyChat's layout. The rail is fixed to the viewport (100dvh) and never
   scrolls; only the page content scrolls; the account entry stays pinned at the bottom at every window height. ---- */
:root { --rail: 72px; --rail-full: 240px; --radius-control: 10px; --ease-rail: cubic-bezier(0.4, 0, 0.2, 1); }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: #1a2633; color: var(--accent); flex: none; }
.avatar .ico { width: 15px; height: 15px; }
.avatar--sm { width: 22px; height: 22px; }

/* phones: no rail, a fixed bottom bar (at most 5 cells; a page reached through /settings there — Blocked, Admin — marks
   Settings with aria-current="true") */
.rail { display: none; }
.bar {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: flex; align-items: center; justify-content: space-around; gap: 2px;
  padding: 10px 4px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: rgba(21, 23, 25, 0.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bar__cell { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; color: var(--fg-3); text-decoration: none; }
.bar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.2 var(--ui); }
.bar__cell[aria-current] { color: var(--fg); }
.bar__cell[aria-current] .ico { color: var(--accent); }
.bar__cell[aria-current] .bar__label { font-weight: 600; }
.bar__cell[aria-current]::after { content: ""; position: absolute; top: -10px; width: 32px; height: 3px; border-radius: 99px; background: var(--accent); }
html.app .appmain { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
html.app .main { padding-top: 28px; }

@media (min-width: 768px) {
  .bar { display: none; }
  html.app .appmain { margin-left: var(--rail); padding-bottom: 0; }
  html.app .main { padding-top: 48px; }
  .rail {
    position: fixed; left: 0; top: 0; z-index: 30; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    width: var(--rail); padding: 12px; overflow: hidden; border-right: 1px solid var(--rule); background: var(--bg);
    transition: width 280ms var(--ease-rail), padding 280ms var(--ease-rail), box-shadow 280ms var(--ease-rail);
  }
  /* The brand slot = AnonyChat's signed-in rail, to the pixel (owner 2026-10-09): one 44 px row; compact: the mark's
     100-unit box 28 px at 8 px in (viewport 20,20); labelled (≥ 1280): the lockup 26.17 px tall at 12.14 px in
     (viewport 28.14,26.52), its mark exactly where the compact mark sits (24,24 there). They swap on rail state AND when the collapsed rail expands on hover
     or keyboard focus (AnonyChat's rail follow-up R-1, layouts.tsx: the mark gives way to the lockup; owner 2026-10-09). */
  .rail__brand { position: relative; display: flex; align-items: center; height: 44px; margin-bottom: 16px; flex: none; }
  .rail__mark { position: absolute; left: 8px; width: 28px; height: 28px; transition: opacity 200ms; }
  /* The lockup's mark lands EXACTLY on the compact mark (no jump when they cross-fade; owner 2026-10-09): in the lockup
     SVG the mark's 100-unit box is translate(-12.96 -9.72) scale(1.08) of a 585.957 × 100.947 viewBox (AnonyMail's lockup;
     AnonyVPN's is -15.984 / 551.849), so at 28/108 px per unit the lockup is 26.17 px tall, 3.36 px left of and 2.52 px
     above the mark's box (8 px in, centred 28 px). */
  .rail__wordmark {
    position: absolute; left: calc(8px - 28px * -12.96 / 108); top: calc(50% - 14px - 28px * -9.72 / 108);
    height: calc(28px * 100.947 / 108); width: auto; max-width: none; opacity: 0; transition: opacity 200ms;
  }
  .rail__nav { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
  .rail__spacer { flex: 1; }
  .rail__link {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius-control);
    color: var(--fg-3); text-decoration: none; cursor: pointer; list-style: none; transition: background-color 150ms, color 150ms;
  }
  .rail__link::-webkit-details-marker { display: none; }
  .rail__link:hover { background: rgba(28, 31, 33, 0.6); color: var(--fg-2); }
  .rail__link[aria-current="page"] { background: var(--surface); color: var(--fg); }
  .rail__link[aria-current="page"] > .ico { color: var(--accent); }
  .rail__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 99px; background: var(--accent); }
  .rail__label { margin-left: 0; max-width: 0; overflow: hidden; white-space: nowrap; font: 500 15px/1.2 var(--ui); opacity: 0;
    transition: max-width 200ms cubic-bezier(0.22, 0.61, 0.36, 1), margin 200ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms; }
  .rail__account { position: relative; }
  /* fixed (not absolute): the rail never scrolls and clips its overflow; a fixed menu is not clipped by it */
  .rail__menu {
    position: fixed; left: 12px; bottom: 68px; z-index: 40; min-width: 216px; padding: 6px; display: grid; gap: 2px;
    background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  }
  .rail__menu .small { margin: 6px 10px 4px; font-size: 12.5px; }
  .rail__menu a, .rail__menu button {
    display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: 400 15px/1.2 var(--font);
    text-align: left; text-decoration: none; justify-content: flex-start;
  }
  .rail__menu a:hover, .rail__menu button:hover { background: rgba(243, 242, 237, 0.06); color: var(--fg); border-color: transparent; }
  .rail__menu form { margin: 0; }
}
/* hover (collapsed rail, real pointer, after 120 ms) or keyboard focus: widen OVER the content, labels in; the icons
   and the brand stay exactly where they are (AnonyChat's rail brief F-2) */
@media (min-width: 768px) and (max-width: 1279.98px) {
  @media (hover: hover) and (pointer: fine) {
    .rail:hover { width: var(--rail-full); transition-delay: 120ms; box-shadow: 26px 0 50px -24px rgba(0, 0, 0, 0.9); }
    .rail:hover .rail__link { justify-content: flex-start; padding-left: 14px; }
    .rail:hover .rail__label { flex: 1; max-width: 10rem; margin-left: 12px; opacity: 1; transition-delay: 120ms; }
    .rail:hover .rail__mark { opacity: 0; transition-delay: 120ms; }
    .rail:hover .rail__wordmark { opacity: 1; transition-delay: 120ms; }
  }
  .rail:has(:focus-visible) { width: var(--rail-full); box-shadow: 26px 0 50px -24px rgba(0, 0, 0, 0.9); }
  .rail:has(:focus-visible) .rail__link { justify-content: flex-start; padding-left: 14px; }
  .rail:has(:focus-visible) .rail__label { flex: 1; max-width: 10rem; margin-left: 12px; opacity: 1; }
  .rail:has(:focus-visible) .rail__mark { opacity: 0; }
  .rail:has(:focus-visible) .rail__wordmark { opacity: 1; }
}
@media (min-width: 1280px) {
  html.app .appmain { margin-left: var(--rail-full); }
  .rail { width: var(--rail-full); padding: 16px; }
  .rail .rail__link { justify-content: flex-start; padding: 0 12px; }
  .rail .rail__label { margin-left: 12px; max-width: 10rem; flex: 1; opacity: 1; }
  .rail .rail__mark { opacity: 0; }
  .rail .rail__wordmark { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rail, .rail__label, .rail__mark, .rail__wordmark { transition: none; }
}

/* ---- Admin's sections (owner 2026-10-09, AnonyChat's admin console): a second pane from 1280 px — SidePane geometry,
   300 px, a 64 px header, 44 px rows, the current row on the raised ground — and below that a pill strip on the page.
   While the pane shows, the rail gives up its labels (compact, hover-expands over the pane) until 1536 px. ---- */
.pane { display: none; }
.pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 24px; padding-bottom: 4px; scrollbar-width: none; }
.pill-tab {
  display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rule-strong);
  font: 500 14px/1.2 var(--ui); color: var(--fg-3); text-decoration: none; white-space: nowrap; transition: border-color 150ms, color 150ms;
}
.pill-tab:hover { border-color: rgba(77, 163, 255, 0.4); color: #dad9d4; }
.pill-tab[aria-current="page"] { border-color: var(--accent); background: #1c2937; color: var(--fg); }
@media (min-width: 1280px) {
  .pills { display: none; }
  html.has-pane .pane {
    position: fixed; top: 0; left: var(--rail); z-index: 20; display: flex; flex-direction: column; width: 300px; height: 100vh; height: 100dvh;
    border-right: 1px solid var(--rule); background: var(--bg);
  }
  .pane__head { flex: none; display: flex; align-items: center; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--rule); }
  .pane__head h2 { margin: 0; font: 700 16px/1.2 var(--ui); letter-spacing: -0.01em; }
  .pane__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
  .pane__row {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-control);
    font: 400 14px/1.2 var(--ui); color: var(--fg-3); text-decoration: none; transition: background-color 150ms, color 150ms;
  }
  .pane__row:hover { background: rgba(28, 31, 33, 0.7); color: #dad9d4; }
  .pane__row[aria-current="page"] { background: #24282b; color: var(--fg); font-weight: 600; }
  html.app.has-pane .appmain { margin-left: calc(var(--rail) + 300px); }
  html.app.has-pane .main { max-width: none; margin: 0; padding-left: 40px; padding-right: 40px; }
  html.has-pane .rail { width: var(--rail); padding: 12px; }
  html.has-pane .rail .rail__link { justify-content: center; padding: 0; }
  html.has-pane .rail .rail__label { flex: none; max-width: 0; margin-left: 0; opacity: 0; }
  html.has-pane .rail .rail__mark { opacity: 1; }
  html.has-pane .rail .rail__wordmark { opacity: 0; }
}
@media (min-width: 1280px) and (max-width: 1535.98px) {
  @media (hover: hover) and (pointer: fine) {
    html.has-pane .rail:hover { width: var(--rail-full); transition-delay: 120ms; box-shadow: 26px 0 50px -24px rgba(0, 0, 0, 0.9); }
    html.has-pane .rail:hover .rail__link { justify-content: flex-start; padding-left: 14px; }
    html.has-pane .rail:hover .rail__label { flex: 1; max-width: 10rem; margin-left: 12px; opacity: 1; transition-delay: 120ms; }
    html.has-pane .rail:hover .rail__mark { opacity: 0; transition-delay: 120ms; }
    html.has-pane .rail:hover .rail__wordmark { opacity: 1; transition-delay: 120ms; }
  }
  html.has-pane .rail:has(:focus-visible) { width: var(--rail-full); box-shadow: 26px 0 50px -24px rgba(0, 0, 0, 0.9); }
  html.has-pane .rail:has(:focus-visible) .rail__link { justify-content: flex-start; padding-left: 14px; }
  html.has-pane .rail:has(:focus-visible) .rail__label { flex: 1; max-width: 10rem; margin-left: 12px; opacity: 1; }
  html.has-pane .rail:has(:focus-visible) .rail__mark { opacity: 0; }
  html.has-pane .rail:has(:focus-visible) .rail__wordmark { opacity: 1; }
}
@media (min-width: 1536px) {
  html.has-pane .rail { width: var(--rail-full); padding: 16px; }
  html.has-pane .rail .rail__link { justify-content: flex-start; padding: 0 12px; }
  html.has-pane .rail .rail__label { flex: 1; max-width: 10rem; margin-left: 12px; opacity: 1; }
  html.has-pane .rail .rail__mark { opacity: 0; }
  html.has-pane .rail .rail__wordmark { opacity: 1; }
  html.has-pane .pane { left: var(--rail-full); }
  html.app.has-pane .appmain { margin-left: calc(var(--rail-full) + 300px); }
}

/* Settings (the rail's bottom entry): the pane's rows, then Legal pinned at its bottom below a rule (AnonyChat's
   settings-nav); below 1280 px /settings is the same list as a page, Legal its last row (AnonyChat's phone pattern), and
   each section a page with a way back. */
.out { margin-left: auto; padding-left: 8px; color: var(--fg-3); }
.chev { margin-left: auto; display: inline-flex; color: var(--fg-3); }
.pane__row .ico, .settings-list__row > .ico { width: 18px; height: 18px; color: var(--fg-3); }
.pane__row[aria-current="page"] .ico { color: var(--accent); }
.settings-list { display: flex; flex-direction: column; margin: 0 0 12px; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.settings-list__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-top: 1px solid var(--rule); color: #dad9d4; text-decoration: none; }
.settings-list__row:first-child { border-top: 0; }
.settings-list__row:hover { background: #24282b; color: var(--fg); }
.settings-content--index { display: none; }
/* phones only: the rail items the bottom bar has no room for (Blocked; Admin for the owner), above the settings rows */
.settings-list--more { margin-bottom: 16px; }
@media (min-width: 768px) { .settings-list--more { display: none; } }
.pane__foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); }
.pane__row--legal .out { color: var(--fg-3); }
@media (min-width: 1280px) {
  .settings-index, .back { display: none; }
  .settings-content--index { display: block; }
}


/* ---- the signed-in app: type and page frame (AnonyChat: Space Grotesk; title-1 32 / title-3 17 / body 15) ---- */
html.app body { font: 400 15px/1.45 var(--ui); font-feature-settings: "kern", "calt"; }
html.app .main { max-width: 1040px; padding: 28px 16px 64px; }
html.app h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
html.app h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
html.app h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
html.app .lead { font-size: 15px; line-height: 1.5; }
html.app .small, html.app .hint { font-size: 13.5px; line-height: 1.45; }
html.app p.hint { margin: 6px 0 0; }
html.app .mono { font-size: 12.5px; }
@media (min-width: 768px) {
  html.app .main { padding: 48px 32px 80px; }
  html.app h1 { font-size: 32px; line-height: 1.15; }
}

/* the page header: title + one line + the page's primary action */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 0 0 28px; }
.page-head__text { min-width: 0; flex: 1 1 22rem; }
.page-head h1 { margin: 0 0 6px; }
.page-head .lead { margin: 0; max-width: 68ch; color: var(--fg-2); }
.page-head .lead strong { color: var(--fg); font-weight: 600; }
.page-head__eyebrow { margin: 0 0 6px; font-size: 13px; color: var(--fg-3); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 12px; }
.section-title h2, .group__title, .country__name {
  margin: 0; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--fg-3);
}
.section-title__extra { font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.page-note { display: flex; gap: 8px; align-items: flex-start; margin: 24px 0 0; }
.page-note .ico { margin-top: 2px; }
.back { margin: 0 0 16px; font-size: 14px; }
.back a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--fg-2); text-decoration: none; }
.back a:hover { color: var(--fg); }
.ico--back { transform: rotate(180deg); }

/* disclosure (details) */
.disclosure { margin: 0 0 16px; border: 1px solid var(--rule); border-radius: var(--r-control); }
.disclosure > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none; color: var(--fg-soft); font-weight: 500; font-size: 14px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--fg-3); border-bottom: 1.6px solid var(--fg-3); transform: rotate(-45deg); transition: transform 150ms; margin-right: 4px; }
.disclosure[open] > summary::before { transform: rotate(45deg); }
.disclosure > summary:hover { color: var(--fg); }
.disclosure > :not(summary) { margin-left: 14px; margin-right: 14px; }
.disclosure > :last-child { margin-bottom: 14px; }

/* ---- Devices: the status strip ---- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.stat { min-width: 0; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); }
.stat__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--fg-3); }
.stat__label .ico { width: 16px; height: 16px; }
.stat__value { margin: 8px 0 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat__of { font-size: 14px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.stat .load { margin-top: 10px; }
.stat__sub { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--fg-3); }
.stat__sub a { color: var(--fg-2); }
.stat__sub a:hover { color: var(--fg); }
@media (max-width: 479.98px) { .stat { padding: 12px 12px 14px; } .stat__value { font-size: 17px; } }

/* ---- the device list (AnonyVPN's Devices, design A): rows separated by rules inside one panel — here the mailboxes ---- */
.devices { list-style: none; padding: 0; margin: 4px 0 0; border-top: 1px solid var(--rule); }
.device { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 14px; padding: 18px 0; min-width: 0; border-top: 1px solid var(--rule); }
.device:first-child { border-top: 0; }
.device:last-child { padding-bottom: 4px; }
.device__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--raised); color: var(--fg-2); }
.device--paused .device__icon { color: var(--fg-3); background: transparent; border: 1px dashed var(--rule-strong); }
.device--restricted .device__icon { color: var(--warn); background: var(--warn-bg); }
.device--suspended .device__icon { color: var(--danger); background: var(--danger-bg); }
.device__body { flex: 1 1 0; min-width: 0; }
.device__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 24px; }
.device__top .pill { white-space: normal; max-width: 100%; }
.device__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); overflow-wrap: anywhere; }
.device__meta { margin: 3px 0 0; font-size: 13px; color: var(--fg-3); }
.device__meta .mono { font-size: 12px; }
.device__where { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--fg-2); }
.device__where .ico { flex: none; margin-top: 2px; color: var(--fg-3); }
.device__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.device__acts:empty { display: none; }
.device__acts form { margin: 0; }
.device__acts > .hint { flex-basis: 100%; margin: 0; }
.device__acts .mailbox__remove { margin: 0; }
.device__acts .mailbox__remove[open] { flex-basis: 100%; }
.device__edit { flex: 1 1 100%; min-width: 0; margin-top: 14px; }
.device__edit > summary { list-style: none; }
.device__edit > summary::-webkit-details-marker { display: none; }
.device__edit[open] > summary { border-color: var(--accent-line); color: var(--fg); background: var(--raised); }
.device__panel { display: grid; gap: 16px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rule); }
.device__form { display: grid; gap: 6px; margin: 0; }
.device__form--danger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.inline-field { display: flex; gap: 8px; max-width: 460px; }
.inline-field input { flex: 1; min-width: 0; }
.device__hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--fg-2); }
.device__hint .ico { margin-top: 2px; color: var(--fg-3); }
.dv-empty { margin: 6px 0 0; border: 1px dashed var(--rule-strong); border-radius: var(--r-card); }

/* empty state (AnonyChat's EmptyState + the family's line illustration) */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 44px; }
.empty-state--compact { padding: 24px 16px; }
.empty-state .art { width: 200px; height: 150px; margin: 0 0 16px; }
.empty-state__title { margin: 0; font-size: 17px; }
.empty-state__body { margin: 8px 0 0; max-width: 44ch; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }


.add__form { max-width: 640px; }
.field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.field__label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; font-size: 15px; font-weight: 600; color: var(--fg); }
.field input:not([type=radio]):not([type=checkbox]) { max-width: 420px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 99px;
  color: var(--fg-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 150ms, color 150ms, background-color 150ms;
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip:hover { border-color: var(--accent-line); color: var(--fg-soft); }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.add__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.add__go .hint { margin: 0; flex: 1 1 16rem; }
.add__progress { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-control); background: var(--note-bg); border: 1px solid var(--rule); color: var(--fg-soft); font-size: 14px; }
.table--keys td { vertical-align: middle; }
.copyable { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.copyable .key { word-break: break-all; }
@media (max-width: 639.98px) {
  .table--keys thead { display: none; }
  .table--keys, .table--keys tbody, .table--keys tr, .table--keys td { display: block; width: 100%; }
  .table--keys tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .table--keys tr:last-child { border-bottom: 0; }
  .table--keys td { padding: 4px 12px; border: 0; }
  .table--keys td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; color: var(--fg-3); }
}

/* ---- Plan (AnonyVPN's design A): the plans side by side as panels ---- */
.plans-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
@media (min-width: 720px) { .plans-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } }
.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); }
.plan-card.is-current { border-color: var(--accent-line); background: radial-gradient(90% 60% at 100% 0%, var(--accent-glow), transparent 70%), var(--surface); }
.plan-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.plan-card__head h2 { margin: 0; font: 600 15px/1.2 var(--ui); letter-spacing: -0.01em; }
.plan-card__price { margin: 14px 0 16px; font: 600 32px/1.05 var(--ui); letter-spacing: -0.03em; color: var(--fg); }
.plan-card__rows { margin: 0 0 auto; }
.plan-card__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.plan-card__row dt { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 13.5px; }
.plan-card__row dt .ico { color: var(--fg-3); }
.plan-card__row dd { margin: 0; text-align: right; font-weight: 600; font-size: 13.5px; color: var(--fg); }
.plan-card .yes { color: var(--ok); }
.plan-card .no { color: var(--fg-3); }
.plan-card__foot { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-control); background: var(--note-bg); color: var(--fg-2); font-size: 13.5px; }
.plan-card__foot--current { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--fg-soft); }
.plan-card__foot--current .ico { color: var(--accent); }
.plan-card__note { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--note-bg); }
.plan-card__note > .ico { margin-top: 2px; color: var(--fg-3); }
.plan-card__note .plan-card__foot { margin: 0; padding: 0; background: none; line-height: 1.5; }
.plan-card__note a { color: var(--fg); }
.plan-card__fair { margin: 10px 0 0; }
.buy .buy__go { width: 100%; }
.facts-list { list-style: none; margin: 0; padding: 0; }
.facts-list li { position: relative; padding: 0 0 10px 24px; color: var(--fg-2); font-size: 14px; }
.facts-list li:last-child { padding-bottom: 0; }
.facts-list li::before { content: ""; position: absolute; left: 3px; top: 0.5em; width: 9px; height: 5px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }

/* ---- plans with durations + Lightning checkout (src/views/plan.ts, src/views/admin-plans.ts) — AnonyVPN's rules ---- */
.plan-card__desc { margin: 6px 0 0; color: var(--fg-2); font-size: 14px; }
.plans-every { margin: 0 0 16px; }
.buy { margin: 16px 0 0; }
.durations { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.duration { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); cursor: pointer; }
.duration:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.duration__len { flex: 1 1 auto; color: var(--fg); font-weight: 600; font-size: 14px; }
.duration__price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; }
.duration__price .sub { font-weight: 400; font-size: 12.5px; color: var(--fg-3); }
.buy .hint { margin: 8px 0 0; font-size: 13px; }
.consent { white-space: pre-line; margin: 8px 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--note-bg); color: var(--fg-soft); font-size: 14px; line-height: 1.5; }
.kv { width: 100%; }
.kv tbody th[scope="row"] { width: 34%; min-width: 9rem; }
.stack--wide { max-width: none; }
.stack--wide > :not(.card__head):not(.tablewrap):not(.disclosure):not(pre) { max-width: 640px; }
.invoice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 720px) { .invoice { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
.invoice__qr a { display: block; max-width: 260px; margin: 0 auto; border-radius: var(--r-control); overflow: hidden; }
.invoice__qr .qr { display: block; width: 100%; height: auto; }
.invoice__amount { margin: 0 0 6px; font-size: 22px; color: var(--fg); }
.invoice__text { width: 100%; min-height: 96px; word-break: break-all; resize: vertical; }
.order-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--fg-2); font-size: 14px; }
.done__lead { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; color: var(--fg); }
.done__lead .ico { color: var(--ok); flex: none; margin-top: 3px; }
.num-input { width: 90px; min-height: 36px; padding: 6px 8px; font-size: 14px; }
.durations-admin { border: 0; padding: 0; margin: 0; min-width: 0; }
.durations-admin legend { margin: 0 0 8px; color: var(--fg-2); font-size: 14px; }

/* ---- Settings → Account (AnonyChat's settings groups) ---- */
.settings-content { max-width: 1040px; }
.group { margin: 0 0 28px; }
.group__title { margin: 0 0 10px !important; }
.group__card { padding: 0; overflow: hidden; margin: 0; }
.group__row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--rule); }
.group__row:first-child { border-top: 0; }
.group__row--action { flex-wrap: wrap; align-items: center; justify-content: space-between; }
.group__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--raised); color: var(--fg-2); }
.group__text { flex: 1 1 18rem; min-width: 0; }
.group__lead { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg); }
.group__lead .pill { margin-left: 6px; }
.group__lead .anonyid-pill { margin: 0 0.1em; }
.group__links { display: flex; flex-direction: column; }
.group__link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; border-top: 1px solid var(--rule); color: var(--fg-soft); text-decoration: none; transition: background-color 150ms; }
.group__link:first-child { border-top: 0; }
.group__link .ico { color: var(--fg-3); }
.group__link:hover { background: var(--raised); color: var(--fg); }
.anonyid-pill { display: inline-block; vertical-align: middle; margin: 0 0.2em; }
@media (max-width: 479.98px) { .group__row { padding: 14px 16px; } }

/* ---- Overview, redesign A "Family" (owner 2026-10-11): AnonyVPN's Nightside overview (its .ov-* rules, copied with
   the blue accent) — the hero (copy left, the mail route right from 1112 px; stacked below), then uneven panels on a
   12-column grid from 1024 px (Aliases 7 + Plan 5, Activity 7 + Mailboxes 5, Replies 12), one column below. Blue = the
   brand; green / red = data states only (mail today, refused). ---- */
:root { --accent-glow: rgba(77, 163, 255, 0.11); --ok-halo: rgba(60, 232, 160, 0.16); }
.page-head__actions .button .ico { color: inherit; }
.ov-muted { color: var(--fg-3); }
.ov-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); }
.ov-num--spam { color: var(--danger); }
.ov-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); }
.ov-dot--ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-halo); }
.ov-dot--on { width: 7px; height: 7px; background: var(--ok); }
.ov-dot--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.16); }
.ov-dot--pulse { animation: ov-halo 2.4s ease-out infinite; }
@keyframes ov-halo { 0% { box-shadow: 0 0 0 0 rgba(60, 232, 160, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(60, 232, 160, 0); } }
.ov-sw { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--fg-3); }
.ov-sw--live { background: var(--ok); }
.ov-sw--paused { background: repeating-linear-gradient(135deg, var(--warn) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--warn-line); }
.ov-sw--fwd { background: var(--accent); }
.ov-sw--soft { background: rgba(77, 163, 255, 0.5); }
.ov-sw--spam { background: var(--danger); }
.ov-sw--reply { background: transparent; border: 1.5px dashed var(--fg-2); }

/* the hero */
.ov-hero {
  position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 18px;
  background:
    radial-gradient(55% 80% at 76% 22%, var(--accent-glow), transparent 70%),
    radial-gradient(50% 70% at 10% 0%, rgba(243, 242, 237, 0.035), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg));
}
.ov-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 24px 20px 0; }
.ov-hero__art { display: flex; justify-content: center; margin: 8px 0 0; }
.ov-hero__eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--fg-2); font-size: 13px; font-weight: 500; }
.ov-hero .ov-hero__title {
  margin: 12px 0 0; font: 600 40px/1.04 var(--ui); letter-spacing: -0.035em;
  background: linear-gradient(180deg, var(--fg) 30%, var(--fg-soft)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ov-hero--start .ov-hero__title { font-size: 32px; line-height: 1.08; }
.ov-hero__sub { margin: 12px 0 0; max-width: 440px; font-size: 15px; line-height: 1.55; color: var(--fg-2); overflow-wrap: anywhere; }
.ov-hero__sub strong { color: var(--fg); font-weight: 600; }
.ov-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; }
.ov-hero__actions form { margin: 0; }
.ov-hero__actions .hint { margin: 0; }
.ov-hero__facts { display: flex; margin: 22px 0 0; }
.ov-hero__facts > div { min-width: 0; padding: 0 20px; border-left: 1px solid var(--rule-strong); }
.ov-hero__facts > div:first-child { padding-left: 0; border-left: 0; }
.ov-hero__facts dt { white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-3); }
.ov-hero__facts dd { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.ov-hero__facts .ov-num { font-size: 15px; }
.ov-hero__note { display: none; align-items: center; gap: 7px; margin: 0; color: var(--fg-3); font-size: 12.5px; }
@media (max-width: 379.98px) { .ov-hero__facts { flex-direction: column; gap: 12px; } .ov-hero__facts > div { padding: 0; border-left: 0; } }
.ov-hero__legend { list-style: none; display: grid; gap: 8px; margin: 0; padding: 4px 20px 20px; font-size: 13px; color: var(--fg-2); }
.ov-hero__legend li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ov-hero__legend li > span { min-width: 0; overflow-wrap: anywhere; }
.ov-hero__legend b { color: var(--fg); font-variant-numeric: tabular-nums; }
.ov-hero--start .ov-hero__art { margin-bottom: 4px; }
@media (min-width: 1112px) {
  .ov-hero { display: block; min-height: 412px; }
  .ov-hero__art { position: absolute; right: 8px; bottom: 0; margin: 0; }
  .ov-hero--start .ov-hero__art { margin: 0; }
  .ov-hero__art .mr { width: 520px; max-width: none; }
  .ov-hero__copy { min-height: 412px; max-width: 470px; padding: 40px 0 0 40px; }
  .ov-hero .ov-hero__title { font-size: 54px; line-height: 1.02; margin-top: 14px; }
  .ov-hero--start .ov-hero__title { font-size: 44px; line-height: 1.05; }
  .ov-hero__sub { max-width: 400px; font-size: 16px; margin-top: 14px; }
  .ov-hero__facts { margin-top: 28px; }
  .ov-hero__facts > div { padding: 0 24px; }
  .ov-hero__facts > div:first-child { padding-left: 0; }
  .ov-hero__note { display: flex; margin-top: auto; padding: 20px 0 26px; }
  .ov-hero__legend { display: none; }
  .ov-hero__copy > :last-child:not(.ov-hero__note) { margin-bottom: 32px; }
}

/* the first-run steps */
.ov-steps { list-style: none; display: grid; gap: 2px; margin: 20px 0 0; padding: 0; max-width: 420px; }
.ov-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 8px 0; color: var(--fg-3); font-size: 13px; }
.ov-steps li b { display: block; color: var(--fg-2); font-size: 14px; font-weight: 600; }
.ov-steps li > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.ov-steps__n { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--rule-strong); border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ov-steps li.is-now b { color: var(--fg); }
.ov-steps li.is-now .ov-steps__n { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }
.ov-steps li.is-done .ov-steps__n { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* the mail route (src/views/route.ts): colours from the tokens, geometry from attributes. One type scale inside it:
   numbers 18 / 22 px (600, tabular), titles 13 px (600), every caption 11.5 px (500). */
.mr { display: block; width: 100%; max-width: 520px; height: auto; }
.mr-grid path { stroke: var(--fg); stroke-opacity: 0.035; }
.mr-fly path { fill: none; stroke: none; }
.mr-dot { fill: var(--fg); }
.mr-s-fg { stop-color: var(--fg); }
.mr-s-ac { stop-color: var(--accent); }
.mr-stem, .mr-main, .mr-branch { fill: none; stroke-linecap: round; }
.mr-main { stroke: rgba(243, 242, 237, 0.13); }
.mr-main--out { stroke: url(#mr-out); }
.mr-main--b { stroke: rgba(77, 163, 255, 0.3); }
.mr-branch--spam { stroke: rgba(255, 107, 138, 0.34); }
.mr-branch--block { stroke: rgba(243, 242, 237, 0.2); }
.mr-ghost { fill: none; stroke: var(--rule-hover); stroke-width: 1; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.mr-reply { fill: none; stroke: var(--fg-2); stroke-opacity: 0.5; stroke-width: 1.2; stroke-dasharray: 3 4; }
.mr-reply--zero { stroke-opacity: 0.28; }
.mr-reply-arrow { fill: none; stroke: var(--fg-2); stroke-opacity: 0.6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.mr-gate path { stroke: var(--fg-2); stroke-width: 1.3; stroke-linecap: round; }
.mr-gate__t { font: 500 11.5px var(--ui); fill: var(--fg-3); }
.mr-node { fill: var(--accent); stroke: var(--accent-hover); stroke-width: 1.5; }
.mr-node--off { fill: var(--bg); stroke: var(--rule-hover); stroke-dasharray: 2 2; }
.mr-ping { fill: none; stroke: var(--accent); stroke-opacity: 0.45; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: mr-ping 2.6s ease-out infinite; }
.mr-ping--2 { stroke-opacity: 0.2; animation-delay: 0.9s; }
@keyframes mr-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.mr-box { fill: var(--accent); stroke: var(--bg); stroke-width: 3; paint-order: stroke; }
.mr-box--pending { fill: var(--bg); stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.mr-box--none { fill: var(--bg); stroke: var(--rule-hover); stroke-width: 1.5; stroke-dasharray: 2 2; }
.mr-box-ring--pending { fill: none; stroke: var(--warn); stroke-opacity: 0.25; }
.mr-box-ring--none { fill: none; stroke: var(--rule-hover); stroke-opacity: 0.6; }
.mr-end { stroke: var(--bg); stroke-width: 3; paint-order: stroke; }
.mr-end--spam { fill: var(--danger); }
.mr-end--block { fill: var(--fg-2); }
.mr-end--box { fill: rgba(77, 163, 255, 0.75); }
.mr-end--zero { fill: var(--bg); stroke: var(--rule-hover); stroke-width: 1.2; paint-order: normal; }
.mr-num { font: 600 18px var(--ui); fill: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mr-num--main { font-size: 22px; fill: var(--accent); }
.mr-num__unit { font: 500 12px var(--ui); fill: var(--fg-2); letter-spacing: 0; }
.mr-label--spam .mr-num { fill: var(--danger); }
.mr-label--zero .mr-num { fill: var(--fg-3); }
.mr-label--zero .mr-cap { fill: var(--placeholder); }
.mr-cap { font: 500 11.5px var(--ui); fill: var(--fg-3); }
.mr-label--main .mr-cap { fill: var(--fg-2); }
.mr-card rect { fill: rgba(21, 23, 25, 0.86); stroke: var(--rule-strong); }
.mr-card__t { font: 600 13px var(--ui); fill: var(--fg); }
.mr-card__s { font: 500 11.5px var(--ui); fill: var(--fg-2); }
.mr-card__rule { stroke: var(--rule); stroke-width: 1; }
.mr-card__r { font: 500 11.5px var(--ui); fill: var(--fg-2); }
.mr-card__r--zero { fill: var(--fg-3); }
.mr-card--off rect { fill: rgba(21, 23, 25, 0.6); stroke-dasharray: 3 3; }
.mr-card--off .mr-card__t { fill: var(--fg-2); }
.mr-card--pending rect { stroke: var(--warn-line); }
.mr-card--pending .mr-card__s { fill: var(--warn); }
.mr-card--start rect { stroke: var(--accent-line); }
.mr-p { offset-rotate: 0deg; animation: mr-flow linear infinite; opacity: 0; }
.mr-p--fwd { fill: #cfe5ff; }
.mr-p--spam { fill: var(--danger); }
@keyframes mr-flow { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* alive (static/app.js): the canvas over the drawing takes over from the still swarm and the CSS particles */
@media (max-width: 1111.98px) { .ov-hero__art { position: relative; } }
.mr-canvas { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 900ms ease; }
.mr-canvas.is-on { opacity: 1; }
.mr-stipple, .mr-p, .mr-ping { transition: opacity 900ms ease; }
.mr--live .mr-stipple, .mr--live .mr-ping { opacity: 0; animation: none; }
.mr--live .mr-p { visibility: hidden; animation: none; }
@media (max-width: 1111.98px) { .mr-label, .mr-card:not(.mr-card--off):not(.mr-card--pending):not(.mr-card--start), .mr-gate__t { display: none; } .mr { max-width: 400px; } }
@media (prefers-reduced-motion: reduce) {
  .mr-ping, .ov-dot--pulse { animation: none; }
  .mr-ping { opacity: 0.5; }
  .mr-p, .mr-p.mr-p--spam { animation: none; opacity: 0.9; }
  .mr-p.mr-d1 { offset-distance: 12%; } .mr-p.mr-d2 { offset-distance: 30%; } .mr-p.mr-d3 { offset-distance: 52%; } .mr-p.mr-d4 { offset-distance: 66%; }
  .mr-p.mr-d5 { offset-distance: 78%; } .mr-p.mr-d6 { offset-distance: 88%; } .mr-p.mr-d7 { offset-distance: 95%; }
  .mr-p--fwd.mr-d1, .mr-p--fwd.mr-d2 { fill: var(--fg); opacity: 0.75; }
  .mr-p--spam.mr-d1 { offset-distance: 58%; } .mr-p--spam.mr-d2 { offset-distance: 74%; } .mr-p--spam.mr-d3 { offset-distance: 90%; }
}
/* the particles' paths (generated: routeCss() in src/views/route.ts; test/unit/route.test.ts keeps this in sync) */
.mr-p--fwd { offset-path: path("M262 100 V352"); animation-duration: 4.2s; }
.mr-p--spam { offset-path: path("M262 100 V200 C262 244 192 250 138 274 S96 300 92 304"); animation-duration: 4.6s; animation-name: mr-flow, mr-judge; }
@keyframes mr-judge { 0%, 30% { fill: var(--fg); } 36%, 100% { fill: var(--danger); } }
.mr-p--fwd.mr-d1 { animation-delay: -0.00s; }
.mr-p--fwd.mr-d2 { animation-delay: -0.60s; }
.mr-p--fwd.mr-d3 { animation-delay: -1.20s; }
.mr-p--fwd.mr-d4 { animation-delay: -1.80s; }
.mr-p--fwd.mr-d5 { animation-delay: -2.40s; }
.mr-p--fwd.mr-d6 { animation-delay: -3.00s; }
.mr-p--fwd.mr-d7 { animation-delay: -3.60s; }
.mr-p--spam.mr-d1 { animation-delay: -0.70s; }
.mr-p--spam.mr-d2 { animation-delay: -2.23s; }
.mr-p--spam.mr-d3 { animation-delay: -3.77s; }
/* the panels */
.ov-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1024px) {
  .ov-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .ov-span-5 { grid-column: span 5; }
  .ov-span-7 { grid-column: span 7; }
  .ov-span-12 { grid-column: 1 / -1; }
}
.ov-panel { margin: 0; padding: 18px 16px; min-width: 0; }
@media (min-width: 640px) { .ov-panel { padding: 20px 22px 22px; } }
.ov-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin: 0 0 16px; }
.ov-panel .ov-panel__head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font: 600 15px/1.2 var(--ui); letter-spacing: -0.01em; }
.ov-panel__count { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ov-link { display: inline-flex; flex: none; align-items: center; gap: 2px; margin-right: -4px; padding: 4px 4px 4px 8px; border-radius: var(--r-chip); color: var(--fg-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.ov-link:hover { background: var(--raised); color: var(--fg); }
.ov-panel__foot { display: flex; gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--fg-3); font-size: 13px; line-height: 1.5; }
.ov-panel__foot .ico { margin-top: 2px; flex: none; }
.ov-text { margin: 0 0 16px; font-size: 13.5px; color: var(--fg-2); }
.ov-r { text-align: right; justify-self: end; }
.ov-empty { margin: 14px 0 0; color: var(--fg-3); font-size: 14px; }
.ov-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; }
.ov-actions + .hint { margin-top: 10px; }
.ov-privacy { margin: 22px 0 0; }
.ov-privacy a { color: var(--fg-2); }
.ov-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 12px 12px; }
.ov-empty-state .art { width: 150px; height: auto; margin: 0 0 8px; }
.ov-empty-state h3 { margin: 0 0 6px; font-size: 16px; }
.ov-empty-state p { max-width: 42ch; margin: 0 0 16px; font-size: 13.5px; color: var(--fg-2); }
.ov-empty-state p b { color: var(--fg); font-family: var(--mono); font-size: 12.5px; font-weight: 400; overflow-wrap: anywhere; }
.ov-empty-state--big { padding: 28px 12px 24px; }
.ov-empty-state--big .art { width: 190px; }

/* Aliases: the capacity bar (AnonyVPN's device bar), the rows */
.ov-cap { margin: 0 0 10px; }
.ov-cap__segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.ov-seg { height: 6px; border-radius: 3px; background: var(--raised); }
.ov-seg--on { background: var(--fg-3); }
.ov-seg--live { background: var(--ok); }
.ov-seg--paused { background: repeating-linear-gradient(135deg, rgba(242, 201, 76, 0.75) 0 3px, rgba(242, 201, 76, 0.22) 3px 6px); }
.ov-cap__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; font-size: 12.5px; color: var(--fg-2); }
.ov-cap__legend > span { display: inline-flex; align-items: center; gap: 7px; }
.ov-cap__legend b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.ov-cap__left { margin-left: auto; color: var(--fg-3); }
.ov-cap__left--full { color: var(--warn); }
.ov-ahead { display: none; grid-template-columns: minmax(0, 1fr) 112px 72px; gap: 14px; padding: 0 0 8px 50px; border-bottom: 1px solid var(--rule); color: var(--fg-3); font-size: 12px; font-weight: 500; }
.ov-rows { list-style: none; margin: 0; padding: 0; }
.ov-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 9px 0; border-top: 1px solid var(--rule); }
.ov-rows .ov-row:first-child { border-top: 0; }
.ov-row__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); background: var(--raised); color: var(--fg-2); }
.ov-row__icon .ico { width: 17px; height: 17px; }
.ov-row__main { display: flex; flex-direction: column; min-width: 0; }
.ov-row__name { font-size: 14.5px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.ov-row__meta { font-size: 12.5px; color: var(--fg-3); overflow-wrap: anywhere; }
.ov-row__spark { display: none; }
.ov-row__end { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.ov-row__end form { margin: 0; }
.ov-row__unit { font-size: 12px; color: var(--fg-3); }
.ov-row__unit abbr { text-decoration: none; }
.ov-row--alias .ov-row__end { flex-direction: column; align-items: flex-end; gap: 0; }
.ov-row--alias .ov-num { font-size: 15px; }
.ov-row.is-paused .ov-addr { color: var(--fg-3); }
.ov-row.is-pending .ov-row__icon { color: var(--warn); background: var(--warn-bg); }
.ov-row.is-pending .ov-row__meta { color: var(--warn); }
.ov-row.is-failing .ov-row__icon { color: var(--danger); background: var(--danger-bg); }
.ov-row.is-failing .ov-row__meta { color: var(--danger); }
.ov-live { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); font-weight: 500; }
.ov-def { color: var(--accent); font-weight: 600; }
.ov-addr { font-family: var(--mono); font-size: 13.5px; font-weight: 400; color: var(--fg); letter-spacing: -0.01em; text-decoration: none; overflow-wrap: anywhere; }
.ov-addr__dom { color: var(--fg-3); }
a.ov-addr:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--accent-line); }
@media (min-width: 640px) {
  .ov-ahead { display: grid; }
  .ov-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .ov-row--alias { grid-template-columns: 36px minmax(0, 1fr) 112px 72px; gap: 14px; }
  .ov-row__icon { width: 36px; height: 36px; }
  .ov-row__spark { display: block; }
}
.ov-row--box .ov-row__name { font-family: var(--mono); font-size: 13px; font-weight: 400; }
@media (max-width: 479.98px) { .ov-row--box { grid-template-columns: 32px minmax(0, 1fr); } .ov-row--box .ov-row__end { grid-column: 2; } }

/* the sparklines (src/views/spark.ts) */
.sp { display: block; overflow: visible; }
.sp-base { fill: var(--raised); }
.sp-none { fill: var(--rule); }
.sp-fwd { fill: rgba(77, 163, 255, 0.72); }
.sp-fwd--today { fill: var(--accent); }

/* Plan: the membership card (AnonyVPN's .ov-member), the usage meters, the next plan */
.ov-member {
  position: relative; display: flex; flex-direction: column; min-height: 132px; overflow: hidden; padding: 16px 18px; border: 1px solid var(--rule-strong); border-radius: var(--r-card);
  background: radial-gradient(120% 140% at 100% 100%, rgba(77, 163, 255, 0.12), transparent 55%), linear-gradient(115deg, transparent 35%, rgba(243, 242, 237, 0.04) 48%, transparent 62%), linear-gradient(160deg, var(--raised), var(--surface) 70%);
}
.ov-member--paid { background: radial-gradient(120% 140% at 100% 100%, rgba(77, 163, 255, 0.32), rgba(77, 163, 255, 0.08) 38%, transparent 62%), linear-gradient(115deg, transparent 35%, rgba(243, 242, 237, 0.05) 48%, transparent 62%), linear-gradient(160deg, var(--raised), var(--surface) 70%); }
.ov-member::before { content: ""; position: absolute; inset: 0; opacity: 0.5; background: repeating-radial-gradient(circle at 115% 130%, transparent 0 9px, rgba(243, 242, 237, 0.03) 9px 10px); }
.ov-member > * { position: relative; }
.ov-member__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ov-member__mark { display: block; width: 24px; height: 24px; }
.ov-member__kind { font-size: 12px; font-weight: 500; color: var(--fg-2); }
.ov-member__name { margin: auto 0 0; padding-top: 18px; font: 600 26px/1 var(--ui); letter-spacing: -0.03em; color: var(--fg); overflow-wrap: anywhere; }
.ov-member__until { margin: 8px 0 0; font-size: 13px; color: var(--fg-2); overflow-wrap: anywhere; }
.ov-member__until b { color: var(--fg); font-weight: 600; }
.ov-use { margin: 14px 0 0; }
.ov-use__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 13px; color: var(--fg-2); }
.ov-use__top b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-use .meter { margin-top: 8px; }
.ov-use__sub { margin: 6px 0 0; font-size: 12px; color: var(--fg-3); }
.ov-full { margin-left: 4px; padding: 1px 6px; border: 1px solid var(--warn-line); border-radius: var(--r-chip); color: var(--warn); font-size: 11.5px; font-weight: 600; }
.ov-upsell { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--note-bg); color: var(--fg-2); font-size: 13px; text-decoration: none; transition: border-color 150ms, background-color 150ms; }
.ov-upsell b { color: var(--fg); }
.ov-upsell:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--fg); }
.ov-upsell .ico { flex: none; color: var(--fg-3); }

/* Activity: stacked columns per day (one SVG each, heights as attributes), a tooltip on hover and keyboard focus */
.ov-chart__legend { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 18px; padding: 0; }
.ov-chart__legend li { display: grid; grid-template-columns: 10px 1fr; align-items: center; column-gap: 8px; font-size: 12.5px; color: var(--fg-3); }
.ov-chart__legend b { grid-column: 2; font: 600 20px/1.15 var(--ui); color: var(--fg); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .ov-chart__legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ov-chart__plot { position: relative; height: 150px; padding-left: 26px; }
.ov-chart__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.ov-chart__grid span { display: block; height: 0; border-top: 1px dashed var(--rule); font-size: 10.5px; line-height: 0; color: var(--fg-3); }
.ov-chart__cols { list-style: none; position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 8px; height: 100%; margin: 0; padding: 0; }
@media (max-width: 479.98px) { .ov-chart__cols { gap: 4px; } }
.ov-col { position: relative; min-width: 0; height: 100%; outline: none; border-radius: 6px; }
.ov-col__bars { display: block; width: 100%; height: 100%; overflow: visible; }
.ov-b { transition: filter 150ms; }
.ov-b--fwd { fill: rgba(77, 163, 255, 0.72); }
.ov-col--today .ov-b--fwd { fill: var(--accent); }
.ov-b--spam { fill: rgba(255, 107, 138, 0.16); stroke: rgba(255, 107, 138, 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ov-b--block { fill: rgba(243, 242, 237, 0.32); }
.ov-col:hover .ov-b, .ov-col:focus-visible .ov-b { filter: brightness(1.25); }
.ov-col:hover::before, .ov-col:focus-visible::before { content: ""; position: absolute; inset: -4px -3px; border-radius: 6px; background: rgba(243, 242, 237, 0.04); }
.ov-col:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ov-tip {
  position: absolute; z-index: 3; bottom: calc(100% - 8px); left: 50%; translate: -50% 0; display: none; flex-direction: column; gap: 3px; width: max-content; padding: 10px 12px;
  border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--overlay); box-shadow: var(--shadow-overlay); font-size: 12px; color: var(--fg-2); pointer-events: none;
}
.ov-tip b { margin-bottom: 2px; color: var(--fg); font-weight: 600; }
.ov-tip span { display: flex; align-items: center; gap: 7px; }
.ov-col:hover .ov-tip, .ov-col:focus-visible .ov-tip { display: flex; }
.ov-col:nth-child(-n+4) .ov-tip { left: 0; translate: 0 0; }
.ov-col:nth-last-child(-n+4) .ov-tip { left: auto; right: 0; translate: 0 0; }
.ov-chart__ticks { display: flex; justify-content: space-between; margin: 8px 0 0 26px; font-size: 12px; color: var(--fg-3); }
.ov-chart__none { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 24px; border: 1px dashed var(--rule); border-radius: var(--r-control); color: var(--fg-3); font-size: 13.5px; text-align: center; }
.ov-chart--empty .ov-chart__plot { padding: 0; height: 132px; }

/* Replies: the path a reply takes (AnonyVPN's multi-hop strip) */
.ov-hops { list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; }
.ov-hops li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (min-width: 640px) {
  .ov-hops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ov-hops li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(100% - 26px); width: 40px; height: 1px; background: repeating-linear-gradient(90deg, var(--fg-3) 0 3px, transparent 3px 7px); }
  .ov-hops li + li { padding-left: 22px; }
  .ov-hops li > .ov-hop { max-width: calc(100% - 30px); }
}
@media (min-width: 1024px) { .ov-hops { grid-template-columns: 0.8fr 1fr 1.25fr; } }
.ov-hop { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; min-height: 34px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--raised); font-size: 13px; font-weight: 500; color: var(--fg); white-space: nowrap; }
.ov-hop > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov-hop .ico { flex: none; color: var(--fg-3); }
.ov-hop--mono, .ov-hop--accent { font-family: var(--mono); font-size: 12px; font-weight: 400; }
.ov-hop--accent { border-color: var(--accent-line); background: var(--accent-soft); }
.ov-hop--accent .ico { color: var(--accent); }
.ov-hop__sub { padding-left: 4px; font-size: 12px; color: var(--fg-3); }

/* ---- Aliases (redesign A): the list panel — capacity, search + status, rows with 30-day sparklines — and New alias
   (AnonyVPN's Add a device panel: the form beside how it works) ---- */
.al-panel { margin: 0 0 16px; }
.al-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; }
.al-search { position: relative; flex: 1 1 260px; max-width: 360px; min-width: 0; }
.al-search .ico { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--fg-3); pointer-events: none; }
.al-search input { min-height: 40px; padding: 8px 12px 8px 36px; font-size: 14px; }
.al-tools__count { margin: 0 0 0 auto; font-size: 12.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) { .al-search { max-width: none; flex-basis: 100%; } .al-tools__count { flex-basis: 100%; margin: 0; } }
.seg-ctl { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px; min-width: 0; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--field); }
.seg-ctl label { position: relative; display: block; cursor: pointer; }
.seg-ctl input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-ctl span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 9px; color: var(--fg-2); font-size: 13.5px; font-weight: 500; transition: background-color 150ms, color 150ms; }
.seg-ctl span b { font-weight: 500; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.seg-ctl label:hover span { color: var(--fg); }
.seg-ctl input:checked + span { background: var(--raised); color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.seg-ctl input:checked + span b { color: var(--fg-2); }
.seg-ctl input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-ctl--sm span { min-height: 32px; padding: 0 11px; font-size: 13px; }
.al-head { display: none; grid-template-columns: 36px minmax(0, 1fr) 210px 84px 132px; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--rule); color: var(--fg-3); font-size: 12px; font-weight: 500; }
.al-list { list-style: none; margin: 0; padding: 0; }
.al-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "i m m" "i a a" "i s b"; align-items: center; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--rule); }
.al-list .al-row:first-child { border-top: 0; }
.al-row[hidden] { display: none; }
.al-row::before { content: ""; position: absolute; inset: 0 -10px; z-index: 0; border-radius: 10px; background: transparent; transition: background-color 150ms; pointer-events: none; }
.al-row:hover::before, .al-row:focus-within::before { background: rgba(243, 242, 237, 0.025); }
.al-row > * { position: relative; z-index: 1; }
.al-row > .ov-row__icon { grid-area: i; align-self: start; }
.al-row__main { grid-area: m; min-width: 0; }
.al-row__act { grid-area: a; display: flex; align-items: center; gap: 12px; min-width: 0; }
.al-row__status { grid-area: s; }
.al-row__btns { grid-area: b; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.al-row__btns form { margin: 0; }
.al-row__addr { display: flex; align-items: center; gap: 4px; min-width: 0; }
.al-row__addr .ov-addr { font-size: 14px; }
.al-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 3px 0 0; font-size: 12.5px; color: var(--fg-3); }
.al-row__meta .ico { color: var(--fg-3); }
.al-row__mb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.al-row__label { color: var(--fg-soft); font-weight: 500; font-size: 13px; }
.al-row__nolabel { color: var(--fg-3); font-weight: 400; }
.al-row__meta--2 { display: none; }
.al-sep { color: var(--rule-hover); }
.al-row__counts { margin: 0; font-size: 12.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.al-row__counts b { color: var(--fg); font-weight: 600; }
.al-c-spam { color: var(--danger); }
.al-row.is-paused .ov-addr, .al-row.is-paused .al-row__label { color: var(--fg-3); }
.al-row.is-paused .sp-fwd { fill: var(--rule-hover); }
.al-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.al-tip { position: relative; }
.al-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--overlay); color: var(--fg); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.al-tip:hover::after, .al-tip:focus-visible::after { opacity: 1; }
@media (min-width: 1024px) {
  .al-head { display: grid; }
  .al-row { grid-template-columns: 36px minmax(0, 1fr) 210px 84px 132px; grid-template-areas: "i m a s b"; gap: 14px; }
  .al-row > .ov-row__icon { align-self: center; width: 36px; height: 36px; }
  .al-row__act { flex-direction: column; align-items: flex-start; gap: 6px; }
  .al-row__meta--2 { display: flex; }
  .al-row__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .al-row .copyable .icon-btn { opacity: 0; transition: opacity 120ms; }
  .al-row:hover .copyable .icon-btn, .al-row:focus-within .copyable .icon-btn, .al-row .copyable .icon-btn.is-done { opacity: 1; }
}
@media (max-width: 1023.98px) { .al-row .sp { width: 120px; flex: none; } }
@media (max-width: 479.98px) { .al-row .sp { display: none; } .al-row__meta .al-sep { display: none; } .al-row__label { flex-basis: 100%; } }

/* New alias */
.na { margin: 0; }
.na-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .na-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; } .na-how { padding-left: 24px; border-left: 1px solid var(--rule); } }
.na-main { min-width: 0; }
.na-main > .note { margin: 0; }
.na-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.na-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.na-field legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.na-field .hint { margin: 8px 0 0; }
.na-preview { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r-card); background: radial-gradient(80% 140% at 0% 0%, rgba(77, 163, 255, 0.08), transparent 60%), var(--bg); }
.na-preview__k { font-size: 12px; color: var(--fg-3); }
.na-preview__addr { font: 400 clamp(16px, 2.6vw, 22px)/1.25 var(--mono); color: var(--fg); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.na-preview__x { color: var(--fg-3); }
.na-preview__hint { margin: 0; font-size: 12.5px; }
.na-prefix label { display: block; margin: 0 0 6px; }
.na-prefix .prefix-row { max-width: none; }
.na-prefix .prefix-row input { font-family: var(--mono); font-size: 15px; }
.na-prefix .hint { margin: 6px 0 0; }
.na-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .na-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.na-row .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.na-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 4px; }
.na-go .hint { margin: 0; }
.na-how { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; }
.na-how li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 13px; color: var(--fg-3); line-height: 1.45; }
.na-how li .ico { margin-top: 1px; color: var(--accent); }
.na-how b { display: block; margin: 0 0 2px; color: var(--fg); font-size: 13.5px; font-weight: 600; }

/* ---- forms and filters (AnonyVPN admin/plan) ---- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; max-width: 760px; }
.form-grid > label { margin-top: 10px; }
@media (min-width: 900px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid > .span-2 { grid-column: 1 / -1; }
}
.form-grid .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg-3); }
.filters input, .filters select { width: auto; min-height: 36px; padding: 6px 8px; font-size: 13px; }
select.small-select { width: auto; min-height: 36px; padding: 6px 8px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .toast { position: static; translate: none; transform: none; width: auto; max-width: none; margin: 0 0 20px; box-shadow: none; animation: none; }
  .spinner, .qr:empty { animation: none; }
}

/* Archivo Black (display moments only; the same files and fallback metrics as AnonyVPN) */
@font-face { font-family: "Archivo Black"; src: url("/static/fonts/archivo-black-latin.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; 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: "Archivo Black"; src: url("/static/fonts/archivo-black-latin-ext.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Black Fallback"; src: local("Arial"); ascent-override: 70.78%; descent-override: 16.93%; line-gap-override: 0%; size-adjust: 124.05%; }

/* ======================================================================================================================
   AnonyMail additions — only what AnonyVPN has no class for. Built from the same tokens and the same rules (the alias
   list = AnonyVPN's device list; the rules list = its plain rows; the contacts table = its stacked .table--keys).
   ==================================================================================================================== */
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: var(--r-control); background: var(--overlay); color: var(--fg); }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* the preview banner (every page): AnonyVPN's banner, info tone, with the Reset demo button */
.preview { align-items: center; flex-wrap: wrap; }
.preview > .ico { align-self: flex-start; margin-top: 2px; }
.preview__text { flex: 1 1 22rem; min-width: 0; }
.preview__reset { flex: none; }
@media (max-width: 479.98px) { .preview__reset { margin-left: 30px; } }

/* addresses: one tap selects the whole address */
.addr { font-family: var(--mono); font-size: 0.92em; overflow-wrap: anywhere; user-select: all; color: var(--fg); }
.addr--title { font-size: 0.72em; letter-spacing: 0; }
.addr--rev { font-size: 12px; color: var(--fg-2); }
.copyable .icon-btn { flex: none; }

/* the alias list and the mailbox list = AnonyVPN's device list (.devices / .device) */
.alias-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.alias {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 16px; min-width: 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); transition: border-color 150ms;
}
.alias:hover { border-color: var(--rule-strong); }
.alias--paused .alias__icon, .alias--pending .alias__icon { color: var(--fg-3); }
.alias--pending { border-color: var(--warn-line); }
.alias__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); background: var(--raised); color: var(--fg-2); }
.alias__body { flex: 1 1 0; min-width: 0; }
.alias__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.alias__top .addr, .mailbox__addr { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.alias__label { margin: 4px 0 0; font-size: 14px; color: var(--fg-soft); }
.alias__meta { margin: 4px 0 0; font-size: 13px; color: var(--fg-3); }
.alias__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alias__actions form { margin: 0; }
.mailbox__remove { margin: 12px 0 0; }
@media (max-width: 639.98px) { .alias__actions { flex: 1 1 100%; padding-left: 58px; } }
@media (max-width: 379.98px) { .alias__actions { padding-left: 0; } }
.filter-count { margin: 0 0 10px; }
.filters label { min-width: 0; }
.filters input[type=search] { width: min(320px, 100%); }
.filters { flex-wrap: wrap; }
@media (max-width: 479.98px) { .filters > label:first-child { flex: 1 1 100%; } .filters input[type=search] { width: 100%; } }

/* New alias */
.prefix-row { display: flex; align-items: center; gap: 8px; max-width: 520px; }
.prefix-row input { flex: 1; min-width: 0; }
.field .prefix-row input:not([type=radio]):not([type=checkbox]) { max-width: none; }
.prefix-row__end { flex: none; color: var(--fg-3); font-size: 14px; }
.chip:has(input:checked) { color: var(--fg); }

/* the contacts table: stacked on phones (AnonyVPN's .table--keys) */
.contacts__intro, .spam__intro { margin-bottom: 16px; }
.contact__sender { font-weight: 600; overflow-wrap: anywhere; }
.table--stack td { vertical-align: middle; }
.toggle.is-on { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
@media (max-width: 767.98px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack td { padding: 4px 12px; border: 0; }
  .table--stack td.num { text-align: left; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; color: var(--fg-3); }
}
.table tfoot th, .table tfoot td { padding: 10px 12px; border-top: 1px solid var(--rule); background: var(--surface); }
.table--spam th[scope="row"] { white-space: nowrap; }

/* block rules: AnonyVPN's plain rows */
.rules { list-style: none; margin: 0; padding: 0; }
.rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--rule); }
.rule:first-child { border-top: 0; }
.rule__main { display: flex; flex-direction: column; min-width: 0; }
.rule__value { font-family: var(--mono); font-size: 13.5px; font-weight: 400; overflow-wrap: anywhere; color: var(--fg); }
.rule__meta { font-size: 12.5px; color: var(--fg-3); }
.rule-group + .rule-group { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.rule-group__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.rule-group__title a { font-family: var(--mono); font-size: 13px; }

/* the rail's account entry (where the AnonyID switcher goes; AnonyVPN's .rail__account / .rail__menu) */
.rail__account > summary { list-style: none; }
.rail__account .avatar { width: 28px; height: 28px; }
.rail__account .avatar .ico { width: 16px; height: 16px; }
.danger-zone { border-color: var(--danger-line); }
.danger-zone .card__head h2 .ico { color: var(--danger); }

/* the public frame (src/views/layout.ts gatePage: "AnonyMail isn't open yet", "Sign-in failed"): AnonyVPN's public
   pages (.top / .main / .foot), in the app's type */
html.gate body { font: 400 15px/1.45 var(--ui); font-feature-settings: "kern", "calt"; }
html.gate .gate__main { max-width: 560px; padding-top: max(40px, 10vh); }
html.gate .gate__main--doc { max-width: 760px; padding-top: 32px; }
html.gate h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; }
html.gate .lead { font-size: 15px; line-height: 1.5; }
.gate__card form { margin-top: 16px; }
.rail__account .pill { margin-left: 6px; min-height: 0; }

/* ---- the legal pages (/privacy, /terms in the public frame): COPIED from AnonyVPN static/app.css (its legal block) ---- */
.legal .meta { color: var(--fg-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.legal p, .legal dd { color: var(--fg-2); }
.legal ol { padding-left: 22px; color: var(--fg-2); }
.legal .note { margin: 0 0 1em; }
.legal .note strong, .legal p strong, .legal li strong { color: var(--fg); }
.legal-facts, .legal-defs { margin: 0 0 1em; }
.legal-facts { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; }
.legal-facts dt { color: var(--fg-3); font-size: 14px; }
.legal-facts dd { margin: 0; overflow-wrap: anywhere; }
.legal-defs dt { font-weight: 600; color: var(--fg); margin-top: 12px; }
.legal-defs dd { margin: 4px 0 0; }
.legal .quote { margin: 0 0 1em; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); color: var(--fg-soft); }
.legal .model-form { margin: 0 0 1em; padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--r-control); }
.legal .model-form summary { cursor: pointer; color: var(--fg); }
@media (max-width: 560px) { .legal-facts { grid-template-columns: 1fr; gap: 2px; } .legal-facts dd { margin-bottom: 10px; } }
.legal-table { font-size: 14px; }
.legal-table td { color: var(--fg-2); overflow-wrap: anywhere; }
.gap { color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legal .changes li { font-size: 14px; }
/* The legal nav (AnonyChat's legal-nav.tsx, AnonyVPN's): the legal centre and every document above the text, the current
   one marked; one row that scrolls sideways on a phone (inside the page's gutter, so the page never does), wrapping from
   1024 px. */
.legal-nav { margin: 0 -8px 24px; overflow-x: auto; scrollbar-width: none; }
.legal-nav::-webkit-scrollbar { display: none; }
.legal-nav ul { display: flex; width: max-content; gap: 4px; list-style: none; margin: 0; padding: 0 8px; }
.legal-nav li { margin: 0; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-control); white-space: nowrap;
  font-size: 14px; color: var(--fg-3); text-decoration: none; transition: color 150ms, background-color 150ms;
}
.legal-nav a:hover { color: var(--fg); }
.legal-nav a[aria-current="page"] { background: var(--raised); color: var(--fg); font-weight: 600; }
@media (min-width: 1024px) { .legal-nav ul { width: auto; flex-wrap: wrap; } }
/* The legal centre (/legal): AnonyChat's hub — one card per document, the title with its version, one line about it. */
.legal-hub { display: grid; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.legal-hub li { margin: 0; }
.legal-hub__item {
  display: block; padding: 16px 20px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface);
  text-decoration: none; transition: border-color 150ms;
}
.legal-hub__item:hover { border-color: var(--accent-line); }
.legal-hub__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.legal-hub__title { font-weight: 600; color: var(--fg); }
.legal-hub__version { flex: none; font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.legal-hub__desc { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* ======================================================================================================================
   DISPLAY FONT + LEGAL TABLE OF CONTENTS (owner 2026-10-13, branch feat/display-font-legal-toc). Kept in this one
   section on purpose (the shared footer work changes other parts of this file).
   1. The landing tagline's face — Archivo Black, upper case, tight tracking (.tagline) — for the signed-in hero box's
      headline (Overview's mail-route flow box, both its states: the first steps and the last 7 days) and the legal
      pages' headings (h1, h2). Archivo Black covers Latin + Latin Extended only, so in Greek / Cyrillic and in Arabic, Devanagari and
      CJK the same headings use the system's own face at weight 800 instead (one face per heading — never Archivo's
      Latin letters mixed with a fallback; no tracking where it breaks the script; upper case where the script has it),
      as anonymail.app's landing sets its tagline in those languages. The legal articles are English (lang="en"), so
      their headings are always Archivo Black.
   2. The legal pages' table of contents (src/views/legal-toc.ts, AnonyChat's legal-toc.tsx): from 1100 px a sticky
      column beside the text ("On this page"), below it the collapsible "Contents" block at the top of the article.
   ==================================================================================================================== */
.ov-hero .ov-hero__title, .legal h1, .legal h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; font-feature-settings: "kern"; text-wrap: balance;
}
.ov-hero .ov-hero__title {
  margin-top: 14px; font-size: 30px; line-height: 1; letter-spacing: -0.04em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--fg);
}
.ov-hero--start .ov-hero__title, .ov-hero .ov-hero__title--long { font-size: 25px; line-height: 1.04; }
@media (min-width: 1112px) {
  .ov-hero .ov-hero__title { font-size: 46px; margin-top: 16px; }
  .ov-hero--start .ov-hero__title, .ov-hero .ov-hero__title--long { font-size: 36px; }
}
.legal h1 { margin: 0 0 14px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1; letter-spacing: -0.04em; }
.legal h2 { margin: 2.2em 0 0.7em; font-size: 19px; line-height: 1.12; letter-spacing: -0.02em; }
@media (min-width: 768px) { .legal h2 { font-size: 21px; } }
.legal h2[id], .legal [id] { scroll-margin-top: 24px; }
/* the scripts Archivo Black does not cover: the system's face, bold, the same upper case where the script has one */
:is(.ov-hero .ov-hero__title, .legal h1, .legal h2):is(:lang(el), :lang(ru), :lang(uk)) { font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; }
:is(.ov-hero .ov-hero__title, .legal h1, .legal h2):is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) {
  font-family: var(--font); font-weight: 800; letter-spacing: 0; line-height: 1.2; text-transform: none;
}

/* the layout: the text column (as before: the public frame's 760 px reading width) and, from 1100 px, the contents
   beside it (the frame widens to 1100 px for it) */
.legal-layout > .legal { min-width: 0; }
.legal-aside { display: none; }
@media (min-width: 1100px) {
  html.gate .gate__main--doc { max-width: 1100px; }
  .legal-layout { display: grid; grid-template-columns: minmax(0, 720px) 236px; justify-content: space-between; align-items: start; gap: 56px; }
  .legal-aside { display: block; position: sticky; top: 24px; }
  .ltoc--inline { display: none; }
}
.ltoc .ltoc__list { margin: 0; padding: 0; list-style: none; } /* (beats .legal ol / .legal li inside the article) */
.ltoc .ltoc__list li { margin: 0; }
.ltoc__link {
  display: block; padding: 7px 10px; border-radius: var(--r-chip); font-size: 13.5px; line-height: 1.35; color: var(--fg-3); text-decoration: none;
  transition: color 150ms, background-color 150ms;
}
.ltoc__link:hover { color: var(--fg); background: var(--surface); }
.ltoc__link[aria-current] { color: var(--fg); background: var(--surface); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
/* the side column: its own scroll when the list is taller than the window */
.ltoc--side { max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; scrollbar-width: thin; }
.ltoc__h { margin: 0; padding: 0 10px 10px; font: 400 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
/* phones and tablets: a closed "Contents" block at the top of the article (a <details>: no JavaScript needed) */
.ltoc--inline { margin: 20px 0 8px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--surface); }
.ltoc__sum {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; user-select: none;
  font-size: 15px; font-weight: 500; color: var(--fg-soft); border-radius: var(--r-control);
}
.ltoc__sum::-webkit-details-marker { display: none; }
.ltoc__ico, .ltoc__chev { width: 18px; height: 18px; flex: none; color: var(--fg-3); }
.ltoc__chev { margin-inline-start: auto; transition: transform 150ms var(--ease); }
.ltoc--inline[open] .ltoc__chev { transform: rotate(180deg); }
.ltoc--inline nav { padding: 6px; border-top: 1px solid var(--rule); }
:is(.ltoc__h, .ltoc__sum):is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh), :lang(el), :lang(ru), :lang(uk)) { letter-spacing: 0; }
.ltoc__h:is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh), :lang(el), :lang(ru), :lang(uk)) { font-family: var(--font); font-size: 12.5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ltoc__chev, .ltoc__link { transition: none; } }
@media print { .legal-aside, .ltoc--inline { display: none; } }
/* ==== end DISPLAY FONT + LEGAL TABLE OF CONTENTS ==== */

/* ---- anony-select (static/anony-select/, vendored from /root/anony-design select/; owner 2026-10-11) ----------------
   Every <select data-anony-select> becomes AnonyChat's dropdown (search past 12 options, a bottom sheet below 640 px).
   Here only its tokens are mapped to AnonyMail's: the blue accent, the field ground and the input metrics above, so the
   trigger sits in a form like the other fields. The native select stays in the form (hidden), so posts are unchanged. */
:root {
  --as-font-size: 16px;
  --as-line-height: 1.3;
  --as-text: var(--fg); --as-text-soft: var(--fg-soft); --as-text-muted: var(--fg-2); --as-text-faint: var(--fg-3); --as-placeholder: var(--placeholder);
  --as-accent: var(--accent); --as-danger: var(--danger);
  --as-trigger-bg: var(--field); --as-trigger-border: var(--rule-strong); --as-trigger-border-hover: var(--rule-hover);
  --as-trigger-radius: var(--r-control); --as-trigger-height: 44px; --as-trigger-padding: 11px 12px;
  --as-panel-bg: var(--overlay); --as-panel-border: var(--rule-strong); --as-panel-radius: var(--r-card); --as-panel-shadow: var(--shadow-overlay);
  --as-row-active: var(--raised); --as-divider: var(--rule); --as-flag-ring: var(--rule);
}
/* the compact filter rows (Aliases, Admin), as their inputs */
.filters .anony-select { --as-font-size: 13px; --as-trigger-height: 36px; --as-trigger-padding: 6px 8px 6px 10px; --as-trigger-gap: 6px; }
.filters .anony-select__panel { font-size: 14px; }
.inline-field .anony-select { flex: 1; min-width: 0; }

/* ======================================================================================================================
   Redesign A, second pass (owner 2026-10-11): Plan (+ checkout, orders), Mailboxes, Blocked, an alias's page and Settings
   in the panels of the family — AnonyVPN's rules (its Plan, checkout, order and Settings → Account panels) in AnonyMail
   blue; the few AnonyMail-only pieces below them. Green / red = data states only.
   ==================================================================================================================== */
.ov-panel__head--desc { align-items: flex-start; }
.ov-panel__desc { margin: 6px 0 0; max-width: 72ch; color: var(--fg-3); font-size: 13.5px; line-height: 1.5; }
.ov-panel .tablewrap { margin: 14px -12px 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ov-panel .disclosure { margin: 14px 0 0; }
.ov-panel > .hint { margin-top: 12px; }
.ov-panel > .ov-text { max-width: 72ch; }
/* the current plan: the membership card beside its usage */
.plan-now { margin: 0 0 8px; padding: 18px 16px; }
@media (min-width: 640px) { .plan-now { padding: 20px 22px 22px; } }
.plan-now__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.plan-now__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.plan-now__side > * { margin: 0; }
.plan-now__use .ov-use:first-child { margin-top: 0; }
.plan-now__rows { margin: 0; padding-top: 4px; border-top: 1px solid var(--rule); }
.plan-now__note { display: flex; gap: 8px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--fg-2); }
.plan-now__note .ico { margin-top: 2px; color: var(--accent); flex: none; }
@media (min-width: 768px) {
  .plan-now__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .plan-now__grid > .ov-member { min-height: 180px; }
}
.ov-member__until strong { color: var(--fg); }
.privacy-card .facts-list li { font-size: 13.5px; }
.facts-list a { color: var(--fg-2); }
/* key–value rows (the checkout, the current plan, an alias's facts) */
.kv-rows { margin: 16px 0 0; }
.kv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.kv-row:first-child { border-top: 0; }
.kv-row dt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); }
.kv-row dd { margin: 0; font-size: 14px; color: var(--fg-soft); overflow-wrap: anywhere; }
.kv-row dd strong { color: var(--fg); }
@media (min-width: 640px) { .kv-row { grid-template-columns: 160px minmax(0, 1fr); align-items: baseline; } }
/* the checkout: the order beside the price and the consent */
.co-price { margin: 0; }
.co-price strong { font: 600 44px/1 var(--ui); letter-spacing: -0.035em; color: var(--fg); }
.co-sats { margin: 10px 0 18px; font-size: 14px; color: var(--fg-2); }
.co-sats strong { color: var(--fg); font-weight: 600; }
.co-sats .hint { display: block; margin-top: 2px; }
.co-form { display: grid; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.co-form .consent { margin: 0; }
html.app .co-form .hint { margin: 0; }
.done + .ov-panel { margin-top: 16px; }
html.app .plans-every { margin: 4px 0 20px; }
.co-country { max-width: 760px; }
/* the 18+ page */
.ov-gate { max-width: 640px; padding: 28px; }
.ov-gate__icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 16px; border-radius: var(--r-control); background: var(--raised); color: var(--fg-2); }
.ov-gate h1 { margin: 0 0 8px; font-size: 24px; }
.ov-gate__actions { margin: 20px 0 0; }
/* the order page */
.done__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .done__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; } }
.done .actions { margin: 18px 0 0; }
.order-state__body { display: flex; align-items: flex-start; gap: 14px; }
.order-state__body p { margin: 8px 0 0; color: var(--fg-soft); }
.order-state__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--raised); color: var(--fg-2); }
.order-state--ok .order-state__icon { color: var(--ok); }
.order-state--warn .order-state__icon { color: var(--warn); background: var(--warn-bg); }
.order-state--danger .order-state__icon { color: var(--danger); background: var(--danger-bg); }
.order-state--info .order-state__icon { color: var(--info); }
.order-state .actions { margin: 18px 0 0; }
.order-status .ov-dot--wait { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); animation: ov-halo-wait 2.4s ease-out infinite; }
@keyframes ov-halo-wait { 0% { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(77, 163, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .order-status .ov-dot--wait { animation: none; } }
.invoice-panel .invoice__amount strong { font: 600 34px/1.1 var(--ui); letter-spacing: -0.03em; }
.invoice-panel .invoice__main > p { margin-bottom: 12px; }
/* the orders */
.ov-otable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ov-otable th { padding: 0 0 8px; border-bottom: 1px solid var(--rule); text-align: left; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.ov-otable td { padding: 12px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ov-otable tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.ov-otable th + th, .ov-otable td + td { padding-left: 14px; }
.ov-otable .ov-r { text-align: right; }
.ov-order__date { color: var(--fg); font-weight: 500; text-decoration: none; }
.ov-order__date:hover { text-decoration: underline; }
.ov-order__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.ov-show-s, .ov-otable .ov-show-s { display: none; }
.ov-otable td:nth-child(2) { white-space: nowrap; }
.ov-otable .pill { white-space: normal; }
@media (max-width: 639.98px) {
  .ov-hide-s { display: none; }
  .ov-show-s, .ov-otable .ov-show-s { display: block; }
}
/* Settings → Account / Your data: the panels' rows, separated by rules */
.ov-panel .group__row { padding: 14px 0; }
.ov-panel__head + .group__row, .ov-panel__head + .banner + .group__row { padding-top: 0; border-top: 0; }
.ov-panel .group__icon { align-self: flex-start; width: 36px; height: 36px; }
.ov-panel .group__icon .ico { width: 18px; height: 18px; }
.ov-panel .group__text { flex: 1 1 16rem; }
.ov-panel .group__lead { font-size: 14.5px; }
.group__text .hint a { color: var(--fg-2); }
@media (max-width: 479.98px) { .ov-panel .group__row { padding: 14px 0; } }
/* Mailboxes: Add a mailbox (the New alias panel) */
.na-form .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 520px; }
.na-form > .hint { margin: 0; }
/* Blocked: the form, this month's counts, the rules */
.bl-form { display: grid; gap: 14px; }
@media (min-width: 640px) { .bl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-form .na-go { grid-column: 1 / -1; } }
.bl-form .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bl-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; }
.bl-fig { min-width: 0; padding: 12px 0; border-top: 1px solid var(--rule); }
.bl-fig:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.bl-fig dt { font-size: 12.5px; color: var(--fg-3); }
.bl-fig dd { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.bl-fig dd b { font: 600 26px/1.1 var(--ui); letter-spacing: -0.02em; color: var(--fg); }
.bl-fig dd span { font-size: 12.5px; color: var(--fg-3); }
@media (min-width: 640px) {
  .bl-figs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bl-figs--4 .bl-fig { border-top: 0; padding-top: 0; }
}
.bl-group + .bl-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.bl-group__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font: 600 14px/1.3 var(--ui); color: var(--fg); }
.bl-group__title .ico { align-self: center; color: var(--fg-3); }
.bl-group .ov-empty { margin: 4px 0 0; }
.bl-group .rule-group + .rule-group { margin-top: 10px; padding-top: 10px; }
.table td.is-zero { color: var(--fg-3); }
/* an alias's page */
.ad-k { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-3); }
.ad-k + .ov-chart { margin-top: 12px; }
.ad-facts { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--rule); }

.table--spam .addr { overflow-wrap: normal; white-space: nowrap; }

/* ---- The account chip (PREVIEW, feat/account-chip, owner 2026-10-11; src/views/account.ts): avatar (an initial on a
   tinted circle), the AnonyID username, the AnonyID glyph (mark only). Rail: pinned below Settings; compact = the
   avatar with the glyph on its corner, labelled = avatar, name, glyph. Settings list (< 1280 px): a 64 px row on top.
   Settings → Account: the panel size. Signed out: the glyph on a graphite disc + "Sign in". ---- */
.acct__avatar {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 600 13px/1 var(--ui); letter-spacing: 0; text-transform: uppercase; background: var(--raised); color: var(--fg-2);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 237, 0.08);
}
.acct__avatar .ico { width: 60%; height: 60%; }
.acct__avatar--row { width: 36px; height: 36px; font-size: 15px; }
.acct__avatar--panel { width: 44px; height: 44px; font-size: 18px; }
.acct__avatar--gate { width: 24px; height: 24px; font-size: 11px; }
.acct__tint-0 { background: #1c2937; color: #8cc4ff; }
.acct__tint-1 { background: #2a2440; color: #c9b8ff; }
.acct__tint-2 { background: #163027; color: #6fe3b4; }
.acct__tint-3 { background: #322a17; color: #f2cf66; }
.acct__tint-4 { background: #35202a; color: #ffa3b8; }
.acct__tint-5 { background: #163036; color: #73d6e3; }
.acct__glyph { flex: none; width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px; }
.acct__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 600; }
/* rail */
.rail__rule { height: 1px; margin: 6px 4px; background: var(--rule); flex: none; }
.acct--rail { min-height: 48px; }
.acct__face { position: relative; flex: none; display: inline-grid; }
.acct__badge {
  position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 1px var(--rule-strong); transition: opacity 200ms;
}
.acct__badge-glyph { width: 12px; height: 12px; }
.acct__label { display: flex; align-items: center; min-width: 0; }
.acct__label .acct__name { font: 600 14px/1.2 var(--ui); }
.acct__label .acct__glyph { margin-left: 8px; }
.acct--rail[aria-current="page"]::before { display: none; }
.acct--rail[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--rule-strong); }
@media (min-width: 768px) and (max-width: 1279.98px) {
  @media (hover: hover) and (pointer: fine) { .rail:hover .acct__badge { opacity: 0; transition-delay: 120ms; } }
  .rail:has(:focus-visible) .acct__badge { opacity: 0; }
}
@media (min-width: 1280px) { .rail .acct__badge { opacity: 0; } }
@media (min-width: 1280px) and (max-width: 1535.98px) {
  html.has-pane .rail .acct__badge { opacity: 1; }
  @media (hover: hover) and (pointer: fine) { html.has-pane .rail:hover .acct__badge { opacity: 0; transition-delay: 120ms; } }
  html.has-pane .rail:has(:focus-visible) .acct__badge { opacity: 0; }
}
/* the settings list's account row */
.settings-list--account { margin-bottom: 16px; }
.acct--row { min-height: 64px; }
.acct__text { flex: 1; min-width: 0; display: flex; align-items: center; }
.acct--row .acct__name { font: 600 16px/1.2 var(--ui); }
.acct--row .acct__glyph { margin: 0 4px 0 0; }
@media (min-width: 1280px) { .settings-list--account { display: none; } }
/* Settings → Account */
.acct--panel { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.acct--panel .acct__text { display: block; }
.acct--panel .acct__name { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; margin: 0 0 2px; font: 600 18px/1.25 var(--ui); white-space: normal; }
.acct--panel .acct__name .acct__glyph { width: 18px; height: 18px; margin: 0; }
.acct--panel .hint { margin: 0; }
/* the public frame's card */
.acct--gate { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 10px 4px 4px; border: 1px solid var(--rule-strong); border-radius: 99px; background: var(--raised); }
.acct--gate .acct__name { font: 600 14px/1.2 var(--ui); }
.acct--gate .acct__glyph { margin: 0; }
/* signed out: the sign-in button */
.button.signin { display: inline-flex; align-items: center; gap: 10px; padding-left: 8px; }
.signin__glyph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); }
.signin__glyph img { width: 20px; height: 20px; }
.button.secondary.signin .signin__glyph { background: var(--raised); }

/* ==== i18n (owner 2026-10-12, the 24 languages): the language switcher, and right-to-left (Arabic). ====
   <html dir="rtl"> mirrors the shell (the rail and the second pane on the right, the content offset from the right) and
   the direction-dependent details (chevrons, rules beside text, icon slots in fields). Alias and mailbox addresses stay
   left-to-right inside RTL text; the mail-route drawing and the day charts keep their left-to-right geometry (time and
   the route read the same way in every language); the legal documents are English and set left to right. */


/* addresses are left to right whatever the page's direction */
.addr, .ov-addr, .ov-row--box .ov-row__name, .ov-hop--mono, .ov-hop--accent { unicode-bidi: isolate; direction: ltr; }
[dir="rtl"] .addr, [dir="rtl"] .ov-addr { text-align: right; }

/* geometry that reads left to right in every language */
.mr { direction: ltr; }
[dir="rtl"] .ov-chart__plot, [dir="rtl"] .ov-chart__ticks, [dir="rtl"] .sp { direction: ltr; }
[dir="rtl"] .legal, [dir="rtl"] .legal-toc, [dir="rtl"] [lang="en"] { direction: ltr; text-align: left; }

/* right to left: the shell */
[dir="rtl"] .skip { left: auto; right: 12px; }
[dir="rtl"] .toast { translate: 50% 0; left: auto; right: 50%; }
@media (min-width: 768px) {
  [dir="rtl"] .toast { right: auto; left: 24px; translate: none; }
  html[dir="rtl"].app .appmain { margin-left: 0; margin-right: var(--rail); }
  [dir="rtl"] .rail { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--rule); }
  [dir="rtl"] .rail__mark { left: auto; right: 8px; }
  [dir="rtl"] .rail__wordmark { left: auto; right: 8px; }
  [dir="rtl"] .rail__link[aria-current="page"]::before { left: auto; right: 0; }
  [dir="rtl"] .rail__label { margin-left: 0; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  @media (hover: hover) and (pointer: fine) {
    [dir="rtl"] .rail:hover { box-shadow: -26px 0 50px -24px rgba(0, 0, 0, 0.9); }
    [dir="rtl"] .rail:hover .rail__link { padding-left: 0; padding-right: 14px; }
    [dir="rtl"] .rail:hover .rail__label { margin-left: 0; margin-right: 12px; }
  }
  [dir="rtl"] .rail:has(:focus-visible) { box-shadow: -26px 0 50px -24px rgba(0, 0, 0, 0.9); }
  [dir="rtl"] .rail:has(:focus-visible) .rail__link { padding-left: 0; padding-right: 14px; }
  [dir="rtl"] .rail:has(:focus-visible) .rail__label { margin-left: 0; margin-right: 12px; }
}
@media (min-width: 1280px) {
  html[dir="rtl"].app .appmain { margin-left: 0; margin-right: var(--rail-full); }
  [dir="rtl"] .rail .rail__label { margin-left: 0; margin-right: 12px; }
  html[dir="rtl"].has-pane .pane { left: auto; right: var(--rail); border-right: 0; border-left: 1px solid var(--rule); }
  html[dir="rtl"].app.has-pane .appmain { margin-left: 0; margin-right: calc(var(--rail) + 300px); }
  html[dir="rtl"].has-pane .rail .rail__label { margin-right: 0; }
}
@media (min-width: 1280px) and (max-width: 1535.98px) {
  @media (hover: hover) and (pointer: fine) {
    html[dir="rtl"].has-pane .rail:hover { box-shadow: -26px 0 50px -24px rgba(0, 0, 0, 0.9); }
    html[dir="rtl"].has-pane .rail:hover .rail__link { padding-left: 0; padding-right: 14px; }
    html[dir="rtl"].has-pane .rail:hover .rail__label { margin-left: 0; margin-right: 12px; }
  }
  html[dir="rtl"].has-pane .rail:has(:focus-visible) { box-shadow: -26px 0 50px -24px rgba(0, 0, 0, 0.9); }
  html[dir="rtl"].has-pane .rail:has(:focus-visible) .rail__link { padding-left: 0; padding-right: 14px; }
  html[dir="rtl"].has-pane .rail:has(:focus-visible) .rail__label { margin-left: 0; margin-right: 12px; }
}
@media (min-width: 1536px) {
  html[dir="rtl"].has-pane .rail .rail__label { margin-left: 0; margin-right: 12px; }
  html[dir="rtl"].has-pane .pane { right: var(--rail-full); }
  html[dir="rtl"].app.has-pane .appmain { margin-right: calc(var(--rail-full) + 300px); }
}

/* right to left: details */
[dir="rtl"] .chev, [dir="rtl"] .out, [dir="rtl"] .ov-link > .ico, [dir="rtl"] .ov-upsell > .ico { transform: scaleX(-1); }
[dir="rtl"] .chev, [dir="rtl"] .out { margin-left: 0; margin-right: auto; }
[dir="rtl"] .out { padding-left: 0; padding-right: 8px; }
[dir="rtl"] .steps, [dir="rtl"] .legal ol { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .steps li { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .pill--wrap.pill--dot::before, [dir="rtl"] .table tr.group th .ico, [dir="rtl"] .disclosure > summary::before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .disclosure > summary::before { transform: rotate(135deg); }
[dir="rtl"] .disclosure[open] > summary::before { transform: rotate(45deg); }
[dir="rtl"] .table th { text-align: right; }
[dir="rtl"] .table .num, [dir="rtl"] .ov-r, [dir="rtl"] .ov-otable .ov-r, [dir="rtl"] .plan-card__row dd { text-align: left; }
[dir="rtl"] .ov-otable th { text-align: right; }
[dir="rtl"] .ov-otable th + th, [dir="rtl"] .ov-otable td + td { padding-left: 0; padding-right: 14px; }
[dir="rtl"] .facts-list li { padding: 0 24px 10px 0; }
[dir="rtl"] .facts-list li::before { left: auto; right: 3px; }
[dir="rtl"] .group__lead .pill, [dir="rtl"] .rail__account .pill, [dir="rtl"] .ov-full { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .ov-hero__facts > div { border-left: 0; border-right: 1px solid var(--rule-strong); }
[dir="rtl"] .ov-hero__facts > div:first-child { padding-left: 20px; padding-right: 0; border-right: 0; }
@media (max-width: 379.98px) { [dir="rtl"] .ov-hero__facts > div { padding: 0; border-right: 0; } }
@media (min-width: 1112px) {
  [dir="rtl"] .ov-hero__art { right: auto; left: 8px; }
  [dir="rtl"] .ov-hero__copy { padding: 40px 40px 0 0; }
  [dir="rtl"] .ov-hero__facts > div:first-child { padding-left: 24px; padding-right: 0; }
}
[dir="rtl"] .ov-link { margin-right: 0; margin-left: -4px; padding: 4px 8px 4px 4px; }
[dir="rtl"] .ov-cap__left { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ov-row--alias .ov-row__end { align-items: flex-start; }
@media (min-width: 640px) {
  [dir="rtl"] .ov-hops li:not(:last-child)::after { left: auto; right: calc(100% - 26px); }
  [dir="rtl"] .ov-hops li + li { padding-left: 0; padding-right: 22px; }
}
[dir="rtl"] .ov-hop__sub { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .al-search .ico { left: auto; right: 12px; }
[dir="rtl"] .al-search input { padding: 8px 36px 8px 12px; }
@media (min-width: 900px) { [dir="rtl"] .na-how { padding-left: 0; padding-right: 24px; border-left: 0; border-right: 1px solid var(--rule); } }
@media (max-width: 479.98px) { [dir="rtl"] .preview__reset { margin-left: 0; margin-right: 30px; } }
@media (max-width: 639.98px) { [dir="rtl"] .alias__actions { padding-left: 0; padding-right: 58px; } }
@media (max-width: 379.98px) { [dir="rtl"] .alias__actions { padding-right: 0; } }
[dir="rtl"] .table--stack td.num { text-align: right; }
[dir="rtl"] .acct__glyph { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .acct__label .acct__glyph { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .acct__badge { right: auto; left: -4px; }
[dir="rtl"] .button.signin { padding-left: 16px; padding-right: 8px; }
/* The phone bar's five labels in other languages (test/e2e/i18n.mjs checks none is cut off): a little smaller, as the
   platforms' own tab bars are (10–11 px), so "Einstellungen", "Impostazioni" or "Налаштування" fit a 78 px cell. */
html:not([lang="en"]) .bar__label { font-size: 11px; letter-spacing: -0.01em; }
@media (max-width: 359.98px) { html:not([lang="en"]) .bar__label { font-size: 10px; } }
/* Overview's "today" facts: a longer translation ("3 weitergeleitet · 2 abgelehnt") moves the next fact to its own line
   instead of running under it (English fits on one line as before). */
.ov-hero__facts { flex-wrap: wrap; row-gap: 12px; }
.ov-hero__facts > div { min-width: min-content; }
/* Right to left: every "go on" chevron (ui.ts icon("chevron")) points the reading direction. */
[dir="rtl"] svg.ico path[d="m9 6 6 6-6 6"] { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
/* Japanese and Chinese break anywhere: balance the big titles so no single character is left on a line. */
:is(:lang(ja), :lang(zh-Hans)) :is(.ov-hero__title, .page-head h1, .empty-state__title) { text-wrap: balance; }
:lang(ja) :is(.ov-hero__title, .page-head h1, .empty-state__title) { word-break: auto-phrase; } /* Chrome: break between phrases */