/*-----------------------------------*\
  #DARK MODE - ExamHint
\*-----------------------------------*/

/* Dark mode theme variables */
html.dark {
  --eerie-black-1: hsl(0, 0%, 95%);
  --eerie-black-2: hsl(0, 0%, 90%);
  --quick-silver: hsl(0, 0%, 70%);
  --light-gray: hsl(0, 0%, 25%);
  --isabelline: hsl(220, 15%, 18%);
  --gray-x-11: hsl(0, 0%, 55%);
  --platinum: hsl(220, 15%, 22%);
  --gray-web: hsl(0, 0%, 75%);
  --white: hsl(220, 20%, 12%);
}

/* Base - body and main */
html.dark body {
  background-color: hsl(220, 20%, 10%);
  color: hsl(0, 0%, 85%);
}

html.dark main#main {
  background-color: hsl(220, 20%, 10%);
}

/* Headings - must override home page !important rules */
html.dark .h1,
html.dark .h2,
html.dark .h3,
html.dark .section-title,
html.dark .section .section-title,
html.dark .section.blog .section-title,
html.dark .section.category .section-title,
html.dark .section.blog#currentAffairs .section-title,
html.dark .video-quiz-section .section-title,
html.dark .card-title,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4 {
  color: hsl(0, 0%, 96%) !important;
}

html.dark .section-title .span,
html.dark .section .section-title .span,
html.dark .section.blog .section-title .span,
html.dark .section.category .section-title .span,
html.dark .video-quiz-section .section-title .span {
  color: hsl(210, 100%, 75%) !important;
}

/* Section text - "for various competitive exams" etc. - paragraph below titles */
html.dark .section-text,
html.dark .section .section-text,
html.dark .section.blog .section-text,
html.dark .section.category .section-text,
html.dark .section.blog#currentAffairs .section-text,
html.dark .video-quiz-section .section-text,
html.dark .home-page .section-text,
html.dark p.section-text {
  color: hsl(0, 0%, 85%) !important;
}

/* Ensure h2 with section-title is visible */
html.dark .h2.section-title,
html.dark h2.section-title {
  color: hsl(0, 0%, 97%) !important;
}

/* Cards and sections */
html.dark .card,
html.dark .course-card,
html.dark .blog-card,
html.dark .category-card,
html.dark .stats-card {
  background-color: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 25%);
}

/* Home page sections */
html.dark .home-page .section:nth-child(even),
html.dark .home-page .section:nth-child(odd) {
  background: hsl(220, 20%, 12%) !important;
}

html.dark main#main .home-page {
  background: hsl(220, 20%, 10%) !important;
}

