@charset "UTF-8";

/* ==========================================================
   Learn.php Dark Mode
   Paid view only
   ========================================================== */

/* ==========================================================
   Page background
   ========================================================== */

body.learn-paid-dark {
  background-color: #212121 !important;
  color: #d6dee7;
}

body.learn-paid-dark .main,
body.learn-paid-dark main {
  background-color: #212121 !important;
}

/* keep paid view area dark */
body.learn-paid-dark #orc-annotate-root,
body.learn-paid-dark #orc-annotate-root > section,
body.learn-paid-dark #orc-annotate-root .container,
body.learn-paid-dark #orc-annotate-root .container-fluid,
body.learn-paid-dark #orc-annotate-root .row,
body.learn-paid-dark #orc-annotate-root .guide-reading-shell,
body.learn-paid-dark #orc-annotate-root .orc-annotate-stage,
body.learn-paid-dark #orc-annotate-root .col-lg-3,
body.learn-paid-dark #orc-annotate-root .col-lg-9,
body.learn-paid-dark #orc-annotate-root .col-xl-9,
body.learn-paid-dark #orc-annotate-root .col-lg-10 {
  background-color: transparent !important;
}

/* preview access row needs dark surroundings too */
body.learn-paid-dark .section.pt-4.pb-0,
body.learn-paid-dark .section.pt-4.pb-0 .container {
  background-color: #212121 !important;
}

