/* ============================================================
   Innovative T3K — Managed IT Services
   Modern MSP website stylesheet
   ============================================================ */

:root {
  /* Palette: matched to xnetworks.gy — deep navy + cyan/violet gradient accent */
  --navy-950: #050914;
  --navy-900: #0a1630;
  --navy-800: #0d1f45;
  --navy-700: #142a52;
  --navy-600: #1c3a68;
  --slate-500: #93a7c9;
  --slate-300: #c3d0ec;
  --slate-100: #eef4ff;
  --white: #ffffff;
  --teal-500: #22e3ff;
  --teal-400: #6eeeff;
  --teal-glow: rgba(34, 227, 255, 0.35);
  --violet-500: #8b5cf6;
  --amber-500: #ffd166;
  --accent-grad: linear-gradient(90deg, #22e3ff, #8b5cf6);

  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(10, 17, 32, 0.08);
  --shadow-md: 0 12px 32px rgba(10, 17, 32, 0.12);
  --shadow-lg: 0 24px 64px rgba(10, 17, 32, 0.18);
  --container: 1200px;
}

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

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 88px; }

body {
  font-family: var(--font-body);
  color: var(--navy-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-950);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-500);
  background: rgba(34, 227, 255, 0.1);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }

.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 16px; }
.section-head p { color: var(--slate-500); font-size: 1.08rem; }

section { padding: 96px 0; position: relative; }
.section-tight { padding: 64px 0; }
.bg-light { background: var(--slate-100); }
.bg-navy { background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); color: var(--white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }
.bg-navy .section-head p { color: var(--slate-300); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-grad);
  color: var(--navy-950);
  box-shadow: 0 8px 24px var(--teal-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--teal-glow); background: var(--teal-400); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3);
}
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-outline-navy {
  background: transparent;
  color: var(--navy-900);
  border: 1.5px solid var(--navy-700);
}
.btn-outline-navy:hover { background: var(--navy-900); color: var(--white); }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

.form-submit-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-submit-row .btn { flex: 1 1 200px; justify-content: center; }
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #063d1f; font-weight: 700;
}
.btn-whatsapp:hover { filter: brightness(1.06); }
.btn-whatsapp svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .form-submit-row { flex-direction: column; }
}
@media (max-width: 400px) {
  .btn-lg { padding: 12px 20px; font-size: 0.9rem; }
  .form-submit-row .btn { flex: 1 1 auto; min-height: 44px; }
}

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(10, 14, 35, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-display);
  color: var(--slate-300);
}
.brand-word {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-word b {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand small { display: block; font-size: 0.6rem; font-weight: 500; color: var(--slate-300); letter-spacing: 0.12em; text-transform: uppercase; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: nowrap;
}
.nav-links a {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--slate-300);
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--white); }

.nav-tools { position: relative; }
.nav-tools summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--slate-300);
  transition: color 0.2s ease;
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
}
.nav-tools summary::-webkit-details-marker { display: none; }
.nav-tools summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
}
.nav-tools[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-tools summary:hover { color: var(--white); }
.nav-tools-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 190px;
  z-index: 1001;
}
.nav-tools-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--slate-300);
  white-space: nowrap;
}
.nav-tools-menu a:hover { background: rgba(255,255,255,0.06); color: var(--white); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: flex; align-items: center; gap: 8px;
  color: var(--white); font-weight: 600; font-size: 0.92rem;
  white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; stroke: var(--teal-500); }
.header-wa {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  color: #25D366; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.35);
  transition: background 0.2s ease, transform 0.15s ease;
}
.header-wa:hover { background: rgba(37,211,102,0.22); transform: translateY(-1px); }
.header-wa svg { width: 20px; height: 20px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--white); border-radius: 2px; transition: 0.25s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  padding: 180px 0 120px;
  background: radial-gradient(circle at 15% 20%, rgba(34,227,255,0.18), transparent 45%),
              radial-gradient(circle at 85% 0%, rgba(39,67,104,0.5), transparent 50%),
              linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color: var(--white);
  overflow: hidden;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  color: var(--white);
  margin-bottom: 22px;
}
.hero h1 span {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Hidden diagnostics shortcut: looks and behaves exactly like the surrounding heading text */
.hero h1 span.hp-plain {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  cursor: inherit;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--slate-300);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 28px; }
.hero-trust-item { display: flex; align-items: center; gap: 10px; color: var(--slate-300); font-size: 0.88rem; }
.hero-trust-item svg { width: 20px; height: 20px; stroke: var(--teal-500); flex-shrink: 0; }

.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 480px;
  margin: 0 auto;
}
.hero-visual .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.15);
  animation: spin 40s linear infinite;
}
.hero-visual .ring.r2 { inset: 40px; animation-duration: 30s; animation-direction: reverse; }
.hero-visual .core {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual .core-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(10px);
  width: 78%;
  box-shadow: var(--shadow-lg);
}
.hero-visual .node {
  position: absolute;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--navy-800);
  border: 1px solid rgba(34,227,255,0.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px var(--teal-glow);
  animation: float 6s ease-in-out infinite;
}
.hero-visual .node svg { width: 24px; height: 24px; stroke: var(--teal-400); }
.hero-visual .node .node-wifi { width: 30px; height: 30px; stroke: none; }
.service-icon .svc-wifi { width: 30px; height: 30px; stroke: none; }
.hero-visual .n1 { top: 4%; left: 8%; animation-delay: 0s; }
.hero-visual .n2 { top: 10%; right: 2%; animation-delay: 1.2s; }
.hero-visual .n3 { bottom: 6%; left: 2%; animation-delay: 2.1s; }
.hero-visual .n4 { bottom: 0%; right: 12%; animation-delay: 0.6s; }
.hero-visual .core { z-index: 1; }
.hero-visual .core-card { background: rgba(9,14,28,0.72); backdrop-filter: blur(10px); }
@keyframes wifiFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) { .hero-visual .hero-wifi { animation: none; } }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Stats bar */
.stats-bar {
  background: var(--navy-900);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--teal-500); margin-bottom: 6px; }
.stat p { color: var(--slate-300); font-size: 0.88rem; }

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--white);
  border: 1px solid rgba(15, 27, 47, 0.08);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-500);
}
.service-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.service-icon svg { width: 26px; height: 26px; stroke: var(--teal-500); }
.service-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.service-card p { color: var(--slate-500); font-size: 0.95rem; margin-bottom: 16px; }
.service-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; color: var(--navy-800); }
.service-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.service-card:hover .service-link svg { transform: translateX(4px); }
.service-card.featured { background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); border-color: var(--navy-700); }
.service-card.featured h3, .service-card.featured p { color: var(--white); }
.service-card.featured p { color: var(--slate-300); }
.service-card.featured .service-icon { background: rgba(34,227,255,0.15); }
.service-card.featured .service-link { color: var(--teal-400); }

/* Why us / process */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.process-list { display: flex; flex-direction: column; gap: 28px; }
.process-item { display: flex; gap: 22px; }
.process-num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  border: 1px solid rgba(15,27,47,0.1);
}
.process-item h4 { font-size: 1.08rem; margin-bottom: 6px; }
.process-item p { color: var(--slate-500); font-size: 0.95rem; }

