/* unomage_visibility_app — single stylesheet, no framework, no build step. */

:root {
  --bg: #0b0d10;
  --bg-raised: #12151a;
  --bg-card: #161a20;
  --border: #262b33;
  --text: #e9edf2;
  --text-muted: #9aa4b2;
  --text-faint: #7f8795;
  --accent: #5b8def;
  --accent-strong: #7ea6f7;
  --accent-contrast: #05070a;

  --grade-a: #2fae66;
  --grade-b: #7cb342;
  --grade-c: #d1a815;
  --grade-d: #e07b1a;
  --grade-f: #e0483a;

  --impact-critical: #e0483a;
  --impact-high: #e07b1a;
  --impact-medium: #d1a815;
  --impact-low: #6b7381;

  --radius: 10px;
  --max-width: 960px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* Nav/footer/button-styled links are already set apart from body copy by
   position and layout, not by color alone, so they keep no underline by
   default. Inline links inside paragraphs (breadcrumbs, footer note, FAQ
   answers, report footnotes, etc.) fall through to the underlined default
   above so they're not distinguishable by color alone (WCAG 1.4.1). */
.site-nav a,
.footer-links a,
.brand,
.share-btn {
  text-decoration: none;
}

h1,
h2,
h3 {
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
}

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  margin: 0 0 20px;
}

h2 {
  font-size: 1.5rem;
  margin: 48px 0 16px;
}

h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