/* Home jump links - pill buttons (Latest Jobs, Notes, Books, etc.) - force dark */
/* style.css applies background to .home-jump-links (nav) and .home-jump-link - override both */
html.dark .home-jump-links-container,
html.dark .home-page .home-jump-links-container,
html.dark article .home-jump-links-container {
  background: hsl(220, 22%, 10%) !important;
  background-color: hsl(220, 22%, 10%) !important;
  border-color: hsl(220, 15%, 18%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

html.dark .home-jump-links,
html.dark article .home-jump-links {
  background: hsl(220, 22%, 10%) !important;
  background-image: none !important;
  border-color: hsl(220, 15%, 20%) !important;
}

html.dark .home-jump-link,
html.dark .home-jump-links .home-jump-link,
html.dark .home-page .home-jump-link,
html.dark article .home-jump-link {
  background: hsl(220, 20%, 14%) !important;
  background-image: none !important;
  background-color: hsl(220, 20%, 14%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 22%) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

html.dark .home-jump-link:hover,
html.dark .home-jump-links .home-jump-link:hover,
html.dark .home-page .home-jump-link:hover,
html.dark article .home-jump-link:hover {
  background: hsl(220, 20%, 22%) !important;
  background-image: none !important;
  background-color: hsl(220, 20%, 22%) !important;
  color: hsl(210, 100%, 85%) !important;
  border-color: hsl(210, 100%, 45%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* Section subtitles */
html.dark .section-subtitle {
  color: hsl(0, 0%, 75%) !important;
}

/* Category cards - Daily Dose, Weekly, Monthly Current Affairs, etc. */
html.dark #currentAffairs .category-card,
html.dark #questionPapers .category-card,
html.dark #books .category-card,
html.dark #latestjobs .category-card,
html.dark #notes .category-card,
html.dark #video .category-card,
html.dark .section .category-card,
html.dark .section.blog .category-card,
html.dark .section.category .category-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
  border-left-color: hsl(170, 75%, 45%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

html.dark #currentAffairs .category-card { border-left-color: #60a5fa !important; }
html.dark #questionPapers .category-card { border-left-color: #a78bfa !important; }
html.dark #books .category-card { border-left-color: #34d399 !important; }
html.dark #latestjobs .category-card { border-left-color: #fb923c !important; }
html.dark #notes .category-card { border-left-color: #818cf8 !important; }
html.dark #video .category-card { border-left-color: #f472b6 !important; }

/* News box inside cards */
html.dark .news_box,
html.dark .news_box-subtitle,
html.dark .news_box ul li small {
  color: hsl(0, 0%, 75%) !important;
}

html.dark .section .news_box h3,
html.dark .section.blog .news_box h3,
html.dark .section.category .news_box h3 {
  color: hsl(0, 0%, 95%) !important;
  border-bottom-color: hsl(220, 15%, 28%) !important;
}

html.dark .section .news_box a,
html.dark .section.blog .news_box a,
html.dark .section.category .news_box a {
  color: hsl(0, 0%, 80%) !important;
}

html.dark .section .news_box a:hover,
html.dark .section.blog .news_box a:hover,
html.dark .section.category .news_box a:hover {
  color: hsl(170, 75%, 75%) !important;
}

html.dark .section .news_box a strong,
html.dark .section.blog .news_box a strong,
html.dark .section.category .news_box a strong {
  color: hsl(0, 0%, 92%) !important;
}

/* Card dividers between list items */
html.dark .section .news_box ul li:not(:last-child),
html.dark .section.blog .news_box ul li:not(:last-child),
html.dark .section.category .news_box ul li:not(:last-child),
html.dark .section .category-card .news_box ul li:not(:last-child),
html.dark .section.blog .category-card .news_box ul li:not(:last-child),
html.dark .section.category .category-card .news_box ul li:not(:last-child) {
  border-bottom-color: hsl(220, 15%, 22%) !important;
}

/* Card badge border */
html.dark .section .category-card .card-badge,
html.dark .section.blog .category-card .card-badge,
html.dark .section.category .category-card .card-badge {
  border-top-color: hsl(220, 15%, 24%) !important;
}

/* Video cards */
html.dark .video-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}

html.dark .video-card-body h3,
html.dark .video-card-body p {
  color: hsl(0, 0%, 90%) !important;
}

html.dark .video-thumbnail {
  background: hsl(220, 18%, 18%) !important;
  color: hsl(0, 0%, 60%) !important;
}

/* Scrollbars - dark theme */
html.dark ::-webkit-scrollbar-track {
  background-color: hsl(220, 18%, 12%);
}

html.dark ::-webkit-scrollbar-thumb {
  background-color: hsl(220, 15%, 35%);
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: hsl(220, 15%, 45%);
}

/* Category pills / buttons */
html.dark .category-btn,
html.dark .pill-btn,
html.dark .hub-btn {
  background-color: hsl(220, 18%, 20%) !important;
  color: hsl(0, 0%, 90%) !important;
  border-color: hsl(220, 15%, 30%);
}

html.dark .category-btn:hover,
html.dark .pill-btn:hover,
html.dark .hub-btn:hover {
  background-color: hsl(220, 18%, 28%) !important;
  color: #fff !important;
}

/* Inputs and forms */
html.dark input,
html.dark textarea,
html.dark select {
  background-color: hsl(220, 18%, 18%) !important;
  color: hsl(0, 0%, 90%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: hsl(0, 0%, 55%) !important;
}
html.dark input:-webkit-autofill,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
  -webkit-text-fill-color: hsl(0, 0%, 90%) !important;
  -webkit-box-shadow: 0 0 0 1000px hsl(220, 18%, 18%) inset !important;
}

/* Tables */
html.dark table,
html.dark th,
html.dark td {
  border-color: hsl(220, 15%, 25%) !important;
}

html.dark thead th,
html.dark tr:nth-child(even) {
  background-color: hsl(220, 18%, 14%) !important;
}

html.dark tbody tr:hover {
  background-color: hsl(220, 18%, 20%) !important;
}

/* Links */
html.dark a:not(.header-nav-link):not(.header-btn):not(.btn) {
  color: hsl(170, 75%, 65%);
}

html.dark a:not(.header-nav-link):not(.header-btn):not(.btn):hover {
  color: hsl(170, 75%, 75%);
}

/* Footer */
html.dark footer,
html.dark .footer {
  background-color: hsl(220, 20%, 8%) !important;
  color: hsl(0, 0%, 75%) !important;
  border-top-color: hsl(220, 15%, 20%);
}

/* Smooth theme transition for entire page */
html {
  transition: background-color 0.4s ease, color 0.4s ease;
}
body,
main#main {
  transition: background-color 0.4s ease, color 0.3s ease;
}

/* Theme toggle button in header */
.theme-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 40px;
  height: 40px;
  padding: 0 0.85rem;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  overflow: hidden;
}

/* Ensure text is always visible on dark header */
.header-compact .theme-toggle-btn,
.header .theme-toggle-btn {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Icon wrapper – attractive sun/moon icons */
.theme-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.theme-icon-wrap ion-icon {
  font-size: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  transition: filter 0.3s ease;
}
.theme-icon-light ion-icon {
  filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.6));
  color: #fcd34d;
}
.theme-icon-dark ion-icon {
  filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.5));
  color: #93c5fd;
}
.theme-toggle-btn:hover .theme-icon-wrap {
  transform: rotate(15deg) scale(1.1);
}
.theme-toggle-btn:active .theme-icon-wrap {
  transform: scale(0.95);
}