.why-panel {
  background: var(--navy-950);
  border-radius: var(--radius-lg);
  padding: 44px;
  color: var(--white);
}
.why-panel h3 { color: var(--white); margin-bottom: 20px; font-size: 1.3rem; }
.why-panel ul { display: flex; flex-direction: column; gap: 16px; }
.why-panel li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate-300); font-size: 0.95rem; }
.why-panel li svg { width: 20px; height: 20px; stroke: var(--teal-500); flex-shrink: 0; margin-top: 2px; }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,27,47,0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stars { display: flex; gap: 3px; }
.stars svg { width: 16px; height: 16px; fill: var(--amber-500); stroke: none; }
.testimonial-card p.quote { color: var(--navy-800); font-size: 0.97rem; flex-grow: 1; }
.testimonial-meta { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-800);
  color: var(--teal-400);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display); font-size: 0.85rem;
}
.testimonial-meta .name { font-weight: 600; font-size: 0.9rem; }
.testimonial-meta .date { color: var(--slate-500); font-size: 0.8rem; }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.about-visual {
  background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
  border-radius: var(--radius-lg);
  padding: 40px;
  color: white;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.about-visual::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  background: var(--teal-500);
  filter: blur(90px);
  opacity: 0.35;
  top: -60px; right: -60px;
  border-radius: 50%;
}
.about-visual .quote-mark { font-family: var(--font-display); font-size: 4rem; color: var(--teal-500); line-height: 1; }
.about-visual blockquote { font-size: 1.15rem; font-weight: 500; color: var(--white); position: relative; z-index: 1; }
.about-visual cite { color: var(--slate-300); font-size: 0.85rem; display: block; margin-top: 16px; font-style: normal; }

.about-copy h2 { margin-bottom: 20px; }
.about-copy p { color: var(--slate-500); margin-bottom: 18px; font-size: 1.02rem; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.about-tags span {
  background: var(--slate-100);
  color: var(--navy-800);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}

/* FAQ */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid rgba(15,27,47,0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy-900);
  cursor: pointer;
}
.faq-question svg { width: 18px; height: 18px; stroke: var(--navy-700); transition: transform 0.25s ease; flex-shrink: 0; margin-left: 16px; }
.faq-item.open .faq-question svg { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer p { padding: 0 26px 22px; color: var(--slate-500); font-size: 0.95rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--navy-950), var(--navy-700));
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--teal-500);
  filter: blur(110px);
  opacity: 0.3;
  right: -80px; top: -80px;
}
.cta-band h2 { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 520px; position: relative; z-index: 1; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item .icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-item .icon svg { width: 22px; height: 22px; stroke: var(--navy-800); }
.contact-item h4 { font-size: 1rem; margin-bottom: 4px; }
.contact-item p, .contact-item a { color: var(--slate-500); font-size: 0.95rem; }
.contact-item a:hover { color: var(--teal-500); }

.contact-form {
  background: var(--slate-100);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--navy-800); }
.field-hint { font-size: 0.8rem; color: var(--slate-500); margin-top: -2px; }
dialog.enq .form-group label { color: var(--slate-300); }
dialog.enq .field-hint { color: var(--slate-500); }
/* Option lists inherit the select's light text but render on the platform's
   own (white) popup background, making entries invisible. Every select on the
   site needs an explicit option colour pair, not just the one that showed it. */
