/* ═══════════════════════════════════════════════════
   WhatIsMyID.net — Redesigned CSS
   ═══════════════════════════════════════════════════ */

:root {
  --bg:          #060a12;
  --bg-2:        #0b1220;
  --bg-3:        #111c2e;
  --card:        rgba(11, 18, 32, 0.85);
  --card-solid:  #0d1628;
  --border:      rgba(30, 52, 80, 0.7);
  --border-hi:   rgba(0, 212, 255, 0.25);

  --accent:      #00d4ff;
  --accent-dim:  rgba(0, 212, 255, 0.12);
  --accent-glow: rgba(0, 212, 255, 0.06);
  --green:       #00ff88;
  --green-dim:   rgba(0, 255, 136, 0.1);
  --purple:      #9d6ef8;
  --danger:      #ff4f4f;

  --text:        #d8e4f0;
  --text-2:      #6b85a0;
  --text-3:      #3d5470;
  --text-muted:  #3d5470;

  --mono:        'JetBrains Mono', 'Fira Code', monospace;
  --sans:        'Inter', system-ui, -apple-system, sans-serif;
  --radius:      12px;
  --radius-lg:   18px;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h:       64px;
}

[data-theme="light"] {
  --bg:          #f3f7fc;
  --bg-2:        #e8eff8;
  --bg-3:        #dce8f7;
  --card:        rgba(255, 255, 255, 0.88);
  --card-solid:  #ffffff;
  --border:      rgba(147, 177, 213, 0.65);
  --border-hi:   rgba(0, 120, 220, 0.3);

  --accent:      #0078dc;
  --accent-dim:  rgba(0, 120, 220, 0.12);
  --accent-glow: rgba(0, 120, 220, 0.08);
  --green:       #00a368;
  --green-dim:   rgba(0, 163, 104, 0.1);
  --purple:      #6f50d9;
  --danger:      #d73434;

  --text:        #14263d;
  --text-2:      #4f6783;
  --text-3:      #748ca7;
  --text-muted:  #748ca7;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Subtle grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(0,120,220,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,120,220,.03) 1px, transparent 1px);
}

/* ─── Container ─── */
/* `padding-inline` uses logical properties so RTL languages still get
   the gutter on the correct side. The `env(safe-area-inset-*)` fallback
   keeps content out from under iOS notches when the page is in
   landscape on a notched device. */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-right: max(24px, env(safe-area-inset-right));
  padding-left:  max(24px, env(safe-area-inset-left));
  position: relative;
  z-index: 1;
}

/* ─── Glass card ─── */
.glass {
  background: var(--card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ════════════════════════════════════════
   HEADER / NAV — theme-aware, high-contrast
════════════════════════════════════════ */
:root {
  --header-bg:        rgba(8, 14, 26, 0.85);
  --header-border:    rgba(0, 212, 255, 0.18);
  --header-text:      #e6eef9;
  --header-text-soft: #9fb3cd;
  --header-link-hover-bg: rgba(255, 255, 255, 0.06);
  --header-shadow:    0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] {
  --header-bg:        rgba(255, 255, 255, 0.92);
  --header-border:    rgba(0, 120, 220, 0.18);
  --header-text:      #14263d;
  --header-text-soft: #4f6783;
  --header-link-hover-bg: rgba(0, 120, 220, 0.08);
  --header-shadow:    0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 18px rgba(20, 38, 61, 0.08);
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
}

.nav-content {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--header-text);
  letter-spacing: -.03em;
  flex-shrink: 0;
  margin-right: 28px;
  transition: opacity .15s;
}
.logo:hover { opacity: .85; }
.logo i {
  color: var(--accent);
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.logo span:not(.logo-text) { color: var(--accent); font-weight: 700; }

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  color: var(--header-text-soft);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease), transform .15s;
  position: relative;
}
.nav-links a:hover {
  color: var(--header-text);
  background: var(--header-link-hover-bg);
}
.nav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-links a.active {
  color: var(--accent);
  background: var(--accent-dim);
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  opacity: .85;
}

/* CTA / Theme switch */
.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 16px;
}
.theme-switch-btn {
  min-width: 0;
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--header-border);
  color: var(--header-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.theme-switch-btn:hover {
  background: var(--header-link-hover-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.theme-switch-btn:active { transform: scale(.97); }
.theme-switch-btn i { font-size: .95rem; }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 6px;
  border: 1px solid var(--header-border);
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  margin-left: auto;
  transition: background .15s, border-color .15s;
}
.nav-toggle:hover { background: var(--header-link-hover-bg); border-color: var(--accent); }
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--header-text);
  border-radius: 2px;
  transition: all .25s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════
   AD SPACE
════════════════════════════════════════ */
.ad-space {
  background: rgba(255,255,255,.02);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  color: var(--text-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 20px 0;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════
   HERO / MAIN SECTION
════════════════════════════════════════ */
.hero { padding: 32px 0 0; }

/* ─── IP Dashboard section (overrides .container/main) ─── */
.ip-dashboard-section > .container { padding-top: 0; }

/* ════════════════════════════════════════
   MAIN IP CARD
════════════════════════════════════════ */
.main-ip-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
}
.main-ip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--green), var(--purple));
  z-index: 1;
}

/* Top row */
.ipc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 0;
}
.ip-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ipc-refresh {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 7px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .8rem;
  transition: color .15s, border-color .15s;
}
.ipc-refresh:hover { color: var(--accent); border-color: rgba(0,212,255,.35); }

/* IP hero */
.ipc-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 28px 20px;
}
.ip-address {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1;
}
.ipc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 8-col detail grid */
.ip-details-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-top: 1px solid var(--border);
}
.detail-item {
  padding: 13px 16px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: background .15s;
}
.detail-item:last-child { border-right: none; }
.detail-item:hover { background: rgba(255,255,255,.02); }

