/**
 * ╔══════════════════════════════════════════════════════════════════════════════╗
 * ║ DOCNOTE & FILE METADATA                                                      ║
 * ╠══════════════════════════════════════════════════════════════════════════════╣
 * ║ File        : dist/css/main.css                                              ║
 * ║ Application : Visual Subnet Calculator (v1.4.3)                              ║
 * ║ Description : Design System, Dark/Light Themes, Glassmorphism & UI Tokens    ║
 * ║ Author      : HARRY DERTIN SUTISNA ALSYUNDAWY (@alsyundawy)                  ║
 * ║ Organization: ALSYUNDAWY IT SOLUTION (https://alsyundawy.com)                ║
 * ║ Contact     : Email: alsyundawy@gmail.com | Telegram: https://t.me/alsyundawy║
 * ║ Social / Dev: GitHub: https://github.com/alsyundawy | X: @alsyundawy         ║
 * ║ Repository  : https://github.com/alsyundawy/visualsubnetcalc                 ║
 * ║ Live Demo   : https://alsyundawy.github.io/visualsubnetcalc/                 ║
 * ║ Version     : 1.4.3 (Hardened 2026 Release)                                  ║
 * ║ Date        : September 18, 2026                                             ║
 * ║ License     : MIT License                                                    ║
 * ╚══════════════════════════════════════════════════════════════════════════════╝
 */

:root {
  /*
    Color Palette
    https://coolors.co/palette/033270-1368aa-4091c9-9dcee2-fedfd4-f29479-f26a4f-ef3c2d-cb1b16-65010c
    --yale-blue: #033270ff;
    --green-blue: #1368aaff;
    --celestial-blue: #4091c9ff;
    --light-blue: #9dcee2ff;
    --misty-rose: #fedfd4ff;
    --salmon: #f29479ff;
    --tomato: #f26a4fff;
    --vermilion: #ef3c2dff;
    --engineering-orange: #cb1b16ff;
    --rosewood: #65010cff;
  */
  --split-foreground: #000000;
  /* Combination of Salmon/Tomato */
  --split-background: #f27f64;
  --join-foreground: #000000;
  /* Combination of Light/Celestial Blue */
  --join-background: #6fb0d6;

  /* Standard Light mode subnet palette highlights */
  --subpal-1-1: #ffadadff;
  --subpal-1-2: #ffd6a5ff;
  --subpal-1-3: #fdffb6ff;
  --subpal-1-4: #caffbfff;
  --subpal-1-5: #9bf6ffff;
  --subpal-1-6: #a0c4ffff;
  --subpal-1-7: #bdb2ffff;
  --subpal-1-8: #ffc6ffff;
  --subpal-1-9: #e6e6e6ff;
  --subpal-1-10: #ffffffff;

  /* Compact scale tokens */
  --nav-icon-size: 36px;
  --cell-pad: 0.2rem;
  --form-font-size: 0.875rem;
  --table-font-size: 0.8rem;
  --btn-font-size: 0.8125rem;

  /* Theme System & Color Tokens (ns1.orion.net.id style) */
  --bg-1: #0f172a;
  --bg-2: #020617;
  --text-primary: #0f172a;
  --text-muted: #64748b;
  --accent-from: #38bdf8;
  --accent-to: #0ea5e9;
  --glass-border: rgba(56, 189, 248, 0.22);
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
  --input-bg: #ffffff;
  --input-border: #cbd5e1;

  /* Button Go: Biru cerah bernuansa gelap (Bright Sapphire Blue with deep dark royal undertones) */
  --btn-calc-go-bg: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  --btn-calc-go-border: #1e40af;
  --btn-calc-go-text: #ffffff;
  --btn-calc-go-hover-bg: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  --btn-calc-go-hover-border: #1d4ed8;
  --btn-calc-go-hover-text: #ffffff;
  --btn-calc-go-shadow:
    0 2px 6px rgba(30, 64, 175, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-calc-go-hover-shadow:
    0 4px 14px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* Button Tools: Emerald Green */
  --btn-pastel-green-bg: linear-gradient(180deg, #10b981 0%, #059669 100%);
  --btn-pastel-green-border: #047857;
  --btn-pastel-green-text: #ffffff;
  --btn-pastel-green-hover-bg: linear-gradient(
    180deg,
    #34d399 0%,
    #059669 100%
  );
  --btn-pastel-green-hover-border: #047857;
  --btn-pastel-green-hover-text: #ffffff;
  --btn-pastel-green-shadow:
    0 2px 6px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-pastel-green-hover-shadow:
    0 4px 14px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* Button Reset: Crimson / Rose Red */
  --btn-pastel-red-bg: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
  --btn-pastel-red-border: #be123c;
  --btn-pastel-red-text: #ffffff;
  --btn-pastel-red-hover-bg: linear-gradient(180deg, #fb7185 0%, #be123c 100%);
  --btn-pastel-red-hover-border: #9f1239;
  --btn-pastel-red-hover-text: #ffffff;
  --btn-pastel-red-shadow:
    0 2px 6px rgba(225, 29, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-pastel-red-hover-shadow:
    0 4px 14px rgba(244, 63, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"],
[data-theme="dark"] {
  --bg-1: #0f172a;
  --bg-2: #020617;
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
  --accent-from: #38bdf8;
  --accent-to: #0ea5e9;
  --glass-border: rgba(56, 189, 248, 0.22);
  --card-bg: rgba(15, 23, 42, 0.72);
  --card-shadow:
    0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.15);
  --input-bg: rgba(2, 6, 23, 0.6);
  --input-border: rgba(56, 189, 248, 0.3);
  color-scheme: dark;

  /* Subnet split / join colors adjusted for vibrant contrast in dark mode */
  --split-foreground: #020617;
  --split-background: #fb7185; /* Vibrant rose/coral */
  --join-foreground: #020617;
  --join-background: #38bdf8; /* Vibrant sky blue */

  /* Curated Dark mode subnet palette highlights (Rich, vibrant jewel tones with high clarity) */
  --subpal-1-1: #5c1d2e; /* Deep Rose / Crimson */
  --subpal-1-2: #5c2c10; /* Warm Burnt Amber */
  --subpal-1-3: #4a3e0f; /* Deep Olive Gold */
  --subpal-1-4: #0d4a34; /* Deep Pine Emerald */
  --subpal-1-5: #0e4354; /* Deep Ocean Teal */
  --subpal-1-6: #1e355b; /* Midnight Sapphire */
  --subpal-1-7: #322566; /* Deep Royal Indigo */
  --subpal-1-8: #4c184c; /* Deep Violet Plum */
  --subpal-1-9: #273549; /* Deep Slate Blue */
  --subpal-1-10: #131d2e; /* Deep Navy Obsidian */

  /* Button Go (Dark Mode): Deep midnight navy base with vivid luminous sapphire glow */
  --btn-calc-go-bg: linear-gradient(180deg, #1d4ed8 0%, #0f172a 100%);
  --btn-calc-go-border: #3b82f6;
  --btn-calc-go-text: #ffffff;
  --btn-calc-go-hover-bg: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%);
  --btn-calc-go-hover-border: #60a5fa;
  --btn-calc-go-hover-text: #ffffff;
  --btn-calc-go-shadow:
    0 2px 8px rgba(15, 23, 42, 0.6), 0 0 12px rgba(59, 130, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-calc-go-hover-shadow:
    0 4px 16px rgba(59, 130, 246, 0.5), 0 0 20px rgba(37, 99, 235, 0.35);

  /* Button Tools (Dark Mode): Deep dark emerald base with bright mint glow */
  --btn-pastel-green-bg: linear-gradient(180deg, #059669 0%, #022c22 100%);
  --btn-pastel-green-border: #34d399;
  --btn-pastel-green-text: #ffffff;
  --btn-pastel-green-hover-bg: linear-gradient(
    180deg,
    #10b981 0%,
    #064e3b 100%
  );
  --btn-pastel-green-hover-border: #6ee7b7;
  --btn-pastel-green-hover-text: #ffffff;
  --btn-pastel-green-shadow:
    0 2px 8px rgba(2, 44, 34, 0.6), 0 0 12px rgba(52, 211, 153, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-pastel-green-hover-shadow:
    0 4px 16px rgba(52, 211, 153, 0.5), 0 0 20px rgba(16, 185, 129, 0.35);

  /* Button Reset (Dark Mode): Deep dark ruby base with bright rose glow */
  --btn-pastel-red-bg: linear-gradient(180deg, #e11d48 0%, #4c0519 100%);
  --btn-pastel-red-border: #fb7185;
  --btn-pastel-red-text: #ffffff;
  --btn-pastel-red-hover-bg: linear-gradient(180deg, #f43f5e 0%, #881337 100%);
  --btn-pastel-red-hover-border: #fda4af;
  --btn-pastel-red-hover-text: #ffffff;
  --btn-pastel-red-shadow:
    0 2px 8px rgba(76, 5, 25, 0.6), 0 0 12px rgba(251, 113, 133, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-pastel-red-hover-shadow:
    0 4px 16px rgba(251, 113, 133, 0.5), 0 0 20px rgba(244, 63, 94, 0.35);
}

/* ─── Reset / Base ──────────────────────────────────────── */
html {
  font-size: 15px;
  height: 100%;
}

html,
body,
table,
input,
select,
button {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--form-font-size);
  line-height: 1.4;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.table > :not(caption) > * > * {
  background-color: unset;
}

/* ─── Page Container ─────────────────────────────────────── */
.container-xxl {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  box-sizing: border-box;
}

@media (min-width: 2560px) {
  .container-xxl {
    max-width: 2400px;
  }
}

/* ─── Application Header ─────────────────────────────────── */
#app_header {
  margin-top: 0.15rem;
  margin-bottom: 1.15rem !important;
}

/* ─── Navigation Icons ───────────────────────────────────── */
#navigation {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

#navigation a,
#navigation button {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#navigation svg {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
}

/* ─── Theme Toggle Button (ns1.orion.net.id style) ───────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--glass-border, rgba(56, 189, 248, 0.25));
  background: var(--card-bg, rgba(15, 23, 42, 0.75));
  box-shadow: var(--card-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
  cursor: pointer;
  color: var(--accent-from, #38bdf8);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0;
  margin-right: 0.15rem;
}

.theme-toggle i {
  font-size: 1.15rem;
  line-height: 1;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s ease;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-from, #38bdf8);
  outline-offset: 2px;
}

.theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--accent-from, #38bdf8);
  color: var(--accent-from, #38bdf8);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.theme-toggle:hover i {
  transform: rotate(18deg);
}

.theme-toggle:active {
  transform: scale(0.94);
}

[data-bs-theme="light"] .theme-toggle,
[data-theme="light"] .theme-toggle {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="light"] .theme-toggle:hover,
[data-theme="light"] .theme-toggle:hover {
  border-color: #0284c7;
  color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

/* ─── Navigation Action Buttons ──────────────────────────── */
.nav-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--glass-border, rgba(56, 189, 248, 0.25));
  background: var(--card-bg, rgba(15, 23, 42, 0.75));
  box-shadow: var(--card-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  color: #334155;
  text-decoration: none;
  font-size: 1.15rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0;
  cursor: pointer;
}

.nav-action-btn i {
  font-size: 1.15rem;
  line-height: 1;
  transition:
    transform 0.25s ease,
    color 0.2s ease;
}

.nav-action-btn:hover,
.nav-action-btn:focus-visible {
  color: #0284c7;
  border-color: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  outline: none;
}

.nav-action-btn:hover i {
  transform: scale(1.15);
}

[data-bs-theme="light"] .nav-action-btn,
[data-theme="light"] .nav-action-btn {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="light"] .nav-action-btn:hover,
[data-theme="light"] .nav-action-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

[data-bs-theme="dark"] .nav-action-btn,
[data-theme="dark"] .nav-action-btn {
  color: #f8fafc;
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(15, 23, 42, 0.8);
}

[data-bs-theme="dark"] .nav-action-btn:hover,
[data-bs-theme="dark"] .nav-action-btn:focus-visible,
[data-theme="dark"] .nav-action-btn:hover,
[data-theme="dark"] .nav-action-btn:focus-visible {
  color: #38bdf8;
  border-color: #38bdf8;
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}

/* ─── Page Heading & Title Typography ────────────────────── */
h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.app-title {
  font-size: clamp(1.15rem, 1.2vw + 0.5rem, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
  color: var(--text-primary);
}

.app-title i {
  font-size: clamp(1.05rem, 1.1vw + 0.45rem, 1.4rem);
  filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3));
}

.app-title-text {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fork-badge {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800 !important;
  vertical-align: middle;
  padding: 0.2rem 0.55rem !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.fork-badge:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.5);
}

.app-title-wrapper {
  display: flex;
  flex-direction: column;
}

.app-subtitle-author {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-family:
    "Space Grotesk",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: clamp(0.62rem, 0.5vw + 0.45rem, 0.72rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.app-subtitle-author-prefix {
  font-weight: 700;
  color: #334155;
  opacity: 1;
}

[data-bs-theme="dark"] .app-subtitle-author-prefix,
[data-theme="dark"] .app-subtitle-author-prefix {
  color: #94a3b8;
}

.app-subtitle-author-name {
  font-weight: 800;
  color: var(--primary, #0ea5e9);
  text-decoration: none;
  letter-spacing: 0.09em;
  transition: all 0.2s ease;
}

.app-subtitle-author-name:hover {
  color: #38bdf8;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
}



/* ─── Alert Banner ───────────────────────────────────────── */
.alert {
  clear: both;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
  position: relative;
  z-index: 1;
}

.alert p {
  margin-bottom: 0.2rem;
}

/* ─── IP Version Toolbar Spacing ─────────────────────────── */
#ip_version_toolbar {
  margin-top: 0.15rem;
  margin-bottom: 0.4rem;
}

#ip_version_toolbar fieldset.btn-group {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
}

#ip_version_toolbar .btn-group .btn {
  padding: 0.2rem 0.65rem;
  font-size: var(--btn-font-size);
  font-weight: 600;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

#ip_version_toolbar .btn-group .btn:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-border-radius-sm, 0.25rem);
  border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem);
}

#ip_version_toolbar .btn-group .btn:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-border-radius-sm, 0.25rem);
  border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem);
  margin-left: -1px;
}

#ip_version_toolbar .btn-group .btn.active {
  background-color: #0d6efd;
  color: #ffffff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.12rem rgba(13, 110, 253, 0.25);
}

#ipv4_tier_info,
#ipv6_tier_info {
  font-size: 0.78rem;
  color: #475569;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(248, 250, 252, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 0.65rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#ipv4_tier_info.d-none,
#ipv6_tier_info.d-none {
  display: none !important;
}

#ipv4_tier_info .badge,
#ipv6_tier_info .badge {
  font-size: 0.72rem;
  padding: 0.3em 0.6em;
  border-radius: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2);
}