select option,
select optgroup {
  background-color: #0b1222;
  color: #e8f1ff;
}
select option:checked,
select option:hover {
  background-color: #22e3ff;
  color: #0b1222;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  border: 1px solid rgba(15,27,47,0.15);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color 0.2s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--teal-500);
}
.form-note { font-size: 0.8rem; color: var(--slate-500); margin-top: 10px; text-align: center; }
.form-note.err { color: #f87171; }
.form-success { display: none; background: rgba(34,227,255,0.12); color: var(--navy-900); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.9rem; margin-top: 16px; font-weight: 600; }
.form-success.visible { display: block; }

/* Footer */
.site-footer { background: var(--navy-950); color: var(--slate-300); padding: 72px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .brand {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.footer-brand p { color: var(--slate-300); font-size: 0.92rem; max-width: 300px; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.footer-social a:hover { background: var(--teal-500); }
.footer-social a svg { width: 18px; height: 18px; stroke: var(--white); }
.footer-col h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.9rem; color: var(--slate-300); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--teal-500); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  padding-right: 110px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--slate-500);
}
@media (max-width: 640px) { .footer-bottom { padding-right: 0; } }
.footer-ip-tag {
  font-size: inherit;
  color: inherit;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--teal-500);
  color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 900;
  border: none;
  cursor: pointer;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top svg { width: 20px; height: 20px; }

/* Responsive */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 380px; margin-top: 40px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-visual { min-height: 320px; }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.mobile-only-cta { display: none; }

@media (max-width: 1180px) and (min-width: 861px) {
  .nav-links { gap: 18px; }
  .nav-links a, .nav-tools summary { font-size: 0.85rem; }
  .header-phone span { display: none; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .header-phone span { display: none; }
  .header-actions .btn-primary { display: none; }
  .mobile-only-cta { display: inline-flex; margin-top: 8px; align-self: flex-start; }
  .site-header.menu-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy-950);
    padding: 24px;
    gap: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .site-header.menu-open .nav-links a { font-size: 1rem; }
  .nav-tools-menu { position: static; transform: none; margin-top: 8px; box-shadow: none; }
  .nav-tools[open] summary::after { margin-top: -3px; }
  .site-header.menu-open .nav-links::after {
    content: "";
    display: block;
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .brand-word { font-size: 1rem; }
  .brand small { font-size: 0.56rem; }
  .header-inner { padding: 14px 16px; }
}

@media (max-width: 680px) {
  section { padding: 64px 0; }
  .hero { padding: 150px 0 80px; }
  .services-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 28px; flex-direction: column; text-align: center; justify-content: center; }
  .cta-band .cta-actions { justify-content: center; }
  .why-panel { padding: 30px; }
}

/* ============================================================
   Enquiry extras: speed test dialog, location/speed buttons,
   success toast + confetti (adapted from the xnetworks.gy pattern)
   ============================================================ */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.opt { color: var(--slate-500); font-weight: 400; font-size: 0.82em; }

.loc-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; text-align: center; }
.loc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  color: #0e7f99; background: rgba(34,227,255,0.12); border: 1px solid rgba(14,165,200,0.45);
  border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.loc-btn:hover { background: rgba(34,227,255,0.2); border-color: rgba(14,165,200,0.65); color: #0a6277; }
.loc-btn:disabled { opacity: 0.6; cursor: default; }
.loc-btn svg { width: 16px; height: 16px; }
.loc-note { flex-basis: 100%; text-align: center; font-size: 0.82rem; color: var(--slate-500); }
.loc-note:empty { display: none; }
.loc-note.ok { color: #4ade80; }
.loc-note.err { color: #f87171; }
.loc-note.hint { color: var(--slate-500); }

dialog.enq {
  width: min(480px, calc(100% - 24px)); max-height: calc(100% - 24px); margin: auto; padding: 28px;
  overflow-y: auto; text-align: left; color: var(--slate-300);
  background: var(--navy-900); border: 1px solid var(--navy-700); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
dialog.enq::backdrop { background: rgba(5,9,20,0.75); backdrop-filter: blur(4px); }
dialog.enq .form-row { gap: 10px; }
dialog.enq .logo-mini {
  display: block;
  margin-bottom: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
dialog.enq .logo-mini b {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
dialog.enq h2 { font-size: 1.3rem; margin-bottom: 4px; color: var(--white); font-family: var(--font-display); }
dialog.enq .lead { color: var(--slate-300); font-size: 0.92rem; margin-bottom: 16px; line-height: 1.5; }
dialog.enq .fine { margin-top: 14px; font-size: 0.78rem; line-height: 1.45; color: var(--slate-500); }
dialog.enq .fine b { color: var(--slate-300); font-weight: 600; }
dialog.enq p.agree { margin-top: 14px; font-size: 0.84rem; line-height: 1.45; color: var(--slate-500); }
dialog.enq p.agree b { color: var(--white); font-weight: 600; }
dialog.enq p.agree a { color: var(--teal-500); }
dialog.enq.ipinfo { width: min(520px, calc(100% - 24px)); }
dialog.enq.ipinfo .logo-mini { font-size: 1.3rem; margin-bottom: 18px; }
dialog.enq.support { width: min(620px, calc(100% - 24px)); }
dialog.enq.support .logo-mini { font-size: 1.3rem; margin-bottom: 18px; }
dialog.enq.support .form-group { margin-bottom: 12px; }
dialog.enq.support textarea { min-height: 120px; resize: vertical; }

/* ---- Password Gen tool ---- */
dialog.enq.pwgen { width: min(560px, calc(100% - 24px)); }
dialog.enq.pwgen .logo-mini { font-size: 1.3rem; margin-bottom: 18px; }
.pw-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.pw-tab { flex: 1; font: inherit; font-size: 0.86rem; font-weight: 600; padding: 9px 6px; cursor: pointer;
  color: var(--slate-300); background: none; border: 0; border-radius: 9px; transition: background 0.2s ease, color 0.2s ease; }
.pw-tab:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.pw-tab.active { color: var(--navy-950); background: var(--accent-grad); }
.pw-hint { margin-top: 14px; line-height: 1.5; }
.pw-len-combo { display: flex; align-items: center; gap: 12px; }
.pw-len-combo input[type="range"] { flex: 1; }
.pw-len-combo input[type="number"] {
  width: 72px; flex-shrink: 0; padding: 8px 6px; text-align: center;
  font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--white);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(34,227,255,0.35); border-radius: 10px;
}
.pw-len-combo input[type="number"]:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(34,227,255,0.2); }
dialog.enq.pwgen select { width: 100%; }
.pw-out-wrap { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pw-out {
  flex: 1; min-height: 52px; display: flex; align-items: center; padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.5px; color: var(--white); word-break: break-all; line-height: 1.35;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(34,227,255,0.35); border-radius: 12px;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.pw-out.erasing { filter: blur(6px); opacity: 0.25; }
.pw-out.stealth { color: transparent; text-shadow: 0 0 9px rgba(34,227,255,0.9); user-select: none; -webkit-user-select: none; letter-spacing: 2px; }
.pw-stealth { display: flex; align-items: center; gap: 12px; margin-top: 12px; cursor: pointer; user-select: none; }
.pw-stealth input { position: absolute; opacity: 0; width: 0; height: 0; }
.pw-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 99px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); transition: background 0.25s ease, border-color 0.25s ease; }
.pw-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--slate-300); transition: transform 0.25s ease, background 0.25s ease; }
.pw-stealth input:checked + .pw-switch { background: var(--accent-grad); border-color: transparent; }
.pw-stealth input:checked + .pw-switch::after { transform: translateX(18px); background: var(--navy-950); }
.pw-stealth input:focus-visible + .pw-switch { box-shadow: 0 0 0 3px rgba(34,227,255,0.35); }
.pw-stealth-txt { font-size: 0.88rem; color: var(--slate-300); line-height: 1.3; }
.pw-stealth-txt b { color: var(--white); }
.pw-stealth-txt small { display: block; font-size: 0.75rem; color: var(--slate-500); }
.pw-copy {
  flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  color: var(--teal-500); background: rgba(34,227,255,0.08); border: 1px solid rgba(34,227,255,0.4); border-radius: 12px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pw-copy:hover { background: rgba(34,227,255,0.18); }
.pw-copy:active { transform: scale(0.94); }
.pw-copy:disabled { opacity: 0.4; cursor: default; }
.pw-copy svg { width: 20px; height: 20px; }
.pw-meter { height: 6px; margin-top: 12px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pw-meter-bar { height: 100%; width: 0; border-radius: 99px; background: #f87171; transition: width 0.35s ease, background 0.35s ease; }
.pw-strength { margin-top: 8px; font-size: 0.82rem; color: var(--slate-500); }
.pw-strength b { color: var(--white); }
.pw-ctrl { margin-top: 18px; }
.pw-range-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--slate-300); margin-bottom: 8px; }
.pw-range-label b { color: var(--teal-500); font-weight: 700; }
#pw-len, #pp-words, #un-len { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #22e3ff var(--pw-fill, 20%), rgba(255,255,255,0.12) var(--pw-fill, 20%)); }
#pw-len::-webkit-slider-thumb, #pp-words::-webkit-slider-thumb, #un-len::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-grad); border: 2px solid var(--navy-900); box-shadow: 0 0 0 3px rgba(34,227,255,0.25); cursor: pointer; }
#pw-len::-moz-range-thumb, #pp-words::-moz-range-thumb, #un-len::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-grad); border: 2px solid var(--navy-900); box-shadow: 0 0 0 3px rgba(34,227,255,0.25); cursor: pointer; }
.pw-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 16px; }
.pw-chk { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; color: var(--slate-300); user-select: none; }
.pw-chk input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; flex-shrink: 0; cursor: pointer;
  border: 1px solid rgba(34,227,255,0.45); background: rgba(255,255,255,0.05); display: grid; place-items: center; }
.pw-chk input:checked { background: var(--accent-grad); border-color: transparent; }
.pw-chk input:checked::after { content: ""; width: 6px; height: 10px; border: solid var(--navy-950); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
dialog.enq.pwgen .form-row { margin-top: 16px; }
dialog.enq.pwgen .form-group input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* explosion overlay — fixed to the viewport so it works even when the dialog scrolls on small screens */
.pw-boom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(5,9,20,0.94); z-index: 5; padding: 24px; overflow: hidden; }
.pw-boom[hidden] { display: none; }
.pw-boom-core { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(34,227,255,0.55), rgba(139,92,246,0.45) 50%, rgba(248,113,113,0.5));
  animation: pwFlash 0.55s ease-out forwards; }