/* page title area */
body.learn-paid-dark .page-title.light-background {
  background: linear-gradient(180deg, #161616 0%, #121212 100%) !important;
  border-bottom: 1px solid #2f2f2f;
}

body.learn-paid-dark .page-title h1,
body.learn-paid-dark .page-title .current,
body.learn-paid-dark .page-title .breadcrumbs ol li,
body.learn-paid-dark .page-title .breadcrumbs ol li a {
  color: #f2f2f2 !important;
}

body.learn-paid-dark .page-title .breadcrumbs ol li a:hover {
  color: #ffffff !important;
}

/* ==========================================================
   Preview banner
   ========================================================== */

body.learn-paid-dark .access-preview-banner {
  background: linear-gradient(90deg, #2c2c1f, #26261a) !important;
  border-color: #4a4a32 !important;
  color: #f2ead2 !important;
  box-shadow: none !important;
}

body.learn-paid-dark .access-preview-banner strong {
  color: #fff2cf !important;
}

body.learn-paid-dark .preview-view-switch .preview-pill {
  background: #2f2f2f !important;
  border-color: #555555 !important;
  color: #f2f2f2 !important;
}

body.learn-paid-dark .preview-view-switch .preview-pill:hover {
  background: #3a3a3a !important;
  border-color: #666666 !important;
  color: #ffffff !important;
}

body.learn-paid-dark .preview-view-switch .preview-pill.active {
  background: #f2f2f2 !important;
  color: #212121 !important;
  border-color: #f2f2f2 !important;
}

/* ==========================================================
   Paid root
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] {
  color-scheme: dark;
  background-color: transparent !important;
  color: #d6dee7;
}

/* ==========================================================
   Toggle card
   ========================================================== */

.learn-theme-toggle {
  border: 1px solid #edf1f5;
  border-radius: 1rem;
  background: #ffffff;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.learn-theme-toggle .form-check {
  min-height: auto;
}

.learn-theme-toggle .form-check-input {
  cursor: pointer;
}

.learn-theme-toggle .form-check-label {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: #394450;
}

.learn-theme-toggle .bi {
  line-height: 1;
  color: #7a392c;
}

#orc-annotate-root[data-bs-theme="dark"] .learn-theme-toggle {
  background: linear-gradient(180deg, #161b22 0%, #11161d 100%) !important;
  border-color: #2f3741 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .learn-theme-toggle .form-check-label {
  color: #f1f3f5 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .learn-theme-toggle .bi {
  color: #f2c078 !important;
}

/* ==========================================================
   General text inside paid view
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] h1,
#orc-annotate-root[data-bs-theme="dark"] h2,
#orc-annotate-root[data-bs-theme="dark"] h3,
#orc-annotate-root[data-bs-theme="dark"] h4,
#orc-annotate-root[data-bs-theme="dark"] h5,
#orc-annotate-root[data-bs-theme="dark"] h6,
#orc-annotate-root[data-bs-theme="dark"] .fw-bold,
#orc-annotate-root[data-bs-theme="dark"] .fw-semibold {
  color: #f5f5f5 !important;
}

#orc-annotate-root[data-bs-theme="dark"] p,
#orc-annotate-root[data-bs-theme="dark"] li,
#orc-annotate-root[data-bs-theme="dark"] div,
#orc-annotate-root[data-bs-theme="dark"] span,
#orc-annotate-root[data-bs-theme="dark"] label {
  border-color: inherit;
}

#orc-annotate-root[data-bs-theme="dark"] .text-muted,
#orc-annotate-root[data-bs-theme="dark"] .text-body-secondary,
#orc-annotate-root[data-bs-theme="dark"] .small.text-muted {
  color: #bfc6ce !important;
}

/* ==========================================================
   Sidebar
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-sidebar {
  background: linear-gradient(180deg, #11161d 0%, #0f141a 100%) !important;
  border: 1px solid #2b3440 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-sidebar-header {
  background: #161b22 !important;
  border-bottom: 1px solid #2b3440 !important;
  padding: 1.1rem 1.2rem !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-sidebar-list {
  background: transparent !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item {
  border-bottom-color: #27313c !important;
  color: #d6dee7 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item:hover {
  background: #19202a !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item-title {
  color: #f2f5f8 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item-sub {
  color: #9fb0c0 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item-badge {
  width: 38px !important;
  height: 38px !important;
  background: #111923 !important;
  border-color: #324051 !important;
  color: #d6dee7 !important;
  box-shadow: none !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-active {
  background: linear-gradient(90deg, rgba(122, 57, 44, 0.22), rgba(122, 57, 44, 0.06)) !important;
  box-shadow: inset 4px 0 0 #c97a63 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-active .guide-reading-item-badge {
  background: #c97a63 !important;
  border-color: #c97a63 !important;
  color: #ffffff !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-complete .guide-reading-item-badge {
  background: rgba(25, 135, 84, 0.18) !important;
  border-color: rgba(25, 135, 84, 0.35) !important;
  color: #59d98e !important;
}

/* ==========================================================
   Progress
   Keep same size as light mode (.55rem)
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-progress-label {
  font-size: 0.74rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #8f99a3 !important;
  margin-bottom: 0.55rem !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-sidebar-header .small,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-sidebar-header .text-muted,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-sidebar-header .fw-semibold {
  color: #9da7b1 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-progress-bar {
  height: 0.55rem !important;
  background: #2b2f35 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-progress-bar > span {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #7a392c, #b15540) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* ==========================================================
   Main reading panel
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-panel {
  background:
    radial-gradient(circle at top right, rgba(201, 122, 99, 0.12), transparent 28%),
    linear-gradient(180deg, #161b22 0%, #11161d 100%) !important;
  border: 1px solid #2b3440 !important;
  border-radius: 1.4rem !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .step-kicker,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-meta {
  color: #9fb0c0 !important;
}

/* ==========================================================
   Section summary
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary {
  background: #121923 !important;
  border: 1px solid #2b3440 !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
  color: #dbe6ef !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary p,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary li,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary div,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary span,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary strong,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary em,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary small {
  color: #dbe6ef !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary h1,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary h2,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary h3,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary h4,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary h5,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary h6 {
  color: #f4f7fa !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary a {
  color: #8ec5ff !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary .text-muted,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary .text-body-secondary {
  color: #aebdca !important;
}

/* ==========================================================
   Rendered section content
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html {
  color: #d6dee7 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html p,
#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html li,
#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html div,
#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html span,
#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html label {
  color: inherit !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html a {
  color: #8ec5ff !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html hr {
  border-color: #2b3440 !important;
  opacity: 1;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html table {
  color: #d6dee7 !important;
  border-color: #33404d !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html th,
#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html td {
  border-color: #33404d !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html pre,
#orc-annotate-root[data-bs-theme="dark"] pre.bg-light {
  background: #0f141a !important;
  color: #d6dee7 !important;
  border-color: #2b3440 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html code,
#orc-annotate-root[data-bs-theme="dark"] pre code {
  color: #f2c078 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html .bg-light,
#orc-annotate-root[data-bs-theme="dark"] .bg-light {
  background-color: #161b22 !important;
  color: #d6dee7 !important;
  border-color: #2b3440 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html .alert-light,
#orc-annotate-root[data-bs-theme="dark"] .alert-light {
  background-color: #161b22 !important;
  color: #d6dee7 !important;
  border-color: #2b3440 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html .border,
#orc-annotate-root[data-bs-theme="dark"] .border {
  border-color: #2b3440 !important;
}

/* ==========================================================
   Highlighted text
   Dark mode support for:
   1. saved/app-applied highlights (.orc-annotate-highlight)
   2. live browser text selection (::selection)
   ========================================================== */

/* --------------------------
   Saved/app-applied highlights
   -------------------------- */
#orc-annotate-root[data-bs-theme="dark"]:not(.orc-annotate-hidden) .orc-annotate-highlight,
#orc-annotate-root[data-bs-theme="dark"]:not(.orc-annotate-hidden) .orc-annotate-highlight *,
#orc-annotate-root[data-bs-theme="dark"]:not(.orc-annotate-hidden) .orc-annotate-highlight strong,
#orc-annotate-root[data-bs-theme="dark"]:not(.orc-annotate-hidden) .orc-annotate-highlight em,
#orc-annotate-root[data-bs-theme="dark"]:not(.orc-annotate-hidden) .orc-annotate-highlight span,
#orc-annotate-root[data-bs-theme="dark"]:not(.orc-annotate-hidden) .orc-annotate-highlight a {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-highlight {
  padding: 0.04em 0.16em;
  border-radius: 0.2rem;
  text-shadow: none !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-highlight.yellow {
  background-color: #ffe66d !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-highlight.pink {
  background-color: #ffafcc !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-highlight.blue {
  background-color: #add8ff !important;
}

/* FIX: when annotations are hidden, dark mode highlight colors must not override the hidden state */
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight.yellow,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight.pink,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight.blue {
  background: transparent !important;
  background-color: transparent !important;
}

/* FIX: restore original text color when annotations are hidden */
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight *,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight strong,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight em,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight span,
#orc-annotate-root[data-bs-theme="dark"].orc-annotate-hidden .orc-annotate-highlight a {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* --------------------------
   Live text selection
   This is likely what your screenshot is showing
   -------------------------- */
#orc-annotate-root[data-bs-theme="dark"] ::selection {
  background: #ffe66d !important;
  color: #000000 !important;
}

#orc-annotate-root[data-bs-theme="dark"] ::-moz-selection {
  background: #ffe66d !important;
  color: #000000 !important;
}

