@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  --pink: #ec4899;
  --green: #22c55e;
  --pink-rgb: 236, 72, 153;
  --green-rgb: 34, 197, 94;
  --bg-page: #0a0a0f;
  --bg-card: #15151c;
  --bg-card-primary: #1f1420;
  --mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Glow intensities, tuned per theme below so the neon effect
     reads correctly on both dark and light backgrounds */
  --glow-bg-opacity: 0.18;
  --glow-border-tight: 0.35;
  --glow-border-wide: 0.15;
  --glow-border-inset: 0.06;
  --glow-hero-tight: 0.45;
  --glow-hero-wide: 0.2;
  --glow-hero-inset: 0.08;
  --glow-title-1: 0.5;
  --glow-title-2: 0.3;
  --glow-text-tight: 0.45;
  --glow-text-wide: 0.2;
  --glow-text-hero-tight: 0.55;
  --glow-text-hero-wide: 0.25;
  --glow-toast: 0.25;
  --text-stroke-color: rgba(244, 244, 246, 0.35);

  --color-bg: #15151c;
  --color-bg-secondary: #2a2a35;
  --color-text: #f4f4f6;
  --color-text-secondary: #a0a0ad;
}

/* Light theme: same pink/green accents, but tuned so the neon glow
   stays visible against a bright background instead of washing out.
   An inline head script sets data-theme (from localStorage, falling
   back to prefers-color-scheme) before first paint, and the toggle
   button updates it afterwards — so this is the only place the
   light palette needs to be defined. */
:root[data-theme="light"] {
  --pink: #a3195b;
  --green: #0f7a5c;
  --pink-rgb: 163, 25, 91;
  --green-rgb: 15, 122, 92;
  --bg-page: #f4f4f8;
  --bg-card: #ffffff;
  --bg-card-primary: #fbf1f5;

  --glow-bg-opacity: 0.06;
  --glow-border-tight: 0.35;
  --glow-border-wide: 0.18;
  --glow-border-inset: 0.04;
  --glow-hero-tight: 0.4;
  --glow-hero-wide: 0.2;
  --glow-hero-inset: 0.05;
  --glow-title-1: 0.22;
  --glow-title-2: 0.14;
  --glow-text-tight: 0.22;
  --glow-text-wide: 0.1;
  --glow-text-hero-tight: 0.28;
  --glow-text-hero-wide: 0.12;
  --glow-toast: 0.18;
  --text-stroke-color: rgba(21, 21, 28, 0.25);

  --color-bg: #ffffff;
  --color-bg-secondary: #e5e5ea;
  --color-text: #15151c;
  --color-text-secondary: #55555f;
}

/* Fixed centering of the page content */
body {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  font-family: var(--mono);
  background-color: var(--bg-page);
  background-image: radial-gradient(
    circle at 50% 0%,
    rgba(var(--pink-rgb), var(--glow-bg-opacity)) 0%,
    transparent 60%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.15);
}

button:active {
  filter: brightness(0.9);
}

button:disabled {
  cursor: not-allowed;
  filter: none;
}

/* Vertical spacing for the main layout */
main {
  max-width: 600px;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Keep consistent spacing between elements */
}

header {
  padding: 0;
  margin: 0;
  text-align: center;
}

footer {
  padding: 0;
  margin: 0;
  text-align: center;
}

header h2 {
  position: relative;
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.4rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
  text-shadow:
    0 0 20px rgba(var(--pink-rgb), var(--glow-title-1)),
    0 0 40px rgba(var(--green-rgb), var(--glow-title-2));
}

header h2 > span {
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 1px,
    var(--green) 1px,
    var(--green) 2px
  );
  background-size: 100% 2px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

header h2::before {
  content: "> ";
}

/* Blinking terminal cursor after the title text */
header h2::after {
  content: "_";
  animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

/* RGB-split glitch effect, layered via the header's own text
   duplicated through data-attribute pseudo-elements so the base
   gradient text stays intact underneath */
header h2 span {
  position: relative;
  display: inline-block;
}

header h2 span::before,
header h2 span::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--pink);
  overflow: hidden;
  opacity: 0.7;
  animation: glitch-shift 4s infinite steps(1);
}