.detail-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.detail-label i { color: var(--accent); font-size: .6rem; flex-shrink: 0; }
.detail-value {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════
   LIVE STRIP — bottom bar inside IP card
════════════════════════════════════════ */
.live-strip {
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  min-height: 52px;
}

.live-strip-label {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(0,255,136,.03);
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .6rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.live-indicator .dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.8); }
}

.live-strip-items {
  display: flex;
  align-items: stretch;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.live-strip-items::-webkit-scrollbar { display: none; }

.live-strip-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 8px 18px;
  border-right: 1px solid var(--border);
  flex: 0 0 auto;
  min-width: 0;
  transition: background .15s;
}
.live-strip-item:last-child { border-right: none; }
.live-strip-item:hover { background: rgba(255,255,255,.02); }

/* Vertical separator for logical groups */
.live-strip-sep {
  width: 1px;
  background: rgba(255,255,255,.1);
  margin: 8px 0;
  flex-shrink: 0;
}

.lsi-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.lsi-label i { color: var(--accent); font-size: .58rem; }

.lsi-value {
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  line-height: 1;
}

/* Ping items: show ms badge inline */
.lsi-unit {
  font-size: .58rem;
  color: var(--text-2);
  font-weight: 600;
  margin-top: 1px;
}

/* ════════════════════════════════════════
   MAP (full width, below IP card)
════════════════════════════════════════ */
.map-card {
  padding: 8px;
  min-height: 340px;
  overflow: hidden;
}
#home-map {
  width: 100%; height: 100%;
  min-height: 320px;
  border-radius: 10px;
}

/* Pulse border */
.pulse-border { border: 1.5px solid rgba(0,212,255,.38) !important; }

/* ════════════════════════════════════════
   SECTION TITLES
════════════════════════════════════════ */
.section-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  letter-spacing: -.02em;
}
.section-title i { color: var(--accent); font-size: 1.125rem; }


/* ════════════════════════════════════════
   TOOLS GRID
════════════════════════════════════════ */
.tools-section {
  padding: 36px 0 16px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  align-items: stretch;
}

.tool-card {
  position: relative;
  padding: 28px 28px 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
  overflow: hidden;
}
.tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  opacity: 0;
  transition: opacity .2s;
}
.tool-card:hover {
  border-color: var(--border-hi);
  background: rgba(0,212,255,.03);
  transform: translateY(-4px);
}
.tool-card:hover::before { opacity: 1; }

.tool-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tool-icon {
  font-size: 1.625rem;
  color: var(--accent);
  line-height: 1;
}

.tool-badge {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .06em;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(0,212,255,.2);
  padding: 2px 7px;
  border-radius: 4px;
}

.tool-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}

.tool-card p {
  font-size: .8375rem;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.tool-card:hover .tool-footer {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════
   SEO / COLLAPSIBLE
════════════════════════════════════════ */
.seo-content-section { padding: 20px 0; }

.seo-intro {
  padding: 28px 0 8px;
  max-width: 920px;
  margin: 0 auto;
}
.seo-intro h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.seo-intro > p {
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 12px;
}
.seo-intro-lead {
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 auto 20px;
  max-width: 920px;
  text-align: center;
  font-size: .95rem;
}
.geo-map-card { padding: 20px; border-radius: var(--radius-lg); max-width: 980px; margin: 0 auto; }
.geo-map-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.geo-map-canvas {
  height: 500px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md, 0 4px 24px rgba(0,0,0,.12));
}
.geo-map-note { max-width: 980px; margin: 14px auto 0; }

.footer-social a {
  color: var(--text-2);
  text-decoration: none;
  font-size: .85rem;
}
.footer-social a:hover { color: var(--accent); }

.collapsible-seo {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.collapsible-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--card);
  border: none;
  cursor: pointer;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.collapsible-trigger:hover {
  background: var(--bg-3);
  color: var(--text);
}
.collapsible-trigger i.fa-chevron-down { transition: transform .3s; flex-shrink: 0; }
.collapsible-trigger.active { color: var(--text); }
.collapsible-trigger.active i.fa-chevron-down { transform: rotate(180deg); }

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(0, 1, 0, 1);
}
.collapsible-content.active {
  max-height: 2400px;
  transition: max-height .5s ease-in-out;
}

