html.darkmode body {
  background-color: #0b0f17;
  color: #e5e7eb;
}

html.darkmode .bg-white:not(span) {
  background-color: #111827 !important;
}

html.darkmode .bg-gray-50 {
  background-color: #0f172a !important;
}

html.darkmode .bg-gray-100 {
  background-color: #0b1220 !important;
}

html.darkmode .bg-gray-200 {
  background-color: #1f2937 !important;
}

html.darkmode .text-gray-900 {
  color: #f1f5f9 !important;
}

html.darkmode .text-gray-800 {
  color: #e2e8f0 !important;
}

html.darkmode .text-gray-700 {
  color: #d1d5db !important;
}

html.darkmode .text-gray-600 {
  color: #b8c0cc !important;
}

html.darkmode .text-gray-500 {
  color: #a1aab8 !important;
}

html.darkmode .text-gray-400 {
  color: #8b95a6 !important;
}

html.darkmode .text-blue-600 {
  color: #93c5fd !important;
}

html.darkmode .border-gray-200 {
  border-color: #2a3446 !important;
}

html.darkmode .border-gray-300 {
  border-color: #3a4558 !important;
}

html.darkmode .border {
  border-color: #334155 !important;
}

html.darkmode input,
html.darkmode select,
html.darkmode textarea {
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: #334155;
}

html.darkmode input::placeholder,
html.darkmode textarea::placeholder {
  color: #94a3b8;
}

html.darkmode input:focus,
html.darkmode select:focus,
html.darkmode textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
}

html.darkmode [data-login-box] {
  background-color: #111827;
  border-color: #2a3446;
}

html.darkmode .shadow,
html.darkmode .shadow-md,
html.darkmode .shadow-xl {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

html.darkmode ::selection {
  background: #1f2a44;
  color: #f8fafc;
}

html.darkmode #prefix-length,
html.darkmode #host-count {
  color: #f8fafc;
}

html.darkmode #ipv6-prefix-example .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

html.darkmode #ipv6-prefix-example .text-blue-700 {
  color: #93c5fd !important;
}

html.darkmode #ipv6-prefix-example .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.2) !important;
}

html.darkmode #ipv6-prefix-example .text-green-700 {
  color: #6ee7b7 !important;
}

html.darkmode #ipv6-prefix-example .bg-orange-100 {
  background-color: rgba(249, 115, 22, 0.2) !important;
}

html.darkmode #ipv6-prefix-example .text-orange-700 {
  color: #fdba74 !important;
}

html.darkmode #ipv6-prefix-example .text-gray-300 {
  color: #6b7280 !important;
}

[data-login-panel] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

[data-login-panel].is-open {
  opacity: 1;
  pointer-events: auto;
}

[data-login-box] {
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

[data-login-panel].is-open [data-login-box] {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-login-panel],
  [data-login-box] {
    transition: none;
  }

  [data-login-box] {
    transform: none;
  }
}