/* Font stacks: --wd-font-sans / --wd-font-mono in wd-design-tokens.css (loaded from base layout). */
:root {
    color-scheme: light;
    --wd-color-bg: #ffffff;
    --wd-color-bg-soft: #f7f9ff;
    --wd-color-surface: #ffffff;
    --wd-color-surface-muted: #f7f7f7;
    --wd-color-surface-raised: #ffffff;
    --wd-color-text: rgba(0, 0, 0, 0.82);
    --wd-color-text-muted: rgba(0, 0, 0, 0.52);
    --wd-color-text-soft: #5a5a5a;
    --wd-color-border: #ebebeb;
    --wd-color-border-strong: rgba(15, 23, 42, 0.14);
    --wd-color-primary: #3762f0;
    --wd-color-primary-hover: #2d52c9;
    --wd-color-primary-soft: #d7e0fc;
    --wd-color-focus: rgba(55, 98, 240, 0.32);
    --wd-header-top-bg: #f7f7f7;
    --wd-header-bg: #ffffff;
    --wd-footer-bg: #172c70;
    --wd-footer-text: #ffffff;
    --wd-card-bg: #ffffff;
    --wd-card-muted-bg: #f7f7f7;
    --wd-form-bg: #ffffff;
    --wd-shadow-card: 0 3px 8px rgba(0, 0, 0, 0.15);
    --wd-shadow-raised: 0 5px 15px rgba(0, 0, 0, 0.15);
    --wd-overlay-hero: rgba(0, 0, 0, 0.2);
    --wd-profile-bg: #d7e0fc47;
    --wd-profile-sidebar-bg: #ffffff;
    --wd-profile-card-bg: #ffffff;
    --wd-profile-course-bg: #f4f6fe;
    --wd-lesson-panel-bg: #ffffff;
    --wd-lesson-panel-header-bg: rgba(248, 250, 252, 0.96);
    --wd-lesson-code-shell-bg: #272822;
    --wd-lesson-bottom-bar-bg: #1f201a;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --wd-color-bg: #0f172a;
    --wd-color-bg-soft: #111c32;
    --wd-color-surface: #172033;
    --wd-color-surface-muted: #1e293b;
    --wd-color-surface-raised: #1f2a3d;
    --wd-color-text: rgba(248, 250, 252, 0.94);
    --wd-color-text-muted: rgba(226, 232, 240, 0.68);
    --wd-color-text-soft: rgba(226, 232, 240, 0.78);
    --wd-color-border: rgba(148, 163, 184, 0.22);
    --wd-color-border-strong: rgba(148, 163, 184, 0.34);
    --wd-color-primary: #7ea0ff;
    --wd-color-primary-hover: #a9bdff;
    --wd-color-primary-soft: rgba(55, 98, 240, 0.24);
    --wd-color-focus: rgba(126, 160, 255, 0.38);
    --wd-header-top-bg: #111827;
    --wd-header-bg: #0f172a;
    --wd-footer-bg: #08111f;
    --wd-footer-text: rgba(248, 250, 252, 0.94);
    --wd-card-bg: #172033;
    --wd-card-muted-bg: #1e293b;
    --wd-form-bg: #111827;
    --wd-shadow-card: 0 14px 34px rgba(0, 0, 0, 0.28);
    --wd-shadow-raised: 0 16px 36px rgba(0, 0, 0, 0.34);
    --wd-overlay-hero: rgba(0, 0, 0, 0.45);
    /* Profile needs a slightly different page background to separate cards visually */
    --wd-profile-bg: #0b1220;
    --wd-profile-sidebar-bg: #172033;
    --wd-profile-card-bg: #172033;
    --wd-profile-course-bg: #1e293b;
    --wd-lesson-panel-bg: #111827;
    --wd-lesson-panel-header-bg: rgba(15, 23, 42, 0.94);
    --wd-lesson-code-shell-bg: #1b1c17;
    --wd-lesson-bottom-bar-bg: #111827;
}

body {
    background: var(--wd-color-bg);
    color: var(--wd-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--wd-color-text);
}

p,
.text-muted {
    color: var(--wd-color-text-soft) !important;
}

a,
a:focus {
    color: var(--wd-color-text);
}

a:hover {
    color: var(--wd-color-primary-hover);
}

input,
textarea,
select,
.form-control {
    background-color: var(--wd-form-bg);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background-color: var(--wd-form-bg);
    border-color: var(--wd-color-primary);
    box-shadow: 0 0 0 0.2rem var(--wd-color-focus);
    color: var(--wd-color-text);
}

input::placeholder,
textarea::placeholder {
    color: var(--wd-color-text-muted);
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--wd-color-text);
    box-shadow: 0 0 0 1000px var(--wd-form-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}

.top-header-area {
    background-color: var(--wd-header-top-bg);
    border-bottom-color: var(--wd-color-border);
}

.top-header-area .contact-info a,
.top-header-area .follow-us span,
.top-header-area .follow-us a {
    border-color: var(--wd-color-border);
    color: var(--wd-color-text-muted);
}

.top-header-area .contact-info a:hover,
.top-header-area .contact-info a:focus,
.top-header-area .follow-us a:hover,
.top-header-area .follow-us a:focus {
    color: var(--wd-color-text);
}

.clever-main-menu,
.classy-nav-container,
.classy-navbar,
.classy-menu {
    background-color: var(--wd-header-bg);
}