/* RFC 1918 Private Block Quick Chips */
.rfc1918-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.16rem 0.48rem;
  border-radius: 0.4rem !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(2, 132, 199, 0.45) !important;
  background: rgba(240, 249, 255, 0.95) !important;
  color: #0284c7 !important;
  cursor: pointer;
}

.rfc1918-chip:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.rfc1918-chip.active {
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow:
    0 0 0 2px rgba(2, 132, 199, 0.25),
    0 2px 6px rgba(2, 132, 199, 0.35) !important;
}

#rfc1918_indicator {
  font-size: 0.68rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

#ipv4_tier_info .btn-group,
#ipv6_tier_info .btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
}

#ipv4_tier_info .btn-group .btn,
#ipv6_tier_info .btn-group .btn {
  font-size: 0.72rem;
  padding: 0.16rem 0.42rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  border-radius: 0.35rem !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  background: #ffffff !important;
  color: #334155 !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#ipv4_tier_info .btn-group .btn:hover,
#ipv6_tier_info .btn-group .btn:hover {
  background-color: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
}

#ipv4_tier_info .btn-group .btn.active,
#ipv6_tier_info .btn-group .btn.active {
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

#ipv4_tier_info .btn-group .btn.active:hover,
#ipv6_tier_info .btn-group .btn.active:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8) !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.45) !important;
}

/* ─── Input Form Row ─────────────────────────────────────── */
#input_form {
  row-gap: 0.35rem !important;
  column-gap: 0.35rem !important;
  margin-bottom: 0.5rem !important;
}

#input_form .form-label {
  font-size: 0.75rem;
  margin-bottom: 0.1rem;
}

#input_form .form-control {
  font-size: var(--form-font-size);
  padding: 0.25rem 0.4rem;
  height: auto;
}

#input_form #network {
  flex-grow: 0;
  flex-basis: 10rem;
}

#input_form #netsize {
  flex-grow: 0;
  flex-basis: 3.8rem;
}

.btn {
  font-size: var(--btn-font-size);
  padding: 0.25rem 0.6rem;
}

/* ─── Bottom Navigation Bar ──────────────────────────────── */
#bottom_nav {
  min-height: 1.75rem;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
  margin-top: 0.25rem;
}

#whats_new {
  cursor: pointer !important;
  text-align: right;
  margin-left: auto;
  font-size: 0.78rem;
}

#whats_new a {
  text-align: right;
  text-decoration: none;
  border-bottom: 1px var(--bs-success) dotted;
}

#copy_url {
  cursor: pointer !important;
  text-align: center;
  font-size: 0.8rem;
}

#copy_url span {
  text-align: center;
}

/* ─── Color Palette ──────────────────────────────────────── */
#color_palette {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

#color_palette button {
  display: inline-block;
  height: 1.6rem;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
}

#color_palette button[id^="palette_picker_"] {
  width: 1.6rem;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  border-radius: 0.2rem;
  transition:
    transform 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

#color_palette button[id^="palette_picker_"]:hover,
#color_palette button[id^="palette_picker_"]:focus-visible {
  transform: scale(1.25);
  box-shadow:
    0 0 0 2.5px #0d6efd,
    0 3px 6px rgba(0, 0, 0, 0.25) !important;
  outline: none;
  z-index: 3;
  position: relative;
}

