/* ================================================================
   themes.css — v5 테마 시스템
   테마 전환: <html data-theme="sky|dark|dusty|sage">
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. Sky Blue (기본 테마) — 스카이블루
──────────────────────────────────────────────────────────────── */
[data-theme="sky"] {
  --v5-primary:         #3AAFE4;
  --v5-primary-hover:   #1E8BC3;
  --v5-primary-light:   #E1F5FE;
  --v5-primary-dark:    #01579B;
  --v5-accent:          #FF8A65;

  --v5-bg:              #F4FAFF;
  --v5-surface:         #FFFFFF;
  --v5-surface-2:       #EDF6FF;

  --v5-text:            #1A2E40;
  --v5-text-muted:      #6B8CA8;
  --v5-border:          #C5E3F5;

  --v5-navbar-bg:       #FFFFFF;
  --v5-navbar-text:     #1A2E40;
  --v5-navbar-hover:    #3AAFE4;
  --v5-navbar-border:   #C5E3F5;

  --v5-hero-from:       #3AAFE4;
  --v5-hero-to:         #0288D1;
  --v5-hero-text:       #FFFFFF;

  --v5-card-shadow:     0 2px 12px rgba(58,175,228,0.12);
  --v5-card-hover:      0 6px 24px rgba(58,175,228,0.22);

  --v5-badge-bg:        #E1F5FE;
  --v5-badge-text:      #0277BD;

  --v5-footer-bg:       #1A2E40;
  --v5-footer-text:     #E8F4FD;
  --v5-footer-muted:    #8AAFC8;

  /* Bootstrap 변수 오버라이드 */
  --bs-primary:         #3AAFE4;
  --bs-primary-rgb:     58, 175, 228;
  --bs-link-color:      #1E8BC3;
  --bs-link-hover-color:#01579B;
  --bs-body-bg:         #F4FAFF;
  --bs-body-color:      #1A2E40;
  --bs-border-color:    #C5E3F5;
}

/* ────────────────────────────────────────────────────────────────
   2. Dark (다크 테마)
──────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --v5-primary:         #4FC3F7;
  --v5-primary-hover:   #81D4FA;
  --v5-primary-light:   #162633;
  --v5-primary-dark:    #0288D1;
  --v5-accent:          #FFB74D;

  --v5-bg:              #0D1B2A;
  --v5-surface:         #152232;
  --v5-surface-2:       #1C2D40;

  --v5-text:            #E2EEF7;
  --v5-text-muted:      #7A9BB5;
  --v5-border:          #253748;

  --v5-navbar-bg:       #0A1520;
  --v5-navbar-text:     #E2EEF7;
  --v5-navbar-hover:    #4FC3F7;
  --v5-navbar-border:   #1E3245;

  --v5-hero-from:       #0D2840;
  --v5-hero-to:         #0A1520;
  --v5-hero-text:       #E2EEF7;

  --v5-card-shadow:     0 2px 12px rgba(0,0,0,0.35);
  --v5-card-hover:      0 6px 24px rgba(0,0,0,0.5);

  --v5-badge-bg:        #162633;
  --v5-badge-text:      #4FC3F7;

  --v5-footer-bg:       #060E18;
  --v5-footer-text:     #A8C8DE;
  --v5-footer-muted:    #55788F;

  --bs-primary:         #4FC3F7;
  --bs-primary-rgb:     79, 195, 247;
  --bs-link-color:      #4FC3F7;
  --bs-link-hover-color:#81D4FA;
  --bs-body-bg:         #0D1B2A;
  --bs-body-color:      #E2EEF7;
  --bs-border-color:    #253748;
}

/* ────────────────────────────────────────────────────────────────
   3. Dusty Rose (더스티 로즈 테마)
──────────────────────────────────────────────────────────────── */
[data-theme="dusty"] {
  --v5-primary:         #C4888A;
  --v5-primary-hover:   #A66668;
  --v5-primary-light:   #FAEAEA;
  --v5-primary-dark:    #7D3F42;
  --v5-accent:          #F4A7B0;

  --v5-bg:              #FDF4F4;
  --v5-surface:         #FFFFFF;
  --v5-surface-2:       #FAEAEA;

  --v5-text:            #2E1A1A;
  --v5-text-muted:      #9A7070;
  --v5-border:          #F0C8CA;

  --v5-navbar-bg:       #FFFFFF;
  --v5-navbar-text:     #2E1A1A;
  --v5-navbar-hover:    #C4888A;
  --v5-navbar-border:   #F0C8CA;

  --v5-hero-from:       #C4888A;
  --v5-hero-to:         #A66668;
  --v5-hero-text:       #FFFFFF;

  --v5-card-shadow:     0 2px 12px rgba(196,136,138,0.12);
  --v5-card-hover:      0 6px 24px rgba(196,136,138,0.22);

  --v5-badge-bg:        #FAEAEA;
  --v5-badge-text:      #A66668;

  --v5-footer-bg:       #2E1A1A;
  --v5-footer-text:     #FAEAEA;
  --v5-footer-muted:    #C4A0A0;

  --bs-primary:         #C4888A;
  --bs-primary-rgb:     196, 136, 138;
  --bs-link-color:      #A66668;
  --bs-link-hover-color:#7D3F42;
  --bs-body-bg:         #FDF4F4;
  --bs-body-color:      #2E1A1A;
  --bs-border-color:    #F0C8CA;
}

/* ────────────────────────────────────────────────────────────────
   4. Sage Green (세이지 그린 테마)
──────────────────────────────────────────────────────────────── */
[data-theme="sage"] {
  --v5-primary:         #6D9E7A;
  --v5-primary-hover:   #4E7E5C;
  --v5-primary-light:   #E8F5EC;
  --v5-primary-dark:    #2E5E3C;
  --v5-accent:          #A8D5B0;

  --v5-bg:              #F2F8F4;
  --v5-surface:         #FFFFFF;
  --v5-surface-2:       #E8F5EC;

  --v5-text:            #162A1E;
  --v5-text-muted:      #6A8A72;
  --v5-border:          #C2DEC8;

  --v5-navbar-bg:       #FFFFFF;
  --v5-navbar-text:     #162A1E;
  --v5-navbar-hover:    #6D9E7A;
  --v5-navbar-border:   #C2DEC8;

  --v5-hero-from:       #6D9E7A;
  --v5-hero-to:         #4E7E5C;
  --v5-hero-text:       #FFFFFF;

  --v5-card-shadow:     0 2px 12px rgba(109,158,122,0.12);
  --v5-card-hover:      0 6px 24px rgba(109,158,122,0.22);

  --v5-badge-bg:        #E8F5EC;
  --v5-badge-text:      #4E7E5C;

  --v5-footer-bg:       #162A1E;
  --v5-footer-text:     #E8F5EC;
  --v5-footer-muted:    #8AB898;

  --bs-primary:         #6D9E7A;
  --bs-primary-rgb:     109, 158, 122;
  --bs-link-color:      #4E7E5C;
  --bs-link-hover-color:#2E5E3C;
  --bs-body-bg:         #F2F8F4;
  --bs-body-color:      #162A1E;
  --bs-border-color:    #C2DEC8;
}