.is-sticky .clever-main-menu {
    background-color: var(--wd-header-bg);
    box-shadow: var(--wd-shadow-raised);
}

.clever-main-menu .classynav ul li a {
    color: var(--wd-color-text-muted);
}

.clever-main-menu .classynav ul li a:hover,
.clever-main-menu .classynav ul li a:focus {
    color: var(--wd-color-text);
}

.register-login-area a {
    color: var(--wd-color-primary);
}

.register-login-area a.active,
.register-login-area a:hover,
.register-login-area a:focus {
    background-color: var(--wd-color-primary-soft);
    color: var(--wd-color-primary);
}

.classy-navbar-toggler .navbarToggler span,
.classycloseIcon .cross-wrap span {
    background: var(--wd-color-text);
}

/*
 * Classy mobile drawer: `classy-nav.min.css` forces #fff on
 * `.breakpoint-on .classy-navbar .classy-menu` and gray rows on top-level
 * `> ul > li > a` — override for `data-theme` (plugin uses `.dark` on container).
 */
html[data-theme="dark"] .breakpoint-on .classy-navbar .classy-menu {
    background-color: var(--wd-color-surface-raised);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .breakpoint-on .classynav>ul>li>a {
    background-color: var(--wd-color-surface-muted);
    border-bottom: 1px solid var(--wd-color-border);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .breakpoint-on .classynav>ul>li>a:hover,
html[data-theme="dark"] .breakpoint-on .classynav>ul>li>a:focus {
    background-color: rgba(148, 163, 184, 0.12);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .breakpoint-on .classynav ul li.has-down>a::after,
html[data-theme="dark"] .breakpoint-on .classynav ul li.megamenu-item>a::after {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .breakpoint-on .classynav ul li.has-down.active>a::after,
html[data-theme="dark"] .breakpoint-on .classynav ul li.megamenu-item.active>a::after {
    color: var(--wd-color-primary);
}

html[data-theme="dark"] .breakpoint-on .search-area form input {
    background-color: var(--wd-form-bg);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .breakpoint-on .search-area form input:focus {
    border-color: var(--wd-color-primary);
}

html[data-theme="dark"] .breakpoint-on .search-area form input::placeholder {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .breakpoint-on .search-area form button,
html[data-theme="dark"] .breakpoint-on .search-area form button i {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .breakpoint-on .classynav ul li .dropdown,
html[data-theme="dark"] .breakpoint-on .classynav ul li .megamenu {
    background-color: var(--wd-color-surface-raised);
}

html[data-theme="dark"] .breakpoint-on .classynav ul li .megamenu .single-mega.cn-col-3,
html[data-theme="dark"] .breakpoint-on .classynav ul li .megamenu .single-mega.cn-col-4,
html[data-theme="dark"] .breakpoint-on .classynav ul li .megamenu .single-mega.cn-col-5 {
    border-bottom-color: var(--wd-color-border);
    border-right: none;
}

html[data-theme="dark"] .classynav ul li .megamenu .single-mega .title {
    color: var(--wd-color-text);
    border-bottom-color: var(--wd-color-border);
}

html[data-theme="dark"] .classynav ul li .dropdown li a {
    border-bottom-color: var(--wd-color-border);
    color: var(--wd-color-text-soft);
}

html[data-theme="dark"] .classynav ul li .dropdown li a:hover,
html[data-theme="dark"] .classynav ul li .dropdown li a:focus {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .breakpoint-on .classy-menu .theme-toggle {
    border-color: var(--wd-color-border);
    background: var(--wd-color-surface-muted);
    color: var(--wd-color-text);
}

/*
 * Mobile classy drawer: переключатель темы между списком ссылок и блоком входа —
 * центрируем и отделяем линией (пустой search-area не занимает место).
 */
.breakpoint-on .classynav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.breakpoint-on .search-area:not(:has(input)) {
    display: none;
}

.breakpoint-on .classynav>.theme-toggle.theme-toggle--nav {
    align-self: center;
    margin: 12px auto;
    border-top: 1px solid var(--wd-color-border);
}

.breakpoint-on .classynav>.register-login-area {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.bg-overlay-2by5::after {
    background-color: var(--wd-overlay-hero);
}

/* Главная: hero-area — в тёмной теме ровный «вечерний» скрим поверх фото + текст поверх слоя */
html[data-theme="dark"] .hero-area.bg-overlay-2by5::after {
    z-index: 1;
    background:
        radial-gradient(ellipse 95% 65% at 50% 28%, rgba(126, 160, 255, 0.16), transparent 62%),
        linear-gradient(180deg, rgba(11, 18, 32, 0.76) 0%, rgba(15, 23, 42, 0.88) 50%, rgba(8, 14, 26, 0.94) 100%);
}

html[data-theme="dark"] .hero-area > .container {
    position: relative;
    z-index: 2;
}

html[data-theme="dark"] .hero-area .hero-content h2 {
    color: #f8fafc;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

.section-heading h3,
.single-cool-facts-area h5 {
    color: var(--wd-color-text);
}

.popular-courses-area,
.best-courses-area,
.cool-facts-area,
.about-us-area,
.privacy-policy-area,
.faq-area,
.contact-area {
    background-color: var(--wd-color-bg);
}

/* Welcome cool-facts: карточки + Font Awesome в .icon */
html[data-theme="dark"] .cool-facts-area .single-cool-facts-area {
    background-color: var(--wd-card-bg);
    border-color: var(--wd-color-border);
    box-shadow: var(--wd-shadow-card);
}

html[data-theme="dark"] .cool-facts-area .single-cool-facts-area .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    border-radius: 20px;
    /* Светлее карточки: иначе тёмные PNG теряются на #172033 */
    background:
        radial-gradient(circle at 35% 28%, rgba(226, 232, 240, 0.16), transparent 58%),
        linear-gradient(165deg, rgba(148, 163, 184, 0.14) 0%, rgba(55, 98, 240, 0.1) 100%);
    border: 1px solid rgba(226, 232, 240, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 6px 22px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .cool-facts-area .single-cool-facts-area .icon i {
    font-size: 34px;
    color: var(--wd-color-primary);
    filter: drop-shadow(0 0 10px rgba(126, 160, 255, 0.35));
}

/* Courses thank-you (`pages/courses/thank-you`) — карточка без bg-white, акцентная полоска */
.course-thank-you-page__accent {
    height: 5px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #22c55e, #34d399);
}

.course-thank-you-page__card.card {
    border-radius: 0 0 12px 12px;
}

html[data-theme="dark"] .course-thank-you-page__card.card {
    background-color: var(--wd-card-bg);
    border: 1px solid var(--wd-color-border);
    box-shadow: var(--wd-shadow-card);
}

html[data-theme="dark"] .course-thank-you-page__accent {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.95), rgba(45, 212, 191, 0.85));
    box-shadow: 0 0 28px rgba(52, 211, 153, 0.22);
}

html[data-theme="dark"] .course-thank-you-page__icon.text-success {
    color: #6ee7b7 !important;
    filter: drop-shadow(0 4px 14px rgba(52, 211, 153, 0.42));
}

html[data-theme="dark"] .course-thank-you-page .course-thank-you-page__card h1 {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .course-thank-you-page .course-thank-you-page__card p {
    color: var(--wd-color-text-soft);
}

html[data-theme="dark"] .course-thank-you-page__cta.btn-outline-success {
    color: #a7f3d0;
    border-color: rgba(52, 211, 153, 0.55);
    background-color: transparent;
}

html[data-theme="dark"] .course-thank-you-page__cta.btn-outline-success:hover,
html[data-theme="dark"] .course-thank-you-page__cta.btn-outline-success:focus {
    color: #ecfdf5;
    background-color: rgba(16, 185, 129, 0.22);
    border-color: rgba(110, 231, 183, 0.85);
}

/* Popular courses texture looks harsh on dark mode (inline background-image in Blade) */
html[data-theme="dark"] .popular-courses-area {
    background-image: none !important;
    background-color: var(--wd-color-bg-soft);
}

html[data-theme="dark"] .popular-courses-area::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1200px 400px at 20% 0%, rgba(126, 160, 255, 0.12), transparent 70%);
    opacity: 0.8;
}

html[data-theme="dark"] .popular-courses-area>.container {
    position: relative;
    z-index: 1;
}

/* Register-now texture + light overlay are tuned for light theme */
html[data-theme="dark"] .register-now {
    background-image: none !important;
    background-color: var(--wd-color-bg-soft);
}

html[data-theme="dark"] .register-now::after {
    background-color: rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .register-now h3,
html[data-theme="dark"] .register-now h4 {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .register-now .register-contact-form {
    background-color: var(--wd-card-bg);
    box-shadow: var(--wd-shadow-card);
    border: 1px solid var(--wd-color-border);
}

html[data-theme="dark"] .register-now .register-contact-form .forms .form-control {
    background-color: var(--wd-form-bg);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .register-now .register-contact-form .forms .form-control::placeholder {
    color: var(--wd-color-text-muted);
}

.single-popular-course,
.single-course-intro .single-course-intro-content,
.box,
.card,
.modal-content,
.swal2-popup {
    background-color: var(--wd-card-bg);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

.single-popular-course {
    box-shadow: var(--wd-shadow-card);
}

.single-popular-course .seat-rating-fee {
    background-color: var(--wd-card-muted-bg);
}

.single-popular-course .course-content .meta span,
.single-popular-course .course-content .meta a,
.single-popular-course .seat-rating-fee .seat-rating,
.single-popular-course .seat-rating-fee .seat-rating i,
.breadcumb-area .breadcrumb .breadcrumb-item,
.breadcumb-area .breadcrumb .breadcrumb-item a {
    color: var(--wd-color-text-muted);
}

.single-popular-course .seat-rating-fee .seat-rating div,
.breadcumb-area .breadcrumb,
.modal-header,
.modal-footer {
    border-color: var(--wd-color-border);
}

.breadcrumb,
.breadcumb-area .breadcrumb {
    background-color: var(--wd-color-surface-muted);
}

footer {
    background-color: var(--wd-footer-bg);
    color: var(--wd-footer-text);
}

footer p,
footer a,
footer aside ul li a,
footer nav .icons li a {
    color: var(--wd-footer-text) !important;
}

footer aside ul li h3 {
    color: color-mix(in srgb, var(--wd-footer-text) 62%, var(--wd-color-primary));
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid var(--wd-color-border);
    border-radius: 999px;
    background: var(--wd-color-surface);
    color: var(--wd-color-text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus {
    border-color: var(--wd-color-primary);
    color: var(--wd-color-primary);
    outline: none;
}

.theme-toggle:hover .theme-toggle__thumb,
.theme-toggle:focus .theme-toggle__thumb {
    color: #ffffff;
}

.theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--wd-color-focus);
}

.theme-toggle__track {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 999px;
    background: var(--wd-color-primary-soft);
    flex: 0 0 auto;
}

.theme-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wd-color-primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-toggle__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: block;
    overflow: visible;
}

.theme-toggle__icon--moon,
html[data-theme="dark"] .theme-toggle__icon--sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle__icon--moon {
    display: block;
}

html[data-theme="dark"] .theme-toggle__thumb {
    transform: translateX(22px);
}

.theme-toggle--top {
    margin-right: 10px;
}

.theme-toggle--nav {
    display: none;
    margin-right: 10px;
}

html[data-theme="dark"] .nav-brand.logo img:last-child {
    filter: brightness(0) invert(1);
}

/* Do not force `main` background globally: profile pages set their own background in `profile.css` */

div.user-info-section div.avatar,
div.avatar-list div.avatar {
    background-color: var(--wd-color-surface-muted);
}

/* Profile header (avatar + user info) */
html[data-theme="dark"] .user-info-section .badge-success {
    background-color: rgba(16, 185, 129, 0.22);
    color: rgba(236, 253, 245, 0.92);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

html[data-theme="dark"] .user-info-section .info h2,
html[data-theme="dark"] .user-info-section .info h6 {
    color: var(--wd-color-text);
}

/* League badge under avatar uses light gradients in `profile.css` */
html[data-theme="dark"] .profile-avatar-league__badge[data-league="trainee"],
html[data-theme="dark"] .profile-avatar-league__badge[data-league="junior"],
html[data-theme="dark"] .profile-avatar-league__badge[data-league="middle"],
html[data-theme="dark"] .profile-avatar-league__badge[data-league="senior"] {
    background: rgb(15, 23, 42);
    border-color: rgba(148, 163, 184, 0.26);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .profile-avatar-league__badge::after {
    opacity: 0.08;
    background: linear-gradient(90deg, rgba(126, 160, 255, 0.3), rgba(34, 197, 94, 0.22), rgba(251, 191, 36, 0.2));
}

html[data-theme="dark"] .profile-avatar-league__badge:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* Profile badges section */
html[data-theme="dark"] .profile-badges-section {
    background: var(--wd-card-bg);
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .profile-badges-section__title {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .profile-badge-item {
    background: var(--wd-color-surface-muted);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .profile-badge-item:hover {
    border-color: rgba(148, 163, 184, 0.5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .profile-badge-item[data-badge-key="league_senior"] {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.55);
    color: #fde68a;
}

html[data-theme="dark"] .profile-badge-item[data-badge-key="league_middle"] {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.55);
    color: #bfdbfe;
}

html[data-theme="dark"] .profile-badge-item[data-badge-key="league_junior"] {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.55);
    color: #a7f3d0;
}

html[data-theme="dark"] .profile-badge-item[data-badge-key="top10_leaderboard"] {
    background: rgba(192, 132, 252, 0.14);
    border-color: rgba(192, 132, 252, 0.55);
    color: #e9d5ff;
}

html[data-theme="dark"] .profile-badge-item[data-badge-key="perfect_score"] {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.55);
    color: #fed7aa;
}

/* Disabled inputs in profile forms (email/phone are intentionally disabled) */
html[data-theme="dark"] .page-content input.form-control:disabled,
html[data-theme="dark"] .page-content textarea.form-control:disabled,
html[data-theme="dark"] .page-content select.form-control:disabled {
    background-color: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.7);
    opacity: 1;
    cursor: not-allowed;
}

html[data-theme="dark"] .page-content input.form-control:disabled::placeholder,
html[data-theme="dark"] .page-content textarea.form-control:disabled::placeholder {
    color: rgba(226, 232, 240, 0.5);
}

/* Profile /exams — пустой список: alert-info Bootstrap на тёмном фоне профиля */
html[data-theme="dark"] .profile-empty-alert.alert-info {
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.44) 0%, rgba(23, 32, 51, 0.94) 100%);
    border: 1px solid rgba(96, 165, 250, 0.38);
    border-left: 1px solid rgba(96, 165, 250, 0.38);
    color: var(--wd-color-text);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 26px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .profile-empty-alert.alert-info p {
    color: var(--wd-color-text-soft) !important;
}

.profile-points-wallet__card,
ul.profile-menu,
div.page-content {
    background: var(--wd-profile-card-bg);
    border-color: var(--wd-color-border);
    box-shadow: var(--wd-shadow-card);
    color: var(--wd-color-text);
}

ul.profile-menu li {
    border-bottom-color: var(--wd-color-border);
}

ul.profile-menu li a,
div.page-content div.course-list div.course-card {
    color: var(--wd-color-text);
}

div.page-content div.page-header {
    border-bottom-color: var(--wd-color-border);
}

div.page-content div.course-list div.course-card,
ul.flat>li,
ul.hierarchical li {
    background-color: var(--wd-profile-course-bg);
}

.profile-points-wallet__label {
    color: var(--wd-color-text-muted);
}

.profile-points-wallet__value {
    color: var(--wd-color-text);
}

div#lesson-section {
    background-color: var(--wd-lesson-panel-bg);
    border-color: var(--wd-color-border-strong);
    color: var(--wd-color-text);
}

div#lesson-section div.lesson-header {
    background: var(--wd-lesson-panel-header-bg);
    border-bottom-color: var(--wd-color-border);
}

div#lesson-section .breadcrumb a,
div#lesson-section .breadcrumb-item.active {
    color: var(--wd-color-text);
}

div#lesson-section .breadcrumb-item.active {
    opacity: 0.72;
}

div#lesson-section pre.language-markup,
div#lesson-section pre.language-css,
div#lesson-section pre.language-javascript,
div#lesson-section pre.language-python,
div#lesson-section pre.language-cpp,
div#lesson-section pre.language-csharp,
div#lesson-section pre.language-php {
    background-color: var(--wd-color-surface-muted);
    border-color: var(--wd-color-border);
}

div#lesson-section pre.language-markup code,
div#lesson-section pre.language-css code,
div#lesson-section pre.language-javascript code,
div#lesson-section pre.language-python code,
div#lesson-section pre.language-cpp code,
div#lesson-section pre.language-csharp code,
div#lesson-section pre.language-php code {
    color: var(--wd-color-text);
}

div#code-section {
    border-color: var(--wd-color-border-strong);
}

div#code-section div.header,
.bottomSection {
    background-color: var(--wd-lesson-code-shell-bg);
}

.bottomSection {
    background-color: var(--wd-lesson-bottom-bar-bg);
}

/* Нижняя панель урока: в тёмной теме отделить от фона страницы */
html[data-theme="dark"] .bottomSection {
    background: linear-gradient(180deg, var(--wd-color-surface-muted) 0%, var(--wd-card-bg) 100%);
    border-top: 1px solid var(--wd-color-border-strong);
    box-shadow:
        0 -10px 28px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

div#result-section #preview {
    background-color: var(--wd-color-surface-muted);
}

/* ─── Challenge solve page (`challenge-page.css`) — dark mode ───────────── */
/* Базовые стили используют жёсткие hex и перебивают div#lesson-section из темы */

html[data-theme="dark"] .challenge-solve-page {
    background: var(--wd-color-bg-soft);
}

html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--minimal {
    background: var(--wd-color-bg-soft);
}

html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--minimal #lesson-section {
    background: var(--wd-lesson-panel-bg);
}

html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--minimal .challenge-left-header__actionbar {
    background: var(--wd-card-bg);
    border-top-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page #lesson-section {
    background-color: var(--wd-lesson-panel-bg);
    border-color: var(--wd-color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .challenge-solve-page #lesson-section .presentation.challenge-presentation {
    background: var(--wd-color-bg-soft);
}

html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--simple #lesson-section {
    background: linear-gradient(180deg, var(--wd-lesson-panel-bg) 0%, var(--wd-color-bg-soft) 100%);
}

html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--simple .challenge-left-header__actionbar {
    background: linear-gradient(180deg, var(--wd-color-surface-muted) 0%, var(--wd-color-bg-soft) 100%);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header {
    background: var(--wd-card-bg);
    border-bottom-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page .challenge-nav-btn {
    background: var(--wd-card-bg);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-nav-btn:hover:not(.disabled):not([aria-disabled="true"]) {
    background: var(--wd-color-surface-muted);
    border-color: var(--wd-color-border-strong);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__nav-link {
    color: var(--wd-color-primary);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__nav-link:hover {
    color: var(--wd-color-primary-hover);
    background-color: rgba(126, 160, 255, 0.12);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__nav-sep {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__nav-current {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__title {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__subtitle {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__group-pill {
    background: var(--wd-color-surface-muted);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text-soft);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__group-icon {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__group-label {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__group-name {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-left-header__actionbar {
    background: linear-gradient(180deg, var(--wd-color-surface-muted) 0%, var(--wd-color-bg-soft) 100%);
    border-top-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--minimal .challenge-chip,
html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--minimal .challenge-chip--points,
html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--minimal .challenge-chip--status {
    background: var(--wd-color-surface-muted);
    color: var(--wd-color-text);
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page .challenge-chip--points {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.35) 0%, rgba(245, 158, 11, 0.28) 100%);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.35);
}

html[data-theme="dark"] .challenge-solve-page .challenge-chip--status {
    background: var(--wd-color-surface-muted);
    color: var(--wd-color-text);
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page .challenge-info-card.card,
html[data-theme="dark"] .challenge-solve-page .challenge-info-card {
    background-color: var(--wd-card-bg);
    border-color: var(--wd-color-border);
    box-shadow: var(--wd-shadow-card);
}

html[data-theme="dark"] .challenge-solve-page .challenge-info-card .card-body {
    background-color: var(--wd-card-bg);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-info-card .card-title {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page.challenge-solve-page--minimal .challenge-info-card .card-title i {
    color: var(--wd-color-primary);
    opacity: 1;
}

html[data-theme="dark"] .challenge-solve-page .challenge-description-content {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-description-content .challenge-desc-block {
    border-bottom-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page .challenge-description-content .challenge-desc-title {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-description-content .challenge-desc-block p {
    color: var(--wd-color-text-soft);
}

html[data-theme="dark"] .challenge-solve-page .challenge-description-content .challenge-desc-block--output .challenge-desc-title {
    color: var(--wd-color-primary-hover);
}

html[data-theme="dark"] .challenge-solve-page .challenge-description-content .challenge-desc-block--task .challenge-desc-title {
    color: #6ee7b7;
}

html[data-theme="dark"] .challenge-solve-page .challenge-description-content code {
    background: rgba(148, 163, 184, 0.14);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-meta-dl dt {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-meta-dl dd {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-details {
    border-color: var(--wd-color-border);
    background: var(--wd-card-bg);
}

html[data-theme="dark"] .challenge-solve-page .challenge-details__summary {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .challenge-solve-page .challenge-details__body {
    border-top-color: var(--wd-color-border);
    background: var(--wd-color-bg-soft);
}

html[data-theme="dark"] .challenge-solve-page .challenge-details[open] .challenge-details__summary {
    background: var(--wd-color-surface-muted);
}

html[data-theme="dark"] .challenge-solve-page .challenge-readonly-alert {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0%, rgba(245, 158, 11, 0.08) 100%);
    color: #fde68a;
    border-left-color: rgba(251, 191, 36, 0.65);
}

html[data-theme="dark"] .challenge-solve-page .challenge-completed-alert {
    border-color: rgba(52, 211, 153, 0.38);
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.55) 0%, rgba(6, 95, 70, 0.28) 100%);
    color: #a7f3d0;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.12);
}

html[data-theme="dark"] .challenge-solve-page .challenge-completed-alert__subtitle {
    color: rgba(167, 243, 208, 0.88);
}

html[data-theme="dark"] .challenge-solve-page .challenge-completed-alert__icon {
    background: rgba(52, 211, 153, 0.22);
    color: #a7f3d0;
}

html[data-theme="dark"] .challenge-solve-page .challenge-completed-alert__points {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(52, 211, 153, 0.35);
    color: #d1fae5;
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback {
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback.alert-danger {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.38);
    color: #fecaca;
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback.alert-success {
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(6, 78, 59, 0.48);
    color: #d1fae5;
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback.alert-info {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(30, 58, 138, 0.38);
    color: #bfdbfe;
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback__case {
    background: rgba(15, 23, 42, 0.65);
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback.alert-danger .challenge-feedback__row code {
    color: #fecaca;
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback.alert-success .challenge-feedback__row code {
    color: #d1fae5;
}

html[data-theme="dark"] .challenge-solve-page .challenge-feedback.alert-info .challenge-feedback__row code {
    color: #e0f2fe;
}

html[data-theme="dark"] .challenge-solve-page .points-earned-pop__card {
    background: linear-gradient(180deg, rgba(23, 32, 51, 0.98) 0%, rgba(6, 78, 59, 0.52) 100%);
    border-color: rgba(52, 211, 153, 0.38);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .challenge-solve-page .points-earned-pop__label {
    color: rgba(167, 243, 208, 0.92);
}

html[data-theme="dark"] .challenge-solve-page .points-earned-pop__value {
    color: #6ee7b7;
    text-shadow: 0 10px 30px rgba(16, 185, 129, 0.22);
}

html[data-theme="dark"] .challenge-solve-page #code-section {
    background: linear-gradient(180deg, var(--wd-color-surface-raised) 0%, var(--wd-lesson-panel-bg) 100%);
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .challenge-solve-page #code-section:focus-within {
    border-color: rgba(126, 160, 255, 0.55);
    box-shadow:
        0 0 0 4px rgba(126, 160, 255, 0.15),
        0 12px 28px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .challenge-solve-page #code-section .lesson-resize-handle::before {
    background: rgba(126, 160, 255, 0.55);
}

/* ─── Leaderboard page (`leaderboard.css`) — dark mode ─────────────────── */

html[data-theme="dark"] .leaderboard-hero {
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(99, 102, 241, 0.26), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 40%, rgba(34, 197, 94, 0.12), transparent 55%),
        linear-gradient(180deg, var(--wd-color-bg-soft) 0%, var(--wd-color-bg) 100%);
}

html[data-theme="dark"] .leaderboard-hero__badge {
    color: var(--wd-color-primary-hover);
    background: rgba(55, 98, 240, 0.15);
    border-color: rgba(129, 140, 248, 0.38);
}

html[data-theme="dark"] .leaderboard-hero__title,
html[data-theme="dark"] .leaderboard-podium-card__name,
html[data-theme="dark"] .leaderboard-podium-card__points,
html[data-theme="dark"] .leaderboard-row__points {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .leaderboard-hero__intro {
    color: var(--wd-color-text-soft);
}

html[data-theme="dark"] .leaderboard-podium-card__rank,
html[data-theme="dark"] .leaderboard-podium-card__pts-label {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .leaderboard-podium-card {
    background: linear-gradient(180deg, var(--wd-card-bg) 0%, var(--wd-color-surface-muted) 100%);
    border-color: var(--wd-color-border);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .leaderboard-podium-card:hover {
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .leaderboard-podium-card.is-you {
    border-color: rgba(147, 197, 253, 0.65);
    box-shadow:
        0 0 0 2px rgba(59, 130, 246, 0.35),
        0 10px 28px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .leaderboard-podium__col--1 .leaderboard-podium-card {
    background: linear-gradient(180deg,
            rgba(251, 191, 36, 0.22) 0%,
            rgba(245, 158, 11, 0.12) 38%,
            var(--wd-card-bg) 100%);
    border-color: rgba(251, 191, 36, 0.55);
}

html[data-theme="dark"] .leaderboard-podium-card__avatar-wrap {
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.85), rgba(245, 158, 11, 0.95));
}

html[data-theme="dark"] .leaderboard-podium-card__avatar {
    background: var(--wd-color-bg-soft);
}

html[data-theme="dark"] .leaderboard-table.card {
    background-color: var(--wd-card-bg);
}

html[data-theme="dark"] .leaderboard-table__grid thead th {
    background: var(--wd-color-surface-muted);
    color: var(--wd-color-text-muted);
    border-bottom-color: var(--wd-color-border);
}

html[data-theme="dark"] .leaderboard-table__grid tbody td {
    border-bottom-color: var(--wd-color-border);
}

html[data-theme="dark"] .leaderboard-table__grid tbody tr:hover {
    background: rgba(148, 163, 184, 0.08);
}

html[data-theme="dark"] .leaderboard-table__grid tbody tr.is-you {
    background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.18) 0%,
            rgba(255, 255, 255, 0) 100%);
}

html[data-theme="dark"] .leaderboard-rank-num {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .leaderboard-user__avatar {
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .leaderboard-you-badge {
    color: var(--wd-color-primary-hover);
    background: rgba(59, 130, 246, 0.22);
}

html[data-theme="dark"] .leaderboard-league-pill {
    border-color: var(--wd-color-border);
    background: var(--wd-color-surface-muted);
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .leaderboard-league-pill--trainee {
    background: rgba(243, 244, 246, 0.14);
    border-color: rgba(156, 163, 175, 0.55);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .leaderboard-league-pill--junior {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.55);
    color: #a7f3d0;
}

html[data-theme="dark"] .leaderboard-league-pill--middle {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.55);
    color: #fde68a;
}

html[data-theme="dark"] .leaderboard-league-pill--senior {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.55);
    color: #bfdbfe;
}

html[data-theme="dark"] .leaderboard-cta {
    background: linear-gradient(135deg,
            rgba(99, 102, 241, 0.14) 0%,
            rgba(14, 165, 233, 0.1) 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .leaderboard-cta-outline {
    border-color: rgba(148, 163, 184, 0.55);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .leaderboard-cta-outline:hover {
    border-color: var(--wd-color-primary-hover);
    color: var(--wd-color-primary-hover);
    background-color: rgba(148, 163, 184, 0.08);
}

/* ─── Contact page (`/contact`) — dark mode ───────────────────────────── */

html[data-theme="dark"] .contact-area {
    background-color: var(--wd-color-bg);
}

html[data-theme="dark"] .contact--info {
    background-color: var(--wd-card-bg);
    border-color: var(--wd-color-border);
}

html[data-theme="dark"] .contact--info .contact-list li h6 {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .contact-form {
    background-color: var(--wd-card-bg);
    box-shadow: var(--wd-shadow-card);
    border: 1px solid var(--wd-color-border);
}

html[data-theme="dark"] .contact-form form .form-control {
    background-color: var(--wd-form-bg);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .contact-form form .form-control::placeholder {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] #map {
    background: var(--wd-color-surface-muted);
}

/* ─── Single course page (`/courses/{id}`) — dark mode ────────────────── */

html[data-theme="dark"] .single-course-content {
    background-color: var(--wd-color-bg);
}

html[data-theme="dark"] .single-course-intro .single-course-intro-content {
    background-color: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .single-course-intro .single-course-intro-content h3 {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .single-course-intro .single-course-intro-content .meta a,
html[data-theme="dark"] .single-course-intro .single-course-intro-content .meta span {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .single-course-intro .single-course-intro-content .meta a:hover {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .clever-tabs-content .nav-tabs .nav-item .nav-link {
    border-color: var(--wd-color-border);
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .clever-tabs-content .nav-tabs .nav-item .nav-link.active,
html[data-theme="dark"] .clever-tabs-content .nav-tabs .nav-item .nav-link:hover,
html[data-theme="dark"] .clever-tabs-content .nav-tabs .nav-item .nav-link:focus {
    background-color: rgba(148, 163, 184, 0.14);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .clever-description .about-course,
html[data-theme="dark"] .clever-curriculum .about-curriculum,
html[data-theme="dark"] .clever-curriculum .curriculum-level {
    background-color: var(--wd-card-bg);
    border: 1px solid var(--wd-color-border);
    box-shadow: var(--wd-shadow-card);
}

html[data-theme="dark"] .clever-curriculum .curriculum-level h5,
html[data-theme="dark"] .clever-curriculum .curriculum-level .curriculum-list li {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .clever-curriculum .curriculum-level .curriculum-list li ul li {
    border-bottom-color: var(--wd-color-border);
}

html[data-theme="dark"] .clever-curriculum .accordion .card,
html[data-theme="dark"] .clever-curriculum .accordion .card-header,
html[data-theme="dark"] .clever-curriculum .accordion .card-body {
    background-color: var(--wd-card-bg);
    border-color: var(--wd-color-border);
    color: var(--wd-color-text);
}

html[data-theme="dark"] .clever-curriculum .accordion .btn.btn-link {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .clever-curriculum .accordion .btn.btn-link:hover {
    color: var(--wd-color-primary-hover);
}

html[data-theme="dark"] .sidebar-widget:last-child {
    border-bottom-color: var(--wd-color-border);
}

html[data-theme="dark"] .sidebar-widget .features-list li h6 {
    color: var(--wd-color-text-muted);
}

html[data-theme="dark"] .sidebar-widget .single--courses .content a {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .sidebar-widget .single--courses .content a:hover {
    color: var(--wd-color-primary-hover);
}

/* ─── Auth pages (Tailwind blocks) — dark mode ────────────────────────── */

html[data-theme="dark"] .max-w-screen-xl.bg-white {
    background-color: var(--wd-card-bg) !important;
    color: var(--wd-color-text);
}

html[data-theme="dark"] .max-w-screen-xl .bg-indigo-100 {
    background-color: rgba(55, 98, 240, 0.12) !important;
}

html[data-theme="dark"] .max-w-screen-xl h1 {
    color: var(--wd-color-text);
}

html[data-theme="dark"] .max-w-screen-xl .bg-gray-100 {
    background-color: var(--wd-form-bg) !important;
}

html[data-theme="dark"] .max-w-screen-xl .border-gray-200 {
    border-color: var(--wd-color-border) !important;
}

html[data-theme="dark"] .max-w-screen-xl .placeholder-gray-500::placeholder {
    color: var(--wd-color-text-muted) !important;
}

html[data-theme="dark"] .max-w-screen-xl input,
html[data-theme="dark"] .max-w-screen-xl select,
html[data-theme="dark"] .max-w-screen-xl textarea {
    color: var(--wd-color-text) !important;
}

html[data-theme="dark"] .max-w-screen-xl .text-gray-600 {
    color: var(--wd-color-text-muted) !important;
}

html[data-theme="dark"] .max-w-screen-xl .focus\\:bg-white:focus {
    background-color: var(--wd-form-bg) !important;
}

html[data-theme="dark"] .max-w-screen-xl .focus\\:border-gray-400:focus {
    border-color: var(--wd-color-primary) !important;
}

html[data-theme="dark"] .max-w-screen-xl .focus\\:outline-none:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--wd-color-focus);
}

/* ─── Profile challenges page (`profile-challenges.css`) — dark mode ───── */

html[data-theme="dark"] .challenges-list-page {
    --ch-ink: var(--wd-color-text);
    --ch-ink-muted: var(--wd-color-text-muted);
    --ch-ink-soft: rgba(226, 232, 240, 0.55);
    --ch-border: var(--wd-color-border);
    --ch-border-soft: rgba(148, 163, 184, 0.18);
    --ch-surface: var(--wd-card-bg);
    --ch-canvas: var(--wd-color-bg-soft);
    --ch-accent: var(--wd-color-primary);
    --ch-accent-ring: var(--wd-color-focus);
}

html[data-theme="dark"] .challenges-subsection__header {
    background: var(--ch-surface);
}

html[data-theme="dark"] .challenges-subsection__body {
    background: var(--ch-canvas);
}

html[data-theme="dark"] .challenge-list-card {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .challenge-list-card--done {
    background: linear-gradient(180deg, var(--ch-surface) 0%, rgba(16, 185, 129, 0.08) 100%);
}

html[data-theme="dark"] .challenge-list-card:focus-within {
    box-shadow: 0 0 0 3px var(--ch-accent-ring), 0 18px 34px rgba(0, 0, 0, 0.3);
}

/* Language + difficulty badges use light backgrounds; remap for dark */
html[data-theme="dark"] .challenge-lang-badge,
html[data-theme="dark"] .challenge-diff-badge {
    background: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: var(--wd-color-text) !important;
}

html[data-theme="dark"] .challenge-diff-badge--easy {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(52, 211, 153, 0.55) !important;
    color: #a7f3d0 !important;
}

html[data-theme="dark"] .challenge-diff-badge--medium {
    background: rgba(251, 191, 36, 0.14) !important;
    border-color: rgba(251, 191, 36, 0.55) !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .challenge-diff-badge--hard {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .challenges-empty-state--boxed {
    background: var(--ch-canvas);
}

/* Pagination on challenges uses Bootstrap component (light by default) */
html[data-theme="dark"] .challenges-list-page .pagination {
    margin-bottom: 0;
}

html[data-theme="dark"] .challenges-list-page .pagination .page-link {
    background-color: var(--ch-surface);
    border-color: var(--ch-border);
    color: var(--ch-ink);
}

html[data-theme="dark"] .challenges-list-page .pagination .page-link:hover {
    background-color: rgba(148, 163, 184, 0.12);
    border-color: var(--ch-border);
    color: var(--ch-ink);
}

html[data-theme="dark"] .challenges-list-page .pagination .page-item.active .page-link {
    background-color: var(--ch-accent);
    border-color: var(--ch-accent);
    color: #0b1220;
}

html[data-theme="dark"] .challenges-list-page .pagination .page-item.disabled .page-link {
    background-color: rgba(148, 163, 184, 0.08);
    border-color: var(--ch-border);
    color: var(--ch-ink-muted);
    opacity: 0.8;
}

@media screen and (max-width: 960px) {
    .theme-toggle--top {
        display: none;
    }

    .theme-toggle--nav {
        display: inline-flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}