@keyframes pwFlash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}
.pw-boom-msg { position: relative; z-index: 1; animation: pwMsgIn 0.5s ease 0.45s both; }
.pw-boom-msg .logo-mini { font-size: 1.3rem; margin-bottom: 22px; }
@keyframes pwMsgIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: none; } }
.pw-boom-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--white); }
.pw-boom-sub { margin-top: 8px; font-size: 0.92rem; color: var(--slate-300); max-width: 360px; line-height: 1.5; }
.pw-boom-count { margin-top: 14px; font-size: 0.8rem; color: var(--slate-500); }
.pw-boom-msg .countdown-bar { max-width: 220px; margin: 10px auto 0; }
.pw-boom-actions { justify-content: center; margin-top: 18px; }
.pw-boom-actions .go { min-width: 180px; padding: 14px 32px; font-size: 1rem; font-weight: 700;
  background: var(--accent-grad); color: var(--navy-950); box-shadow: 0 0 0 1px rgba(34,227,255,0.35), 0 10px 30px rgba(139,92,246,0.45); }
.pw-boom-actions .go:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(34,227,255,0.6), 0 14px 36px rgba(34,227,255,0.45); }
.pw-spark { position: absolute; left: 50%; top: 50%; width: 4px; height: 22px; border-radius: 0; pointer-events: none; transform-origin: center;
  clip-path: polygon(50% 0, 100% 35%, 60% 100%, 0 70%);
  animation: pwSpark 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
@keyframes pwSpark { 0% { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.3); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot, 0deg) + 540deg)) scale(0.2); opacity: 0; } }
/* ---- Case Converter ---- */
.cc-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; margin: 14px 0 4px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.cc-styles .pw-tab { flex: none; width: 100%; font-size: 0.78rem; padding: 9px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caseconv textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; line-height: 1.5; resize: vertical; }
.caseconv #cc-out { background: #f2fbfe; border-color: rgba(34,227,255,0.45); }
.cc-out-group { margin-top: 14px; }
.cc-stats { margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.3px; color: var(--slate-500); text-align: right; }
@media (max-width: 560px) { .cc-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- WiFi QR Code ---- */
.wq-pass-row { display: flex; gap: 8px; align-items: stretch; }
.wq-pass-row input { flex: 1; min-width: 0; }
.wq-eye { flex: 0 0 auto; font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0 14px; cursor: pointer;
  color: var(--teal-400); background: rgba(34,227,255,0.08); border: 1px solid rgba(34,227,255,0.3);
  border-radius: 10px; transition: background 0.2s ease, color 0.2s ease; }
.wq-eye:hover { background: rgba(34,227,255,0.18); color: var(--white); }
.wq-stage { margin-top: 18px; display: flex; justify-content: center; }
.wq-card { display: none; flex-direction: column; align-items: center; gap: 0; padding: 12px;
  background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.28); }