.content-padding {
  padding: 24px 20px;
  border-top: 1px solid var(--border);
}
.content-padding h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}
.content-padding p {
  color: var(--text-2);
  font-size: .875rem;
  line-height: 1.75;
  margin-bottom: 12px;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.seo-card {
  padding: 16px 18px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.seo-card h3 {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.seo-card p { font-size: .8375rem; color: var(--text-2); margin: 0; }

.faq-list { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.faq-item h4 { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.faq-item p  { font-size: .8375rem; color: var(--text-2); margin: 0; }

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
input, select, button, textarea { font-family: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: .8375rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s var(--ease);
  border: none;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--accent);
  color: #000;
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0,212,255,.3);
}
.btn-outline:hover { background: var(--accent-dim); }

.btn-ghost {
  background: var(--bg-3);
  color: var(--text-2);
}
.btn-ghost:hover { color: var(--text); }

/* ════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════ */
.input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
input[type=text], input[type=number], input[type=email],
select, textarea {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .875rem;
  padding: 9px 14px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
input[type=text]:focus, input[type=number]:focus,
select:focus, textarea:focus { border-color: var(--accent); }

/* ════════════════════════════════════════
   RESULT DISPLAY CARDS (tool pages)
════════════════════════════════════════ */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.result-item {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.result-item .label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-2);
  margin-bottom: 4px;
}
.result-item .value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.result-item .value.accent { color: var(--accent); font-family: var(--mono); }

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
}
.badge-safe    { background: rgba(0,255,136,.1); color: var(--green); }
.badge-warn    { background: rgba(255,190,0,.1);  color: #ffbe00; }
.badge-danger  { background: rgba(255,79,79,.1);  color: var(--danger); }
.badge-neutral { background: var(--bg-3); color: var(--text-2); }

/* ════════════════════════════════════════
   TOOL PAGE WRAPPER
════════════════════════════════════════ */
.tool-page-header {
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.tool-page-header h1 {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 6px;
}
.tool-page-header p {
  color: var(--text-2);
  font-size: .9375rem;
  max-width: 520px;
}

.tool-body-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer {
  margin-top: 80px;
  padding: 56px 0 0;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

.footer-content {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 80px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.footer-logo {
  font-size: 1.125rem;
  margin-bottom: 12px;
  display: flex;
}

.footer-desc {
  color: var(--text-2);
  font-size: .875rem;
  line-height: 1.7;
  max-width: 300px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-links h4 {
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  margin-bottom: 14px;
}

.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: .875rem;
  transition: color .15s, padding-left .15s;
  display: inline-block;
}
.footer-links a:hover {
  color: var(--accent);
  padding-left: 3px;
}

.copyright {
  padding: 20px 0;
  text-align: center;
  color: var(--text-3);
  font-size: .8125rem;
}

/* ════════════════════════════════════════
   UTILITIES
════════════════════════════════════════ */
.text-accent  { color: var(--accent); }
.text-green   { color: var(--green); }
.text-muted   { color: var(--text-2); }
.text-mono    { font-family: var(--mono); }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }

/* Spinner */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* IP loading dots */
.ip-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ip-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .15;
  animation: ipDot 1.2s ease-in-out infinite;
}
.ip-dot:nth-child(2) { animation-delay: .2s; }
.ip-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ipDot {
  0%,100% { opacity: .15; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* Divider */
.divider { height: 1px; background: var(--border); margin: 18px 0; }

/* Progress track */
.progress-track {
  background: var(--bg-3);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width .4s var(--ease);
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .map-card {
    grid-column: 1;
    grid-row: auto;
    min-height: 280px;
  }
  .intel-card { grid-column: 1; }
  .footer-content { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  :root { --nav-h: 56px; }

  .nav-content { gap: 12px; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s var(--ease), padding .32s var(--ease);
  }
  .nav-links.open {
    max-height: 480px;
    padding: 12px 16px 16px;
  }
  .nav-links a {
    padding: 12px 14px;
    border-radius: 9px;
    font-size: .92rem;
    color: var(--header-text);
  }
  .nav-links a.active::after { display: none; }

  .header-cta {
    display: flex;
    margin-left: auto;
    margin-right: 12px;
    gap: 6px;
  }
  .theme-switch-btn { padding: 7px 10px; font-size: .8rem; }
  .theme-switch-btn span { display: none; }
  .theme-switch-btn i { font-size: 1rem; }

  .ipc-top { padding: 16px 20px 0; }
  .ipc-hero { padding: 12px 20px 16px; }
  .ip-address { font-size: clamp(1.375rem, 9vw, 2rem); }
  .ip-details-grid { grid-template-columns: repeat(4, 1fr); }
  .detail-item:nth-child(4n) { border-right: none; }
  .detail-item:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
  /* Live strip wraps and indicator becomes a stand-alone label row.
     The 6-item content grid is defined further below so we can match
     the same 2/3/6 column scheme used by `.quick-facts`. */
  .live-strip { flex-wrap: wrap; flex-direction: column; }
  .live-strip-label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 16px;
    justify-content: center;
  }
  .live-strip-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    overflow: visible;
    flex: unset;
  }
  .live-strip-item {
    flex: unset;
    background: var(--bg-2);
    border-right: none;
    padding: 10px 14px;
  }
  .live-strip-sep { display: none; }

  .section-title { font-size: 1.125rem; }
  .tools-grid { grid-template-columns: 1fr; }

  .footer-links { grid-template-columns: 1fr 1fr; gap: 24px; }
  .logo { margin-right: 12px; }
}

@media (max-width: 480px) {
  .ip-details-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-item:nth-child(2n) { border-right: none; }
  .detail-item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border); }
  .footer-links { grid-template-columns: 1fr; }
}

/* ── Shared tool panel (whois, port, blacklist) ── */
.tool-panel { padding: 40px; }
.tool-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); display: block; margin-bottom: 10px; }
.tool-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tool-input {
  flex: 1; min-width: 200px; padding: 14px 16px;
  color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  font-weight: 600; background: var(--bg-3); font-family: var(--mono); font-size: .9rem;
}
.tool-input:focus { outline: none; border-color: var(--accent); }
.tool-btn-center { text-align: center; margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tool-status { font-size: .85rem; color: var(--text-2); }
.tool-results { margin-top: 24px; padding: 24px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); }
.tool-results-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tool-results-header h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.tool-meta { font-size: .78rem; color: var(--text-3); font-family: var(--mono); }
.tool-pre {
  font-family: var(--mono); font-size: .8rem; color: var(--text-2);
  white-space: pre-wrap; word-break: break-all; line-height: 1.65;
  max-height: 480px; overflow: auto; margin: 0;
}
.tool-alert { padding: 16px 18px; border-radius: var(--radius); font-size: .88rem; line-height: 1.6; }
.tool-alert-info { background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.25); color: var(--text-2); }
.tool-alert-error { background: rgba(255,79,79,.08); border: 1px solid rgba(255,79,79,.3); color: var(--danger); }
.tool-alert-success { background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.3); color: var(--green); }