header h2 span::after {
  color: var(--green);
  animation-delay: 0.15s;
}

.powered-by {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.powered-by a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.powered-by a:hover {
  color: var(--green);
}

@keyframes glitch-shift {
  0%,
  92%,
  100% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
  93% {
    transform: translate(-2px, 1px);
    clip-path: inset(10% 0 60% 0);
    opacity: 0.8;
  }
  95% {
    transform: translate(2px, -1px);
    clip-path: inset(60% 0 10% 0);
    opacity: 0.8;
  }
  97% {
    transform: translate(-1px, 0);
    clip-path: inset(30% 0 40% 0);
    opacity: 0.6;
  }
  99% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

/* Inner card-in-card box for each IP entry */
.ip-display-box {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 0.75rem 1.25rem;
  margin-top: 0.7rem; /* Room for the folder-tab label to overlap the top border */
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 5.25rem; /* Reserve room for a wrapped 2-line IPv6 address to prevent layout shift on load */
  justify-content: center;
  box-shadow:
    0 0 8px rgba(var(--green-rgb), var(--glow-border-tight)),
    0 0 20px rgba(var(--green-rgb), var(--glow-border-wide)),
    inset 0 0 12px rgba(var(--green-rgb), var(--glow-border-inset));
}

/* Folder-tab label: sits above the box, overlapping down onto its top border */
.ip-card-tab {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ip-display-box:last-of-type {
  margin-bottom: 0;
}

.ip-list:not([hidden]) {
  display: flex;
  flex-direction: column;
}

/* Hero styling for the primary address box */
.ip-display-box.is-hero {
  background-color: var(--bg-card-primary);
  border-color: var(--pink);
  border-width: 2px;
  padding: 1rem 1.5rem 1.25rem;
  align-items: center;
  text-align: center;
  box-shadow:
    0 0 10px rgba(var(--pink-rgb), var(--glow-hero-tight)),
    0 0 28px rgba(var(--pink-rgb), var(--glow-hero-wide)),
    inset 0 0 16px rgba(var(--pink-rgb), var(--glow-hero-inset));
}

.ip-display-box.is-hero .ip-box-value-row {
  justify-content: center;
}

.ip-display-box.is-hero .ip-box-value {
  font-size: clamp(1.4rem, 6vw, 2rem);
  justify-content: center;
  text-shadow:
    0 0 8px rgba(var(--pink-rgb), var(--glow-text-hero-tight)),
    0 0 18px rgba(var(--pink-rgb), var(--glow-text-hero-wide));
}

/* Compact styling for the secondary address box */
.ip-display-box.is-secondary {
  padding: 0.5rem 1.25rem;
  min-height: 0;
  align-items: center;
  text-align: center;
}

.ip-display-box.is-secondary .ip-box-value-row {
  justify-content: center;
  height: auto;
}

.ip-display-box.is-secondary .ip-box-value {
  font-size: clamp(1.4rem, 6vw, 2rem);
  justify-content: center;
}

.ip-box-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.5rem; /* Lock the sub-box header height */
}

/* Splits a single card into side-by-side sub-columns (e.g. Location / ASN / ISP) */
.ip-box-header-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex: 1;
}

.ip-box-header-row .ip-box-value {
  font-family: var(--mono);
  font-size: clamp(0.85rem, 3vw, 1.1rem);
  min-height: 2.2rem;
}

.ip-box-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ip-box-label {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin: 0;
}

.ip-box-header .ip-box-label::before {
  content: "// ";
  color: var(--green);
  opacity: 0.7;
}

/* Card title tag: any direct span in a folder tab gets the same
   badge look (protocol name, or a static card name like "Network Info") */
.ip-card-tab > span {
  font-family: var(--mono);
  letter-spacing: 0.02em;
  color: var(--green);
  background-color: var(--bg-page);
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 700;
}

.ip-card-tab > span::before {
  content: ">\2009";
}

.ip-box-icon {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

/* Tag shown next to the label of whichever protocol is preferred */
.ip-card-tab > span.primary-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pink);
  background-color: var(--bg-page);
  border: 1px solid var(--pink);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
}

