/* bundle chunk */
/* ══════════════════════════════════════════════════════════════════════════
   ENTERNO.IO — Design Tokens (single source of truth)

   Canonical token contract for public site, cabinet, and admin shell.
   All three stylesheets @import this file via:

   Public site (assets/css/main.css) and cabinet (assets/css/dashboard.css)
   inherit these values verbatim. Admin (admin/assets/admin.css) imports
   them and then redefines the subset where its visual rhythm differs
   (tighter --radius, cooler --muted, Bootstrap 5.3 --bs-* bridge).

   To add a new token:
     1. Decide if it belongs here (used in 2+ surfaces) or in a surface file
        (used in just one).
     2. Add to the appropriate group below.
     3. Run `npx @google/design.md lint DESIGN.md` to keep the contract honest.

   To rename a token: update tokens.css; grep replace across surfaces; run
   visual-diff against pre-rename screenshots before commit.

   Naming conventions (intentional, do not "fix"):
     --black-NN  — alpha as percent (NN/100). e.g. --black-25 = .25 alpha.
     --white-NNN — alpha as per-mille (NNN/1000). e.g. --white-015 = .015
                   alpha. Whites need finer granularity for subtle
                   surface elevation than blacks do.
     --fs-NN     — explicit pixel size (e.g. --fs-14 = 14px). Mixes with
                   the t-shirt scale (--fs-sm, --fs-base, --fs-md) by
                   design — t-shirt for body copy, pixel for fine UI.
     --border0/2/3 — opacity-stop scale (--border = default 6%, 0 = 4%
                   subtler, 2 = 10% bolder, 3 = 16% strongest).

   Source: extracted from assets/css/main.css :root block (2026-04-29 sprint
   "Cabinet Redesign + Tokens Foundation"). DESIGN.md remains authoritative
   for design decisions; this file is the runtime mirror.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Deep warm palette — charcoal with amber undertone */
  --bg:        #0c0e16;
  --surface:   #14171f;
  --surface2:  #1b1f2b;
  --surface3:  #252a39;
  --border:    rgba(255,255,255,.06);
  --border2:   rgba(255,255,255,.10);
  --border3:   rgba(255,255,255,.16);
  --border0:   rgba(255,255,255,.04);
  --border-mid: rgba(255,255,255,.08);

  /* Luminous accents — electric but warm */
  --accent:    #59a8ff;
  --accent2:   #9278f4;
  --accent-glow: var(--accent-glow-20);
  --accent-glow2: rgba(146,120,244,.16);
  --cyan:      #2dd4bf;
  --green:     #3dd68c;
  --yellow:    #f5c842;
  --orange:    #f59e42;
  --red:       #f47272;
  --white:     #fff;
  --danger:    #ef4444;
  --warn:      #f59e0b;

  /* Status semantic aliases */
  --status-pass:    var(--green);
  --status-warn:    var(--yellow);
  --status-fail:    var(--red);
  --status-info:    var(--accent);
  --status-pass-bg: rgba(61,214,140,.12);
  --status-warn-bg: rgba(245,200,66,.12);
  --status-fail-bg: rgba(244,114,114,.12);
  --status-info-bg: rgba(89,168,255,.12);
  --status-pass-border: rgba(61,214,140,.2);
  --status-fail-border: rgba(244,114,114,.2);
  --status-warn-border: rgba(245,200,66,.2);
  --success:        var(--green);

  /* Text — high-contrast warm whites */
  --text:      #f0f2f8;
  --text2:     #c5ccdf;
  --muted:     #8494ae;
  --muted2:    #8e9bb5;

  /* Type — refined stack */
  --mono:      'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --sans:      'Inter', system-ui, -apple-system, sans-serif;
  --fs-2xs:    .6875rem;  /* 11px — uppercase labels, counts */
  --fs-xs:     .75rem;    /* 12px — captions, tiny meta */
  --fs-sm:     .8125rem;  /* 13px — secondary text, table cells */
  --fs-14:     .875rem;   /* 14px — label text, notes */
  --fs-base:   .9375rem;  /* 15px — body text */
  --fs-md:     1.0625rem; /* 17px — emphasized body */
  --fs-lg:     1.375rem;
  --fs-xl:     1.75rem;
  --fs-2xl:    2.125rem;
  --fs-3xl:    2.75rem;

  /* Shape — slightly tighter radii for precision */
  --radius:    12px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 14px;
  --radius-pill: 100px;

  /* Timing — polished curves */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --dur:         .18s;
  --dur-slow:    .32s;
  --dur-slower:  .48s;

  /* Glass */
  --glass-bg:    rgba(20, 23, 31, .52);
  --glass-blur:  blur(24px) saturate(1.25);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,.05);
  --glass-glow:  inset 0 0 60px var(--accent-glow-06);

  /* Overlay backgrounds — nav, dropdowns, mobile menu */
  --bg-topbar:    rgba(12, 14, 22, .82);
  --bg-dropdown:  rgba(20, 23, 31, .95);
  --bg-overlay:   rgba(20, 23, 31, .97);

  /* Spacing scale (4px base, 8px rhythm) */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;

  /* Component spacing semantics — promoted from admin (2026-04-29 sprint) */
  --space-card:   24px;     /* card body padding, section padding */
  --space-stack:  20px;     /* vertical gap between stacked cards */
  --space-inline: 12px;     /* horizontal gap between inline siblings */
  --space-tight:  8px;      /* tight gaps (icon→label, helper text) */

  /* Badge semantic shorthand */
  --badge-padding-md: 3px var(--space-2-5);             /* 3px 10px — standard chip */
  --badge-padding:    var(--space-0-5) var(--space-2-5); /* 2px 10px */
  --badge-padding-sm: var(--space-0-5) var(--space-2);   /* 2px 8px  */

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,.18);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.22);
  --shadow-xl:  0 20px 56px rgba(0,0,0,.3);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Black alpha tokens — use in box-shadow and overlay backgrounds */
  --black-10:  rgba(0,0,0,.1);
  --black-12:  rgba(0,0,0,.12);
  --black-14:  rgba(0,0,0,.14);
  --black-15:  rgba(0,0,0,.15);
  --black-16:  rgba(0,0,0,.16);
  --black-18:  rgba(0,0,0,.18);
  --black-20:  rgba(0,0,0,.2);
  --black-22:  rgba(0,0,0,.22);
  --black-25:  rgba(0,0,0,.25);
  --black-30:  rgba(0,0,0,.3);
  --black-35:  rgba(0,0,0,.35);
  --black-40:  rgba(0,0,0,.4);
  --black-50:  rgba(0,0,0,.5);
  --black-55:  rgba(0,0,0,.55);
  --black-60:  rgba(0,0,0,.6);
  --black-65:  rgba(0,0,0,.65);
  --black-70:  rgba(0,0,0,.7);

  /* White alpha tokens — use in table stripes and subtle highlights */
  --white-012: rgba(255,255,255,.012);
  --white-015: rgba(255,255,255,.015);
  --white-02:  rgba(255,255,255,.02);

  /* Info blue — accent for informational UI blocks */
  --info:       #3b82f6;
  --info-06:    rgba(59,130,246,.06);
  --info-20:    rgba(59,130,246,.2);
  /* Cyan alpha tokens — AI-first accents (2026-07-16 render polish) */
  --cyan-glow-08: rgba(45,212,191,.08);
  --cyan-glow-12: rgba(45,212,191,.12);
  --cyan-glow-30: rgba(45,212,191,.30);
  --cyan-glow-40: rgba(45,212,191,.40);
  /* Telegram brand — канал @enterno_io, промо-блоки блога (2026-07-16) */
  --telegram:         #2aabee;
  --telegram-deep:    #1e96d1;
  --telegram-dark:    #156ea6;
  --telegram-glow-12: rgba(42,171,238,.12);
  --telegram-glow-30: rgba(42,171,238,.30);
  --accent-glow-06: rgba(89,168,255,.06);
  --accent-glow-08: rgba(89,168,255,.08);
  --accent-glow-10: rgba(89,168,255,.10);
  --accent-glow-12: rgba(89,168,255,.12);
  --accent-glow-15: rgba(89,168,255,.15);
  --accent-glow-20: rgba(89,168,255,.20);
  --accent-glow-25: rgba(89,168,255,.25);
  --accent-glow-30: rgba(89,168,255,.30);

  /* ── Swagger UI semantic colors (для assets/css/swagger.css) ─── */
  --swagger-get:      #49cc90;
  --swagger-post:     #61affe;
  --swagger-put:      #fca130;
  --swagger-delete:   #f93e3e;
  --swagger-patch:    #50e3c2;
  --swagger-head:     #9012fe;
  --swagger-options:  #0d5aa7;

  /* Z-index scale */
  --z-base:          1;
  --z-mobile:       99;
  --z-sticky:      100;
  --z-dropdown:    110;
  --z-modal:       200;
  --z-toast:       300;
  --z-tooltip:     400;
  --z-tour-backdrop: 500;
  --z-tour-highlight: 510;
  --z-tour-tooltip: 520;
  --z-tour-end:    530;
  --z-top:         600;
  --z-skip:       9999;

  /* Content widths */
  --content-width: 1100px;

  /* Component tokens */
  --card-padding: 28px 32px;
  --card-padding-mobile: 20px 16px;
  --content-narrow: 800px;
  --content-wide: 1320px;
}

/*
 * Global reduced-motion fallback — site-wide nuke of animations &
 * transitions for visitors who set the OS-level "Reduce motion"
 * preference (vestibular disorders, motion sickness, distraction
 * sensitivity).
 *
 * Applies to every stylesheet that loads tokens.css (which is
 * everything via _head.php). Per-file overrides can opt back in by
 * raising specificity, but they should rarely need to.
 *
 * The 0.01ms (vs 0s) is deliberate: keeps `animationend` /
 * `transitionend` events firing so JS handlers that depend on them
 * still trigger their callbacks. A flat 0s would silently break
 * those handlers on assistive-tech users.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* bundle chunk */
/* ── Self-hosted Fonts (ФЗ-152 compliance) ───────────────────────────── */

/* Inter — cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter — cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  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;
}

/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jbmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* JetBrains Mono — latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jbmono-latin.woff2') format('woff2');
  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;
}


/* bundle chunk */
/* ══════════════════════════════════════════════════════════════════════════
   ENTERNO.IO — Design System v6
   "Deep Ember" — warm obsidian depths, liquid glass, precision-crafted light
   ══════════════════════════════════════════════════════════════════════════ */

/* Design tokens live in tokens.css and are imported here so every public-side
   stylesheet gets them (cabinet/dashboard.css inherits via the same cascade).
   Per-surface overrides go *after* this @import in their own files; admin
   inherits via /assets/css/tokens.css and overrides what its visual rhythm
   needs (tighter --radius, cooler --muted, Bootstrap --bs-* bridge).
   See assets/css/tokens.css for the full contract. */

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a, a:visited { cursor: pointer; }
p a:visited,
.tool-desc a:visited,
.card-text a:visited,
.llms-faq-a a:visited,
.llms-feature-card p a:visited,
.llms-edu-header p a:visited,
.llms-practice-item span a:visited,
.llms-mistake-item span a:visited,
.check-detail a:visited,
.article-body a:visited { color: var(--accent2); }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* 2026-04-29 mobile horizontal-scroll fix (Yandex Webmaster flagged 50+
 * pages). overflow-x:hidden on html alone wasn't enough — Yandex's
 * mobile check detects layout overflow even when scrollbar is clipped.
 * Adding body-level guard + targeted fixes to the actual offenders below.
 */
body { overflow-x: clip; }

/* ── Body + atmosphere ────────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .005em;
}
/* Subtle noise grain — barely perceptible */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.008'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}
/* Ambient gradient orbs — refined & warm */
body::after {
  content: '';
  position: fixed;
  top: -25vh; left: 50%; transform: translateX(-50%);
  width: 90vw; height: 50vh;
  background:
    radial-gradient(ellipse at 30% 40%, var(--accent-glow-06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, var(--border0) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

/* ── Accessibility ────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only--focusable:focus {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-skip);
  padding: 8px 16px; background: var(--surface2); color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm); font-size: var(--fs-sm);
  clip: auto; width: auto; height: auto; overflow: visible;
  white-space: nowrap;
}

.is-hidden { display: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px 0;
}
/* Shared `.container` used by account pages (status-settings, rum, upgrade,
   pricing, team, api-docs, swagger). Previously unstyled → content flushed
   to page edges and form inputs hung outside their cards. */
.container {
  position: relative;
  z-index: 1;
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: 24px 24px 48px;
}
@media (max-width: 768px) {
  .container { padding: 16px 16px 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL COMPONENTS — Buttons, Inputs, Labels, Badges, Alerts, Tables
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn,
.btn:link,
.btn:visited {
  /* 2026-05-21 fix: `<a class="btn ...">` links to /register etc were
     rendering with browser-default a:visited purple/pink color after
     the user visited the destination once. CSS `color: var(--text)`
     on .btn-primary alone is NOT enough — browsers honour :visited
     state with their own colour unless the rule explicitly covers
     :visited. Same applies to :link (some Firefox builds). */
  color: var(--text);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 28px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .01em;
  transition:
    background var(--dur) var(--ease-smooth),
    border-color var(--dur) var(--ease-smooth),
    box-shadow var(--dur-slow) var(--ease-smooth),
    transform var(--dur) var(--ease-spring),
    color var(--dur) var(--ease-smooth);
}
.btn:hover { transform: translateY(-1px) scale(1.02); }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}
.btn.is-hidden { display: none; }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 20px var(--accent-glow);
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  background: linear-gradient(135deg, var(--cyan, #22d3ee) 0%, var(--accent) 50%, var(--accent2) 100%);
  color: var(--white);
  border-color: transparent;
  border-radius: var(--radius);
  box-shadow:
    0 2px 14px rgba(34,211,238,.20),
    0 2px 8px rgba(89,168,255,.18),
    0 1px 3px var(--black-25);
}
.btn-primary:hover {
  box-shadow:
    0 6px 28px rgba(34,211,238,.28),
    0 4px 16px rgba(89,168,255,.24),
    0 2px 6px var(--black-15);
}
.btn-primary.is-hidden { display: none; }

.btn-primary:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 24px var(--accent-glow-30);
}

.btn-secondary {
  background: var(--surface2);
  color: var(--text2);
  border-color: var(--border2);
}
.btn-secondary:hover {
  background: var(--surface3);
  border-color: var(--border3);
  color: var(--text);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent-glow-25);
}
.btn-outline:hover {
  background: var(--accent-glow-08);
  border-color: var(--accent-glow-30);
  box-shadow: 0 0 18px var(--accent-glow-08);
}

/* Disabled state with visible border + muted fill so the button reads as a
   state badge rather than a broken control (used for 'Current plan' /
   'Текущий тариф' on the upgrade grid). */
.btn-disabled {
  opacity: .7;
  pointer-events: none;
  cursor: not-allowed;
  background: var(--surface2);
  color: var(--muted2);
  border: 1px solid var(--border2);
  text-transform: none;
  box-shadow: none;
}
.btn-danger {
  background: var(--status-fail-bg);
  color: var(--red);
  border-color: var(--status-fail-border);
}
.btn-danger:hover {
  background: var(--status-fail-bg);
  border-color: var(--status-fail-border);
  box-shadow: 0 0 0 3px var(--status-fail-bg);
}

.btn-danger-outline {
  background: transparent;
  color: var(--red);
  border-color: var(--status-fail-border);
}
.btn-danger-outline:hover {
  background: var(--status-fail-bg);
  border-color: var(--status-fail-border);
}

.btn-sm {
  padding: 8px 16px;
  min-height: 44px /* WCAG 2.5.5 */;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
}
.btn-xs {
  padding: 4px 10px;
  min-height: 28px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-xs);
}
.btn-icon {
  padding: 0;
  width: 32px; height: 32px;
  min-height: unset;
  border-radius: var(--radius-sm);
  /* Match surrounding dark theme — the default system-button style
     (which was leaking through for data-action="toggle-key" etc.)
     showed white boxes around emoji glyphs. Force transparent bg +
     muted border + stroke-based icons for consistency. */
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-icon:hover {
  background: var(--accent-glow-08);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-icon svg { display: block; }
.btn-ghost {
  background: var(--surface2);
  color: var(--muted2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
}
.btn-ghost:hover {
  background: var(--accent-glow-08);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.btn-md {
  padding: 10px 24px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}
.btn-lg {
  padding: 12px 32px;
  font-size: var(--fs-base);
  border-radius: var(--radius-md);
  min-height: 48px;
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 12px 16px;
  min-height: 46px;
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    border-color var(--dur) var(--ease-smooth),
    box-shadow var(--dur-slow) var(--ease-smooth),
    background var(--dur) var(--ease-smooth);
  line-height: 1.5;
  letter-spacing: .005em;
}
.input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
  border-color: var(--border3);
  background: var(--surface3);
}
.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 28px var(--accent-glow-06);
  background: var(--surface);
}
.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.input-sm {
  padding: 8px 12px;
  min-height: 36px;
  font-size: var(--fs-sm);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238e9bb5' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted2);
  margin-bottom: 6px;
  letter-spacing: .015em;
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: .02em;
  line-height: 1.4;
}
.badge-accent {
  background: var(--accent-glow-08);
  color: var(--accent);
  border: 1px solid var(--accent-glow-20);
}
.badge-green {
  background: var(--status-pass-bg);
  color: var(--green);
  border: 1px solid var(--status-pass-border);
}
.badge-red {
  background: var(--status-fail-bg);
  color: var(--red);
  border: 1px solid var(--status-fail-border);
}
.badge-yellow {
  background: var(--status-warn-bg);
  color: var(--yellow);
  border: 1px solid var(--status-warn-border);
}
.badge-purple {
  background: var(--accent-glow-08);
  color: var(--accent2);
  border: 1px solid var(--accent-glow-20);
}
.badge-cyan {
  background: var(--accent-glow-08);
  color: var(--cyan);
  border: 1px solid var(--accent-glow-20);
}

/* ── Alerts ───────────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
}
.alert-info {
  background: var(--accent-glow-06);
  border-color: var(--accent-glow-20);
  color: var(--accent);
}
.alert-success {
  background: var(--status-pass-bg);
  border-color: var(--status-pass-bg);
  color: var(--green);
}
.alert-warning {
  background: var(--status-warn-bg);
  border-color: var(--status-warn-bg);
  color: var(--yellow);
}
.alert-error,
.alert-danger {
  background: var(--status-fail-bg);
  border-color: var(--status-fail-bg);
  color: var(--red);
}

/* ── Spinner ──────────────────────────────────────────────────────────── */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
.spinner-center { margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--space-9) var(--space-6);
  color: var(--muted);
}
.empty-state__icon { font-size: 2.5rem; margin-bottom: var(--space-4); opacity: .5; }
.empty-state__title {
  font-size: var(--fs-md); font-weight: 600; color: var(--text2);
  margin-bottom: var(--space-2);
}
.empty-state__desc { font-size: var(--fs-sm); max-width: 360px; margin: 0 auto var(--space-5); line-height: 1.6; }
.empty-state__action { display: inline-flex; }

/* ── Dashboard widget empty state (P5.A.8 audit 2026-05-04) ──────────
   Compact variant for in-widget empty states — recent-incidents,
   uptime-heatmap, and similar widgets that previously vanished
   when no data. Renders skeleton + value-positive copy so layout
   stays stable across visits. The .--positive variant is for
   "no incidents — sites healthy" type messages (green accent). */
.dash-empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--muted);
}
.dash-empty-state__icon {
  font-size: 32px;
  margin-bottom: var(--space-2);
  opacity: 0.55;
}
.dash-empty-state__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}
.dash-empty-state__text {
  font-size: var(--fs-xs);
  max-width: 320px;
  margin: 0 auto var(--space-3);
  line-height: 1.5;
}
.dash-empty-state__cta {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-xs);
  transition: background var(--dur) var(--ease-smooth), color var(--dur) var(--ease-smooth);
}
.dash-empty-state__cta:hover {
  background: var(--accent);
  color: var(--surface);
}
.dash-empty-state--positive .dash-empty-state__icon {
  color: var(--green);
  opacity: 0.85;
}
.dash-empty-state--positive .dash-empty-state__title {
  color: var(--green);
}

