:root {
  color-scheme: light;
}

html.zn-dark {
  color-scheme: dark;
}

html.zn-dark body {
  background-color: #0a0c12;
  color: #dfe4ea;
}

html.zn-dark .wrapper,
html.zn-dark .layout-container,
html.zn-dark .page-body,
html.zn-dark .navbar,
html.zn-dark footer,
html.zn-dark .card-primary {
  background-color: #0a0c12 !important;
}

html.zn-dark .bg-white,
html.zn-dark .bg-gray-100,
html.zn-dark .bg-gray-50,
html.zn-dark .navbar,
html.zn-dark .header-section {
  background-color: #0f1118 !important;
}

html.zn-dark .border,
html.zn-dark .border-t,
html.zn-dark .border-gray-200,
html.zn-dark .divide-y,
html.zn-dark .dropdown,
html.zn-dark .dropdown-contents,
html.zn-dark .zn-dropdown-menu {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.zn-dark a,
html.zn-dark .footer-link,
html.zn-dark .footer-link-text,
html.zn-dark .dropdown-item {
  color: #cbd5e1;
}

html.zn-dark a:hover,
html.zn-dark .dropdown-item:hover {
  color: #e5e7eb;
}

html.zn-dark .text-secondary,
html.zn-dark .footer-row,
html.zn-dark .copyright {
  color: #cbd5e1;
}

html.zn-dark .badge,
html.zn-dark .button,
html.zn-dark button,
html.zn-dark .btn-primary,
html.zn-dark .btn-primary-outline,
html.zn-dark .alert_close,
html.zn-dark .dropdown-item,
html.zn-dark input,
html.zn-dark textarea,
html.zn-dark select {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0;
}

/* Buttons */
html.zn-dark .btn-primary,
html.zn-dark button[type="submit"],
html.zn-dark .button.button1,
html.zn-dark .button-primary {
  background-color: #2563eb !important;
  color: #e8f0ff !important;
  border-color: #1d4ed8 !important;
}

html.zn-dark .btn-primary:hover,
html.zn-dark button[type="submit"]:hover,
html.zn-dark .button.button1:hover,
html.zn-dark .button-primary:hover {
  background-color: #1d4ed8 !important;
  border-color: #1c46c5 !important;
  color: #f8fafc !important;
}

html.zn-dark .btn-primary:focus,
html.zn-dark button[type="submit"]:focus,
html.zn-dark .button.button1:focus,
html.zn-dark .button-primary:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

html.zn-dark .btn-primary-outline,
html.zn-dark .button-secondary,
html.zn-dark .button.button2 {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #e2e8f0 !important;
}

html.zn-dark .btn-primary-outline:hover,
html.zn-dark .button-secondary:hover,
html.zn-dark .button.button2:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #f8fafc !important;
}

html.zn-dark .btn-primary-outline:focus,
html.zn-dark .button-secondary:focus,
html.zn-dark .button.button2:focus {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

/* Mark forums read button */
html.zn-dark .mark-read {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

html.zn-dark .mark-read:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #f8fafc !important;
}

html.zn-dark .mark-read:focus {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

/* Compose / card-sized buttons */
html.zn-dark a.card-sm,
html.zn-dark .card-sm {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

html.zn-dark a.card-sm:hover,
html.zn-dark .card-sm:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #f8fafc !important;
}

html.zn-dark a.card-sm:focus,
html.zn-dark .card-sm:focus {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

/* Form selects (e.g., birthday selectors) */
html.zn-dark select,
html.zn-dark select option {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

html.zn-dark select:focus {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 1px;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

/* Table headers */
html.zn-dark thead,
html.zn-dark thead.bg-slate-50 {
  background-color: #111827 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.zn-dark thead th,
html.zn-dark th.text-secondary {
  color: #e5e7eb !important;
}

html.zn-dark .zn-overlay .bg-white,
html.zn-dark .phpbb_alert {
  background-color: #111827 !important;
  color: #e2e8f0;
}

/* Forum list / categories */
html.zn-dark .categories {
  background: none;
}
html.zn-dark .card {
  background: #10131b !important;
  border: 1px solid rgba(31, 41, 55, 0.6) !important;
  color: #e2e8f0;
}
html.zn-dark .card-title {
  color: #e2e8f0;
  background: linear-gradient(135deg, rgba(24, 28, 38, 0.7), rgba(14, 16, 24, 0.9));
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #1f2937 !important;
}
html.zn-dark .topiclist.forums li,
html.zn-dark .forum.row {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.zn-dark .forum-title a,
html.zn-dark .forum-desc,
html.zn-dark .text-secondary {
  color: #d1d5db !important;
}
html.zn-dark .divide-y > * + * {
  border-top-color: rgba(255, 255, 255, 0.08);
}
html.zn-dark .moderators-title,
html.zn-dark .subforums-title {
  color: #e5e7eb;
}
html.zn-dark .subforum {
  color: #cbd5e1;
}
html.zn-dark .subforum.unread {
  color: #e5e7eb;
}
html.zn-dark .feed-icon-forum {
  background: rgba(255, 255, 255, 0.06) !important;
}

html.zn-dark .footer-link:hover,
html.zn-dark .dropdown-item:hover,
html.zn-dark .btn-primary-outline:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html.zn-dark .header-image {
  filter: brightness(0.80);
}

html.zn-dark .zn-dropdown-menu {
  background-color: #0f172a;
}

/* Prefers-color-scheme auto */
@media (prefers-color-scheme: dark) {
  html:not(.zn-light) {
    color-scheme: dark;
  }
  html:not(.zn-light) body {
    background-color: #0b1220;
    color: #e2e8f0;
  }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: #2563eb;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

#zn-theme-toggle {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 60;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 9999px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
html:not(.zn-dark) #zn-theme-toggle {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
}
#zn-theme-toggle:focus {
  outline: 2px solid #93c5fd;
}