/* IP value row: address text, centered on its own */
.ip-box-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Minimalist icon-only copy button; disabled/hover/active states
   come from the shared button rules above. Positioned in the box's
   corner so it doesn't affect the address text's centering */
.copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  background: transparent;
  border-radius: 2px;
  border: 1px solid var(--color-bg-secondary);
  color: var(--color-text-secondary);
  visibility: hidden; /* Hidden until the IP has resolved */
}

.copy-btn:hover {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}

/* Primary box's button sits at the bottom-right instead */
.is-hero .copy-btn {
  top: auto;
  bottom: 0.6rem;
}

.copy-btn.is-ready {
  visibility: visible;
}

.copy-btn svg {
  width: 1rem;
  height: 1rem;
}

/* IP value text block, fully supports full-length IPv6 wrapping */
.ip-box-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1rem, 4.5vw, 1.3rem); /* Responsive font sizing */
  font-weight: 700;
  color: var(--color-text);
  text-shadow:
    0 0 6px rgba(var(--green-rgb), var(--glow-text-tight)),
    0 0 14px rgba(var(--green-rgb), var(--glow-text-wide));
  word-break: break-all; /* Force wrap on narrow mobile screens */
  margin: 0;
  line-height: 1.3;
  min-height: 2.6rem; /* Reserve room for 2 lines so wrapping IPv6 doesn't shift the box */
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
}

/* Shimmer placeholder shown while the IP is loading. Background and sweep
   fade in after a short delay so fast responses (that clear the class
   before the delay elapses) never show a flash. */
.ip-box-value.loading-shimmer {
  width: 75%;
  height: 1.5rem;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background: transparent;
  animation: shimmer-reveal-bg 0s linear 0.2s forwards;
}

/* Sweep is a translated pseudo-element so the animation stays on the
   compositor (transform) instead of repainting background-position
   every frame. */
.ip-box-value.loading-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-bg) 50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 200% 100%;
  opacity: 0;
  animation:
    shimmer-animation 1.5s 0.2s infinite linear,
    shimmer-reveal-sweep 0s linear 0.2s forwards;
  will-change: transform;
}

/* Shimmer sweep animation */
@keyframes shimmer-animation {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes shimmer-reveal-bg {
  to {
    background-color: var(--color-bg-secondary);
  }
}

@keyframes shimmer-reveal-sweep {
  to {
    opacity: 1;
  }
}

/* Floating toast notification for copy status */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 1rem);
  max-width: calc(100vw - 2rem);
  width: max-content;
  white-space: nowrap;
  font-family: var(--mono);
  background-color: var(--bg-card);
  color: var(--green);
  border: 1px solid var(--green);
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(var(--green-rgb), var(--glow-toast));
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
  z-index: 1000;
  font-size: 0.9rem;
  font-weight: 500;
}

.toast::before {
  content: "> ";
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

footer {
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* Fixed light/dark theme toggle button */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 900;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--green);
  background-color: var(--bg-card);
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(var(--green-rgb), var(--glow-border-tight));
}

.theme-toggle:hover {
  color: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 10px rgba(var(--pink-rgb), var(--glow-border-tight));
}

/* Prose content block for simple text pages (e.g. privacy notice) */
.prose {
  background-color: var(--bg-card);
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  color: var(--color-text);
  line-height: 1.6;
  box-shadow:
    0 0 8px rgba(var(--green-rgb), var(--glow-border-tight)),
    0 0 20px rgba(var(--green-rgb), var(--glow-border-wide)),
    inset 0 0 12px rgba(var(--green-rgb), var(--glow-border-inset));
}

.prose h3 {
  margin: 1.25rem 0 0.5rem;
  color: var(--green);
}

.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0.5rem 0;
  color: var(--color-text-secondary);
}

.prose a {
  color: var(--green);
}

.back-link {
  display: inline-block;
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.back-link:hover {
  color: var(--green);
}