.wq-card.on { display: flex; }
.wq-card canvas { display: block; width: 280px; height: auto; }
.wq-caption { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 260px; margin-top: -16px; }
.wq-cap-ssid { font-weight: 800; font-size: 1rem; color: #0b1222; word-break: break-word; text-align: center; }
.wq-cap-sub { font-size: 0.7rem; letter-spacing: 0.3px; color: #64748b; text-align: center; }
.wq-cap-credit { font-size: 0.7rem; letter-spacing: 0.3px; color: #64748b; text-align: center; text-transform: uppercase; }
.wq-empty { font-size: 0.82rem; color: var(--slate-500); text-align: center; margin: 10px 0; }
.wifiqr .pw-hint { margin-top: 14px; }

/* ---- IT Request wizard ---- */
.wiz-bar { display: flex; gap: 6px; list-style: none; margin: 18px 0 20px; padding: 0; }
.wiz-bar li { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 0.72rem;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--slate-500); }
.wiz-bar li span { width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 0.72rem; font-weight: 700;
  background: rgba(255,255,255,0.08); color: var(--slate-300); }
.wiz-bar li.on { color: var(--white); }
.wiz-bar li.on span { background: var(--accent-grad); color: var(--navy-950); }
.wiz-bar li.done span { background: #4ade80; color: #052e16; }
@media (max-width: 560px) { .wiz-bar li { font-size: 0; gap: 0; } .wiz-bar li span { font-size: 0.72rem; } }

/* the dialog borrows .spd for its width, which also carries a section
   padding meant for the speed-test layout -- neutralise it here */
.itreq .wiz-step { padding: 0; margin: 0; }
.wiz-step { display: none; }
.wiz-step.on { display: block; animation: ir-in 0.18s ease-out; }
@keyframes ir-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ir-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px; }
.ir-seg-btn { border: 0; background: transparent; color: var(--slate-300); cursor: pointer;
  padding: 8px 18px; border-radius: 7px; font-size: 0.85rem; font-weight: 600; font-family: inherit; }
.ir-seg-btn.on { background: var(--accent-grad); color: var(--navy-950); font-weight: 700; }

.ir-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ir-card { text-align: left; cursor: pointer; font-family: inherit; padding: 13px 14px;
  border-radius: 11px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); color: var(--slate-300); transition: border-color .15s, background .15s; }
.ir-card b { display: block; color: var(--white); font-size: 0.92rem; font-weight: 700; margin-bottom: 3px; }
.ir-card span { display: block; font-size: 0.74rem; line-height: 1.35; }
.ir-card:hover { border-color: rgba(34,227,255,0.45); background: rgba(34,227,255,0.06); }
.ir-card.on { border-color: #22e3ff; background: rgba(34,227,255,0.12); }
.ir-card.on b { color: #22e3ff; }

.ir-sub { display: block; margin: 16px 0 8px; font-size: 0.78rem; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--slate-300); }
.itreq .req { color: #22e3ff; }
.ir-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ir-review { display: flex; flex-direction: column; gap: 0; margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 11px; overflow: hidden; }
.ir-review .r { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 9px 13px;
  font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ir-review .r:last-child { border-bottom: 0; }
.ir-review .r span { color: var(--slate-500); }
.ir-review .r b { color: var(--white); font-weight: 600; word-break: break-word; }
.ir-review .r.head { background: rgba(34,227,255,0.08); grid-template-columns: 1fr; }
.ir-review .r.head b { color: #22e3ff; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.72rem; }

.ir-done { margin-top: 16px; padding: 16px; border-radius: 12px; text-align: center;
  background: rgba(74,222,128,0.12); border: 1px solid #4ade80; }
.ir-done b { display: block; font-size: 1.05rem; color: #bbf7d0; font-weight: 800; letter-spacing: 0.4px; }
.ir-done .ref { display: inline-block; margin: 9px 0 6px; padding: 7px 14px; border-radius: 8px;
  background: rgba(0,0,0,0.3); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem; letter-spacing: 1px; }
.ir-done span { display: block; font-size: 0.78rem; color: var(--slate-300); }
.itreq textarea { width: 100%; resize: vertical; }
.ir-sub em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--slate-500); }
/* The form inputs are LIGHT (white background, dark text). Setting
   color-scheme:dark here made the browser paint the date text white on that
   white background -- the date was being entered, just invisible. Match the
   other inputs instead and leave the picker icon in its native dark form. */
.itreq input[type="date"] { color-scheme: light; color: #0b1222; background: #fff; }
.itreq input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.65; cursor: pointer; }
.itreq input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---- Ping Test ---- */
.pg-results { margin-top: 18px; padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pg-target { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem; font-weight: 600; color: var(--white); word-break: break-all; }
.pg-verdict { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pg-verdict.up   { color: #052e16; background: #4ade80; }
.pg-verdict.down { color: #fff;    background: #ef4444; }
.pg-verdict.wait { color: var(--navy-950); background: var(--teal-500); }
.pg-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px;
  font-size: 0.8rem; color: var(--slate-300); }
.pg-summary b { color: var(--white); font-weight: 700; }
.pg-dns { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--slate-500); }
.pg-dns i { font-style: normal; color: var(--slate-300); }
.pg-dns .r-used i { color: #4ade80; font-weight: 700; }
.pg-dns .r-stale i { color: #fbbf24; }
.pg-dns .r-none i { color: var(--slate-500); }

.pg-replies { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.pg-reply { display: grid; grid-template-columns: 54px 1fr 70px; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; color: var(--slate-300); }
.pg-reply .pg-seq { color: var(--slate-500); }
.pg-reply .pg-ms  { text-align: right; color: var(--white); font-weight: 600; }
.pg-reply > span:nth-child(2) { display: block; width: 100%; }
.pg-bar { display: block; height: 8px; border-radius: 999px; background: var(--accent-grad); min-width: 3px; }
.pg-reply.lost .pg-bar { background: #ef4444; }
.pg-reply.lost .pg-ms  { color: #fca5a5; }
.pingtool .pw-hint { margin-top: 14px; }

/* ---- Ping Test: multi-host mode ---- */
.pg-multi-check-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: -4px; margin-bottom: 14px; }
.pg-multi-check { margin: 0; }
.pg-stepper { display: flex; align-items: center; gap: 6px; }
.pg-step-btn {
  width: 28px; height: 28px; border-radius: 7px; line-height: 1; font-size: 1rem; font-weight: 700;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--white); cursor: pointer;
}
.pg-step-btn:hover:not(:disabled) { border-color: var(--teal-500); }
.pg-step-btn:disabled { opacity: 0.4; cursor: default; }
#pg-multi-count {
  width: 42px; text-align: center; padding: 5px 2px; border-radius: 7px;
  background: rgba(255,255,255,0.05); color: var(--white); border: 1px solid rgba(255,255,255,0.18); font-size: 0.86rem;
}
.pg-stepper-cap { color: var(--slate-500); font-size: 0.74rem; white-space: nowrap; }
.pg-lock-btn {
  width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 1px solid transparent;
  font-size: 0.95rem; cursor: pointer; opacity: 0.55;
}
.pg-lock-btn:hover { opacity: 1; border-color: rgba(255,255,255,0.18); }
.pg-lock-box { margin: -6px 0 14px; display: flex; justify-content: flex-end; }
#pg-lock-code {
  width: 120px; padding: 6px 10px; border-radius: 7px; font-size: 0.8rem; text-align: center;
  background: rgba(255,255,255,0.05); color: var(--white); border: 1px solid rgba(255,255,255,0.18);
  letter-spacing: 1px;
}
.pg-multi-base-group { margin-bottom: 14px; }
.pg-multi-base-group .mini-hint { color: var(--slate-500); font-weight: 400; font-size: 0.78rem; }
.pg-multi-base-hint code {
  background: rgba(255,255,255,0.08); color: var(--white); border-radius: 4px;
  padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem;
}
.pg-multi { margin-bottom: 16px; }
.pg-multi-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pg-multi-row { display: flex; gap: 8px; align-items: center; }
.pg-multi-row .pg-multi-input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05); color: var(--white);
  border: 1px solid rgba(255,255,255,0.15); font-size: 0.86rem;
  transition: border-color 0.2s ease;
}
.pg-multi-row .pg-multi-input::placeholder { color: rgba(255,255,255,0.55); }
.pg-multi-row .pg-multi-input:focus { outline: none; border-color: var(--teal-500); }
/* brief glow + scale when a subdomain box is auto-expanded with the base
   domain on tab-out, so the fill-in is noticeable, not silent */
@keyframes pg-autofill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,0.55); border-color: var(--teal-500); background: rgba(34,211,238,0.12); }
  60%  { box-shadow: 0 0 0 7px rgba(34,211,238,0); border-color: var(--teal-500); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); background: rgba(255,255,255,0.05); }
}
.pg-multi-row .pg-multi-input.pg-auto-filled { animation: pg-autofill-pulse 0.7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .pg-multi-row .pg-multi-input.pg-auto-filled { animation: none; border-color: var(--teal-500); }
}
.pg-multi-remove {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; line-height: 1;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  color: var(--slate-300); font-size: 1.1rem; cursor: pointer;
}
.pg-multi-remove:hover:not(:disabled) { border-color: #ef4444; color: #fca5a5; }
.pg-multi-remove:disabled { opacity: 0.35; cursor: default; }
.pg-multi-results { display: flex; flex-direction: column; gap: 12px; }
.pg-multi-card {
  padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
}
.pg-multi-note { margin-top: 8px; color: #fca5a5; min-height: 1em; }

/* ---- Ping Test: multi-host GRID (desktop only, >2 hosts) ----
   Below this breakpoint the extra classes JS adds (.pg-grid-mode, .pg-wide)
   are inert and every card keeps stacking and scrolling exactly as before
   -- this block is additive, not a fork. All hosts' full results stay
   visible at once; nothing is hidden behind a tab to click through. */
@media (min-width: 820px) {
  dialog.enq.pingtool.pg-wide { width: min(980px, calc(100% - 24px)); }
  .pg-multi-results.pg-grid-mode {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px; align-items: start;
  }
  .pg-multi-results.pg-grid-mode .pg-multi-card { margin: 0; }
}

/* Confetti canvas is appended INSIDE the dialog: a modal lives in the
   browser's top layer, so a sibling elsewhere in the DOM would render
   underneath it no matter how high its z-index. */
.pg-confetti {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50; border-radius: inherit;
}
dialog.pingtool { position: fixed; }

/* Same-IP celebration popup: full-viewport overlay (position: fixed, not
   absolute -- see the long comment on pgSameIpPopup in script.js for why
   fixed is required: the dialog itself scrolls, and an absolutely
   positioned child would be laid out relative to that scrolled content
   instead of what's actually on screen). z-index 60 keeps it above the
   confetti's 50 so the burst visibly plays behind the card. Lives inside
   the dialog for the same top-layer reason as .pg-confetti. */
.pg-sameip {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(7, 12, 24, 0.62); backdrop-filter: blur(3px);
  animation: pgSameipFadeIn 0.22s ease-out;
}
.pg-sameip.pg-sameip-out { animation: pgSameipFadeOut 0.22s ease-in forwards; }
@keyframes pgSameipFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pgSameipFadeOut { from { opacity: 1; } to { opacity: 0; } }
.pg-sameip-card {
  position: relative; max-width: 400px; width: 100%; text-align: center;
  padding: 30px 24px 22px; border-radius: 18px;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1.5px rgba(34,227,255,0.55), 0 0 0 3px rgba(139,92,246,0.22),
              0 0 60px rgba(34,227,255,0.15), 0 18px 50px rgba(0,0,0,0.55);
  animation: pgSameipPop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: hidden;
}
/* faint scanning sweep across the card -- a small, cheap touch that reads
   as "live diagnostic instrument" rather than a static graphic */
.pg-sameip-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(34,227,255,0.09) 50%, transparent 60%);
  background-size: 220% 220%; animation: pgSameipSweep 3.6s linear infinite;
}
@keyframes pgSameipSweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes pgSameipPop { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pg-sameip-close {
  position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; z-index: 2;
  border-radius: 50%; border: 0; background: rgba(255,255,255,0.08);
  color: var(--slate-300); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.pg-sameip-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.pg-sameip-badge {
  position: relative; z-index: 1; display: inline-block; margin-bottom: 12px;
  padding: 3px 11px; border-radius: 999px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 1.6px; color: var(--navy-950); background: var(--accent-grad);
  box-shadow: 0 0 16px rgba(34,227,255,0.5);
}
.pg-sameip-msg {
  position: relative; z-index: 1; font-size: 0.92rem; font-weight: 600; color: var(--slate-100);
  line-height: 1.35; margin: 2px 6px 14px;
}
.pg-sameip-addr {
  position: relative; z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.5px;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  word-break: break-all; margin-bottom: 8px;
}
.pg-sameip-sub { position: relative; z-index: 1; font-size: 0.76rem; color: var(--slate-500); line-height: 1.3; margin-bottom: 16px; }
/* technical readout -- aggregated sent/received/loss/min/max/jitter across
   every host in the run, styled like a diagnostic instrument panel:
   monospace values, hairline grid, a colour-coded loss figure. */
.pg-sameip-stats {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.08);   /* shows through the gaps as hairlines */
  border: 1px solid rgba(255,255,255,0.1);
}
.pg-sameip-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 11px; background: rgba(255,255,255,0.03);
}
.pg-sameip-stat-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--slate-500);
}
.pg-sameip-stat-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem; font-weight: 700; color: var(--slate-100);
}
.pg-sameip-stat-val.good { color: #4ade80; }
.pg-sameip-stat-val.bad { color: #f87171; }
.pg-sameip-card .countdown-bar { margin-top: 18px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .pg-sameip, .pg-sameip-card, .pg-sameip-card::before { animation: none; }
}

/* ---- Standard countdown bar for any popup/toast that auto-dismisses on a
   timer. Set the element's own duration with an inline
   `style="--countdown-ms: <ms>ms"` so the bar always matches the real
   setTimeout it rides next to -- never hardcode a duration only in CSS,
   or the two will drift the next time someone tunes the timeout. Reuse
   this one class rather than a bespoke bar per popup. */
.countdown-bar {
  height: 3px; border-radius: 999px; background: var(--accent-grad);
  width: 100%; transform-origin: left; opacity: 0.85;
  animation: countdownShrink var(--countdown-ms, 10000ms) linear forwards;
}
@keyframes countdownShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .countdown-bar { animation: none; opacity: 0.35; }
}

.pg-found {
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: rgba(74, 222, 128, 0.12); border: 1px solid #4ade80;
  border-left: 4px solid #4ade80;
}
.pg-found b {
  display: block; color: #bbf7d0; font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.2px; font-variant-numeric: tabular-nums;
}
.pg-found span {
  display: block; margin-top: 4px; font-size: 0.74rem; color: var(--slate-300);
  font-variant-numeric: tabular-nums;
}

.pg-retry {
  display: block; margin-top: 12px; padding: 12px;
  border: 1px solid rgba(34, 227, 255, 0.35); border-radius: 10px;
  background: rgba(34, 227, 255, 0.07);
}
.pg-retry-lead { display: block; font-size: 0.78rem; color: var(--slate-300); margin-bottom: 9px; }
.pg-retry-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pg-retry-row select {
  flex: 1 1 170px; min-width: 150px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.06); color: var(--white);
  border: 1px solid rgba(255,255,255,0.18); font-size: 0.82rem;
}
.pg-retry-btn { padding: 8px 20px !important; font-size: 0.82rem !important; }
.pg-retry-btn.stop { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
.pg-retry-status {
  display: block; margin-top: 9px; font-size: 0.76rem; color: var(--teal-500);
  font-variant-numeric: tabular-nums; min-height: 1em;
}
@media (max-width: 520px) { .pg-retry-row select, .pg-retry-btn { flex: 1 1 100%; } }

/* amber = the name resolves now, but to an address we cannot ping.
   Distinct from red (nothing resolving) so a state change is visible
   without reading the text. */
#pg-note.pg-warn {
  display: block; margin: 12px 0 0; padding: 10px 12px;
  color: #fde68a; background: rgba(251, 191, 36, 0.14);
  border: 1px solid #fbbf24; border-left: 4px solid #fbbf24; border-radius: 8px;
  font-weight: 700; font-size: 0.82rem; line-height: 1.4; letter-spacing: 0.2px;
  animation: pg-shake 0.3s ease-out;
}
.pg-retry.pg-retry-warn {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.07);
}
/* the countdown stays green throughout -- it reports the watch is alive and
   ticking, which is unchanged regardless of what DNS is currently returning.
   Colour-coding it too made the timer look like part of the problem. */

