/* ===========================
   NoirStack — WHOIS Lookup
   =========================== */

:root{
  --ns-bg:#0a0a0a;
  --ns-panel:#0e1116;
  --ns-text:#e2edff;
  --ns-muted:#9ca3af;
  --ns-primary:#0001FF;     /* Electric Blue */
  --ns-primary-2:#66a3ff;   /* Glow Blue */
  --ns-radius:14px;
  --ns-shadow:0 20px 60px rgba(0,0,0,.45);
}

/* main wrapper */
.whois-lookup-page{
  position:relative;
  max-width:960px;
  margin: clamp(2rem,5vw,3rem) auto;
  padding: 2.5rem 1.5rem;
  color: var(--ns-text);

  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(0,1,255,.14), transparent 70%),
    radial-gradient(1000px 500px at 85% -20%, rgba(102,163,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--ns-radius);
  box-shadow: var(--ns-shadow);
  backdrop-filter: blur(10px) saturate(130%);
  overflow:hidden;
}

/* faint animated grid */
.whois-lookup-page::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/32px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/100% 32px;
  opacity:.3; pointer-events:none;
  animation: ns-grid-pan 48s linear infinite;
}
@keyframes ns-grid-pan { to { background-position: 32px 32px; } }

/* headings */
.whois-section h1,
.whois-info h2{
  margin-bottom: 1rem;
  font-size: clamp(1.6rem,3.5vw,2.2rem);
  font-weight: 800;
  background: linear-gradient(90deg, var(--ns-primary), #5a7bff 45%, #9cc7ff 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 16px rgba(0,1,255,.35);
}

/* form */
.whois-section form{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-bottom:1.5rem;
}
.whois-section input{
  flex:1 1 65%;
  padding:.85rem 1rem;
  font-size:1rem;
  color:var(--ns-text);
  background:rgba(30,33,42,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  transition:border .2s, box-shadow .25s, background .2s;
}
.whois-section input::placeholder{ color:#97a6bd; opacity:.75; }
.whois-section input:focus{
  outline:none;
  border-color:var(--ns-primary);
  box-shadow:0 0 14px rgba(0,1,255,.45);
  background:rgba(35,38,48,.95);
}

/* button */
.whois-section button{
  padding:.9rem 1.4rem;
  background: linear-gradient(180deg, var(--ns-primary), #3a4dff);
  color:#fff; font-weight:700; border:none;
  border-radius:12px; cursor:pointer;
  transition: transform .1s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow: 0 12px 30px rgba(0,1,255,.35);
}
.whois-section button:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,1,255,.45), 0 0 20px rgba(102,163,255,.32);
}
.whois-section button:active{ transform:translateY(0); }
.whois-section button:focus-visible{
  outline:2px solid var(--ns-primary-2);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(102,163,255,.25);
}

/* WHOIS output */
pre#whois-result{
  background:rgba(20,22,30,.9);
  color:var(--ns-text);
  padding:1rem 1.25rem;
  border-radius:var(--ns-radius);
  border:1px solid rgba(255,255,255,.06);
  white-space:pre-wrap; overflow-x:auto;
  font-family: "JetBrains Mono", monospace;
  font-size:.95rem;
  box-shadow: inset 0 0 24px rgba(0,1,255,.08);
  margin-top:1.5rem;
}
pre#whois-result .key{ color:var(--ns-primary-2); font-weight:600; }
pre#whois-result .value{ color:#00ffa6; }

/* info section */
.whois-info{
  margin-top:2.5rem;
  padding:2rem 1.25rem;
  background:rgba(12,14,20,.9);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--ns-radius);
  color:var(--ns-muted);
  line-height:1.65;
  box-shadow: inset 0 0 20px rgba(0,1,255,.06);
}
.whois-info ul{ list-style:disc; padding-left:1.5rem; }

/* accessibility */
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* responsive */
@media (max-width:600px){
  .whois-section form{ flex-direction:column; }
  .whois-section input,
  .whois-section button{ width:100%; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .whois-lookup-page::before{ animation:none; }
  .whois-section input,
  .whois-section button{ transition:none; }
}