/* ────────────────────────────────────────────────────────────────
   이벤트 테마 예시 (추후 추가 가능)
   [data-theme="christmas"] { --v5-primary: #C0392B; ... }
   [data-theme="spring"]    { --v5-primary: #F9A8D4; ... }
──────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────
   Dark compatibility layer
   Older customer pages and popup windows contain Bootstrap utility classes
   and legacy fixed light colors.  Keep them inside the selected dark theme
   without changing semantic status colors (success / warning / danger).
──────────────────────────────────────────────────────────────── */
[data-theme="dark"] body {
  color: var(--v5-text);
  background-color: var(--v5-bg) !important;
}
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .pagination .page-link {
  color: var(--v5-text) !important;
  background-color: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-text,
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .table {
  color: var(--v5-text) !important;
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .form-text,
[data-theme="dark"] small.text-secondary {
  color: var(--v5-text-muted) !important;
}
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > * {
  color: var(--v5-text) !important;
  background-color: transparent !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-light > * > * {
  color: var(--v5-text) !important;
  background-color: var(--v5-surface-2) !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] textarea {
  color: var(--v5-text) !important;
  background-color: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--v5-text-muted) !important; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
  color: var(--v5-text) !important;
  background-color: var(--v5-primary-light) !important;
}

/* Main home hero: its interactive widgets were originally blue-only. */
[data-theme="dark"] .home-page .v5-hero-reg-card,
[data-theme="dark"] .home-page .v5-hero-reg-card:focus,
[data-theme="dark"] .home-page .v5-hero-reg-card:focus-visible,
[data-theme="dark"] .home-page .v5-hero-reg-card:active,
[data-theme="dark"] .home-page .v5-hero-reg-card.show {
  color: var(--v5-hero-text) !important;
  background: color-mix(in srgb, var(--v5-surface-2) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 55%, var(--v5-border)) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .home-page .v5-hero-reg-card:hover,
[data-theme="dark"] .home-page .v5-hero-reg-actions .dropdown.v5-hero-dd-hover-active > .v5-hero-reg-card {
  background: color-mix(in srgb, var(--v5-primary-light) 88%, var(--v5-surface)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .home-page .v5-hero-dd-menu,
[data-theme="dark"] .home-page .v5-hero-lt-learner-menu {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .home-page .v5-hero-dd-menu .dropdown-item,
[data-theme="dark"] .home-page .v5-hero-lt-learner-menu .dropdown-item {
  color: var(--v5-text) !important;
  background: transparent !important;
}
[data-theme="dark"] .home-page .v5-hero-dd-menu .dropdown-item:hover,
[data-theme="dark"] .home-page .v5-hero-dd-menu .dropdown-item:focus,
[data-theme="dark"] .home-page .v5-hero-lt-learner-menu .dropdown-item:hover,
[data-theme="dark"] .home-page .v5-hero-lt-learner-menu .dropdown-item:focus {
  color: var(--v5-text) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme="dark"] .home-page .v5-hero-dd-menu .v5-hero-yzoom-item,
[data-theme="dark"] .home-page .v5-hero-dd-menu .v5-hero-yzoom-item:hover,
[data-theme="dark"] .home-page .v5-hero-dd-menu .v5-hero-yzoom-item:focus {
  color: var(--v5-hero-text) !important;
  background: linear-gradient(135deg, var(--v5-primary-dark), #081a29) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 65%, var(--v5-border)) !important;
}

/* The manager quote is brand information, not a primary action banner. */
[data-theme="dark"] .v5-quote-section {
  color: var(--v5-text) !important;
  background:
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--v5-primary) 14%, transparent) 0, transparent 34%),
    linear-gradient(135deg, var(--v5-surface-2) 0%, var(--v5-footer-bg) 100%) !important;
  border-top: 1px solid var(--v5-border);
  border-bottom: 1px solid var(--v5-border);
}
[data-theme="dark"] .v5-quote-section::before { color: var(--v5-primary) !important; opacity: .12; }
[data-theme="dark"] .v5-quote-section::after { background: color-mix(in srgb, var(--v5-primary) 12%, transparent) !important; }
[data-theme="dark"] .v5-quote-text,
[data-theme="dark"] .v5-quote-author,
[data-theme="dark"] .v5-quote-author strong { color: var(--v5-text) !important; }

/* Customer popup / standalone player surfaces. */
[data-theme="dark"] .qp-head,
[data-theme="dark"] .qr-hero,
[data-theme="dark"] .calc .head,
[data-theme="dark"] .player-header {
  color: var(--v5-hero-text) !important;
  background: linear-gradient(135deg, var(--v5-hero-from), var(--v5-hero-to)) !important;
}
[data-theme="dark"] .qp-question,
[data-theme="dark"] .qr-item,
[data-theme="dark"] .calc .box,
[data-theme="dark"] .calc .entry,
[data-theme="dark"] .player-main,
[data-theme="dark"] .lesson-link,
[data-theme="dark"] .quiz-loading,
[data-theme="dark"] .box {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .calc .result,
[data-theme="dark"] .calc .entry,
[data-theme="dark"] .lesson-list,
[data-theme="dark"] .video-help {
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .calc .entry-head,
[data-theme="dark"] .calc .form-label,
[data-theme="dark"] .calc .total,
[data-theme="dark"] .video-title,
[data-theme="dark"] .lesson-link,
[data-theme="dark"] .lesson-list-title,
[data-theme="dark"] .video-help {
  color: var(--v5-text) !important;
}

/* Online quiz catalogue: keep content covers readable without light cards. */
[data-theme="dark"] .learning-tools-page .aft-sports-section,
[data-theme="dark"] .learning-tools-page .aft-home-section {
  background: transparent !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .learning-tools-page .aft-home-title {
  color: var(--v5-text) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .learning-tools-page .aft-home-card,
[data-theme="dark"] .learning-tools-page .qp-collection,
[data-theme="dark"] .learning-tools-page .qp-set,
[data-theme="dark"] .learning-tools-page .qp-series-hero,
[data-theme="dark"] .learning-tools-page .qp-type-guide,
[data-theme="dark"] .learning-tools-page .qp-type-guide article,
[data-theme="dark"] .learning-tools-page .qp-set-cover-wrap {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme="dark"] .learning-tools-page .aft-home-cover,
[data-theme="dark"] .learning-tools-page .aft-home-cover-strip,
[data-theme="dark"] .learning-tools-page .qp-series-covers,
[data-theme="dark"] .learning-tools-page .qp-set-cover-wrap {
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--v5-primary) 18%, transparent) 0, transparent 38%),
    linear-gradient(135deg, var(--v5-surface-2), var(--v5-footer-bg)) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .learning-tools-page .qp-set-series,
[data-theme="dark"] .learning-tools-page .qp-set-book span,
[data-theme="dark"] .learning-tools-page .qp-set-footer span,
[data-theme="dark"] .learning-tools-page .qp-collection span,
[data-theme="dark"] .learning-tools-page .qp-type-guide article strong {
  color: var(--v5-text) !important;
}
[data-theme="dark"] .learning-tools-page .qp-set-book i,
[data-theme="dark"] .learning-tools-page .qp-set-cover-wrap i,
[data-theme="dark"] .learning-tools-page .qp-collection i,
[data-theme="dark"] .learning-tools-page .qp-type-guide h2 i {
  color: var(--v5-primary) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme="dark"] .learning-tools-page .qp-empty,
[data-theme="dark"] .learning-tools-page .qp-note,
[data-theme="dark"] .learning-tools-page .v5-sub-header-meta {
  color: var(--v5-text-muted) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .learning-tools-page .qp-start,
[data-theme="dark"] .learning-tools-page .qp-start:hover,
[data-theme="dark"] .learning-tools-page .qp-start:focus {
  color: var(--v5-hero-text) !important;
  background: var(--v5-primary) !important;
  border-color: var(--v5-primary) !important;
  box-shadow: none !important;
}

/* Online quiz player: all answer interactions follow the dark palette. */
[data-theme="dark"] .qp-bar { background: linear-gradient(transparent, var(--v5-bg) 24%) !important; }
[data-theme="dark"] .qp-num {
  color: var(--v5-primary) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme="dark"] .qp-choice {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .qp-choice:hover,
[data-theme="dark"] .qp-choice:has(input:checked) {
  border-color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary-light) 78%, var(--v5-surface)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .qp-choice:has(input:checked) span { color: var(--v5-text) !important; }
[data-theme="dark"] .qp-answer-save,
[data-theme="dark"] .qp-submit-btn {
  color: var(--v5-hero-text) !important;
  background: var(--v5-primary) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .qp-answer-save:hover,
[data-theme="dark"] .qp-answer-save:focus,
[data-theme="dark"] .qp-submit-btn:hover,
[data-theme="dark"] .qp-submit-btn:focus {
  background: var(--v5-primary-hover) !important;
  border-color: var(--v5-primary-hover) !important;
}
[data-theme="dark"] .qp-submit-complete > section {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
}
[data-theme="dark"] .qp-submit-complete h2 { color: var(--v5-text) !important; }
[data-theme="dark"] .qp-submit-complete p { color: var(--v5-text-muted) !important; }

/* Submitted result and wrong-answer notes open in a separate window. */
[data-theme="dark"] .qr-item.bad {
  background: color-mix(in srgb, #7f1d1d 28%, var(--v5-surface)) !important;
  border-color: color-mix(in srgb, #ef4444 52%, var(--v5-border)) !important;
}
[data-theme="dark"] .qr-label { color: var(--v5-text-muted) !important; }

/* Learning-tools quiz introduction and its example modal. */
[data-theme="dark"] .sb-vq-page .v5-quiz-home-hero,
[data-theme="dark"] .learning-tools-page .v5-tq-hero {
  color: var(--v5-text) !important;
  background:
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--v5-primary) 16%, transparent) 0, transparent 34%),
    linear-gradient(135deg, var(--v5-surface-2), var(--v5-footer-bg)) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-home-eyebrow,
[data-theme="dark"] .sb-vq-page .v5-quiz-limit,
[data-theme="dark"] .sb-vq-page .v5-quiz-type-card,
[data-theme="dark"] .sb-vq-page .v5-quiz-start-card,
[data-theme="dark"] .sb-vq-page .v5-quiz-step,
[data-theme="dark"] .learning-tools-page .v5-tq-guide-item {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-home-eyebrow,
[data-theme="dark"] .sb-vq-page .v5-quiz-type-icon,
[data-theme="dark"] .sb-vq-page .v5-quiz-step-no,
[data-theme="dark"] .learning-tools-page .v5-tq-icon {
  color: var(--v5-primary) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-limit b,
[data-theme="dark"] .sb-vq-page .v5-quiz-section-title,
[data-theme="dark"] .sb-vq-page .v5-quiz-type-card h3,
[data-theme="dark"] .sb-vq-page .v5-quiz-start-card h2,
[data-theme="dark"] .sb-vq-page .v5-quiz-step h3,
[data-theme="dark"] .learning-tools-page .v5-tq-guide-head,
[data-theme="dark"] .learning-tools-page .v5-tq-guide-item strong {
  color: var(--v5-text) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-btn,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-btn:hover,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-btn:focus,
[data-theme="dark"] .learning-tools-page .v5-tq-learner-btn:hover {
  color: var(--v5-text) !important;
  background: var(--v5-primary-light) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-policy {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, #8a5a00 22%, var(--v5-surface)) !important;
  border: 1px solid color-mix(in srgb, #f0ad30 42%, var(--v5-border));
}
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-modal .modal-header,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-question,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-choice,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-listen,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-direction {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-modal .modal-title,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-question h4,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-direction strong {
  color: var(--v5-text) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-choice.is-selected,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-choice:hover {
  color: var(--v5-text) !important;
  background: var(--v5-primary-light) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-save {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 12%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 54%, var(--v5-border)) !important;
}
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-save:hover,
[data-theme="dark"] .sb-vq-page .v5-quiz-preview-save:focus {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 22%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Dark tables use a calm surface header; sky blue remains an interaction accent. */
[data-theme="dark"] .v5-table thead th,
[data-theme="dark"] .v5-admin-table th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-light > * > * {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .v5-table-wrap,
[data-theme="dark"] .table-responsive {
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .v5-table thead th.is-active,
[data-theme="dark"] .v5-table thead th[aria-sort]:not([aria-sort="none"]),
[data-theme="dark"] .table thead th.is-active,
[data-theme="dark"] .table thead th[aria-sort]:not([aria-sort="none"]) {
  color: var(--v5-primary) !important;
  box-shadow: inset 0 -2px 0 var(--v5-primary);
}
[data-theme="dark"] .v5-table tbody tr:hover td,
[data-theme="dark"] .v5-admin-table tr:hover td,
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background: color-mix(in srgb, var(--v5-primary) 8%, var(--v5-surface)) !important;
}

/* Customer pages also include legacy, report and popup tables without v5 classes. */
[data-theme="dark"] table:not(.pika-table):not(.ui-datepicker-calendar) {
  color: var(--v5-text) !important;
  background-color: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] table:not(.pika-table):not(.ui-datepicker-calendar) td,
[data-theme="dark"] table:not(.pika-table):not(.ui-datepicker-calendar) th {
  color: var(--v5-text) !important;
  background-color: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
/* Both semantic thead tables and older tables whose first row is made of th cells. */
[data-theme="dark"] table:not(.pika-table):not(.ui-datepicker-calendar) > thead > tr > th,
[data-theme="dark"] table:not(.pika-table):not(.ui-datepicker-calendar) > tbody > tr:first-child > th {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] table:not(.pika-table):not(.ui-datepicker-calendar) tbody > tr:hover > td {
  background: color-mix(in srgb, var(--v5-primary) 8%, var(--v5-surface)) !important;
}

/* About page: keep the brand accents, but remove its light-only panels in dark mode. */
[data-theme="dark"] .about-page .about-online-intro {
  color: var(--v5-text) !important;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--v5-primary) 15%, transparent) 0, transparent 34%),
    linear-gradient(135deg, var(--v5-surface-2), var(--v5-footer-bg)) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .about-page .about-online-eyebrow,
[data-theme="dark"] .about-page .about-online-feature-icon {
  color: var(--v5-primary) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme="dark"] .about-page .about-online-feature {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme="dark"] .about-page .about-online-feature h4 {
  color: var(--v5-text) !important;
}
[data-theme="dark"] .about-page .about-online-feature p {
  color: var(--v5-text-muted) !important;
}
[data-theme="dark"] .about-page .about-online-intro .btn-v5-primary,
[data-theme="dark"] .about-page .about-online-intro .btn-outline-primary {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .about-page .about-online-intro .btn-v5-primary:hover,
[data-theme="dark"] .about-page .about-online-intro .btn-v5-primary:focus,
[data-theme="dark"] .about-page .about-online-intro .btn-outline-primary:hover,
[data-theme="dark"] .about-page .about-online-intro .btn-outline-primary:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Home schedule cards: override per-class inline badge colors in dark mode. */
[data-theme="dark"] .v5-hero-reg-badge {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 20%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 50%, var(--v5-border)) !important;
  text-shadow: none !important;
}

/* Home actions: use deep navy controls, reserving sky blue for text and focus accents. */
[data-theme="dark"] .home-page .btn-v5-primary,
[data-theme="dark"] .home-page .btn-primary {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .home-page .btn-v5-primary:hover,
[data-theme="dark"] .home-page .btn-v5-primary:focus,
[data-theme="dark"] .home-page .btn-primary:hover,
[data-theme="dark"] .home-page .btn-primary:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* The four enrolment-step numbers follow the same calm dark controls. */
[data-theme="dark"] .home-page .v5-process-num {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border));
  box-shadow: 0 4px 12px rgba(0,0,0,.28) !important;
}
[data-theme="dark"] .home-page .v5-process-step-final .v5-process-num {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 4px color-mix(in srgb, var(--v5-primary) 13%, transparent) !important;
}
[data-theme="dark"] .home-page .btn-v5-outline,
[data-theme="dark"] .home-page .btn-outline-primary {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .home-page .btn-v5-outline:hover,
[data-theme="dark"] .home-page .btn-v5-outline:focus,
[data-theme="dark"] .home-page .btn-outline-primary:hover,
[data-theme="dark"] .home-page .btn-outline-primary:focus {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .home-page .v5-hero-lt-primary,
[data-theme="dark"] .home-page .v5-hero-lt-secondary,
[data-theme="dark"] .home-page .v5-hero-lt-learner-dropdown .v5-hero-lt-learner-button,
[data-theme="dark"] .home-page .v5-hero-share-button {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-surface-2) 88%, #08111b) !important;
  border-color: var(--v5-border) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .home-page .v5-hero-lt-primary:hover,
[data-theme="dark"] .home-page .v5-hero-lt-secondary:hover,
[data-theme="dark"] .home-page .v5-hero-lt-learner-dropdown .v5-hero-lt-learner-button:hover,
[data-theme="dark"] .home-page .v5-hero-share-button:hover {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 18%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .home-page .v5-hero-dd-menu .v5-hero-yzoom-item {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border: 1px solid var(--v5-border) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .home-page .v5-hero-dd-menu .v5-hero-yzoom-item:hover,
[data-theme="dark"] .home-page .v5-hero-dd-menu .v5-hero-yzoom-item:focus {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 18%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Guide page action buttons.  The light themes inherit their own variables; dark uses calm navy controls. */
.guide-page .guide-curriculum-btn {
  color: var(--v5-text-muted) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
.guide-page .guide-curriculum-btn:hover,
.guide-page .guide-curriculum-btn:focus {
  color: var(--v5-primary) !important;
  background: var(--v5-primary-light) !important;
  border-color: var(--v5-primary) !important;
}
/* Guide level rows: the concise result label stays visible and the full level
   description is revealed only when the learner asks for it. */
.guide-page .guide-level-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--v5-border) 80%, transparent);
}
.guide-page .guide-level-toggle {
  display: grid;
  grid-template-columns: 34px minmax(92px, auto) minmax(0, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  color: var(--v5-text);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.guide-page .guide-level-toggle:hover,
.guide-page .guide-level-toggle:focus {
  background: color-mix(in srgb, var(--v5-primary) 7%, transparent);
  outline: 0;
}
.guide-page .guide-level-name {
  font-size: .95rem;
  font-weight: 700;
}
.guide-page .guide-level-short {
  min-width: 0;
  color: var(--v5-text);
  font-size: .83rem;
  line-height: 1.5;
}
.guide-page .guide-level-chevron {
  color: var(--v5-text-muted);
  transition: transform .2s ease;
}
.guide-page .guide-level-toggle[aria-expanded="true"] .guide-level-chevron {
  transform: rotate(180deg);
}
.guide-page .guide-level-detail {
  color: var(--v5-text-muted);
  background: color-mix(in srgb, var(--v5-surface) 88%, transparent);
  border-top: 1px solid var(--v5-border);
}
.guide-page .guide-level-detail > div {
  padding: .78rem 1rem .9rem calc(34px + 2.35rem);
  font-size: .84rem;
  line-height: 1.75;
}
@media (max-width: 575.98px) {
  .guide-page .guide-level-toggle {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: start;
  }
  .guide-page .guide-level-name { grid-column: 2; }
  .guide-page .guide-level-short {
    grid-column: 2 / 4;
    grid-row: 2;
  }
  .guide-page .guide-level-chevron {
    grid-column: 3;
    grid-row: 1;
    margin-top: .3rem;
  }
  .guide-page .guide-level-detail > div { padding-left: 1rem; }
}
[data-theme="dark"] .guide-page .btn-v5-primary,
[data-theme="dark"] .guide-page .v5-guide-zoom-download {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .guide-page .btn-v5-primary:hover,
[data-theme="dark"] .guide-page .btn-v5-primary:focus,
[data-theme="dark"] .guide-page .v5-guide-zoom-download:hover,
[data-theme="dark"] .guide-page .v5-guide-zoom-download:focus,
[data-theme="dark"] .guide-page .v5-guide-zoom-copy:hover,
[data-theme="dark"] .guide-page .v5-guide-zoom-copy.is-copied {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .guide-page .v5-guide-zoom-copy {
  color: var(--v5-primary) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .guide-page .guide-report-badge {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 52%, var(--v5-border)) !important;
}
[data-theme="dark"] .guide-page .guide-level-item {
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .guide-page .guide-level-toggle:hover,
[data-theme="dark"] .guide-page .guide-level-toggle:focus {
  background: color-mix(in srgb, var(--v5-primary) 10%, var(--v5-surface-2)) !important;
}
[data-theme="dark"] .guide-page .guide-level-detail {
  background: var(--v5-surface) !important;
}

/* Customer brand accents: all themes use their selected primary instead of fixed sky blue. */
[data-theme] .community-page .v5c-contact-complete-icon {
  background: linear-gradient(135deg,var(--v5-primary),var(--v5-accent)) !important;
  box-shadow: 0 6px 20px color-mix(in srgb,var(--v5-primary) 25%,transparent) !important;
}
[data-theme] .community-page .v5c-group-inquiry {
  background: linear-gradient(135deg,color-mix(in srgb,var(--v5-primary) 8%,var(--v5-surface)),color-mix(in srgb,var(--v5-accent) 7%,var(--v5-surface))) !important;
  border: 1px solid color-mix(in srgb,var(--v5-primary) 24%,var(--v5-border)) !important;
}
[data-theme] .community-page .v5c-group-inquiry-tag {
  color: var(--v5-primary) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme] .my-page .lr-hint-box:hover,
[data-theme] .my-page .lr-examples-open:hover,
[data-theme] .my-page .lr-examples-more:hover,
[data-theme] .my-page .lr-example-choice:hover,
[data-theme] .my-page .lr-example-choice:focus {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme] .my-page .lr-examples-open,
[data-theme] .my-page .lr-examples-more,
[data-theme] .my-page .lr-mobile-edit {
  color: var(--v5-primary) !important;
  background: var(--v5-surface) !important;
  border-color: color-mix(in srgb,var(--v5-primary) 44%,var(--v5-border)) !important;
}
[data-theme] .my-page #lrExamplesModal .modal-header,
[data-theme] .my-page #lrEditModal .modal-header {
  background: linear-gradient(135deg,var(--v5-primary-light),var(--v5-surface)) !important;
  border-color: var(--v5-border) !important;
}
[data-theme] .my-page #lrExamplesModal .modal-title,
[data-theme] .my-page #lrEditModal .modal-title { color: var(--v5-text) !important; }
[data-theme] .my-page #lrExamplesModal .modal-body,
[data-theme] .my-page #lrEditModal .modal-body,
[data-theme] .my-page #lrEditModal .modal-footer { background: var(--v5-surface) !important; border-color: var(--v5-border) !important; }
[data-theme] .my-page .lr-example-item,
[data-theme] .my-page #lrEditModal .lr-edit-notice { color: var(--v5-text) !important; background: var(--v5-surface-2) !important; border-color: var(--v5-border) !important; }
[data-theme] .my-page .lr-example-title { color: var(--v5-text) !important; background: var(--v5-primary-light) !important; }
[data-theme] .my-page .lr-example-choice { color: var(--v5-text) !important; background: var(--v5-surface) !important; border-color: var(--v5-border) !important; }
[data-theme] .my-page .lr-modal-save {
  background: var(--v5-primary) !important;
  box-shadow: 0 5px 12px color-mix(in srgb,var(--v5-primary) 26%,transparent) !important;
}
[data-theme] .my-page .lr-modal-save:hover { background: var(--v5-primary-hover) !important; }
[data-theme] .learning-tools-page .v5-upgrading-icon { background: linear-gradient(135deg,var(--v5-primary),var(--v5-accent)) !important; }
[data-theme] .learning-tools-page .v5-upgrading-badge { color: var(--v5-primary-dark) !important; background: var(--v5-primary-light) !important; }
[data-theme] .quiz-player-page .aft-home-card:hover { border-color: var(--v5-primary) !important; box-shadow: 0 9px 22px color-mix(in srgb,var(--v5-primary) 14%,transparent) !important; }
[data-theme] .quiz-player-page .aft-home-cover { color: var(--v5-primary-dark) !important; background: linear-gradient(135deg,var(--v5-primary-light),var(--v5-surface-2)) !important; }
[data-theme] .quiz-player-page .qp-collection i,
[data-theme] .quiz-player-page .qp-set-top i { color: var(--v5-primary) !important; }
[data-theme] .quiz-player-page .qp-set-top i { background: var(--v5-primary-light) !important; }
[data-theme] .quiz-player-page .qp-empty { color: var(--v5-text-muted) !important; background: var(--v5-surface-2) !important; border-color: var(--v5-border) !important; }
[data-theme] .quiz-player-page .qp-learner:hover { background: var(--v5-primary-light) !important; }

/* Standalone quiz windows inherit the selected customer theme as well. */
html[data-theme] body:has(.qp-wrap),
html[data-theme] body:has(.qr-wrap) {
  color: var(--v5-text) !important;
  background: var(--v5-bg) !important;
}
[data-theme] .qp-head,
[data-theme] .qr-hero {
  color: var(--v5-hero-text) !important;
  background: linear-gradient(135deg,var(--v5-hero-from),var(--v5-hero-to)) !important;
}
[data-theme] .qp-question,
[data-theme] .qr-item {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme] .qp-num {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
}
[data-theme] .qp-choice {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme] .qp-choice:hover,
[data-theme] .qp-choice.is-selected {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme] .qp-bar,
[data-theme] .qp-status,
[data-theme] .qr-label {
  color: var(--v5-text-muted) !important;
  background-color: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme] .qp-save,
[data-theme] .qp-submit,
[data-theme] .qr-wrap .btn-primary {
  background: var(--v5-primary) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme] .qp-save:hover,
[data-theme] .qp-submit:hover,
[data-theme] .qr-wrap .btn-primary:hover {
  background: var(--v5-primary-hover) !important;
  border-color: var(--v5-primary-hover) !important;
}

/* Global sign-in modal: the entry point must never fall back to a white card. */
[data-theme] #loginModal .modal-content {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme] #loginModal .modal-header,
[data-theme] #loginModal .modal-body {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme] #loginModal .modal-title,
[data-theme] #loginModal .form-check-label {
  color: var(--v5-text) !important;
}
[data-theme] #loginModal #loginErrMsg {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
  border-color: color-mix(in srgb,var(--v5-primary) 28%,var(--v5-border)) !important;
}
[data-theme] #loginModal .v5-login-google {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] #loginModal .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Shared sign-in-required panels (level test, enrolment and self payment). */
[data-theme] .v5-login-required {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme] .v5-login-required::before {
  background: linear-gradient(90deg, var(--v5-primary), var(--v5-accent)) !important;
}
[data-theme] .v5-login-required .v5-lr-icon {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 12%, var(--v5-surface-2)) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 28%, var(--v5-border)) !important;
}
[data-theme] .v5-login-required .v5-lr-icon i {
  background: linear-gradient(135deg, var(--v5-primary), var(--v5-accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
[data-theme] .v5-login-action {
  background: linear-gradient(135deg, var(--v5-primary), var(--v5-primary-hover)) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--v5-primary) 38%, transparent) !important;
}
[data-theme] .v5-login-action:hover {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--v5-primary) 48%, transparent) !important;
}
[data-theme] .v5-join-action:hover {
  border-color: var(--v5-primary) !important;
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 8%, var(--v5-surface)) !important;
}
[data-theme] #loginModal #loginErrMsg.is-error {
  color: #dc2626 !important;
  background: color-mix(in srgb, #ef4444 10%, var(--v5-surface)) !important;
  border-color: color-mix(in srgb, #ef4444 32%, var(--v5-border)) !important;
}

/* Member entry flow: login, sign-up and social account linking share the site theme. */
[data-theme] .v5-login-google,
[data-theme] .google-button,
[data-theme] .google-mark {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme] .v5-login-google:hover,
[data-theme] .google-button:hover {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 8%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme] .google-join-tab,
[data-theme] .kakao-join-tab,
[data-theme] .naver-join-page #tabBtnNew,
[data-theme] .naver-join-page #tabBtnLink {
  color: var(--v5-text-muted) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme] .google-join-tab:hover,
[data-theme] .kakao-join-tab:hover,
[data-theme] .google-join-tab.active,
[data-theme] .kakao-join-tab.active,
[data-theme] .naver-join-page #tabBtnNew.active,
[data-theme] .naver-join-page #tabBtnLink.active {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 10%, var(--v5-surface)) !important;
  border-color: var(--v5-primary) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-primary) 18%, transparent) !important;
}
[data-theme] .naver-join-page #tabBtnNew.active,
[data-theme] .naver-join-page #tabBtnLink.active {
  border-bottom-color: var(--v5-surface) !important;
}
[data-theme] #pwFindDone > div {
  background: linear-gradient(135deg, var(--v5-primary), var(--v5-accent)) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--v5-primary) 28%, transparent) !important;
}

/* Dark mode keeps the navbar and modal login actions calm, not bright sky blue. */
[data-theme="dark"] .v5-navbar .btn-v5-login,
[data-theme="dark"] #loginModal .btn-v5-primary {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .v5-navbar .btn-v5-login:hover,
[data-theme="dark"] .v5-navbar .btn-v5-login:focus,
[data-theme="dark"] #loginModal .btn-v5-primary:hover,
[data-theme="dark"] #loginModal .btn-v5-primary:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .v5-login-action {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .v5-login-action:hover,
[data-theme="dark"] .v5-login-action:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Learning tools entry actions use the same quiet dark control treatment. */
[data-theme="dark"] .learning-tools-page .btn-v5-primary {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .learning-tools-page .btn-v5-primary:hover,
[data-theme="dark"] .learning-tools-page .btn-v5-primary:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Community Q&A entry stays readable without a bright sky-blue block. */
[data-theme="dark"] .community-page .v5-community-qna-head .btn-v5-primary,
[data-theme="dark"] .community-page .v5-community-qna-head .btn-v5-outline {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .community-page .v5-community-qna-head .btn-v5-primary:hover,
[data-theme="dark"] .community-page .v5-community-qna-head .btn-v5-primary:focus,
[data-theme="dark"] .community-page .v5-community-qna-head .btn-v5-outline:hover,
[data-theme="dark"] .community-page .v5-community-qna-head .btn-v5-outline:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Notice translation language names should use the dark control palette too. */
[data-theme="dark"] .community-page .v5c-notice-language-btn {
  color: var(--v5-text-muted) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .community-page .v5c-notice-language-btn:hover,
[data-theme="dark"] .community-page .v5c-notice-language-btn.active {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
}

[data-theme="dark"] .community-page .v5-contact-submit {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .community-page .v5-contact-submit:hover,
[data-theme="dark"] .community-page .v5-contact-submit:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* My page absence request action. */
[data-theme="dark"] .my-page .v5-absence-submit {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .my-page .v5-absence-submit:hover,
[data-theme="dark"] .my-page .v5-absence-submit:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Monthly report navigation and calendar controls need the same dark treatment. */
[data-theme="dark"] .my-page .rpt-month-nav-link {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .my-page .rpt-month-nav-link:hover,
[data-theme="dark"] .my-page .rpt-month-nav-link:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .my-page .rpt-month-nav-disabled {
  color: var(--v5-text-muted) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .my-page .rpt-cal .badge.rounded-pill {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 20%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 45%, var(--v5-border)) !important;
}
[data-theme="dark"] .my-page .rpt-cal tbody td:nth-child(7) > div:first-child .rounded-circle.badge {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 24%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 45%, var(--v5-border)) !important;
}
[data-theme="dark"] .my-page .rpt-cal .rpt-daily-btn {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 22%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 45%, var(--v5-border)) !important;
}
[data-theme="dark"] .my-page .rpt-mobile-today {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
}
[data-theme="dark"] .my-page .rpt-mobile-card {
  color: var(--v5-text) !important;
  background: linear-gradient(135deg, var(--v5-surface), var(--v5-surface-2)) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme="dark"] .my-page .rpt-mobile-date {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .my-page .rpt-mobile-daily {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 22%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 45%, var(--v5-border)) !important;
}

/* Sub and makeup lesson type badges. */
[data-theme="dark"] .my-page .v5-other-class-badge:not(.is-cancelled) {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 17%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 46%, var(--v5-border)) !important;
}

/* Weekend-reading status uses the selected customer theme instead of a fixed sky-blue pill. */
[data-theme] .my-page .v5-weekend-reading-badge:not(.is-cancelled) {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 42%, var(--v5-border)) !important;
}
[data-theme="dark"] .my-page .v5-weekend-reading-badge:not(.is-cancelled) {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 17%, var(--v5-surface-2)) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 46%, var(--v5-border)) !important;
}

/* Standalone/AJAX makeup-detail view. */
[data-theme] .makeup-detail-page .md-theme-icon,
[data-theme] .makeup-detail-fragment .md-theme-icon {
  color: var(--v5-primary) !important;
}
[data-theme] .makeup-detail-page .md-lesson-badge:not(.is-cancelled),
[data-theme] .makeup-detail-fragment .md-lesson-badge:not(.is-cancelled) {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 42%, var(--v5-border)) !important;
}
[data-theme] .makeup-detail-page .md-report-status-badge.is-present,
[data-theme] .makeup-detail-fragment .md-report-status-badge.is-present {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 42%, var(--v5-border)) !important;
}
[data-theme="dark"] .makeup-detail-page .md-lesson-badge:not(.is-cancelled),
[data-theme="dark"] .makeup-detail-fragment .md-lesson-badge:not(.is-cancelled),
[data-theme="dark"] .makeup-detail-page .md-report-status-badge.is-present,
[data-theme="dark"] .makeup-detail-fragment .md-report-status-badge.is-present {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 17%, var(--v5-surface-2)) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 46%, var(--v5-border)) !important;
}

/* Attendance approval popup controls. */
[data-theme] .att-manager-page .att-participation-label {
  color: var(--v5-primary-dark) !important;
}
[data-theme] .att-manager-page .att-theme-primary-action {
  color: #fff !important;
  background: var(--v5-primary) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme] .att-manager-page .att-theme-primary-action:hover,
[data-theme] .att-manager-page .att-theme-primary-action:focus {
  color: #fff !important;
  background: var(--v5-primary-hover) !important;
  border-color: var(--v5-primary-hover) !important;
}
[data-theme] .att-manager-page .att-theme-close-action {
  color: var(--v5-text) !important;
  background: var(--v5-surface-2) !important;
  border-color: var(--v5-border) !important;
}
[data-theme] .att-manager-page .att-theme-close-action:hover,
[data-theme] .att-manager-page .att-theme-close-action:focus {
  color: var(--v5-primary-dark) !important;
  background: var(--v5-primary-light) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .att-manager-page .att-participation-label {
  color: var(--v5-primary) !important;
}
[data-theme="dark"] .att-manager-page .att-theme-primary-action {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
}
[data-theme="dark"] .att-manager-page .att-theme-primary-action:hover,
[data-theme="dark"] .att-manager-page .att-theme-primary-action:focus,
[data-theme="dark"] .att-manager-page .att-theme-close-action:hover,
[data-theme="dark"] .att-manager-page .att-theme-close-action:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Member information update action. */
[data-theme="dark"] .member-page.edit-page .v5-member-form-actions .btn-v5-primary {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .member-page.edit-page .v5-member-form-actions .btn-v5-primary:hover,
[data-theme="dark"] .member-page.edit-page .v5-member-form-actions .btn-v5-primary:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Tuition plan cards: keep the top emphasis and apply actions within the dark surface palette. */
[data-theme="dark"] .online-class-page .v5-plan-card {
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
  box-shadow: var(--v5-card-shadow) !important;
}
[data-theme="dark"] .online-class-page .v5-plan-card.v5-plan-popular {
  background: linear-gradient(180deg, color-mix(in srgb, var(--v5-primary) 11%, var(--v5-surface)) 0%, var(--v5-surface) 55%) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 55%, var(--v5-border)) !important;
}
[data-theme="dark"] .online-class-page .v5-plan-ribbon {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 17%, var(--v5-surface-2)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--v5-primary) 46%, var(--v5-border));
}
[data-theme="dark"] .online-class-page .v5-plan-card .btn-v5-primary,
[data-theme="dark"] .online-class-page .v5-plan-card .btn-v5-outline {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .online-class-page .v5-plan-card .btn-v5-primary:hover,
[data-theme="dark"] .online-class-page .v5-plan-card .btn-v5-primary:focus,
[data-theme="dark"] .online-class-page .v5-plan-card .btn-v5-outline:hover,
[data-theme="dark"] .online-class-page .v5-plan-card .btn-v5-outline:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Level-test schedule controls, application action, and history status. */
[data-theme="dark"] .online-class-page .lt-class-type-option {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 54%, var(--v5-border)) !important;
}
[data-theme="dark"] .online-class-page .btn-check:checked + .lt-class-type-option,
[data-theme="dark"] .online-class-page .lt-class-type-option:hover,
[data-theme="dark"] .online-class-page .lt-class-type-option:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 22%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .online-class-page .lt-apply-button,
[data-theme="dark"] .online-class-page .lt-result-button,
[data-theme="dark"] .online-class-page .lt-status-badge.bg-primary {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .online-class-page .lt-apply-button:hover,
[data-theme="dark"] .online-class-page .lt-apply-button:focus,
[data-theme="dark"] .online-class-page .lt-result-button:hover,
[data-theme="dark"] .online-class-page .lt-result-button:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Enrollment month/price cards and the cart/payment actions. */
[data-theme="dark"] .online-class-page .er-ctype-card {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .online-class-page .er-ctype-card:hover {
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .online-class-page .btn-check:checked + .er-ctype-card {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 20%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .online-class-page .btn-check:checked + .er-ctype-card small {
  color: var(--v5-text-muted) !important;
}
[data-theme="dark"] .online-class-page .er-pmon-card {
  color: var(--v5-text) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}
[data-theme="dark"] .online-class-page .er-pmon-card:hover {
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .online-class-page .btn-check:checked + .er-pmon-card {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 20%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .online-class-page .btn-check:checked + .er-pmon-card .er-price-lbl {
  color: var(--v5-text) !important;
}
[data-theme="dark"] .online-class-page .btn-check:checked + .er-pmon-card .er-pmon-disc {
  color: var(--v5-primary) !important;
  background: var(--v5-surface) !important;
}
/* Enrollment step numbers (including the cart/payment icon steps) should not
   fall back to bright sky-blue or inline semantic fills in dark mode. */
[data-theme="dark"] .online-class-page .er-step-badge {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 24%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .online-class-page #erAddCartBtn,
[data-theme="dark"] .online-class-page #erPayBtn,
[data-theme="dark"] .online-class-page #spPayBtn {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .online-class-page #erAddCartBtn:hover,
[data-theme="dark"] .online-class-page #erAddCartBtn:focus,
[data-theme="dark"] .online-class-page #erPayBtn:hover,
[data-theme="dark"] .online-class-page #erPayBtn:focus,
[data-theme="dark"] .online-class-page #spPayBtn:hover,
[data-theme="dark"] .online-class-page #spPayBtn:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}
[data-theme="dark"] .online-class-page #erAddCartBtn:disabled,
[data-theme="dark"] .online-class-page #erPayBtn:disabled,
[data-theme="dark"] .online-class-page #spPayBtn:disabled {
  color: var(--v5-text-muted) !important;
  background: var(--v5-surface) !important;
  border-color: var(--v5-border) !important;
}

/* Shared sidebar institute introduction action. */
[data-theme="dark"] .v5-lslc-side-about {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .v5-lslc-side-about:hover,
[data-theme="dark"] .v5-lslc-side-about:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Family tuition calculator entry. */
[data-theme="dark"] .online-class-page .v5-tuition-calculator-btn {
  color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  border-color: color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .online-class-page .v5-tuition-calculator-btn:hover,
[data-theme="dark"] .online-class-page .v5-tuition-calculator-btn:focus {
  color: var(--v5-text) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  border-color: var(--v5-primary) !important;
}

/* Quiz answer save state: follows the active customer theme. */
html[data-theme] .qp-answer-save {
  background: var(--v5-primary) !important;
}
html[data-theme] .qp-answer-save:hover,
html[data-theme] .qp-answer-save:focus {
  background: var(--v5-primary-hover) !important;
}
html[data-theme] .qp-answer-save.is-saved,
html[data-theme] .qp-answer-save.is-saved:hover,
html[data-theme] .qp-answer-save.is-saved:focus {
  background: var(--v5-primary-dark) !important;
}

/* The catalog's internal legacy CSS used a fixed sky-blue start button.
   Keep every interactive quiz button within the dark customer palette. */
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .qp-start,
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .qp-start:hover,
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .qp-start:focus {
  color: #eefaff !important;
  background: #245d79 !important;
  border-color: #2a6b89 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .qp-start:hover,
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .qp-start:focus {
  color: #ffffff !important;
  background: #317494 !important;
  border-color: #3d86a8 !important;
}
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .btn-primary {
  color: #eefaff !important;
  background: #245d79 !important;
  border-color: #2a6b89 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .btn-primary:hover,
html[data-theme="dark"] body.learning-tools-page.quiz-player-page .btn-primary:focus {
  color: #ffffff !important;
  background: #317494 !important;
  border-color: #3d86a8 !important;
}

/* Quiz attempt state is semantic, but always blends with the active theme.
   A finished or active quiz must never look identical to an untouched card. */
html[data-theme] body.quiz-player-page .qp-set:has(.qp-set-status.is-completed) {
  border-color: color-mix(in srgb, var(--v5-primary) 62%, var(--v5-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v5-primary) 12%, var(--v5-surface)), var(--v5-surface)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--v5-primary) 12%, transparent) !important;
}
html[data-theme] body.quiz-player-page .qp-set:has(.qp-set-status.is-in_progress) {
  border-color: color-mix(in srgb, var(--v5-primary) 48%, var(--v5-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v5-primary) 9%, var(--v5-surface)), var(--v5-surface)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--v5-primary) 9%, transparent) !important;
}
html[data-theme] body.quiz-player-page .qp-set:has(.qp-set-status.is-retake) {
  border-color: color-mix(in srgb, var(--v5-primary) 38%, var(--v5-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v5-primary) 7%, var(--v5-surface)), var(--v5-surface)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--v5-primary) 7%, transparent) !important;
}
html[data-theme] body.quiz-player-page .qp-set-status.is-completed {
  background: color-mix(in srgb, var(--v5-primary) 16%, var(--v5-surface-2)) !important;
  color: var(--v5-primary-dark) !important;
}
html[data-theme] body.quiz-player-page .qp-set-status.is-in_progress {
  background: color-mix(in srgb, var(--v5-primary) 12%, var(--v5-surface-2)) !important;
  color: var(--v5-primary-dark) !important;
}
html[data-theme] body.quiz-player-page .qp-set-status.is-retake {
  background: color-mix(in srgb, var(--v5-primary) 9%, var(--v5-surface-2)) !important;
  color: var(--v5-primary-dark) !important;
}
html[data-theme] body.quiz-player-page .qp-set:has(.qp-set-status.is-recent) {
  border-color: color-mix(in srgb, var(--v5-primary) 52%, var(--v5-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v5-primary) 10%, var(--v5-surface)), var(--v5-surface)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--v5-primary) 10%, transparent) !important;
}
html[data-theme] body.quiz-player-page .qp-set-status.is-recent {
  background: color-mix(in srgb, var(--v5-primary) 13%, var(--v5-surface-2)) !important;
  color: var(--v5-primary-dark) !important;
}

/* Quiz flow: in dark mode, actions are tinted by the selected theme instead
   of reverting to the legacy fixed sky-blue fills.  Success/warning/delete
   feedback intentionally keeps its semantic colour. */
html[data-theme="dark"] body.quiz-player-page .qp-start,
html[data-theme="dark"] body.quiz-player-page .qp-tabs a.active,
html[data-theme="dark"] body.quiz-player-page .qp-tabs a:hover,
html[data-theme="dark"] body.quiz-player-page .qp-series-back {
  border-color: var(--v5-primary) !important;
  background: var(--v5-surface-2) !important;
  color: var(--v5-primary) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.quiz-player-page .qp-start:hover,
html[data-theme="dark"] body.quiz-player-page .qp-start:focus,
html[data-theme="dark"] body.quiz-player-page .qp-tabs a.active:hover,
html[data-theme="dark"] body.quiz-player-page .qp-tabs a:hover,
html[data-theme="dark"] body.quiz-player-page .qp-series-back:hover,
html[data-theme="dark"] body.quiz-player-page .qp-series-back:focus,
html[data-theme="dark"] body.quiz-play-page .qp-answer-save:not(.is-saved):hover,
html[data-theme="dark"] body.quiz-play-page .qp-answer-save:not(.is-saved):focus,
html[data-theme="dark"] body.quiz-play-page .qp-submit-btn:hover,
html[data-theme="dark"] body.quiz-play-page .qp-submit-btn:focus {
  border-color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  color: var(--v5-text) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.quiz-play-page .qp-answer-save:not(.is-saved),
html[data-theme="dark"] body.quiz-play-page .qp-submit-btn {
  border-color: var(--v5-border) !important;
  background: var(--v5-surface-2) !important;
  color: var(--v5-primary) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .wb-btn:not(.wb-btn-outline),
html[data-theme="dark"] .rp-review-btn,
html[data-theme="dark"] .rv-check,
html[data-theme="dark"] .rv-done-card .btn {
  border-color: var(--v5-border) !important;
  background: var(--v5-surface-2) !important;
  color: var(--v5-primary) !important;
}
html[data-theme="dark"] .wb-btn:not(.wb-btn-outline):hover,
html[data-theme="dark"] .wb-btn:not(.wb-btn-outline):focus,
html[data-theme="dark"] .rp-review-btn:hover,
html[data-theme="dark"] .rp-review-btn:focus,
html[data-theme="dark"] .rv-check:hover,
html[data-theme="dark"] .rv-check:focus,
html[data-theme="dark"] .rv-done-card .btn:hover,
html[data-theme="dark"] .rv-done-card .btn:focus,
html[data-theme="dark"] .wb-btn-outline:hover,
html[data-theme="dark"] .wb-btn-outline:focus,
html[data-theme="dark"] .wb-close:hover,
html[data-theme="dark"] .wb-close:focus,
html[data-theme="dark"] .rp-close-btn:hover,
html[data-theme="dark"] .rp-close-btn:focus,
html[data-theme="dark"] .rv-close:hover,
html[data-theme="dark"] .rv-close:focus {
  border-color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 21%, var(--v5-surface-2)) !important;
  color: var(--v5-text) !important;
}
html[data-theme="dark"] .rv-wb { color: var(--v5-primary) !important; }

/* Shared sub-page Hero: keep the title icon, share control and breadcrumb
   inside the dark customer palette instead of the legacy sky-blue/white
   treatment.  This is intentionally scoped to the common Hero so all
   customer pages stay consistent without changing the other themes. */
html[data-theme="dark"] .v5-sub-header {
  background: linear-gradient(135deg, var(--v5-primary-light), var(--v5-surface-2)) !important;
  border-bottom-color: var(--v5-border) !important;
}
html[data-theme="dark"] .v5-sub-header-icon {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 22%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .v5-sub-header-title {
  color: var(--v5-text) !important;
}
html[data-theme="dark"] .v5-sub-header-subtitle,
html[data-theme="dark"] .v5-sub-header-breadcrumb .breadcrumb-item.active {
  color: var(--v5-text-muted) !important;
}
html[data-theme="dark"] .v5-sub-header-breadcrumb .breadcrumb-item a {
  color: var(--v5-primary) !important;
}
html[data-theme="dark"] .v5-sub-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--v5-border) !important;
}
html[data-theme="dark"] .v5-sub-header-share {
  color: var(--v5-primary) !important;
  background: transparent !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .v5-sub-header-share::before {
  background: conic-gradient(
    from 0deg,
    var(--v5-border) 0deg,
    var(--v5-border) 210deg,
    color-mix(in srgb, var(--v5-primary) 70%, var(--v5-surface-2)) 255deg,
    var(--v5-primary) 305deg,
    var(--v5-border) 360deg
  ) !important;
}
html[data-theme="dark"] .v5-sub-header-share::after {
  background: var(--v5-surface-2) !important;
}
html[data-theme="dark"] .v5-sub-header-share:hover,
html[data-theme="dark"] .v5-sub-header-share:focus-visible {
  color: var(--v5-text) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.38) !important;
}

/* My-page profile avatar: the default primary fill is too bright in dark
   mode, so keep the identity cue while using the dark surface palette. */
html[data-theme="dark"] .my-page .v5-mypage-avatar {
  color: var(--v5-primary) !important;
  background: color-mix(in srgb, var(--v5-primary) 24%, var(--v5-surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--v5-primary) 58%, var(--v5-border)) !important;
  box-shadow: none !important;
}

/* Level-test process markers and the level-up prompt arrow use inline
   customer accent values; tone them down to the dark surface palette. */
html[data-theme="dark"] .online-class-page .lt-process-step-number,
html[data-theme="dark"] .online-class-page .lt-levelup-prompt-icon {
  color: color-mix(in srgb, var(--v5-primary) 65%, var(--v5-surface-2)) !important;
}