/* ── Tool quota tier with per-tool breakdown (P5.A.11 audit 2026-05-04)
   Native <details> wrapper. <summary> retains the existing aggregate
   row (label + count + bar). Expanded body lists per-tool used/limit. */
.dash-limit-item--tool {
  /* Inherits .dash-limit-item base (background, padding, radius). */
}
.dash-limit-summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}
.dash-limit-summary::-webkit-details-marker {
  display: none;
}
.dash-limit-summary::marker {
  display: none;
}
.dash-limit-summary::after {
  content: '▾';
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  font-size: 10px;
  color: var(--muted);
  transition: transform var(--dur) var(--ease-smooth);
}
.dash-limit-item--tool[open] > .dash-limit-summary::after {
  transform: rotate(180deg);
}
.dash-limit-item--tool {
  position: relative;
}

.dash-limit-tools {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  list-style: none;
  border-top: 1px solid var(--border-mid);
}
.dash-limit-tool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) 0;
  font-size: var(--fs-xs);
  color: var(--muted2);
}
.dash-limit-tool__name {
  font-family: var(--mono);
}
.dash-limit-tool__count {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.dash-limit-tool--mid {
  color: var(--warn);
}
.dash-limit-tool--mid .dash-limit-tool__count {
  color: var(--warn);
  font-weight: 600;
}
.dash-limit-tool--high {
  color: var(--danger);
}
.dash-limit-tool--high .dash-limit-tool__count {
  color: var(--danger);
  font-weight: 700;
}

/* ── AI recommendations context line (P5.C.13 audit 2026-05-04) ──────
   One-liner above the AI-rec output explaining what data the
   recommendations are computed from. Helps users calibrate trust:
   the audit's principle "users trust AI suggestions exactly as much
   as they understand the input." */
.dash-rec-context {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface3);
  border-radius: var(--radius-xs);
  border-left: 2px solid var(--accent);
}
.dash-rec-context__icon {
  flex: 0 0 auto;
  color: var(--accent);
  font-style: normal;
  line-height: 1.4;
}
.dash-rec-context__text {
  flex: 1 1 auto;
  line-height: 1.5;
}

/* Hero variant — used on /monitors when user has 0 monitors.
 * Larger padding + visible CTA button + quick-add example chips. */
.empty-state--hero { padding: var(--space-10) var(--space-6) var(--space-9); }
.empty-state--hero .empty-state__icon { font-size: 3rem; opacity: .7; }
.empty-state--hero .empty-state__title { font-size: var(--fs-xl); }
.empty-state--hero .empty-state__desc { max-width: 520px; }
.mon-empty-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; font-size: var(--fs-md); font-weight: 600;
}
.mon-empty-cta-btn i { font-size: 1.15em; }
.mon-empty-examples {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px dashed var(--border2);
}
.mon-empty-examples__label {
  font-size: var(--fs-xs); color: var(--muted2);
  margin-bottom: var(--space-3); text-transform: uppercase;
  letter-spacing: .05em;
}
.mon-empty-examples__chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
}
.mon-empty-examples__chips .chip {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); padding: 6px 14px; border-radius: 999px;
  font-size: var(--fs-sm); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mon-empty-examples__chips .chip:hover {
  border-color: var(--accent); background: var(--accent-glow-08);
  color: var(--accent);
}

/* ── Toast notification ──────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius); box-shadow: var(--shadow-xl);
  font-size: var(--fs-sm); color: var(--text2);
  z-index: var(--z-toast); max-width: 420px;
  animation: toastSlideIn .3s var(--ease-out);
}
.toast--success { border-color: var(--status-pass-border); }
.toast--error   { border-color: var(--status-fail-border); }
.toast__close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: var(--space-1); font-size: 1.1rem;
}
.toast__close:hover { color: var(--text); }
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .toast { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: none; }
}

/* ── Chip (toggle button) ────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 600;
  font-family: var(--mono);
  color: var(--muted2);
  background: var(--surface2);
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: all .2s var(--ease-smooth);
  user-select: none;
}
.chip input { display: none; }
.chip:hover { border-color: var(--accent-glow-25); color: var(--text); }
.chip.is-active, .chip--active {
  color: var(--accent);
  background: var(--accent-glow-10);
  border-color: var(--accent-glow-25);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-weight: 600;
  color: var(--muted2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--surface);
  border-bottom-color: var(--border2);
}
.table td {
  color: var(--text2);
}
.table tbody tr {
  transition: background var(--dur) var(--ease-smooth);
}
.table tbody tr:hover {
  background: var(--white-02);
}
.table-striped tbody tr:nth-child(even) {
  background: var(--white-012);
}
.table-striped tbody tr:nth-child(even):hover {
  background: var(--border0);
}

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR — spacious single-row navigation (60px)
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-topbar);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.top-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-topbar);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 60px;
  gap: 6px;
}

/* Logo — refined */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 8px;
}
.logo-icon {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
  box-shadow: 0 2px 14px var(--accent-glow-25);
  transition: box-shadow var(--dur-slow) var(--ease-smooth), transform var(--dur) var(--ease-spring);
}
.logo:hover .logo-icon {
  box-shadow: 0 4px 24px var(--accent-glow-30);
  transform: scale(1.05);
}
.logo-img {
  width: 34px;
  height: 34px;
  display: block;
  transition: transform var(--dur) var(--ease-spring), filter var(--dur) var(--ease-smooth);
  filter: drop-shadow(0 2px 10px var(--accent-glow-25));
}
.logo:hover .logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 3px 16px var(--accent-glow-30));
}
.logo-group { display: flex; flex-direction: column; }
.logo-text {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
  line-height: 1;
}
.logo-text span { color: var(--accent); }
.logo-tagline { display: none; }

/* Tool links inline */
.topbar-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topbar-tool {
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    color var(--dur) var(--ease-smooth),
    background var(--dur) var(--ease-smooth);
  white-space: nowrap;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  line-height: 1.2;
}
.topbar-tool:hover {
  color: var(--text);
  background: var(--border);
}
.topbar-tool.is-active {
  color: var(--accent);
  background: var(--accent-glow-08);
}

/* More dropdown */
.topbar-more { position: relative; }
.topbar-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.topbar-more-arrow {
  font-size: var(--fs-2xs);
  opacity: .5;
  transition: transform .2s var(--ease-out);
}
.topbar-more.open .topbar-more-arrow {
  transform: rotate(180deg);
}
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 230px;
  background: var(--bg-dropdown);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow:
    0 20px 56px var(--black-50),
    0 4px 12px var(--black-20),
    var(--glass-inner);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .2s var(--ease-smooth),
    transform .25s var(--ease-out);
  z-index: var(--z-dropdown);
}
.topbar-more.open .topbar-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.topbar-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all .15s var(--ease-smooth);
  white-space: nowrap;
}
.topbar-drop-item:hover {
  color: var(--text);
  background: var(--border);
}
.topbar-drop-item.is-active {
  color: var(--accent);
  background: var(--accent-glow-08);
}
.topbar-drop-icon {
  font-size: var(--fs-base);
  opacity: .5;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-drop-item.is-active .topbar-drop-icon { opacity: 1; }

/* "All Tools" entrypoint — emphasised end-of-dropdown link to /tools
 * catalogue. Distinct from regular drop items so the eye finds it
 * after scanning the per-category list. */
.topbar-drop-item--all {
  color: var(--text);
  background: var(--accent-glow-08);
  margin-top: 2px;
}
.topbar-drop-item--all:hover {
  background: var(--accent-glow-12);
}
.topbar-drop-item--all strong { font-weight: 600; }

/* Plan-required badge shown next to gated nav/menu items */
.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
  flex-shrink: 0;
}
.nav-badge--starter { background: rgba(148,163,184,.15); color: var(--muted2, #94a3b8); border: 1px solid rgba(148,163,184,.3); }
.nav-badge--pro     { background: rgba(91,138,248,.12);  color: var(--accent, #5b8af8); border: 1px solid rgba(91,138,248,.3); }
.nav-badge--business{ background: rgba(124,96,245,.12);  color: var(--accent2, #7c60f5); border: 1px solid rgba(124,96,245,.3); }
.mobile-menu-links a .nav-badge { float: right; margin-top: 2px; }

/* ── Lucide SVG icon system ──────────────────────────────────── */
.nav-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.nav-icon--chevron {
  width: 14px;
  height: 14px;
  opacity: .6;
  transition: transform var(--dur) var(--ease-smooth);
}
.topbar-group-btn[aria-expanded="true"] .nav-icon--chevron {
  transform: rotate(180deg);
}
.nav-icon--logo {
  width: 16px;
  height: 16px;
  stroke: var(--white);
  fill: none;
}
.topbar-drop-sep {
  height: 1px;
  background: var(--border2);
  margin: 4px 10px;
}

/* Actions */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}
.topbar-link {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    color var(--dur) var(--ease-smooth),
    background var(--dur) var(--ease-smooth);
}
.topbar-link:hover {
  color: var(--text);
  background: var(--border);
}
.topbar-link.is-active { color: var(--accent); }

/* Topbar search button — opens SiteSearch (Ctrl+K) modal */
.topbar-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 10px;
  background: var(--surface2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--radius-sm, 7px);
  color: var(--muted2);
  cursor: pointer;
  font-family: inherit;
  transition:
    color var(--dur) var(--ease-smooth),
    background var(--dur) var(--ease-smooth),
    border-color var(--dur) var(--ease-smooth);
}
.topbar-search-btn:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--accent);
}
.topbar-search-btn svg { flex-shrink: 0; }
.topbar-search-kbd {
  font-family: var(--mono, ui-monospace);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2, rgba(255,255,255,.1));
  color: var(--muted);
  line-height: 1;
}
@media (max-width: 900px) {
  .topbar-search-btn .topbar-search-kbd { display: none; }
}

/* Auth button */
.topbar-auth {
  padding: 8px 18px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent-glow-20);
  border-radius: var(--radius-sm);
  background: var(--accent-glow-06);
  transition: all var(--dur) var(--ease-smooth);
  white-space: nowrap;
}
.topbar-auth:hover {
  background: var(--accent-glow-12);
  border-color: var(--accent-glow-30);
  box-shadow: 0 2px 18px var(--accent-glow-20);
  transform: translateY(-1px);
}
.topbar-auth.is-active {
  background: var(--accent-glow-15);
  border-color: var(--accent-glow-30);
}

/* Burger (mobile) */
.topbar-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 11px;
  margin-left: auto;
  transition:
    border-color var(--dur) var(--ease-smooth),
    background var(--dur) var(--ease-smooth);
}
.topbar-burger:hover {
  border-color: var(--border3);
  background: var(--border0);
}
.topbar-burger span {
  display: block; width: 100%; height: 2px;
  background: var(--muted2); border-radius: 2px;
  transition: all .3s var(--ease-out);
}
.topbar-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.topbar-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE MENU
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  z-index: var(--z-mobile);
  background: var(--bg-overlay);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--border2);
  padding: 12px 20px 16px;
  transform: translateY(-10px);
  opacity: 0;
  transition:
    transform .3s var(--ease-out),
    opacity .25s var(--ease-smooth);
  pointer-events: none;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--muted2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all .2s var(--ease-smooth);
  min-height: 44px;
}
.mobile-menu-links a:hover,
.mobile-menu-links a.is-active {
  color: var(--text);
  background: var(--surface2);
}
.mobile-menu-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 16px 4px;
  display: inline-block;
}
.mobile-menu-divider {
  height: 1px;
  background: var(--border2);
  margin: 8px 0;
}

/* ── Mobile menu — command-palette redesign (2026-07-16, variant C) ──
   Terminal/DevOps-console tone: mono command search with `>` prompt,
   «Популярные» quick rows, compact category accordion (icon tile +
   sentence-case label + mono [n] badge), all-tools row, trust chips.
   Native <details> = no JS for expand/collapse, keyboard + screen-
   reader accessible by default; live filter in global.js unchanged. */

/* Command-style search */
.mobile-menu-cmd {
  position: relative;
  margin: 10px 4px 8px;
}
.mobile-menu-cmd__prompt {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent);
  pointer-events: none;
}
/* .mobile-menu-cmd parent bumps specificity to (0,2,0) — the global
   forms rule `input[type="search"]` (0,1,1) otherwise wins padding/font */
.mobile-menu-cmd .mobile-menu-search {
  width: 100%;
  margin: 0;
  padding: 11px 14px 11px 34px;
  /* 16px mono — ≥16px prevents iOS focus auto-zoom */
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  outline: none;
  caret-color: var(--accent);
}
.mobile-menu-cmd .mobile-menu-search::placeholder { color: var(--muted); }
.mobile-menu-cmd .mobile-menu-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow-15);
}

/* Section eyebrow — mono uppercase micro-label with status dot */
.mobile-menu-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 8px 6px;
}
.mobile-menu-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green-glow-60, rgba(61,214,140,.6));
}

/* «Популярные» quick rows */
.mobile-menu-popular {
  padding-bottom: 4px;
}
.mobile-menu-popular__item {
  padding: 10px 8px;
}
.mobile-menu-popular__item .nav-icon { color: var(--cyan); flex: none; }
.mobile-menu-popular__name { flex: 1; }
.mobile-menu-popular__arrow {
  font-family: var(--mono);
  color: var(--muted);
  transition: color .2s var(--ease-smooth), transform .2s var(--ease-smooth);
}
.mobile-menu-popular__item:hover .mobile-menu-popular__arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* Filter empty state — terminal-style «>_ ничего не найдено» */
.mobile-menu-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.mobile-menu-empty__glyph {
  font-family: var(--mono);
  color: var(--accent);
}

/* Category accordion */
.mobile-menu-section {
  border-bottom: 1px solid var(--border);
}
.mobile-menu-section[open] {
  background: var(--surface2);
  box-shadow: inset 2px 0 0 var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mobile-menu-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  min-height: 48px;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-menu-summary::-webkit-details-marker { display: none; }
.mobile-menu-summary::marker { display: none; }
.mobile-menu-summary__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface3);
  border: 1px solid var(--border);
}
.mobile-menu-summary__icon .nav-icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.mobile-menu-summary__label {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.mobile-menu-summary::after {
  content: '▾';
  font-size: 11px;
  color: var(--muted2);
  transition: transform .15s ease;
  margin-left: 2px;
}
.mobile-menu-section[open] > .mobile-menu-summary::after {
  transform: rotate(180deg);
}
.mobile-menu-count {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mobile-menu-section__body {
  padding: 0 0 8px;
}
.mobile-menu-section__body a {
  padding: 9px 8px 9px 18px;
  min-height: 40px;
}
.mobile-menu-section__body a .nav-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.mobile-menu-section__body a:hover .nav-icon,
.mobile-menu-section__body a.is-active .nav-icon {
  color: var(--accent);
}

/* All-tools row */
.mobile-menu-alltools {
  margin-top: 4px;
  padding: 12px 8px;
  color: var(--accent) !important;
  font-weight: 600;
}
.mobile-menu-alltools .nav-icon { flex: none; }
.mobile-menu-alltools__arrow {
  margin-left: auto;
  font-family: var(--mono);
}

/* Trust chips */
.mobile-menu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 4px 6px;
}
.mobile-menu-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: var(--fs-xs);
  color: var(--muted2);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill, 100px);
}
.mobile-menu-chip .nav-icon {
  width: 13px;
  height: 13px;
  color: var(--cyan);
}
/* Filtered-out items via JS hide attribute */
.mobile-menu-links [hidden] { display: none !important; }

/* ── Tool Navigation Tabs ─────────────────────────────────────────────── */
.toolnav,
.tool-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.toolnav::-webkit-scrollbar,
.tool-nav::-webkit-scrollbar { display: none; }
.toolnav a,
.toolnav button,
.tool-nav a,
.tool-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted2);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition:
    color var(--dur) var(--ease-smooth),
    background var(--dur) var(--ease-smooth);
}
.toolnav a:hover,
.toolnav button:hover,
.tool-nav a:hover,
.tool-nav button:hover {
  color: var(--text);
  background: var(--border0);
}
.toolnav a.is-active,
.toolnav button.is-active,
.toolnav a[aria-current="page"],
.tool-nav a.is-active,
.tool-nav button.is-active,
.tool-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-glow-08);
  font-weight: 600;
}
.toolnav a.is-active::after,
.toolnav a[aria-current="page"]::after,
.tool-nav a.is-active::after,
.tool-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.toolnav-track {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow:
    0 1px 3px var(--black-18),
    0 8px 32px var(--black-12),
    var(--glass-inner),
    var(--glass-glow);
  transition:
    border-color var(--dur-slow) var(--ease-smooth),
    box-shadow var(--dur-slow) var(--ease-smooth);
}
.card:hover {
  border-color: var(--border3);
  box-shadow:
    0 1px 3px var(--black-18),
    0 14px 44px var(--black-14),
    var(--glass-inner),
    inset 0 0 80px var(--accent-glow-06);
}
.card + .card { margin-top: 20px; }