#pg-note.pg-err {
  display: block; margin: 12px 0 0; padding: 10px 12px;
  color: #fecaca; background: rgba(239, 68, 68, 0.16);
  border: 1px solid #ef4444; border-left: 4px solid #ef4444; border-radius: 8px;
  font-weight: 700; font-size: 0.82rem; line-height: 1.4; letter-spacing: 0.2px;
  animation: pg-shake 0.3s ease-out;
}
@keyframes pg-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.pingtool .go.stop { background: #ef4444; border-color: #ef4444; color: #fff; }
.pingtool .go.stop:hover { background: #dc2626; border-color: #dc2626; }
@keyframes pg-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.pg-verdict.wait { animation: pg-pulse 1.1s ease-in-out infinite; }
.pg-reply { animation: pg-in 0.18s ease-out; }
@keyframes pg-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.pw-credit { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-size: 0.72rem; letter-spacing: 0.4px; color: var(--slate-500); }
.ver-link { font: inherit; color: var(--teal-400); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; transition: color 0.2s ease; }
.ver-link:hover { color: var(--teal-500); text-decoration-style: solid; }
dialog.enq.changelog { width: min(540px, calc(100% - 24px)); }
.chg-list { margin-top: 6px; max-height: 50vh; overflow-y: auto; }

/* ---- hide scrollbars in dialogs; scrolling still works by wheel,
       trackpad, touch-drag, keyboard and scroll-anchoring ---- */
.chg-list,
dialog.enq,
dialog.enq .cc-out,
#cc-out,
.pg-replies {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
}
.chg-list::-webkit-scrollbar,
dialog.enq::-webkit-scrollbar,
dialog.enq .cc-out::-webkit-scrollbar,
#cc-out::-webkit-scrollbar,
.pg-replies::-webkit-scrollbar {
  width: 0; height: 0;          /* Chrome, Safari, Edge */
}
/* keep momentum scrolling smooth on iOS */
.chg-list, dialog.enq { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.chg-rel { padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.chg-rel:first-child { border-top: 0; }
.chg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.chg-ver { font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.chg-current { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--navy-950); background: var(--accent-grad); padding: 3px 8px; border-radius: 999px; }
.chg-date { margin-left: auto; font-size: 0.72rem; color: var(--slate-500); }
.chg-rel ul { margin: 0; padding-left: 18px; }
.chg-rel li { font-size: 0.86rem; color: var(--slate-300); line-height: 1.55; margin-bottom: 5px; }
.chg-rel li::marker { color: var(--teal-500); }
@media (max-width: 420px) {
  .pw-toggles { grid-template-columns: 1fr; }
  .pw-out { font-size: 0.92rem; }
  dialog.enq.pwgen .form-row { flex-direction: column; }
}
dialog.enq .ipinfo-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
dialog.enq .ipinfo-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--navy-700);
}
dialog.enq .ipinfo-row:last-child { border-bottom: none; }
dialog.enq .ipinfo-label { font-size: 0.85rem; color: var(--slate-500); flex-shrink: 0; }
dialog.enq .ipinfo-value { font-size: 0.92rem; color: var(--white); font-weight: 600; text-align: right; word-break: break-word; }
dialog.enq .fine code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
dialog.enq .actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
dialog.enq .go { padding: 12px 24px; font: inherit; font-weight: 700; cursor: pointer; color: var(--navy-950); border: 0; border-radius: 999px; background: var(--accent-grad); }
dialog.enq .go:disabled { opacity: 0.45; cursor: default; }
dialog.enq .cancel { padding: 12px 16px; font: inherit; cursor: pointer; color: var(--slate-500); background: none; border: 0; }

.spd-big { margin: 14px 0 12px; min-height: 3.4rem; font-size: 3rem; font-weight: 800; line-height: 1.1; text-align: center;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spd-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.spd-bar { height: 100%; width: 0; border-radius: 99px; background: var(--accent-grad); transition: width 0.25s linear; }
.spd-stats { display: flex; gap: 10px; margin: 16px 0 4px; }
.spd-stats-4 { flex-wrap: wrap; }
.spd-stats-4 > div { flex: 1 1 calc(50% - 5px); }
.cspd-done-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); margin-bottom: 2px; }
.mode-pick { border: 0; padding: 0; margin: 0 0 16px; }
.form-row[hidden], [hidden] { display: none !important; }
.mode-pick legend { padding: 0; margin-bottom: 10px; font-size: 0.82rem; font-weight: 600; color: var(--slate-300); }
.mode-opt { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease; }
.mode-opt:hover { background: rgba(255,255,255,0.07); }
.mode-opt input { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer;
  border: 1px solid rgba(34,227,255,0.5); border-radius: 50%; display: grid; place-items: center; }
.mode-opt input:checked { border-color: var(--teal-500); }
.mode-opt input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-grad); }
.mode-opt:has(input:checked) { border-color: rgba(34,227,255,0.5); background: rgba(34,227,255,0.07); }
.mode-opt b { display: block; font-size: 0.9rem; color: var(--white); font-weight: 600; }
.mode-opt small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--slate-500); line-height: 1.4; }
.spd-stats div { flex: 1; padding: 14px 6px; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(34,227,255,0.25); border-radius: 12px; }
.spd-stats span { display: block; font-size: 1.7rem; font-weight: 800; color: var(--white); }
.spd-stats small { color: var(--slate-500); font-size: 0.75rem; }