.port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.port-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: .88rem; font-weight: 600; }
.port-item small { color: var(--text-3); font-weight: 400; }
.port-open { color: var(--danger); }
.port-closed { color: var(--green); }
.port-pending { color: var(--accent); }

.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bl-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: .85rem; font-weight: 600; }
.bl-clean span:last-child { color: var(--green); }
.bl-listed span:last-child { color: var(--danger); }

/* ════════════════════════════════════════════════════════════
   ▼ MODERNIZED HOMEPAGE — 2026 REFRESH ▼
   Aurora hero, privacy ring, modern tools grid, reveal animations
═════════════════════════════════════════════════════════════ */

/* SR-only / off-screen SEO H1 */
.seo-title {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Modern hero shell ─── */
.hero-modern {
  padding: 24px 0 0;
  position: relative;
  isolation: isolate;
}

/* Aurora animated background */
.hero-aurora {
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  height: 720px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: .65;
  filter: blur(80px);
}
.aurora {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora-1 {
  width: 520px; height: 520px;
  top: 10%; left: 8%;
  background: radial-gradient(circle, rgba(0,212,255,.55) 0%, transparent 70%);
  animation: aurora-float-1 18s ease-in-out infinite;
}
.aurora-2 {
  width: 480px; height: 480px;
  top: 25%; right: 12%;
  background: radial-gradient(circle, rgba(157,110,248,.45) 0%, transparent 70%);
  animation: aurora-float-2 22s ease-in-out infinite;
}
.aurora-3 {
  width: 440px; height: 440px;
  top: 5%; left: 45%;
  background: radial-gradient(circle, rgba(0,255,136,.32) 0%, transparent 70%);
  animation: aurora-float-3 26s ease-in-out infinite;
}
[data-theme="light"] .hero-aurora { opacity: .42; }
[data-theme="light"] .aurora-1 { background: radial-gradient(circle, rgba(0,120,220,.45) 0%, transparent 70%); }
[data-theme="light"] .aurora-2 { background: radial-gradient(circle, rgba(111,80,217,.38) 0%, transparent 70%); }
[data-theme="light"] .aurora-3 { background: radial-gradient(circle, rgba(0,163,104,.28) 0%, transparent 70%); }

@keyframes aurora-float-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(80px,40px) scale(1.15); }
}
@keyframes aurora-float-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-60px,60px) scale(1.1); }
}
@keyframes aurora-float-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px,-30px) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-1, .aurora-2, .aurora-3 { animation: none !important; }
}

/* ─── Reveal on scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  /* Defensive failsafe: if JS fails for any reason,
     fade in via animation after 3 seconds. */
  animation: reveal-failsafe 0s 3s forwards;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@keyframes reveal-failsafe {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ─── Trust / status strip ─── */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--card) 0%, rgba(0,212,255,.04) 50%, var(--card) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 160px;
}
.trust-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0 rgba(0,255,136,.5);
  animation: trust-pulse 2.4s ease-out infinite;
}
@keyframes trust-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,136,.55); }
  100% { box-shadow: 0 0 0 11px rgba(0,255,136,0); }
}
.trust-icon {
  color: var(--accent);
  font-size: 1rem;
}
.trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.trust-value {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
}
.trust-label {
  font-size: .68rem;
  color: var(--text-2);
}
.trust-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 4px 0;
}

/* ─── Hero IP card overrides ─── */
.main-ip-card {
  box-shadow: 0 30px 80px -40px rgba(0, 212, 255, .25),
              0 1px 0 rgba(255,255,255,.04) inset;
}
[data-theme="light"] .main-ip-card {
  box-shadow: 0 30px 80px -40px rgba(0, 120, 220, .35),
              0 1px 0 rgba(255,255,255,.6) inset;
}

.ipc-top {
  padding: 18px 28px 0;
}
.ip-label {
  font-size: .7rem;
  letter-spacing: .14em;
}
.ip-label i.fa-circle-dot {
  color: var(--green);
  font-size: .55rem;
  vertical-align: middle;
  margin-right: 5px;
}
.ipc-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ip-version-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(0,212,255,.25);
}

/* IP hero with meta line */
.ipc-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px 18px;
  flex-wrap: wrap;
}
.ip-display-wrapper {
  flex: 1;
  min-width: 240px;
}
.ip-address {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 60%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  word-break: break-all;
  margin-bottom: 12px;
  text-shadow: 0 0 60px rgba(0,212,255,.18);
}
[data-theme="light"] .ip-address {
  text-shadow: 0 0 60px rgba(0,120,220,.18);
}
.ip-address .ip-loading {
  -webkit-text-fill-color: initial;
}
.ip-meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-2);
}
.ip-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.ip-meta-item i {
  color: var(--accent);
  font-size: .75rem;
}
.ip-meta-val { color: var(--text); }
.ip-meta-sep { color: var(--text-3); }

/* Action chips */
.ipc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.action-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: .8125rem;
  font-weight: 600;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s, transform .15s var(--ease);
}
.action-chip i { font-size: .85rem; }
.action-chip:hover {
  color: var(--text);
  background: var(--bg-2);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.action-chip.success {
  color: var(--green);
  border-color: rgba(0,255,136,.35);
  background: var(--green-dim);
}
.action-chip.primary {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(0,212,255,.6);
}
[data-theme="light"] .action-chip.primary { color: #fff; }
.action-chip.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ─── Privacy row (ring + facts) ─── */
.privacy-row {
  display: block;
  border-top: 1px solid var(--border);
}

.privacy-score-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,212,255,.06), transparent 65%);
}