/* ── Tab switch (help page) ───────────────────────────────────────────── */
.tab-switch { display: flex; gap: var(--space-2); margin-bottom: 28px; flex-wrap: wrap; }
.tab-switch a {
  padding: 10px 22px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500;
  color: var(--muted2); text-decoration: none; border: 1px solid var(--border2);
  transition: all var(--dur) var(--ease-smooth); min-height: 44px;
  display: inline-flex; align-items: center;
}
.tab-switch a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-glow-08);
  border-color: var(--accent-glow-25);
  box-shadow: 0 0 16px var(--accent-glow-06);
}
.tab-switch a:hover:not([aria-current="page"]) { color: var(--text); background: var(--surface2); border-color: var(--border3); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: 80px;
  border-top: 1px solid var(--border2);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--surface);
}
.site-footer a {
  color: var(--muted2);
  text-decoration: none;
  transition: color var(--dur) var(--ease-smooth);
}
.site-footer a:hover { color: var(--accent); }
.footer {
  border-top: 1px solid var(--border2);
  background: var(--surface);
  padding: 48px 24px 36px;
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

/* Brand column */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.footer-logo-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
}
.footer-logo-img {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 8px rgba(91,138,248,.2));
}
.footer-logo-text {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
}
.footer-logo-text span { color: var(--accent); }
.footer-tagline {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Links grid */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.footer-col strong {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.footer-col-sub {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.footer-col a {
  font-size: var(--fs-sm);
  color: var(--muted2);
  padding: 7px 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  transition: color var(--dur) var(--ease-smooth);
}

/* Tool-stacking promo — IKEA-effect nudge for anonymous visitors who
   have used 3+ tools in 24h (PRODUCT-AUDIT-2026-04-27 cross-cutting #3).
   Sits above .footer-stats / .footer-bottom; the partial returns early
   below the threshold so the markup is absent then. */
.tool-stack-promo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin: 24px 0 0;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(91, 138, 248, 0.04));
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: var(--radius, 12px);
  color: var(--text);
}
.tool-stack-promo__icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.tool-stack-promo__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tool-stack-promo__title { font-size: 15px; font-weight: 600; }
.tool-stack-promo__lede { color: var(--muted2); font-size: 13px; line-height: 1.5; }
.tool-stack-promo__btn,
.tool-stack-promo__btn:link,
.tool-stack-promo__btn:visited {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--cyan);
  color: var(--bg, #0b0d14);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.tool-stack-promo__btn:hover { filter: brightness(1.1); }
.tool-stack-promo__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .tool-stack-promo { flex-direction: column; align-items: flex-start; padding: 16px; }
  .tool-stack-promo__btn { width: 100%; justify-content: center; }
}

/* Public usage stats strip — bandwagon-effect signal in the footer
   (PRODUCT-AUDIT-2026-04-27 cross-cutting #5). Renders only when
   stats are non-zero. Sits above .footer-bottom, below the .footer-grid. */
.footer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted2);
}
.footer-stats__item { display: inline-flex; align-items: baseline; gap: 6px; }
.footer-stats__num {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.footer-stats__lbl { color: var(--muted); }
.footer-stats__sep { color: var(--muted); }
@media (max-width: 600px) {
  .footer-stats { gap: 4px 10px; padding: 12px 0; font-size: 12px; }
  .footer-stats__sep { display: none; }
  .footer-stats__item { width: 100%; justify-content: center; }
}

/* Bottom bar — flex-wrap so the optional consent line (RU only)
   wraps to its own row without creating a blank row on EN */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 10px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.footer-copy {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 0;
}
.footer-copy a { color: var(--muted2); }
.footer-consent {
  flex: 1 1 100%;   /* always on its own row */
  order: 2;          /* after copy + meta */
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
  max-width: 880px;
}
.footer-consent a {
  color: var(--muted2);
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, .35);
  text-underline-offset: 2px;
}
.footer-consent a:hover { color: var(--text); text-decoration-color: currentColor; }
.footer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--mono);
}
.footer-dot { opacity: .4; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .topbar-tools { display: none; }
  .topbar-nav { display: none; }
  .topbar-actions { display: none; }
  .topbar-burger { display: flex; }
  .mobile-menu { display: block; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 16px 0; }
  .card { padding: 24px 20px; border-radius: var(--radius-md); }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-7); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
  .footer-inner { padding: 40px 16px 32px; }
  .topbar-inner { padding: 0 16px; gap: var(--space-3); height: 56px; }
  .mobile-menu { top: 56px; max-height: calc(100vh - 56px); }
}

/* ── Legacy compat ──────────────────────────────────────────────────── */
.site-header { display: none; }
.nav-tabs { display: none; }
.nav-tab { display: none; }
.nav-tab--user { display: none; }

/* ── Export/Share bar ─────────────────────────────────────────────── */
.export-bar { display: flex; gap: var(--space-2); justify-content: flex-end; margin: 20px 0 14px; }
.export-btn {
  padding: 8px 16px; background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--muted2); font-size: var(--fs-xs);
  font-weight: 600; font-family: var(--mono); cursor: pointer;
  transition: all var(--dur) var(--ease-smooth); min-height: 36px;
}
.export-btn:hover { color: var(--accent); border-color: var(--accent-glow-25); background: var(--accent-glow-06); }
.share-btn { font-family: var(--sans) !important; }
/* duplicate fadeInUp removed — toast uses toastSlideIn */

/* ── URL Analytics Card ──────────────────────────────────────────── */
.url-analytics-card {
  margin-top: 14px; padding: 16px 20px;
  background: var(--accent-glow-06);
  border: 1px solid var(--accent-glow-12);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--muted2);
  animation: uaCardFadeIn .4s var(--ease-out);
}
.url-analytics-card .ua-stat { display: flex; align-items: center; gap: 5px; }
.url-analytics-card .ua-stat strong { color: var(--accent); font-family: var(--mono); }
.url-analytics-card .ua-sep { width: 1px; height: 16px; background: var(--border2); }
.url-analytics-card .ua-sparkline { margin-left: auto; }
@keyframes uaCardFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Language Switcher (P5.A.6 audit 2026-05-04: globe glyph + label) */
.topbar-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted2);
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-xs);
  font-family: var(--mono);
  transition: all var(--dur) var(--ease-smooth);
  letter-spacing: 0.5px;
}
.topbar-lang:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-glow-06);
}
.topbar-lang .nav-icon--lang {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.topbar-lang__label {
  font-family: var(--mono);
}
.mobile-menu-links .topbar-lang {
  display: inline-flex;
  margin: 4px 0;
}

/* ── Topbar user link (avatar + plan chip) — P5.A.3 audit 2026-05-04
   Replaces the old 16-item "Dashboard" hover dropdown with a single
   click-target into /dashboard. Cabinet sub-nav now lives in the
   cabinet itself, not in the global topbar. */
.topbar-user-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  transition: all var(--dur) var(--ease-smooth);
  background: var(--surface2);
}
.topbar-user-link:hover {
  border-color: var(--accent);
  background: var(--accent-glow-06);
}
.topbar-user-link.is-active {
  border-color: var(--accent);
}
.topbar-user__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--surface);
  background: var(--accent);
  border-radius: 50%;
  line-height: 1;
}
.topbar-user__plan {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.topbar-user__plan--free {
  color: var(--muted);
  background: var(--surface3);
}
.topbar-user__plan--starter {
  color: var(--accent);
  background: var(--accent-glow-06);
}
.topbar-user__plan--pro {
  color: var(--surface);
  background: var(--accent);
}
.topbar-user__plan--business {
  color: var(--surface);
  background: var(--warn);
}
@media (max-width: 768px) {
  .topbar-user__plan {
    display: none;  /* avatar-only on narrow screens */
  }
}

/* ── Breadcrumbs ─────────────────────────────────────────────────── */
.breadcrumbs {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  font-size: var(--fs-xs);
  line-height: 1;
}
.breadcrumbs-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumbs-inner::-webkit-scrollbar { display: none; }
.breadcrumbs-sep {
  color: var(--muted);
  margin: 0 8px;
  font-size: var(--fs-xs);
  flex-shrink: 0;
  opacity: .5;
}
.breadcrumbs-item {
  color: var(--muted2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ease-smooth);
}
a.breadcrumbs-item:hover { color: var(--accent); }
.breadcrumbs-current {
  color: var(--text);
  font-weight: 500;
  /* 2026-04-29: long article titles (e.g. "Designing Effective Health Check
     Endpoints for Web Applications") were 365px wide on 375px viewport and
     pushed body wider by their parent's nowrap. Truncate with ellipsis on
     narrow screens — full title still in <title> + breadcrumb tooltip. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
}
@media (min-width: 768px) {
  /* on desktop, allow wrapping again — ellipsis was a mobile-only constraint */
  .breadcrumbs-current { white-space: normal; max-width: none; overflow: visible; display: inline; }
}
@media (max-width: 768px) {
  .breadcrumbs { padding: 10px 0; }
  .breadcrumbs-inner { padding: 0 16px; }
  .breadcrumbs-sep { margin: 0 6px; }
}

/* Consistent breathing room between breadcrumbs and the first content
   block (dash-header, tool-hero, page-header, bare main containers, etc).
   Pages already wrapped in .container already have padding-top:24px so
   we scope this to the top-level structural tags that aren't nested
   inside another container. */
.breadcrumbs + main,
.breadcrumbs + section,
.breadcrumbs + div:not(.container):not([id="main-content"]):not(.ref-page) {
  margin-top: 28px;
}
.breadcrumbs + #main-content,
.breadcrumbs + .ref-page { padding-top: 28px; }
@media (max-width: 768px) {
  .breadcrumbs + main,
  .breadcrumbs + section,
  .breadcrumbs + div:not(.container):not([id="main-content"]):not(.ref-page) { margin-top: 20px; }
  .breadcrumbs + #main-content,
  .breadcrumbs + .ref-page { padding-top: 20px; }
}

/* ── Footer CTA (site-wide) ─────────────────────────────────────── */
.footer-cta {
  position: relative;
  overflow: hidden;
  max-width: var(--content-width);
  margin: 64px auto 0;
  padding: 56px 40px;
  text-align: center;
  background: linear-gradient(135deg, var(--accent-glow-06) 0%, var(--border0) 100%);
  border: 1px solid var(--accent-glow-12);
  border-radius: var(--radius-lg);
}
.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 45%, var(--accent-glow-12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 55%, var(--accent-glow2) 0%, transparent 55%);
  pointer-events: none;
}
.footer-cta h2 {
  position: relative;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.footer-cta p {
  position: relative;
  color: var(--muted2);
  font-size: var(--fs-base);
  margin: 0 0 28px;
  line-height: 1.6;
}
.footer-cta__buttons {
  position: relative;
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.footer-cta__btn {
  padding: 13px 30px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dur) var(--ease-smooth);
  cursor: pointer;
}
.footer-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--white);
  box-shadow: 0 2px 14px var(--accent-glow-20);
}
.footer-cta__btn--primary:hover {
  box-shadow: 0 8px 32px var(--accent-glow-30);
  transform: translateY(-2px);
}
.footer-cta__btn--outline {
  color: var(--muted2);
  border: 1px solid var(--border2);
  background: transparent;
}
.footer-cta__btn--outline:hover {
  background: var(--accent-glow-08);
  border-color: var(--accent-glow-30);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .footer-cta { padding: 40px 24px; margin-top: 48px; border-radius: var(--radius); }
  .footer-cta h2 { font-size: var(--fs-lg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULT CTA — conversion block after tool results
   ══════════════════════════════════════════════════════════════════════════ */
.result-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--accent-glow-06) 0%, var(--border0) 100%);
  border: 1px solid var(--accent-glow-12);
  border-radius: var(--radius);
  transition:
    border-color .3s var(--ease-smooth),
    box-shadow .3s var(--ease-smooth);
}
.result-cta:hover {
  border-color: var(--accent-glow-20);
  box-shadow: 0 4px 28px var(--accent-glow-08);
}
.result-cta__icon { font-size: 30px; flex-shrink: 0; }
.result-cta__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.result-cta__text strong { font-size: var(--fs-base); color: var(--text); font-weight: 600; }
.result-cta__text span { font-size: var(--fs-sm); color: var(--muted2); line-height: 1.5; }
.result-cta__btn {
  display: inline-flex; align-items: center;
  padding: 11px 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--white); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: all var(--dur) var(--ease-smooth);
  box-shadow: 0 2px 12px var(--accent-glow-20);
}
.result-cta__btn:hover {
  box-shadow: 0 4px 24px var(--accent-glow-30);
  transform: translateY(-1px);
}
/* Logged-in variant: cyan accent rail (vs primary blue for anonymous)
   so member-only CTA reads as a "second action" rather than a sign-up
   nudge. Same component, different visual semantics — added 2026-04-27
   per priority #1 from PRODUCT-AUDIT-2026-04-27.md. */
.result-cta--member {
  border-left: 3px solid var(--cyan);
}
/* Problem-aware variant (2026-06-24) — toggled by tool-cta.js when the
   checked URL has real issues (poor grade / low score / expiring SSL /
   failing email auth). Amber accent + left rail give the loss-aversion copy
   ("we found N issues — get alerted before it worsens") visual salience.
   Tokens only (DESIGN.md). */
.result-cta--problem {
  border-color: var(--yellow);
  border-left: 3px solid var(--yellow);
}
.result-cta--problem .result-cta__icon { color: var(--yellow); }
/* Re-check & Diff "Watch for changes" button (2026-06-24) — logged-in CTA on
   graded tools. Cyan accent reads as a secondary action next to the primary
   blue Save & track CTA. Tokens only (DESIGN.md). */
.tool-watch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.tool-watch__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: all var(--dur) var(--ease-smooth);
}
.tool-watch__btn:hover { border-color: var(--cyan); color: var(--cyan); }
.tool-watch__btn:disabled { opacity: .7; cursor: default; }
.tool-watch__icon { font-size: 15px; }
.tool-watch__hint { font-size: var(--fs-sm); color: var(--muted); }
.tool-watch--on .tool-watch__btn { border-color: var(--green); color: var(--green); }
/* Problem-aware emphasis: when the check found issues, the watch button reads
   amber (matches .result-cta--problem) — it's the contextual next step. */
.tool-watch--urgent .tool-watch__btn { border-color: var(--yellow); color: var(--yellow); }
.tool-watch--urgent .tool-watch__icon { color: var(--yellow); }
.tool-watch-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tool-watch-tbl th, .tool-watch-tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tool-watch-tbl th { color: var(--muted2); font-weight: 600; }
.tool-watch-tbl .tw-target { font-family: var(--mono); word-break: break-all; }
.tw-grade { font-weight: 700; }
.tw-del { background: none; border: 1px solid var(--border2); color: var(--muted2); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: 12px; }
.tw-del:hover { border-color: var(--red); color: var(--red); }
.tool-watch-empty { color: var(--muted); font-size: var(--fs-sm); }
/* Wave 3 / SEO audit H14 — post-check attention pulse.
   Applied by tool-cta.js for 6 s starting 3 s after the visitor sees
   their result. Subtle border-glow + 1 px lift, never fully fades the
   text (visibility unchanged). Honors reduced-motion. */
