/* ==========================================================================
   DNSDecode design system
   ========================================================================== */

:root {
  /* Without this, browsers render native controls (select dropdowns,
     scrollbars, date pickers) with light-mode defaults -- black text on a
     white popup -- regardless of the page's own dark colours. */
  color-scheme: dark;
  --color-bg: #07111F;
  --color-surface: #0D1B2A;
  --color-surface-raised: #122435;
  --color-border: #1E3347;
  --color-border-soft: #17293A;
  --color-text: #F8FAFC;
  --color-text-muted: #94A3B8;
  --color-text-faint: #5C7186;

  --color-primary: #06B6D4;
  --color-primary-dim: #0891A8;
  --color-secondary: #14B8A6;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-critical: #EF4444;
  --color-intelligence: #6366F1;

  --color-light-surface: #F8FAFC;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  --header-h: 64px;
  --max-w: 1240px;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('Inter Var');
  font-display: swap;
}

* { box-sizing: border-box; }
/* An author rule setting `display` (e.g. .palette-overlay{display:flex}) beats
   the UA's [hidden]{display:none} regardless of source order or specificity,
   since author-origin styles always win over user-agent styles. Restore it
   explicitly wherever a component sets its own display value. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 56px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

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

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
code, kbd, .mono { font-family: var(--font-mono); font-variant-ligatures: none; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #04222b;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.section-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.anchor-spacer { display: block; height: 0; }

/* ---------------------------- Buttons ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-intelligence)); color: #051019; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); }
.btn-ghost:hover { color: var(--color-text); border-color: var(--color-primary); }
.btn-icon { padding: 9px; }
.btn kbd { font-size: 11px; background: rgba(255,255,255,.08); padding: 2px 5px; border-radius: 4px; }
.link-btn { background: none; border: none; color: var(--color-primary); font-weight: 600; cursor: pointer; padding: 0; font-size: 14px; }
.link-btn:hover { text-decoration: underline; }

/* ---------------------------- Header ------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: rgba(7,17,31,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-soft);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 32px; padding: 0 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.main-nav { display: flex; gap: 24px; margin-right: auto; }
.main-nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
.main-nav a:hover { color: var(--color-text); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-toggle { display: none; }
.mobile-nav { display: none; flex-direction: column; padding: 8px 24px 16px; border-bottom: 1px solid var(--color-border-soft); background: var(--color-bg); }
.mobile-nav a { padding: 10px 0; text-decoration: none; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-soft); }

.target-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); }
.target-bar-inner { max-width: var(--max-w); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.target-bar-label { color: var(--color-text-faint); }
.target-bar-value { color: var(--color-primary); font-size: 13px; }
.target-bar-updated { color: var(--color-text-faint); }
.target-bar .link-btn { margin-left: auto; }

/* ---------------------------- Hero -------------------------------------- */
.hero { position: relative; padding: 72px 24px 40px; overflow: hidden; text-align: center; }
.hero-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .5; pointer-events: none; }
.flow-diagram { width: min(900px, 100%); height: auto; }
.eyebrow { color: var(--color-primary); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; margin-bottom: 18px; }
.hero-sub { color: var(--color-text-muted); font-size: 17px; max-width: 560px; margin: 0 auto 36px; }

.search-panel { max-width: 640px; margin: 0 auto; }
.search-box {
  display: flex; align-items: center; gap: 10px; background: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 8px 8px 18px;
  box-shadow: var(--shadow-card); transition: border-color .15s ease;
}
.search-box:focus-within { border-color: var(--color-primary); }
.search-icon { color: var(--color-text-faint); flex-shrink: 0; }
.search-box input {
  flex: 1; background: none; border: none; outline: none; color: var(--color-text);
  font-size: 16px; font-family: var(--font-mono); min-width: 0; padding: 10px 0;
}
.search-box input::placeholder { color: var(--color-text-faint); font-family: var(--font-sans); }
.btn-decode { flex-shrink: 0; padding: 12px 22px; }
.search-hint { margin-top: 10px; color: var(--color-text-faint); font-size: 12px; }
.search-error { margin-top: 12px; color: var(--color-critical); font-size: 14px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius-sm); padding: 10px 14px; }

