/* ============================================================
   MailCull shared kit styles — used by all UI kits.
   Loads Inter, defines tokens, base resets, primitives.
   Kept self-contained so each ui_kits/<kit>/index.html can link
   just this one stylesheet.

   v2.0 — 2026-04-24 — extended with primitives for toast/banner/
   modal/table/skeleton/pagination/feature-gate/empty-state/tabs/
   quota meter/progress strip, plus admin-scope overrides.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");

:root {
  color-scheme: light;
  --bg: #faf9f6;
  --panel: #ffffff;
  --panel-strong: #fdfcfa;
  --surface: #f5f3ef;
  --ink: #111111;
  --muted: #7b7b78;
  --accent: #ff5600;
  --accent-dark: #cc4400;
  --accent-soft: rgba(255, 86, 0, 0.08);
  --accent-line: rgba(255, 86, 0, 0.20);
  --good: #067647;
  --good-soft: rgba(6, 118, 71, 0.08);
  --good-line: rgba(6, 118, 71, 0.20);
  --warn: #b54708;
  --warn-soft: rgba(181, 71, 8, 0.08);
  --warn-line: rgba(181, 71, 8, 0.20);
  --danger: #c41c1c;
  --danger-soft: rgba(196, 28, 28, 0.08);
  --danger-line: rgba(196, 28, 28, 0.20);
  --unknown: #7b7b78;
  --unknown-soft: rgba(123, 123, 120, 0.08);
  --unknown-line: rgba(123, 123, 120, 0.20);
  --line: #dedbd6;
  --line-strong: #c8c4bf;
  --radius-card: 8px;
  --radius-btn: 4px;
  --radius-nav: 6px;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-toast: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.10);
  --focus-ring: 0 0 0 3px rgba(255, 86, 0, 0.12);
}

/* Admin scope: overrides applied by wrapping in `.admin-scope`.
   Keeps 95% of the system identical; swaps brand accent to purple,
   sidebar to dark ink. */
