/*
 * Fast IP Checking — Network Tools: directory-only visual layer
 * Keep header, global navigation, theme toggler, footer, card routes,
 * category definitions, search/filter JavaScript entirely unchanged.
 * Scoped to <main> and its existing .hero / .tools directory markup.
 */

/* The heading section follows the existing global theme but has a consistent navy hero. */
main > .hero {
  position:relative;
  overflow:hidden;
  padding:37px 0 25px;
  text-align:left;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(52,139,255,.18), transparent 49%),
    radial-gradient(ellipse at 96% 22%, rgba(34,211,238,.13), transparent 43%),
    linear-gradient(115deg,#0a1c36 0%,#103562 58%,#071e3c 100%);
  color:#f7fbff;
}
main > .hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background-image:radial-gradient(rgba(108,191,255,.6) .75px,transparent 1px);
  background-size:11px 11px;
  mask-image:linear-gradient(to right,transparent 53%,#000 100%);
}
main > .hero .wrap {
  position:relative;
  z-index:1;
  min-height:92px;
  padding-left:98px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
main > .hero .wrap::before {
  content:"\f7d9";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  display:grid;
  place-items:center;
  width:73px;
  height:73px;
  border-radius:19px;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  background:linear-gradient(145deg,#549bff,#1165e2);
  box-shadow:0 13px 32px rgba(0,35,93,.38),inset 0 1px 0 rgba(255,255,255,.3);
  color:white;
  font-size:30px;
}
main > .hero .eyebrow {
  margin:0 0 7px;
  padding:5px 10px;
  background:rgba(125,188,255,.12);
  border-color:rgba(163,204,255,.2);
  color:#d5e9ff;
  font-size:11px;
  letter-spacing:.045em;
}
main > .hero h1 {
  max-width:none;
  margin:0 0 5px;
  line-height:1.12;
  letter-spacing:-.8px;
  font-size:clamp(29px,3.3vw,40px);
  font-weight:800;
  color:#fff;
}
main > .hero p {
  max-width:850px;
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#d3e4f8;
}

/* The existing search toolbar & category filter row form the lower navy band.
   No buttons are added or removed. */
main > .tools {
  --nt-card:#ffffff;
  --nt-card-text:#13233d;
  --nt-card-muted:#526783;
  --nt-border:#dfe9f4;
  --nt-surface:#f4f8fd;
  position:relative;
  isolation:isolate;
  margin:0;
  padding:9px 0 80px;
  background:var(--nt-surface);
}
main > .tools::before {
  content:"";
  pointer-events:none;
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:177px;
  background:linear-gradient(115deg,#0b2341,#103965 63%,#0a294f);
}
main > .tools > .wrap { position:relative; }
main > .tools .tools-toolbar {
  display:block;
  margin:0 0 8px;
  padding:6px;
  border:1px solid rgba(207,226,250,.85);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(4,21,48,.20);
}
/* Retain the existing h2 for assistive tech without duplicating its visible heading. */
main > .tools .tools-toolbar-copy {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
main > .tools .tool-search-wrap > i {color:#425d7d;font-size:17px;left:19px;}
main > .tools #toolSearch {
  width:100%;
  height:51px;
  background:#fff;
  border:0;
  border-radius:10px;
  color:#142944;
  padding:0 47px 0 50px;
  box-shadow:none;
  font-size:15px;
}
main > .tools #toolSearch::placeholder {color:#70829d;opacity:1;}
main > .tools #toolSearch:focus {outline:2px solid #278cff;outline-offset:-2px;}
main > .tools .clear-tool-search {color:#526783;}
main > .tools .clear-tool-search:hover {background:#eef5ff;color:#124a8a;}
main > .tools .tool-filters {
  gap:9px;
  padding:5px 1px 18px;
  margin:0 0 11px;
  flex-wrap:nowrap;
  overscroll-behavior-x:contain;
}
main > .tools .tool-filter {
  border-color:rgba(224,236,249,.92);
  border-radius:10px;
  background:#fff;
  color:#1a3252;
  min-height:39px;
  padding:7px 12px;
  white-space:nowrap;
  box-shadow:0 2px 5px rgba(5,25,52,.06);
  font-size:12px;
  font-weight:750;
}
main > .tools .tool-filter strong {
  min-width:22px;
  height:21px;
  background:#edf3fa;
  color:#335272;
  font-size:11px;
}
main > .tools .tool-filter.active {
  background:linear-gradient(110deg,#147cff,#0862df);
  border-color:#4c9dff;
  color:#fff;
  box-shadow:0 5px 14px rgba(4,79,189,.2);
}
main > .tools .tool-filter.active strong {background:#fff;color:#1267d6;}
main > .tools .tool-filter:hover {transform:none;border-color:#60a7ff;color:#1267d6;}
main > .tools .tool-filter.active:hover {color:#fff;}
main > .tools .tool-results-bar {
  color:var(--nt-card-muted);
  margin:0 1px 16px;
  min-height:21px;
  font-size:12px;
}
main > .tools .tool-results-bar strong {color:var(--nt-card-text);}
main > .tools .reset-tools{color:#1674df;}

/* Popular Network Tools: six existing links, original hrefs unchanged. */
main > .tools .quick-access {margin:16px 0 27px;}
main > .tools .quick-access-head {margin-bottom:13px;}
main > .tools .quick-access-head h2 {
  font-size:20px;
  font-weight:800;
  letter-spacing:-.4px;
  color:var(--nt-card-text);
}
main > .tools .quick-access-head p {color:var(--nt-card-muted);}
main > .tools .quick-access-label {color:#1684ef;font-size:10px;margin-bottom:5px;}
main > .tools .quick-access-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
main > .tools .quick-link {
  min-height:95px;
  align-items:flex-start;
  gap:9px;
  padding:12px 9px;
  background:var(--nt-card);
  color:var(--nt-card-text);
  border:1px solid var(--nt-border);
  border-radius:13px;
  box-shadow:0 7px 22px rgba(16,54,96,.05);
}
main > .tools .quick-link-icon {
  flex:0 0 37px;
  width:37px;
  height:37px;
  color:#fff;
  border:0;
  border-radius:10px;
  background:linear-gradient(145deg,#3b97ff,#1478ed);
}
main > .tools .quick-link:nth-child(2) .quick-link-icon{background:linear-gradient(145deg,#a679fc,#713aea)}
main > .tools .quick-link:nth-child(3) .quick-link-icon{background:linear-gradient(145deg,#44d5a1,#0f9b70)}
main > .tools .quick-link:nth-child(4) .quick-link-icon{background:linear-gradient(145deg,#ffad50,#ee7917)}
main > .tools .quick-link:nth-child(5) .quick-link-icon{background:linear-gradient(145deg,#fe718c,#e83357)}
main > .tools .quick-link:nth-child(6) .quick-link-icon{background:linear-gradient(145deg,#5a97ff,#1d5ee9)}
main > .tools .quick-link-copy strong {color:var(--nt-card-text);font-size:12px;white-space:normal;overflow:visible;}
main > .tools .quick-link-copy span {color:var(--nt-card-muted);font-size:11px;white-space:normal;overflow:visible;line-height:1.35;}
main > .tools .quick-link:hover {transform:translateY(-2px);border-color:#72b4ff;box-shadow:0 12px 25px rgba(16,54,96,.12);}

/* Category boxes: preserve all six real categories & all 57 original cards. */
main > .tools .tool-category-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:12px;
  padding-top:30px;
  border-top:1px solid var(--nt-border);
}
main > .tools .tool-category-list::before {
  content:"All Network Tools";
  display:block;
  grid-column:1/-1;
  margin:-11px 0 0;
  border-left:4px solid #1685ff;
  padding:4px 0 4px 13px;
  color:var(--nt-card-text);
  font-size:21px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.3px;
}
main > .tools .tool-category-section {
  min-width:0;
  padding:14px 12px 12px;
  border:1px solid var(--nt-border);
  border-radius:15px;
  background:var(--nt-card);
  color:var(--nt-card-text);
  box-shadow:0 7px 23px rgba(18,60,105,.04);
}
main > .tools .category-heading {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:start;
  gap:9px;
  margin:0 0 12px;
  padding:0;
}
main > .tools .category-heading-icon {
  width:32px;
  height:32px;
  border-radius:8px;
  font-size:15px;
  border:0;
  background:#eef5ff;
  color:#1575e5;
}
main > .tools .category-heading h2 {
  margin:0 0 4px;
  font-size:15px;
  line-height:1.25;
  letter-spacing:-.2px;
  font-weight:800;
  color:var(--nt-card-text);
}
main > .tools .category-heading p {color:var(--nt-card-muted);font-size:11px;line-height:1.35;}
main > .tools .category-count {
  grid-column:auto;
  justify-self:end;
  border:0;
  border-radius:999px;
  padding:5px 7px;
  background:#eef3f9;
  color:#4f647d;
  font-size:10px;
}
main > .tools .category-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
main > .tools .tool-category-section .card {
  min-width:0;
  min-height:94px;
  position:relative;
  display:grid;
  grid-template-columns:37px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  align-content:start;
  align-items:start;
  column-gap:8px;
  row-gap:3px;
  padding:10px 21px 10px 9px;
  border:1px solid var(--nt-border);
  border-radius:11px;
  background:var(--nt-card);
  box-shadow:0 2px 7px rgba(7,31,63,.025);
  color:var(--nt-card-text);
}
main > .tools .tool-category-section .card:hover {border-color:#72b0f7;background:linear-gradient(145deg,var(--nt-card),rgba(47,133,239,.055));}
main > .tools .tool-category-section .card .icon {
  grid-column:1;
  grid-row:1/3;
  width:37px;
  height:37px;
  border-radius:9px;
  font-size:15px;
  margin:0;
}
main > .tools .tool-category-section .card h2 {
  grid-column:2;
  grid-row:1;
  margin:1px 0 0;
  font-size:12px;
  line-height:1.28;
  font-weight:800;
  overflow-wrap:anywhere;
  color:var(--nt-card-text);
}
main > .tools .tool-category-section .card .tool-category-badge {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  clip:rect(0,0,0,0);
  overflow:hidden;
  white-space:nowrap;
  border:0;
}
main > .tools .tool-category-section .card p {
  grid-column:2;
  grid-row:2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  min-width:0;
  margin:0;
  font-size:10px;
  line-height:1.4;
  color:var(--nt-card-muted);
}
/* The original link and its accessible text remain intact. Entire card is clickable. */
main > .tools .tool-category-section .card a.go {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:transparent;
  font-size:0;
  border-radius:inherit;
  overflow:hidden;
}
main > .tools .tool-category-section .card a.go i {
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#4777a8;
}
main > .tools .tool-category-section .card a.go:focus-visible {
  outline:3px solid #1e89ff;
  outline-offset:2px;
}
main > .tools .tools-empty {
  background:var(--nt-card);
  border-color:var(--nt-border);
  color:var(--nt-card-text);
}
main > .tools .tools-empty p{color:var(--nt-card-muted)}

/* Dark mode: only directory cards change, not shared theme or layout machinery. */
html[data-theme="dark"] main > .tools {
  --nt-card:#12233a;
  --nt-card-text:#edf5ff;
  --nt-card-muted:#a7bcd5;
  --nt-border:#2a405d;
  --nt-surface:#081625;
}
html[data-theme="dark"] main > .tools .category-heading-icon {background:#1d3754;color:#6dc5ff}
html[data-theme="dark"] main > .tools .category-count {background:#213550;color:#c6d6ec}
html[data-theme="dark"] main > .tools .tool-category-section .card:hover{background:#183150}
html[data-theme="dark"] main > .tools .quick-access-label{color:#44c5f4}

@media(max-width:1180px) {
  main > .tools .tool-category-list {grid-template-columns:repeat(2,minmax(0,1fr));}
  main > .tools .quick-access-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:790px) {
  main > .hero {padding:25px 0 19px;}
  main > .hero .wrap {min-height:78px;padding-left:80px;}
  main > .hero .wrap::before {width:64px;height:64px;font-size:26px;}
  main > .hero h1 {font-size:32px;}
  main > .hero p{font-size:13px;}
  main > .tools .tool-category-list{grid-template-columns:minmax(0,1fr);}
  main > .tools .tool-category-section .card {min-height:86px;}
}
@media(max-width:560px) {
  main > .hero {padding:23px 0 19px;}
  main > .hero .wrap {min-height:0;padding-left:0;padding-top:58px;}
  main > .hero .wrap::before {width:44px;height:44px;top:0;left:0;transform:none;border-radius:12px;font-size:21px;}
  main > .hero .eyebrow {position:absolute;top:7px;left:55px;margin:0;font-size:10px;}
  main > .hero h1{font-size:30px;}
  main > .hero p{font-size:12px;line-height:1.6;}
  main > .tools {padding:7px 0 60px;}
  main > .tools::before {height:172px;}
  main > .tools .tools-toolbar{margin-bottom:7px;padding:4px;border-radius:12px;}
  main > .tools #toolSearch{height:48px;font-size:14px;}
  main > .tools .tool-filters{gap:8px;padding:3px 0 11px;margin-bottom:13px;}
  main > .tools .tool-filter{min-height:37px;padding:6px 10px;font-size:11px;}
  main > .tools .quick-access-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  main > .tools .quick-link{min-height:87px;padding:10px 8px;}
  main > .tools .quick-link-icon{width:34px;height:34px;flex-basis:34px;}
  main > .tools .quick-link-copy strong{font-size:11.5px;}
  main > .tools .quick-link-copy span{font-size:10px;}
  main > .tools .tool-category-list {padding-top:24px;}
  main > .tools .tool-category-list::before{font-size:19px;}
  main > .tools .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  main > .tools .tool-category-section{padding:12px 9px;}
  main > .tools .tool-category-section .card{
    grid-template-columns:32px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:6px;
    row-gap:3px;
    padding:10px 13px 10px 8px;
    min-height:92px;
  }
  main > .tools .tool-category-section .card .icon{width:32px;height:32px;font-size:13px;}
  main > .tools .tool-category-section .card h2{font-size:11px;}
  main > .tools .tool-category-section .card p{font-size:9px;-webkit-line-clamp:2;}
  main > .tools .tool-category-section .card a.go i{right:4px;font-size:10px;}
  main > .tools .category-heading {grid-template-columns:29px minmax(0,1fr) auto;gap:7px;}
  main > .tools .category-heading-icon{width:29px;height:29px;font-size:13px;}
  main > .tools .category-heading h2{font-size:14px;}
  main > .tools .category-count{font-size:10px;}
}
@media(max-width:360px) {
  main > .tools .category-grid {grid-template-columns:minmax(0,1fr);}
}
/* Result count sits on the dark toolbar band, not on the card surface. */
main > .tools .tool-results-bar,
main > .tools .tool-results-bar strong {color:#eef7ff;}
main > .tools .tool-results-bar .reset-tools {color:#9bddff;}