.examples { margin-top: 28px; }
.examples-label { display: block; color: var(--color-text-faint); font-size: 13px; margin-bottom: 10px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text-muted);
  padding: 7px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-text); }
.chip.active { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------------------------- Quick actions ------------------------------ */
.quick-actions { padding: 8px 24px 56px; }
.quick-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quick-card {
  text-align: left; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
  padding: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s ease, transform .15s ease;
}
.quick-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.quick-icon { font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(6,182,212,.12); color: var(--color-primary); }
.quick-icon-indigo { background: rgba(99,102,241,.12); color: var(--color-intelligence); }
.quick-icon-teal { background: rgba(20,184,166,.12); color: var(--color-secondary); }
.quick-icon-emerald { background: rgba(16,185,129,.12); color: var(--color-success); }
.quick-icon-amber { background: rgba(245,158,11,.12); color: var(--color-warning); }
.quick-title { font-weight: 700; font-size: 15px; }
.quick-desc { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }

/* ---------------------------- Demo preview -------------------------------- */
.demo-preview { padding: 0 24px 56px; }
.demo-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--color-surface);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 20px; font-size: 14px; color: var(--color-text-muted);
}
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.badge-demo { background: rgba(99,102,241,.15); color: #A5B4FC; }
.badge-good { background: rgba(16,185,129,.15); color: #6EE7B7; }
.badge-warning { background: rgba(245,158,11,.15); color: #FCD34D; }
.badge-critical { background: rgba(239,68,68,.15); color: #FCA5A5; }
.badge-info { background: rgba(148,163,184,.15); color: #CBD5E1; }

/* ---------------------------- Scan state ---------------------------------- */
.scan-state { padding: 8px 24px 56px; }
.scan-card { max-width: 640px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 28px 28px 20px; }
.scan-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.scan-eyebrow { color: var(--color-text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.scan-target { font-family: var(--font-mono); font-size: 22px; }
.scan-timer { font-family: var(--font-mono); font-size: 20px; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.scan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.scan-step { display: flex; align-items: center; gap: 12px; padding: 9px 4px; font-size: 14px; color: var(--color-text-faint); border-radius: 8px; transition: color .2s ease; }
.scan-step .step-icon { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.scan-step.running { color: var(--color-text); }
.scan-step.running .step-icon { border-color: var(--color-primary); animation: pulse-ring 1.1s ease-in-out infinite; }
.scan-step.done { color: var(--color-text-muted); }
.scan-step.done .step-icon { border-color: var(--color-success); background: rgba(16,185,129,.15); color: var(--color-success); }
@keyframes pulse-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(6,182,212,.4); } 50% { box-shadow: 0 0 0 5px rgba(6,182,212,0); } }

/* ---------------------------- Results header ------------------------------ */
.results { padding: 8px 24px 80px; }
.results-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-top: 24px; }
.results-title h2 { font-family: var(--font-mono); font-size: 28px; word-break: break-word; }
.results-title p { color: var(--color-text-faint); font-size: 13px; margin-top: 4px; }
.results-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------- Score panel ---------------------------------- */
.score-panel { display: grid; grid-template-columns: 220px 1fr; gap: 20px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
.score-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--color-border-soft); padding-right: 20px; text-align: center; }
.score-ring { position: relative; width: 128px; height: 128px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring-number { font-size: 32px; font-weight: 800; font-family: var(--font-mono); }
.score-ring-max { font-size: 11px; color: var(--color-text-faint); }
.score-status { margin-top: 10px; font-weight: 700; }
.category-bars { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.category-bar-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; font-size: 13px; }
.category-bar-track { height: 8px; border-radius: 999px; background: var(--color-surface-raised); overflow: hidden; }
.category-bar-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.category-bar-value { text-align: right; font-family: var(--font-mono); color: var(--color-text-muted); }

/* ---------------------------- Summary / findings ---------------------------- */
.panel { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; scroll-margin-top: calc(var(--header-h) + 60px); }
.panel-title { font-size: 18px; margin-bottom: 16px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-header .panel-title { margin-bottom: 0; }
.panel-actions { display: flex; gap: 8px; align-items: center; }
.summary-panel { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
.findings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.finding-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: none; border: 1px solid transparent;
  padding: 11px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--color-text); transition: background .12s ease, border-color .12s ease;
}
.finding-row:hover { background: var(--color-surface-raised); border-color: var(--color-border); }
.finding-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.finding-row.critical .finding-icon { color: var(--color-critical); }
.finding-row.warning .finding-icon { color: var(--color-warning); }
.finding-row.good .finding-icon { color: var(--color-success); }
.finding-row.info .finding-icon { color: var(--color-text-muted); }
.finding-title { font-weight: 600; }
.finding-sub { color: var(--color-text-faint); font-size: 13px; margin-top: 2px; }

/* ---------------------------- DNS table ---------------------------------- */
.table-scroll { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border-soft); }
.dns-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.dns-table th { text-align: left; font-weight: 600; color: var(--color-text-faint); padding: 10px 14px; background: var(--color-surface-raised); position: sticky; top: 0; white-space: nowrap; }
.dns-table td { padding: 10px 14px; border-top: 1px solid var(--color-border-soft); vertical-align: top; }
.dns-table tbody tr { cursor: pointer; transition: background .1s ease; }
.dns-table tbody tr:hover { background: var(--color-surface-raised); }
.dns-table .rec-type { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary); }
.dns-table .rec-value { font-family: var(--font-mono); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-table .copy-btn { background: none; border: none; color: var(--color-text-faint); cursor: pointer; padding: 4px; }
.dns-table .copy-btn:hover { color: var(--color-primary); }
#dnsSearch { background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text); padding: 8px 12px; border-radius: 8px; font-size: 13px; min-width: 180px; }
.source-note { margin-top: 10px; color: var(--color-text-faint); font-size: 12px; }

/* ---------------------------- Nameserver chain ---------------------------- */
.ns-chain { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
.ns-chain-step { background: var(--color-surface-raised); border: 1px solid var(--color-border); padding: 6px 12px; border-radius: 999px; }
.ns-chain-arrow { color: var(--color-text-faint); }
.ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ns-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 16px; cursor: pointer; }
.ns-card:hover { border-color: var(--color-primary); }
.ns-card-host { font-family: var(--font-mono); font-weight: 700; font-size: 13px; word-break: break-all; margin-bottom: 8px; }
.ns-card-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); padding: 3px 0; }
.ns-card-row span:last-child { font-family: var(--font-mono); color: var(--color-text); text-align: right; }

/* ---------------------------- Propagation ---------------------------------- */
.propagation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
#propType { background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
select option, #propType option, .field-row select option { background: var(--color-surface-raised); color: var(--color-text); }
.empty-hint { color: var(--color-text-faint); font-size: 13px; grid-column: 1 / -1; }
.resolver-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 14px; }
.resolver-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.resolver-name { font-weight: 700; font-size: 13px; }
.resolver-region { color: var(--color-text-faint); font-size: 11px; }
.resolver-status-dot { width: 9px; height: 9px; border-radius: 50%; }
.resolver-status-dot.match { background: var(--color-success); }
.resolver-status-dot.mismatch { background: var(--color-warning); }
.resolver-status-dot.none { background: var(--color-text-faint); }
.resolver-answers { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); word-break: break-all; }
.resolver-latency { margin-top: 6px; font-size: 11px; color: var(--color-text-faint); }

/* ---------------------------- Key/value + info blocks ----------------------- */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; }
.kv-item { }
.kv-label { color: var(--color-text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.kv-value { font-family: var(--font-mono); font-size: 14px; word-break: break-word; }
.expiry-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; }
.expiry-banner.ok { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #6EE7B7; }
.expiry-banner.warn { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #FCD34D; }
.expiry-banner.critical { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #FCA5A5; }

/* ---------------------------- SSL panel ---------------------------------- */
.cert-visual { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.cert-chain-link { display: flex; align-items: center; gap: 6px; background: var(--color-surface-raised); border: 1px solid var(--color-border); padding: 8px 14px; border-radius: 999px; font-size: 12px; font-family: var(--font-mono); cursor: pointer; }
.cert-chain-link:hover { border-color: var(--color-primary); }
.cert-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---------------------------- Email security grid --------------------------- */
.email-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.email-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 18px; }
.email-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.email-card-title { font-weight: 700; }
.email-record { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); background: var(--color-bg); padding: 10px; border-radius: 8px; margin: 10px 0; word-break: break-all; max-height: 90px; overflow-y: auto; }
.progression { display: flex; align-items: center; gap: 4px; margin: 10px 0; font-size: 11px; }
.progression-step { flex: 1; text-align: center; padding: 5px 2px; border-radius: 6px; background: var(--color-surface); color: var(--color-text-faint); border: 1px solid var(--color-border-soft); }
.progression-step.active { background: rgba(6,182,212,.15); color: var(--color-primary); border-color: var(--color-primary); font-weight: 700; }
.email-problems { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); }
.email-problems li { padding-left: 16px; position: relative; }
.email-problems li::before { content: '—'; position: absolute; left: 0; color: var(--color-warning); }

/* ---------------------------- DNSSEC chain ---------------------------------- */
.dnssec-chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.dnssec-chain-step { display: flex; align-items: center; gap: 8px; background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; }
.dnssec-chain-step .dot { width: 8px; height: 8px; border-radius: 50%; }
.dnssec-chain-step.ok .dot { background: var(--color-success); }
.dnssec-chain-step.fail .dot { background: var(--color-critical); }
.dnssec-chain-arrow { color: var(--color-text-faint); }

/* ---------------------------- IP intelligence grid --------------------------- */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ip-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 18px; cursor: pointer; }
.ip-card:hover { border-color: var(--color-primary); }
.ip-card-addr { font-family: var(--font-mono); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.ip-card-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--color-border-soft); color: var(--color-text-muted); }
.ip-card-row:first-of-type { border-top: none; }
.ip-card-row span:last-child { color: var(--color-text); text-align: right; }