/* Optional: if selected text appears inside rendered content */
#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html ::selection,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-panel ::selection,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary ::selection {
  background: #ffe66d !important;
  color: #000000 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .section-rendered-html ::-moz-selection,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-panel ::-moz-selection,
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-summary ::-moz-selection {
  background: #ffe66d !important;
  color: #000000 !important;
}

/* ==========================================================
   Code copy button
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .guide-code-wrap .copy-btn {
  background-color: #1b2430 !important;
  color: #e6edf3 !important;
  border-color: #33404d !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-code-wrap .copy-btn:hover {
  background-color: #243041 !important;
  color: #ffffff !important;
}

/* ==========================================================
   Nav card / buttons
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-nav-card {
  background: #161b22 !important;
  border: 1px solid #2b3440 !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-nav-card .card-body {
  background: transparent !important;
}

#orc-annotate-root[data-bs-theme="dark"] .btn-outline-secondary {
  color: #d6dee7 !important;
  border-color: #4a5767 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .btn-outline-secondary:hover {
  color: #ffffff !important;
  background-color: #2e3947 !important;
  border-color: #2e3947 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .btn-danger {
  background-color: #b14e3b !important;
  border-color: #b14e3b !important;
}

#orc-annotate-root[data-bs-theme="dark"] .btn-danger:hover {
  background-color: #c05a45 !important;
  border-color: #c05a45 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar [data-orc-action="clear-all"] .bi {
  color: #f2c078 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar [data-orc-action="clear-all"]:hover .bi {
  color: #ffffff !important;
}

#orc-annotate-root[data-bs-theme="dark"] h1 + p,
#orc-annotate-root[data-bs-theme="dark"] h1 + span + p,
#orc-annotate-root[data-bs-theme="dark"] .col-xl-9 p.mb-0 {
  color: #cbd5df !important;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 991.98px) {
  .learn-theme-toggle {
    margin-bottom: 1rem;
  }
}

/* ==========================================================
   Checkpoints (Dark Mode)
   ========================================================== */