.toast {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,9,20,0.55); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.toast.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.6s ease; }
.toast .card {
  width: min(420px, 100%); padding: 28px 34px 32px; text-align: center; border-radius: 20px;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); border: 1px solid var(--navy-700);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px var(--teal-glow);
  position: relative;
  transform: translateY(10px) scale(0.98); transition: transform 0.6s ease;
}
.toast-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--slate-300); font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.toast-close:hover { background: rgba(255,255,255,0.14); color: var(--white); }
.toast.show .card { transform: none; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2100; pointer-events: none; }
.toast .logo-mini {
  margin: 0 auto 20px;
  padding-bottom: 18px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.toast .logo-mini b {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.toast .check {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.4rem; color: var(--navy-950); background: var(--accent-grad);
  animation: pop 0.7s cubic-bezier(.2,1.4,.4,1) both 0.15s;
}
@keyframes pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.toast h3 { font-size: 1.25rem; margin-bottom: 6px; color: var(--white); font-family: var(--font-display); }
.toast p { color: var(--slate-300); line-height: 1.5; font-size: 0.95rem; }
.toast p + p { margin-top: 10px; }
#toast-text strong { display: block; color: var(--white); font-size: 1rem; margin-bottom: 8px; }
.toast .card .countdown-bar { margin-top: 18px; }

@media (max-width: 480px) {
  .loc-note.hint { display: none; }
}

/* ============================================================
   X Networks Dashboard — app shell (sections, cards, header)
   Framework (root vars, dialog.enq, forms, buttons, pw-chk,
   hidden-attr fix) is appended from the shared base below this.
   ============================================================ */

body { background: var(--navy-950); color: var(--slate-300); }

.xd-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 36px;
  background: rgba(5,9,20,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(34,227,255,0.08);
}
.xd-logo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 800; letter-spacing: 0.3px; font-size: 1.55rem;
  text-transform: uppercase;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: flex; align-items: baseline; gap: 10px;
}
.xd-logo span {
  font-weight: 600; letter-spacing: 4px; text-transform: uppercase; font-size: 0.72rem;
  color: var(--slate-500); background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
.xd-user { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; }
.xd-manage-link {
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--slate-500); background: none; border: 0;
  cursor: pointer; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.18);
}
.xd-manage-link:hover { color: var(--teal-500); border-color: var(--teal-500); }
.xd-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(34,227,255,0.35); }
.xd-user-name { color: var(--slate-300); font-weight: 600; }
.xd-logout { color: var(--slate-500); border-bottom: 1px solid rgba(255,255,255,0.2); text-decoration: none; font-size: 0.82rem; }
.xd-logout:hover { color: var(--teal-500); border-color: var(--teal-500); }

.xd-toolbar {
  max-width: 1200px; margin: 0 auto; padding: 24px 28px 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.xd-toolbar-btn {
  font-size: 0.84rem; font-weight: 700; color: var(--navy-950); background: var(--accent-grad);
  border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease;
}
.xd-toolbar-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.xd-toolbar-btn-ghost {
  color: var(--slate-300); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
}
.xd-toolbar-btn-ghost:hover { color: var(--white); border-color: rgba(34,227,255,0.4); background: rgba(255,255,255,0.08); }

.xd-main { max-width: 1200px; margin: 0 auto; padding: 32px 28px 90px; }

.xd-section { margin-bottom: 48px; }
.xd-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.xd-section-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.3px;
  text-transform: uppercase; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xd-section-add {
  font-size: 0.82rem; font-weight: 700; color: var(--navy-950); background: var(--accent-grad);
  border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer;
}
.xd-section-add:hover { filter: brightness(1.08); }

.xd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; min-height: 44px;
}
.xd-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px 10px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none; color: var(--slate-300);
  cursor: grab;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.xd-card:active { cursor: grabbing; }