p {
  margin: 0 0 16px;
  color: var(--text);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.code-block {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  overflow-x: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- form fields & buttons (global) ---------- */
/* One shared look for every text-like input, select, textarea and button
   sitewide, so a new form doesn't need to redeclare this. A form's own CSS
   should only ever add LAYOUT (flex sizing, spacing, alignment) on top of
   this — never color/border/radius/padding, which live here once. A
   different look is a class, not a per-form copy: `.btn-secondary` for a
   lower-emphasis action next to a primary button, `.btn-danger` for a
   destructive one; `.share-btn` and `.copy-snippet-btn` keep their own
   fully self-contained look for the same reason. */

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 20px;
  color: var(--text);
  font: inherit;
  resize: vertical;
  line-height: 1.2;
  height: 42px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder {
  color: var(--text-faint);
}

button {
  cursor: pointer;
  font: inherit;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  height: 42px;
}
button:hover {
  background: var(--accent-strong);
}

.btn-secondary {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
}
.btn-secondary:hover {
  background: var(--bg-card);
  border-color: var(--accent);
}

.btn-danger {
  background: transparent;
  color: var(--impact-critical);
  border: 1px solid var(--impact-critical);
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.btn-danger:hover {
  background: var(--impact-critical);
  color: #fff;
}

/* ---------- header / footer ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
}

.brand {
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
}
.brand:hover {
  text-decoration: none;
  color: var(--accent-strong);
}

.site-nav {
  display: flex;
  gap: 20px;
}
.site-nav a {
  color: var(--text-muted);
}
.site-nav a:hover {
  color: var(--text);
}
.site-nav a.lang-switch {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.85rem;
}
.site-nav a.lang-switch:hover {
  border-color: var(--accent-strong);
}

main {
  min-height: 60vh;
  padding: 40px 0 24px;
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 28px 0 40px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.site-footer .wrap > p {
  margin-bottom: 12px;
}
.footer-links a {
  color: var(--text-muted);
}
.footer-links span {
  color: var(--text-faint);
  padding: 0 4px;
}

/* ---------- hero / scan form ---------- */

.hero {
  padding-top: 8px;
  padding-bottom: 8px;
}

.hero .lede {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 720px;
}
.hero .lede-sub {
  font-size: 1rem;
  color: var(--text-faint);
}

.scan-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 10px;
}

.scan-form input {
  flex: 1 1 320px;
}

.scan-subhead {
  color: var(--text-faint);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.scan-progress {
  max-width: 480px;
  margin: 16px 0 8px;
}
.scan-progress-bar {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.scan-progress-fill {
  height: 100%;
  width: 5%;
  background: var(--accent);
  transition: width 0.4s ease;
}
.scan-progress-message {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.scan-error {
  color: var(--impact-critical);
  font-size: 0.9rem;
}

/* ---------- how it works / pillars ---------- */

.steps {
  padding-left: 1.2em;
}
.steps li {
  margin-bottom: 12px;
  color: var(--text-muted);
}
.steps li strong {
  color: var(--text);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.pillar-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 0;
}
.pillar-weight {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px !important;
}

.disclosure {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--bg-card);
}
.disclosure > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
}
.disclosure > summary::before {
  content: '+';
  flex: none;
  color: var(--accent-strong);
  font-weight: 700;
}
.disclosure[open] > summary::before {
  content: '\2212';
}
.disclosure p {
  margin: 14px 0 0;
  color: var(--text-muted);
}

.faq-preview-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.faq-preview-list li {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.faq-preview-list li:first-child {
  border-top: 1px solid var(--border);
}

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Default appearance for a bare `.badge` with no impact/grade modifier
     (e.g. admin's "Unsubscribed"/"Bounced"/source-label pills) — the
     modifier classes below override both of these via cascade order. */
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
}
/* Only critical/high issues get a solid, loud badge — those are the ones
   that actually need your attention first. Medium/low use a quiet outline
   instead of another saturated fill, so a long issue list doesn't read as
   ten equally-urgent alarms; visual weight now matches real priority. */
.badge-impact-critical { background: var(--impact-critical); color: #fff; }
.badge-impact-high { background: var(--impact-high); color: #1a0f00; }
.badge-impact-medium {
  background: transparent;
  border: 1px solid var(--impact-medium);
  color: var(--impact-medium);
}
.badge-impact-low {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.badge.grade-a { background: var(--grade-a); color: #fff; }
.badge.grade-b { background: var(--grade-b); color: #071500; }
.badge.grade-c { background: var(--grade-c); color: #1a1500; }
.badge.grade-d { background: var(--grade-d); color: #1a0f00; }
.badge.grade-f { background: var(--grade-f); color: #fff; }

/* ---------- report page ---------- */

.breadcrumbs {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}
.grade-badge.grade-a { background: var(--grade-a); }
.grade-badge.grade-b { background: var(--grade-b); color: #071500; }
.grade-badge.grade-c { background: var(--grade-c); color: #1a1500; }
.grade-badge.grade-d { background: var(--grade-d); }
.grade-badge.grade-f { background: var(--grade-f); }

.answer-first {
  font-size: 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--text);
}

.scanned-at {
  color: var(--text-faint);
  font-size: 0.9rem;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}

.share-toggle > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.share-toggle > summary::-webkit-details-marker {
  display: none;
}
.share-buttons {
  position: absolute;
  z-index: 10;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.share-btn {
  display: inline-block;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 400;
}
.share-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  text-decoration: none;
}

.pillar-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.pillar-score-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.pillar-score-value {
  font-size: 2rem;
  font-weight: 800;
  margin: 4px 0;
  color: var(--accent-strong);
}
.pillar-score-value.score-good  { color: #3fb950; }
.pillar-score-value.score-mid   { color: #d29922; }
.pillar-score-value.score-bad   { color: #f85149; }
a.pillar-score-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
a.pillar-score-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent)22;
}
.pillar-score-value .of-100 {
  font-size: 1rem;
  color: var(--text-faint);
  font-weight: 500;
}
.pillar-signal-counts {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin-bottom: 0;
}

.issue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}
.issue-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.issue-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.issue-head h3 {
  margin: 0;
  flex: 1 1 auto;
}
.issue-rank {
  color: var(--text-faint);
  font-weight: 700;
}
.issue-detail {
  color: var(--text-muted);
}

/* ---------- disclosure toggles (progressive disclosure) ---------- */
/* Native <details>/<summary>: content stays in the raw HTML either way, so
   crawlers see everything regardless of open/closed state — this is a
   visual-only decluttering affordance, not a content change. */

summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  content: '';
}

.fix-toggle {
  margin-top: 12px;
}
.fix-toggle > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.9rem;
}
.fix-toggle > summary::before {
  content: '\25B8';
  display: inline-block;
  transition: transform 0.15s ease;
}
.fix-toggle[open] > summary::before {
  transform: rotate(90deg);
}

.fix {
  margin: 14px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.fix dt {
  color: var(--text-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 10px;
}
.fix dt:first-child {
  margin-top: 0;
}
.fix dd {
  margin: 4px 0 0;
  color: var(--text);
}

.fail-explainer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 20px 0;
}

/* ---------- off-site AI knowledge signals ---------- */

.offsite-intro {
  color: var(--text-muted);
  max-width: 720px;
}

.offsite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.offsite-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.offsite-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.offsite-card-head h3 {
  margin: 0;
}
.offsite-blurb {
  color: var(--text-faint);
  font-size: 0.85rem;
}
.offsite-detail {
  color: var(--text-muted);
  margin-bottom: 0;
}
.offsite-link {
  margin: 10px 0 0;
}

/* Neutral badge treatment, distinct from the impact badges above — "not
   found" here is informational, not an issue to fix, so it gets a quiet
   outline rather than a warning color. */
.badge.offsite-found { background: var(--grade-a); color: #fff; }
.badge.offsite-not-found {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.badge.offsite-unknown {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-faint);
}

/* ---------- methodology ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.signal-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.signal-table th,
.signal-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.signal-table th {
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  background: var(--bg-raised);
}
.signal-table tr:last-child td {
  border-bottom: none;
}

.honesty-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--grade-c);
  border-radius: var(--radius);
  padding: 4px 20px 8px;
}

/* ---------- faq ---------- */

.faq-list {
  margin-top: 8px;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-item h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.faq-item p {
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ---------- removal ---------- */

.removal-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
  margin: 24px 0;
}
.removal-form label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 10px;
}
.removal-form button {
  margin-top: 14px;
  align-self: flex-start;
}

.removal-success {
  background: var(--bg-card);
  border: 1px solid var(--grade-a);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0;
}

.removal-footnote {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin-top: 28px;
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .grade-badge {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

/* ---------- F3: llms.txt spotlight card ---------- */

.llms-card {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid #7d8590;
  border-radius: var(--radius);
  padding: 10px 16px;
  margin: 12px 0 4px;
  font-size: 0.92rem;
}
.llms-card-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.llms-card-detail {
  color: var(--text-muted);
  line-height: 1.5;
}
.llms-card-link,
.llms-card-tip a {
  color: var(--accent-strong);
  text-decoration: none;
}
.llms-card-link:hover,
.llms-card-tip a:hover {
  text-decoration: underline;
}
.llms-card-tip {
  color: var(--text-faint);
}

/* ---------- F1: all-checks section ---------- */

.all-checks-section {
  margin-top: 32px;
}
.all-checks-partial-banner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--grade-c);
  border-radius: var(--radius);
  padding: 8px 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

/* Pillar accordions */
.pillar-accordion {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.pillar-accordion-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  flex-wrap: wrap;
}
.pillar-accordion-summary::-webkit-details-marker { display: none; }
.pillar-accordion-summary::before {
  content: '▶';
  font-size: 0.65rem;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.pillar-accordion[open] > .pillar-accordion-summary::before {
  transform: rotate(90deg);
}
.pillar-accordion-title {
  font-weight: 600;
  font-size: 0.97rem;
  flex: 1 1 auto;
}
.pillar-accordion-score {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.pillar-accordion-counts {
  font-size: 0.8rem;
  color: var(--text-faint);
  flex-shrink: 0;
}
.pillar-accordion-body {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}

/* Signal groups */
.signal-group {
  margin: 0 0 12px;
}
.signal-group:last-child {
  margin-bottom: 0;
}
.signal-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 2px 18px 6px;
  margin: 0;
}
.signal-group-pass .signal-group-label  { color: #3fb950; }
.signal-group-warn .signal-group-label  { color: #d29922; }
.signal-group-fail .signal-group-label  { color: #f85149; }
.signal-group-na   .signal-group-label  { color: #7d8590; }

/* Signal rows */
.signal-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 18px;
  font-size: 0.9rem;
}
.signal-row + .signal-row {
  border-top: 1px solid var(--border);
}
.signal-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  margin-top: 2px;
  font-size: 0.8rem;
}
.signal-row-pass .signal-icon { color: #3fb950; }
.signal-row-warn .signal-icon { color: #d29922; }
.signal-row-fail .signal-icon { color: #f85149; }
.signal-row-na   .signal-icon { color: #7d8590; }

.signal-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.signal-title {
  font-weight: 500;
  color: var(--text);
}
.signal-row-na .signal-title { color: var(--text-faint); }
.signal-detail {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.signal-row-na .signal-detail { color: var(--text-faint); }

/* ---------- F4: badge toggle ---------- */

.badge-toggle {
  display: inline-block;
}
.badge-toggle > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.badge-toggle > summary::-webkit-details-marker { display: none; }
.badge-toggle-body {
  position: absolute;
  z-index: 10;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 6px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.badge-preview-label,
.badge-snippet-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
.badge-snippet-label {
  margin-top: 14px;
}
.badge-toggle-body .code-block {
  font-size: 0.8rem;
  padding: 8px 12px;
  margin-bottom: 6px;
  white-space: pre-wrap;
  word-break: break-all;
}
.copy-snippet-btn {
  background: var(--bg-raised);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 4px;
}
.copy-snippet-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ---------- API docs ---------- */

.api-docs h2 {
  font-size: 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.api-section {
  margin-bottom: 40px;
}
.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 16px;
  overflow-x: auto;
  display: block;
}
.api-table th,
.api-table td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.api-table th {
  background: var(--bg-raised);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- admin ---------- */
/* Scoped under .admin-page (added to every admin/*.ts page's outer <section>).
   Field/button colors, radius, and padding come from the global rules above
   (input/select/textarea/button, .btn-secondary, .btn-danger) — this section
   only adds admin-specific LAYOUT: typography spacing, the toolbar/filter
   row, the domains table, pagination, and the card-style section wrappers. */

.admin-page h1 {
  margin-bottom: 0.25rem;
}

.admin-page h2 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.75rem;
}

.admin-page label {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.admin-login-page {
  max-width: 360px;
  margin: 4rem auto;
}
.admin-login-page form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.admin-filter-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.admin-filter-form > div {
  display: flex;
  flex-direction: column;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1rem 0;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.admin-table th {
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  background: var(--bg-raised);
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table a {
  color: var(--accent-strong);
}

.admin-pagination {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--text-muted);
}
.admin-pagination a {
  color: var(--accent-strong);
}

.admin-scan-section,
.admin-lead-info,
.admin-notes,
.admin-emails {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 1rem 0;
}

.admin-emails ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-emails li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin-email-slot {
  display: block;
  margin-bottom: 0.5rem;
  width: 100%;
  max-width: 400px;
}

.admin-notes textarea {
  width: 100%;
  max-width: 600px;
  display: block;
}
.admin-notes button {
  margin-top: 0.5rem;
}

/* ---------- account (customer signup/login/dashboard) ---------- */
/* Scoped under .account-page (added to every src/pages/account/*.ts page's
   outer <section>). Reuses the same global field/button rules and the
   .admin-table/.table-scroll/.admin-toolbar/.badge/.btn-danger/.btn-secondary
   classes admin pages already use — this section only adds the handful of
   things genuinely new to the account pages: the auth-form card width, the
   "key shown once" warning callout, and the success-flash paragraph. */

.account-page h1 {
  margin-bottom: 0.25rem;
}

.account-page h2 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.75rem;
}

.account-page label {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.account-auth-page {
  max-width: 360px;
  margin: 3rem auto;
}
.account-auth-page form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.account-form-hint {
  margin: -0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--text-faint);
}

.account-form-footer {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.account-success {
  color: var(--grade-a);
  font-size: 0.9rem;
}

.account-create-key-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  max-width: 480px;
}
.account-create-key-form input {
  flex: 1;
  min-width: 200px;
}

.account-revoke-form {
  display: inline;
}

.account-key-created-page {
  max-width: 560px;
  margin: 2rem auto;
}
.account-key-created-page .code-block {
  font-size: 0.95rem;
  word-break: break-all;
  white-space: pre-wrap;
}

.account-key-warning {
  background: var(--bg-card);
  border: 1px solid var(--impact-high);
  border-left: 4px solid var(--impact-high);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 1rem;
}