/* ---------------------------- Infrastructure graph ---------------------------- */
.infra-graph { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0; }
.infra-node { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 18px; font-size: 13px; font-family: var(--font-mono); cursor: pointer; text-align: center; }
.infra-node:hover { border-color: var(--color-primary); }
.infra-node-label { display: block; font-size: 10px; color: var(--color-text-faint); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.infra-arrow { color: var(--color-text-faint); font-size: 16px; }

/* ---------------------------- Tools grid ---------------------------------- */
.tools-section { padding: 24px 24px 72px; }
.section-heading { font-size: 26px; margin-bottom: 8px; }
.section-sub { color: var(--color-text-muted); margin-bottom: 28px; }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.tool-card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: border-color .15s ease; }
.tool-card:hover { border-color: var(--color-primary); }
.tool-card.disabled { opacity: .55; cursor: default; }
.tool-card-title { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.tool-card-desc { font-size: 12px; color: var(--color-text-faint); line-height: 1.4; }
.tool-card-badge { display: inline-block; margin-top: 8px; font-size: 10px; color: var(--color-text-faint); }
.tools-grid.collapsed .tool-extra { display: none; }

/* ---------------------------- Tool result panel (inline) ---------------------- */
.tool-run-panel { margin-top: 16px; background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 18px; }
.tool-run-output { font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; background: var(--color-bg); padding: 14px; border-radius: 8px; max-height: 420px; overflow: auto; }
.field-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.field-row input, .field-row select, .field-row textarea {
  background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-family: var(--font-mono);
}
.field-row textarea { width: 100%; min-height: 100px; }
.field-row input { flex: 1; min-width: 160px; }

/* ---------------------------- Learn / SEO section ---------------------------- */
.learn-section { padding: 40px 24px 72px; border-top: 1px solid var(--color-border-soft); }
.learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; margin-top: 24px; }
.learn-grid h3 { font-size: 15px; margin-bottom: 8px; }
.learn-grid p { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.6; }
.learn-grid code { color: var(--color-primary); }
.learn-grid a { display: inline-block; margin-top: 8px; color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 13px; }
.learn-grid a:hover { text-decoration: underline; }