#color_palette button[id^="palette_picker_"].active,
#color_palette button[id^="palette_picker_"].selected-color {
  transform: scale(1.22);
  box-shadow:
    0 0 0 3px #0d6efd,
    0 3px 8px rgba(13, 110, 253, 0.45) !important;
  outline: none;
  z-index: 2;
  position: relative;
}

#color_palette #palette_picker_1 {
  background-color: var(--subpal-1-1);
}
#color_palette #palette_picker_2 {
  background-color: var(--subpal-1-2);
}
#color_palette #palette_picker_3 {
  background-color: var(--subpal-1-3);
}
#color_palette #palette_picker_4 {
  background-color: var(--subpal-1-4);
}
#color_palette #palette_picker_5 {
  background-color: var(--subpal-1-5);
}
#color_palette #palette_picker_6 {
  background-color: var(--subpal-1-6);
}
#color_palette #palette_picker_7 {
  background-color: var(--subpal-1-7);
}
#color_palette #palette_picker_8 {
  background-color: var(--subpal-1-8);
}
#color_palette #palette_picker_9 {
  background-color: var(--subpal-1-9);
}
#color_palette #palette_picker_10 {
  background-color: var(--subpal-1-10);
}

/* ─── Bottom Nav Button ──────────────────────────────────── */
.bottom-nav-btn {
  display: inline-block;
  padding: 0;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  transition: color 0.15s ease-in-out;
}

.bottom-nav-btn:hover {
  color: #0d6efd;
}

.bottom-nav-btn span {
  border-bottom: 1px dotted currentColor;
  transition:
    border-bottom-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.bottom-nav-btn:hover span {
  border-bottom: 1px solid #0d6efd;
  color: #0d6efd;
}

/* ─── Main Calc Table ────────────────────────────────────── */
#calc {
  vertical-align: middle;
  font-size: var(--table-font-size);
}

/* Responsive horizontal scroll wrapper with touch momentum */
.table-responsive {
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
}

#calc > tbody > tr > td,
#calc > tbody > tr > th,
#calc > tfoot > tr > td,
#calc > tfoot > tr > th,
#calc > thead > tr > td,
#calc > thead > tr > th {
  padding: var(--cell-pad);
  padding-top: var(--cell-pad);
  padding-bottom: var(--cell-pad);
}

#calc span.split {
  color: var(--split-background);
}

#calc span.join {
  color: var(--join-background);
}

#calc tbody tr {
  transition: background-color 0.12s ease-in-out;
}

#calc tbody tr:hover > td:not(.split):not(.join) {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.08);
}

#calc tbody tr:hover > td.row_address {
  font-weight: 600;
  color: #0b5ed7;
}

#calc td.split {
  background-color: var(--split-background);
  color: var(--split-foreground);
  cursor: pointer;
  min-width: 2rem;
  width: 1%;
  font-size: 0.78rem;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

#calc td.split:not(.split-disabled):hover {
  background-color: #e0684c;
  filter: brightness(0.92);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

#calc td.join {
  background-color: var(--join-background);
  color: var(--join-foreground);
  cursor: pointer;
  min-width: 2rem;
  width: 1%;
  font-size: 0.78rem;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

#calc td.join:hover {
  background-color: #559ec8;
  filter: brightness(0.92);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

#calc td.split,
#calc td.join {
  padding: 0;
}

#calc td.split span,
#calc td.join span {
  padding-right: 0.3rem;
}

#calc td.split.split-disabled {
  background-color: #f8d7da;
  color: #842029;
  cursor: not-allowed;
  opacity: 0.8;
}

#calc td.split.split-disabled:hover {
  background-color: #f5c2c7;
}

/* ─── IPv6 Scoped Table Rules ────────────────────────────── */
#calc.ipv6-mode {
  table-layout: auto;
}

#calc.ipv6-mode td.row_address,
#calc.ipv6-mode td.row_range,
#calc.ipv6-mode td.row_usable {
  font-size: 0.74rem;
  word-break: break-all;
}

#calc.ipv6-mode td.row_hosts {
  white-space: nowrap;
  font-size: 0.76rem;
}

#calc .note {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

#calc .note label,
#calc .note input {
  width: 100%;
}

#calc .row_address {
  white-space: nowrap;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 0.78rem;
}

#calc .row_range {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 0.78rem;
}

#calc .row_usable {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 0.78rem;
}

#calc .row_hosts {
  width: 1%;
  white-space: nowrap;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 0.78rem;
}

#calc .note input {
  border: none !important;
  border-color: transparent !important;
  background-color: transparent;
  font-size: 0.78rem;
}

/* ─── Modal Styles ───────────────────────────────────────── */
#notifyModal .modal-content {
  background-color: var(--bs-alert-bg);
}

#importExportArea {
  height: 420px;
}

/* ─── Misc ───────────────────────────────────────────────── */
.reserved-info-link {
  color: #000000;
  border-bottom: 1px dotted #000000;
  text-decoration: dotted;
}

.rotate {
  vertical-align: middle;
  text-align: end;
}

.rotate span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  padding-top: 0.2rem;
}

/* ─── Dropdown Menu Hover & Active State ──────────────────── */
.dropdown-menu .dropdown-item {
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out,
    padding-left 0.15s ease-in-out;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
  padding-left: 1.15rem;
}

.dropdown-menu .dropdown-item.active {
  background-color: #0d6efd;
  color: #ffffff;
}

.dropdown-menu .dropdown-item.active:hover {
  background-color: #0b5ed7;
  color: #ffffff;
}

/* ─── Text Selection (Sorot Teks) ────────────────────────── */
::selection {
  background-color: rgba(13, 110, 253, 0.22);
  color: inherit;
}

::-moz-selection {
  background-color: rgba(13, 110, 253, 0.22);
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ─── Responsive Breakpoints ─────────────────────────────── */

/* ── Mobile Portrait  ≤ 575px ─── */
@media (max-width: 575.98px) {
  :root {
    --nav-icon-size: 28px;
    --table-font-size: 0.72rem;
    --cell-pad: 0.15rem;
  }

  html {
    font-size: 14px;
  }

  #app_header {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .app-header-left {
    min-width: 0;
    max-width: 100%;
  }

  h1 {
    font-size: 1.05rem;
    padding-right: 0;
    flex-wrap: wrap;
  }

  #navigation {
    margin-left: auto;
  }

  .alert {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }

  /* Fluid wrapping for mobile without clipping on Xiaomi/Redmi/POCO */
  #input_form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
  }

  #input_form > div:first-child {
    flex: 1 1 calc(100% - 95px);
    min-width: 130px;
    max-width: 100%;
  }

  #input_form > div.col-auto:nth-child(2) {
    flex: 0 0 auto;
    padding-bottom: 0.35rem;
  }

  #input_form > div:nth-child(3) {
    flex: 0 0 68px;
    width: 68px;
    min-width: 55px;
  }

  #input_form > div:last-child,
  #input_form .col-lg-auto.col-md-auto.col-auto {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 0.25rem;
  }

  .btn-toolbar-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    width: 100%;
  }

  /* Preset toolbars on Xiaomi/Redmi/POCO narrow screens */
  #ipv4_tier_info,
  #ipv6_tier_info {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
  }

  .rfc1918-preset-container {
    flex-shrink: 0;
  }

  #ipv4_tier_info .btn-group,
  #ipv6_tier_info .btn-group {
    flex-shrink: 0;
  }

  #input_form .col-auto {
    padding-bottom: 0.2rem;
  }

  .btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
  }

  #bottom_nav {
    font-size: 0.72rem;
    gap: 0.25rem;
  }

  .bottom-nav-btn,
  #copy_url,
  #whats_new {
    font-size: 0.72rem;
  }

  #color_palette button {
    height: 1.35rem;
    font-size: 0.72rem;
  }

  #color_palette button[id^="palette_picker_"] {
    width: 1.35rem;
  }

  #importExportArea {
    height: 300px;
  }

  /* Never hide columns on mobile/Xiaomi/POCO - smooth horizontal scroll */
  .table-responsive {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    width: 100%;
    margin-bottom: 0.75rem;
  }

  #calc td,
  #calc th {
    white-space: nowrap;
  }

  #calc td.note {
    white-space: normal;
    min-width: 110px;
  }

  #calc .row_address,
  #calc .row_hosts,
  #calc .note {
    font-size: 0.7rem;
  }
}

/* ── Mobile Landscape / Small Tablet  576–767px ─── */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --nav-icon-size: 30px;
    --table-font-size: 0.75rem;
    --cell-pad: 0.18rem;
  }

  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.15rem;
    padding-right: 0;
  }
}

/* ── Tablet Portrait  768–991px ─── */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --nav-icon-size: 32px;
    --table-font-size: 0.78rem;
    --cell-pad: 0.2rem;
  }

  html {
    font-size: 14.5px;
  }

  h1 {
    font-size: 1.2rem;
  }
}