.result-cta--pulse {
  animation: result-cta-pulse 1.5s var(--ease-smooth) 0s 4 alternate;
}
@keyframes result-cta-pulse {
  from {
    border-color: var(--accent-glow-20);
    box-shadow: 0 2px 12px var(--accent-glow-08);
  }
  to {
    border-color: var(--accent);
    box-shadow: 0 6px 32px var(--accent-glow-30);
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-cta--pulse {
    animation: none;
    border-color: var(--accent);
  }
}
.result-cta--member .result-cta__btn {
  background: var(--cyan);
  color: var(--bg, #0b0d14);
  box-shadow: 0 2px 12px rgba(34, 211, 238, 0.25);
}
.result-cta--member .result-cta__btn:hover {
  box-shadow: 0 4px 24px rgba(34, 211, 238, 0.4);
}
@media (max-width: 600px) {
  .result-cta { flex-direction: column; text-align: center; padding: 20px; }
  .result-cta__btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED EFFECTS — Tool Hero, Reveal, Auth, 404
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tool Hero ────────────────────────────────────────────────────────── */
.tool-hero {
  position: relative;
  padding-top: var(--space-7);
  margin-bottom: var(--space-7);
  /* 2026-04-29: clip the decorative .hero-grid + glow children that
     extend 60px beyond .tool-hero on each side. On 375px viewport
     this caused 88-92px of horizontal overflow on every tool page.
     overflow:clip avoids creating a scroll context (vs hidden). */
  overflow: clip;
}
.tool-hero > .hero-grid {
  position: absolute;
  inset: -40px -60px;
  background-image: radial-gradient(circle, var(--accent-glow-06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, black 20%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tool-hero > .card {
  position: relative;
  z-index: 1;
  border-color: var(--accent-glow-10);
  box-shadow:
    0 0 44px var(--accent-glow-06),
    0 8px 36px var(--black-14),
    var(--glass-inner),
    inset 0 0 80px var(--accent-glow-06);
  transition:
    border-color var(--dur-slow) var(--ease-smooth),
    box-shadow var(--dur-slow) var(--ease-smooth);
}
.tool-hero > .card:focus-within {
  border-color: var(--accent-glow-20);
  box-shadow:
    0 0 64px var(--accent-glow-06),
    0 12px 44px var(--black-16),
    var(--glass-inner),
    inset 0 0 100px var(--accent-glow-06);
}

/* ── Enhanced tool-title ──────────────────────────────────────────────── */
.tool-hero .tool-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
  justify-content: center;
}
.tool-hero .tool-desc {
  color: var(--muted2);
  font-size: var(--fs-14);
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 24px;
}

/* ── Scroll Reveal ────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .5s var(--ease-out),
    transform .5s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.no-io .reveal { opacity: 1; transform: none; }

/* ── Auth pages ───────────────────────────────────────────────────────── */
.auth-card {
  position: relative;
  border-color: var(--accent-glow-10) !important;
  box-shadow:
    0 0 64px var(--accent-glow-06),
    0 12px 44px var(--black-16),
    var(--glass-inner),
    inset 0 0 80px var(--accent-glow-06);
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: -80px;
  background: radial-gradient(ellipse at 50% 0%, var(--accent-glow-06) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}

/* ── 404 page ─────────────────────────────────────────────────────────── */
.error-404-code {
  font-family: var(--mono);
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--muted) 0%, var(--accent) 50%, var(--accent2) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift404 4s ease-in-out infinite;
  margin-bottom: 20px;
}
@keyframes gradientShift404 {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Pricing / Articles gradient titles ───────────────────────────────── */
.pricing-page > h1,
.pricing-page > .pricing-hero h1,
.articles-page > h1,
.compare-page > h1 {
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITY HELPERS
   ══════════════════════════════════════════════════════════════════════════ */
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.text-muted2 { color: var(--muted2); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-mono { font-family: var(--mono); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.gap-1 { gap: var(--space-2); }
.gap-2 { gap: var(--space-4); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }

/* ── Mobile Improvements ── */

@media (max-width: 768px) {
  /* Ensure minimum 44px touch targets */
  .btn, .btn-primary, .btn-secondary, .btn-outline, button[type="submit"] {
    min-height: 44px;
    padding: 12px 20px;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="url"],
  input[type="search"], input[type="tel"], input[type="number"], input[type="date"],
  select, textarea, .input {
    min-height: 44px;
    font-size: 16px; /* WCAG / iOS — anything <16px triggers auto-zoom on focus */
  }
  /* Better card padding on mobile */
  .card { padding: 22px 18px; }
  /* Footer mobile improvements */
  .footer-grid { grid-template-columns: 1fr !important; gap: var(--space-6); }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
  /* Better section spacing */
  .home-section { padding: 40px 16px; }
  .home-section__title { font-size: var(--fs-md); }
  .home-section__sub { font-size: var(--fs-sm); }
  /* Feature cards stack */
  .features-grid { grid-template-columns: 1fr !important; gap: var(--space-4); }
  /* Trust bar wrap */
  .trust-bar {
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
  }
  .trust-item { min-width: 140px; text-align: center; }
  /* Article cards stack */
  .home-articles { grid-template-columns: 1fr !important; gap: var(--space-3); }
  /* Compare cards stack */
  .compare-grid { grid-template-columns: 1fr !important; gap: var(--space-3); }
  /* Result CTA stack */
  .result-cta { flex-direction: column; text-align: center; gap: var(--space-3); padding: 16px; }
  .result-cta__actions { width: 100%; justify-content: center; }
  /* Export bar */
  .export-bar { justify-content: center; }
  /* URL analytics card */
  .url-analytics-card { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .url-analytics-card .ua-sep { display: none; }
  .url-analytics-card .ua-sparkline { margin-left: 0; width: 100%; }
  /* Tool nav tabs mobile */
  .toolnav, .tool-nav { gap: 2px; padding: 2px; }
  .toolnav a, .toolnav button, .tool-nav a, .tool-nav button {
    padding: 8px 14px;
    min-height: 44px;
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .hero-title { font-size: 1.35rem !important; line-height: 1.3; }
  .hero-sub { font-size: var(--fs-sm); }
  .tool-title { font-size: var(--fs-md); }
  .tool-desc { font-size: var(--fs-sm); }
  .topbar-inner { padding: 0 12px; height: 52px; }
  .mobile-menu { top: 52px; max-height: calc(100vh - 52px); }
  .wrap { padding: 0 12px; }
  /* Steps horizontal to vertical */
  .steps { flex-direction: column !important; gap: var(--space-5); }
  .step__connector { display: none; }
  /* Comparison table scroll hint */
  .comparison-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
}

/* ==========================================================================
   AI Recommendations Widget
   ========================================================================== */

.recs-card {
    margin-bottom: 1.5rem;
}

.recs-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.recs-card h3 svg {
    flex-shrink: 0;
}

#ai-recommendations {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rec-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--border0);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all var(--dur) var(--ease-smooth);
}

.rec-item:hover {
    background: var(--border0);
    border-color: var(--border2);
}

.rec-critical {
    border-left: 3px solid var(--danger);
}

.rec-warning {
    border-left: 3px solid var(--warn);
}

.rec-info {
    border-left: 3px solid var(--accent);
}

.rec-success {
    border-left: 3px solid var(--green);
}

.rec-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.rec-content {
    flex: 1;
    min-width: 0;
}

.rec-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.rec-desc {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.5;
}

.rec-action {
    flex-shrink: 0;
    color: var(--muted);
    padding: 0.25rem;
    transition: color var(--dur) var(--ease-smooth);
}

.rec-action:hover {
    color: var(--accent);
}

.rec-empty {
    text-align: center;
    color: var(--muted);
    padding: 1.5rem 1rem;
    font-size: var(--fs-sm);
}

@media (max-width: 768px) {
    .rec-item {
        padding: 0.6rem 0.75rem;
    }

    .rec-desc {
        font-size: var(--fs-xs);
    }
}

/* ========== FAQ Section ========== */
.faq-section { max-width: var(--content-width, 1100px); margin: var(--space-10) auto var(--space-9); padding: 0 1.5rem; }
.faq-section h2 { font-size: var(--fs-lg); margin-bottom: 1.25rem; color: var(--text); }
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .2s; }
.faq-item[open] { border-color: var(--accent); }
.faq-item summary { padding: 14px 18px; font-weight: 600; font-size: var(--fs-base); color: var(--text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
/* Unified disclosure: chevron-down that rotates 180° on open.
   Matches the llms-faq arrow pattern used elsewhere on the site. */
.faq-item summary::after { content: "\2304"; font-size: 18px; color: var(--muted); transition: transform .2s; display: inline-block; line-height: 1; }
.faq-item[open] summary::after { transform: rotate(180deg); color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { padding: 0 18px 14px; color: var(--muted); line-height: 1.6; font-size: var(--fs-sm); }

/* ── SEO text sections on tool pages ────────────────────────────── */
.seo-section {
  max-width: 900px;
  margin: 2.5rem auto 0;
  padding: 0 16px;
}
.seo-section h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
.seo-section p {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text2);
  margin-bottom: 1.5rem;
}

/* ── Nav Usage Meter ──────────────────────────────────── */
.nav-meter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid var(--border2);
  background: var(--border0);
  transition: background .15s ease, border-color .15s ease;
}
.nav-meter:hover {
  background: var(--border);
  border-color: var(--accent-glow-25);
}
.nav-meter__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nav-meter__bar {
  width: 40px;
  height: 4px;
  background: var(--border-mid);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-meter__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease;
}
.nav-meter--warn .nav-meter__fill { background: var(--orange, var(--warn)); }
.nav-meter--warn .nav-meter__label { color: var(--orange, var(--warn)); }
.nav-meter--full .nav-meter__fill { background: var(--red, var(--red)); }
.nav-meter--full .nav-meter__label { color: var(--red, var(--red)); }
@media (max-width: 991px) { .nav-meter { display: none; } }

/* ══ GROUPED NAV ══ */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topbar-group {
  position: relative;
}
.topbar-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.topbar-group-arrow {
  font-size: var(--fs-2xs);
  opacity: .5;
  transition: transform .2s var(--ease-out);
  margin-left: 1px;
}
.topbar-group.open .topbar-group-arrow {
  transform: rotate(180deg);
  opacity: .8;
}
.topbar-group-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--bg-overlay);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow:
    0 20px 56px var(--black-50),
    0 4px 12px var(--black-20),
    var(--glass-inner);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .2s var(--ease-smooth),
    transform .25s var(--ease-out);
  z-index: var(--z-dropdown);
}
.topbar-group.open .topbar-group-drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Right-anchored dropdowns (last 2 groups) to prevent off-screen overflow */
#navGroupSecurity .topbar-group-drop,
#navGroupDev .topbar-group-drop {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-6px);
}
#navGroupSecurity.open .topbar-group-drop,
#navGroupDev.open .topbar-group-drop {
  transform: translateX(0) translateY(0);
}

/* ══ GROUPED NAV — mobile override (must come after the desktop rules above) ══ */
@media (max-width: 768px) {
  .topbar-nav { display: none !important; }
}

/* Footer 4-column variant */
.footer-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .footer-grid--4 { grid-template-columns: 1fr 1fr; } }

/* ── All tools grouped layout ────────────────────────────────────────── */
.home-tools-all { display: flex; flex-direction: column; gap: var(--space-7); }

.home-tools-group__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.home-tools-group__icon {
  font-size: var(--fs-md); width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--surface2); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-tools-group__title {
  font-size: var(--fs-base); font-weight: 700; color: var(--text); flex: 1;
  margin: 0;
}
.home-tools-group__count {
  font-size: var(--fs-xs); padding: var(--badge-padding-sm); border-radius: var(--radius-lg);
  background: var(--surface2); color: var(--muted);
  border: 1px solid var(--border);
}


/* ── Share toast ──────────────────────────────────────────────────────── */
.share-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast, 300);
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 14px 18px;
  box-shadow: var(--shadow-xl, 0 8px 32px var(--black-50));
  min-width: 260px; max-width: 90vw;
  display: flex; flex-direction: column; gap: 10px;
  animation: toastSlideIn .25s var(--ease-out);
}
.share-toast__header {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.share-toast__url { display: flex; gap: var(--space-2); align-items: center; }
.share-toast__input {
  flex: 1; background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-xs); padding: 7px 10px; color: var(--muted2);
  font-family: var(--mono); font-size: var(--fs-xs); outline: none;
}
.share-toast__copy {
  padding: 7px 14px; background: var(--accent-glow-12);
  border: 1px solid var(--accent-glow-30); border-radius: var(--radius-xs);
  color: var(--accent); font-size: var(--fs-xs); font-weight: 600;
  font-family: var(--sans); cursor: pointer; white-space: nowrap;
  transition: all var(--dur) var(--ease-smooth);
}
.share-toast__copy:hover { background: var(--accent-glow-20); }
.share-toast__actions {
  display: flex; gap: var(--space-2); align-items: center; justify-content: space-between;
}
.share-toast__tg {
  font-size: var(--fs-xs); color: var(--cyan); text-decoration: none;
}
.share-toast__tg:hover { text-decoration: underline; }
.share-toast__close {
  background: none; border: none; color: var(--muted2);
  font-size: var(--fs-xs); cursor: pointer; font-family: var(--sans);
  padding: 2px 6px; border-radius: var(--radius-xs); transition: all var(--dur);
}
.share-toast__close:hover { color: var(--text); }
@media (max-width: 600px) {
  .share-toast { left: 16px; right: 16px; transform: none; bottom: 16px; min-width: unset; }
}

/* ── Tool "Learn more" pSEO cross-links ───────────────────────────── */
.tool-seo-learn {
  /* margin-top adds breathing room before the block since the preceding
     section (recommendations / results card) doesn't always have its
     own margin-bottom. User-reported "no gap" FOUC fix 2026-04-20. */
  margin: 32px 0 48px;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tool-seo-learn__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px;
}
.tool-seo-learn__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 32px;
}
.tool-seo-learn__col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 10px;
}
.tool-seo-learn__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tool-seo-learn__list li { margin: 0 0 4px; }
.tool-seo-learn__list a {
  display: block;
  padding: 8px 10px;
  margin-left: -10px; /* bleed the hover bg out to the column edge */
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s, color .12s;
}
.tool-seo-learn__list a:hover {
  background: var(--accent-glow-08);
  color: var(--accent);
  text-decoration: none;
}

/* ── Related tools cross-linking ───────────────────────────────────── */
.related-tools { padding: var(--space-9) 0; }
.related-tools__title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin: 0 0 16px; }
.related-tools__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.related-tool-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text2); text-decoration: none; font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease-out), background var(--dur);
}
.related-tool-card:hover { border-color: var(--accent); background: var(--surface2); color: var(--text); }
.related-tool-card__icon { font-size: var(--fs-md); flex-shrink: 0; }
.related-tool-card__name { font-weight: 500; }
@media (max-width: 480px) { .related-tools__grid { grid-template-columns: 1fr 1fr; } }


/* ── Tool form row — responsive stack ──────────────────────────────── */
.form-row {
  display: flex; gap: 10px; align-items: stretch;
}
.form-row .input-wrap { flex: 1; }
.form-row .input-wrap--port { max-width: 90px; flex: none; }
.form-row .btn { flex-shrink: 0; min-width: 140px; }

@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
  }
  .form-row .btn {
    width: 100%; min-width: unset;
    padding: 14px 24px; font-size: var(--fs-base);
  }
  .form-row .input-wrap--port { max-width: 100%; }
  .speed-strategy { justify-content: center; }
}

/* ── Mobile heading scale ──────────────────────────────────────────── */
@media (max-width: 600px) {
  h1, .tool-title { font-size: var(--fs-xl); }
  h2              { font-size: var(--fs-lg); }
  h3              { font-size: var(--fs-md); }
}
@media (max-width: 480px) {
  h1, .tool-title { font-size: var(--fs-lg); }
}
/* ── Accessibility: reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Footer separator between sub-groups */
.footer-sep { display: block; height: 8px; }


.footer-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .footer-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .footer-grid--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid--5 { grid-template-columns: 1fr; } }


/* ── 2026 Design Update ─────────────────────────── */
:root {
  --section-alt: var(--bg);
  --gradient-hero: linear-gradient(135deg, var(--accent-glow-06), var(--border0));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent2));
  --card-hover-border: var(--accent-glow-15);
}
.section-alt { background: var(--section-alt); }
.glass-subtle {
  backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--border);
}

/* ── Related Tools ────────────────────────────────────────────── */
.related-tools {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.related-tools__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
}
.related-tools__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.related-tools__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color 0.15s, transform 0.15s;
}
.related-tools__card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  color: var(--text);
}
.related-tools__icon {
  font-size: var(--fs-md);
  flex-shrink: 0;
}
.related-tools__name {
  font-weight: 500;
}
@media (max-width: 768px) {
  .related-tools__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .related-tools__grid {
    grid-template-columns: 1fr;
  }
}

[aria-hidden='true'] {
  pointer-events: none;
}