.xd-card:hover {
  border-color: rgba(34,227,255,0.5); background: rgba(255,255,255,0.07); transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(5,9,20,0.5), 0 0 0 1px rgba(34,227,255,0.2);
}
.xd-card.xd-dragging { opacity: 0.35; }
.xd-card-icon {
  width: 36px; height: 36px; border-radius: 10px; object-fit: contain;
  background: rgba(255,255,255,0.08); padding: 6px;
}
.xd-card-label {
  font-size: 0.78rem; font-weight: 600; color: var(--white); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xd-card-remove {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,9,20,0.7); border: 1px solid rgba(255,255,255,0.15);
  color: var(--slate-300); font-size: 0.95rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.xd-card:hover .xd-card-remove { opacity: 1; }
.xd-card-remove:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.xd-empty { font-size: 0.88rem; color: var(--slate-500); padding: 10px 2px; grid-column: 1 / -1; }

.xd-footer {
  max-width: 1200px; margin: 0 auto; padding: 0 28px 40px; text-align: center;
  font-size: 0.78rem; color: var(--slate-500);
}
.xd-footer .ver-link { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.xd-footer .ver-link:hover { color: var(--teal-500); }

dialog.enq.xd-add { width: min(440px, calc(100% - 24px)); }

.xd-user-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.xd-user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.86rem; color: var(--slate-300);
}
.xd-user-remove {
  font-size: 0.76rem; font-weight: 700; color: #fca5a5; background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.35); border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.xd-user-remove:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.xd-cat-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.xd-cat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.xd-cat-row input {
  flex: 1; background: var(--white); color: #0b1222; color-scheme: light; border: 1px solid rgba(15,27,47,0.15);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 0.86rem; min-width: 0;
}
.xd-cat-row button {
  flex-shrink: 0; font-size: 0.76rem; font-weight: 700; color: var(--navy-950); background: var(--accent-grad);
  border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.xd-cat-row button:disabled { opacity: 0.5; cursor: default; }

/* same text-color fix as the /db ping tool page -- see that file's comment */
.form-group input, .form-group textarea, .form-group select { color: #0b1222; color-scheme: light; }

/* ---- shimmer-sweep wordmark + footer credit (design DNA, Oct 2026) ---- */
/* ---- shimmer-sweep wordmark + footer credit (design DNA, Oct 2026; seam-free two-layer) ---- */
@keyframes shimmerSweep { 0%{background-position:120% 0, 0 0} 55%{background-position:-20% 0, 0 0} 100%{background-position:-20% 0, 0 0} }
@media (prefers-reduced-motion: reduce) { .xd-logo, .credit { animation:none; } }
.xd-logo {
  background:
    linear-gradient(110deg, rgba(234,252,255,0) 40%, rgba(234,252,255,.92) 50%, rgba(234,252,255,0) 60%),
    linear-gradient(135deg, #22e3ff, #8b5cf6);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerSweep 6s ease-in-out infinite;
}
.credit {
  display:inline-block; font-weight:800; letter-spacing:1px;
  background:
    linear-gradient(110deg, rgba(100,116,139,0) 38%, #22e3ff 48%, #8b5cf6 55%, rgba(100,116,139,0) 65%),
    linear-gradient(#64748b, #64748b);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerSweep 6s ease-in-out infinite;
}

/* ---- Day/night toggle (standard across all X Networks / T3K apps) ---- */
.theme-toggle {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--white);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.xd-footer .theme-toggle { margin: 10px auto 0; }

/* ---- Light mode: flips the always-dark dashboard shell to a bright
   equivalent. Brand gradient (logo, credit, accent buttons) is untouched. ---- */
body.light { background: var(--slate-100); color: #44536e; }
body.light .xd-header {
  background: rgba(255,255,255,0.86); backdrop-filter: blur(10px);
  border-bottom-color: rgba(10,22,48,0.1);
  box-shadow: 0 1px 0 rgba(34,227,255,0.15);
}
body.light .xd-logo span { color: #44536e; }
body.light .xd-manage-link { color: #44536e; border-bottom-color: rgba(10,22,48,0.18); }
body.light .xd-manage-link:hover { color: #0e7f99; border-color: #0e7f99; }
body.light .xd-user-name { color: #0a1630; }
body.light .xd-logout { color: #44536e; border-bottom-color: rgba(10,22,48,0.2); }
body.light .xd-logout:hover { color: #0e7f99; border-color: #0e7f99; }
body.light .theme-toggle { background: rgba(10,22,48,0.06); border-color: rgba(10,22,48,0.16); color: #0a1630; }
body.light .theme-toggle:hover { background: rgba(10,22,48,0.1); }
body.light .xd-toolbar-btn-ghost { color: #0a1630; background: rgba(10,22,48,0.05); border-color: rgba(10,22,48,0.14); }
body.light .xd-toolbar-btn-ghost:hover { color: #0a1630; border-color: rgba(34,227,255,0.5); background: rgba(34,227,255,0.12); }
body.light .xd-section-head { color: #0a1630; }
body.light .xd-card { background: #ffffff; border-color: rgba(10,22,48,0.12); color: #44536e; box-shadow: 0 2px 8px rgba(10,22,48,0.06); }
body.light .xd-card:hover { border-color: rgba(34,227,255,0.6); background: #f3f9ff; box-shadow: 0 12px 28px rgba(10,22,48,0.12), 0 0 0 1px rgba(34,227,255,0.25); }
body.light .xd-card-icon { background: rgba(10,22,48,0.06); }
body.light .xd-card-label { color: #0a1630; }
body.light .xd-card-remove { background: rgba(255,255,255,0.92); border-color: rgba(10,22,48,0.15); color: #44536e; }
body.light .xd-card-remove:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
body.light .xd-empty { color: #5b6c89; }
body.light .xd-footer { color: #5b6c89; }
body.light .xd-user-row, body.light .xd-cat-row { background: #ffffff; border-color: rgba(10,22,48,0.12); color: #44536e; }
body.light .xd-user-remove { color: #b91c1c; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); }
body.light dialog.enq { background: #ffffff; color: #44536e; border-color: rgba(34,227,255,0.3); }
body.light dialog.enq::backdrop { background: rgba(10,22,48,0.35); }
body.light dialog.enq h2 { color: #0a1630; }
body.light dialog.enq .lead { color: #44536e; }
body.light dialog.enq .fine { color: #5b6c89; }
body.light dialog.enq .fine b { color: #44536e; }
body.light dialog.enq p.agree { color: #5b6c89; }
body.light dialog.enq p.agree b { color: #0a1630; }
body.light dialog.enq .form-group label { color: #44536e; }
body.light dialog.enq .field-hint { color: #5b6c89; }