*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #070d1a;
  --surface:    rgba(13, 25, 50, 0.75);
  --surface2:   rgba(20, 40, 80, 0.6);
  --border:     rgba(56, 120, 255, 0.18);
  --blue1:      #3b82f6;
  --blue2:      #60a5fa;
  --blue3:      #93c5fd;
  --cyan:       #22d3ee;
  --glow:       rgba(59, 130, 246, 0.35);
  --text:       #e2e8f0;
  --muted:      #64748b;
  --success:    #10b981;
  --warning:    #f59e0b;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* ── Animated background ── */
.bg-canvas {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.bg-canvas::before {
  content: '';
  position: absolute; inset: -50%;
  background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(59,130,246,.18) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 70%, rgba(34,211,238,.12) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 50% 50%, rgba(99,102,241,.1) 0%, transparent 60%);
  animation: bgDrift 18s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(3%,4%) rotate(3deg); }
}

/* Floating orbs */
.orb {
  position: fixed; border-radius: 50%; filter: blur(80px);
  opacity: .15; animation: float 20s ease-in-out infinite alternate; pointer-events: none;
}
.orb1 { width: 600px; height: 600px; background: #3b82f6; top: -200px; left: -200px; animation-duration: 22s; }
.orb2 { width: 500px; height: 500px; background: #22d3ee; bottom: -150px; right: -150px; animation-duration: 18s; animation-delay: -8s; }
.orb3 { width: 300px; height: 300px; background: #6366f1; top: 50%; left: 50%; animation-duration: 25s; animation-delay: -4s; }
@keyframes float {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.1); }
}

/* Grid dots */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(59,130,246,.12) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Layout ── */
.wrapper {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem;
}

/* ── Header ── */
header {
  text-align: center; padding: 2.5rem 0 1.5rem;
}
.badge-gov {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: .35rem 1rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .05em;
  color: var(--blue3); text-transform: uppercase;
  backdrop-filter: blur(12px); margin-bottom: 1.25rem;
}
.badge-gov i { color: var(--cyan); }
header h1 {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, var(--blue2) 50%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.2; margin-bottom: .5rem;
}
header p {
  color: var(--muted); font-size: .9rem;
}

/* ── Hero IP card ── */
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 60px var(--glow), 0 1px 0 rgba(255,255,255,.05) inset;
  margin-bottom: 1.75rem;
  position: relative; overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue1), var(--cyan), var(--blue1), transparent);
}
.ip-version-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.ipv4 { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.ipv6 { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }

/* ── Dual IP layout ── */
.ip-dual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin-top: .5rem;
}
@media (max-width: 600px) { .ip-dual { grid-template-columns: 1fr; } }
.ip-block {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1rem; position: relative;
}
.ip-block-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: .5rem;
}
.ip-block-badge.v4 { color: #10b981; }
.ip-block-badge.v6 { color: #f59e0b; }
.ip-block-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1rem, 3vw, 1.5rem); font-weight: 600;
  background: linear-gradient(90deg, #fff, var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  word-break: break-all; animation: pulse-text 3s ease-in-out infinite;
}
.ip-block-val.v6-val { background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; }
.ip-block-val.unavail { background: none; -webkit-text-fill-color: var(--muted); color: var(--muted); font-size: .82rem; animation: none; }
.ip-copy-mini {
  position: absolute; top: .7rem; right: .7rem;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px; padding: .25rem .5rem;
  font-size: .7rem; cursor: pointer; transition: all .2s;
}
.ip-copy-mini:hover { background: rgba(59,130,246,.2); color: var(--blue2); }

/* ── Loading spinner ── */
.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(245,158,11,.3); border-top-color: #f59e0b;
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Local IP section ── */
.local-ip-list { list-style: none; padding: 0; margin: 0; }
.local-ip-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0; font-family: 'JetBrains Mono', monospace; font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.local-ip-list li:last-child { border-bottom: none; }
.local-tag {
  font-size: .65rem; font-weight: 600; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 4px; flex-shrink: 0;
}
.tag-v4 { background: rgba(16,185,129,.15); color: #10b981; }
.tag-v6 { background: rgba(245,158,11,.15); color: #f59e0b; }
.tag-link { background: rgba(99,102,241,.15); color: #a78bfa; }

.ip-label { font-size: .8rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.ip-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 600;
  background: linear-gradient(90deg, #fff, var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  word-break: break-all; letter-spacing: .02em;
  animation: pulse-text 3s ease-in-out infinite;
}
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: .85; }
}
.copy-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--blue1), var(--cyan));
  border: none; border-radius: 10px; color: #fff;
  font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 600;
  padding: .65rem 1.5rem; cursor: pointer; margin-top: 1.25rem;
  transition: all .2s; box-shadow: 0 4px 20px rgba(59,130,246,.4);
}
.copy-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(59,130,246,.5); }
.copy-btn:active { transform: translateY(0); }
.copy-btn.copied { background: linear-gradient(135deg, #10b981, #059669); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: center; margin-top: 1.25rem;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: .35rem .9rem; font-size: .8rem;
  color: var(--blue3); backdrop-filter: blur(8px);
}
.hero-pill i { color: var(--cyan); font-size: .75rem; }

/* ── Section title ── */
.section-title {
  display: flex; align-items: center; gap: .75rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  margin: 2rem 0 1rem;
}
.section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.section-title i { color: var(--blue1); }

/* ── Grid ── */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ── Info Card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1.25rem;
  backdrop-filter: blur(16px);
  transition: border-color .25s, transform .25s, box-shadow .25s;
  display: flex; align-items: flex-start; gap: .9rem;
  animation: cardIn .5s ease both;
}
.card:hover {
  border-color: rgba(59,130,246,.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(59,130,246,.15);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.icon-blue  { background: rgba(59,130,246,.15); color: var(--blue2); }
.icon-cyan  { background: rgba(34,211,238,.12); color: var(--cyan); }
.icon-green { background: rgba(16,185,129,.12); color: #10b981; }
.icon-amber { background: rgba(245,158,11,.12); color: #f59e0b; }
.icon-purple{ background: rgba(139,92,246,.12); color: #a78bfa; }
.icon-pink  { background: rgba(236,72,153,.12); color: #f472b6; }

.card-body { flex: 1; min-width: 0; }
.card-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.card-value {
  font-size: .9rem; color: var(--text); word-break: break-word; line-height: 1.4;
}
.card-value.mono { font-family: 'JetBrains Mono', monospace; font-size: .82rem; }
.card-value a {
  color: var(--cyan); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem;
}
.card-value a:hover { text-decoration: underline; }

/* ── Location card (wide) ── */
.location-card {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
}
.location-flag { font-size: 2.5rem; }
.location-info { flex: 1; min-width: 180px; }
.location-info .city { font-size: 1.25rem; font-weight: 700; color: #fff; }
.location-info .sub  { font-size: .85rem; color: var(--muted); margin-top: .15rem; }
.location-map-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.25);
  color: var(--cyan); border-radius: 10px; padding: .5rem 1rem;
  text-decoration: none; font-size: .82rem; font-weight: 500;
  transition: all .2s; white-space: nowrap;
}
.location-map-btn:hover { background: rgba(34,211,238,.2); transform: translateY(-2px); }
.coords {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; color: var(--muted); margin-top: .4rem;
}

/* ── Footer ── */
footer {
  text-align: center; margin-top: 3rem;
  font-size: .78rem; color: var(--muted); line-height: 1.8;
}
footer strong { color: var(--blue3); }
.footer-divider {
  height: 1px; width: 80px; margin: 1rem auto;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.live-clock {
  font-family: 'JetBrains Mono', monospace;
  font-size: .9rem; color: var(--blue3);
  margin-bottom: .25rem;
}

/* ── Staggered animation delays ── */
.card:nth-child(1)  { animation-delay: .05s; }
.card:nth-child(2)  { animation-delay: .10s; }
.card:nth-child(3)  { animation-delay: .15s; }
.card:nth-child(4)  { animation-delay: .20s; }
.card:nth-child(5)  { animation-delay: .25s; }
.card:nth-child(6)  { animation-delay: .30s; }
.card:nth-child(7)  { animation-delay: .35s; }
.card:nth-child(8)  { animation-delay: .40s; }
.card:nth-child(9)  { animation-delay: .45s; }
.card:nth-child(10) { animation-delay: .50s; }

@media (max-width: 540px) {
  .hero-card { padding: 1.75rem 1.25rem; }
  .location-card { flex-direction: column; gap: .75rem; }
}

/* ── VPN/Proxy badge ── */
.threat-card {
  grid-column: 1/-1;
  border-radius: 14px; padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: .9rem;
  backdrop-filter: blur(16px);
}
.threat-clean  { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); }
.threat-medium { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); }
.threat-high   { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.25); }
.threat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.threat-clean  .threat-icon { background: rgba(16,185,129,.15); color: #10b981; }
.threat-medium .threat-icon { background: rgba(245,158,11,.15); color: #f59e0b; }
.threat-high   .threat-icon { background: rgba(239,68,68,.15);  color: #ef4444; }
.threat-body .threat-title { font-size: .82rem; font-weight: 600; }
.threat-clean  .threat-title { color: #10b981; }
.threat-medium .threat-title { color: #f59e0b; }
.threat-high   .threat-title { color: #ef4444; }
.threat-body .threat-sub { font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.threat-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ttag { font-size: .68rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px; text-transform: uppercase; }
.ttag-proxy   { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.ttag-hosting { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.ttag-mobile  { background: rgba(99,102,241,.15); color: #a78bfa; border: 1px solid rgba(99,102,241,.3); }
.ttag-clean   { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); }

/* ── Latency / performance ── */
.latency-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem; font-weight: 700; line-height: 1;
}
.lat-good   { color: #10b981; }
.lat-ok     { color: #f59e0b; }
.lat-bad    { color: #ef4444; }
.lat-bar-wrap { background: rgba(255,255,255,.06); border-radius: 999px; height: 6px; margin: .6rem 0 .3rem; overflow: hidden; }
.lat-bar { height: 100%; border-radius: 999px; transition: width .6s ease; background: linear-gradient(90deg, #10b981, #3b82f6); width: 0%; }
.lat-samples { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.lat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .3s; }
.lat-dot.done-good { background: #10b981; }
.lat-dot.done-ok   { background: #f59e0b; }
.lat-dot.done-bad  { background: #ef4444; }
.run-test-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3);
  color: var(--blue2); border-radius: 8px; padding: .45rem .9rem;
  font-size: .78rem; font-weight: 600; cursor: pointer; margin-top: .6rem;
  transition: all .2s; font-family: 'Inter', sans-serif;
}
.run-test-btn:hover { background: rgba(59,130,246,.22); }
.run-test-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Screen info ── */
.screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .5rem; width: 100%; }
@media (max-width: 540px) { .screen-grid { grid-template-columns: repeat(2, 1fr); } }
.screen-item { background: rgba(255,255,255,.04); border-radius: 8px; padding: .6rem .8rem; text-align: center; min-width: 0; }
.screen-item .sv { font-family: 'JetBrains Mono', monospace; font-size: .92rem; color: var(--blue2); font-weight: 600; word-break: break-all; white-space: normal; line-height: 1.3; }
.screen-item .sk { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .25rem; }

/* ── Connection type ── */
.conn-type-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.conn-wifi     { background: rgba(34,211,238,.12); color: var(--cyan); border: 1px solid rgba(34,211,238,.25); }
.conn-cellular { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.conn-ethernet { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.25); }
.conn-unknown  { background: rgba(100,116,139,.12); color: var(--muted); border: 1px solid rgba(100,116,139,.25); }
.speed-row { display: flex; gap: 1.5rem; margin-top: .6rem; flex-wrap: wrap; }
.speed-item .sv { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 700; color: var(--blue2); }
.speed-item .sk { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Speed Test ── */
.speedtest-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 2rem 1.75rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 40px rgba(59,130,246,.08);
  margin-bottom: 1.75rem;
  position: relative; overflow: hidden;
  text-align: center;
}
.speedtest-card::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue1), var(--cyan), var(--blue1), transparent);
}
.st-title { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.st-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 480px; margin: 0 auto 1.5rem; }
.st-gauge {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.25rem 1rem;
  position: relative; overflow: hidden;
}
.st-gauge-label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.st-gauge-label.dl { color: var(--cyan); }
.st-gauge-label.ul { color: #a78bfa; }
.st-gauge-label i { margin-right: .3rem; }
.st-speed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.2rem; font-weight: 700; line-height: 1;
  transition: all .3s;
}
.st-speed.dl { color: var(--cyan); }
.st-speed.ul { color: #a78bfa; }
.st-speed.idle { color: var(--muted); font-size: 1.8rem; }
.st-unit { font-size: .72rem; color: var(--muted); margin-top: .25rem; }
.st-bar-wrap { height: 4px; background: rgba(255,255,255,.06); border-radius: 999px; margin-top: .75rem; overflow: hidden; }
.st-bar { height: 100%; width: 0%; border-radius: 999px; }
.st-bar.dl { background: linear-gradient(90deg, var(--blue1), var(--cyan)); }
.st-bar.ul { background: linear-gradient(90deg, #6366f1, #a78bfa); }
.st-status { font-size: .8rem; color: var(--muted); margin-bottom: 1.25rem; min-height: 1.2em; }
.st-start-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: linear-gradient(135deg, var(--blue1), var(--cyan));
  border: none; border-radius: 999px; color: #fff;
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 700;
  padding: .8rem 2.5rem; cursor: pointer; letter-spacing: .03em;
  transition: all .25s; box-shadow: 0 4px 24px rgba(59,130,246,.4);
}
.st-start-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(59,130,246,.5); }
.st-start-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.st-ping-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; }
.st-ping-item { text-align: center; }
.st-ping-item .pv { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600; color: var(--text); }
.st-ping-item .pk { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: .1rem; }
.st-rate-warn { font-size: .72rem; color: #ef4444; margin-top: .75rem; display: none; }


/* ── Dark / Light mode ── */
:root.light {
  --bg:      #e8eef6;
  --surface: rgba(255,255,255,.97);
  --surface2:rgba(220,228,240,.9);
  --border:  rgba(59,130,246,.25);
  --text:    #0f172a;
  --muted:   #334155;
  --glow:    rgba(59,130,246,.08);
  --blue2:   #1d4ed8;
  --blue3:   #1e40af;
  --cyan:    #0369a1;
}
/* Base */
:root.light body { background: var(--bg); color: #0f172a; }
:root.light .orb { opacity: .03; }
:root.light body::after { opacity: .06; }
:root.light .bg-canvas::before { opacity: .15; }

/* Cards */
:root.light .card { background: rgba(255,255,255,.97); border-color: rgba(59,130,246,.2); }
:root.light .card:hover { border-color: rgba(59,130,246,.45); }
:root.light .card-label { color: #334155; }
:root.light .card-value { color: #0f172a; }
:root.light .card-value.mono { color: #1e293b; }
:root.light .card-value a { color: #0369a1; }

/* Hero & IP */
:root.light .hero-card { background: rgba(255,255,255,.97); }
:root.light .ip-block { background: rgba(240,245,255,.8); }
:root.light .ip-block-val { background: linear-gradient(90deg,#0f172a,#0369a1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
:root.light .ip-block-val.unavail { background:none; -webkit-text-fill-color:#334155; }
:root.light .hero-pill { background: rgba(240,245,255,.9); color: #1d4ed8; }
:root.light .badge-gov { background: rgba(240,245,255,.9); color: #1e40af; }
:root.light header h1 { background: linear-gradient(135deg,#0f172a 0%,#1d4ed8 50%,#0369a1 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
:root.light header p { color: #334155; }

/* Section titles */
:root.light .section-title { color: #334155; }
:root.light .section-title i { color: #1d4ed8; }

/* Local IP */
:root.light .local-ip-list li { color: #0f172a; border-color: rgba(59,130,246,.2); }
:root.light .ip-copy-mini { color: #334155; background: rgba(240,245,255,.8); }

/* Speed test */
:root.light .speedtest-card { background: rgba(255,255,255,.97); }
:root.light .st-gauge { background: rgba(240,245,255,.8); }
:root.light .st-speed.idle { color: #94a3b8; }
:root.light .st-speed.dl   { color: #0369a1; }
:root.light .st-speed.ul   { color: #6d28d9; }
:root.light .st-unit, :root.light .st-status { color: #334155; }
:root.light .st-ping-item .pv { color: #0f172a; }
:root.light .st-ping-item .pk { color: #334155; }
:root.light .st-bar-wrap { background: rgba(0,0,0,.08); }

/* Latency */
:root.light .latency-display { color: #0f172a; }
:root.light .lat-bar-wrap { background: rgba(0,0,0,.08); }
:root.light #latSummary { color: #334155; }
:root.light #latSummary strong { color: #0f172a; }

/* Screen & connection */
:root.light .screen-item { background: rgba(230,238,250,.6); }
:root.light .screen-item .sv { color: #1d4ed8; }
:root.light .screen-item .sk { color: #334155; }
:root.light .conn-type-badge.conn-wifi { background: rgba(3,105,161,.1); color: #0369a1; }
:root.light .speed-item .sv { color: #1d4ed8; }
:root.light .speed-item .sk { color: #334155; }

/* DNS / Protocol */
:root.light .dns-item { background: rgba(230,238,250,.6); }
:root.light .dns-item .dk { color: #334155; }
:root.light .dns-item .dv { color: #1d4ed8; }
:root.light .proto-badge.proto-h2 { background: rgba(29,78,216,.1); color: #1d4ed8; border-color: rgba(29,78,216,.3); }
:root.light .tls-badge { background: rgba(5,150,105,.1); color: #059669; }

/* Blacklist */
:root.light .bl-item.clean { background: rgba(240,253,244,.8); }
:root.light .bl-item.listed { background: rgba(254,242,242,.8); }
:root.light .bl-name { color: #0f172a; }
:root.light .bl-status.clean { color: #059669; }

/* Geo / Threat */
:root.light .location-info .city { color: #0f172a; }
:root.light .location-info .sub  { color: #334155; }
:root.light .coords { color: #334155; }

/* Footer */
:root.light footer { color: #334155; }
:root.light footer strong { color: #1d4ed8; }
:root.light .live-clock { color: #1d4ed8; }
:root.light .footer-divider { background: linear-gradient(90deg,transparent,rgba(59,130,246,.3),transparent); }

/* FAB buttons */
:root.light .fab-btn { background: rgba(255,255,255,.97); color: #1d4ed8; }
:root.light .fab-btn:hover { color: #0f172a; }

/* Ctrl buttons */
:root.light .ctrl-btn { background: rgba(255,255,255,.97); color: #1d4ed8; }

/* Modal */
:root.light .modal-box { background: rgba(255,255,255,.98); }
:root.light .modal-title { color: #334155; }

/* IP value big display */
:root.light .ip-value { background: linear-gradient(90deg,#0f172a,#0369a1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Header controls ── */
.header-controls {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .5rem 0 0;
}
.ctrl-btn {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--blue3); border-radius: 8px; padding: .35rem .8rem;
  font-size: .78rem; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all .2s; display: inline-flex; align-items: center; gap: .4rem;
  backdrop-filter: blur(8px);
}
.ctrl-btn:hover { border-color: var(--blue1); color: var(--text); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.65); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 2rem 1.75rem; text-align: center;
  max-width: 380px; width: 92%; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
#shareModal .modal-box { max-width: 440px; }
.modal-title {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1rem;
}
.modal-close {
  position: absolute; top: .8rem; right: .9rem;
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  transition: color .2s;
}
.modal-close:hover { color: var(--text); }
#qrcode {
  display: inline-block; padding: .8rem; background: #fff;
  border-radius: 10px; margin: .5rem 0 1rem; cursor: pointer;
}
.qr-label {
  font-family: 'JetBrains Mono', monospace; font-size: .78rem;
  color: var(--muted); word-break: break-all;
  line-height: 1.7; text-align: left;
  padding: .5rem .75rem;
  background: rgba(255,255,255,.04);
  border-radius: 8px; border: 1px solid var(--border);
  margin-bottom: .5rem;
}
.qr-hint { font-size: .68rem; color: var(--muted); margin: .35rem 0 .75rem; }
#qrImg { border-radius: 8px; display: block; }

/* Share card */
#shareCanvas { max-width: 100%; border-radius: 10px; margin: .75rem 0; display: block; }
.modal-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--blue1), var(--cyan));
  border: none; border-radius: 10px; color: #fff;
  font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600;
  padding: .55rem 1.25rem; cursor: pointer; margin: .2rem;
  transition: all .2s;
}
.modal-btn:hover { transform: translateY(-2px); }
.modal-btn.secondary {
  background: var(--surface2); border: 1px solid var(--border); color: var(--blue3);
}

/* ── Protocol badge ── */
.proto-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.proto-h3  { background: rgba(34,211,238,.15); color: var(--cyan); border: 1px solid rgba(34,211,238,.3); }
.proto-h2  { background: rgba(59,130,246,.15); color: var(--blue2); border: 1px solid rgba(59,130,246,.3); }
.proto-h1  { background: rgba(100,116,139,.15); color: var(--muted); border: 1px solid rgba(100,116,139,.25); }
.tls-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.25);
  margin-left: .5rem;
}

/* ── Traceroute ── */
.traceroute-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.tr-hop {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .82rem;
}
.tr-hop:last-child { border-bottom: none; }
.tr-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; color: var(--muted);
}
.tr-ip { font-family: 'JetBrains Mono', monospace; flex: 1; color: var(--blue2); font-size: .8rem; }
.tr-bar-wrap { width: 80px; height: 4px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.tr-bar { height: 100%; background: linear-gradient(90deg, var(--blue1), var(--cyan)); border-radius: 999px; }
.tr-ms { color: var(--muted); font-size: .75rem; text-align: right; min-width: 52px; font-family: 'JetBrains Mono', monospace; }
.tr-timeout { color: var(--muted); font-style: italic; font-size: .78rem; flex: 1; }
@media (max-width: 480px) { .tr-bar-wrap { display: none; } }

/* ── Blacklist ── */
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: .5rem; margin-top: .75rem; }
.bl-item {
  background: rgba(255,255,255,.03); border-radius: 8px;
  padding: .5rem .75rem; display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; transition: border-color .2s;
}
.bl-item.clean  { border: 1px solid rgba(16,185,129,.2); }
.bl-item.listed { border: 1px solid rgba(239,68,68,.3); background: rgba(239,68,68,.05); }
.bl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bl-dot.clean  { background: #10b981; box-shadow: 0 0 6px #10b981; }
.bl-dot.listed { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.bl-name { flex: 1; color: var(--text); }
.bl-status { font-size: .68rem; font-weight: 600; text-transform: uppercase; }
.bl-status.clean  { color: #10b981; }
.bl-status.listed { color: #ef4444; }
.bl-summary {
  padding: .75rem 1rem; border-radius: 10px; margin-top: .75rem;
  font-size: .82rem; font-weight: 600; text-align: center;
}
.bl-summary.ok   { background: rgba(16,185,129,.1); color: #10b981; border: 1px solid rgba(16,185,129,.2); }
.bl-summary.warn { background: rgba(239,68,68,.08); color: #ef4444; border: 1px solid rgba(239,68,68,.2); }

/* ── DNS ── */
.dns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: .75rem; margin-top: .75rem; }
.dns-item { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; padding: .65rem .9rem; }
.dns-item .dk { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.dns-item .dv { font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: var(--blue2); word-break: break-all; }

/* ── Floating action cluster ── */
.fab-cluster {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
.fab-btn {
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, rgba(13,25,50,.95), rgba(20,40,80,.95));
  border: 1px solid var(--border); color: var(--blue3);
  border-radius: 999px; padding: .6rem 1.2rem;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(16px); box-shadow: 0 4px 24px rgba(0,0,0,.4);
  transition: all .2s; font-family: 'Inter', sans-serif; white-space: nowrap;
}
.fab-btn:hover { border-color: var(--blue1); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(59,130,246,.25); }
.fab-btn.copied { border-color: #10b981; color: #10b981; }
@media (max-width: 540px) { .fab-cluster { bottom: 1rem; right: 1rem; } .fab-btn { padding: .5rem 1rem; } }

/* ── Utility ── */
/* Elements hidden by default, JS overrides via element.style */
#speedRow  { display: none; }
#stPingRow { visibility: hidden; }
#dnsGrid   { display: none; }
#blResults { display: none; }
#trResults { display: none; }
#copyV6Btn { display: none; }

/* Card layout helpers */
.card-local     { margin-bottom: 1.75rem; }
.card-note      { font-size: .7rem; color: var(--muted); margin-top: .6rem; }
.card-mt        { margin-top: 1rem; }
.card-flat      { align-items: flex-start; }
.card-icon-top  { flex-shrink: 0; margin-top: .1rem; }
.card-body-full { min-width: 0; width: 100%; }
.card-span      { grid-column: 1/-1; }
.flex-shrink-0  { flex-shrink: 0; }

/* Card inner flex row (blacklist/traceroute header) */
.card-inner-row { display: flex; align-items: center; gap: .9rem; }

/* Mono size variants */
.mono-sm { font-size: .78rem; }
.mono-ua { font-size: .74rem; color: var(--muted); }

/* Flag image */
.flag-img { margin-bottom: .4rem; border-radius: 3px; }

/* Protocol HTTP connection badge */
.badge-ok   { font-size: .7rem; color: #10b981; margin-left: .4rem; }
.badge-warn { font-size: .7rem; color: #f59e0b; margin-left: .4rem; }

/* Proto/TLS description */
.proto-desc { font-size: .72rem; color: var(--muted); margin-top: .4rem; }

/* Lat summary */
#latSummary { font-size: .82rem; color: var(--muted); line-height: 1.8; }

/* Desc sm (blacklist/traceroute) */
.desc-sm { font-size: .78rem; color: var(--muted); }

/* Footer */
.footer-sm   { font-size: .72rem; }
.footer-link { color: inherit; text-decoration: none; }

/* JS-generated HTML message classes (replaces inline styles in JS strings) */
.text-unavail { font-size: .78rem; color: var(--muted); animation: none; -webkit-text-fill-color: var(--muted); }
.text-unavail i { margin-right: .35rem; }
.msg-muted    { color: var(--muted); font-family: 'Inter', sans-serif; font-size: .82rem; }
.msg-running  { color: var(--muted); font-size: .82rem; padding: .5rem 0; }
.msg-empty    { color: var(--muted); font-size: .82rem; padding: .5rem 0; }
.msg-error    { color: #ef4444; font-size: .82rem; padding: .5rem 0; }
.msg-grid-muted { color: var(--muted); font-size: .82rem; }
.msg-grid-error { color: #ef4444; font-size: .82rem; }
.dns-span     { grid-column: 1/-1; }
.dv-muted     { color: var(--muted); }
.qr-key       { color: var(--muted); }
.qr-val       { color: var(--blue2); }
.lat-label    { color: var(--text); }

#tracerouteSection { display: none; }

.card-flex-col { flex-direction: column; align-items: stretch; gap: .5rem; }

.ip-copy-local { position: static; margin-left: auto; }