.ring-wrap {
  position: relative;
  width: 100px; height: 100px;
  flex-shrink: 0;
}
.privacy-ring {
  width: 100px; height: 100px;
  transform: rotate(-90deg);
}
.privacy-ring .ring-bg,
.privacy-ring .ring-fg {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.privacy-ring .ring-bg { stroke: var(--border); }
.privacy-ring .ring-fg {
  stroke: var(--green);
  transition: stroke-dashoffset 1s var(--ease), stroke .4s;
  filter: drop-shadow(0 0 6px currentColor);
}
.ring-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.ring-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.ring-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 3px;
}

.privacy-info { min-width: 0; }
.privacy-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -.01em;
}
.privacy-sub {
  font-size: .78rem;
  color: var(--text-2);
  margin-bottom: 8px;
}
.privacy-checks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pcheck {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.pcheck i {
  font-size: .42rem;
  color: var(--text-3);
}
.pcheck.ok      { color: var(--green);  border-color: rgba(0,255,136,.3); background: var(--green-dim); }
.pcheck.ok i    { color: var(--green); }
.pcheck.warn    { color: #ffbe00; border-color: rgba(255,190,0,.3);  background: rgba(255,190,0,.08); }
.pcheck.warn i  { color: #ffbe00; }
.pcheck.bad     { color: var(--danger); border-color: rgba(255,79,79,.3); background: rgba(255,79,79,.08); }
.pcheck.bad i   { color: var(--danger); }
.pcheck.pending i {
  animation: pcheck-blink 1.2s ease-in-out infinite;
}
@keyframes pcheck-blink {
  0%,100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* ─── Quick facts: explicit breakpoints to avoid empty grid cells ─── */
/* The card has 6 fact tiles + 1 ping tile (which always spans the full
   row via grid-column: 1/-1). Because 6 only divides evenly into 1, 2,
   3 and 6 columns, an `auto-fit` grid would leave the row with a grey
   tail whenever the calculated column count is 4, 5 or 7. We therefore
   pick exact divisors at each breakpoint:

     desktop  (≥1024) → 6 cols (1 row of facts + ping below)
     tablet   (≥640)  → 3 cols (2 rows + ping)
     phone    (<640)  → 2 cols (3 rows + ping)
*/
.quick-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);          /* gaps act as inner border lines */
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) {
  .quick-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .quick-facts { grid-template-columns: repeat(6, 1fr); }
}
.qfact {
  padding: 14px 22px;
  background: var(--bg-2);            /* matches the main-ip-card glass bg */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  transition: background .15s;
}
.qfact:hover { background: rgba(255,255,255,.02); }
.qfact-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.qfact-label i { color: var(--accent); font-size: .62rem; }
.qfact-value {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* ─── Live strip refinements ─── */
.lsi-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.lsi-row .lsi-value {
  font-size: 1rem;
  font-weight: 800;
}

/* ════════════════════════════════════════
   LIVE PING TILE — fills the remaining
   space on the right of the quick-facts row.
   Realtime value + sparkline + min/avg/max.
═════════════════════════════════════════ */
.qfact-ping {
  /* Spans the full width of the auto-fit grid, regardless of how
     many columns the parent decided to lay out at this viewport. */
  grid-column: 1 / -1;
  min-width: 0;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%,
      rgba(0, 212, 255, 0.10) 0%,
      rgba(0, 212, 255, 0)    55%),
    var(--bg-2);
}
.qfact-ping::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 212, 255, .35) 50%,
    transparent 100%);
  opacity: .25;
  height: 1px;
  top: 0;
  animation: qfact-ping-scan 4s linear infinite;
}
@keyframes qfact-ping-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.qfact-ping-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.qfact-ping-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-3, #9fb3cd);
}
.qfact-ping-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green, #22d28e);
  box-shadow: 0 0 6px var(--green, #22d28e);
  animation: qfact-ping-pulse 1.4s ease-in-out infinite;
}
@keyframes qfact-ping-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.45); opacity: .55; }
}
.qfact-ping-target {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .68rem;
  color: var(--text-2, #c8d4e6);
  background: rgba(255, 255, 255, .04);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
}

.qfact-ping-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 1;
}
.qfact-ping-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  line-height: 1;
}
.qfact-ping-value {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--accent, #00d4ff);
  transition: color .25s, text-shadow .25s;
  text-shadow: 0 0 14px rgba(0, 212, 255, .35);
  font-variant-numeric: tabular-nums;
}
.qfact-ping-unit {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3, #9fb3cd);
  letter-spacing: .5px;
}