.admin-scope {
  --accent: #6938ef;
  --accent-dark: #5322d3;
  --accent-soft: rgba(105, 56, 239, 0.08);
  --accent-line: rgba(105, 56, 239, 0.20);
  --focus-ring: 0 0 0 3px rgba(105, 56, 239, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

/* ----- Type ----- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.00;
  color: var(--ink);
}
h1 { font-size: clamp(40px, 7vw, 80px); letter-spacing: -2.4px; }
h2 { font-size: clamp(28px, 5vw, 54px); letter-spacing: -1.6px; }
h3 { font-size: clamp(20px, 3vw, 36px); letter-spacing: -0.96px; }
.section-title { font-size: 26px; font-weight: 500; letter-spacing: -0.72px; line-height: 1.10; }
.feature-title { font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -0.48px; line-height: 1.15; }
p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
em { color: var(--accent); font-style: italic; }

/* ----- Mono labels ----- */
.eyebrow, .brand-tag, .chip, .mono-label, .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kicker { color: var(--muted); display: inline-block; }

/* ----- Buttons ----- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease, opacity .12s ease;
  text-decoration: none;
  user-select: none;
}
.button:hover { transform: scale(1.06); }
.button:active { transform: scale(0.92); }
.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button.primary { background: #111111; color: #ffffff; border-color: #111111; }
.button.primary:hover:not(:disabled) { background: #1c1c1c; border-color: #1c1c1c; }
.button.primary.on-dark { background: var(--accent); border-color: var(--accent); }
.button.primary.on-dark:hover:not(:disabled) { background: #fff; color: #111; border-color: #fff; }
.button.secondary { background: transparent; color: #111111; border: 1px solid #111111; }
.button.secondary:hover:not(:disabled) { background: #111111; color: #ffffff; }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.button.ghost:hover:not(:disabled) { border-color: var(--ink); background: var(--surface); }
.button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.button.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.button.sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.button.xs { min-height: 28px; padding: 4px 10px; font-size: 12px; }

/* Icon-only button (delete, revoke, close) */
.icon-button {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px;
  background: #ffffff; color: var(--muted);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease, transform .12s ease;
}
.icon-button:hover { color: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.icon-button:active { transform: scale(0.92); }
.icon-button.danger { color: var(--danger); border-color: var(--danger-line); }
.icon-button.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.icon-button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ----- Inputs ----- */
/* `input[type="date"]` added in PR #241 — the API access tab's
   custom-expiry path renders one and it was inheriting browser
   defaults (no border, jumpy height) instead of the mcds rule
   below, looking off-brand next to the matching `<select>`.
   PR #242 — `min-height` swapped to explicit `height` and
   `box-sizing: border-box` added so inputs and selects render
   at IDENTICAL heights regardless of browser-default chrome.
   Pre-fix the LABEL input and the EXPIRES select on the API
   tab were ~2-3px off because select chrome adds a hair of
   internal padding on top of the rule's padding, putting the
   two fields off-baseline in the form-grid row. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="datetime-local"],
input[type="date"],
textarea, select {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* `textarea` is the one element where a fixed height makes no
   sense (it's a multi-line editor). Restore `auto` for it
   alone, with a sensible `min-height` so the field still looks
   intentional. */
textarea {
  height: auto;
  min-height: 88px;
}

/* Disable native chrome on `<select>` and supply a custom caret
   (PR #242 follow-up — the previous `height: 44px` fix didn't
   actually align selects with inputs because macOS browsers
   rasterize native select chrome at OS-native height regardless
   of CSS height. With `appearance: none` the select renders as
   a plain box with EXACTLY the rule's 44px height, matching
   sibling inputs in the same form-grid row. The custom caret
   replaces the native dropdown arrow that goes away with the
   appearance reset.
   Caret is an inline SVG data URI so it ships with the CSS
   itself — no extra HTTP request, no missing-asset risk on
   first paint. Right padding lifted to 36px to make room for
   the caret without overlapping the option text. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23606060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  cursor: pointer;
}
input:focus, textarea:focus, select:focus {
  border-color: #111111;
  box-shadow: var(--focus-ring);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface); color: var(--muted); cursor: not-allowed;
}
.field { display: grid; gap: 6px; }
.field label,
.field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-hint { font-size: 13px; color: var(--muted); line-height: 1.55; }
.field-error {
  font-size: 13px; color: var(--danger); line-height: 1.55;
  display: flex; align-items: flex-start; gap: 6px;
}
.field-error::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--danger); margin-top: 8px; flex-shrink: 0;
}
.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color: var(--danger);
}
.field.has-error input:focus { box-shadow: 0 0 0 3px rgba(196, 28, 28, 0.12); }
.field-group { display: grid; gap: 14px; }
.form-grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Checkbox */
.checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer; user-select: none;
}
.checkbox input[type="checkbox"] {
  width: 16px; height: 16px; min-height: 16px;
  accent-color: var(--accent);
  margin: 0; padding: 0;
}

/* ----- Cards ----- */
.card, .panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}
.card-pad { padding: 20px 24px; }
.card-pad-lg { padding: 28px 32px; }

/* ----- Status badges ----- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.status.deliverable   { background: var(--good-soft);    color: var(--good);    border-color: var(--good-line); }
.status.risky         { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn-line); }
.status.undeliverable { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-line); }
.status.unknown       { background: var(--unknown-soft); color: var(--unknown); border-color: var(--unknown-line); }
.status.processing    { background: var(--accent-soft);  color: var(--accent-dark); border-color: var(--accent-line); }
.status.active        { background: var(--good-soft);    color: var(--good);    border-color: var(--good-line); }
.status.queued        { background: var(--unknown-soft); color: var(--unknown); border-color: var(--unknown-line); }
.status.failed        { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-line); }
.status.cancelled     { background: var(--unknown-soft); color: var(--unknown); border-color: var(--unknown-line); }

/* ----- Chips ----- */
.chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(17,17,17,0.04); color: #111111; border: 1px solid var(--line);
}
.chip.good   { background: var(--good-soft);    color: var(--good);    border-color: var(--good-line); }
.chip.warn   { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn-line); }
.chip.danger,
.chip.bad    { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-line); }
.chip.admin  { background: rgba(105, 56, 239, 0.08); color: #6938ef; border-color: rgba(105, 56, 239, 0.22); }
.chip.pro    { background: var(--accent-soft);  color: var(--accent-dark); border-color: var(--accent-line); }
.chip.locked { background: rgba(17,17,17,0.06); color: var(--ink); border-color: var(--line-strong); }
.chip.info   { background: rgba(17,17,17,0.04); color: var(--ink); border-color: var(--line); }
.brand-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 4px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent-line);
  width: fit-content; justify-self: start;
}
.eyebrow {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(255, 86, 0, 0.4);
  width: fit-content;
}
.admin-scope .eyebrow { border-color: rgba(105, 56, 239, 0.4); }