/* ── Tablet Landscape / Small Desktop  992–1199px ─── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --nav-icon-size: 34px;
    --table-font-size: 0.8rem;
  }

  html {
    font-size: 14.5px;
  }

  h1 {
    font-size: 1.25rem;
  }
}

/* ── Standard Desktop  1200–1919px ─── */
@media (min-width: 1200px) and (max-width: 1919.98px) {
  html {
    font-size: 15px;
  }
}

/* ── Full HD+  1920–2559px ─── */
@media (min-width: 1920px) and (max-width: 2559.98px) {
  html {
    font-size: 15.5px;
  }

  :root {
    --nav-icon-size: 38px;
  }

  .container-xxl {
    max-width: 1800px;
  }
}

/* ── 2K / QHD  2560px+ ─── */
@media (min-width: 2560px) {
  html {
    font-size: 16px;
  }

  :root {
    --nav-icon-size: 40px;
    --table-font-size: 0.85rem;
  }

  .container-xxl {
    max-width: 2400px;
  }
}

/* ─── Touch Device Enhancements ──────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap target size on touch devices */
  #calc td.split,
  #calc td.join {
    min-width: 2.5rem;
  }

  .btn {
    min-height: 36px;
  }

  #color_palette button[id^="palette_picker_"] {
    min-width: 28px;
    min-height: 28px;
  }
}

/* ─── Footer Styling ──────────────────────────────────────── */
#app_footer {
  margin-top: auto !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: opacity 0.2s ease-in-out;
}

#app_footer .footer-btn {
  font-size: 0.775rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

#app_footer .footer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

#app_footer .footer-link {
  font-size: 0.775rem;
  transition: color 0.15s ease-in-out;
}

#app_footer .footer-link:hover {
  color: #0d6efd !important;
  text-decoration: underline !important;
}

#app_footer .badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ─── FAQ Accordion ───────────────────────────────────────── */
#faqAccordion .accordion-item {
  border-color: #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

#faqAccordion .accordion-button {
  font-size: 0.95rem;
  padding: 0.85rem 1.15rem;
  background-color: #fcfdfe;
  color: #212529;
  font-weight: 500;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

#faqAccordion .accordion-button:not(.collapsed) {
  background-color: #e7f1ff;
  color: #0c63e4;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

#faqAccordion .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-color: #86b7fe;
}

#faqAccordion .accordion-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #2c3e50;
  padding: 1.15rem 1.25rem;
  background-color: #ffffff;
}

#faqAccordion .accordion-body code {
  color: #d63384;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

#faqAccordion .table {
  font-size: 0.825rem;
}

/* ─── Print ───────────────────────────────────────────────── */
@media print {
  #navigation,
  #bottom_nav,
  #app_footer,
  #input_form,
  .alert,
  .btn,
  .dropdown {
    display: none !important;
  }

  .table-responsive {
    overflow: visible;
  }

  #calc {
    font-size: 0.7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dual Theme System:
   - Light Mode: Original script appearance (clean, crisp, original white background and colors)
   - Dark Mode: ns1.orion.net.id inspired aesthetic (Obsidian/Slate Blue, glowing cyan, glassmorphism, razor-sharp text)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Explicit Light Mode & High-Contrast Sharp Typography ─── */
[data-bs-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --split-foreground: #000000;
  --split-background: #f27f64;
  --join-foreground: #000000;
  --join-background: #6fb0d6;
  --text-primary: #0f172a;
  --text-secondary: #334155;
}

[data-bs-theme="light"] html,
[data-bs-theme="light"] body,
[data-theme="light"] html,
[data-theme="light"] body {
  background: #ffffff !important;
  color: #0f172a !important;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

[data-bs-theme="light"] *,
[data-theme="light"] * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-bs-theme="light"] #app_header h1,
[data-theme="light"] #app_header h1 {
  color: #0f172a !important;
}

[data-bs-theme="light"] #calc th,
[data-theme="light"] #calc th {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-bs-theme="light"] #calc td,
[data-theme="light"] #calc td {
  color: #1e293b !important;
}

[data-bs-theme="light"] .form-label,
[data-theme="light"] .form-label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-bs-theme="light"] #app_footer,
[data-theme="light"] #app_footer {
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1e293b !important;
}

[data-bs-theme="light"] #app_footer p,
[data-theme="light"] #app_footer p,
[data-bs-theme="light"] #app_footer .text-secondary,
[data-theme="light"] #app_footer .text-secondary,
[data-bs-theme="light"] #app_footer .text-muted,
[data-theme="light"] #app_footer .text-muted {
  color: #334155 !important;
  font-weight: 500 !important;
}

[data-bs-theme="light"] #app_footer .app-footer-title,
[data-theme="light"] #app_footer .app-footer-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-bs-theme="light"] #app_footer span,
[data-theme="light"] #app_footer span {
  color: #334155 !important;
}

[data-bs-theme="light"] #app_footer .app-footer-title a,
[data-theme="light"] #app_footer .app-footer-title a {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-bs-theme="light"] #app_footer .app-footer-title a:hover,
[data-theme="light"] #app_footer .app-footer-title a:hover {
  color: #0369a1 !important;
  text-decoration: underline !important;
}

[data-bs-theme="light"] #app_footer .footer-link,
[data-theme="light"] #app_footer .footer-link {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-bs-theme="light"] #app_footer .footer-link:hover,
[data-theme="light"] #app_footer .footer-link:hover {
  color: #0284c7 !important;
  text-decoration: underline !important;
}

/* Light mode social pill buttons */
[data-bs-theme="light"] .footer-social-btn,
[data-theme="light"] .footer-social-btn,
[data-bs-theme="light"] #app_footer .footer-btn,
[data-theme="light"] #app_footer .footer-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="light"] .footer-social-btn span,
[data-theme="light"] .footer-social-btn span {
  color: inherit;
}

[data-bs-theme="light"] .footer-social-btn:hover,
[data-theme="light"] .footer-social-btn:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Light mode uniform brand hover accents */
[data-bs-theme="light"] .footer-social-btn.btn-website:hover,
[data-theme="light"] .footer-social-btn.btn-website:hover {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-github:hover,
[data-theme="light"] .footer-social-btn.btn-github:hover {
  color: #0f172a !important;
  border-color: #0f172a !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-x:hover,
[data-theme="light"] .footer-social-btn.btn-x:hover {
  color: #000000 !important;
  border-color: #000000 !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-telegram:hover,
[data-theme="light"] .footer-social-btn.btn-telegram:hover {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-whatsapp:hover,
[data-theme="light"] .footer-social-btn.btn-whatsapp:hover {
  color: #16a34a !important;
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-email:hover,
[data-theme="light"] .footer-social-btn.btn-email:hover {
  color: #7c3aed !important;
  border-color: #7c3aed !important;
  background: #f5f3ff !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-paypal:hover,
[data-theme="light"] .footer-social-btn.btn-paypal:hover {
  color: #0070ba !important;
  border-color: #0070ba !important;
  background: #f0f9ff !important;
  box-shadow: 0 4px 12px rgba(0, 112, 186, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-qris:hover,
[data-theme="light"] .footer-social-btn.btn-qris:hover {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22) !important;
}

[data-bs-theme="light"] .footer-social-btn.btn-counter:hover,
[data-theme="light"] .footer-social-btn.btn-counter:hover {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22) !important;
}

/* Light mode bottom nav text readability */
[data-bs-theme="light"] .bottom-nav-btn,
[data-theme="light"] .bottom-nav-btn,
[data-bs-theme="light"] #copy_url,
[data-theme="light"] #copy_url {
  color: #0284c7 !important;
  font-weight: 600 !important;
}

[data-bs-theme="light"] .bottom-nav-btn span,
[data-theme="light"] .bottom-nav-btn span {
  color: #0284c7 !important;
  border-bottom: 1px dotted #0284c7 !important;
}

[data-bs-theme="light"] .bottom-nav-btn:hover,
[data-theme="light"] .bottom-nav-btn:hover,
[data-bs-theme="light"] .bottom-nav-btn:hover span,
[data-theme="light"] .bottom-nav-btn:hover span {
  color: #0369a1 !important;
  border-bottom-color: #0369a1 !important;
}

[data-bs-theme="light"] #whats_new a,
[data-theme="light"] #whats_new a {
  color: #15803d !important;
  font-weight: 600 !important;
  border-bottom: 1px dotted #15803d !important;
}

[data-bs-theme="light"] #whats_new a:hover,
[data-theme="light"] #whats_new a:hover {
  color: #166534 !important;
  border-bottom: 1px solid #166534 !important;
}

/* ─── Dark Mode Support (ns1.orion.net.id Theme System) ──────────── */
[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] body {
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(56, 189, 248, 0.18),
      transparent 50%
    ),
    linear-gradient(180deg, #0f172a, #020617) fixed !important;
  color: #f8fafc !important;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

/* Ensure all elements in dark mode have crisp antialiasing without blur */
[data-bs-theme="dark"] *,
[data-theme="dark"] * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header & Navigation in Dark Mode */
[data-bs-theme="dark"] #app_header h1,
[data-theme="dark"] #app_header h1 {
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

[data-bs-theme="dark"] #navigation .text-dark,
[data-theme="dark"] #navigation .text-dark {
  color: #f8fafc !important;
}

[data-bs-theme="dark"] #navigation a:hover,
[data-bs-theme="dark"] #navigation button:hover,
[data-theme="dark"] #navigation a:hover,
[data-theme="dark"] #navigation button:hover {
  color: #38bdf8 !important;
  transform: scale(1.06);
}

/* Alert Banner in Dark Mode */
[data-bs-theme="dark"] .alert-primary,
[data-theme="dark"] .alert-primary {
  background: rgba(14, 165, 233, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #e0f2fe !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  font-weight: 500;
}

[data-bs-theme="dark"] .alert .btn-close,
[data-theme="dark"] .alert .btn-close {
  filter: invert(1) brightness(1.8);
}

/* IP Version Switcher Toolbar */
[data-bs-theme="dark"] #ip_version_toolbar .btn-group .btn,
[data-theme="dark"] #ip_version_toolbar .btn-group .btn {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] #ip_version_toolbar .btn-group .btn:hover,
[data-theme="dark"] #ip_version_toolbar .btn-group .btn:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] #ip_version_toolbar .btn-group .btn.active,
[data-theme="dark"] #ip_version_toolbar .btn-group .btn.active {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  color: #020617 !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5) !important;
}

/* Tier Info & Badges - High contrast & crisp */
[data-bs-theme="dark"] #ipv4_tier_info,
[data-bs-theme="dark"] #ipv6_tier_info,
[data-theme="dark"] #ipv4_tier_info,
[data-theme="dark"] #ipv6_tier_info {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] #ipv4_tier_info .badge,
[data-bs-theme="dark"] #ipv6_tier_info .badge,
[data-theme="dark"] #ipv4_tier_info .badge,
[data-theme="dark"] #ipv6_tier_info .badge {
  color: #ffffff !important;
  background-color: #0284c7 !important;
  font-weight: 700;
}

[data-bs-theme="dark"] .rfc1918-chip,
[data-theme="dark"] .rfc1918-chip {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
}

[data-bs-theme="dark"] .rfc1918-chip:hover,
[data-theme="dark"] .rfc1918-chip:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

[data-bs-theme="dark"] .rfc1918-chip.active,
[data-theme="dark"] .rfc1918-chip.active {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  color: #020617 !important;
  border-color: #38bdf8 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55) !important;
}

[data-bs-theme="dark"] #ipv4_tier_info .btn-group .btn,
[data-bs-theme="dark"] #ipv6_tier_info .btn-group .btn,
[data-theme="dark"] #ipv4_tier_info .btn-group .btn,
[data-theme="dark"] #ipv6_tier_info .btn-group .btn {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] #ipv4_tier_info .btn-group .btn:hover,
[data-bs-theme="dark"] #ipv6_tier_info .btn-group .btn:hover,
[data-theme="dark"] #ipv4_tier_info .btn-group .btn:hover,
[data-theme="dark"] #ipv6_tier_info .btn-group .btn:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

[data-bs-theme="dark"] #ipv4_tier_info .btn-group .btn.active,
[data-bs-theme="dark"] #ipv6_tier_info .btn-group .btn.active,
[data-theme="dark"] #ipv4_tier_info .btn-group .btn.active,
[data-theme="dark"] #ipv6_tier_info .btn-group .btn.active {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  color: #020617 !important;
  border-color: #38bdf8 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
}