/* ---------------------------- Command palette ---------------------------- */
.palette-overlay { position: fixed; inset: 0; background: rgba(4,10,18,.7); z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(2px); }
.palette { width: min(560px, 92vw); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--color-border-soft); color: var(--color-text-faint); }
.palette-search input { flex: 1; background: none; border: none; outline: none; color: var(--color-text); font-size: 15px; }
.palette-search kbd { font-size: 11px; background: rgba(255,255,255,.08); padding: 3px 6px; border-radius: 4px; }
.palette-results { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.palette-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.palette-item:hover, .palette-item.selected { background: var(--color-surface-raised); }
.palette-item-cat { font-size: 11px; color: var(--color-text-faint); }

/* ---------------------------- Drawer ---------------------------------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(4,10,18,.6); z-index: 300; display: flex; justify-content: flex-end; }
.drawer { width: min(440px, 100vw); height: 100%; background: var(--color-surface); border-left: 1px solid var(--color-border); padding: 24px; overflow-y: auto; position: relative; }
.drawer-close { position: absolute; top: 18px; right: 18px; background: none; border: none; color: var(--color-text-muted); font-size: 16px; cursor: pointer; }
.drawer h3 { font-size: 18px; margin-bottom: 4px; padding-right: 30px; }
.drawer .drawer-mono { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); word-break: break-all; margin-bottom: 16px; }
.drawer-section { margin-top: 18px; }
.drawer-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-faint); margin-bottom: 6px; }
.drawer-section p { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; }

/* ---------------------------- Toast ---------------------------------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text); padding: 11px 20px; border-radius: 999px; font-size: 13px; z-index: 400; box-shadow: var(--shadow-card); }

/* ---------------------------- Footer ---------------------------------- */
.site-footer { border-top: 1px solid var(--color-border-soft); padding: 48px 24px 24px; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand p { color: var(--color-text-faint); margin-top: 8px; font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; max-width: 480px; }
.footer-links a { text-decoration: none; color: var(--color-text-muted); font-size: 13px; }
.footer-links a:hover { color: var(--color-text); }
.footer-copy { text-align: center; color: var(--color-text-faint); font-size: 12px; margin-top: 32px; }

/* ---------------------------- Responsive ---------------------------------- */
@media (max-width: 960px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .score-panel { grid-template-columns: 1fr; }
  .score-hero { border-right: none; border-bottom: 1px solid var(--color-border-soft); padding-right: 0; padding-bottom: 16px; }
  .learn-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav.open { display: flex; }
  .header-inner { gap: 12px; }
  .btn span { display: inline; }
  #headerAnalyseBtn { display: none; }
  .quick-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .results-header { flex-direction: column; align-items: flex-start; }
  .hero { padding: 48px 16px 32px; }
  .hero h1 { font-size: 30px; }
  .kv-grid { grid-template-columns: 1fr; }
  .drawer { width: 100vw; }
}

/* ---------------------------- Print / export report ------------------------- */
@media print {
  body { background: #fff; color: #111; }
  .site-header, .target-bar, .hero, .quick-actions, .demo-preview, .scan-state,
  .tools-section, .learn-section, .site-footer, .palette-overlay, .drawer-overlay,
  .toast, .results-actions, .panel-actions, #dnsFilterChips, .skip-link { display: none !important; }
  .panel, .score-panel, .summary-panel { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
}