/* EduXperti — Domain Curriculum Design System (Royal Blue) */
:root {
  --dx-border: #DBEAFE;
  --dx-panel: #FFFFFF;
  --dx-heading: #12346B;
  --dx-hover: #F0F6FF;
  --dx-shadow: 0 4px 14px rgba(18, 52, 107, 0.04);
  --dx-motion: 220ms;
  --dx-banner: #F0F6FF;
}
html[data-theme="dark"] {
  --dx-border: rgba(219, 234, 254, 0.12);
  --dx-panel: #0E182A;
  --dx-heading: #F8FAFC;
  --dx-hover: #111C3A;
  --dx-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --dx-banner: #111C3A;
}

.main:has(.dx-layout) {
  max-width: 1240px;
  padding-top: 24px;
}
.main:has(.dx-layout) .crumbs {
  font-size: 13px;
  margin-bottom: 20px;
  color: #4B6382;
  font-weight: 500;
}
.main:has(.dx-layout) .crumbs a {
  color: #155EEF;
  text-decoration: none;
  font-weight: 600;
}
.main:has(.dx-layout) .crumbs a:hover {
  text-decoration: underline;
}

/* Hero Section */
.main:has(.dx-layout) .exam-hero {
  background: linear-gradient(135deg, #0B1727 0%, #102A45 55%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  margin: 16px auto 28px auto !important;
  max-width: 1200px !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(11, 23, 39, 0.3) !important;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.main:has(.dx-layout) .exam-hero-ic {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 40px;
  display: grid;
  place-items: center;
  color: #FFFFFF;
}
.main:has(.dx-layout) .exam-hero .grow {
  min-width: 0;
}
.main:has(.dx-layout) .exam-hero .eyebrow {
  font-size: 11px;
  color: #60A5FA !important;
  margin: 0 0 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.main:has(.dx-layout) .exam-hero h1 {
  font-size: 32px !important;
  line-height: 1.2;
  color: #FFFFFF !important;
  margin: 0 0 10px;
  font-weight: 800;
  background: none;
  -webkit-text-fill-color: #FFFFFF;
}
.main:has(.dx-layout) .exam-hero .lead {
  color: #CBD5E1 !important;
  font-size: 15px;
  margin: 0 0 16px;
  max-width: 680px;
  line-height: 1.6;
  -webkit-text-fill-color: #CBD5E1;
}
.main:has(.dx-layout) .dx-chips {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.main:has(.dx-layout) .chip-stat {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.main:has(.dx-layout) .exam-hero .btn {
  min-height: 42px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
}

/* Quick Bar */
.main:has(.dx-layout) .dx-quick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.main:has(.dx-layout) .dx-q {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  gap: 0 8px;
  padding: 16px;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(18, 52, 107, 0.03);
  background: #FFFFFF !important;
  min-width: 0;
  text-decoration: none;
  transition: all var(--dx-motion);
}
html[data-theme="dark"] .main:has(.dx-layout) .dx-q {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}
.main:has(.dx-layout) .dx-q i {
  grid-row: 1/3;
  align-self: center;
  font-size: 20px;
  color: #155EEF;
}
.main:has(.dx-layout) .dx-q b {
  font-size: 22px;
  color: #12346B;
  font-weight: 800;
}
html[data-theme="dark"] .main:has(.dx-layout) .dx-q b {
  color: #F8FAFC;
}
.main:has(.dx-layout) .dx-q span {
  font-size: 11px;
  color: #4B6382;
  font-weight: 600;
}
.main:has(.dx-layout) .dx-q:hover {
  transform: translateY(-2px);
  border-color: #93C5FD !important;
  background: #F0F6FF !important;
}

/* Main Layout Grid */
.dx-layout {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 28px !important;
  align-items: start;
}
.dx-layout .domain-main {
  min-width: 0;
}
.dx-layout .sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 18px;
  color: #12346B;
}
html[data-theme="dark"] .dx-layout .sec-title {
  color: #F8FAFC;
}
.dx-layout .sec-title small {
  background: #F0F6FF;
  color: #155EEF;
  border: 1px solid #DBEAFE;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}

/* Uni Grid */
.dx-layout .uni-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.dx-layout .uni-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 4px 14px;
  text-align: left;
  padding: 20px;
  min-height: 152px;
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  box-shadow: 0 2px 8px rgba(18, 52, 107, 0.04) !important;
  border-radius: 14px !important;
  transition: all var(--dx-motion);
  text-decoration: none;
  position: relative;
}
html[data-theme="dark"] .dx-layout .uni-card {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}
.dx-layout .uni-card:hover {
  border-color: #93C5FD !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(21, 94, 239, 0.12) !important;
}
.dx-layout .uni-card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #12346B;
}
html[data-theme="dark"] .dx-layout .uni-card h3 {
  color: #F8FAFC;
}
.dx-layout .uni-city {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 12px;
  color: #4B6382;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dx-layout .uni-card-foot {
  grid-column: 1/-1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-right: 95px;
}
.dx-layout .uni-card-foot span {
  background: #F0F6FF !important;
  border: 1px solid #DBEAFE !important;
  padding: 3px 8px;
  border-radius: 6px;
  color: #155EEF;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html[data-theme="dark"] .dx-layout .uni-card-foot span {
  background: rgba(21, 94, 239, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #60A5FA;
}
.dx-layout .uni-go,
.dx-layout .open-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
}

/* Subject & Chapters */
.dx-layout .subject {
  padding: 24px !important;
  margin-bottom: 24px;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
}
html[data-theme="dark"] .dx-layout .subject {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}
.dx-layout .subject h2 {
  font-size: 20px;
  font-weight: 800;
  color: #12346B;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
html[data-theme="dark"] .dx-layout .subject h2 {
  color: #F8FAFC;
}
.dx-layout .subject > p {
  font-size: 14px;
  line-height: 1.6;
  color: #4B6382;
  margin: 0 0 16px;
}
.dx-layout .chap-btns {
  display: flex;
  gap: 8px;
  padding: 0 0 16px;
  flex-wrap: wrap;
}
.dx-layout .chap-btn {
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  font-size: 13px;
  font-weight: 600;
  min-height: 38px;
  padding: 8px 14px;
  color: #12346B;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dx-layout .chap-btn:hover {
  background: #F0F6FF !important;
  border-color: #93C5FD !important;
}
.dx-layout .chap-btn.active {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25) !important;
}
.dx-layout .chap-btn small {
  opacity: 0.85;
}

/* Topic Rows */
.dx-layout .topic-row {
  background: #FFFFFF;
  border: 1px solid #DBEAFE !important;
  border-radius: 10px;
  margin: 0 0 10px;
  transition: border-color 0.2s ease;
}
html[data-theme="dark"] .dx-layout .topic-row {
  background: #0E182A;
  border-color: rgba(219, 234, 254, 0.12) !important;
}
.dx-layout .topic-row summary {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #12346B;
  cursor: pointer;
}
html[data-theme="dark"] .dx-layout .topic-row summary {
  color: #F8FAFC;
}
.dx-layout .topic-row[open] {
  border-color: #155EEF !important;
}
.dx-layout .topic-items {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dx-layout .t-item {
  border-radius: 8px;
  background: #F0F6FF;
  border: 1px solid #DBEAFE;
  min-height: 44px;
  font-size: 13px;
  color: #12346B;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: 500;
}
html[data-theme="dark"] .dx-layout .t-item {
  background: #111C3A;
  border-color: rgba(219, 234, 254, 0.12);
  color: #F8FAFC;
}
.dx-layout .t-item:hover {
  background: #E0EDFF;
  border-color: #BFDBFE;
}
.dx-layout .t-more {
  font-size: 12px;
  font-weight: 700;
  color: #155EEF;
  text-decoration: none;
  padding: 4px 0 0;
}

/* Sidebar Study Hub */
.dx-side {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
}
html[data-theme="dark"] .dx-side {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}
.dx-hub-head {
  background: #FFFFFF;
  border-bottom: 1px solid #DBEAFE;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-theme="dark"] .dx-hub-head {
  background: #0E182A;
  border-color: rgba(219, 234, 254, 0.12);
}
.dx-hub-head h3 {
  color: #12346B;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}
html[data-theme="dark"] .dx-hub-head h3 {
  color: #F8FAFC;
}
.dx-hub-head .meta {
  color: #4B6382;
  font-size: 12px;
  margin: 0;
}
.dx-hub-ic {
  border-radius: 10px;
  background: #F0F6FF;
  color: #155EEF;
  border: 1px solid #DBEAFE;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 20px;
}
html[data-theme="dark"] .dx-hub-ic {
  background: rgba(21, 94, 239, 0.15);
  color: #60A5FA;
  border-color: rgba(96, 165, 250, 0.3);
}
.dx-tabs {
  background: #FFFFFF !important;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid #DBEAFE;
  display: flex;
}
html[data-theme="dark"] .dx-tabs {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12);
}
.dx-tab {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  color: #4B6382;
  border: none;
  cursor: pointer;
  flex: 1;
}
.dx-tab.active {
  background: #F0F6FF !important;
  color: #155EEF !important;
  font-weight: 700;
}
html[data-theme="dark"] .dx-tab.active {
  background: rgba(21, 94, 239, 0.15) !important;
  color: #60A5FA !important;
}

@media (min-width: 961px) {
  .dx-layout > .dx-side {
    position: sticky;
    top: 150px;
  }
}
@media (max-width: 960px) {
  .dx-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 560px) {
  .main:has(.dx-layout) .exam-hero {
    padding: 20px !important;
    gap: 16px;
  }
  .main:has(.dx-layout) .exam-hero-ic {
    display: none;
  }
  .main:has(.dx-layout) .exam-hero h1 {
    font-size: 26px !important;
  }
  .main:has(.dx-layout) .dx-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dx-layout .uni-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   HIGH CONTRAST & LEGIBILITY DESIGN SYSTEM OVERRIDES (/domain?id=*)
   ========================================================================== */

/* Fix Subject Description Text Contrast (Crisp Slate Navy for 100% legibility) */
.subject-description,
.subject-header-desc,
.subject > p,
.subject p.muted,
section.subject-section p,
section.subject p,
.dx-layout .subject > p,
.dx-layout .subject p.muted {
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  text-transform: none !important; /* Stop aggressive all-caps */
}

/* Subject Title */
.subject-section h2,
.subject h2,
.subject-title,
.dx-layout .subject h2,
.dx-layout .subject-section h2 {
  color: #12346B !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* Remove Distracting Background Blue Blur/Blob */
.subject-section::before,
.subject-section::after,
.subject::before,
.subject::after,
div:has(> .subject-description)::before {
  display: none !important;
}

/* Chapter Pill Buttons (Fix Dark-on-Dark: Make Crisp White Pill with Deep Navy Text) */
.dx-layout .chap-btns,
.chap-btns {
  display: flex !important;
  gap: 10px !important;
  padding: 0 0 16px !important;
  flex-wrap: wrap !important;
}

.dx-layout .chap-btn,
.chap-btn,
button.chap-btn {
  border-radius: 999px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
  color: #12346B !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(18, 52, 107, 0.04) !important;
  transition: all 0.2s ease !important;
}

.dx-layout .chap-btn:hover,
.chap-btn:hover,
button.chap-btn:hover {
  background: #F0F6FF !important;
  background-color: #F0F6FF !important;
  border-color: #93C5FD !important;
  color: #155EEF !important;
  transform: translateY(-1px) !important;
}

.dx-layout .chap-btn.active,
.chap-btn.active,
button.chap-btn.active {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.28) !important;
}

.dx-layout .chap-btn small,
.chap-btn small {
  color: #475569 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  margin-left: 4px !important;
}

.dx-layout .chap-btn.active small,
.chap-btn.active small {
  color: #FFFFFF !important;
  opacity: 0.9 !important;
}

/* Jump Navigation Pills (Quick Exam Track Jump) */
.dx-jump a {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #12346B !important;
  border: 1.5px solid #DBEAFE !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(18, 52, 107, 0.04) !important;
}

.dx-jump a:hover {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
}

/* Topic Accordion Details & Summaries */
.dx-layout .topic-row summary,
.topic-row summary {
  color: #12346B !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

/* Target Universities & Section Headings */
.dx-layout .sec-title,
.sec-title {
  color: #12346B !important;
  font-weight: 800 !important;
}

.dx-layout .uni-card h3,
.uni-card h3 {
  color: #12346B !important;
  font-weight: 800 !important;
}

.dx-layout .uni-city,
.uni-city {
  color: #475569 !important;
  font-weight: 600 !important;
}

.dx-layout .dx-hub-head h3 {
  color: #12346B !important;
  font-weight: 800 !important;
}

.dx-layout .dx-hub-head .meta {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* Dark Mode Preservation */
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-header-desc,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject > p,
body.dark-mode .subject > p,
html[data-theme="dark"] .subject p.muted,
body.dark-mode .subject p.muted,
html[data-theme="dark"] section.subject-section p,
body.dark-mode section.subject-section p {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .subject-section h2,
body.dark-mode .subject-section h2,
html[data-theme="dark"] .subject h2,
body.dark-mode .subject h2,
html[data-theme="dark"] .subject-title,
body.dark-mode .subject-title,
html[data-theme="dark"] .dx-layout .subject h2,
body.dark-mode .dx-layout .subject h2 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .dx-layout .chap-btn,
body.dark-mode .dx-layout .chap-btn,
html[data-theme="dark"] .chap-btn,
body.dark-mode .chap-btn {
  background: #111C3A !important;
  background-color: #111C3A !important;
  color: #CBD5E1 !important;
  border-color: rgba(219, 234, 254, 0.16) !important;
}

html[data-theme="dark"] .dx-layout .chap-btn small,
body.dark-mode .dx-layout .chap-btn small,
html[data-theme="dark"] .chap-btn small,
body.dark-mode .chap-btn small {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .dx-layout .chap-btn.active,
body.dark-mode .dx-layout .chap-btn.active,
html[data-theme="dark"] .chap-btn.active,
body.dark-mode .chap-btn.active {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
}

html[data-theme="dark"] .dx-jump a,
body.dark-mode .dx-jump a {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #CBD5E1 !important;
}


/* ==========================================================================
   SUBJECT CARD HEADER STACK & HIGH-CONTRAST DYNAMIC TYPOGRAPHY
   ========================================================================== */

/* Subject Card Header Stack */
.subject-section,
div:has(> .subject-description),
section:has(> details),
section:has(details),
.dx-layout .subject {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
}

/* Fix Subject Title */
.subject-section h2,
.subject-title,
.dx-layout .subject h2,
.dx-layout .subject-section h2 {
  color: #12346B !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.subject-title-icon,
.subject-section h2 svg,
.subject-title svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #155EEF !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
}

/* FIX THE WASHED-OUT LINE (Light Mode) */
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) div:has(> h2) + p,
html:not([data-theme="dark"]) div:has(> h2) + p,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
.subject-description,
.subject-header-desc {
  color: #334155 !important; /* Deep Slate Navy for high contrast & legibility */
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  max-width: 750px !important;
  margin: 0 0 16px 0 !important;
  text-transform: none !important;
}

/* FIX THE WASHED-OUT LINE (Dark Mode) */
body.dark-mode .subject-section,
body.dark-mode section:has(> details),
body.dark-mode section:has(details),
body.dark-mode .dx-layout .subject,
html[data-theme="dark"] .subject-section,
html[data-theme="dark"] section:has(> details),
html[data-theme="dark"] section:has(details),
html[data-theme="dark"] .dx-layout .subject {
  background-color: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .subject-section h2,
body.dark-mode .subject-title,
body.dark-mode .dx-layout .subject h2,
html[data-theme="dark"] .subject-section h2,
html[data-theme="dark"] .subject-title,
html[data-theme="dark"] .dx-layout .subject h2 {
  color: #FFFFFF !important;
}

body.dark-mode .subject-description,
body.dark-mode .subject-section p,
body.dark-mode div:has(> h2) + p,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-description,
html[data-theme="dark"] .subject-section p,
html[data-theme="dark"] div:has(> h2) + p,
html[data-theme="dark"] .subject-header-desc {
  color: #94A3B8 !important; /* Clean light slate for dark mode */
}

body.dark-mode .subject-title-icon,
html[data-theme="dark"] .subject-title-icon,
body.dark-mode .subject-section h2 svg,
html[data-theme="dark"] .subject-section h2 svg,
body.dark-mode .subject-title svg,
html[data-theme="dark"] .subject-title svg {
  color: #60A5FA !important;
}



/* ==========================================================================
   DYNAMIC THEME CONTRAST & STUDY HUB SAAS CARDS
   ========================================================================== */

/* LIGHT MODE: High-Contrast Navy & Slate */
body:not(.dark-mode) .subject-section,
html:not([data-theme="dark"]) .subject-section,
body:not(.dark-mode) section:has(details),
html:not([data-theme="dark"]) section:has(details),
body:not(.dark-mode) main > div > section,
html:not([data-theme="dark"]) main > div > section,
body:not(.dark-mode) .dx-layout .subject,
html:not([data-theme="dark"]) .dx-layout .subject {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
}

/* Fix the invisible white text bug in Light Mode */
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) section p,
html:not([data-theme="dark"]) section p,
body:not(.dark-mode) div:has(> details) p,
html:not([data-theme="dark"]) div:has(> details) p,
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
.subject-description,
.subject-header-desc {
  color: #334155 !important; /* Deep Slate Navy - 100% visible on white */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-transform: none !important;
}

body:not(.dark-mode) .subject-section h2,
html:not([data-theme="dark"]) .subject-section h2,
body:not(.dark-mode) section h2,
html:not([data-theme="dark"]) section h2,
body:not(.dark-mode) .subject-title,
html:not([data-theme="dark"]) .subject-title {
  color: #12346B !important;
  font-weight: 800 !important;
}

/* DARK MODE: Polished Slate on Navy */
body.dark-mode .subject-section,
html[data-theme="dark"] .subject-section,
body.dark-mode section:has(details),
html[data-theme="dark"] section:has(details),
body.dark-mode main > div > section,
html[data-theme="dark"] main > div > section,
body.dark-mode .dx-layout .subject,
html[data-theme="dark"] .dx-layout .subject {
  background-color: #111C3A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .subject-section p,
html[data-theme="dark"] .subject-section p,
body.dark-mode section p,
html[data-theme="dark"] section p,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-header-desc {
  color: #94A3B8 !important; /* Light Slate for Dark Mode */
  opacity: 1 !important;
}

body.dark-mode .subject-section h2,
html[data-theme="dark"] .subject-section h2,
body.dark-mode section h2,
html[data-theme="dark"] section h2,
body.dark-mode .subject-title,
html[data-theme="dark"] .subject-title {
  color: #FFFFFF !important;
}

/* STUDY HUB SIDEBAR SAAS CARD */
aside.papers-side,
aside.dx-side,
#dx-hub {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
  overflow: hidden !important;
}

.dx-hub-head {
  padding: 18px 20px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #DBEAFE !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.dx-hub-head h3 {
  color: #12346B !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.dx-hub-head .meta {
  color: #475569 !important;
  font-size: 12px !important;
  margin: 2px 0 0 0 !important;
}

.dx-hub-ic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #155EEF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.dx-tabs {
  display: flex !important;
  padding: 10px 14px !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #DBEAFE !important;
}

.dx-tab {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #F8FAFC !important;
  border: 1px solid #DBEAFE !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.dx-tab:hover {
  color: #155EEF !important;
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
}

.dx-tab.active {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25) !important;
}

.dx-tab.active small {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.dx-tab small {
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: rgba(18, 52, 107, 0.08) !important;
  color: #12346B !important;
  font-size: 11px !important;
}

/* STUDY HUB DARK MODE */
body.dark-mode aside.papers-side,
html[data-theme="dark"] aside.papers-side,
body.dark-mode aside.dx-side,
html[data-theme="dark"] aside.dx-side,
body.dark-mode #dx-hub,
html[data-theme="dark"] #dx-hub {
  background-color: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .dx-hub-head,
html[data-theme="dark"] .dx-hub-head {
  background: #0E182A !important;
  border-bottom-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .dx-hub-head h3,
html[data-theme="dark"] .dx-hub-head h3 {
  color: #FFFFFF !important;
}

body.dark-mode .dx-hub-head .meta,
html[data-theme="dark"] .dx-hub-head .meta {
  color: #94A3B8 !important;
}

body.dark-mode .dx-hub-ic,
html[data-theme="dark"] .dx-hub-ic {
  background: rgba(21, 94, 239, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #60A5FA !important;
}

body.dark-mode .dx-tabs,
html[data-theme="dark"] .dx-tabs {
  background: #111C3A !important;
  border-bottom-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .dx-tab,
html[data-theme="dark"] .dx-tab {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  color: #94A3B8 !important;
}

body.dark-mode .dx-tab.active,
html[data-theme="dark"] .dx-tab.active {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
}

/* TOPIC ACCORDIONS (ROYAL BLUE SAAS CARDS) */
.topic-row,
.topic-accordion-item,
details.topic-row {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(18, 52, 107, 0.02) !important;
}

.topic-row:hover,
details.topic-row:hover {
  border-color: #93C5FD !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.06) !important;
}

.topic-row[open],
details.topic-row[open] {
  border-color: #155EEF !important;
  box-shadow: 0 4px 16px rgba(21, 94, 239, 0.08) !important;
}

.topic-row summary,
details.topic-row summary {
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #12346B !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  user-select: none !important;
}

.topic-row summary::-webkit-details-marker {
  display: none !important;
}

.topic-row[open] summary,
details.topic-row[open] summary {
  background: #F8FAFC !important;
  border-bottom: 1px solid #DBEAFE !important;
}

.topic-items {
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: #FFFFFF !important;
}

.t-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.t-item:hover {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
  transform: translateX(3px) !important;
}

/* TOPIC ACCORDIONS DARK MODE */
body.dark-mode .topic-row,
html[data-theme="dark"] .topic-row,
body.dark-mode .topic-accordion-item,
html[data-theme="dark"] .topic-accordion-item,
body.dark-mode details.topic-row,
html[data-theme="dark"] details.topic-row {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: none !important;
}

body.dark-mode .topic-row[open],
html[data-theme="dark"] .topic-row[open],
body.dark-mode details.topic-row[open],
html[data-theme="dark"] details.topic-row[open] {
  border-color: #155EEF !important;
}

body.dark-mode .topic-row summary,
html[data-theme="dark"] .topic-row summary,
body.dark-mode details.topic-row summary,
html[data-theme="dark"] details.topic-row summary {
  color: #F8FAFC !important;
}

body.dark-mode .topic-row[open] summary,
html[data-theme="dark"] .topic-row[open] summary,
body.dark-mode details.topic-row[open] summary,
html[data-theme="dark"] details.topic-row[open] summary {
  background: #111C3A !important;
  border-bottom-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .topic-items,
html[data-theme="dark"] .topic-items {
  background: #0E182A !important;
}

body.dark-mode .t-item,
html[data-theme="dark"] .t-item {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.1) !important;
  color: #F1F5F9 !important;
}

body.dark-mode .t-item:hover,
html[data-theme="dark"] .t-item:hover {
  background: #152244 !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

/* CHAPTER PILLS & COUNTS */
.chap-count,
.chap-btn small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  background: rgba(18, 52, 107, 0.08) !important;
  color: #12346B !important;
}

.chap-btn.active .chap-count,
.chap-btn.active small {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

body.dark-mode .chap-count,
html[data-theme="dark"] .chap-count,
body.dark-mode .chap-btn small,
html[data-theme="dark"] .chap-btn small {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

body.dark-mode .chap-btn.active .chap-count,
html[data-theme="dark"] .chap-btn.active .chap-count,
body.dark-mode .chap-btn.active small,
html[data-theme="dark"] .chap-btn.active small {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.subject-title-icon,
.dx-jump-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}



/* ==========================================================================
   SUBJECT DESCRIPTIONS HIGH-CONTRAST & PDF THUMBNAILS
   ========================================================================== */

/* LIGHT MODE: High-Contrast Navy/Slate Text */
body:not(.dark-mode) main section > p,
html:not([data-theme="dark"]) main section > p,
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) div:has(> details) ~ p,
html:not([data-theme="dark"]) div:has(> details) ~ p,
body:not(.dark-mode) h2 + p,
html:not([data-theme="dark"]) h2 + p,
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
.subject-description,
.subject-header-desc {
  color: #334155 !important; /* Deep readable slate */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-transform: none !important;
}

/* DARK MODE: Light Slate Text */
body.dark-mode main section > p,
html[data-theme="dark"] main section > p,
body.dark-mode .subject-section p,
html[data-theme="dark"] .subject-section p,
body.dark-mode h2 + p,
html[data-theme="dark"] h2 + p,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-header-desc {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* PDF Thumbnails & Resource Previews */
.t-item img,
.dx-item img,
.paper-item img {
  width: 42px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  border: 1px solid #DBEAFE !important;
  box-shadow: 0 2px 6px rgba(18, 52, 107, 0.08) !important;
  background: #FFFFFF !important;
}

body.dark-mode .t-item img,
html[data-theme="dark"] .t-item img,
body.dark-mode .dx-item img,
html[data-theme="dark"] .dx-item img,
body.dark-mode .paper-item img,
html[data-theme="dark"] .paper-item img {
  border-color: rgba(219, 234, 254, 0.15) !important;
  background: #0E182A !important;
}

.t-ic,
.dx-ic {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #155EEF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.dark-mode .t-ic,
html[data-theme="dark"] .t-ic,
body.dark-mode .dx-ic,
html[data-theme="dark"] .dx-ic {
  background: rgba(21, 94, 239, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
  color: #60A5FA !important;
}



/* =========================================
   UNIVERSITY CARD "OPEN ->" ACTION BUTTON
   ========================================= */
a[href*="/uni?id="] > span:last-child,
.uni-card .open-btn,
.uni-card .uni-go,
.uni-go,
a[href*="/uni?id="] span:last-of-type {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  width: auto !important;
}

/* LIGHT MODE: Clean Royal Blue Solid Button */
body:not(.dark-mode) a[href*="/uni?id="] > span:last-child,
html:not([data-theme="dark"]) a[href*="/uni?id="] > span:last-child,
body:not(.dark-mode) .uni-card .open-btn,
html:not([data-theme="dark"]) .uni-card .open-btn,
body:not(.dark-mode) .uni-card .uni-go,
html:not([data-theme="dark"]) .uni-card .uni-go,
body:not(.dark-mode) .uni-go,
html:not([data-theme="dark"]) .uni-go,
body:not(.dark-mode) a[href*="/uni?id="] span:last-of-type,
html:not([data-theme="dark"]) a[href*="/uni?id="] span:last-of-type {
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border: 1px solid #155EEF !important;
  box-shadow: 0 2px 6px rgba(21, 94, 239, 0.25) !important;
}

body:not(.dark-mode) a[href*="/uni?id="]:hover > span:last-child,
html:not([data-theme="dark"]) a[href*="/uni?id="]:hover > span:last-child,
body:not(.dark-mode) .uni-card:hover .open-btn,
html:not([data-theme="dark"]) .uni-card:hover .open-btn,
body:not(.dark-mode) .uni-card:hover .uni-go,
html:not([data-theme="dark"]) .uni-card:hover .uni-go,
body:not(.dark-mode) a[href*="/uni?id="] span:last-of-type:hover,
html:not([data-theme="dark"]) a[href*="/uni?id="] span:last-of-type:hover {
  background-color: #0F4CD9 !important;
  border-color: #0F4CD9 !important;
  transform: translateX(2px) !important;
}

/* DARK MODE: Subtle Translucent Pill Button */
body.dark-mode a[href*="/uni?id="] > span:last-child,
html[data-theme="dark"] a[href*="/uni?id="] > span:last-child,
body.dark-mode .uni-card .open-btn,
html[data-theme="dark"] .uni-card .open-btn,
body.dark-mode .uni-card .uni-go,
html[data-theme="dark"] .uni-card .uni-go,
body.dark-mode .uni-go,
html[data-theme="dark"] .uni-go,
body.dark-mode a[href*="/uni?id="] span:last-of-type,
html[data-theme="dark"] a[href*="/uni?id="] span:last-of-type {
  background-color: rgba(21, 94, 239, 0.18) !important;
  color: #93C5FD !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  box-shadow: none !important;
}

body.dark-mode a[href*="/uni?id="]:hover > span:last-child,
html[data-theme="dark"] a[href*="/uni?id="]:hover > span:last-child,
body.dark-mode .uni-card:hover .open-btn,
html[data-theme="dark"] .uni-card:hover .open-btn,
body.dark-mode .uni-card:hover .uni-go,
html[data-theme="dark"] .uni-card:hover .uni-go,
body.dark-mode a[href*="/uni?id="] span:last-of-type:hover,
html[data-theme="dark"] a[href*="/uni?id="] span:last-of-type:hover {
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  transform: translateX(2px) !important;
}


/* ========================================================
   SUBJECT SYLLABUS DESCRIPTION HIGH-CONTRAST DYNAMIC RULES
   ======================================================== */
/* 1. LIGHT MODE: High-Contrast Dark Text on White Cards */
body:not(.dark-mode) main section > p,
html:not([data-theme="dark"]) main section > p,
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) section:has(details) > p,
html:not([data-theme="dark"]) section:has(details) > p,
body:not(.dark-mode) div:has(> details) p,
html:not([data-theme="dark"]) div:has(> details) p,
body:not(.dark-mode) div:has(> details) ~ p,
html:not([data-theme="dark"]) div:has(> details) ~ p,
body:not(.dark-mode) h2 + p,
html:not([data-theme="dark"]) h2 + p,
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
body:not(.dark-mode) .dx-layout .subject p,
html:not([data-theme="dark"]) .dx-layout .subject p,
.subject-description,
.subject-header-desc {
  color: #1E293B !important; /* High-contrast Slate Navy */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
}

/* Ensure Subject Titles are Deep Navy in Light Mode */
body:not(.dark-mode) .subject-section h2,
html:not([data-theme="dark"]) .subject-section h2,
body:not(.dark-mode) section:has(details) h2,
html:not([data-theme="dark"]) section:has(details) h2,
body:not(.dark-mode) .subject-title,
html:not([data-theme="dark"]) .subject-title,
body:not(.dark-mode) .dx-layout .subject h2,
html:not([data-theme="dark"]) .dx-layout .subject h2 {
  color: #12346B !important;
  font-weight: 800 !important;
}

/* 2. DARK MODE: Bright Crisp White Text on Dark Navy Cards */
body.dark-mode main section > p,
html[data-theme="dark"] main section > p,
body.dark-mode .subject-section p,
html[data-theme="dark"] .subject-section p,
body.dark-mode section:has(details) > p,
html[data-theme="dark"] section:has(details) > p,
body.dark-mode div:has(> details) p,
html[data-theme="dark"] div:has(> details) p,
body.dark-mode div:has(> details) ~ p,
html[data-theme="dark"] div:has(> details) ~ p,
body.dark-mode h2 + p,
html[data-theme="dark"] h2 + p,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-header-desc,
body.dark-mode .dx-layout .subject p,
html[data-theme="dark"] .dx-layout .subject p {
  color: #F8FAFC !important; /* Crisp Clean White */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Ensure Subject Titles are Pure White in Dark Mode */
body.dark-mode .subject-section h2,
html[data-theme="dark"] .subject-section h2,
body.dark-mode section:has(details) h2,
html[data-theme="dark"] section:has(details) h2,
body.dark-mode .subject-title,
html[data-theme="dark"] .subject-title,
body.dark-mode .dx-layout .subject h2,
html[data-theme="dark"] .dx-layout .subject h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* ========================================================
   SUBJECT LEAD DESC (.subject-lead-desc) EXPLICIT RULES
   ======================================================== */
.subject-lead-desc,
body:not(.dark-mode) .subject-lead-desc,
html:not([data-theme="dark"]) .subject-lead-desc,
body:not(.dark-mode) .subject .subject-lead-desc,
body:not(.dark-mode) .subject-section .subject-lead-desc,
body:not(.dark-mode) p.subject-lead-desc {
  color: #1E293B !important; /* High-contrast Slate Navy */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  display: block !important;
  visibility: visible !important;
}

body.dark-mode .subject-lead-desc,
html[data-theme="dark"] .subject-lead-desc,
body.dark-mode .subject .subject-lead-desc,
body.dark-mode .subject-section .subject-lead-desc,
body.dark-mode p.subject-lead-desc {
  color: #F8FAFC !important; /* Crisp Clean White */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}