:root {
  --bg-1: #12051f;
  --bg-2: #090311;
  --panel-border: rgba(255,255,255,0.12);
  --text: #f7f2ff;
  --muted: #b8a9d4;
  --text2: #d7caee;
  --text3: #9f90be;
  --pink: #ff4fd8;
  --cyan: #27f5ff;
  --green-neon: #69ff8b;
  --green-glow: rgba(105,255,139,0.34);
  --surface: rgba(26, 21, 52, 0.92);
  --surface2: rgba(18, 14, 38, 0.96);
  --surface3: rgba(36, 30, 68, 0.98);
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);
  --radius: 24px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 18px 50px rgba(0,0,0,0.45);
}

:root[data-theme="light"] {
  --bg-1: #f7f4ff;
  --bg-2: #e9fbff;
  --panel-border: rgba(20,20,40,0.12);
  --text: #171322;
  --muted: #605478;
  --text2: #352f48;
  --text3: #746a88;
  --surface: rgba(255,255,255,0.92);
  --surface2: rgba(245,245,255,0.96);
  --surface3: rgba(235,238,250,0.98);
  --border: rgba(20,20,40,0.08);
  --border2: rgba(20,20,40,0.16);
  --shadow: 0 0 0 2px rgba(20,20,40,0.04), 0 18px 50px rgba(53,60,80,0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; scroll-behavior: smooth; }
body {
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(39,245,255,0.1), transparent 26%),
    radial-gradient(circle at 85% 15%, rgba(255,79,216,0.16), transparent 22%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow-x: hidden;
  padding: 0 0 6rem;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.2));
}
.page-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 56px;
  position: relative;
  z-index: 1;
}
.utility-main { display:flex; flex-direction:column; align-items:center; }
.hero { position:relative; text-align:center; padding:34px 18px 18px; }
.hero-glow {
  position:absolute;
  inset:-10px auto auto 50%;
  width:360px;
  height:220px;
  transform:translateX(-50%);
  background: radial-gradient(circle, rgba(255,79,216,0.22), rgba(39,245,255,0.08), transparent 70%);
  filter: blur(14px);
  pointer-events:none;
}
.theme-toggle{
  position:fixed;
  top:16px;
  right:16px;
  z-index:1100;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:0.5px solid var(--border2);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.theme-toggle:hover{ transform:translateY(-1px); background:var(--surface2); border-color:var(--cyan); }
.theme-toggle:active{ transform:scale(.96); }
.theme-toggle-icon{ font-size:20px; line-height:1; }
.hero-home-link,
.hero-home-link:link,
.hero-home-link:visited,
.hero-home-link:hover,
.hero-home-link:active {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.logo {
  margin:0;
  font-family:"Press Start 2P", cursive;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height:1.2;
  color:var(--text);
  text-shadow: 0 0 10px rgba(39,245,255,0.45), 0 0 28px rgba(255,79,216,0.3);
}
.logo span {
  color: rgba(53, 112, 125, 0.62);
  opacity:0.82;
  text-shadow: 0 0 8px rgba(39,245,255,0.18), 0 0 18px rgba(255,79,216,0.08);
}
.logo-sub {
  display:inline-block;
  font-family:"Press Start 2P", cursive;
  font-size:1.03rem;
  line-height:1.45;
  color:var(--text);
  text-shadow:0 0 14px rgba(39,245,255,0.4);
  margin-top: 10px;
}
.card,
.section-card {
  background: linear-gradient(180deg, rgba(26, 21, 52, 0.92), rgba(10, 8, 24, 0.95));
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
}
.subnet-card,
.results-section,
.seo-content { width:100%; max-width:900px; }
.subnet-card { padding:1.75rem; }
.results-section { margin-top:1.5rem; }
.input-grid { display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; }
.field-group { min-width: 0; }
.field-label,
.section-title,
.pill-label,
.pill-class-row,
.status-pill,
.reverse-btn,
.results-info-label { font-family:"Press Start 2P", cursive; }
.field-label {
  display:block;
  margin-bottom:10px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.16em;
  text-transform:uppercase;
}
#ip-input,
#mask-input {
  width:100%;
  font-family:'DM Mono', monospace;
  font-size:1.08rem;
  padding:1rem 1rem;
  background: rgba(8, 7, 22, 0.86);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#ip-input:focus,
#mask-input:focus { border-color: rgba(39,245,255,0.48); box-shadow: 0 0 0 3px rgba(39,245,255,0.12); }
.btn-row { display:flex; gap:10px; margin-top:16px; align-items:stretch; }
#calculate-btn,
.secondary-btn {
  font-family:"Press Start 2P", cursive;
  border-radius:var(--radius-sm);
  min-height:56px;
  cursor:pointer;
  transition: transform .12s, box-shadow .15s, background .15s;
  text-transform: uppercase;
}
#calculate-btn {
  flex: 1 1 auto;
  padding: 1.05rem 1.4rem;
  background: linear-gradient(180deg, rgba(255,79,216,0.98), rgba(194,37,158,0.94));
  color:#fff;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(255,79,216,0.22);
}
.secondary-btn {
  flex: 0 0 auto;
  padding: .9rem 1rem;
  font-size:.66rem;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  border:1px solid rgba(255,255,255,0.12);
}
.ip-highlight {
  color: var(--green-neon);
  text-shadow: 0 0 6px rgba(105,255,139,0.8), 0 0 12px rgba(105,255,139,0.6), 0 0 20px rgba(105,255,139,0.4);
}
#calculate-btn:hover,
.secondary-btn:hover { transform: translateY(-1px); }
.status-bar {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-size:12px;
  color:var(--text2);
  min-height:22px;
  flex-wrap:wrap;
}
.status-pill {
  font-size:9px;
  line-height:1.5;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(39,245,255,0.14);
  color: var(--cyan);
  white-space: nowrap;
}
.status-error { background: rgba(255,139,156,0.12); color: #ffb5bf; }
.status-ok { background: rgba(105,255,139,0.14); color: var(--green-neon); }
.reverse-btn {
  border: 1px solid rgba(39,245,255,0.28);
  background: rgba(39,245,255,0.09);
  color: #b9fbff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 8px;
  line-height: 1.5;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.reverse-btn:hover,
.reverse-btn.copied { background: rgba(39,245,255,0.16); border-color: rgba(39,245,255,0.55); transform: translateY(-1px); }
.section-card { padding: 1.25rem 1.25rem 1.4rem; }
.section-title {
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom: 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.title-actions { display:flex; align-items:center; gap:8px; }
.results-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: -4px 0 1rem;
  padding: 10px 12px;
  border: 1px solid rgba(39,245,255,0.18);
  border-radius: var(--radius-xs);
  background: rgba(39,245,255,0.055);
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  font-size: .86rem;
  line-height: 1.5;
}
.results-info-label {
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-right: 4px;
}
.jump-selected-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(105,255,139,0.42);
  color:#d9ffe2;
  background:rgba(105,255,139,0.12);
  cursor:pointer;
  line-height:1;
}
.jump-icon { width: 14px; height: 14px; display: inline-block; }
.jump-selected-btn:hover { transform: translateY(-1px); }
.jump-selected-btn:hover .jump-icon { transform: translateY(1px); transition: transform .15s ease; }
.pill-list { display:flex; flex-direction:column; gap: 12px; }
.result-pill {
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
  transition: transform .14s, box-shadow .18s, border-color .18s, opacity .2s;
}
.result-pill:hover { transform: translateY(-1px); }
.result-pill-head {
  width:100%;
  border:0;
  background: transparent;
  color: inherit;
  text-align:left;
  cursor:pointer;
  padding: 16px 52px 18px 18px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:flex-start;
}
.result-pill,
.result-pill-head,
.result-pill-head * { user-select: text; -webkit-user-select: text; }
.result-pill.green {
  background: linear-gradient(180deg, rgba(33, 74, 47, 0.98), rgba(13, 35, 22, 0.98));
  color:#f2fff5;
  border-color: rgba(105,255,139,0.65);
  box-shadow: 0 0 0 2px rgba(105,255,139,0.14), 0 0 30px var(--green-glow), 0 16px 34px rgba(0,0,0,0.34);
}
.result-pill.grey {
  background: linear-gradient(180deg, rgba(31, 35, 46, 0.98), rgba(16, 19, 29, 0.99));
  color: #e9eef8;
  border-color: rgba(218, 229, 245, 0.48);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 18px rgba(206, 224, 255, 0.18), 0 14px 30px rgba(0,0,0,0.32);
}
.result-pill.grey:hover {
  border-color: rgba(232, 241, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 0 26px rgba(206, 224, 255, 0.26), 0 16px 34px rgba(0,0,0,0.38);
}
.result-pill.grey.active .collapsed-network-only { display: none !important; }
.pill-main { display:flex; flex-direction:column; gap: 8px; min-width:0; }
.pill-class-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size: 9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.98;
  line-height:1.6;
}
.green .pill-class-row { color: #d9ffe2; text-shadow: 0 0 14px rgba(105,255,139,0.2); }
.grey .pill-class-row { color: #f4f7ff; }
.pill-line { display:flex; flex-wrap:wrap; gap: 10px 22px; align-items:flex-start; line-height: 1.55; }
.compact-network { font-size: 1.02rem; }
.pill-meta {
  font-family:'DM Mono', monospace;
  font-size: .98rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.pill-label {
  display: inline-flex;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  font-weight: 700;
  margin-right: 2px;
  margin-top: 1px;
  line-height: 1.45;
  white-space: nowrap;
}
.green .pill-label { color: #d7ffe5; }
.grey .pill-label { color: #ffffff; text-shadow: 0 0 8px rgba(206,224,255,0.25); }
.value-stack { display: inline-flex; flex-direction: column; vertical-align: top; justify-content: center; gap: 2px; min-width: max-content; max-width:100%; }
.value-text { font-family: 'DM Mono', monospace; font-weight: 700; line-height: 1.45; }
.binary-bits {
  display: none;
  font-family: 'DM Mono', monospace;
  font-size: clamp(.5rem, .95vw, .64rem);
  line-height: 1.25;
  letter-spacing: -.035em;
  white-space: nowrap;
  overflow-x:auto;
  max-width:100%;
  scrollbar-width: thin;
}
.result-pill.active .binary-bits { display: block; }
.green .binary-bits { color: #b8ffc8; }
.grey .binary-bits { color: #cbd6e8; }
.range-dash { display: inline-block; padding: 0 2px; line-height: 1.45; }
.grey-expanded-details { display:none; padding-top: 4px; border-top:1px solid rgba(255,255,255,0.08); }
.result-pill.grey.active .grey-expanded-details { display:flex; flex-direction:column; gap:8px; }
.pill-toggle {
  font-family:'DM Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding-top: 2px;
  opacity: .85;
  color:inherit;
  user-select:none;
}
.copy-pill-btn {
  position:absolute;
  right:12px;
  bottom:10px;
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.18);
  color:currentColor;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:.78;
  transition: opacity .15s, transform .12s, background .15s, border-color .15s;
}
.copy-pill-btn svg { width:16px; height:16px; fill:currentColor; }
.copy-pill-btn:hover,
.copy-pill-btn.copied { opacity:1; transform:translateY(-1px); background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.35); }
.green .copy-pill-btn { color:#d9ffe2; }
.grey .copy-pill-btn { color:#e9eef8; }
.csv-btn {
  font-family: "Press Start 2P", cursive;
  border: 1px solid rgba(39,245,255,0.38);
  background: rgba(39,245,255,0.10);
  color: #b9fbff;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 8px;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(39,245,255,0.16);
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.csv-btn:hover { background: rgba(39,245,255,0.18); border-color: rgba(39,245,255,0.62); transform: translateY(-1px); box-shadow: 0 0 20px rgba(39,245,255,0.28); }
.empty-state { width:100%; max-width:900px; text-align:center; padding:3rem 1rem; color:var(--muted); font-size:13px; line-height:1.8; }
/* SEO support content, intentionally subtle and placed after the main utility UI */
.seo-support {
  width: min(980px, calc(100% - 32px));
  margin: 36px auto 18px;
  padding: 0 20px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text2);
  font-size: 0.78rem;
  line-height: 1.65;
  opacity: 0.72;
}

.seo-block {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.seo-support h2 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.seo-support p {
  margin: 6px 0;
}

.seo-support strong {
  color: var(--text);
}

.seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.seo-links a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  font-weight: 700;
}

.seo-links a:hover {
  opacity: 0.86;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at top, rgba(39,245,255,0.18), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(255,79,216,0.16), transparent 24%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
:root[data-theme="light"] body::before {
  background-image: linear-gradient(rgba(20,20,40,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,20,40,0.045) 1px, transparent 1px);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .section-card,
:root[data-theme="light"] #ip-input,
:root[data-theme="light"] #mask-input { background: rgba(255,255,255,0.9); color: var(--text); border-color: rgba(20,20,40,0.16); }
:root[data-theme="light"] .jump-selected-btn { color: #1a2a38; border-color: rgba(40, 60, 90, 0.35); background: rgba(40, 60, 90, 0.08); }
:root[data-theme="light"] .jump-selected-btn:hover { color: #0f1d2a; background: rgba(40, 60, 90, 0.14); }
:root[data-theme="light"] .secondary-btn,
:root[data-theme="light"] .theme-toggle { background: rgba(255,255,255,0.72); color: #352f48; border-color: rgba(20,20,40,0.16); }
:root[data-theme="light"] .result-pill.grey {
  background: linear-gradient(180deg, rgba(230, 235, 245, 0.98), rgba(210, 218, 232, 0.98));
  color: #1d2430;
  border-color: rgba(120, 135, 165, 0.65);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 0 18px rgba(60, 75, 110, 0.18), 0 16px 32px rgba(40, 50, 75, 0.22);
}
:root[data-theme="light"] .result-pill.grey:hover { border-color: rgba(100, 120, 160, 0.8); box-shadow: 0 0 0 1px rgba(255,255,255,0.75), 0 0 26px rgba(60, 75, 110, 0.28), 0 18px 36px rgba(40, 50, 75, 0.28); }
:root[data-theme="light"] .grey .pill-label,
:root[data-theme="light"] .grey .pill-class-row,
:root[data-theme="light"] .grey .binary-bits,
:root[data-theme="light"] .grey .copy-pill-btn { color: #1d2430; text-shadow: none; }
:root[data-theme="light"] .result-pill.green {
  background: linear-gradient(180deg, rgba(200,255,215,0.98), rgba(150,235,180,0.98));
  color: #072812;
  border-color: rgba(20,160,70,0.85);
  box-shadow: 0 0 0 2px rgba(20,160,70,0.18), 0 0 34px rgba(20,160,70,0.32), 0 18px 36px rgba(40,80,60,0.28);
}
:root[data-theme="light"] .result-pill.green:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(20,160,70,0.22), 0 0 42px rgba(20,160,70,0.4), 0 20px 40px rgba(40,80,60,0.32); }
:root[data-theme="light"] .green .pill-label,
:root[data-theme="light"] .green .pill-class-row,
:root[data-theme="light"] .green .binary-bits { color: #063d1a; text-shadow: none; }
:root[data-theme="light"] .green .copy-pill-btn { color: #0b531f; text-shadow: none; }
:root[data-theme="light"] .results-info-row { background: rgba(39,145,180,0.075); border-color: rgba(39,145,180,0.22); }
:root[data-theme="light"] .results-info-label,
:root[data-theme="light"] .reverse-btn,
:root[data-theme="light"] .csv-btn { color: #095e73; }
:root[data-theme="light"] .ip-highlight { color: #0b8c35; text-shadow: 0 0 8px rgba(18,170,72,0.32); }

@media (max-width: 860px) {
  .input-grid { grid-template-columns: 1fr; }
  .value-stack { min-width: 0; width:100%; }
  .pill-line { flex-direction: column; gap: 8px; }
  .pill-meta { width:100%; }
}

:root[data-theme="light"] .seo-support {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text2);
}

:root[data-theme="light"] .seo-support strong {
  color: #111827;
}

:root[data-theme="light"] .seo-links a {
  color: #095e73;
}
@media (max-width: 720px) {
  .page-shell { width: min(100% - 20px, 1180px); padding-top: 24px; }
  .hero { padding-top: 18px; }
  .theme-toggle { top: 10px; right: 10px; width: 40px; height: 40px; }
  .subnet-card,
  .section-card,
  .subnet-card,
  .btn-row { flex-direction:column; }
  #calculate-btn,
  .secondary-btn { width:100%; }
  .result-pill-head { padding: 14px 48px 46px 14px; }
  .pill-meta { font-size: .92rem; }
  .binary-bits { font-size: .5rem; }
  .section-title { align-items:flex-start; }
}