/* ── Testimonial component ────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1000px;
  margin: 0 auto;
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color 0.2s;
}
.testimonial-card:hover { border-color: var(--accent-glow-30); }
.testimonial-text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
  flex: 1;
}
.testimonial-text::before {
  content: '\201C';
  color: var(--accent);
  font-size: var(--fs-lg);
  line-height: 0;
  vertical-align: -6px;
  margin-right: 2px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-glow-15);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.testimonial-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.testimonial-role {
  font-size: var(--fs-xs);
  color: var(--muted);
}
@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ── Inline-style replacements (migration 2026-03-27) ── */
.hidden { display: none !important; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-flex { display: inline-flex; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.p-sm { padding: 6px 0; }
.p-card { padding: 14px; text-align: center; }
.mb-xs { margin-bottom: 8px; }
.mb-sm { margin-bottom: 16px; }
.mb-md { margin-bottom: 18px; }
.mb-lg { margin-bottom: 24px; }
.mt-xs { margin-top: 8px; }
.mt-sm { margin-top: 16px; }
.text-center { text-align: center; }
.text-default { color: var(--text); }
.text-muted-sm { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
.text-muted2-sm { display: block; font-size: var(--fs-xs); color: var(--muted2); margin-bottom: 4px; text-align: left; }
.text-label { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.text-subvalue { color: var(--muted2); font-size: .85rem; margin-bottom: 24px; }
/* Tool edu content utility classes */
.tool-section-title { font-size: 1.1rem; font-weight: 600; margin: 24px 0 12px; color: var(--accent); }
.tool-sub-title { font-size: 1rem; font-weight: 600; margin: 16px 0 8px; }
.tool-list-item { padding-left: 20px; margin: 8px 0; color: var(--muted2); }
.tool-list-item--tall { padding-left: 20px; margin: 8px 0; color: var(--muted2); line-height: 1.8; }
.tool-code-inline { font-family: var(--mono); background: var(--surface); padding: 2px 6px; border-radius: var(--radius-xs); }
.tool-code-label { padding: 6px 12px; font-family: var(--mono); font-size: var(--fs-sm); }
.tool-kv-key { padding: 6px 0; }
.tool-kv-val { padding: 6px 0; font-weight: 600; color: var(--text); }
.tool-big-stat { font-size: 64px; font-weight: 700; color: var(--accent); font-family: var(--mono); margin-bottom: 8px; }
.tool-hero-icon { font-size: 48px; margin-bottom: 16px; }
.tool-empty-state { text-align: center; padding: 60px 20px; }
.tool-cta-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; background: linear-gradient(135deg,var(--accent),var(--accent2)); color: var(--white); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-14); text-decoration: none; }
.tool-rotate-icon { font-size: var(--fs-xs); transition: transform .2s; }
.tool-note { color: var(--muted2); font-size: var(--fs-14); margin-top: 8px; }
.tool-row-header { text-align: center; padding: 10px 8px; }
.tool-row-cell { text-align: center; padding: 12px 8px; color: var(--muted); font-weight: 500; }
.tool-h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; }
.tool-h4 { font-size: 1.3rem; }
.tool-muted-note { margin-left: .5rem; color: var(--muted); }
.tool-table { width: 100%; font-size: .9rem; color: var(--muted2); border-collapse: collapse; margin-top: 12px; }
.tool-flex-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tool-chip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tool-checkbox { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.tool-icon-sm { vertical-align: -2px; margin-right: 4px; }

/* ── Pass-2 utility classes (2026-03-27) ── */
.pt-sm { padding-top: 10px; }
.mt-auto-ml { margin-left: auto; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 40px; }
.mt-6 { margin-top: 48px; }
.my-lg { margin-top: 32px; margin-bottom: 48px; }
.max-w-960 { max-width: 960px; }
.max-w-800 { max-width: 800px; margin: 0 auto; }
.max-w-560 { max-width: 560px; }
.max-w-500 { max-width: 500px; }
.max-w-160 { max-width: 160px; }
.mx-auto { margin: 0 auto; }
.pos-relative { position: relative; }
.pos-abs-tr { position: absolute; top: 8px; right: 8px; }
.sr-hidden { position: absolute; left: -9999px; }
.rotate-270 { transform: rotate(-90deg); }
.w-36 { width: 36px; }
.cursor-default { cursor: pointer; list-style: none; user-select: none; }
.border-none { border: none; padding: 0; margin: 0; }
.border-top-none { border-top: none; }
.border-radius-r { border-radius: 0 6px 6px 0; flex: 1; }
.bg-green-subtle { background: var(--status-pass-bg); border-color: var(--status-pass-border); }
.bg-yellow { background: var(--yellow); }
.bg-orange { background: var(--orange); }
.bg-green { background: var(--green); }
.bg-cyan { background: var(--cyan); }
.bg-purple { background: var(--accent2); }
.bg-blue { background: var(--accent); }
.text-yellow { color: var(--yellow); }
.text-purple { color: var(--accent2); }
.text-blue-link { color: var(--accent); text-decoration: underline; }
.text-red { color: var(--red); }
.text-green-fw { color: var(--green); font-weight: 600; font-size: var(--fs-sm); }
.text-accent-link { color: var(--accent); text-decoration: none; }
.text-fg-muted { color: var(--fg-muted); margin-bottom: 2rem; }
.ml-auto { margin-left: auto; }
.ml-auto-h20 { margin-left: auto; height: 20px; }
.ml-auto-xs { margin-left: auto; font-size: var(--fs-2xs); color: var(--muted); }
.flex-gap-8 { display: flex; gap: 8px; flex-shrink: 0; }
.flex-gap-8-ai { display: flex; gap: 8px; align-items: center; }
.flex-gap-10-ai { display: flex; gap: 10px; align-items: center; }
.flex-gap-12-ai { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex-gap-6 { display: flex; gap: 6px; }
.flex-col-gap-8 { display: flex; flex-direction: column; gap: 8px; }
.flex-col-gap-6-mt { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.flex-ai-start-pt { align-items: start; padding-top: 4px; }
.text-block-label { display: block; font-size: var(--fs-14); font-weight: 500; margin-bottom: 8px; }
.card-section-title { font-size: var(--fs-14); font-weight: 600; color: var(--text); margin-bottom: 14px; }
.card-meta { font-size: var(--fs-14); color: var(--muted2); margin-bottom: 6px; }
.card-desc { font-size: var(--fs-sm); color: var(--muted2); margin-bottom: 10px; }
.card-note-top { font-size: var(--fs-xs); color: var(--muted2); margin-top: 6px; }
.mono-indent { font-family: var(--mono); font-size: var(--fs-sm); padding: 1px 0 1px 16px; }
.fold-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; font-size: var(--fs-14); }
.fold-trigger-sm { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 12px; background: var(--surface2); border-radius: var(--radius-xs); text-align: left; font-size: var(--fs-sm); }
.muted-mb2 { color: var(--muted); margin-bottom: 2px; }
.muted-mb24 { color: var(--muted); margin-bottom: 24px; }
.section-divider { border-top: 1px solid var(--border2); padding-top: 18px; margin-bottom: 18px; }
.img-rounded { border: 0; border-radius: var(--radius-sm); }
.overflow-x-auto { padding: 0; overflow-x: auto; }
.badge-accent { display: inline-block; background: var(--accent); color: var(--white); font-size: 0.6rem; font-weight: 600; padding: 0.15em 0.55em; border-radius: var(--radius-xs); vertical-align: middle; margin-left: 0.25rem; letter-spacing: 0.03em; text-transform: uppercase; }
.cta-row { display: flex; gap: 0.5rem; margin: 1.5rem 0; }
.mono-fw { font-family: var(--mono); font-weight: 600; }
.mono-fw-green { font-family: var(--mono); font-weight: 600; color: var(--green); }
.mono-url { font-family: var(--mono); font-size: var(--fs-sm); word-break: break-all; flex: 1; color: var(--accent); text-decoration: none; }
.mono-sm-url { font-family: var(--mono); font-size: var(--fs-xs); word-break: break-all; flex: 1; }
.tool-textarea { width: 100%; resize: vertical; font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.5; }
.tool-textarea-sm { width: 100%; resize: vertical; font-family: var(--font); font-size: var(--fs-sm); }
.mono-input-sm { width: 100px; font-family: var(--mono); font-size: var(--fs-sm); }
.muted-body { padding: 20px; color: var(--muted2); }
.muted-center-lg { text-align: center; padding: 1.5rem; color: var(--muted); }
.muted-center-xl { text-align: center; padding: 2rem 0; color: var(--fg-muted); }
.panel-row-top { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.panel-row-sb { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.panel-row { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.panel-cell { padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.panel-footer { padding: 14px 20px; font-size: var(--fs-sm); color: var(--muted2); }
.panel-body { padding: 14px 16px; }
.panel-pad { padding: 14px; }
.panel-over { padding: 14px; text-align: center; overflow: hidden; }
.panel-info { padding: 14px 16px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border2); font-size: var(--fs-sm); line-height: 1.7; }
.mono-code-block { margin: 10px 0; padding: 10px 14px; background: var(--bg); border-radius: var(--radius-xs); font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent); }
.mono-sm-top { margin-top: 8px; font-size: var(--fs-xs); font-family: var(--mono); }
.surface-inset { margin-top: 8px; padding: 10px; background: var(--surface2); border-radius: var(--radius-xs); display: inline-block; }
.border-top-mt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.border-top-pt { border-top: 1px solid var(--border); padding-top: 20px; }
.border-bottom-mb { border-bottom: 1px solid var(--border); }
.border-bottom-subtle { border-bottom: 1px solid var(--border0); }
.w-full-mb2 { width: 100%; margin-bottom: 16px; }
.w-full-mb3 { width: 100%; margin-bottom: 12px; }
.table-sm { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.text-left-header { text-align: left; padding: 12px 16px; color: var(--muted); font-weight: 500; }
.text-center-empty { text-align: center; padding: 40px; }
.text-center-muted-lg { text-align: center; padding: 32px; color: var(--muted); }
.text-center-max { text-align: center; max-width: 480px; margin: 60px auto; }
.container-wide { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-max { max-height: 40px; max-width: 200px; display: block; }
.flex-1-min-280 { flex: 1; min-width: 280px; }
.flex-1-min-200 { flex: 1; min-width: 200px; }
.flex-1-min-0 { flex: 1; min-width: 0; }
.flex-gap-20-muted { margin-top: 16px; display: flex; gap: 20px; font-size: var(--fs-sm); color: var(--muted2); }
.kv-key-wide { padding: 6px 0; font-weight: 600; color: var(--text); width: 220px; }
.kv-key-med { padding: 6px 0; font-weight: 600; color: var(--text); width: 200px; }
.kv-flex-row { padding: 3px 0; display: flex; gap: 8px; }
.dot-accent { min-width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.inline-prefix { padding: 9px 12px; background: var(--bg); border: 1px solid var(--border2); border-right: 0; border-radius: var(--radius-xs) 0 0 6px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.btn-ghost-sm { padding: 8px 20px; background: transparent; color: var(--muted2); border: 1px solid var(--border2); border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; }
.btn-primary-sm { padding: 8px 20px; background: var(--accent); color: var(--white); border: none; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.tag-sm { padding: 6px 10px; background: var(--surface); border-radius: var(--radius); font-size: var(--fs-xs); }
.indicator-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.text-link { text-decoration: none; display: block; text-align: center; }
.cell-nowrap { text-align: left; white-space: nowrap; font-size: var(--fs-sm); }
.mono-font-cell { text-align: center; padding: 10px 8px; font-family: 'JetBrains Mono', monospace; }
.cursor-muted { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); padding: 8px 0; }
.max-w-page { max-width: 900px; margin: 32px auto; padding: 0 20px; }
.max-w-page-sm { max-width: 640px; margin: 40px auto; padding: 0 20px; }
.card-mb-p { margin-bottom: 24px; padding: 20px; }
.card-mb-accent { margin-bottom: 16px; padding: 20px; border-color: var(--accent); }
.card-mb-p2 { margin-bottom: 16px; padding: 20px; }
.card-mb-p-sm { padding: 32px; }
.card-header-p { padding: 24px; margin-bottom: 20px; text-align: center; }
.card-warn { padding: 16px; margin-bottom: 12px; border-color: var(--status-warn-border); }
.card-ok { padding: 16px; margin-bottom: 12px; border-color: var(--status-pass-border); }
.card-err { margin-bottom: 16px; border-color: var(--status-fail-border); }
.mono-list-item { padding-left: 18px; color: var(--muted); margin: 0; }
.fw-600-text-mb { font-weight: 600; color: var(--text); margin-bottom: 8px; }
.fw-500 { font-weight: 500; }
.fs-muted-mt { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.fs-sm-text { font-size: var(--fs-sm); color: var(--text); }
.fs-85-muted { font-size: .85rem; color: var(--muted2); line-height: 1.6; }
.fs-2rem-fw { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.fs-28px { font-size: 28px; }
.fs-24px-mb { font-size: 24px; margin-bottom: 4px; }
.fs-22px-mb2 { font-size: 22px; margin-bottom: 8px; }
.fs-22px-mb3 { font-size: 22px; margin-bottom: 12px; }
.fs-22px-m0 { font-size: 22px; margin: 0; }
.fs-14px-muted { color: var(--muted); font-size: var(--fs-14); }
.fs-13px-muted { color: var(--muted); font-size: var(--fs-sm); }
.fs-11px-section { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 7px; }
.fs-11px-muted-mt5 { font-size: var(--fs-2xs); color: var(--muted); margin-top: 5px; }
.tag-accent-xs { font-size: var(--fs-2xs); background: var(--accent); color: var(--white); padding: 2px 7px; border-radius: var(--radius-xs); text-decoration: none; font-weight: 600; white-space: nowrap; }
.mono-text-sm { color: var(--muted2); font-family: var(--mono); font-size: var(--fs-sm); }
.mono-text-url { font-family: var(--mono); font-size: var(--fs-sm); color: var(--accent); }
.mono-overflow { font-family: var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono-word-break { font-family: var(--mono); font-size: var(--fs-xs); word-break: break-all; }
.mono-word-muted { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted2); white-space: nowrap; }
.mono-word-accent { font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent); word-break: break-all; }
.mono-text-text { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text); }
.text-word-break { color: var(--text); word-break: break-all; }
.text-ml { color: var(--text); margin-left: 4px; }
.text-ml-mono { color: var(--text); font-family: var(--mono); word-break: break-all; margin-left: 4px; }
.muted-min180 { color: var(--muted); min-width: 180px; flex-shrink: 0; }
.muted-mt8-fs12 { color: var(--muted); margin-top: 8px; font-size: var(--fs-xs); }
.muted-mb6-fw { color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.muted-fs14-mt { color: var(--muted); margin: 4px 0 0; font-size: var(--fs-14); }
.muted-mt16-fs13 { color: var(--muted); font-size: var(--fs-sm); margin-top: 16px; }
.muted2-fs12-mt6 { font-size: var(--fs-xs); color: var(--muted2); margin-top: 4px; }
.muted2-fs12-mt4-wb { font-size: var(--fs-xs); color: var(--muted2); margin-top: 4px; word-break: break-word; }
.muted2-fs12-mt4-lh { font-size: var(--fs-xs); color: var(--muted2); margin-top: 4px; line-height: 1.4; }
.muted2-fs12-mb6 { font-size: var(--fs-xs); color: var(--muted2); margin-bottom: 6px; }
.muted2-fs12-mb-mono { font-size: var(--fs-xs); color: var(--muted2); margin-bottom: 6px; font-family: var(--mono); }
.muted2-fs12 { font-size: var(--fs-xs); color: var(--muted2); }
.muted2-fs13-mb { font-size: var(--fs-sm); color: var(--muted2); margin-bottom: 18px; }
.muted2-fs13-mt12 { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted2); }
.muted2-fs13-mt10 { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted2); }
.muted2-fs13 { font-size: var(--fs-sm); color: var(--muted2); }
.muted-fs13-semi { color: var(--muted); font-size: var(--fs-sm); }
.muted-fs13-mt16 { color: var(--muted); font-size: var(--fs-sm); margin-top: 16px; }
.mono-fs13-muted { color: var(--muted2); font-family: var(--mono); font-size: var(--fs-sm); }
.status-link-mt { color: var(--accent); margin-top: 8px; text-decoration: none; }
.mt-12-border { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted2); }
.checkbox-sm { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.icon-disabled { width: 18px; height: 18px; cursor: not-allowed; opacity: 0.5; }
.color-btn { width: 44px; height: 36px; border: 1px solid var(--border2); border-radius: var(--radius-xs); background: var(--surface2); cursor: pointer; padding: 2px; }
.tag-ok { padding: 6px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--green); background: var(--status-pass-bg); }
.badge-mono { font-family: var(--mono); min-width: 50px; text-align: right; }
.drop-row-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.btn-cta-accent { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-size: var(--fs-sm); padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); text-decoration: none; background: var(--accent); color: var(--white); font-weight: 600; transition: background var(--dur) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth); }
.btn-tab-active { padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--white); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; transition: all var(--dur) var(--ease-smooth); }
.btn-tab { padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: var(--fs-sm); transition: all var(--dur) var(--ease-smooth); }
/* Cookie consent bar. Base state is VISIBLE (block) — the markup ships with
   the `hidden` utility class and global.js removes it only when no stored
   decision exists. (Pre-2026-07-17 the base was display:none with no
   visible-state rule, so the banner never appeared at all.) */
.cookie-bar { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--glass-bg); border-top: 1px solid var(--border-mid); backdrop-filter: blur(12px); padding: 11px 24px; font-size: var(--fs-13, 13px); color: var(--text2); line-height: 1.45; }
.cookie-bar__title { color: var(--text); font-weight: 600; }
.cookie-bar__cat { color: var(--text); font-weight: 500; }
.cookie-bar__links { display: block; margin-top: 4px; color: var(--muted2); }
.cookie-bar__body-sm { display: none; }
.cookie-bar__panel { margin-top: 9px; border-top: 1px solid var(--border-mid); padding-top: 9px; }
.cookie-bar__panel-inner { display: grid; gap: 9px; }
.cookie-cat__row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cookie-cat__toggle { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.cookie-cat__toggle:disabled { cursor: default; opacity: .6; }
.cookie-cat__name { color: var(--text); font-weight: 600; font-size: var(--fs-14); }
.cookie-cat__badge { color: var(--muted2); font-size: var(--fs-12, 12px); border: 1px solid var(--border-mid); border-radius: 999px; padding: 1px 8px; }
.cookie-cat__desc { margin: 4px 0 0 28px; color: var(--muted2); font-size: var(--fs-13, 13px); line-height: 1.45; }
.cookie-bar__panel-actions { margin-top: 2px; }
@media (max-width: 600px) {
  .cookie-bar { padding: 10px 14px; font-size: var(--fs-13, 13px); max-height: 82vh; overflow-y: auto; }
  .cookie-bar__body { display: none; }         /* verbose copy → mobile shows the short line */
  .cookie-bar__body-sm { display: inline; color: var(--text2); }
  .cookie-bar__links { margin-top: 2px; }
  .cookie-bar__actions { width: 100%; margin-top: 8px; }
  .cookie-bar__actions button { flex: 1; min-height: 44px; }
  .cookie-bar__panel { margin-top: 8px; padding-top: 8px; }
  .cookie-bar__panel-inner { gap: 9px; }
  .cookie-cat__desc { display: none; }          /* names are self-explanatory on mobile */
  .cookie-cat__name { font-size: var(--fs-13, 13px); }
  .cookie-cat__row { gap: 8px; }
}
.hidden-mb { display: none; margin-bottom: 16px; }
.hidden-mt-fs { display: none; margin-top: 6px; font-size: var(--fs-xs); }
.hidden-mb-m { display: none; margin-bottom: 16px; }
.hidden-mb-mg { display: none; margin: 16px 0; }
.hidden-err { display: none; font-size: var(--fs-xs); color: var(--red); }


/* ── Pass-3 utility classes ─────────────────────────────── */
.stat-val { font-size: 1.5rem; font-weight: 700; }
.stat-accent { color: var(--accent); }
.stat-warning { color: var(--warn); }
.stat-success { color: var(--success); }
.stat-danger  { color: var(--danger); }
.stat-info    { color: var(--accent); }
.stat-pink    { color: var(--red); }
.stat-label   { font-size: .8rem; color: var(--muted); }
.cell-date    { font-size: var(--fs-xs); white-space: nowrap; color: var(--muted); }
.cell-mono-xs { font-size: var(--fs-2xs); font-family: var(--mono, 'JetBrains Mono', monospace); color: var(--muted); }
.cell-mono-trunc { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: var(--fs-2xs); color: var(--muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-mono-ip { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: var(--fs-2xs); color: var(--muted); }
.table-empty  { text-align: center; color: var(--muted); padding: 30px; }
.tab-nav      { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1rem; }
.admin-tab    { padding: .6rem 1.2rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 400; }
.admin-tab.active { color: var(--accent, var(--accent2)); border-bottom-color: var(--accent, var(--accent2)); font-weight: 600; }
.mono-textarea { font-family: var(--mono); font-size: .8rem; }
.grid-2col    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3col    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.link-accent  { color: var(--accent, var(--accent)); }
.link-accent:hover { opacity: .8; }
.text-94      { color: var(--muted); }
.text-64      { color: var(--muted); }
.admin-meta-row { display: flex; gap: 16px; font-size: var(--fs-sm); color: var(--muted); }
.admin-note   { margin-top: 1rem; color: var(--muted); font-size: .85rem; }
.pagination-row { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.btn-page     { min-width: 36px; text-align: center; font-size: var(--fs-xs); }
.color-swatch { display: inline-block; width: 20px; height: 20px; border-radius: var(--radius-xs); vertical-align: middle; }
.color-dot    { display: inline-block; width: 16px; height: 16px; border-radius: var(--radius-xs); vertical-align: middle; }
.color-dot-xs { display: inline-block; width: 14px; height: 14px; border-radius: var(--radius-xs); vertical-align: middle; }
.mb-16        { margin-bottom: 16px; }
.mt-16        { margin-top: 16px; }
.w-60         { width: 60px; }
.w-100        { width: 100px; }
.w-110        { width: 110px; }
.w-150        { width: 150px; }
.w-160        { width: 160px; }
.w-200        { width: 200px; }
.w-220        { width: 220px; }
.w-260        { width: 260px; }
.w-320        { width: 320px; }
.flex-label   { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.admin-log-pre { background: var(--bg); color: var(--text2); padding: 16px; border-radius: var(--radius-sm); overflow-x: auto; max-height: 70vh; overflow-y: auto; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; margin: 0; }
.badge-accent-xs { display: inline-block; background: var(--accent-glow-12); color: var(--accent); padding: var(--badge-padding-sm); border-radius: var(--radius-xs); font-size: var(--fs-2xs); font-weight: 500; }
.badge-tool-xs   { display: inline-block; background: var(--accent-glow-12); color: var(--accent); padding: var(--badge-padding-sm); border-radius: var(--radius-xs); font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; }
.badge-lang-xs   { font-size: var(--fs-2xs); font-weight: 500; color: var(--muted2); }
.chk-accent      { accent-color: var(--accent); width: 18px; height: 18px; }
.font-mono-sm    { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: var(--fs-sm); }
.text-right-tabular { text-align: right; font-variant-numeric: tabular-nums; }
.input-w-sm      { width: 220px; }
.pointer-none    { pointer-events: none; }
/* ── Pass-3 end ──────────────────────────────────────────── */


/* ── Pass-3b utility classes ─────────────────────────────── */
.grid-4col    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ls-8         { letter-spacing: 8px; }
.ls-6         { letter-spacing: 6px; }
.ls-4         { letter-spacing: 4px; }
.font-24      { font-size: 24px; }
.font-20      { font-size: 20px; }
.font-18      { font-size: 18px; }
.lh-18        { line-height: 1.8; }
.mb-12        { margin-bottom: 12px; }
.p-v-30       { padding-top: 30px; padding-bottom: 30px; }
.bar-bg-track { margin-top: 3px; height: 3px; border-radius: 2px; background: var(--border); width: 100%; }
.color-orange { color: var(--orange, var(--orange)); }
.color-green  { color: var(--green, var(--green)); }
.color-yellow { color: var(--yellow, var(--yellow)); }
.color-muted2 { color: var(--muted2); }
.color-accent-bold { color: var(--accent); font-weight: 600; }
.color-warning-bold { color: var(--yellow); font-weight: 600; }
.fw-600       { font-weight: 600; }
.ms-auto      { margin-left: auto; }
.border-top-1 { border-top: 1px solid var(--border); }
.input-select-sm { padding: 6px 10px; border-radius: var(--radius-xs); background: var(--surface2); color: var(--text); border: 1px solid var(--border2); }
.badge-sched  { background: var(--accent-glow-10); color: var(--accent); }
.badge-en     { background: var(--status-pass-bg); color: var(--green); padding: var(--badge-padding-sm); border-radius: var(--radius-xs); font-size: var(--fs-2xs); font-weight: 600; }
.badge-ru     { background: var(--accent-glow-12); color: var(--accent); padding: var(--badge-padding-sm); border-radius: var(--radius-xs); font-size: var(--fs-2xs); font-weight: 600; }
.max-w-240    { max-width: 240px; }
.w-180        { width: 180px; }
.select-lang  { max-width: 240px; }
.hr-border    { border-color: var(--border); margin: 1.5rem 0; }
/* ── Pass-3b end ─────────────────────────────────────────── */


/* ── Pass-3c utility classes ─────────────────────────────── */
.font-mono    { font-family: var(--mono, 'JetBrains Mono', monospace); }
.font-12      { font-size: var(--fs-xs); }
.font-16      { font-size: 16px; }
.icon-16      { width: 16px; height: 16px; }
.icon-18      { width: 18px; height: 18px; }
.icon-20      { width: 20px; height: 20px; }
.word-break-all { word-break: break-all; }
.p-cell       { padding: 8px 12px; }
.fw-800       { font-weight: 800; }
.color-success { color: var(--success, var(--success)); }
.color-expired { color: var(--red); }
.alert-success-custom { background: var(--status-pass-bg); border: 1px solid var(--status-pass-border); padding: 10px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; color: var(--green); }
.flex-sb-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.text-muted-ms { color: var(--muted); margin-left: 12px; }
.empty-log    { color: var(--muted); padding: 20px 0; text-align: center; }
.w-32         { width: 32px; }
.w-80         { width: 80px; }
.w-130        { width: 130px; }
.w-140        { width: 140px; }
.block-info   { background: var(--accent-glow-06); border: 1px solid var(--accent-glow-15); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 20px; font-size: var(--fs-sm); }
.section-head-sm { font-size: var(--fs-14); color: var(--accent); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .5px; }
.cell-code-sm { font-size: var(--fs-xs); color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form-row { display: inline-flex; gap: 4px; align-items: center; }
.select-role-sm { width: 100px; font-size: var(--fs-xs); padding: 2px 4px; }
.topbar-badge-hidden { display: none; }
.score-num-lg { font-size: 56px; font-weight: 800; font-family: var(--mono); line-height: 1; }
.score-num-md { font-size: 28px; font-weight: 700; margin-top: 4px; }
.stat-num-14  { font-size: var(--fs-14); font-weight: 700; }
.redirect-num { font-size: 28px; font-weight: 800; }
.redirect-badge { padding: 6px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; }
.redirect-step { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--fs-xs); font-weight: 700; }
.redirect-code { display: inline-flex; align-items: center; gap: 4px; padding: var(--badge-padding-md); border-radius: var(--radius-xs); font-family: var(--mono); font-weight: 700; font-size: var(--fs-14); }
.robots-directive { font-weight: 600; min-width: 72px; display: inline-block; }
.robots-directive-short { font-weight: 600; }
.protocol-val { font-family: var(--mono); min-width: 50px; text-align: right; }
.protocol-val--total { font-weight: 700; color: var(--text); }
.protocol-val--normal { color: var(--muted2); }
.cat-score    { font-size: var(--fs-14); font-weight: 700; }
.whois-dnssec--signed { color: var(--green); }
.whois-dnssec--unsigned { color: var(--muted2); }
.mb-3-card    { margin-bottom: 1rem; }
/* ── Pass-3c end ─────────────────────────────────────────── */

.badge-sm     { font-size: var(--fs-2xs); padding: var(--badge-padding-sm); border-radius: var(--radius-xs); }
.badge-ok     { background: var(--status-pass-bg); color: var(--green, var(--green)); }
.badge-fail   { background: var(--status-fail-bg); color: var(--red, var(--red)); }

.border-muted-card { border-color: var(--muted) !important; }
.mini-bar { height: 3px; border-radius: 2px; background: var(--accent); }
.sla-big-num { font-size: 48px; font-weight: 700; font-family: var(--mono, 'JetBrains Mono', monospace); }
.sla-td-val  { text-align: center; padding: 10px 8px; font-weight: 600; font-family: var(--mono, 'JetBrains Mono', monospace); }
.sla-td-avg  { text-align: center; padding: 10px 8px; font-family: var(--mono, 'JetBrains Mono', monospace); }
.status-dot  { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.flex-icon   { flex: 0 0 20px; text-align: center; }

.robot-tag    { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); }
.robot-icon   { width: 16px; height: 16px; border-radius: var(--radius-xs); color: var(--white); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: Arial, sans-serif; letter-spacing: -0.5px; }
.robot-status { font-size: var(--fs-2xs); font-weight: 700; }

/* ── Utility: inline-style replacements (CSP unsafe-inline removal) ─────── */
.mt-6        { margin-top: var(--space-6); }
.text-cyan   { color: var(--cyan); }
.text-orange { color: var(--orange); }
.code-api    { font-family: var(--mono); color: var(--cyan); background: var(--surface2); padding: 2px 6px; border-radius: 4px; }
.svg-sprite  { display: none; position: absolute; width: 0; height: 0; overflow: hidden; }
.off-screen  { position: absolute; left: -9999px; }

/* ── Related Articles (footer widget, all pages) ────────── */
.related-articles {
  max-width: 900px;
  margin: 0 auto 0;
  padding: 48px 24px 0;
  border-top: 1px solid var(--border);
}
.related-articles h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px;
}
.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.related-articles__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.related-articles__card:hover {
  border-color: var(--border2);
  background: var(--surface2);
}
.related-articles__tag {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-glow-08, rgba(91,138,248,.08));
  border-radius: var(--radius-xs, 4px);
  padding: var(--badge-padding-sm);
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.related-articles__title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.45;
}
.related-articles__meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: auto;
  padding-top: 4px;
}
.related-articles__all {
  text-align: right;
  padding-bottom: 40px;
}
.related-articles__all a {
  font-size: var(--fs-sm);
  color: var(--muted2);
  text-decoration: none;
  transition: color .15s;
}
.related-articles__all a:hover { color: var(--accent); }
@media (max-width: 768px) {
  .related-articles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .related-articles__grid { grid-template-columns: 1fr; }
  .related-articles { padding: 32px 16px 0; }
}

/* ── Password toggle ──────────────────────────────────────────────────── */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
  flex: 1;
  padding-right: 2.5rem;
}
.password-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
  display: flex;
  align-items: center;
}
.password-toggle:hover { color: var(--text); }
.password-toggle svg { width: 18px; height: 18px; pointer-events: none; }
/* ── Related Articles end ─────────────────────────────────── */

/* ── Fallback toast (inline toast replacement) ────────────────────── */
.toast-fallback {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--surface, #1e293b);
  color: var(--text, #e2e8f0);
  border: 1px solid var(--border, #334155);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  max-width: 340px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
/* ── Fixed toast (integrations copy-key) ──────────────────────────── */
.toast-fixed-tr {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

/* Phosphor icon sizing inside tool cards */
.home-tools-group__icon i { font-size: 22px; line-height: 1; }
.home-tools-group__icon i { font-size: 24px; }

/* Mobile-only language switcher in header (next to burger) */
.topbar-lang-mobile {
  display: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.topbar-lang-mobile:hover {
  background: var(--surface2);
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 900px) {
  .topbar-lang-mobile { display: inline-flex; align-items: center; margin-right: 8px; }
}

/* Hide marketing/edu/related/faq blocks after a tool produces a result.
   JS in global.js sets body.has-tool-result when a #*Results div becomes
   visible with content. Keeps result page compact & fast-scanning. */
body.has-tool-result .edu-blocks-wrap,
body.has-tool-result .related-tools,
body.has-tool-result .faq-section,
body.has-tool-result .seo-section,
body.has-tool-result .tool-edu,
body.has-tool-result .tool-promo { display: none !important; }

/* ── Glossary popover tooltip — hover on /s/glossary-* links ───────────── */
.glossary-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 360px;
  min-width: 260px;
  padding: 14px 16px;
  background: var(--surface2, #1a1e2e);
  border: 1px solid var(--border2, rgba(255,255,255,.12));
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  color: var(--text, #e2e8f0);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;
}
.glossary-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.glossary-tooltip__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #5b8af8);
  margin-bottom: 6px;
  line-height: 1.3;
}
.glossary-tooltip__tldr {
  margin: 0 0 10px;
  color: var(--text, #e2e8f0);
  font-size: 13px;
}
.glossary-tooltip__cta {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent, #5b8af8);
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px solid var(--border, rgba(255,255,255,.07));
  margin-top: 2px;
  width: 100%;
}
.glossary-tooltip__cta:hover { text-decoration: underline; }
.glossary-tooltip__loading {
  color: var(--muted2, #94a3b8);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
  padding: 6px 0;
}
a.has-glossary-popover {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (max-width: 480px) {
  .glossary-tooltip { max-width: calc(100vw - 24px); min-width: 0; }
}

/* ── Newsletter signup strip (above site footer) ─────────────────── */
.newsletter-strip {
  background: linear-gradient(180deg, transparent, rgba(91,138,248,.05));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 16px;
  margin: 48px 0 0;
}
.newsletter-strip__inner {
  max-width: var(--content-width, 1120px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.newsletter-strip__copy {
  flex: 1 1 320px;
  min-width: 0;
}
.newsletter-strip__copy strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 2px;
}
.newsletter-strip__copy span {
  color: var(--muted2);
  font-size: .85rem;
}
.newsletter-strip__form {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.newsletter-strip__form input[type="email"] {
  min-width: 240px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: .9rem;
}
.newsletter-strip__form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}
.newsletter-strip__msg {
  flex: 1 0 100%;
  text-align: center;
  font-size: .85rem;
  min-height: 1em;
}
.newsletter-strip__msg[data-state="ok"]  { color: var(--green, #34d399); }
.newsletter-strip__msg[data-state="err"] { color: var(--red,   #f87171); }
@media (max-width: 560px) {
  .newsletter-strip__form { width: 100%; }
  .newsletter-strip__form input[type="email"] { flex: 1; min-width: 0; }
}
/* Honeypot — hidden from humans, bots fill it and trip server-side check.
   Position off-screen + aria-hidden so screen-readers skip it too. */
.newsletter-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Embed widget anchor — was inline color hint */
.embed-meta-link { color: var(--accent, #5b8af8); }

/* ─────────────────────────────────────────────────────────────────────
 * Wave 70 — Security + Cache header grade cards
 * Uses DESIGN.md tokens via var(--x, #fb) form only.
 * 2026-07-16 redesign: cards stay on neutral --surface; the grade colour
 * lives ONLY in the letter badge and per-row status dots (the old
 * `.grade-letter--x` on the container painted the whole card red/green).
 * Remediation snippets collapse into a native <details>.
 * ───────────────────────────────────────────────────────────────────── */
.grade-security-card,
.grade-cache-card {
  background: var(--surface, #14171f);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  border-radius: var(--radius, 12px);
  padding: 16px;
  margin: 16px 0;
  color: var(--text, #f0f2f8);
}
.grade-security-card__header,
.grade-cache-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.grade-security-card__title,
.grade-cache-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text, #f0f2f8);
}
.grade-security-card__score,
.grade-cache-card__score {
  display: flex;
  align-items: center;
  gap: 10px;
}
.grade-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 8px);
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--surface2, #1b1f2b);
  color: var(--text, #f0f2f8);
  border: 1px solid var(--border2, rgba(255, 255, 255, 0.12));
}
/* Grade colour is scoped to the badge element only — never the card. */
.grade-letter.grade-letter--a { background: var(--green, #3dd68c); color: var(--bg, #0c0e16); border-color: transparent; }
.grade-letter.grade-letter--b { background: var(--green, #3dd68c); color: var(--bg, #0c0e16); border-color: transparent; opacity: 0.85; }
.grade-letter.grade-letter--c { background: var(--yellow, #f5c842); color: var(--bg, #0c0e16); border-color: transparent; }
.grade-letter.grade-letter--d { background: var(--yellow, #f5c842); color: var(--bg, #0c0e16); border-color: transparent; opacity: 0.85; }
.grade-letter.grade-letter--e { background: var(--red, #f47272); color: var(--bg, #0c0e16); border-color: transparent; opacity: 0.85; }
.grade-letter.grade-letter--f { background: var(--red, #f47272); color: var(--bg, #0c0e16); border-color: transparent; }
.grade-points {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.8125rem;
  color: var(--muted, #8494ae);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grade-points b {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text, #f0f2f8);
}
.grade-breakdown {
  list-style: none;
  padding: 0;
  margin: 0;
}
.grade-breakdown__row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 7px 2px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  font-size: 0.875rem;
}
.grade-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill, 100px);
  background: var(--border3, #33353b);
  align-self: center;
}
.grade-breakdown__row--pass    .grade-dot { background: var(--green, #3dd68c); }
.grade-breakdown__row--warning .grade-dot { background: var(--yellow, #f5c842); }
.grade-breakdown__row--fail    .grade-dot { background: var(--red, #f47272); }
.grade-breakdown__name {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text, #f0f2f8);
  overflow-wrap: anywhere;
}
.grade-breakdown__pts {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.8125rem;
  text-align: right;
  color: var(--muted2, #8e9bb5);
  font-variant-numeric: tabular-nums;
}
.grade-breakdown__row--pass .grade-breakdown__pts { color: var(--green, #3dd68c); }
.grade-breakdown__note {
  grid-column: 2 / -1;
  font-size: 0.8125rem;
  color: var(--muted, #8494ae);
  line-height: 1.45;
}
.grade-cache-card__verdict {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 100px);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 8px;
  background: var(--surface2, #1b1f2b);
}
.grade-cache-card__verdict--optimal    { color: var(--green, #3dd68c); }
.grade-cache-card__verdict--improvable { color: var(--yellow, #f5c842); }
.grade-cache-card__verdict--missing    { color: var(--red, #f47272); }
.grade-remediation {
  background: var(--surface, #14171f);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  border-radius: var(--radius, 12px);
  margin: 16px 0;
}
.grade-remediation__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text, #f0f2f8);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.grade-remediation__title::-webkit-details-marker { display: none; }
.grade-remediation__title::before {
  content: '\25be';
  color: var(--muted, #8494ae);
  transition: transform 0.15s ease-out;
}
.grade-remediation[open] > .grade-remediation__title::before {
  transform: rotate(180deg);
}
.grade-remediation__title:hover { color: var(--accent, #59a8ff); }
.grade-remediation__count {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted2, #8e9bb5);
  background: var(--surface2, #1b1f2b);
  border-radius: var(--radius-pill, 100px);
  padding: 1px 8px;
}
.grade-remediation__body {
  padding: 0 16px 16px;
}
.grade-remediation-item {
  padding: 12px;
  margin-bottom: 8px;
  background: var(--surface2, #1b1f2b);
  border-radius: var(--radius-sm, 8px);
  border-left: 3px solid var(--accent, #59a8ff);
}
.grade-remediation-item__header {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.9375rem;
  color: var(--text, #f0f2f8);
}
.grade-remediation-item__header code {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  background: var(--surface3, #252a39);
  padding: 2px 6px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.8125rem;
  color: var(--cyan, #2dd4bf);
}
.grade-remediation-item__why {
  font-size: 0.8125rem;
  color: var(--muted, #8494ae);
  margin-bottom: 8px;
  line-height: 1.5;
}
.grade-snippet {
  background: var(--surface3, #252a39);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  margin: 4px 0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.8125rem;
  overflow-x: auto;
  white-space: pre;
  color: var(--text2, #c5ccdf);
}
.grade-snippet code {
  font-family: inherit;
  background: transparent;
  padding: 0;
  white-space: pre;
}
@media (max-width: 600px) {
  .grade-security-card,
  .grade-cache-card {
    padding: 12px;
  }
  .grade-remediation__title { padding: 12px; }
  .grade-remediation__body  { padding: 0 12px 12px; }
  .grade-breakdown__row {
    grid-template-columns: 7px minmax(0, 1fr) auto;
    font-size: 0.8125rem;
  }
  .grade-letter {
    width: 34px;
    height: 34px;
    font-size: 1.125rem;
  }
}


/* Impersonation banner — admin "view as user" (audit 2026-07-08) */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--yellow, #fbbf24);
  color: var(--bg, #0b0d14);
  font-size: 14px;
  font-weight: 600;
}
.impersonation-banner__stop {
  color: var(--bg, #0b0d14);
  text-decoration: underline;
  white-space: nowrap;
}

/* ═══ 2026-07-16 FOOTER VARIANT B «CTA-first» (approved mockup) ═══ */

/* CTA band: horizontal — icon chip | text | buttons */
.footer-cta--band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: center;
  text-align: left;
  padding: 40px 44px;
}
.footer-cta--band h2 { margin: 0 0 8px; }
.footer-cta--band p { margin: 0; }
.footer-cta__icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--accent);
  background: var(--accent-glow-06);
  border: 1px solid var(--accent-glow-30);
  border-radius: var(--radius-xl);
}
.footer-cta--band .footer-cta__buttons { flex-wrap: nowrap; }
@media (max-width: 900px) {
  .footer-cta--band { grid-template-columns: 1fr; text-align: center; }
  .footer-cta__icon { margin: 0 auto; }
  .footer-cta--band .footer-cta__buttons { flex-wrap: wrap; justify-content: center; }
}

/* Brand-column newsletter (replaces the standalone strip) */
.footer-nl { margin-top: var(--space-5); }
.footer-nl__copy { font-size: var(--fs-sm); color: var(--muted2); margin: 0 0 8px; }
.footer-nl__form { display: flex; gap: 8px; align-items: stretch; max-width: 260px; }
.footer-nl__form input[type=email] {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth);
}
.footer-nl__form input[type=email]:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow-30); }
.footer-nl__btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-smooth), background var(--dur) var(--ease-smooth);
}
.footer-nl__btn:hover { border-color: var(--accent); background: var(--accent-glow-08); }
.footer-nl__msg { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; min-height: 14px; }
.footer-nl__msg[data-state="ok"] { color: var(--green); }
.footer-nl__msg[data-state="err"] { color: var(--red); }

/* 4 link columns with hairline dividers + per-link icons */
.footer-grid--links { grid-template-columns: repeat(4, 1fr); }
.footer-grid--links .footer-col { border-left: 1px solid var(--border); padding-left: var(--space-5); }
.footer-grid--links .footer-col:first-child { border-left: none; padding-left: 0; }
.footer-grid--links .footer-col a { display: flex; align-items: center; gap: 8px; }
.footer-col__ic { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.55; }

/* Bottom bar: © + consent left, meta + install button right */
.footer-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.footer-bottom__left { max-width: 640px; }
.footer-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--mono); }

/* Mobile: two link columns instead of one giant stack (was ~3 900px tall) */
@media (max-width: 900px) {
  .footer-grid--links { grid-template-columns: repeat(2, 1fr); }
  .footer-grid--links .footer-col:nth-child(odd) { border-left: none; padding-left: 0; }
  .footer-grid--links .footer-col:nth-child(even) { border-left: 1px solid var(--border); padding-left: var(--space-5); }
}
@media (max-width: 600px) {
  .footer-grid.footer-grid--links { grid-template-columns: 1fr 1fr !important; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; align-items: center; }
  .footer-bottom__left { text-align: center; }
}

/* Variant B fixes: force the 4-track grid past the base .footer-grid rule
   (equal-specificity cascade proved unreliable through the css-bundle),
   and the compact pSEO hubs strip. */
.footer-top .footer-grid--links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-hubs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.footer-hubs a {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-decoration: none;
}
.footer-hubs a:hover { color: var(--accent); }
@media (max-width: 900px) {
  /* !important: the legacy ≤768 rule `.footer-grid { 1fr !important }`
     (see ~L2221) otherwise collapses the links grid to one giant column. */
  .footer-top .footer-grid.footer-grid--links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .footer-top .footer-grid.footer-grid--links { grid-template-columns: 1fr 1fr !important; }
}


/* bundle chunk */
/* ── PWA: Update Banner ─────────────────────────────────────────────── */
.pwa-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px var(--black-40);
  z-index: var(--z-top);
  font-size: .875rem;
  animation: pwa-slide-up .3s ease;
  max-width: calc(100vw - 2rem);
}
.pwa-banner--changelog {
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.25rem;
  max-width: 380px;
  width: 100%;
}
@keyframes pwa-slide-up {
  from { transform: translateX(-50%) translateY(100%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.pwa-banner__content { width: 100%; }
.pwa-banner__title {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .5rem;
  color: var(--text);
}
.pwa-banner__changes {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
  font-size: .8rem;
  color: var(--muted2);
  line-height: 1.5;
}
.pwa-banner__changes li { margin-bottom: 2px; }
.pwa-banner__actions {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}
.pwa-banner__btn {
  padding: .4rem .9rem;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s;
}
.pwa-banner__btn:hover { opacity: .85; }
.pwa-banner__later {
  padding: .4rem .9rem;
  background: none;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.pwa-banner__later:hover { color: var(--text); border-color: var(--text); }
.pwa-banner__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: .25rem;
  line-height: 1;
  transition: color .2s;
}
.pwa-banner__close:hover { color: var(--text); }

/* ── PWA: Install Button (topbar) ──────────────────────────────────── */
.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.pwa-install-btn:hover {
  background: var(--surface2);
  border-color: var(--accent);
}
.pwa-install-btn svg {
  display: block;
}

@media (max-width: 768px) {
  .pwa-banner {
    bottom: 1rem;
    font-size: .8rem;
    gap: .5rem;
    padding: .6rem .8rem;
  }
  .pwa-banner--changelog {
    max-width: calc(100vw - 2rem);
    padding: .8rem 1rem;
  }
}

/* Footer placement (owner decision 2026-07-16) — see pwa-install.css. */
.pwa-install-btn--footer {
  width: auto;
  height: auto;
  gap: 6px;
  padding: 4px 10px;
  color: var(--muted2);
  font-size: var(--fs-xs);
}
.pwa-install-btn--footer:hover { color: var(--accent); }


/* bundle chunk */
/* ── Footer Enhanced — UI/UX Improvements ──────────────────────────── */

/* ── Footer CTA Banner (non-logged-in) ─────────────────────────────── */
.footer-cta {
  position: relative;
  overflow: hidden;
  max-width: 1100px;
  margin: 64px auto 0;
  padding: 64px 40px;
  text-align: center;
  background: linear-gradient(135deg, var(--accent-glow-08) 0%, var(--accent-glow-06) 100%);
  border: 1px solid var(--accent-glow-15);
  border-radius: var(--radius-lg);
}
.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, var(--accent-glow-08) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 50%, var(--accent-glow-06) 0%, transparent 55%);
  pointer-events: none;
}
.footer-cta h2 {
  position: relative;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.footer-cta p {
  position: relative;
  color: var(--muted2);
  font-size: 1rem;
  margin: 0 0 28px;
  line-height: 1.6;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.footer-cta__buttons {
  position: relative;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-cta__btn {
  padding: 16px 32px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--white);
  box-shadow: 0 2px 12px var(--accent-glow-20);
}
.footer-cta__btn--primary:hover {
  box-shadow: 0 8px 28px var(--accent-glow-30);
  transform: translateY(-2px);
}
.footer-cta__btn--outline {
  color: var(--accent);
  border: 1px solid var(--accent-glow-30);
  background: transparent;
}
.footer-cta__btn--outline:hover {
  background: var(--accent-glow-08);
  border-color: var(--accent-glow-30);
  transform: translateY(-1px);
}

/* ── Site Footer ───────────────────────────────────────────────────── */
.site-footer {
  margin-top: 80px;
  border-top: 1px solid var(--border);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--black-50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-footer a {
  color: var(--muted2);
  text-decoration: none;
  transition: color .2s cubic-bezier(.4,0,.2,1);
}
.site-footer a:hover { color: var(--accent); }

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

/* ── Footer Top — 4-column grid ────────────────────────────────────── */
.footer-top {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

/* Brand column */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .2s;
}
.footer-logo:hover {
  transform: translateY(-1px);
}
.footer-logo-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
}
.footer-logo-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
}
.footer-logo-text span { color: var(--accent); }
.footer-tagline {
  font-size: .8125rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Telegram subscribe CTA (site-wide, in footer brand) */
.footer-tg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 14px;
  border: 1px solid var(--border2, rgba(255, 255, 255, .12));
  border-radius: var(--radius-sm, 7px);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--accent, #5b8af8);
  background: color-mix(in srgb, var(--accent, #5b8af8) 10%, transparent);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.footer-tg:hover {
  background: color-mix(in srgb, var(--accent, #5b8af8) 20%, transparent);
  border-color: var(--accent, #5b8af8);
  transform: translateY(-1px);
}
.footer-tg:focus-visible {
  outline: 2px solid var(--accent, #5b8af8);
  outline-offset: 2px;
}
.footer-tg__icon {
  flex-shrink: 0;
}

/* Social row (Telegram + Dzen) in the footer brand column.
   Both links share the .footer-tg pill treatment (single accent, no
   per-brand colours) so the block reads as one system; the row owns the
   top margin instead of each pill. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.footer-social .footer-tg {
  margin-top: 0;
}

/* Links grid — 3 columns */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-col strong {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
/* Larger touch targets */
.footer-col a {
  font-size: .8125rem;
  color: var(--muted2);
  padding: 8px 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  transition: color .2s cubic-bezier(.4,0,.2,1), padding-left .2s;
}
.footer-col a:hover {
  color: var(--accent);
  padding-left: 4px;
}

/* ── Bottom bar ────────────────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.footer-copy {
  font-size: .75rem;
  color: var(--muted);
  margin: 0;
}
.footer-copy a { color: var(--muted2); }
.footer-copy a:hover { color: var(--accent); }
.footer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .6875rem;
  color: var(--muted);
  font-family: var(--mono);
}
.footer-dot { opacity: .4; }

/* ── Responsive — Footer ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-cta { padding: 40px 24px; margin-top: 48px; border-radius: var(--radius-xl); }
  .footer-cta h2 { font-size: 1.25rem; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-inner { padding: 40px 16px 28px; }
  .footer-cta { padding: 32px 20px; }
  .footer-cta h2 { font-size: 1.1rem; }
  .footer-cta__btn { width: 100%; }
}

/* ── Focus-visible (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--accent, var(--accent));
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}


/* bundle chunk */
/* ═══════════════════════════════════════════════════════════════════════════
   CHECK TIPS — Tooltip system for check results
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tip icon button (?) */
.tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  color: var(--muted2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: all .2s;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
  line-height: 1;
  background: transparent;
  padding: 0;
  position: relative;
}
.tip-icon:hover,
.tip-icon:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow-08);
  outline: none;
}
.tip-icon[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow-12);
}

/* Popover */
.tip-popover {
  position: absolute;
  z-index: var(--z-tooltip);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm, 8px);
  padding: 16px 16px;
  max-width: 360px;
  min-width: 240px;
  box-shadow: 0 8px 32px var(--black-35);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  animation: tipFadeIn .15s ease;
  pointer-events: auto;
}

@keyframes tipFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tip-popover__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: 6px;
  color: var(--text);
}

.tip-popover__desc {
  color: var(--muted2);
  margin-bottom: 0;
}

.tip-popover__fix {
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--red, var(--red));
  background: var(--status-fail-bg);
  border-radius: 0 4px 4px 0;
  font-size: var(--fs-xs);
  color: var(--muted2);
}

.tip-popover__fix-label {
  font-weight: 600;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--red, var(--red));
  margin-bottom: 4px;
}

.tip-popover__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  transition: opacity .2s;
}
.tip-popover__link:hover {
  opacity: .8;
  text-decoration: underline;
}

/* Fix for health check items — ensure flex layout works */
.health-check-item .tip-icon {
  margin-left: 4px;
}

/* Fix for header rows */
.header-row .tip-icon {
  margin-left: 4px;
}

/* DNS type header tips */
.dns-type-header .tip-icon {
  margin-left: 6px;
}

/* SSL grid tips */
.ssl-item .tip-icon {
  margin-left: 4px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .tip-popover {
    max-width: calc(100vw - 32px);
    min-width: 200px;
    left: 8px !important;
    right: 8px !important;
  }
}


/* bundle chunk */
/* Plan limit toast notification */
.limit-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; background: var(--surface, var(--surface2)); border: 1px solid var(--status-fail-border); border-radius: var(--radius-md); box-shadow: 0 8px 32px var(--black-40); z-index: var(--z-top); max-width: 480px; animation: limitSlideIn 0.3s ease; }
.limit-toast--hide { opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
.limit-toast__icon { font-size: 1.3rem; flex-shrink: 0; }
.limit-toast__text { color: var(--text, var(--muted2)); font-size: 0.9rem; line-height: 1.4; }
.limit-toast__btn { flex-shrink: 0; padding: 0.35rem 0.9rem; background: var(--accent); color: var(--white); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: opacity 0.2s; }
.limit-toast__btn:hover { opacity: 0.85; }
.limit-toast__close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; padding: 0 0.25rem; flex-shrink: 0; }
.limit-toast__close:hover { color: var(--text); }
@keyframes limitSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .limit-toast { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } }


/* bundle chunk */
/* ── Saved Checks (Presets) ────────────────────────────────────── */
.saved-checks {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.saved-checks__save {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.saved-checks__save:hover {
  border-color: var(--accent);
  color: var(--text);
}
.saved-checks__list {
  width: 100%;
  display: none;
}
.saved-checks__title {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.saved-checks__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border0);
}
.saved-checks__name {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-checks__load {
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: var(--fs-2xs);
  padding: var(--badge-padding-sm);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.saved-checks__load:hover { background: var(--accent-glow-10); }
.saved-checks__del {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.saved-checks__del:hover { color: var(--danger); }


/* bundle chunk */
/* ── Light Theme Override ──────────────────────────────────────── */
[data-theme="light"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #1a202c;
  --muted: #718096;
  --muted2: #a0aec0;
  --accent: #3b6ce7;
  --accent-hover: #2d5bd0;
  --card-bg: #ffffff;
  --card-hover-border: rgba(59,108,231,0.3);
  --section-alt: #edf2f7;
  --gradient-hero: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);

  /* Surfaces */
  --surface2: #eef1f8;
  --surface3: #e4e8f2;

  /* Borders */
  --border2: rgba(0, 0, 0, 0.12);
  --border3: rgba(0, 0, 0, 0.06);

  /* Text */
  --text2: #5a6376;

  /* Status backgrounds */
  --status-pass-bg: rgba(22, 163, 74, 0.10);
  --status-fail-bg: rgba(220, 38, 38, 0.10);
  --status-warn-bg: rgba(217, 119, 6, 0.10);
  --status-info-bg: rgba(37, 99, 235, 0.10);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --bg-header:  rgba(255, 255, 255, 0.9);

  /* Accent */
  --accent2: #3b6de8;

  color-scheme: light;
}
[data-theme="light"] .site-header,
[data-theme="light"] .header {
  background: var(--bg-header);
  border-bottom-color: var(--border);
}
[data-theme="light"] .card,
[data-theme="light"] .tool-box {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] code,
[data-theme="light"] pre {
  background: var(--section-alt);
  color: var(--text);
}
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: var(--white);
}
[data-theme="light"] .btn-outline {
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .footer {
  background: var(--section-alt);
  border-top-color: var(--border);
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
}


/* bundle chunk */
/* ── Educational info blocks (shared across tool pages) ─────────────── */

/* Outer wrapper — adds top spacing from tool results above */
.edu-blocks-wrap {
  margin-top: 2.5rem;
}

/* Section wrapper */
.edu-section {
  max-width: var(--content-width, 1100px);
  margin: 0 auto;
  padding: 0 1.5rem;
  margin-bottom: 2.5rem;
}

/* Section header */
.edu-header {
  text-align: center;
  margin-bottom: 28px;
}
.edu-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.edu-header p {
  font-size: var(--fs-base);
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}
.edu-header p code {
  color: var(--accent);
  font-size: var(--fs-sm);
}

/* ── Info strip (4 key facts) ──────────────────────────────────────── */
.edu-info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.edu-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px;
  background: var(--surface2, var(--border0));
  border: 1px solid var(--border, var(--border-mid));
  border-radius: var(--radius-md);
  /* 2026-04-29 mobile fix: grid items default to min-width:auto which
     prevents them shrinking below their content width — overflowing
     parent on narrow viewports. min-width:0 lets the grid actually
     reflow, and overflow-wrap on text children allows long words
     (URLs, technical terms) to break. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.edu-info-item > * { min-width: 0; }
.edu-info-icon {
  font-size: 20px;
  min-width: 28px;
  line-height: 1.2;
  flex-shrink: 0;
}
.edu-info-item strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text);
  margin-bottom: 2px;
}
.edu-info-item span {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.4;
}

/* ── Feature grid (4 cards) ────────────────────────────────────────── */
.edu-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.edu-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edu-feature-icon {
  font-size: 24px;
  line-height: 1;
}
.edu-feature-card h3 {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.edu-feature-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.edu-feature-card p a {
  color: var(--accent);
  text-decoration: none;
}
.edu-feature-card p a:hover { text-decoration: underline; }

/* ── Compare section (2 cards side-by-side) ────────────────────────── */
.edu-compare-wrap {
  margin-bottom: 36px;
}
.edu-compare-wrap h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  text-align: center;
}
.edu-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.edu-compare-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.edu-compare-card--primary {
  border-color: var(--accent-glow-30);
  background: var(--border0);
}
.edu-compare-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--mono, monospace);
  padding: var(--badge-padding-md);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
}
.edu-compare-badge--muted {
  background: var(--border);
  color: var(--muted);
}
.edu-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edu-compare-list li {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}
.edu-compare-list li::before {
  content: "\00b7";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ── Two-column: Mistakes + Best Practices ─────────────────────────── */
.edu-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.edu-mistakes-block h2,
.edu-practices-block h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}
.edu-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edu-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.edu-list-icon {
  font-size: var(--fs-14);
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  text-align: center;
}
.edu-list-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.edu-list-item strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.edu-list-item span {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.45;
}
.edu-list-item span code {
  color: var(--accent);
  font-size: var(--fs-2xs);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .edu-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .edu-info-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .edu-compare-grid { grid-template-columns: 1fr; }
  .edu-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .edu-info-strip { grid-template-columns: 1fr 1fr; }
  .edu-feature-grid { grid-template-columns: 1fr; }
}

/* ===== Trust strip ===== */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:24px 0}
.trust-strip__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.trust-strip__icon{width:32px;height:32px;color:var(--accent)}
.trust-strip__value{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text)}
.trust-strip__label{font-size:13px;color:var(--muted2)}
@media(max-width:768px){.trust-strip{grid-template-columns:repeat(2,1fr)}}

/* ===== How it works steps — horizontal compact card with connector ===== */
.how-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:24px 0;align-items:stretch}
.how-step{display:flex;flex-direction:row;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);position:relative;min-height:64px;transition:border-color .2s,transform .2s}
.how-step:hover{border-color:var(--border2)}
.how-step__num{flex-shrink:0;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);background:rgba(91,138,248,.12);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1}
.how-step__icon{flex-shrink:0;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.how-step__icon i{display:inline-flex}
.how-step__title{flex:1;font-size:14px;font-weight:600;color:var(--text);margin:0;line-height:1.35}
/* Connector arrow between cards (desktop only) */
.how-step:not(:last-child)::after{content:'';position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:12px;height:2px;background:linear-gradient(90deg,var(--border2),transparent);pointer-events:none;z-index:1}
@media(max-width:900px){.how-steps{grid-template-columns:1fr;gap:10px}.how-step:not(:last-child)::after{display:none}.how-step{min-height:56px;padding:12px 14px}}

/* ===== Use Cases grid ===== */
.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.use-case-card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s}
.use-case-card:hover{border-color:var(--border2)}
.use-case-card__icon{font-size:24px}
.use-case-card__title{font-size:15px;font-weight:600;color:var(--text);margin:0}
.use-case-card__sub{font-size:13px;color:var(--muted2);margin:0}

/* ===== Page CTA ===== */
.page-cta{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px;background:linear-gradient(135deg,rgba(91,138,248,.08),rgba(124,96,245,.08));border:1px solid var(--border2);border-radius:var(--radius);margin:32px 0;text-align:center}
.page-cta__title{font-size:20px;font-weight:600;color:var(--text);margin:0}
.page-cta__desc{font-size:14px;color:var(--muted2);margin:0;max-width:520px}
.page-cta__btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--accent);color:var(--white, #fff);border-radius:var(--radius-sm);font-weight:600;text-decoration:none;transition:background .2s}
.page-cta__btn:hover{background:var(--accent2, #7c60f5)}


/* bundle chunk */
/* Enterno.io Toolkit Components — shared by ent-toolkit.js */

/* ── Toast notification ─────────────────────────────────── */
.ent-toast {
  position: fixed;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: var(--radius-sm, 8px);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 500;
  color: var(--text, var(--text2));
  background: var(--surface2, var(--surface2));
  border: 1px solid var(--border, var(--border));
  box-shadow: var(--shadow-lg, 0 8px 32px var(--black-40));
  z-index: var(--z-toast);
  transition: bottom 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.ent-toast--visible { bottom: 24px; pointer-events: auto; }
.ent-toast--success { border-color: var(--green, var(--green)); }
.ent-toast--error   { border-color: var(--red, var(--red)); }
.ent-toast--warning { border-color: var(--yellow, var(--yellow)); }
.ent-toast--info    { border-color: var(--accent, var(--accent)); }

/* ── Badge ──────────────────────────────────────────────── */
.ent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--badge-padding);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ent-badge--pass, .ent-badge--ok, .ent-badge--success {
  background: var(--status-pass-bg);
  color: var(--green, var(--green));
}
.ent-badge--warn, .ent-badge--warning {
  background: var(--status-warn-bg);
  color: var(--yellow, var(--yellow));
}
.ent-badge--fail, .ent-badge--error, .ent-badge--critical {
  background: var(--status-fail-bg);
  color: var(--red, var(--red));
}
.ent-badge--info {
  background: var(--accent-glow-12);
  color: var(--accent, var(--accent));
}

/* ── Score circle ───────────────────────────────────────── */
.ent-score circle:last-of-type {
  transition: stroke-dashoffset 0.8s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}


/* bundle chunk */
/**
 * Enterno.io Shared CSS Components
 *
 * Standardized components used across tool pages.
 * BEM naming: .ent-{component}, .ent-{component}__{element}, .ent-{component}--{modifier}
 * Use alongside per-page CSS for tool-specific overrides.
 */

/* ── Data Table ─────────────────────────────────────────── */
.ent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-family: var(--mono, monospace);
}
.ent-table th {
  text-align: left;
  padding: 10px 16px;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: var(--border0);
}
.ent-table td {
  padding: 10px 16px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  word-break: break-all;
}
.ent-table tr:last-child td { border-bottom: none; }
.ent-table tbody tr:nth-child(even) td { background: var(--border0); }
.ent-table--sans { font-family: var(--sans, system-ui); }
.ent-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
@media (max-width: 640px) {
  .ent-table th, .ent-table td { padding: 8px 10px; font-size: var(--fs-xs); }
}

/* ── Tabs ───────────────────────────────────────────────── */
.ent-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ent-tabs::-webkit-scrollbar { display: none; }
.ent-tab {
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.ent-tab:hover { color: var(--text); }
.ent-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.ent-tab__count {
  font-size: var(--fs-2xs);
  background: var(--border);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
}
.ent-tab--active .ent-tab__count {
  background: var(--accent-glow-15);
  color: var(--accent);
}
.ent-panel { display: none; }
.ent-panel--active { display: block; }

/* ── Collapsible / Details ──────────────────────────────── */
.ent-collapse {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 8px;
  overflow: hidden;
}
.ent-collapse summary,
.ent-collapse__header {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  transition: background 0.15s;
  list-style: none;
}
.ent-collapse summary::-webkit-details-marker { display: none; }
.ent-collapse summary::before,
.ent-collapse__header::before {
  content: '\25B6';
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s;
}
.ent-collapse[open] summary::before { transform: rotate(90deg); }
.ent-collapse summary:hover,
.ent-collapse__header:hover { background: var(--surface3); }
.ent-collapse__body {
  padding: 16px 16px;
  border-top: 1px solid var(--border);
}

/* ── Status Badge (already in ent-toolkit.css, extended here) */
.ent-badge--skip {
  background: var(--border2);
  color: var(--muted);
}
.ent-badge--lg {
  font-size: var(--fs-sm, 0.875rem);
  padding: 4px 16px;
}

/* ── Check List (pass/warn/fail items) ──────────────────── */
.ent-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ent-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.ent-checklist__item:last-child { border-bottom: none; }
.ent-checklist__icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.ent-checklist__text { flex: 1; min-width: 0; }
.ent-checklist__name { font-weight: 600; font-size: var(--fs-14); color: var(--text); }
.ent-checklist__detail { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.ent-checklist__pts {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  font-family: var(--mono, monospace);
  white-space: nowrap;
}

/* ── Category Card (grouped score section) ──────────────── */
.ent-cat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 16px;
  overflow: hidden;
}
.ent-cat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  background: var(--surface2);
}
.ent-cat-card__name { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.ent-cat-card__score { font-weight: 700; font-size: var(--fs-base); font-family: var(--mono, monospace); }

/* ── Progress Bar ───────────────────────────────────────── */
.ent-bar {
  height: 6px;
  background: var(--surface3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ent-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

/* ── Summary Strip (score hero at top of results) ───────── */
.ent-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  margin-bottom: 24px;
}
.ent-summary__score { flex-shrink: 0; }
.ent-summary__info { flex: 1; min-width: 0; }
.ent-summary__grade {
  display: inline-block;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-14);
}
.ent-summary__meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; }
@media (max-width: 480px) {
  .ent-summary { flex-direction: column; text-align: center; gap: 16px; }
}

/* ── Empty State ────────────────────────────────────────── */
.ent-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.ent-empty__icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.ent-empty__title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ent-empty__text { font-size: var(--fs-14); max-width: 400px; margin: 0 auto; }

/* ── Result Animations ──────────────────────────────────── */
@keyframes ent-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ent-fadein {
  animation: ent-fadeIn 0.35s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}
.ent-fadein-1 { animation-delay: 0s; }
.ent-fadein-2 { animation-delay: 0.06s; }
.ent-fadein-3 { animation-delay: 0.12s; }
.ent-fadein-4 { animation-delay: 0.18s; }
.ent-fadein-5 { animation-delay: 0.24s; }

/* ── Scrollable table shadows (mobile) ──────────────────── */
.ent-table-wrap {
  position: relative;
}
.ent-table-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(to left, var(--surface), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.ent-table-wrap--scrollable::after { opacity: 1; }

/* ── Mobile UX Improvements ─────────────────────────────── */

/* Touch targets: minimum 44px */
@media (max-width: 768px) {
  .ent-tab { min-height: 44px; padding: 10px 16px; }
  .ent-collapse summary { min-height: 44px; }
  .ent-checklist__item { padding: 12px 10px; }
  .export-btn, .share-btn { min-height: 44px; min-width: 44px; }
  .check-btn, .btn-primary { min-height: 48px; font-size: 16px; }
  .input { min-height: 48px; font-size: 16px; }
}

/* Scrollable tables with snap */
@media (max-width: 640px) {
  .ent-table-wrap { margin: 0 -16px; padding: 0 16px; }
}

/* Swipeable tabs */
.ent-tabs {
  scroll-snap-type: x mandatory;
}
.ent-tab {
  scroll-snap-align: start;
}

/* Auto-scroll to results */
.tool-results-target {
  scroll-margin-top: 16px;
}

/* Input modes for better mobile keyboards */
/* Applied via HTML: inputmode="url" on URL inputs */

/* Bottom safe area for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Sticky submit on long forms (mobile) */
@media (max-width: 640px) {
  .ent-form--sticky-submit {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bg);
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }
}

/* ── Accessibility ──────────────────────────────────────── */

/* Focus indicators */
:focus-visible {
  outline: 2px solid var(--accent, var(--accent));
  outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius-sm, 8px);
  z-index: var(--z-skip);
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms \!important;
    animation-iteration-count: 1 \!important;
    transition-duration: 0.01ms \!important;
  }
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Error Pages (404, 500) ─────────────────────────────── */
.error-page-code {
  font-size: clamp(48px, 10vw, 80px);
  font-weight: 700;
  color: var(--accent);
  font-family: var(--mono);
  line-height: 1;
  margin-bottom: 8px;
}
.error-page-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.error-page-desc { color: var(--muted2); margin-bottom: 24px; max-width: 460px; margin-left: auto; margin-right: auto; }
.error-page-suggest { margin-bottom: 20px; }
.error-page-popular { margin-bottom: 28px; }
.error-page-suggest-title { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.error-page-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.error-page-link {
  padding: 6px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text2);
  text-decoration: none;
  transition: all 0.15s;
}
.error-page-link:hover { color: var(--accent); border-color: var(--accent-glow-30); background: var(--accent-glow-06); }
.error-page-btn { margin-top: 8px; }
.tool-hero .card { text-align: center; }

/* ── Result Card ──────────────────────────────────────────── */
.ent-result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: blur(8px);
  margin-bottom: var(--space-4);
}
.ent-result-card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.ent-result-card__body {
  padding: var(--space-5);
}
.ent-result-card__title {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text);
  margin: 0;
}
.ent-result-card--accent {
  border-color: var(--accent-glow-20);
  box-shadow: 0 0 0 1px var(--accent-glow-10);
}

/* ── Stat Card ──────────────────────────────────────────────── */
.ent-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}
.ent-stat-card__value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
  line-height: 1;
}
.ent-stat-card__label {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ent-stat-card--accent .ent-stat-card__value { color: var(--accent); }
.ent-stat-card--success .ent-stat-card__value { color: var(--success); }
.ent-stat-card--warn    .ent-stat-card__value { color: var(--status-warn); }
.ent-stat-card--fail    .ent-stat-card__value { color: var(--status-fail); }

/* ── Status Dot ─────────────────────────────────────────────── */
.ent-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.ent-status-dot--up    { background: var(--success);    box-shadow: 0 0 8px var(--status-pass-bg); }
.ent-status-dot--down  { background: var(--red);         box-shadow: 0 0 8px var(--status-fail-bg); }
.ent-status-dot--warn  { background: var(--yellow);      box-shadow: 0 0 8px var(--status-warn-bg); }
.ent-status-dot--unknown { background: var(--muted); }
.ent-status-dot--pulse { animation: ent-dot-pulse 2s infinite; }
@keyframes ent-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Section Header ─────────────────────────────────────────── */
.ent-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.ent-section-header__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.ent-section-header__action {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .ent-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* Shared cabinet page header — used by /incidents, /sessions, /webhook-logs, etc.
   Individual pages may override via their own `.<page>-page .page-header` selector. */
.page-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}
.page-header__desc {
  margin: 0;
  color: var(--muted2);
  font-size: 13.5px;
  line-height: 1.55;
}
.page-header__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header__row > div:first-child { min-width: 0; flex: 1 1 auto; }

/* Horizontal-scroll wrapper for dense tables on narrow viewports */
.table-responsive {
  overflow-x: auto;
  border-radius: 10px;
}
.table-responsive table { min-width: 720px; }
@media (max-width: 900px) {
  .table-responsive { border: 1px solid var(--border); }
}

/* Shared tool progress bar — used by /ping, /spam, /rkn, /ssl, /dns, etc.
   Markup: <section class="tool-progress hidden"><div class="tool-progress-bar">
             <div class="tool-progress-fill"></div></div>
             <p class="tool-progress-text"></p></section>
   Driven by window.Ent.progress.show()/hide()/setText() in assets/js/lib/progress.js */
.tool-progress {
  margin: 14px 0;
}
.tool-progress .card,
.tool-progress.card {
  padding: 18px;
}
.tool-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg, #0b0d14);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.tool-progress-fill {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--accent, #5b8af8), var(--cyan, #22d3ee));
  border-radius: 4px;
  animation: tool-progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes tool-progress-indeterminate {
  0%   { width: 5%;  margin-left: 0;   }
  50%  { width: 40%; margin-left: 30%; }
  100% { width: 5%;  margin-left: 95%; }
}
.tool-progress-text {
  text-align: center;
  color: var(--muted, #64748b);
  font-size: 13.5px;
  margin: 0;
}

/* ── TL;DR block — after H1, before main content ─────────────────────
   40-60 word self-contained answer for AI-citations (Perplexity/AIO)
   and SERP rich-snippet capture. Visually distinct to invite reading. */
.tldr {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-left: 3px solid var(--accent);
  background: rgba(91, 138, 248, .06);
  padding: 18px 22px;
  margin: 18px 0 24px;
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tldr strong {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  margin-right: 6px;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.tldr p {
  margin: 4px 0 0;
  color: var(--text);
}
.tldr code {
  background: rgba(255, 255, 255, .06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  word-break: break-all;
}
/* When sitting inside a centered hero card — still full-width, left-aligned */
.tool-hero .tldr {
  margin: 18px 0 28px;
  max-width: none;
}
/* Inline-SEO pages: break from .seo-section center-alignment */
.seo-intro .tldr,
.seo-section .tldr {
  margin: 0 0 18px;
}
@media (max-width: 600px) {
  .tldr { padding: 14px 16px; font-size: 14.5px; }
}

/* Related-pages block styles moved to assets/css/seo-page.css
   (loaded after components.css for /s/* pages, so it wins the
   .seo-section a cascade conflict cleanly). */

/* ── Cookbook cross-reference banner (H8 internal linking) ────────── */
.cookbook-xref {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(91, 138, 248, 0.08), rgba(124, 96, 245, 0.04));
  border: 1px solid rgba(91, 138, 248, 0.18);
  border-radius: 12px;
  flex-wrap: wrap;
}
.cookbook-xref__body { flex: 1 1 280px; min-width: 0; }
.cookbook-xref__eyebrow {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 999px;
  margin-bottom: 8px;
}
.cookbook-xref__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.cookbook-xref__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--cta-blue, #3a5fc4);
  color: var(--white, #fff);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.cookbook-xref__cta:hover { background: var(--cta-blue-hover, #2e4fa8); color: var(--white, #fff); }
.cookbook-xref__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .cookbook-xref { padding: 14px 16px; }
  .cookbook-xref__cta { width: 100%; justify-content: center; }
}

/* ── Grade badge embed snippet (P2.1-BADGES) ─────────────────────── */
.grade-badge-embed {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.grade-badge-embed__summary {
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 0 -14px;
  border-radius: var(--radius-sm);
  list-style: none;
  transition: background .15s;
  /* 2026-04-29 mobile fix: margin:0 -14px outdent makes the element 28px
     wider than its parent. On 375px viewport with no parent padding this
     pushed body width by ~2px past viewport (Yandex Webmaster mobile check
     flagged /health, /security and /en variants). max-width pin clips the
     outdent at viewport boundary. Visually identical on desktop where
     parent has card padding wider than 14px. */
  max-width: calc(100% - 0px);
  box-sizing: border-box;
}
@media (max-width: 480px) {
  /* Drop the outdent on tight mobile — keep summary flush with parent. */
  .grade-badge-embed__summary { margin: 0; }
}
.grade-badge-embed__summary::-webkit-details-marker { display: none; }
.grade-badge-embed__summary::marker { content: ''; }
.grade-badge-embed__summary:hover { background: var(--surface2); }
.grade-badge-embed__icon { font-size: 18px; }
.grade-badge-embed__label {
  font-weight: 600; color: var(--text2);
  font-size: var(--fs-sm);
}
.grade-badge-embed__hint {
  font-size: var(--fs-xs); color: var(--muted2);
  margin-left: auto;
}
.grade-badge-embed[open] .grade-badge-embed__summary {
  background: var(--surface2);
}
.grade-badge-embed__body {
  padding: 18px 0 8px;
  display: flex; flex-direction: column; gap: 14px;
}
.grade-badge-embed__preview {
  text-align: center; padding: 16px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.grade-badge-embed__sample {
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.grade-badge-embed__snippet { position: relative; }
.grade-badge-embed__label-sm {
  display: block;
  font-size: 11px; color: var(--muted2);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 4px;
}
.grade-badge-embed__code {
  margin: 0; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--mono);
  font-size: 12px; line-height: 1.5;
  overflow-x: auto; white-space: pre;
}
.grade-badge-embed__copy {
  position: absolute; top: 24px; right: 8px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border2); border-radius: var(--radius-xs);
  color: var(--text2); cursor: pointer;
  font-size: 11px; font-family: var(--sans);
  transition: background .15s, border-color .15s;
}
.grade-badge-embed__copy:hover {
  background: var(--accent-glow-08);
  border-color: var(--accent); color: var(--accent);
}
.grade-badge-embed__note {
  font-size: var(--fs-xs); color: var(--muted2);
  margin: 0; line-height: 1.5;
}
.grade-badge-embed__note code {
  background: var(--surface2);
  padding: 1px 5px; border-radius: 3px;
  font-size: .9em;
}

/* ── 2026-07-15 visual/a11y audit fixes ──────────────────────────────── */
/* Methodology link under tool H1 had no rule at all — it rendered the
   browser-default blue (1.98:1 contrast on dark, WCAG fail) on
   /ssl /health /security /ai-check. */
.tool-meta-link a {
  color: var(--accent, #5b8af8);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tool-meta-link a:hover,
.tool-meta-link a:focus-visible {
  color: var(--cyan, #22d3ee);
}

/* Tap targets: breadcrumb / inline nav links measured 12–19px tall —
   below the WCAG 2.2 24px minimum. */
.breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 600px) {
  /* iOS Safari auto-zooms the page when a focused input is <16px. */
  .input,
  .form-row input,
  .tool-form input {
    font-size: 16px;
  }
  /* Primary action above the fold: the TL;DR block between H1 and the
     form pushed the submit button off 844px viewports on tool pages.
     On mobile the TL;DR moves to the end of the hero card. */
  .tool-hero .card {
    display: flex;
    flex-direction: column;
  }
  .tool-hero .card > .tldr {
    order: 1;
  }
}


/* bundle chunk */
/* ═══════════════════════════════════════════════════════
   Icon utility classes — Phosphor Icons (ph-fill, ph-*)
   https://phosphoricons.com/
   ═══════════════════════════════════════════════════════ */

/* --- Color classes (matching site CSS variables) --- */
.icon-blue   { color: var(--accent,  #5b8af8); }
.icon-purple { color: var(--accent2, #7c60f5); }
.icon-cyan   { color: var(--cyan,    #22d3ee); }
.icon-green  { color: var(--green,   #34d399); }
.icon-yellow { color: var(--yellow,  #fbbf24); }
.icon-red    { color: var(--red,     #f87171); }
.icon-muted  { color: var(--muted,   #64748b); }
.icon-white  { color: var(--text,    #e2e8f0); }

/* --- Size helpers --- */
.icon-sm  { font-size: 1rem; }
.icon-md  { font-size: 1.25rem; }
.icon-lg  { font-size: 1.5rem; }
.icon-xl  { font-size: 2rem; }
.icon-2xl { font-size: 2.5rem; }
.icon-3xl { font-size: 3rem; }

/* --- Related tools card icon --- */
.related-tool-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

/* --- Result page tool badge icon --- */
.result-tool-badge i[class*="ph"] {
    font-size: 1.5rem;
    vertical-align: -0.125em;
}

/* --- Empty state icon --- */
.empty-state__icon {
    font-size: 3rem;
    opacity: 0.45;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.empty-state__icon i[class*="ph"] {
    font-size: inherit;
}

/* --- SEO audit category nav button icon --- */
.seo-nav-btn i[class*="ph"] {
    vertical-align: -0.15em;
    margin-right: 0.3rem;
}

/* --- Result metadata icons (clock, eye, copy) --- */
.result-meta-item i[class*="ph"],
.result-views i[class*="ph"] {
    font-size: 0.9rem;
    vertical-align: -0.1em;
    opacity: 0.65;
}

/* --- SSL status icon --- */
.ssl-status-icon i[class*="ph"] {
    font-size: 2.5rem;
    line-height: 1;
}

/* --- Chrome extension feature icon --- */
.ext-feature-icon i[class*="ph"] {
    font-size: 1.4rem;
    vertical-align: -0.15em;
}

/* --- Inline icon alignment (generic) --- */
i[class*="ph"] {
    display: inline-block;
    vertical-align: -0.125em;
}


/* bundle chunk */
/* ── Wave 135 — Global Cmd+K command palette ─────────────────────────
 *
 * Uses DESIGN.md tokens only — no raw hex outside CSS-var fallbacks.
 * Fallback values mirror the canonical dark-theme palette so the modal
 * degrades gracefully when tokens.css fails to load.
 */

.cmdk-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.cmdk-root[hidden] { display: none; }
.cmdk-root--open  { display: block; }

html.cmdk-open { overflow: hidden; }

.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 19, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: cmdk-fade .12s ease-out;
}

.cmdk-modal {
  position: relative;
  width: calc(100% - 32px);
  max-width: 600px;
  margin: 20vh auto 0;
  background: var(--surface, #131620);
  border: 1px solid var(--border2, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius, 12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: cmdk-pop .14s ease-out;
}

@keyframes cmdk-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cmdk-pop {
  from { transform: translateY(-6px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.cmdk-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.07));
}

.cmdk-search-icon {
  font-size: 16px;
  opacity: 0.6;
  flex-shrink: 0;
  color: var(--muted2, #94a3b8);
}

.cmdk-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 15px;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  padding: 0;
  min-width: 0;
}
.cmdk-input::placeholder { color: var(--muted, #64748b); }

.cmdk-list {
  list-style: none;
  padding: 6px;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

.cmdk-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
  padding: 10px 12px 4px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
}

.cmdk-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 7px);
  cursor: pointer;
  color: var(--text, #e2e8f0);
  transition: background 0.08s ease-out;
}
.cmdk-result-row:hover,
.cmdk-result-row--selected {
  background: var(--surface2, #1a1e2e);
}
.cmdk-result-row--selected {
  outline: 1px solid var(--border2, rgba(255, 255, 255, 0.12));
}

.cmdk-result-row__main {
  flex: 1;
  min-width: 0;
}
.cmdk-result-row__title {
  font-size: 14px;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-result-row__desc {
  font-size: 12px;
  color: var(--muted2, #94a3b8);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-category-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface2, #1a1e2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  color: var(--muted2, #94a3b8);
  flex-shrink: 0;
}

.cmdk-empty-state {
  padding: 24px 18px;
  text-align: center;
  color: var(--muted, #64748b);
  font-size: 13px;
  list-style: none;
}

.cmdk-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  font-size: 11px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  color: var(--muted, #64748b);
  background: var(--surface, #131620);
}

@media (max-width: 600px) {
  .cmdk-modal { margin-top: 12vh; }
  .cmdk-hint { display: none; }
}


/* bundle chunk */
/* Wave 143 — PWA install banner */
/*
 * Floating bottom-right card-style banner shown after engagement.
 * Lives outside the rest of the layout — fixed positioning, high
 * z-index, never affects flow. Mobile-first: drops to bottom-center
 * full-width on narrow screens.
 *
 * Companion to assets/js/pwa-install.js. Uses DESIGN.md tokens only.
 */

.pwa-install-banner {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: var(--z-top, 9999);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 22rem;
    padding: 1rem 1.1rem;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: var(--radius, 12px);
    box-shadow: 0 12px 36px var(--black-40, rgba(0, 0, 0, 0.4));
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.45;
    animation: pwa-install-slide-up 0.28s ease-out;
}

@keyframes pwa-install-slide-up {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-install-banner__text {
    color: var(--text);
    font-weight: 500;
}

.pwa-install-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pwa-install-btn {
    flex: 1 1 auto;
    min-width: 7rem;
    padding: 0.55rem 0.9rem;
    background: var(--accent);
    color: var(--white, #fff);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm, 7px);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.pwa-install-btn:hover,
.pwa-install-btn:focus-visible {
    opacity: 0.9;
}

.pwa-install-btn:active {
    transform: translateY(1px);
}

.pwa-install-btn:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
}

.pwa-dismiss-btn {
    flex: 0 0 auto;
    padding: 0.55rem 0.85rem;
    background: transparent;
    color: var(--muted2, var(--muted));
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm, 7px);
    font: inherit;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.pwa-dismiss-btn:hover,
.pwa-dismiss-btn:focus-visible {
    color: var(--text);
    border-color: var(--border3);
}

.pwa-dismiss-btn:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
}

/* Mobile: full-width strip pinned to the bottom. */
@media (max-width: 600px) {
    .pwa-install-banner {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
    }
    .pwa-install-banner__actions {
        flex-direction: row;
    }
}

/* Reduce motion: skip the slide-in animation. */
@media (prefers-reduced-motion: reduce) {
    .pwa-install-banner {
        animation: none;
    }
}

/* Footer placement (owner decision 2026-07-16): compact ghost variant in
   the .footer-meta row — the approved header mockup has no extra buttons. */
.pwa-install-btn--footer {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: auto;
    height: auto;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border2, rgba(255,255,255,.10));
    color: var(--muted2, #8e9bb5);
    font-size: var(--fs-xs, 12px);
    font-weight: 500;
}
.pwa-install-btn--footer:hover,
.pwa-install-btn--footer:focus-visible {
    opacity: 1;
    color: var(--accent, #59a8ff);
    border-color: var(--accent, #59a8ff);
    background: transparent;
}


/* bundle chunk */
/* ── Site Search Overlay ─────────────────────────────────────── */
.site-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.site-search-overlay.open { display: flex; }

.site-search-dialog {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  width: 100%;
  max-width: 560px;
  overflow: hidden;
}

.site-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.site-search-input-wrap svg { color: var(--muted); flex-shrink: 0; }
.site-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-base);
  color: var(--text);
  font-family: var(--sans);
}
.site-search-input::placeholder { color: var(--muted); }
.site-search-kbd {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

.site-search-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
}

.site-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  transition: background .12s;
  cursor: pointer;
}
.site-search-result:hover,
.site-search-result.highlighted { background: var(--accent-glow-08); color: var(--text); }
.site-search-result__section {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.site-search-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.site-search-hint {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.site-search-hint kbd {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  font-size: var(--fs-2xs);
}