/* thin checkpoint divider line between sections */
#orc-annotate-root[data-bs-theme="dark"] .checkpoint-divider,
#orc-annotate-root[data-bs-theme="dark"] .checkpoint-line {
  border-color: #2b3440 !important;
  opacity: 0.7;
}

/* optional subtle label/text if used near divider */
#orc-annotate-root[data-bs-theme="dark"] .checkpoint-divider-label,
#orc-annotate-root[data-bs-theme="dark"] .checkpoint-line-label {
  color: #9fb0c0 !important;
}

/* ==========================================================
   Locked Sections
   ========================================================== */

/* locked sidebar item */
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-locked {
  background: #0f141a !important;
  opacity: 0.6;
}

/* prevent hover brightening locked items */
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-locked:hover {
  background: #0f141a !important;
}

/* locked badge */
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-locked .guide-reading-item-badge {
  background: #0c1218 !important;
  border-color: #2b3440 !important;
  color: #6c7a89 !important;
}

/* locked title + subtext */
#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-locked .guide-reading-item-title {
  color: #7f8c99 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .guide-reading-item.is-locked .guide-reading-item-sub {
  color: #6c7a89 !important;
}

/* ==========================================================
   Checkpoint Indicator (small icon / subtle UI)
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .checkpoint-indicator,
#orc-annotate-root[data-bs-theme="dark"] .checkpoint-icon {
  color: #c97a63 !important;
  opacity: 0.85;
}

/* ==========================================================
   Ask the Creator
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .ask-creator-card {
  background: linear-gradient(180deg, #161b22 0%, #11161d 100%) !important;
  border: 1px solid #2b3440 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .ask-creator-card .text-muted,
#orc-annotate-root[data-bs-theme="dark"] .ask-creator-card .small.text-muted {
  color: #aeb6bf !important;
}

#orc-annotate-root[data-bs-theme="dark"] .ask-creator-card .bi {
  color: #f2c078 !important;
}

/* Ask Question button */
#orc-annotate-root[data-bs-theme="dark"] .btn-ask-creator {
  background: transparent !important;
  border: 1px solid #465465 !important;
  color: #e6edf3 !important;
  transition: all 0.2s ease;
}

#orc-annotate-root[data-bs-theme="dark"] .btn-ask-creator:hover {
  background: #243041 !important;
  border-color: #5a6a7d !important;
  color: #ffffff !important;
}

/* ==========================================================
   Ask Creator Modal
   ========================================================== */