/* ----- BANNERS (info / warn / danger / success) ----- */
.banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}
.banner-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
}
.banner-body { display: grid; gap: 4px; min-width: 0; }
.banner-title { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.banner-msg { font-size: 13px; color: var(--muted); line-height: 1.55; }
.banner-actions { display: inline-flex; gap: 8px; flex-shrink: 0; }
.banner.info    { background: rgba(17,17,17,0.02); border-color: var(--line); }
.banner.info    .banner-icon { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.banner.warn    { background: var(--warn-soft); border-color: var(--warn-line); }
.banner.warn    .banner-icon { background: #fff; color: var(--warn); border: 1px solid var(--warn-line); }
.banner.warning { background: var(--warn-soft); border-color: var(--warn-line); }
.banner.warning .banner-icon { background: #fff; color: var(--warn); border: 1px solid var(--warn-line); }
.banner.danger  { background: var(--danger-soft); border-color: var(--danger-line); }
.banner.danger  .banner-icon { background: #fff; color: var(--danger); border: 1px solid var(--danger-line); }
.banner.success { background: var(--good-soft); border-color: var(--good-line); }
.banner.success .banner-icon { background: #fff; color: var(--good); border: 1px solid var(--good-line); }

/* ----- TOASTS (fixed bottom-right, 4 tones, auto-dismiss) ----- */
.toast-region {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9000;
  pointer-events: none;
}
.toast {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 280px; max-width: 420px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-toast);
  animation: toast-in .22s ease-out both;
  pointer-events: auto;
}
/* tone accent via left border */
.toast.success { border-left: 3px solid var(--good);   }
.toast.warn,
.toast.warning { border-left: 3px solid var(--warn);   }
.toast.error,
.toast.danger  { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--ink);    }

/* inner layout from shell-ui.js output */
.toast-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.toast-title {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.toast.success .toast-title { color: var(--good); }
.toast.warn    .toast-title,
.toast.warning .toast-title { color: #b54708; }
.toast.error   .toast-title,
.toast.danger  .toast-title { color: var(--danger); }

.toast-message,
.toast-msg { font-size: 14px; color: var(--ink); line-height: 1.4; }

.toast-close {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 4px;
  font-size: 16px; line-height: 1;
}
.toast-close:hover { color: var(--ink); background: var(--surface); }

/* legacy dot (kept for backward compat) */
.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.toast.success .toast-dot { background: var(--good); }
.toast.warn    .toast-dot,
.toast.warning .toast-dot { background: var(--warn); }
.toast.error   .toast-dot,
.toast.danger  .toast-dot { background: var(--danger); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ----- MODALS ----- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, 0.45);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 70;
}
.modal {
  width: 100%; max-width: 520px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  padding: 28px 32px;
  display: grid; gap: 14px;
}
.modal.wide { max-width: 720px; }
.modal-head { display: grid; gap: 6px; }
.modal-head .tag { color: var(--accent); }
.admin-scope .modal-head .tag { color: #6938ef; }
.modal-title {
  font-size: 24px; font-weight: 500; letter-spacing: -0.6px; line-height: 1.1;
}
.modal-sub { font-size: 14px; color: var(--muted); line-height: 1.55; }
.modal-body { display: grid; gap: 12px; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 4px;
}
.modal-actions.spread { justify-content: space-between; }

/* ----- EMPTY STATES (pseudo-element illustration, no assets) ----- */
.empty {
  display: grid; place-items: center;
  gap: 14px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}
.empty::before {
  content: '';
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 26px, var(--line) 26px, var(--line) 30px, transparent 30px) no-repeat,
    linear-gradient(180deg, transparent 26px, var(--line) 26px, var(--line) 30px, transparent 30px) no-repeat,
    #ffffff;
  box-shadow: inset 0 0 0 1px rgba(222, 219, 214, 0.3);
}
.empty-title { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); line-height: 1.2; }
.empty-copy  { font-size: 14px; color: var(--muted); max-width: 44ch; line-height: 1.55; }
.empty-actions { display: inline-flex; gap: 10px; margin-top: 4px; }
.empty.inline { padding: 28px 20px; border-style: solid; }
.empty.inline::before { width: 40px; height: 40px; }

/* Empty variants with different pseudo glyphs (all CSS, no assets) */
.empty.variant-list::before {
  background:
    linear-gradient(#111, #111) no-repeat 10px 14px / 36px 1.5px,
    linear-gradient(#111, #111) no-repeat 10px 22px / 26px 1.5px,
    linear-gradient(#111, #111) no-repeat 10px 30px / 32px 1.5px,
    linear-gradient(#111, #111) no-repeat 10px 38px / 20px 1.5px,
    #ffffff;
}
.empty.variant-search::before {
  background:
    radial-gradient(circle at 22px 22px, transparent 10px, #111 10px, #111 11.5px, transparent 11.5px),
    linear-gradient(135deg, transparent 30px, #111 30px, #111 32px, transparent 32px),
    #ffffff;
  background-size: 100% 100%, 56px 56px;
  background-repeat: no-repeat;
}
.empty.variant-key::before {
  background:
    radial-gradient(circle at 20px 28px, transparent 8px, #111 8px, #111 9.5px, transparent 9.5px),
    linear-gradient(#111, #111) no-repeat 28px 27px / 18px 1.5px,
    linear-gradient(#111, #111) no-repeat 38px 27px / 1.5px 6px,
    linear-gradient(#111, #111) no-repeat 44px 27px / 1.5px 6px,
    #ffffff;
}

/* ----- PROGRESS STRIP (live/queued/processing/refining) ----- */
.progress-strip {
  display: grid; gap: 10px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.progress-strip-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink);
}
.progress-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: live-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.progress-title { font-weight: 500; letter-spacing: -0.01em; }
.progress-pct { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.progress-bar-track {
  height: 6px; width: 100%;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%; background: var(--ink);
  transition: width .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-bar-fill-live-ambient {
  width: 100%;
  background: linear-gradient(90deg, var(--surface) 0%, var(--accent) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: progress-ambient 1.8s linear infinite;
}
.progress-copy { font-size: 13px; color: var(--muted); line-height: 1.55; }

@keyframes live-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.35; transform: scale(0.6); }
}
@keyframes progress-ambient {
  from { background-position: 0% 0%; }
  to   { background-position: 200% 0%; }
}

/* ----- QUOTA METER (API usage, billing limits) ----- */
.quota-meter {
  display: grid; gap: 14px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.quota-meter.warning { border-color: var(--warn-line); background: var(--warn-soft); }
.quota-head {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start;
}
.quota-title { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.1; }
.quota-track {
  height: 6px; width: 100%;
  background: var(--surface);
  border-radius: 3px; overflow: hidden;
}
.quota-fill { height: 100%; background: var(--ink); transition: width .6s ease; }
.quota-meter.warning .quota-fill { background: var(--warn); }
.quota-meta-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.quota-meta-grid > div {
  display: grid; gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
}
.quota-meta-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.quota-foot { font-size: 13px; color: var(--muted); }

/* ----- DATA TABLE ----- */
.data-table-wrap {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  padding: 12px 18px;
  background: var(--panel-strong);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table thead th.sortable { cursor: pointer; user-select: none; }
.data-table thead th.sortable:hover { color: var(--ink); }
.data-table thead th .sort-arrow { opacity: 0.5; margin-left: 4px; }
.data-table thead th.sort-asc .sort-arrow,
.data-table thead th.sort-desc .sort-arrow { opacity: 1; color: var(--ink); }
.data-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--panel-strong); }
.data-table .col-mono { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.data-table .col-right { text-align: right; }
.data-table .col-truncate {
  max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ----- PAGINATION ----- */
.pager {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.pager-info { font-size: 13px; color: var(--muted); }
.pager-controls { display: inline-flex; gap: 6px; align-items: center; }
.pager-btn {
  min-width: 36px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #ffffff; color: var(--ink);
  font-size: 13px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pager-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--surface); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager-ellipsis { padding: 0 6px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }

/* ----- TABS ----- */
.tabs {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.tab {
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: 4px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tab:hover { color: var(--ink); }
.tab.active { background: #ffffff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* Underline tabs (for page-level sectioning) */
.tabs-underline {
  display: flex; gap: 0; padding: 0; background: transparent; border: 0;
  border-bottom: 1px solid var(--line);
}
.tabs-underline .tab {
  padding: 12px 18px; border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs-underline .tab.active {
  background: transparent; box-shadow: none;
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ----- SKELETON / SHIMMER ----- */
.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--surface) 0%, #eee8e0 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
  border-radius: 4px;
}
.skeleton.line { height: 14px; }
.skeleton.line-sm { height: 10px; }
.skeleton.line-lg { height: 20px; }
.skeleton.block { height: 120px; border-radius: 8px; }
.skeleton.circle { width: 32px; height: 32px; border-radius: 50%; }
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ----- FEATURE GATE / LOCKED CARD ----- */
.feature-gate {
  padding: 28px 32px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid; gap: 10px;
}
.feature-gate .brand-tag { margin-bottom: 4px; }
.feature-gate-title {
  font-size: 22px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.15;
  color: var(--ink);
}
.feature-gate-copy { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 56ch; }
.feature-gate-actions { display: inline-flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

/* ----- DROPDOWN / SELECT MENU (non-native, for richer options) ----- */
.dropdown {
  position: relative; display: inline-block;
}
.dropdown-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-toast);
  padding: 6px;
  display: grid; gap: 2px;
  z-index: 20;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 4px;
  font-size: 14px; color: var(--ink); cursor: pointer;
  border: 0; background: transparent; text-align: left; width: 100%;
}
.dropdown-item:hover { background: var(--surface); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* ----- TOOLTIP ----- */
.tip {
  position: relative; display: inline-block;
  border-bottom: 1px dotted var(--line-strong);
  cursor: help;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--ink); color: #ffffff;
  font-size: 12px; white-space: nowrap;
  border-radius: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
  z-index: 30;
}
.tip:hover::after, .tip:focus::after { opacity: 1; }

/* ----- FILTER BAR (inline filters above tables) ----- */
.filter-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.filter-bar .search {
  flex: 1 1 240px; min-height: 36px; padding: 8px 12px; font-size: 13px;
}
.filter-bar .chip-filter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--muted);
  font-size: 12px; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.filter-bar .chip-filter.active { color: var(--ink); border-color: var(--ink); background: var(--surface); }

/* ----- METRIC CARDS (summary grids) ----- */
.metric-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.metric-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  display: grid; gap: 8px;
  transition: border-color .12s ease, background .12s ease;
}
.metric-card.interactive { cursor: pointer; }
.metric-card.interactive:hover { border-color: var(--ink); background: var(--panel-strong); }
.metric-card.active { border-color: var(--ink); background: var(--panel-strong); }
.metric-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.metric-value {
  font-size: 40px; font-weight: 400; letter-spacing: -1.5px; line-height: 1;
  color: var(--ink);
}
.metric-value.good-value    { color: var(--good); }
.metric-value.warn-value    { color: var(--warn); }
.metric-value.danger-value  { color: var(--danger); }
.metric-value.unknown-value { color: var(--unknown); }
.metric-detail {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted);
}
.metric-detail-meta { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ----- SECTION HELPERS ----- */
.section-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 14px; flex-wrap: wrap;
}
.section-copy { color: var(--muted); font-size: 14px; max-width: 60ch; }
.stack { display: grid; gap: 14px; }
.stack-lg { display: grid; gap: 24px; }
.stack-xl { display: grid; gap: 40px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; }

/* ----- Utility ----- */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: 4px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-40 { margin-top: 40px; }
.u-muted { color: var(--muted); }
.u-ink   { color: var(--ink); }
.u-mono  { font-family: var(--font-mono); }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dashed divider */
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.hr-dashed { border: 0; border-top: 1px dashed var(--line); margin: 0; }

/* ===========================================================================
   Admin shell — single-purpose chrome for /admin and /admin/verify.
   Inherits ALL color/spacing/typography from the workspace tokens above.
   No separate admin-ui.css file by design — admin should look like the
   rest of MailCull, not a black-box console.
   =========================================================================== */

.admin-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
.admin-frame {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}
.admin-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.admin-brand .scope-pill {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}
.admin-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.admin-nav-item {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.12s ease, background 0.12s ease;
}
.admin-nav-item:hover { color: var(--ink); background: rgba(17, 17, 17, 0.04); }
.admin-nav-item.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
}
.admin-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.admin-user-name { font-weight: 500; color: var(--ink); }
.admin-body { padding: 0 0 48px; }

/* Compact user row in the Users tab. Hover hint that it's clickable
   (the [Manage] button is the actual action; the row itself isn't
   click-through, but the affordance helps scan-readability). */
.admin-user-list { display: flex; flex-direction: column; gap: 8px; }
.admin-user-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.12s ease;
}
.admin-user-row:hover { border-color: var(--line-strong); }
.admin-user-row-name { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.admin-user-row-name .muted-inline { font-weight: 400; color: var(--muted); font-size: 13px; }
.admin-user-row-meta { font-size: 13px; color: var(--muted); }
.admin-user-row-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-user-row-actions { display: flex; gap: 8px; }
@media (max-width: 720px) {
  .admin-user-row { grid-template-columns: 1fr; }
}

/* Manage user modal — light backdrop, white panel, workspace-style tabs */
body.admin-modal-open { overflow: hidden; }
.admin-modal-host { position: fixed; inset: 0; z-index: 1000; }
.admin-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  animation: adminModalFade 0.12s ease;
}
@keyframes adminModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.admin-modal {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(820px, 100%);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.18);
  display: flex;
  flex-direction: column;
}
.admin-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 20px 24px 12px;
  border-bottom: 1px solid var(--line);
}
.admin-modal-head .meta { color: var(--muted); font-size: 13px; }
.admin-modal-head .icon-button { font-size: 20px; line-height: 1; }
.admin-modal-nav {
  display: flex; gap: 4px; padding: 8px 24px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.admin-modal-nav-item {
  background: transparent; border: none;
  padding: 10px 14px;
  color: var(--muted); font-size: 14px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.admin-modal-nav-item:hover { color: var(--ink); }
.admin-modal-nav-item.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.admin-modal-body { padding: 20px 24px 24px; max-height: 70vh; overflow-y: auto; }

/* Section labels inside the modal — subtle, used for "Profile",
   "Security", "Plan history" etc. */
.admin-section-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.admin-stack-gap-sm > * + * { margin-top: 12px; }
.admin-stack-gap-sm { margin-top: 20px; }

/* Inline chips for status / plan / source etc. Picks up workspace .chip */
.chip.good { background: rgba(34, 162, 110, 0.12); color: #1f7a52; border-color: rgba(34, 162, 110, 0.3); }
.chip.warn { background: rgba(217, 119, 6, 0.12); color: #9a5b00; border-color: rgba(217, 119, 6, 0.3); }
.chip.danger { background: rgba(220, 38, 38, 0.10); color: #a8302d; border-color: rgba(220, 38, 38, 0.3); }

/* History strip used for plan changes, webhooks, transactions, sessions */
.admin-history-list { display: flex; flex-direction: column; gap: 8px; }
.admin-history-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(17, 17, 17, 0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.admin-history-item.danger {
  background: rgba(220, 38, 38, 0.04);
  border-color: rgba(220, 38, 38, 0.25);
}
.admin-history-item .muted-inline { color: var(--muted); }

/* QA + Health dashboard panels — small data-dense cards */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.admin-stat-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.admin-stat-value { font-size: 22px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.admin-stat-value.status-good { color: #1f7a52; }
.admin-stat-value.status-warn { color: #9a5b00; }
.admin-stat-value.status-danger { color: #a8302d; }

.admin-metric-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.admin-metric-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.admin-metric-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.admin-metric-meta { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* Pager for paginated lists */
.admin-pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; gap: 12px;
}