/* Form Inputs & Buttons - Sharp, high contrast */
[data-bs-theme="dark"] #input_form .form-label,
[data-theme="dark"] #input_form .form-label {
  color: #f8fafc !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

[data-bs-theme="dark"] #input_form .form-control,
[data-theme="dark"] #input_form .form-control {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  border-radius: 8px;
  transition: all 0.2s ease;
}

[data-bs-theme="dark"] #input_form .form-control:focus,
[data-theme="dark"] #input_form .form-control:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3) !important;
  background: #020617 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] #input_form .form-control::placeholder,
[data-theme="dark"] #input_form .form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 0.85;
}

[data-bs-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary {
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #f1f5f9 !important;
  background: rgba(30, 41, 59, 0.75) !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.25) !important;
}

/* Dropdown Menus */
[data-bs-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
  background: rgba(15, 23, 42, 0.98) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.75);
  color: #f8fafc !important;
  border-radius: 12px;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: #f1f5f9 !important;
  font-weight: 500;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus,
[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.active,
[data-theme="dark"] .dropdown-menu .dropdown-item.active {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  color: #020617 !important;
  font-weight: 700 !important;
}

/* Bottom Nav Links */
[data-bs-theme="dark"] .bottom-nav-btn,
[data-theme="dark"] .bottom-nav-btn,
[data-bs-theme="dark"] #copy_url,
[data-theme="dark"] #copy_url,
[data-bs-theme="dark"] #whats_new,
[data-theme="dark"] #whats_new {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] .bottom-nav-btn:hover,
[data-theme="dark"] .bottom-nav-btn:hover,
[data-bs-theme="dark"] #copy_url:hover,
[data-theme="dark"] #copy_url:hover {
  color: #38bdf8 !important;
}

[data-bs-theme="dark"] .bottom-nav-btn span,
[data-theme="dark"] .bottom-nav-btn span {
  border-bottom: 1px dashed rgba(56, 189, 248, 0.5) !important;
  color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .bottom-nav-btn:hover span,
[data-theme="dark"] .bottom-nav-btn:hover span {
  border-bottom: 1px solid #38bdf8 !important;
  color: #38bdf8 !important;
}

[data-bs-theme="dark"] .reserved-info-link,
[data-theme="dark"] .reserved-info-link {
  color: #38bdf8 !important;
  border-bottom: 1px dotted #38bdf8 !important;
}

/* Palette Picker in Dark Mode */
[data-bs-theme="dark"] #color_palette button[id^="palette_picker_"],
[data-theme="dark"] #color_palette button[id^="palette_picker_"] {
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] #color_palette button[id^="palette_picker_"]:hover,
[data-theme="dark"] #color_palette button[id^="palette_picker_"]:hover {
  border-color: #38bdf8 !important;
  box-shadow:
    0 0 0 2.5px #38bdf8,
    0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] #color_palette button[id^="palette_picker_"].active,
[data-bs-theme="dark"] #color_palette button[id^="palette_picker_"].selected-color,
[data-theme="dark"] #color_palette button[id^="palette_picker_"].active,
[data-theme="dark"] #color_palette button[id^="palette_picker_"].selected-color {
  border-color: #38bdf8 !important;
  box-shadow:
    0 0 0 3px #38bdf8,
    0 3px 10px rgba(56, 189, 248, 0.55) !important;
}

[data-bs-theme="dark"] .bottom-nav-btn,
[data-theme="dark"] .bottom-nav-btn {
  color: #38bdf8 !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .bottom-nav-btn:hover,
[data-theme="dark"] .bottom-nav-btn:hover {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

/* Subnet Calculator Table (#calc) - Maximum clarity and sharpness */
[data-bs-theme="dark"] #calc,
[data-theme="dark"] #calc {
  color: #f8fafc !important;
  border-color: rgba(56, 189, 248, 0.2) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

[data-bs-theme="dark"] #calc thead th,
[data-bs-theme="dark"] #calc thead td,
[data-bs-theme="dark"] #calc tfoot th,
[data-bs-theme="dark"] #calc tfoot td,
[data-theme="dark"] #calc thead th,
[data-theme="dark"] #calc thead td,
[data-theme="dark"] #calc tfoot th,
[data-theme="dark"] #calc tfoot td {
  background: rgba(15, 23, 42, 0.95) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  letter-spacing: 0.01em;
}

[data-bs-theme="dark"] #calc tbody tr td,
[data-bs-theme="dark"] #calc tbody tr th,
[data-theme="dark"] #calc tbody tr td,
[data-theme="dark"] #calc tbody tr th {
  border-color: rgba(56, 189, 248, 0.15) !important;
  color: #f8fafc !important;
}

/* Subnet Address - Crisp Cyan Mono */
[data-bs-theme="dark"] #calc .row_address,
[data-theme="dark"] #calc .row_address {
  color: #38bdf8 !important;
  font-weight: 600 !important;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: 0.01em;
}

/* Range & Usable Columns */
[data-bs-theme="dark"] #calc .row_range,
[data-bs-theme="dark"] #calc .row_usable,
[data-theme="dark"] #calc .row_range,
[data-theme="dark"] #calc .row_usable {
  color: #f8fafc !important;
  font-weight: 500 !important;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Hosts Column */
[data-bs-theme="dark"] #calc .row_hosts,
[data-theme="dark"] #calc .row_hosts {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

/* Table Notes Editable Input */
[data-bs-theme="dark"] #calc .note input,
[data-theme="dark"] #calc .note input {
  color: #ffffff !important;
  font-weight: 500 !important;
  background: transparent !important;
}

[data-bs-theme="dark"] #calc .note input::placeholder,
[data-theme="dark"] #calc .note input::placeholder {
  color: #94a3b8 !important;
  opacity: 0.85;
}

/* Split Button - Vibrant Rose */
[data-bs-theme="dark"] #calc td.split,
[data-theme="dark"] #calc td.split {
  background-color: #fb7185 !important;
  color: #020617 !important;
  font-weight: 800 !important;
  font-size: 0.8rem;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"] #calc td.split:not(.split-disabled):hover,