body.learn-paid-dark .ask-creator-modal .modal-content {
  background:
    radial-gradient(circle at top right, rgba(201, 122, 99, 0.10), transparent 30%),
    linear-gradient(180deg, #161b22 0%, #11161d 100%) !important;
  border: 1px solid #2b3440 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42) !important;
  color: #d6dee7 !important;
}

body.learn-paid-dark .ask-creator-modal .modal-header {
  border-bottom: 1px solid #2b3440 !important;
  background: transparent !important;
}

body.learn-paid-dark .ask-creator-modal .modal-footer {
  border-top: 1px solid #2b3440 !important;
  background: transparent !important;
}

body.learn-paid-dark .ask-creator-modal .modal-title,
body.learn-paid-dark .ask-creator-modal h1,
body.learn-paid-dark .ask-creator-modal h2,
body.learn-paid-dark .ask-creator-modal h3,
body.learn-paid-dark .ask-creator-modal h4,
body.learn-paid-dark .ask-creator-modal h5,
body.learn-paid-dark .ask-creator-modal h6,
body.learn-paid-dark .ask-creator-modal label,
body.learn-paid-dark .ask-creator-modal .form-label,
body.learn-paid-dark .ask-creator-modal .form-text {
  color: #f5f5f5 !important;
}

body.learn-paid-dark .ask-creator-modal .text-muted,
body.learn-paid-dark .ask-creator-modal .small.text-muted {
  color: #aeb6bf !important;
}

/* alert */
body.learn-paid-dark .ask-creator-modal .alert-warning {
  background: linear-gradient(90deg, #2c2c1f, #26261a) !important;
  border: 1px solid #4a4a32 !important;
  color: #f2ead2 !important;
  box-shadow: none !important;
}

/* form controls */
body.learn-paid-dark .ask-creator-modal .form-control,
body.learn-paid-dark .ask-creator-modal .form-select {
  background-color: #0f141a !important;
  border: 1px solid #33404d !important;
  color: #e6edf3 !important;

  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7d0d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body.learn-paid-dark .ask-creator-modal .form-control:focus,
body.learn-paid-dark .ask-creator-modal .form-select:focus {
  background: #111820 !important;
  border-color: #c97a63 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 122, 99, 0.18) !important;
}

body.learn-paid-dark .ask-creator-modal .form-control::placeholder,
body.learn-paid-dark .ask-creator-modal textarea::placeholder {
  color: #7f8c99 !important;
}

/* select options */
body.learn-paid-dark .ask-creator-modal option {
  background: #11161d !important;
  color: #e6edf3 !important;
}

/* dropdown arrow */
body.learn-paid-dark .ask-creator-modal .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7d0d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* close button */
body.learn-paid-dark .ask-creator-modal .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.75;
}

body.learn-paid-dark .ask-creator-modal .btn-close:hover {
  opacity: 1;
}

/* backdrop */
body.learn-paid-dark .modal-backdrop.show {
  opacity: 0.72 !important;
}

/* buttons */
body.learn-paid-dark .ask-creator-modal .btn-outline-secondary {
  border-color: #465465 !important;
  color: #d6dee7 !important;
}

body.learn-paid-dark .ask-creator-modal .btn-outline-secondary:hover {
  background: #243041 !important;
  border-color: #5a6a7d !important;
  color: #ffffff !important;
}

body.learn-paid-dark .ask-creator-modal .btn-danger {
  background: linear-gradient(180deg, #c97a63 0%, #b86851 100%) !important;
  border-color: #c97a63 !important;
  box-shadow: none !important;
}

body.learn-paid-dark .ask-creator-modal .btn-danger:hover {
  background: linear-gradient(180deg, #d2866f 0%, #c27059 100%) !important;
  border-color: #d2866f !important;
}

/* subtle scrollbar */
body.learn-paid-dark .ask-creator-modal textarea::-webkit-scrollbar {
  width: 10px;
}

body.learn-paid-dark .ask-creator-modal textarea::-webkit-scrollbar-track {
  background: #11161d;
}

body.learn-paid-dark .ask-creator-modal textarea::-webkit-scrollbar-thumb {
  background: #33404d;
  border-radius: 999px;
}

body.learn-paid-dark .ask-creator-modal textarea::-webkit-scrollbar-thumb:hover {
  background: #465465;
}

/* ==========================================================
   Completion screen / Final Exam card
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block {
  background:
    radial-gradient(circle at top right, rgba(201, 122, 99, 0.08), transparent 30%),
    linear-gradient(180deg, #121923 0%, #0f141a 100%) !important;
  border: 1px solid #2b3440 !important;
  color: #dbe6ef !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block h1,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block h2,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block h3,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block h4,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block h5,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block h6,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .fw-bold,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block strong {
  color: #f4f7fa !important;
}

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .text-muted,
#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .small.text-muted {
  color: #aebdca !important;
}

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .skill-icon {
  color: #f2c078 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .bg-light {
  background: #0f141a !important;
  border-color: #33404d !important;
  color: #dbe6ef !important;
  box-shadow: none !important;
}

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .bg-light .fw-bold {
  color: #ffffff !important;
}

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .btn-danger {
  background: linear-gradient(180deg, #c97a63 0%, #b86851 100%) !important;
  border-color: #c97a63 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .current-step-card .content-block .btn-danger:hover {
  background: linear-gradient(180deg, #d2866f 0%, #c27059 100%) !important;
  border-color: #d2866f !important;
  color: #ffffff !important;
}

/* ==========================================================
   Paid-view purchase pill
   "Want to keep this guide permanently?"
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .col-xl-9 > .d-inline-flex.align-items-center.gap-3.mt-3.px-3.py-2.rounded-pill.border.bg-white.shadow-sm {
  background: #161b22 !important;
  border-color: #2b3440 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
}

#orc-annotate-root[data-bs-theme="dark"] .col-xl-9 > .d-inline-flex.align-items-center.gap-3.mt-3.px-3.py-2.rounded-pill.border.bg-white.shadow-sm .text-body-secondary {
  color: #aeb6bf !important;
}

#orc-annotate-root[data-bs-theme="dark"] .col-xl-9 > .d-inline-flex.align-items-center.gap-3.mt-3.px-3.py-2.rounded-pill.border.bg-white.shadow-sm .btn-danger {
  background: linear-gradient(180deg, #c97a63 0%, #b86851 100%) !important;
  border-color: #c97a63 !important;
  color: #ffffff !important;
}

#orc-annotate-root[data-bs-theme="dark"] .col-xl-9 > .d-inline-flex.align-items-center.gap-3.mt-3.px-3.py-2.rounded-pill.border.bg-white.shadow-sm .btn-danger:hover {
  background: linear-gradient(180deg, #d2866f 0%, #c27059 100%) !important;
  border-color: #d2866f !important;
  color: #ffffff !important;
}

/* ==========================================================
   Annotation Toolbar - Dark Mode
   ========================================================== */

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar {
  background: rgba(17, 22, 29, 0.96) !important;
  border-color: #33404d !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(10px);
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .vr {
  border-color: #465465 !important;
  opacity: 1;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-outline-dark,
#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-outline-secondary,
#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-outline-primary {
  background: transparent !important;
  border-color: #465465 !important;
  color: #e6edf3 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-outline-dark:hover,
#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-outline-secondary:hover,
#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-outline-primary:hover {
  background: #243041 !important;
  border-color: #5a6a7d !important;
  color: #ffffff !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .markup-mode-btn.active {
  background: #c97a63 !important;
  border-color: #c97a63 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Keep highlight color buttons readable in dark mode */
#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-orc-highlight-yellow {
  background: #ffe66d !important;
  border-color: rgba(255, 230, 109, 0.85) !important;
  color: #212529 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-orc-highlight-pink {
  background: #ffafcc !important;
  border-color: rgba(255, 175, 204, 0.85) !important;
  color: #212529 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-orc-highlight-blue {
  background: #add8ff !important;
  border-color: rgba(173, 216, 255, 0.85) !important;
  color: #212529 !important;
}

#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-orc-highlight-yellow.active,
#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-orc-highlight-pink.active,
#orc-annotate-root[data-bs-theme="dark"] .orc-annotate-toolbar .btn-orc-highlight-blue.active {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35) !important;
}