.theme-toggle-btn .theme-text-light,
.theme-toggle-btn .theme-text-dark {
  font-size: 0.9rem;
  font-family: inherit;
  white-space: nowrap;
  color: inherit;
  font-weight: 600;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.theme-toggle-btn:active {
  transform: translateY(0);
}

/* Icon/text visibility – smooth fade on switch */
.theme-icon-dark,
.theme-text-dark {
  display: inline-flex;
  align-items: center;
  animation: themeFadeIn 0.35s ease;
}
.theme-icon-light,
.theme-text-light {
  display: none;
  animation: themeFadeIn 0.35s ease;
}
html.dark .theme-icon-dark,
html.dark .theme-text-dark {
  display: none;
}
html.dark .theme-icon-light,
html.dark .theme-text-light {
  display: inline-flex;
  align-items: center;
  animation: themeFadeIn 0.35s ease;
}

@keyframes themeFadeIn {
  from { opacity: 0; transform: scale(0.85) rotate(-10deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Admin theme toggle - in admin header bar (dark background) */
.admin-theme-toggle {
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  font-size: 1.2rem;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.admin-theme-toggle .theme-icon-wrap ion-icon {
  font-size: 1.25rem;
}
.admin-theme-toggle .theme-text-light,
.admin-theme-toggle .theme-text-dark {
  font-size: 0.8rem;
  font-weight: 600;
  color: inherit;
}
.admin-theme-toggle:hover {
  background: rgba(255,255,255,0.2) !important;
}

/* Hide text on very small screens to save space */
@media (max-width: 480px) {
  .theme-toggle-btn .theme-text-light,
  .theme-toggle-btn .theme-text-dark { display: none !important; }
  .theme-toggle-btn { padding: 0 0.5rem; min-width: 40px; }
}

/* ========== BREADCRUMB ========== */
html.dark .site-breadcrumb,
html.dark main#main .site-breadcrumb {
  background: hsl(220, 22%, 12%) !important;
  background-image: none !important;
  border-color: hsl(220, 15%, 22%) !important;
}
html.dark .site-breadcrumb-link { color: hsl(210, 100%, 75%) !important; }
html.dark .site-breadcrumb-link:hover { background: hsl(220, 18%, 20%); color: hsl(210, 100%, 85%) !important; }
html.dark .site-breadcrumb-sep { color: hsl(0, 0%, 55%) !important; }
html.dark .site-breadcrumb-current { color: hsl(0, 0%, 88%) !important; }

/* ========== PDF PAGE (NCERT books download-pdf, chapter viewer) ========== */
html.dark .pdf-page {
  background: hsl(220, 20%, 10%) !important;
}
html.dark .pdf-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .pdf-title { color: hsl(0, 0%, 96%) !important; }
html.dark .pdf-description { color: hsl(0, 0%, 75%) !important; }
html.dark .pdf-viewer {
  background: hsl(220, 18%, 12%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .pdf-toolbar {
  background: hsl(220, 18%, 14%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .pdf-toolbar .pdf-page-count,
html.dark .pdf-toolbar .pdf-quality {
  background: hsl(220, 18%, 18%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .pdf-toolbar input[type="number"] {
  background: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .pdf-toolbar .page-label { color: hsl(0, 0%, 85%) !important; }
html.dark .pdf-quality label { color: hsl(0, 0%, 90%) !important; }
html.dark .pdf-loading { color: hsl(0, 0%, 78%) !important; }
html.dark .pdf-loading-overlay {
  background: linear-gradient(180deg, hsl(220, 22%, 12%) 0%, hsl(220, 18%, 16%) 50%, hsl(220, 22%, 12%) 100%) !important;
}
html.dark .pdf-loading-overlay .pdf-load-book {
  background: linear-gradient(145deg, hsl(220, 18%, 24%) 0%, hsl(220, 18%, 16%) 100%) !important;
}
html.dark .pdf-loading-overlay .pdf-load-text { color: hsl(0, 0%, 72%) !important; }
html.dark .pdf-loading-overlay .pdf-load-bar { background: hsl(220, 18%, 24%) !important; }
html.dark #pdf-canvas { background: #fff !important; }
html.dark .pdf-dark-mode-toggle {
  background: hsl(220, 18%, 18%) !important;
  border-color: hsl(220, 15%, 28%) !important;
  color: hsl(0, 0%, 75%) !important;
}
html.dark .pdf-dark-mode-toggle:hover {
  background: hsl(220, 20%, 24%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .pdf-dark-mode-toggle.active,
html.dark .pdf-hd-toggle.active {
  background: linear-gradient(135deg, hsl(260, 60%, 45%) 0%, hsl(260, 70%, 55%) 100%) !important;
  border-color: hsl(260, 70%, 50%) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4) !important;
}
html.dark .pdf-hd-toggle {
  background: hsl(220, 18%, 18%) !important;
  border-color: hsl(220, 15%, 28%) !important;
  color: hsl(0, 0%, 75%) !important;
}
html.dark .pdf-hd-toggle:hover {
  background: hsl(220, 20%, 24%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .pdf-chapters-below {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .pdf-chapters-below h2 { color: hsl(0, 0%, 96%) !important; }
html.dark .pdf-chapter-link {
  background: hsl(220, 18%, 18%) !important;
  border-color: hsl(220, 15%, 28%) !important;
  color: hsl(210, 100%, 75%) !important;
}
html.dark .pdf-chapter-link:hover {
  background: hsl(220, 22%, 24%) !important;
  border-color: hsl(210, 100%, 45%) !important;
  color: hsl(210, 100%, 85%) !important;
}
html.dark .pdf-chapters-back a { color: hsl(210, 100%, 75%) !important; }
html.dark .pdf-chapters-back a:hover { color: hsl(210, 100%, 85%) !important; }

/* ========== PJ-PAGE (Hub: Jobs, Notes, Current, Papers, Quiz, Videos) ========== */
html.dark main#main .pj-page {
  background: hsl(220, 20%, 10%) !important;
}
html.dark main#main .pj-page .pj-header h1 { color: hsl(0, 0%, 96%) !important; }
html.dark main#main .pj-page .pj-header p { color: hsl(0, 0%, 75%) !important; }
html.dark main#main .pj-page .pj-segment-nav {
  border-bottom-color: hsl(220, 15%, 22%) !important;
}
html.dark main#main .pj-page .pj-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark main#main .pj-page .pj-card h2,
html.dark main#main .pj-page .pj-seo-content h2 { color: hsl(0, 0%, 95%) !important; border-bottom-color: hsl(210, 100%, 50%) !important; }
html.dark main#main .pj-page .pj-card a { color: hsl(210, 100%, 75%) !important; }
html.dark main#main .pj-page .pj-card a:hover { color: hsl(210, 100%, 85%) !important; }
html.dark main#main .pj-page .pj-card small { color: hsl(0, 0%, 65%) !important; }
html.dark main#main .pj-page .pj-seo-content,
html.dark main#main .pj-page .pj-nav { border-top-color: hsl(220, 15%, 22%) !important; }
html.dark main#main .pj-page .pj-seo-content h3,
html.dark main#main .pj-page .pj-seo-content p,
html.dark main#main .pj-page .pj-nav h2,
html.dark main#main .pj-page .pj-nav a { color: hsl(0, 0%, 82%) !important; }
html.dark main#main .pj-page .pj-nav a { color: hsl(210, 100%, 75%) !important; }

/* pj-intro-box, pj-card-grid (Current Affairs page) */
html.dark .pj-page .pj-intro-box {
  background: hsl(220, 25%, 14%) !important;
  background-image: none !important;
  border-color: hsl(210, 100%, 40%) !important;
}
html.dark .pj-page .pj-intro-box h2 { color: hsl(210, 100%, 75%) !important; }
html.dark .pj-page .pj-intro-box li { color: hsl(0, 0%, 78%) !important; }
html.dark .pj-page .pj-year-nav { border-bottom-color: hsl(220, 15%, 22%) !important; }
html.dark .pj-page .pj-card-grid a {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(210, 100%, 75%) !important;
}
html.dark .pj-page .pj-card-grid a:hover {
  background: hsl(220, 20%, 22%) !important;
  border-color: hsl(210, 100%, 45%) !important;
}

/* ========== JOBS-PJ-PAGE (Latest Jobs, Admit Cards, etc.) ========== */
html.dark .jobs-pj-page .jobs-intro-box {
  background: hsl(220, 25%, 14%) !important;
  background-image: none !important;
  border-color: hsl(210, 100%, 40%) !important;
}
html.dark .jobs-pj-page .jobs-intro-box h2 { color: hsl(210, 100%, 75%) !important; }
html.dark .jobs-pj-page .jobs-intro-box li { color: hsl(0, 0%, 78%) !important; }
html.dark .jobs-pj-page .jobs-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .jobs-pj-page .jobs-card li { border-bottom-color: hsl(220, 15%, 22%) !important; }
html.dark .jobs-pj-page .jobs-card a { color: hsl(210, 100%, 75%) !important; }
html.dark .jobs-pj-page .jobs-card .job-intro,
html.dark .jobs-pj-page .jobs-card .job-meta { color: hsl(0, 0%, 72%) !important; }
html.dark .jobs-pj-page .jobs-seo-content h2,
html.dark .jobs-pj-page .jobs-seo-content h3,
html.dark .jobs-pj-page .jobs-seo-content p,
html.dark .jobs-pj-page .jobs-nav h2,
html.dark .jobs-pj-page .jobs-nav a { color: hsl(0, 0%, 85%) !important; }
html.dark .jobs-pj-page .jobs-nav a { color: hsl(210, 100%, 75%) !important; }

/* ========== QP-PAGE (Quiz / Current Affairs show) ========== */
html.dark .qp-page { background: hsl(220, 20%, 10%) !important; }
html.dark .qp-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .qp-title { color: hsl(0, 0%, 95%) !important; }
html.dark .qp-sub { color: hsl(0, 0%, 72%) !important; }

/* jump-link (quick jump buttons) */
html.dark .jump-links { }
html.dark .jump-link {
  background: hsl(220, 20%, 16%) !important;
  background-image: none !important;
  border-color: hsl(210, 100%, 40%) !important;
  color: hsl(210, 100%, 80%) !important;
}
html.dark .jump-link:hover {
  background: hsl(220, 22%, 22%) !important;
  color: hsl(210, 100%, 90%) !important;
}

/* Quiz section */
html.dark .quiz-section .qp-card { background: hsl(220, 18%, 14%) !important; }
html.dark .quiz-instruction,
html.dark .quiz-progress { color: hsl(0, 0%, 75%) !important; }
html.dark .quiz-questions .ques {
  border-bottom-color: hsl(220, 15%, 22%) !important;
}
html.dark .quiz-questions .ques_q { color: hsl(0, 0%, 92%) !important; }
html.dark .quiz-questions .ques_opt .opt {
  background: hsl(220, 18%, 16%) !important;
  background-image: none !important;
  border-color: hsl(220, 15%, 28%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .quiz-questions .ques_opt .opt .opt-label {
  background: hsl(220, 18%, 18%) !important;
  border-color: hsl(220, 15%, 35%) !important;
  color: hsl(0, 0%, 85%) !important;
}
html.dark .quiz-questions .ques_opt .opt:hover {
  background: hsl(220, 20%, 22%) !important;
  border-color: hsl(220, 15%, 38%) !important;
}
html.dark .quiz-questions .ques_opt .opt.selected {
  background: hsl(220, 50%, 22%) !important;
  background-image: none !important;
  border-color: hsl(210, 100%, 50%) !important;
}
html.dark .quiz-questions .ques_opt .opt.selected .opt-label {
  background: hsl(210, 100%, 50%) !important;
  border-color: hsl(210, 100%, 50%) !important;
  color: #fff !important;
}
html.dark .quiz-questions .ques.correct { border-left-color: #4ade80 !important; }
html.dark .quiz-questions .ques.incorrect { border-left-color: #f87171 !important; }
html.dark .quiz-questions .ques .opt.correct-option {
  background: hsl(142, 50%, 22%) !important;
  background-image: none !important;
  border-color: #22c55e !important;
}
html.dark .quiz-questions .ques .opt.correct-option .opt-label {
  background: #22c55e !important;
  border-color: #22c55e !important;
}
html.dark .quiz-questions .ques .opt.wrong-selection {
  background: hsl(0, 50%, 22%) !important;
  background-image: none !important;
  border-color: #ef4444 !important;
}
html.dark .quiz-questions .ques .opt.wrong-selection .opt-label {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}
html.dark .ques_explain_inact {
  background: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 85%) !important;
  border-left-color: hsl(210, 100%, 50%) !important;
}
html.dark .result-box {
  background: hsl(142, 40%, 18%) !important;
  background-image: none !important;
  border-color: #22c55e !important;
}
html.dark .result-box .score,
html.dark .result-box .pct { color: #4ade80 !important; }
html.dark .section-title { color: hsl(210, 100%, 75%) !important; border-bottom-color: hsl(210, 100%, 50%) !important; }
html.dark .link-list a { color: hsl(210, 100%, 75%) !important; }
html.dark .link-list a:hover { background: hsl(220, 18%, 20%); color: hsl(210, 100%, 85%) !important; }
html.dark .seo-content-section .seo-content-text,
html.dark .history-section .history-text { color: hsl(0, 0%, 80%) !important; }
html.dark .history-section .history-text h3 { color: hsl(0, 0%, 88%) !important; }

/* ========== JOB-PAGE (Job detail) ========== */
html.dark .job-page { background: hsl(220, 20%, 10%) !important; }
html.dark .job-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .job-title,
html.dark .job-section h2 {
  color: hsl(0, 0%, 96%) !important;
  border-bottom-color: hsl(220, 15%, 28%) !important;
}
html.dark .job-section .content,
html.dark .job-section .content p,
html.dark .job-section .content li,
html.dark .job-section .content span,
html.dark .job-section .content div {
  color: hsl(0, 0%, 88%) !important;
}
html.dark .job-section .content strong { color: hsl(0, 0%, 95%) !important; }
html.dark .job-section .content a { color: hsl(210, 100%, 78%) !important; }
html.dark .job-section .content a:hover { color: hsl(210, 100%, 88%) !important; }
html.dark .job-section .content table,
html.dark .job-section .content th,
html.dark .job-section .content td {
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(0, 0%, 88%) !important;
}
html.dark .job-section .content th { background: hsl(220, 18%, 18%) !important; }
html.dark .job-section .content td { background: hsl(220, 18%, 14%) !important; }
/* KV table – labels keep their color (light variants for dark mode visibility) */
html.dark .job-line-value { color: hsl(0, 0%, 92%) !important; }
html.dark .label-green { color: #4ade80 !important; }   /* light green – start/open dates */
html.dark .label-red { color: #fb7185 !important; }     /* light red – end/deadline dates */
html.dark .label-blue { color: #38bdf8 !important; }   /* light blue – general */
html.dark .label-purple { color: #c084fc !important; } /* light purple – date labels */
html.dark .kv-table th,
html.dark .kv-table td { border-color: hsl(220, 15%, 24%) !important; }
html.dark .kv-table th {
  background: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 90%) !important; /* default; .label-green/red/blue/purple override for labels */
}
html.dark .kv-table td {
  background: hsl(220, 18%, 14%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .kv-card .content a {
  background: linear-gradient(135deg, hsl(210, 80%, 45%) 0%, hsl(210, 80%, 38%) 100%) !important;
  color: #fff !important;
}
html.dark .important-questions li {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(0, 0%, 88%) !important;
}
html.dark .important-questions .q-label,
html.dark .important-questions .question { color: hsl(210, 100%, 78%) !important; }
html.dark .important-questions .answer { color: hsl(0, 0%, 85%) !important; }
html.dark .instructions-list li { color: hsl(0, 0%, 85%) !important; }
html.dark .job-empty-msg { color: hsl(0, 0%, 65%) !important; }
html.dark .important-links-buttons table {
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .important-links-buttons th,
html.dark .important-links-buttons td {
  border-color: hsl(220, 15%, 24%) !important;
  background: hsl(220, 18%, 14%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .important-links-buttons th {
  background: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 95%) !important;
}
html.dark .important-links-buttons a {
  background: linear-gradient(135deg, hsl(210, 80%, 48%) 0%, hsl(210, 80%, 40%) 100%) !important;
  color: #fff !important;
}

/* ========== BP-PAGE (Books page) ========== */
html.dark .bp-h1,
html.dark .bp-section h2,
html.dark .bp-section h3 { color: hsl(0, 0%, 95%) !important; }
html.dark .bp-desc,
html.dark .bp-nav a { color: hsl(0, 0%, 78%) !important; }
html.dark .bp-nav a:hover { color: hsl(0, 0%, 95%) !important; }
html.dark .bp-card {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(210, 100%, 80%) !important;
}
html.dark .bp-card:hover {
  background: hsl(220, 20%, 22%) !important;
  border-color: hsl(210, 100%, 45%) !important;
}
html.dark .bp-old-link {
  background: hsl(142, 30%, 18%) !important;
  border-color: hsl(142, 40%, 30%) !important;
  color: hsl(142, 70%, 75%) !important;
}
html.dark .bp-old-link:hover {
  background: hsl(142, 35%, 22%) !important;
}
html.dark .bp-badge--latest { color: #6ee7b7; background: hsl(142, 40%, 18%); }
html.dark .bp-badge--ref { color: #fcd34d; background: hsl(38, 50%, 18%); }
html.dark .bp-badge--prev { color: #93c5fd; background: hsl(220, 40%, 18%); }

/* ========== NCERT BOOKS PAGE (class-1, class-11, etc.) ========== */
html.dark .ncert-page,
html.dark .section.ncert-page,
html.dark #ncertBooks {
  background: hsl(220, 20%, 10%) !important;
}
html.dark .ncert-page .container { color: hsl(0, 0%, 85%); }
html.dark .ncert-header h1 { color: hsl(0, 0%, 96%) !important; }
html.dark .ncert-header .subtitle { color: hsl(0, 0%, 72%) !important; }
html.dark .ncert-nav-group-label { color: hsl(0, 0%, 88%) !important; }
html.dark .ncert-nav a {
  background: hsl(220, 18%, 18%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .ncert-nav a:hover {
  background: hsl(170, 50%, 28%) !important;
  color: hsl(170, 75%, 75%) !important;
}
html.dark .ncert-nav a.ncert-nav-active {
  background: hsl(170, 75%, 38%) !important;
  color: #fff !important;
}
html.dark .ncert-nav-divider { background: hsl(220, 15%, 28%) !important; }
html.dark .ncert-subject-card {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .ncert-subject-card:hover {
  border-color: hsl(170, 50%, 45%) !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3) !important;
}
html.dark .ncert-subject-card .subject-name { color: hsl(0, 0%, 95%) !important; }
html.dark .ncert-subject-card .subject-meta { color: hsl(0, 0%, 68%) !important; }
html.dark .ncert-subject-card .subject-arrow { color: hsl(170, 75%, 65%) !important; }
html.dark .ncert-seo-text {
  background: hsl(220, 18%, 14%) !important;
  border-left-color: hsl(170, 75%, 45%) !important;
  color: hsl(0, 0%, 82%) !important;
}
html.dark .ncert-seo-text h2 { color: hsl(0, 0%, 95%) !important; }
html.dark .ncert-seo-text p { color: hsl(0, 0%, 80%) !important; }
html.dark .ncert-medium-toggle { border-top-color: hsl(220, 15%, 24%) !important; }
html.dark .ncert-medium-toggle-link,
html.dark .ncert-medium-toggle a:not(.ncert-medium-cta) { color: hsl(170, 75%, 70%) !important; }
html.dark .ncert-medium-cta {
  background: linear-gradient(135deg, hsl(210, 80%, 35%) 0%, hsl(210, 80%, 45%) 100%) !important;
  border-color: hsl(210, 80%, 50%) !important;
}

/* NCERT Chapters page (subject → chapter list) */
html.dark #ncertChapters,
html.dark .section.category#ncertChapters {
  background: hsl(220, 20%, 10%) !important;
}
html.dark #ncertChapters .container { color: hsl(0, 0%, 85%); }
html.dark #ncertChapters nav a { color: hsl(210, 100%, 75%) !important; }
html.dark #ncertChapters .ncert-chapter-link {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark #ncertChapters .ncert-chapter-link:hover {
  background: hsl(220, 25%, 24%) !important;
  border-color: hsl(210, 100%, 45%) !important;
}

/* ========== VIDEO LECTURE SHOW PAGE ========== */
html.dark .vl-page {
  background: hsl(220, 20%, 10%) !important;
  background-image: none !important;
}
html.dark .vl-hero {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .vl-title { color: hsl(0, 0%, 96%) !important; }
html.dark .vl-meta { color: hsl(0, 0%, 68%) !important; }
html.dark .vl-badge {
  background: linear-gradient(135deg, hsl(260, 60%, 45%) 0%, hsl(280, 55%, 40%) 100%) !important;
}
html.dark .vl-intro,
html.dark .vl-intro p { color: hsl(0, 0%, 78%) !important; }
html.dark .vl-study-notes {
  background: hsl(220, 18%, 16%) !important;
  background-image: none !important;
  border-color: hsl(220, 15%, 26%) !important;
}
html.dark .vl-study-notes-title {
  background: linear-gradient(135deg, hsl(260, 60%, 45%) 0%, hsl(280, 55%, 40%) 100%) !important;
}
html.dark .vl-study-notes-content {
  color: hsl(0, 0%, 85%) !important;
}
html.dark .vl-study-notes-content h2 {
  color: hsl(0, 0%, 95%) !important;
  border-bottom-color: hsl(220, 15%, 28%) !important;
}
html.dark .vl-study-notes-content h3 { color: hsl(0, 0%, 92%) !important; }
html.dark .vl-study-notes-content h4 { color: hsl(0, 0%, 88%) !important; }
html.dark .vl-study-notes-content p { color: hsl(0, 0%, 80%) !important; }
html.dark .vl-study-notes-content strong { color: hsl(0, 0%, 95%) !important; }
html.dark .vl-study-notes-content ul,
html.dark .vl-study-notes-content ol { color: hsl(0, 0%, 80%) !important; }
html.dark .vl-study-notes-content ul li::marker,
html.dark .vl-study-notes-content ol li::marker { color: hsl(260, 70%, 70%) !important; }
html.dark .vl-study-notes-content a { color: hsl(210, 100%, 75%) !important; }
html.dark .vl-study-notes-content a:hover { color: hsl(210, 100%, 85%) !important; }
html.dark .vl-actions { border-top-color: hsl(220, 15%, 24%) !important; }
html.dark .vl-btn-secondary {
  background: hsl(220, 18%, 22%) !important;
  color: hsl(0, 0%, 85%) !important;
  border-color: hsl(220, 15%, 30%) !important;
}
html.dark .vl-btn-secondary:hover {
  background: hsl(220, 20%, 28%) !important;
}
html.dark .vl-more-section {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .vl-more-section h2 { color: hsl(0, 0%, 95%) !important; }
html.dark .vl-more-section a { color: hsl(210, 100%, 75%) !important; }
html.dark .vl-more-section a:hover { color: hsl(210, 100%, 85%) !important; }

/* ========== ADMIN (when dark mode) ========== */
html.dark .admin-layout-body { background: hsl(220, 20%, 10%) !important; }
html.dark .admin-hub-page { background: hsl(220, 20%, 10%) !important; }
html.dark .admin-hub-header { background: hsl(220, 22%, 12%) !important; }
html.dark .admin-hub-title-wrapper h1 { color: hsl(0, 0%, 96%) !important; }
html.dark .admin-hub-title-wrapper p { color: hsl(0, 0%, 75%) !important; }
html.dark .admin-hub-stat { background: hsl(220, 18%, 16%) !important; border-color: hsl(220, 15%, 24%) !important; }
html.dark .admin-hub-stat .num { color: hsl(0, 0%, 95%) !important; }
html.dark .admin-hub-stat .label { color: hsl(0, 0%, 72%) !important; }
html.dark .admin-hub-card {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .admin-hub-card h3 { color: hsl(0, 0%, 95%) !important; }
html.dark .admin-hub-card p { color: hsl(0, 0%, 75%) !important; }

/* Admin – ALL inputs, textareas, selects (ensure visible text) */
html.dark .admin-layout-body input,
html.dark .admin-layout-body textarea,
html.dark .admin-layout-body select {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .admin-layout-body input::placeholder,
html.dark .admin-layout-body textarea::placeholder {
  color: hsl(0, 0%, 55%) !important;
}
html.dark .admin-layout-body select option {
  background: hsl(220, 18%, 16%);
  color: hsl(0, 0%, 92%);
}
html.dark .admin-layout-body label { color: hsl(0, 0%, 88%) !important; }
html.dark .admin-layout-body small { color: hsl(0, 0%, 70%) !important; }
html.dark .admin-layout-body a { color: hsl(210, 100%, 75%) !important; }
html.dark .admin-layout-body h1,
html.dark .admin-layout-body h2,
html.dark .admin-layout-body h3 { color: hsl(0, 0%, 96%) !important; }
html.dark .admin-layout-body p { color: hsl(0, 0%, 82%) !important; }

/* Admin page wrappers – dark background */
html.dark .admin-layout-body .ca-page,
html.dark .admin-layout-body .lj-page,
html.dark .admin-layout-body .qa-page,
html.dark .admin-layout-body .nb-page,
html.dark .admin-layout-body .page-edit-video,
html.dark .admin-layout-body .overlay-page,
html.dark .ca-page,
html.dark .lj-page,
html.dark .qa-page,
html.dark .nb-page,
html.dark .overlay-page {
  background: hsl(220, 20%, 10%) !important;
  background-image: none !important;
}
html.dark .admin-layout-body .ca-page::before,
html.dark .admin-layout-body .lj-page::before,
html.dark .admin-layout-body .qa-page::before,
html.dark .admin-layout-body .page-edit-video::before,
html.dark .admin-layout-body .overlay-page::before,
html.dark .ca-page::before,
html.dark .lj-page::before,
html.dark .qa-page::before,
html.dark .overlay-page::before {
  display: none;
}

/* CA (Current Affairs) */
html.dark .ca-card { background: hsl(220, 18%, 14%) !important; border-color: hsl(220, 15%, 24%) !important; }
html.dark .ca-field input,
html.dark .ca-field textarea,
html.dark .ca-field select {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .ca-ai-box { background: hsl(220, 22%, 14%) !important; border-color: hsl(220, 15%, 26%) !important; }
html.dark .ca-ai-box h3, html.dark .ca-ai-box p { color: hsl(0, 0%, 85%) !important; }
html.dark .ca-ai-box textarea { background: hsl(220, 18%, 16%) !important; color: hsl(0, 0%, 92%) !important; }
html.dark .ca-tab { background: hsl(220, 18%, 22%) !important; color: hsl(0, 0%, 88%) !important; }
html.dark .ca-tab.active { background: hsl(210, 100%, 45%) !important; color: #fff !important; }
html.dark .ca-paste-wrap textarea,
html.dark .ca-upload-wrap textarea { background: hsl(220, 18%, 16%) !important; color: hsl(0, 0%, 92%) !important; }
html.dark .ca-alert-success { background: hsl(142, 40%, 18%) !important; color: #86efac !important; border-left-color: #22c55e !important; }
html.dark .ca-alert-error { background: hsl(0, 40%, 18%) !important; color: #fca5a5 !important; border-left-color: #ef4444 !important; }
html.dark .ca-alert-warn { background: hsl(38, 40%, 18%) !important; color: #fcd34d !important; border-left-color: #f59e0b !important; }

/* LJ (Latest Jobs, Admit Cards, Results, Answer Keys) */
html.dark .lj-card { background: hsl(220, 18%, 14%) !important; border-color: hsl(220, 15%, 24%) !important; }
html.dark .lj-field input,
html.dark .lj-field textarea {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .lj-ai-box { background: hsl(220, 22%, 14%) !important; border-color: hsl(220, 15%, 26%) !important; }
html.dark .lj-ai-box h3 { color: hsl(0, 0%, 92%) !important; }
html.dark .lj-ai-box textarea,
html.dark .lj-ai-box #ai-input,
html.dark .lj-ai-box #ai-output { background: hsl(220, 18%, 16%) !important; color: hsl(0, 0%, 92%) !important; border-color: hsl(220, 15%, 28%) !important; }
html.dark .lj-ai-prompt {
  background: hsl(220, 22%, 14%) !important;
  border-color: hsl(220, 15%, 26%) !important;
}
html.dark .lj-ai-prompt label { color: hsl(0, 0%, 88%) !important; }
html.dark .lj-ai-prompt textarea,
html.dark .lj-ai-prompt #ai-prompt {
  background: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .lj-ai-prompt textarea:focus,
html.dark .lj-ai-prompt #ai-prompt:focus {
  border-color: hsl(260, 70%, 55%) !important;
  box-shadow: 0 0 0 3px hsla(260, 70%, 55%, 0.25) !important;
}
html.dark .lj-ai-prompt textarea::placeholder { color: hsl(0, 0%, 55%) !important; }

/* QA (Question Papers) */
html.dark .qa-card { background: hsl(220, 18%, 14%) !important; border-color: hsl(220, 15%, 24%) !important; }
html.dark .qa-field input {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}

/* NB (NCERT Books) */
html.dark .nb-page { background: hsl(220, 20%, 10%) !important; }
html.dark .nb-card { background: hsl(220, 18%, 14%) !important; border-color: hsl(220, 15%, 24%) !important; }
html.dark .nb-field input,
html.dark .nb-field select {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}

/* Page edit video (videos admin) */
html.dark .page-edit-video .card { background: hsl(220, 18%, 14%) !important; border-color: hsl(220, 15%, 24%) !important; }
html.dark .page-edit-video .field input,
html.dark .page-edit-video .field textarea,
html.dark .page-edit-video .field select,
html.dark .page-edit-video .form-field input,
html.dark .page-edit-video .form-field textarea,
html.dark .page-edit-video .form-field select,
html.dark .page-edit-video .order-input {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .page-edit-video .card-body,
html.dark .page-edit-video .card-content,
html.dark .page-edit-video .field .hint { color: hsl(0, 0%, 88%) !important; }

/* QA search (video lectures, current affairs list) */
html.dark .qa-search {
  background: hsl(220, 18%, 16%) !important;
  background-image: none !important;
  border-color: hsl(220, 15%, 26%) !important;
}
html.dark .qa-search input,
html.dark .qa-search select {
  background-color: hsl(220, 18%, 18%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .qa-search .qa-search-field label { color: hsl(0, 0%, 82%) !important; }
html.dark .qa-search .qa-search-clear {
  background: hsl(220, 18%, 28%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .qa-search .qa-search-clear:hover {
  background: hsl(220, 20%, 34%) !important;
}

/* QA header, card text, rows (video lectures index) */
html.dark .qa-header h1 { color: hsl(0, 0%, 96%) !important; }
html.dark .qa-header p { color: hsl(0, 0%, 75%) !important; }
html.dark .qa-card h3 { color: hsl(0, 0%, 92%) !important; }
html.dark .qa-row {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
}
html.dark .qa-row:hover { background: hsl(220, 20%, 20%) !important; }
html.dark .qa-row-info strong { color: hsl(0, 0%, 94%) !important; }
html.dark .qa-row-info small { color: hsl(0, 0%, 72%) !important; }
html.dark .qa-empty p { color: hsl(0, 0%, 75%) !important; }
html.dark .qa-alert-success {
  background: hsl(142, 40%, 18%) !important;
  color: #86efac !important;
  border-left-color: #22c55e !important;
}

/* CA date picker, list rows */
html.dark .ca-date-picker {
  background: hsl(220, 18%, 18%) !important;
  border-color: hsl(220, 15%, 26%) !important;
}
html.dark .ca-date-picker input { background: hsl(220, 18%, 16%) !important; color: hsl(0, 0%, 92%) !important; }
html.dark .ca-row {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .ca-row:hover { background: hsl(220, 20%, 20%) !important; }

/* Overlay page (PDF overlay settings) */
html.dark .overlay-card { background: hsl(220, 18%, 14%) !important; border-color: hsl(220, 15%, 24%) !important; }
html.dark .overlay-card h2 { color: hsl(0, 0%, 96%) !important; }
html.dark .overlay-card .subtitle { color: hsl(0, 0%, 75%) !important; }
html.dark .overlay-card .subtitle a { color: hsl(210, 100%, 75%) !important; }
html.dark .overlay-card .subtitle a:hover { color: hsl(210, 100%, 85%) !important; }
html.dark .overlay-field label { color: hsl(0, 0%, 88%) !important; }
html.dark .overlay-field input,
html.dark .overlay-field select {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .overlay-info-box { background: hsl(220, 40%, 18%) !important; color: hsl(210, 100%, 80%) !important; border-left-color: hsl(210, 100%, 50%) !important; }
html.dark .overlay-info-box strong { color: inherit !important; }
html.dark .apply-to-quick button {
  background: hsl(220, 18%, 18%) !important;
  color: hsl(0, 0%, 85%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .apply-to-quick button:hover {
  background: hsl(220, 20%, 24%) !important;
  color: hsl(0, 0%, 92%) !important;
}
html.dark .apply-to-option {
  background: hsl(220, 18%, 16%) !important;
  border-color: hsl(220, 15%, 26%) !important;
}
html.dark .apply-to-option:hover {
  border-color: hsl(220, 20%, 36%) !important;
  background: hsl(220, 20%, 20%) !important;
}
html.dark .apply-to-option.selected {
  border-color: hsl(260, 70%, 55%) !important;
  background: hsl(260, 40%, 18%) !important;
}
html.dark .apply-to-option-text strong { color: hsl(0, 0%, 94%) !important; }
html.dark .apply-to-option-text small { color: hsl(0, 0%, 68%) !important; }
html.dark .apply-to-option input { accent-color: hsl(260, 70%, 55%); }
html.dark .overlay-alert-success {
  background: hsl(142, 40%, 18%) !important;
  color: #86efac !important;
  border-left-color: #22c55e !important;
}
html.dark .apply-to-section small { color: hsl(0, 0%, 68%) !important; }

/* NB table */
html.dark .nb-table th,
html.dark .nb-table td { border-color: hsl(220, 15%, 26%) !important; color: hsl(0, 0%, 90%) !important; }
html.dark .nb-table th { background: hsl(220, 18%, 16%) !important; }
html.dark .nb-table td { background: hsl(220, 18%, 14%) !important; }
html.dark .nb-badge { background: hsl(220, 40%, 22%) !important; color: hsl(260, 70%, 75%) !important; }

/* Admin tables */
html.dark .admin-layout-body table,
html.dark .admin-layout-body th,
html.dark .admin-layout-body td {
  border-color: hsl(220, 15%, 26%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .admin-layout-body th { background: hsl(220, 18%, 16%) !important; }
html.dark .admin-layout-body td { background: hsl(220, 18%, 14%) !important; }
html.dark .admin-layout-body tr:hover td { background: hsl(220, 20%, 18%) !important; }

/* Admin video lectures edit form (and similar admin forms) */
html.dark .admin-layout-body .vl-page {
  background: hsl(220, 20%, 10%) !important;
  background-image: none !important;
}
html.dark .admin-layout-body .vl-page::before {
  display: none;
}
html.dark .vl-card {
  background: hsl(220, 18%, 14%) !important;
  border-color: hsl(220, 15%, 24%) !important;
}
html.dark .vl-card h2 { color: hsl(0, 0%, 96%) !important; }
html.dark .vl-card p,
html.dark .vl-card small { color: hsl(0, 0%, 75%) !important; }
html.dark .vl-card a { color: hsl(210, 100%, 75%) !important; }
html.dark .vl-field label { color: hsl(0, 0%, 88%) !important; }
html.dark .vl-field input,
html.dark .vl-field textarea {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .vl-field input::placeholder,
html.dark .vl-field textarea::placeholder {
  color: hsl(0, 0%, 55%) !important;
}
html.dark .vl-ai-box {
  background: hsl(220, 25%, 16%) !important;
  border-left-color: hsl(210, 100%, 50%) !important;
}
html.dark .vl-ai-box h3 { color: hsl(210, 100%, 80%) !important; }
html.dark .vl-ai-box p { color: hsl(0, 0%, 80%) !important; }
html.dark .vl-ai-box textarea {
  background-color: hsl(220, 18%, 16%) !important;
  color: hsl(0, 0%, 92%) !important;
  border-color: hsl(220, 15%, 28%) !important;
}
html.dark .vl-tab {
  background: hsl(220, 18%, 22%) !important;
  color: hsl(0, 0%, 88%) !important;
}
html.dark .vl-tab.active {
  background: hsl(210, 100%, 45%) !important;
  color: #fff !important;
}
html.dark .vl-segment-option {
  background: hsl(220, 18%, 18%) !important;
  border-color: hsl(220, 15%, 28%) !important;
  color: hsl(0, 0%, 90%) !important;
}
html.dark .vl-segment-option:hover {
  border-color: hsl(210, 100%, 45%) !important;
  background: hsl(220, 25%, 22%) !important;
}
html.dark .vl-segment-option:has(input:checked) {
  border-color: hsl(210, 100%, 50%) !important;
  background: hsl(220, 40%, 18%) !important;
}
html.dark .vl-current-url { color: hsl(0, 0%, 80%) !important; }
html.dark .vl-current-url a { color: hsl(210, 100%, 75%) !important; }
html.dark details.vl-ai-box,
html.dark .vl-ai-box details {
  background: hsl(220, 22%, 14%) !important;
}
html.dark details summary { color: hsl(210, 100%, 80%) !important; }
html.dark .vl-actions { border-top-color: hsl(220, 15%, 24%) !important; }
html.dark .vl-field input[type="checkbox"] {
  accent-color: hsl(210, 100%, 50%);
}