[data-theme="dark"] #calc td.split:not(.split-disabled):hover {
  background-color: #f43f5e !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.6) !important;
}

/* Disabled Split Button */
[data-bs-theme="dark"] #calc td.split.split-disabled,
[data-theme="dark"] #calc td.split.split-disabled {
  background-color: #1e293b !important;
  color: #64748b !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
  opacity: 0.55;
  cursor: not-allowed;
}

/* Join Button - Vibrant Sky Blue */
[data-bs-theme="dark"] #calc td.join,
[data-theme="dark"] #calc td.join {
  background-color: #38bdf8 !important;
  color: #020617 !important;
  font-weight: 800 !important;
  font-size: 0.8rem;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"] #calc td.join:hover,
[data-theme="dark"] #calc td.join:hover {
  background-color: #0ea5e9 !important;
  color: #020617 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6) !important;
}

/* Hover Row Highlight */
[data-bs-theme="dark"] #calc tbody tr:hover > td:not(.split):not(.join),
[data-theme="dark"] #calc tbody tr:hover > td:not(.split):not(.join) {
  box-shadow: inset 0 0 0 9999px rgba(56, 189, 248, 0.12) !important;
}

[data-bs-theme="dark"] #calc tbody tr:hover > td.row_address,
[data-theme="dark"] #calc tbody tr:hover > td.row_address {
  color: #7dd3fc !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

/* Subnet Row Dynamic Text & Input Contrast Overrides */
#calc tbody tr.has-light-bg td,
#calc tbody tr.has-light-bg th,
#calc tbody tr.has-light-bg .row_range,
#calc tbody tr.has-light-bg .row_usable,
#calc tbody tr.has-light-bg .row_hosts,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg td,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg th,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg .row_range,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg .row_usable,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg .row_hosts,
[data-theme="dark"] #calc tbody tr.has-light-bg td,
[data-theme="dark"] #calc tbody tr.has-light-bg th,
[data-theme="dark"] #calc tbody tr.has-light-bg .row_range,
[data-theme="dark"] #calc tbody tr.has-light-bg .row_usable,
[data-theme="dark"] #calc tbody tr.has-light-bg .row_hosts {
  color: #0f172a !important;
}

#calc tbody tr.has-light-bg .row_address,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg .row_address,
[data-theme="dark"] #calc tbody tr.has-light-bg .row_address {
  color: #0369a1 !important;
  font-weight: 700 !important;
}

#calc tbody tr.has-light-bg .note input,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg .note input,
[data-theme="dark"] #calc tbody tr.has-light-bg .note input {
  color: #0f172a !important;
}

#calc tbody tr.has-light-bg .note input::placeholder,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg .note input::placeholder,
[data-theme="dark"] #calc tbody tr.has-light-bg .note input::placeholder {
  color: #64748b !important;
}

#calc tbody tr.has-light-bg:hover > td:not(.split):not(.join),
[data-bs-theme="dark"] #calc tbody tr.has-light-bg:hover > td:not(.split):not(.join),
[data-theme="dark"] #calc tbody tr.has-light-bg:hover > td:not(.split):not(.join) {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08) !important;
}

#calc tbody tr.has-light-bg:hover > td.row_address,
[data-bs-theme="dark"] #calc tbody tr.has-light-bg:hover > td.row_address,
[data-theme="dark"] #calc tbody tr.has-light-bg:hover > td.row_address {
  color: #0284c7 !important;
  text-shadow: none !important;
}

#calc tbody tr.has-dark-bg td,
#calc tbody tr.has-dark-bg th,
#calc tbody tr.has-dark-bg .row_range,
#calc tbody tr.has-dark-bg .row_usable,
#calc tbody tr.has-dark-bg .row_hosts,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg td,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg th,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg .row_range,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg .row_usable,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg .row_hosts,
[data-theme="dark"] #calc tbody tr.has-dark-bg td,
[data-theme="dark"] #calc tbody tr.has-dark-bg th,
[data-theme="dark"] #calc tbody tr.has-dark-bg .row_range,
[data-theme="dark"] #calc tbody tr.has-dark-bg .row_usable,
[data-theme="dark"] #calc tbody tr.has-dark-bg .row_hosts {
  color: #f8fafc !important;
}

#calc tbody tr.has-dark-bg .row_address,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg .row_address,
[data-theme="dark"] #calc tbody tr.has-dark-bg .row_address {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

#calc tbody tr.has-dark-bg .note input,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg .note input,
[data-theme="dark"] #calc tbody tr.has-dark-bg .note input {
  color: #f8fafc !important;
}

#calc tbody tr.has-dark-bg .note input::placeholder,
[data-bs-theme="dark"] #calc tbody tr.has-dark-bg .note input::placeholder,
[data-theme="dark"] #calc tbody tr.has-dark-bg .note input::placeholder {
  color: #94a3b8 !important;
}

/* Modals & FAQ Accordion */
[data-bs-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content {
  background: rgba(15, 23, 42, 0.98) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(56, 189, 248, 0.2) !important;
  color: #f8fafc !important;
  border-radius: 16px;
}

[data-bs-theme="dark"] .modal-title,
[data-theme="dark"] .modal-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

[data-bs-theme="dark"] .modal-body,
[data-theme="dark"] .modal-body {
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .modal-body p,
[data-bs-theme="dark"] .modal-body li,
[data-theme="dark"] .modal-body p,
[data-theme="dark"] .modal-body li {
  color: #e2e8f0 !important;
  line-height: 1.6;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: rgba(56, 189, 248, 0.25) !important;
}

[data-bs-theme="dark"] .modal .btn-close,
[data-theme="dark"] .modal .btn-close {
  filter: invert(1) brightness(1.8);
}

[data-bs-theme="dark"] #faqAccordion .accordion-item,
[data-theme="dark"] #faqAccordion .accordion-item {
  border-color: rgba(56, 189, 248, 0.25) !important;
  background: rgba(2, 6, 23, 0.5) !important;
}

[data-bs-theme="dark"] #faqAccordion .accordion-button,
[data-theme="dark"] #faqAccordion .accordion-button {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] #faqAccordion .accordion-button:not(.collapsed),
[data-theme="dark"] #faqAccordion .accordion-button:not(.collapsed) {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -1px 0 rgba(56, 189, 248, 0.25);
}

[data-bs-theme="dark"] #faqAccordion .accordion-body,
[data-theme="dark"] #faqAccordion .accordion-body {
  background: rgba(2, 6, 23, 0.6) !important;
  color: #f1f5f9 !important;
}

[data-bs-theme="dark"] #faqAccordion .accordion-body code,
[data-theme="dark"] #faqAccordion .accordion-body code {
  color: #38bdf8 !important;
  background: #020617 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

[data-bs-theme="dark"] #importExportArea,
[data-theme="dark"] #importExportArea {
  background: #020617 !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-weight: 500 !important;
}

/* ─── Parent Subnet Header (Issue #5) ───────────────────── */
.parent-header-row {
  background-color: rgba(241, 245, 249, 0.95) !important;
  font-weight: 600;
  border-top: 2px solid rgba(148, 163, 184, 0.45) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.parent-header-row td {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  vertical-align: middle;
}

.parent-header-row .badge {
  font-size: 0.7rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

[data-bs-theme="dark"] .parent-header-row,
[data-theme="dark"] .parent-header-row {
  background-color: rgba(30, 41, 59, 0.85) !important;
  border-top: 2px solid rgba(56, 189, 248, 0.35) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
  color: #94a3b8 !important;
}

/* ─── Modern Social Media & Contact Buttons (Unified) ──────── */
.footer-social-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: 100%;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  font-family: inherit;
  font-size: 0.775rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid rgba(203, 213, 225, 0.8);
  background: #ffffff;
  color: #334155;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  height: 32px;
  transform: translateZ(0);
}

.footer-social-btn i {
  color: #0284c7 !important;
  font-size: 0.95rem;
  transition:
    transform 0.22s ease,
    color 0.22s ease;
}

[data-bs-theme="dark"] .footer-social-btn i,
[data-theme="dark"] .footer-social-btn i {
  color: #38bdf8 !important;
}

.footer-social-btn:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.footer-social-btn:hover i {
  transform: scale(1.15);
}

/* Base Light mode brand button accents */
.footer-social-btn.btn-website:hover {
  color: #0284c7;
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22);
}

.footer-social-btn.btn-github:hover {
  color: #0f172a;
  border-color: #0f172a;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}

.footer-social-btn.btn-x:hover {
  color: #000000;
  border-color: #000000;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.footer-social-btn.btn-telegram:hover {
  color: #0284c7;
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22);
}

.footer-social-btn.btn-whatsapp:hover {
  color: #16a34a;
  border-color: #16a34a;
  background: #f0fdf4;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22);
}

.footer-social-btn.btn-email:hover {
  color: #7c3aed;
  border-color: #7c3aed;
  background: #f5f3ff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22);
}