/* color-coded value */
.qfact-ping[data-tier="excellent"] .qfact-ping-value { color: var(--green, #22d28e); text-shadow: 0 0 14px rgba(34, 210, 142, .45); }
.qfact-ping[data-tier="good"]      .qfact-ping-value { color: var(--accent, #00d4ff); text-shadow: 0 0 14px rgba(0, 212, 255, .45); }
.qfact-ping[data-tier="fair"]      .qfact-ping-value { color: #ffbe00;                text-shadow: 0 0 14px rgba(255, 190, 0, .45); }
.qfact-ping[data-tier="poor"]      .qfact-ping-value { color: var(--danger, #ff4f4f);  text-shadow: 0 0 14px rgba(255, 79, 79, .45); }

.qfact-ping[data-tier="excellent"] .qfact-ping-dot { background: var(--green,#22d28e); box-shadow: 0 0 6px var(--green,#22d28e); }
.qfact-ping[data-tier="good"]      .qfact-ping-dot { background: var(--accent,#00d4ff);box-shadow: 0 0 6px var(--accent,#00d4ff); }
.qfact-ping[data-tier="fair"]      .qfact-ping-dot { background: #ffbe00;              box-shadow: 0 0 6px #ffbe00; }
.qfact-ping[data-tier="poor"]      .qfact-ping-dot { background: var(--danger,#ff4f4f);box-shadow: 0 0 6px var(--danger,#ff4f4f); }

/* sparkline = bar chart of last N readings */
.qfact-ping-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  flex: 1;
  max-width: 160px;
  min-width: 90px;
  padding: 2px 0;
  /* Subtle baseline so the sparkline is visible even before the first
     ping completes (otherwise the area looked empty/grey on mobile). */
  border-bottom: 1px dotted var(--border, rgba(255,255,255,.18));
}
.qfact-ping-spark .spark-bar {
  flex: 1;
  min-width: 2px;
  /* Minimum 4 px so individual bars are still visible on the smallest
     phone heights (24 px container × 12% = 2.88 px is too thin). */
  min-height: 4px;
  height: 14%;
  background: var(--accent, #00d4ff);
  border-radius: 1px 1px 0 0;
  opacity: .55;
  transition: height .35s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              background .35s,
              opacity .35s;
}
.qfact-ping-spark .spark-bar.latest {
  opacity: 1;
  box-shadow: 0 0 6px currentColor;
}
.qfact-ping-spark .spark-bar.tier-excellent { background: var(--green,  #22d28e); color: var(--green,  #22d28e); }
.qfact-ping-spark .spark-bar.tier-good      { background: var(--accent, #00d4ff); color: var(--accent, #00d4ff); }
.qfact-ping-spark .spark-bar.tier-fair      { background: #ffbe00;                color: #ffbe00; }
.qfact-ping-spark .spark-bar.tier-poor      { background: var(--danger, #ff4f4f); color: var(--danger, #ff4f4f); }
.qfact-ping-spark .spark-bar.miss {
  background: var(--border, rgba(255,255,255,.25));
  height: 8% !important;
  min-height: 4px;
  opacity: .65;
}

.qfact-ping-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .68rem;
  color: var(--text-3, #9fb3cd);
  border-top: 1px dashed var(--border, rgba(255, 255, 255, .08));
  padding-top: 6px;
}
.qfact-ping-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.qfact-ping-stat i {
  font-size: .55rem;
  opacity: .7;
}
.qfact-ping-stat span {
  color: var(--text-1, #e6eef9);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qfact-ping-stat small {
  font-size: .58rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .65;
}

/* Responsive scaling for the LIVE PING tile.
   Earlier versions hid the sparkline and the target pill on phones to
   "save space" — but this left a large empty area on the right of the
   readout (it looked like a layout bug). We now keep both visible at
   every viewport and just shrink them so they always fit:
     ≤768  – sparkline narrower, label/target tighter
     ≤480  – smaller value font, sparkline gets its own line below
              the number so neither is squashed.
     ≤380  – sparkline still visible but height-reduced. */
@media (max-width: 768px) {
  .qfact-ping {
    min-width: 0;
  }
  .qfact-ping-spark { max-width: 140px; min-width: 60px; }
}
@media (max-width: 480px) {
  /* Stack the readout and sparkline so the sparkline fills the full
     width of the tile instead of fighting the value text for room. */
  .qfact-ping-body {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .qfact-ping-readout { justify-content: flex-start; }
  .qfact-ping-spark {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 24px;
  }
  .qfact-ping-meta { font-size: .62rem; gap: 6px; }
  .qfact-ping-value { font-size: 1.45rem; }
  .qfact-ping-target { font-size: .62rem; padding: 2px 6px; }
}
@media (max-width: 380px) {
  .qfact-ping-spark { height: 20px; }
  .qfact-ping-value { font-size: 1.25rem; }
}

/* ─── Map card header ─── */
.map-card { padding: 14px; min-height: 360px; }
.map-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.map-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
}
.map-title i { color: var(--accent); }
.map-hint {
  font-size: .7rem;
  color: var(--text-3);
}
#home-map {
  height: 320px;
  min-height: 320px;
}

/* ─── Value strip (3-card feature row) ─── */
.value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 16px;
  margin: 36px auto 8px;
}
.value-card {
  position: relative;
  padding: 22px 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .25s, transform .25s var(--ease), background .25s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(0,212,255,.08), transparent 60%);
  opacity: 0;
  transition: opacity .35s;
}
.value-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-3px);
}
.value-card:hover::before { opacity: 1; }
.value-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent-dim), var(--green-dim));
  border: 1px solid rgba(0,212,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.value-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.value-card p {
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* ─── Tools header (modernized) ─── */
.tools-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tools-header .section-title { margin-bottom: 4px; }
.section-sub {
  font-size: .875rem;
  color: var(--text-2);
  max-width: 600px;
  margin: 0;
}
.section-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid rgba(0,212,255,.25);
  background: var(--accent-dim);
  transition: background .15s, transform .15s var(--ease);
}
.section-cta:hover {
  background: rgba(0,212,255,.18);
  transform: translateX(2px);
}

/* ─── Modern tools grid cards ─── */
.tools-grid-modern .tool-card {
  position: relative;
  padding: 24px 24px 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.tool-card-glow {
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(0,212,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity .4s, transform .6s var(--ease);
  pointer-events: none;
  transform: translateX(0);
}
.tools-grid-modern .tool-card:hover .tool-card-glow {
  opacity: 1;
  transform: translateX(80%);
}
.tool-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-dim), var(--green-dim));
  border: 1px solid rgba(0,212,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: transform .25s var(--ease), border-color .25s;
}
.tools-grid-modern .tool-card:hover .tool-icon-wrap {
  transform: scale(1.06) rotate(-3deg);
  border-color: rgba(0,212,255,.5);
}
.tools-grid-modern .tool-card .tool-icon {
  font-size: 1.15rem;
}

/* ─── Responsive tweaks ─── */
@media (max-width: 1024px) {
  .privacy-row {
    grid-template-columns: 1fr;
  }
  .privacy-score-card {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .value-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .trust-strip {
    padding: 8px 12px;
    gap: 4px;
  }
  .trust-divider { display: none; }
  .trust-item { min-width: 130px; gap: 8px; padding: 6px 0; }
  .trust-text { line-height: 1.15; }
  .trust-value { font-size: .75rem; }
  .trust-label { font-size: .62rem; }

  .ipc-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 20px 18px;
  }
  .ipc-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .action-chip { padding: 8px 12px; font-size: .78rem; }

  .privacy-score-card {
    flex-direction: row;
    padding: 16px 18px;
  }
  .ring-wrap { width: 80px; height: 80px; }
  .privacy-ring { width: 80px; height: 80px; }
  .ring-value { font-size: 1.3rem; }
  .qfact { padding: 12px 16px; }

  .value-strip { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }

  .tools-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .logo { font-size: 1rem; }
  .ip-address { font-size: clamp(1.5rem, 9vw, 2.25rem); }
  .ipc-top { padding: 14px 18px 0; }
  .ipc-hero { padding: 12px 18px 14px; }
  .privacy-score-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
    text-align: left;
  }
  .ring-wrap { align-self: center; }
}

/* ──────────────────────────────────────────────────────────────────────
   Data-accuracy disclaimer — small inline note appended to result blocks
   for tools where a wrong reading could impact decisions (geolocation,
   blacklist verdict, VPN flag). Keeps us legally clean against
   defamation / wrong-result claims.
   ────────────────────────────────────────────────────────────────────── */
.data-accuracy-note {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--text-3);
  background: rgba(255, 170, 0, 0.05);
  border: 1px solid rgba(255, 170, 0, 0.18);
  border-radius: 8px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.data-accuracy-note i {
  color: #ffaa00;
  flex: 0 0 auto;
  margin-top: 2px;
}
.data-accuracy-note a {
  color: var(--accent);
  text-decoration: none;
}
.data-accuracy-note a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────────
   OSM tile dark filter — matches the dark UI without needing a paid
   tile provider. Standard OSM tiles are commercial-OK and key-free; we
   just dim/desaturate them in CSS so they blend with the dark theme.
   ────────────────────────────────────────────────────────────────────── */
.osm-dark {
  filter: brightness(0.62) saturate(0.82) hue-rotate(8deg) contrast(0.92);
}
.leaflet-container {
  background: #0e1116;
}
.leaflet-control-attribution {
  background: rgba(15, 18, 22, 0.78) !important;
  color: var(--text-3) !important;
  font-size: 10px !important;
  backdrop-filter: blur(4px);
}
.leaflet-control-attribution a {
  color: var(--accent) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Breadcrumb — mirrors the BreadcrumbList JSON-LD in <head>.
   Keeps users oriented and reinforces the structured-data signal so
   Google can show the breadcrumb in SERPs.
   ────────────────────────────────────────────────────────────────────── */
.breadcrumb {
  margin: 18px 0 22px;
  font-size: .85rem;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.breadcrumb a:hover {
  color: var(--accent);
  background: var(--accent-glow);
}
.breadcrumb a i { font-size: .82rem; opacity: .9; }
.breadcrumb-sep {
  font-size: .65rem;
  color: var(--text-3);
  opacity: .7;
}
.breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}
.breadcrumb-current span {
  padding: 4px 8px;
}
@media (max-width: 600px) {
  .breadcrumb { margin: 12px 0 16px; font-size: .8rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   Visible FAQ section. Uses native <details>/<summary> so it works
   without JS, is accessible by default, and the answer text stays in
   the DOM even when collapsed — which is what Google needs to grant
   the FAQ-rich-result on top of the JSON-LD we already emit.
   ────────────────────────────────────────────────────────────────────── */
.faq-section {
  margin: 64px auto 0;
  padding: 0 20px;
}
.faq-inner {
  max-width: 880px;
  margin: 0 auto;
}
.faq-section-header {
  text-align: center;
  margin-bottom: 28px;
}
.faq-section-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}
.faq-section-header h2 i { color: var(--accent); }
.faq-section-sub {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: .95rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.faq-item[open] {
  border-color: var(--border-hi);
  background: var(--bg-3);
}
.faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  transition: color .2s;
}
.faq-q::-webkit-details-marker { display: none; } /* Safari */
.faq-q:hover { color: var(--accent); }
.faq-q-text { line-height: 1.4; }
.faq-chevron {
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--text-2);
  transition: transform .25s var(--ease), color .2s;
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.faq-a {
  padding: 0 20px 18px;
  color: var(--text-2);
  font-size: .94rem;
  line-height: 1.7;
  animation: faqFadeIn .25s var(--ease);
}
.faq-a p { margin: 0; }

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

@media (max-width: 600px) {
  .faq-section { margin-top: 44px; }
  .faq-section-header h2 { font-size: 1.3rem; }
  .faq-q { padding: 14px 16px; font-size: .95rem; }
  .faq-a { padding: 0 16px 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE HARDENING — global mobile/tablet polish
   --------------------------------------------------------------------
   Wraps up the few dozen places where individual components could
   horizontally overflow on a 360 px viewport (the smallest device
   class still in widespread use, e.g. iPhone SE 1st gen, Galaxy Fold
   front display). Each rule below is intentionally scoped to small
   widths so the desktop layout is unchanged.
   --------------------------------------------------------------------
   Breakpoint plan
     ≤1100  - desktop tight (handled per-component already)
     ≤768   - tablet portrait, mobile menu kicks in (already covered)
     ≤600   - small tablet / large phone tweaks
     ≤480   - phone (default modern viewport)
     ≤380   - small phone — last-line-of-defence rules below
   ════════════════════════════════════════════════════════════════════ */

/* Anything that contains user-supplied or dynamic strings (IPs, URLs,
   tokens, MAC addrs, command snippets) needs to wrap or scroll on
   narrow screens — otherwise it pushes the whole page sideways. */
.tool-input,
.tool-pre,
code,
pre,
kbd,
.ip-address,
.bl-item,
.port-item {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Generic table responsive helper. Pages can wrap a <table> in
   `<div class="table-wrap">` to gain horizontal scroll instead of
   blowing out the layout. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.table-wrap table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

/* ─────────────────────────  ≤768 px (tablet/phone)  ───────────────── */
@media (max-width: 768px) {
  .container { padding: 0 18px; }

  /* Hero / page titles can have very long English phrases ("VPN and
     Proxy Leak Detector") that don't break naturally. Force a soft
     wrap so we never exceed the viewport. */
  h1, h2, h3,
  .ipt-title,
  .page-hero h1,
  .tool-hero h1,
  .faq-section-header h2 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Any flex row built for desktop should wrap on touch devices so
     buttons stack instead of getting clipped. */
  .tool-input-row,
  .tool-results-header,
  .ipc-actions,
  .live-strip,
  .quick-facts,
  .tools-header {
    flex-wrap: wrap;
  }

  /* Forms / inputs need at least 44 px tap targets per WCAG 2.5.5. */
  .tool-input,
  .btn,
  .action-chip,
  .nav-links a,
  .header-cta a,
  .theme-switch-btn,
  button {
    min-height: 44px;
  }
  .tool-input { padding: 12px 14px; }

  /* Long dynamic IDs/URLs in result panels — let them wrap on word
     boundaries instead of pushing the card wider than the viewport. */
  .tool-results,
  .tool-pre,
  .ipt-meta,
  .breadcrumb-current span {
    max-width: 100%;
  }
}

/* ─────────────────────────  ≤480 px (phone)  ─────────────────────── */
@media (max-width: 480px) {
  .container {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left:  max(14px, env(safe-area-inset-left));
  }

  /* The IP address number in the hero can be 39 chars on IPv6 — the
     existing clamp() max-out (2.25 rem) is fine but we give it room
     to start lower so it never overflows on the smallest phones. */
  .ip-address { font-size: clamp(1.15rem, 8vw, 2rem); letter-spacing: -.02em; }


  /* Stack secondary action buttons in the hero */
  .ipc-actions { gap: 6px; }
  .ipc-actions .action-chip { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .ipc-actions .action-chip.primary { flex-basis: 100%; }

  /* Live ping strip stacks vertically on the smallest screens. */
  .live-strip-stat { flex: 1 1 50%; min-width: 0; }

  /* Per-port / per-blacklist grids drop to single column. */
  .port-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bl-grid   { grid-template-columns: 1fr;     gap: 8px; }

  /* Headings — gentler sizes so they never wrap awkwardly. */
  .section-title { font-size: 1.05rem; }

  /* Tighter padding on phones — the auto-fit columns from the base
     rule already lay out 2 (or 3 if width allows) tiles per row. */
  .qfact, .qfact-ping { padding: 12px 14px; }
  .qfact-value, .qfact-label, .lsi-value, .lsi-label,
  .detail-value, .detail-label {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Live strip on phones: switch from a horizontal scroll bar to a
     2-column grid so all 6 network signals are visible without
     scrolling and without leaving a grey tail. The vertical separator
     pseudo-element is irrelevant once items are stacked into a grid. */
  .live-strip { flex-direction: column; }
  .live-strip-label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 16px;
    justify-content: center;
  }
  .live-strip-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    overflow: visible;
    flex: unset;
  }
  .live-strip-item {
    flex: unset;
    background: var(--bg-2);
    padding: 10px 14px;
    border-right: none;
  }
  .live-strip-sep { display: none; }

  /* MAC lookup: OS tab pills wrap onto two rows cleanly */
  .mac-os-tabs, .os-tabs { flex-wrap: wrap; gap: 8px; }

  /* Tool input row — primary action takes full width on a phone so
     the user can tap it without missing. */
  .tool-input-row .tool-input { flex-basis: 100%; }

  /* Page hero icons + heading wrap to prevent right-edge clipping. */
  .page-hero,
  .tool-hero,
  .vpn-hero {
    text-align: center;
  }
}

/* ─────────────────────────  ≤380 px (very small phone)  ───────────── */
@media (max-width: 380px) {
  :root { --radius: 10px; --radius-lg: 14px; }

  .container { padding: 0 12px; }
  .logo { font-size: 0.9rem; }
  .logo i { font-size: 1rem; }

  .breadcrumb { font-size: .75rem; }

  /* Single-column for everything that can be split. */
  .ip-details-grid { grid-template-columns: 1fr 1fr; }
  .port-grid       { grid-template-columns: 1fr; }
  .pwd-options-grid,
  .pwd-grid,
  .vpn-checks-grid { grid-template-columns: 1fr !important; }

  /* IP address: leave room for the IPv6 monospace string. */
  .ip-address { font-size: clamp(1rem, 7.5vw, 1.6rem); }


  /* Button labels were tight already — unify them to small. */
  .btn, .action-chip, .tool-input, button {
    font-size: .85rem;
  }
}

/* ─────────────────────────  Touch & accessibility  ────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* On touch devices remove hover-only effects so the user isn't
     left with a "stuck" hover state after tapping. */
  .nav-links a:hover,
  .btn:hover,
  .action-chip:hover {
    transform: none;
  }
}