.footer-social-btn.btn-paypal:hover {
  color: #0070ba;
  border-color: #0070ba;
  background: #f0f9ff;
  box-shadow: 0 4px 12px rgba(0, 112, 186, 0.22);
}

.footer-social-btn.btn-qris:hover {
  color: #dc2626;
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22);
}

.footer-social-btn.btn-counter:hover {
  color: #0284c7;
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22);
}

.footer-social-btn.btn-counter .counter-val {
  color: #0284c7;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .footer-social-btn.btn-counter .counter-val,
[data-theme="dark"] .footer-social-btn.btn-counter .counter-val {
  color: #38bdf8;
}

/* ═══ Circular Social Media Icon Buttons (Reference Design Match) ═══ */
.footer-social-btn:not(.btn-counter) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  gap: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  background: #f1f5f9;
  border: 1px solid rgba(203, 213, 225, 0.8);
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

.footer-social-btn:not(.btn-counter) i {
  font-size: 0.95rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #475569 !important;
  transition:
    transform 0.22s ease,
    color 0.22s ease !important;
}

/* Light mode hover state */
[data-bs-theme="light"] .footer-social-btn:not(.btn-counter),
[data-theme="light"] .footer-social-btn:not(.btn-counter) {
  background: #f1f5f9 !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  color: #475569 !important;
}

[data-bs-theme="light"] .footer-social-btn:not(.btn-counter) i,
[data-theme="light"] .footer-social-btn:not(.btn-counter) i {
  color: #475569 !important;
}

[data-bs-theme="light"] .footer-social-btn:not(.btn-counter):hover,
[data-theme="light"] .footer-social-btn:not(.btn-counter):hover {
  background: #ffffff !important;
  transform: translateY(-2px) scale(1.08) translateZ(0) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Light mode brand accents */
.footer-social-btn.btn-linkedin:hover {
  color: #0a66c2 !important;
  border-color: #0a66c2 !important;
  background: #f0f7ff !important;
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.22) !important;
}
.footer-social-btn.btn-linkedin:hover i {
  color: #0a66c2 !important;
}

.footer-social-btn.btn-facebook:hover {
  color: #1877f2 !important;
  border-color: #1877f2 !important;
  background: #f0f7ff !important;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.22) !important;
}
.footer-social-btn.btn-facebook:hover i {
  color: #1877f2 !important;
}

.footer-social-btn.btn-instagram:hover {
  color: #e1306c !important;
  border-color: #e1306c !important;
  background: #fdf2f8 !important;
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.22) !important;
}
.footer-social-btn.btn-instagram:hover i {
  color: #e1306c !important;
}

.footer-social-btn.btn-youtube:hover {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.22) !important;
}
.footer-social-btn.btn-youtube:hover i {
  color: #ef4444 !important;
}

.footer-social-btn.btn-tiktok:hover {
  color: #000000 !important;
  border-color: #000000 !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}
.footer-social-btn.btn-tiktok:hover i {
  color: #000000 !important;
}

.footer-social-btn.btn-threads:hover {
  color: #000000 !important;
  border-color: #000000 !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}
.footer-social-btn.btn-threads:hover i {
  color: #000000 !important;
}

.footer-social-btn.btn-discord:hover {
  color: #5865f2 !important;
  border-color: #5865f2 !important;
  background: #f5f3ff !important;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.22) !important;
}
.footer-social-btn.btn-discord:hover i {
  color: #5865f2 !important;
}

@media (max-width: 575.98px) {
  .footer-social-group {
    gap: 0.35rem;
  }
  .footer-social-btn:not(.btn-counter) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
  .footer-social-btn:not(.btn-counter) i {
    font-size: 0.88rem !important;
  }
  .footer-social-btn.btn-counter {
    padding: 0.3rem 0.65rem;
    font-size: 0.725rem;
    height: 30px;
    gap: 0.35rem;
  }
}

/* ─── Footer in Dark Mode ────────────────────────────────── */
[data-bs-theme="dark"] #app_footer,
[data-theme="dark"] #app_footer {
  border-top: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] #app_footer p,
[data-theme="dark"] #app_footer p,
[data-bs-theme="dark"] #app_footer .text-secondary,
[data-theme="dark"] #app_footer .text-secondary,
[data-bs-theme="dark"] #app_footer .text-muted,
[data-theme="dark"] #app_footer .text-muted {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

[data-bs-theme="dark"] #app_footer .app-footer-title,
[data-theme="dark"] #app_footer .app-footer-title,
[data-bs-theme="dark"] #app_footer span.text-dark,
[data-theme="dark"] #app_footer span.text-dark {
  color: #ffffff !important;
  font-weight: 700 !important;
}

[data-bs-theme="dark"] #app_footer .app-footer-title a,
[data-theme="dark"] #app_footer .app-footer-title a {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

[data-bs-theme="dark"] #app_footer .app-footer-title a:hover,
[data-theme="dark"] #app_footer .app-footer-title a:hover {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

[data-bs-theme="dark"] #app_footer .badge.bg-light,
[data-theme="dark"] #app_footer .badge.bg-light {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

[data-bs-theme="dark"] #app_footer .footer-link,
[data-theme="dark"] #app_footer .footer-link {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  transition: color 0.15s ease-in-out;
}

[data-bs-theme="dark"] #app_footer .footer-link:hover,
[data-theme="dark"] #app_footer .footer-link:hover {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

/* Dark mode social buttons - sleek crisp glowing pills */
[data-bs-theme="dark"] .footer-social-btn,
[data-theme="dark"] .footer-social-btn,
[data-bs-theme="dark"] #app_footer .footer-btn,
[data-theme="dark"] #app_footer .footer-btn {
  background: #0f172a !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  height: 32px;
  transform: translateZ(0);
}

@media (max-width: 575.98px) {
  [data-bs-theme="dark"] .footer-social-btn,
  [data-theme="dark"] .footer-social-btn,
  [data-bs-theme="dark"] #app_footer .footer-btn,
  [data-theme="dark"] #app_footer .footer-btn {
    height: 30px !important;
  }
}

[data-bs-theme="dark"] .footer-social-btn.btn-website:hover,
[data-theme="dark"] .footer-social-btn.btn-website:hover {
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  background: rgba(14, 165, 233, 0.2) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-github:hover,
[data-theme="dark"] .footer-social-btn.btn-github:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.3) !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-x:hover,
[data-theme="dark"] .footer-social-btn.btn-x:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-telegram:hover,
[data-theme="dark"] .footer-social-btn.btn-telegram:hover {
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  background: rgba(14, 165, 233, 0.2) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-whatsapp:hover,
[data-theme="dark"] .footer-social-btn.btn-whatsapp:hover {
  color: #4ade80 !important;
  border-color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.2) !important;
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.45) !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-email:hover,
[data-theme="dark"] .footer-social-btn.btn-email:hover {
  color: #c084fc !important;
  border-color: #c084fc !important;
  background: rgba(192, 132, 252, 0.2) !important;
  box-shadow: 0 0 16px rgba(192, 132, 252, 0.45) !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-paypal:hover,
[data-theme="dark"] .footer-social-btn.btn-paypal:hover {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.2) !important;
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.45) !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-qris:hover,
[data-theme="dark"] .footer-social-btn.btn-qris:hover {
  color: #f87171 !important;
  border-color: #f87171 !important;
  background: rgba(248, 113, 113, 0.2) !important;
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.45) !important;
}

/* Dark mode circular social buttons - Exact match with user screenshot */
[data-bs-theme="dark"] .footer-social-btn:not(.btn-counter),
[data-theme="dark"] .footer-social-btn:not(.btn-counter),
[data-bs-theme="dark"] #app_footer .footer-social-btn:not(.btn-counter),
[data-theme="dark"] #app_footer .footer-social-btn:not(.btn-counter) {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
}

[data-bs-theme="dark"] .footer-social-btn:not(.btn-counter) i,
[data-theme="dark"] .footer-social-btn:not(.btn-counter) i {
  color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .footer-social-btn:not(.btn-counter):hover,
[data-theme="dark"] .footer-social-btn:not(.btn-counter):hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) scale(1.12) translateZ(0) !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="dark"] .footer-social-btn:not(.btn-counter):hover i,
[data-theme="dark"] .footer-social-btn:not(.btn-counter):hover i {
  color: #ffffff !important;
  transform: scale(1.15);
}

/* Dark mode brand specific accents */
[data-bs-theme="dark"] .footer-social-btn.btn-linkedin:hover,
[data-theme="dark"] .footer-social-btn.btn-linkedin:hover {
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  background: rgba(14, 165, 233, 0.2) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}
[data-bs-theme="dark"] .footer-social-btn.btn-linkedin:hover i,
[data-theme="dark"] .footer-social-btn.btn-linkedin:hover i {
  color: #38bdf8 !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-facebook:hover,
[data-theme="dark"] .footer-social-btn.btn-facebook:hover {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.2) !important;
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.45) !important;
}
[data-bs-theme="dark"] .footer-social-btn.btn-facebook:hover i,
[data-theme="dark"] .footer-social-btn.btn-facebook:hover i {
  color: #60a5fa !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-instagram:hover,
[data-theme="dark"] .footer-social-btn.btn-instagram:hover {
  color: #f43f5e !important;
  border-color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.2) !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.45) !important;
}
[data-bs-theme="dark"] .footer-social-btn.btn-instagram:hover i,
[data-theme="dark"] .footer-social-btn.btn-instagram:hover i {
  color: #f43f5e !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-youtube:hover,
[data-theme="dark"] .footer-social-btn.btn-youtube:hover {
  color: #f87171 !important;
  border-color: #f87171 !important;
  background: rgba(239, 68, 68, 0.2) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45) !important;
}
[data-bs-theme="dark"] .footer-social-btn.btn-youtube:hover i,
[data-theme="dark"] .footer-social-btn.btn-youtube:hover i {
  color: #f87171 !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-tiktok:hover,
[data-theme="dark"] .footer-social-btn.btn-tiktok:hover {
  color: #22d3ee !important;
  border-color: #22d3ee !important;
  background: rgba(34, 211, 238, 0.2) !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.45) !important;
}
[data-bs-theme="dark"] .footer-social-btn.btn-tiktok:hover i,
[data-theme="dark"] .footer-social-btn.btn-tiktok:hover i {
  color: #22d3ee !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-threads:hover,
[data-theme="dark"] .footer-social-btn.btn-threads:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.3) !important;
}
[data-bs-theme="dark"] .footer-social-btn.btn-threads:hover i,
[data-theme="dark"] .footer-social-btn.btn-threads:hover i {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-discord:hover,
[data-theme="dark"] .footer-social-btn.btn-discord:hover {
  color: #818cf8 !important;
  border-color: #818cf8 !important;
  background: rgba(129, 140, 248, 0.2) !important;
  box-shadow: 0 0 16px rgba(129, 140, 248, 0.45) !important;
}
[data-bs-theme="dark"] .footer-social-btn.btn-discord:hover i,
[data-theme="dark"] .footer-social-btn.btn-discord:hover i {
  color: #818cf8 !important;
}

[data-bs-theme="dark"] .footer-social-btn.btn-counter:hover,
[data-theme="dark"] .footer-social-btn.btn-counter:hover {
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.2) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

/* ==========================================================================
   FOOTER VISITOR COUNTER CONTAINER & WRAPPER
   ========================================================================== */

.footer-counter-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.footer-counter-wrap .footer-social-btn {
  font-weight: 500;
}

.footer-counter-wrap .footer-social-btn strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   LIVE SHAREABLE HYPERLINK (BELOW SUBNET TABLE)
   ========================================================================== */

.live-url-box {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.75rem;
}

.live-url-inner {
  background: rgba(2, 132, 199, 0.05);
  border: 1px solid rgba(2, 132, 199, 0.22);
  border-radius: 9999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.775rem;
  line-height: 1.35;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.live-url-badge {
  color: #1e293b;
  font-weight: 800;
  font-size: 0.84rem;
  white-space: nowrap;
}

.live-url-link {
  color: #0284c7;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  word-break: break-all;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.live-url-link:hover,
.live-url-link:focus-visible {
  color: #0369a1;
  text-decoration: underline;
}

[data-bs-theme="dark"] .live-url-inner,
[data-theme="dark"] .live-url-inner {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .live-url-badge,
[data-theme="dark"] .live-url-badge {
  color: #f8fafc !important;
  font-weight: 800;
}

[data-bs-theme="dark"] .live-url-link,
[data-theme="dark"] .live-url-link {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

[data-bs-theme="dark"] .live-url-link:hover,
[data-theme="dark"] .live-url-link:focus-visible {
  color: #7dd3fc !important;
}

/* ═══ Back to Top Floating Button ══════════════════════════════════ */
.btn-scroll-top {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  color: #0284c7;
  border: 1.5px solid rgba(2, 132, 199, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1060;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-scroll-top i {
  font-size: 1rem;
  color: #0284c7;
  transition: transform 0.2s ease;
}

.btn-scroll-top.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.btn-scroll-top:hover,
.btn-scroll-top:focus-visible {
  background: #f0f9ff;
  border-color: #0284c7;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.28);
  outline: none;
}

.btn-scroll-top:hover i {
  transform: translateY(-2px);
}

[data-bs-theme="dark"] .btn-scroll-top,
[data-theme="dark"] .btn-scroll-top {
  background: #0f172a;
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .btn-scroll-top i,
[data-theme="dark"] .btn-scroll-top i {
  color: #38bdf8;
}

[data-bs-theme="dark"] .btn-scroll-top:hover,
[data-theme="dark"] .btn-scroll-top:hover i,
[data-bs-theme="dark"] .btn-scroll-top:focus-visible,
[data-theme="dark"] .btn-scroll-top:focus-visible i {
  background: #1e293b;
  border-color: #38bdf8;
  color: #7dd3fc;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.35);
}

/* ═══ Temporary Cookie Session Badge (15 Minutes) ══════════════════ */
.cookie-session-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 0.725rem;
  font-weight: 600;
  color: #475569;
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  padding: 0.2rem 0.55rem;
  transition: all 0.2s ease;
}

[data-bs-theme="dark"] .cookie-session-indicator,
[data-theme="dark"] .cookie-session-indicator {
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(56, 189, 248, 0.25);
}

.cookie-session-indicator i {
  color: #0284c7;
}

[data-bs-theme="dark"] .cookie-session-indicator i,
[data-theme="dark"] .cookie-session-indicator i {
  color: #38bdf8;
}



/* Button Toolbar Container Spacing */
.btn-toolbar-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important; /* 10px neat, spacious gap */
  flex-wrap: wrap !important;
}

/* Unified Geometry, Typography, and Micro-Interactions for Go, Tools, and Reset */
#btn_go,
#btn_tools,
#btn_reset,
.btn-calc-go,
.btn-pastel-green,
.btn-pastel-red {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 0.9rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  letter-spacing: 0.025em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-sizing: border-box !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  vertical-align: middle !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Play icon inside Go button */
.btn-go-icon {
  font-size: 0.725rem !important;
}

#btn_go:active,
#btn_tools:active,
#btn_reset:active,
.btn-calc-go:active,
.btn-pastel-green:active,
.btn-pastel-red:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Button Go: Dark-Nuanced Bright Sapphire Blue */
#btn_go,
.btn-calc-go {
  background: var(--btn-calc-go-bg) !important;
  border-color: var(--btn-calc-go-border) !important;
  color: var(--btn-calc-go-text) !important;
  box-shadow: var(--btn-calc-go-shadow) !important;
}

#btn_go:hover,
#btn_go:focus,
.btn-calc-go:hover,
.btn-calc-go:focus {
  background: var(--btn-calc-go-hover-bg) !important;
  border-color: var(--btn-calc-go-hover-border) !important;
  color: var(--btn-calc-go-hover-text) !important;
  box-shadow: var(--btn-calc-go-hover-shadow) !important;
  transform: translateY(-1.5px) !important;
}

#btn_go:focus-visible,
.btn-calc-go:focus-visible {
  outline: 2px solid var(--btn-calc-go-border) !important;
  outline-offset: 2px !important;
}

/* Button Tools: Emerald Green */
#btn_tools,
.btn-pastel-green {
  background: var(--btn-pastel-green-bg) !important;
  border-color: var(--btn-pastel-green-border) !important;
  color: var(--btn-pastel-green-text) !important;
  box-shadow: var(--btn-pastel-green-shadow) !important;
}

#btn_tools:hover,
#btn_tools:focus,
#btn_tools.show,
.btn-pastel-green:hover,
.btn-pastel-green:focus,
.btn-pastel-green.show {
  background: var(--btn-pastel-green-hover-bg) !important;
  border-color: var(--btn-pastel-green-hover-border) !important;
  color: var(--btn-pastel-green-hover-text) !important;
  box-shadow: var(--btn-pastel-green-hover-shadow) !important;
  transform: translateY(-1.5px) !important;
}

#btn_tools:focus-visible,
.btn-pastel-green:focus-visible {
  outline: 2px solid var(--btn-pastel-green-border) !important;
  outline-offset: 2px !important;
}

#btn_tools.dropdown-toggle::after {
  margin-left: 0.45rem !important;
  vertical-align: 0.1em !important;
}

/* Button Reset: Rose / Crimson Red */
#btn_reset,
.btn-pastel-red {
  background: var(--btn-pastel-red-bg) !important;
  border-color: var(--btn-pastel-red-border) !important;
  color: var(--btn-pastel-red-text) !important;
  box-shadow: var(--btn-pastel-red-shadow) !important;
}

#btn_reset:hover,
#btn_reset:focus,
.btn-pastel-red:hover,
.btn-pastel-red:focus {
  background: var(--btn-pastel-red-hover-bg) !important;
  border-color: var(--btn-pastel-red-hover-border) !important;
  color: var(--btn-pastel-red-hover-text) !important;
  box-shadow: var(--btn-pastel-red-hover-shadow) !important;
  transform: translateY(-1.5px) !important;
}

#btn_reset:focus-visible,
.btn-pastel-red:focus-visible {
  outline: 2px solid var(--btn-pastel-red-border) !important;
  outline-offset: 2px !important;
}