/* Главная */



body.dark-theme,
body.dark-theme * {
    color: #f3f4f6;
}

body.dark-theme .hero-container {
    background-color: #111827;
}

body.dark-theme .hero .btn {
    background: #3b82f6;
}

body.dark-theme header.container.scrolled,
body.dark-theme footer.container,
body.dark-theme .mobile-menu,
body.dark-theme .block,
body.dark-theme .lang-trigger,
body.dark-theme .lang-menu {
    background-color: #1f2937;
}

body.dark-theme .logos-container {
    background: transparent;
}

body.dark-theme header a:hover,
body.dark-theme .lang-item:hover,
body.dark-theme .lang-item[aria-selected="true"] {
    background-color: #374151;
}

body.dark-theme header a,
body.dark-theme .mobile-menu a,
body.dark-theme .lang-current,
body.dark-theme .lang-chevron,
body.dark-theme .lang-item {
    color: #f3f4f6;
}

body.dark-theme .burger::before,
body.dark-theme .burger::after,
body.dark-theme .burger span {
    background-color: #f3f4f6;
}

body.dark-theme footer hr {
    border-top-color: #374151;
}

body.dark-theme .slider-container::before {
    background: linear-gradient(to right, #111827 0%, rgba(17, 24, 39, 0) 100%);
}

body.dark-theme .slider-container::after {
    background: linear-gradient(to left, #111827 0%, rgba(17, 24, 39, 0) 100%);
}

/* Пользовательское соглашение */

body.dark-theme {
    background: #111827;
}





body.dark-theme .questions-block a {
    color: #93c5fd;
    border-bottom-color: rgba(147, 197, 253, 0.35);
}

body.dark-theme .questions-block a:hover {
    border-bottom-color: #93c5fd;
}

body.dark-theme .questions-block hr {
    border-top-color: #374151;
}

body.dark-theme .questions-block ul li::marker {
    color: #9ca3af;
}

/* Помощь */

body.dark-theme .help-container {
    background-color: #111827;
}

body.dark-theme .help-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .help-text {
    color: #e5e7eb;
}

body.dark-theme .help-hint {
    background-color: #111827;
    border: 1px solid #374151;
}

body.dark-theme .help-hint-title {
    color: #f3f4f6;
}

body.dark-theme .help-list li {
    color: #d1d5db;
}

body.dark-theme .help-telegram-btn {
    background-color: #3b82f6;
    color: #ffffff;
    transition: transform .18s ease, background-color .18s ease;
}

body.dark-theme .help-telegram-btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

body.dark-theme .help-note {
    color: #9ca3af;
}

/* Отзыв */

body.dark-theme .feedback-container {
    background-color: #111827;
}

body.dark-theme .feedback-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .feedback-text {
    color: #e5e7eb;
}

body.dark-theme .feedback-hint {
    background-color: #111827;
    border: 1px solid #374151;
}

body.dark-theme .feedback-hint-title {
    color: #f3f4f6;
}

body.dark-theme .feedback-list li {
    color: #d1d5db;
}

body.dark-theme .feedback-telegram-btn {
    background-color: #3b82f6;
    color: #ffffff;
    transition: transform .18s ease, background-color .18s ease;
}

body.dark-theme .feedback-telegram-btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

body.dark-theme .feedback-note {
    color: #9ca3af;
}

/* Прислать задачу */

body.dark-theme .send-exercise-container {
    background-color: #111827;
}

body.dark-theme .send-exercise-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .send-exercise-text {
    color: #e5e7eb;
}

body.dark-theme .send-exercise-hint {
    background-color: #111827;
    border: 1px solid #374151;
}

body.dark-theme .send-exercise-hint-title {
    color: #f3f4f6;
}

body.dark-theme .send-exercise-list li {
    color: #d1d5db;
}

body.dark-theme .send-exercise-telegram-btn {
    background-color: #3b82f6;
    color: #ffffff;
    transition: transform .18s ease, background-color .18s ease;
}

body.dark-theme .send-exercise-telegram-btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

body.dark-theme .send-exercise-note {
    color: #9ca3af;
}

/* Премиум */

body.dark-theme .premium-container {
    background-color: #111827;
}

body.dark-theme .premium-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .premium-subtitle,
body.dark-theme .benefit-text,
body.dark-theme .faq-a,
body.dark-theme .premium-note,
body.dark-theme .plan-price-note,
body.dark-theme .plan-footnote {
    color: #d1d5db;
}

body.dark-theme .benefit,
body.dark-theme .faq-item {
    background-color: #111827;
    border: 1px solid #374151;
}

body.dark-theme .plan-card {
    background-color: #111827;
    border-color: #374151;
}

body.dark-theme .plan-badge {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .plan-btn {
    background-color: #374151;
    color: #ffffff;
}

body.dark-theme .plan-btn:hover {
    background-color: #4b5563;
    color: #ffffff;
}

body.dark-theme .plan-btn-primary {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme .plan-btn-primary:hover {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme .premium-note a {
    color: #93c5fd;
}

/* Войти */

body.dark-theme .login-content {
    background-color: #111827;
}

body.dark-theme .login-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}





body.dark-theme .login-button {
    background-color: #3b82f6;
    color: #f3f4f6;
}

body.dark-theme .login-button:hover {
    background-color: #3b82f6;
}

body.dark-theme .social-button--circle {
    background-color: #111827;
    border-color: #374151;
}

body.dark-theme .social-button--circle:hover {
    background-color: #3b82f6;
    border-color: transparent;
}

body.dark-theme .login-link {
    color: #60a5fa;
}

body.dark-theme .social-login-label {
    color: #9ca3af;
}

body.dark-theme .login-legal hr {
    border-top-color: #374151;
}

body.dark-theme .login-legal p {
    color: #9ca3af;
}

body.dark-theme .login-legal a {
    color: #d1d5db;
}





/* Регистрация */

body.dark-theme .register-content {
    background-color: #111827;
}

body.dark-theme .register-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}





body.dark-theme .register-button {
    background-color: #3b82f6;
    color: #f3f4f6;
}

body.dark-theme .register-button:hover {
    background-color: #3b82f6;
}





body.dark-theme .register-legal hr {
    border-top-color: #374151;
}

body.dark-theme .register-legal p {
    color: #9ca3af;
}

body.dark-theme .register-legal a {
    color: #d1d5db;
}

/* Восстановление пароля */

body.dark-theme .forgot-content {
    background-color: #111827;
}

body.dark-theme .forgot-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}





body.dark-theme .forgot-button {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .forgot-button:hover {
    background-color: #418c3a;
}

body.dark-theme .login-text {
    color: #d1d5db;
}

body.dark-theme .login-text a {
    color: #3b82f6;
}



body.dark-theme .error,
body.dark-theme .error span {
    color: #fca5a5;
}

/* Курс */

body.dark-theme .course-content {
    background-color: #111827;
}

body.dark-theme .course-section {
    --node-cover-bg: #202b3b;
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}



body.dark-theme .to-scroll-btn {
    background-color: #374151;
    color: #f3f4f6;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

body.dark-theme .track-progress {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    border: 1px solid #374151;
}

body.dark-theme .track-progress__bar {
    background-color: #111827;
}

body.dark-theme .track-progress__btn {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .course-card {
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* чуть приглушаем цветные карточки, чтобы не били по глазам */
body.dark-theme .course-card--java {
    background-color: #1e3a5f;
}

body.dark-theme .course-card--spring {
    background-color: #234b35;
}

body.dark-theme .course-card--sql {
    background-color: #5a4a1f;
}

body.dark-theme .course-card--algorithms {
    background-color: #5a2a2a;
}

body.dark-theme .course-road path {
    opacity: 0.7;
}

/* Страница курса */

body.dark-theme .course-page-content {
    background-color: #111827;
}

body.dark-theme .course-page-block {
    background-color: #1f2937;
}

body.dark-theme .course-page-text p {
    color: #e5e7eb;
}

body.dark-theme .course-page-text pre {
    background-color: #111827;
    border: 1px solid #374151;
    color: #e5e7eb;
}



body.dark-theme .progress-toggle:hover,
body.dark-theme .nav-btn:hover {
    background-color: #374151;
    border-color: #374151;
}

body.dark-theme .progress-toggle__text,
body.dark-theme .nav-btn__text,
body.dark-theme .nav-btn__icon {
    color: #f3f4f6;
}

body.dark-theme .progress-toggle__dot {
    background-color: #475569;
}





/* Практика */

body.dark-theme .practice-content {
    background-color: #111827;
}

body.dark-theme .practice-description {
    color: #707884;
}

body.dark-theme .group-block,
body.dark-theme .section {
    background-color: #1f2937;
}

body.dark-theme .section--compact {
    box-shadow: none;
}

body.dark-theme .scroll-btn {
    background-color: #1f2937;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

body.dark-theme .premium-badge {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .topic-link,
body.dark-theme .card h2,
body.dark-theme .card h3 {
    color: #f3f4f6;
}

body.dark-theme .topic-progress {
    --track: #374151;
}

body.dark-theme .topic-progress::after {
    background: #1f2937;
}

/* Заголовки секций */
body.dark-theme .card--java {
    background-color: #1e3a5f;
}

body.dark-theme .card--spring {
    background-color: #234b35;
}

body.dark-theme .card--sql {
    background-color: #5a4a1f;
}

body.dark-theme .card--algorithms {
    background-color: #5a2a2a;
}

body.dark-theme .card--system-design {
    background-color: #312e81;
}

/* Hover маленьких карточек */
body.dark-theme .card--java--small:hover {
    background-color: #1e3a5f;
}

body.dark-theme .card--spring--small:hover {
    background-color: #234b35;
}

body.dark-theme .card--sql--small:hover {
    background-color: #5a4a1f;
}

body.dark-theme .card--algorithms--small:hover {
    background-color: #5a2a2a;
}

body.dark-theme .card--system-design--small:hover {
    background-color: #312e81;
}

/* Задание */

body.dark-theme .exercise-content {
    background-color: #111827;
}

body.dark-theme .exercise-block,
body.dark-theme .solution-block{
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .exercise-text p,
body.dark-theme .exercise-answer,
body.dark-theme .solution-content,
body.dark-theme #points {
    color: #e5e7eb;
}

body.dark-theme .option {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .option:has(input[type="radio"]:checked) {
    background-color: #1e3a5f;
    border-color: #3b82f6;
}

body.dark-theme .option.correct,
body.dark-theme .answers.is-result .option.correct {
    background-color: #064e3b;
    border-color: #418c3a;
}

body.dark-theme .option.wrong,
body.dark-theme .answers.is-result .option.wrong {
    background-color: #7f1d1d;
    border-color: #dc2626;
}

body.dark-theme .answers.is-result .option:has(input[type="radio"]:checked):not(.correct):not(.wrong) {
    background-color: #111827;
    border-color: #374151;
}

body.dark-theme #checkButton,
body.dark-theme #checkButton:disabled,
body.dark-theme #checkButton.is-checking,
body.dark-theme #checkButton.is-checking:disabled {
    background-color: #3b82f6;
    border: none;
    color: #ffffff;
    opacity: 1;
}

body.dark-theme #checkButton:not(:disabled):hover,
body.dark-theme #checkButton.is-checking:hover,
body.dark-theme #checkButton.is-checking:disabled:hover {
    background-color: #2563eb;
}



body.dark-theme .ranked-overlay {
    background-color: #1f2937;
}

body.dark-theme .ranked-overlay__text {
    color: #9ca3af;
}

body.dark-theme .meta-label,
body.dark-theme #progress {
    color: #9ca3af;
}

body.dark-theme .solution-cta {
    background: rgba(17, 24, 39, 0.72);
}

body.dark-theme .solution-cta__text {
    color: #f3f4f6;
}

body.dark-theme .meta-progress-bar {
    background-color: #1f2937;
}



body.dark-theme .btn-primary {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme .season-board {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}


body.dark-theme .season-subtitle,
body.dark-theme .season-empty,
body.dark-theme .season-hint {
    color: #9ca3af;
}



body.dark-theme .season-show-all,
body.dark-theme .name a {
    color: #93c5fd;
}

body.dark-theme .season-show-all:hover {
    color: #bfdbfe;
}


/* Рейтинг по наградам */





body.dark-theme .ach-subtitle,
body.dark-theme .season-empty{
    color: #9ca3af;
}




body.dark-theme .questions-page-size__pill {
    background-color: #111827;
    color: #f3f4f6;
}

body.dark-theme .questions-page-size__pill .label,
body.dark-theme .questions-page-size__pill .chev {
    color: #f3f4f6;
}

body.dark-theme .questions-page-size__pill .value {
    color: #f3f4f6;
}

body.dark-theme .questions-page-size__pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.22);
}

body.dark-theme .questions-page-size__dropdown {
    background-color: #111827;
    border: 1px solid #374151;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.dark-theme .questions-page-size__item {
    background-color: transparent;
    color: #f3f4f6;
}

body.dark-theme .questions-page-size__item:hover,
body.dark-theme .questions-page-size__item:focus-visible {
    background-color: #374151;
}

body.dark-theme .questions-page-size__item.active {
    background-color: #1e3a5f;
    color: #93c5fd;
}



















/* Ежемесячный рейтинг */

body.dark-theme .season-rating-container {
    background-color: #111827;
}

body.dark-theme .season-rating-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .season-me-summary {
    background-color: #111827;
    border-color: #374151;
}

body.dark-theme .season-me-summary__label {
    color: #9ca3af;
}

body.dark-theme .ach-subtitle,
body.dark-theme .season-rating-subtitle,
body.dark-theme .season-loading,
body.dark-theme .season-empty {
    color: #9ca3af;
}

body.dark-theme .season-table-row:hover {
    background-color: #374151;
}

body.dark-theme .season-table-row.me {
    background-color: #1e3a5f;
}

body.dark-theme .page-btn,
body.dark-theme .page-info {
    background-color: #111827;
    color: #f3f4f6;
}



body.dark-theme .rating-user-link{
    color: #93c5fd;
}



/* Вопросы */

body.dark-theme .questions-container {
    background-color: #111827;
}

body.dark-theme .questions-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme #question-search-input,
body.dark-theme #filter-toggle,
body.dark-theme #all-reset-toggle,
body.dark-theme .icon-btn {
    background-color: #111827;
    color: #f3f4f6;
}

body.dark-theme #question-search-input::placeholder {
    color: #d1d5db;
}





body.dark-theme #themes-reset-toggle,
body.dark-theme #companies-reset-toggle {
    background-color: #374151;
}

body.dark-theme .filters-dropdown {
    background-color: #111827;
    border: 1px solid #374151;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

body.dark-theme .solve-btn {
    background-color: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}

body.dark-theme .solve-btn.active {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme .filter-icon .line {
    stroke: #d1d5db;
}

body.dark-theme .filter-icon .knob-ring {
    fill: #d1d5db;
}

body.dark-theme .filter-icon .knob-hole {
    fill: #111827;
}

body.dark-theme .scroll-btn {
    background-color: #374151;
    color: #f3f4f6;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

body.dark-theme #all-reset-toggle .reset-icon {
    color: #d1d5db;
}

body.dark-theme #all-reset-toggle .reset-icon path {
    stroke: #d1d5db;
}

body.dark-theme .questions-banner {
    background-color: #1f2937;
    opacity: 0.75;
}



body.dark-theme .season-loading {
    color: #9ca3af;
}

body.dark-theme .chip {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .chip.active,
body.dark-theme .company-chip.active,
body.dark-theme .theme-chip.active {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme .chip.active *,
body.dark-theme .company-chip.active *,
body.dark-theme .theme-chip.active * {
    background-color: transparent;
    color: #ffffff;
}

body.dark-theme .questions-header {
    color: #f3f4f6;
}

body.dark-theme .question-row {
    color: #e5e7eb;
}

body.dark-theme .questions-header,
body.dark-theme .question-row,
body.dark-theme .season-table-header,
body.dark-theme .season-table-row,
body.dark-theme .stats-head-row,
body.dark-theme .stats-theme {
    border-color: #374151;
}

body.dark-theme .page-btn,
body.dark-theme .page-info {
    background-color: #111827;
    color: #f3f4f6;
}

body.dark-theme .page-info span {
    color: #f3f4f6;
}

body.dark-theme .season-empty {
    color: #9ca3af;
}

/* Вопрос */

body.dark-theme .question-content {
    background-color: #111827;
}

body.dark-theme .question-block {
    background-color: #1f2937;
}

body.dark-theme .question-text p,
body.dark-theme .answer-text p,
body.dark-theme .answer-text ul li {
    color: #e5e7eb;
}

body.dark-theme .question-text pre,
body.dark-theme .answer-text pre {
    background-color: #111827;
    border-color: #374151;
}

body.dark-theme .question-block .question-text pre,
body.dark-theme .question-block .answer-text pre {
    scrollbar-color: #4b5563 transparent;
}

body.dark-theme .question-block .question-text pre::-webkit-scrollbar-track,
body.dark-theme .question-block .answer-text pre::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-theme .question-block .question-text pre::-webkit-scrollbar-thumb,
body.dark-theme .question-block .answer-text pre::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

body.dark-theme .question-block .question-text pre::-webkit-scrollbar-thumb:hover,
body.dark-theme .question-block .answer-text pre::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

body.dark-theme .question-content .question-block .meta-tag {
    background-color: #111827;
    color: #ffffff;
}

body.dark-theme .chip--company span {
    color: #ffffff;
}

body.dark-theme .progress-toggle,
body.dark-theme .nav-btn {
    background-color: #111827;
    border-color: #374151;
}

body.dark-theme .progress-toggle:hover,
body.dark-theme .nav-btn:hover {
    border-color: #93c5fd;
}

body.dark-theme .progress-toggle__text,
body.dark-theme .nav-btn__text {
    color: #f3f4f6;
}





body.dark-theme .complete-hint {
    color: #9ca3af;
}

body.dark-theme .nav-btn svg path {
    stroke: #f3f4f6;
}

body.dark-theme .question-text :not(pre) > code,
body.dark-theme .answer-text :not(pre) > code {
    background-color: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

/* Профиль */

body.dark-theme .profile-content-wrapper {
    background-color: #111827;
}

body.dark-theme .profile-content,
body.dark-theme .profile-statistic,
body.dark-theme .profile-card,
body.dark-theme .stats-track,
body.dark-theme .stats-tabs-nav {
    background-color: #1f2937;
}

body.dark-theme .profile-content,
body.dark-theme .profile-statistic,
body.dark-theme .profile-achievements-section {
    border-color: #374151;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
}

body.dark-theme .profile-key,
body.dark-theme .profile-val--empty,
body.dark-theme .stats-empty,
body.dark-theme .theme-metrics.nodata,
body.dark-theme .theory-title,
body.dark-theme .season-score-title,
body.dark-theme .theory-ring__label,
body.dark-theme .practice-ring__label,
body.dark-theme .season-score-ring__label {
    color: #9ca3af;
}

body.dark-theme .profile-val,
body.dark-theme .theme-name,
body.dark-theme .theme-metrics .val,
body.dark-theme .theory-ring__fraction,
body.dark-theme .practice-ring__fraction,
body.dark-theme .season-score-ring__fraction {
    color: #e5e7eb;
}





body.dark-theme .badge-off {
    background-color: #111827;
    color: #9ca3af;
}

body.dark-theme .badge-on {
    background-color: rgba(65, 140, 58, 0.2);
    color: #86efac;
}

body.dark-theme .stats-tabs-divider {
    background-color: #374151;
}

body.dark-theme .stats-tab {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .stats-tab:hover {
    background-color: #374151;
}

body.dark-theme .stats-tab.is-active {
    background-color: #111827;
    border-color: #3b82f6;
    color: #3b82f6 !important;
}

/* Dark rank palette shared by mode selection, season rating and profile. */
body.dark-theme .rank-junior { color:#a7d88f; background:#29402a; }
body.dark-theme .rank-middle { color:#ead66f; background:#4b431f; }
body.dark-theme .rank-senior { color:#efb16b; background:#4c3522; }
body.dark-theme .rank-lead { color:#ef9589; background:#512e2c; }
body.dark-theme .rank-architect { color:#ef8d8d; background:#52282b; }

/* General profile rings: same dark treatment as track rings. */
body.dark-theme .general-ring {
    background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), #374151 0);
}
body.dark-theme .general-ring::before { background:#1f2937; }
body.dark-theme .general-ring strong { color:#e5e7eb; }
body.dark-theme .general-ring span { color:#9ca3af; }
body.dark-theme .general-ring--score { --ring-color:#f1b933; }

body.dark-theme .theory-ring,
body.dark-theme .season-score-ring {
    --track-color: #374151;
}

body.dark-theme .practice-ring__bg {
    stroke: #374151;
}

body.dark-theme .practice-ring__progress {
    stroke: #7cb261;
}



body.dark-theme .info-icon,
body.dark-theme .delete-link {
    color: #9ca3af;
}

body.dark-theme .tooltip-wrapper::after {
    background-color: #111827;
    color: #f3f4f6;
    border: 1px solid #374151;
}

/* Настройки профиля */

body.dark-theme .profile-settings-content {
    background-color: #111827;
}

body.dark-theme .profile-settings-block,
body.dark-theme .profile-settings-card {
    background-color: #1f2937;
}

body.dark-theme .profile-settings-key,
body.dark-theme .profile-settings-hint {
    color: #9ca3af;
}

body.dark-theme .profile-settings-hint.is-invalid {
    color: #f87171;
}

body.dark-theme .profile-settings-input,
body.dark-theme .profile-settings-textarea {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .profile-settings-input::placeholder,
body.dark-theme .profile-settings-textarea::placeholder {
    color: #9ca3af;
}

body.dark-theme .btn-secondary {
    background-color: #111827;
    color: #f3f4f6;
    border-color: #374151;
}

body.dark-theme .btn-secondary:hover {
    background-color: #374151;
}

body.dark-theme .btn-secondary:disabled {
    background-color: #111827;
    color: #9ca3af;
    border-color: #374151;
}

/* Profile settings button hierarchy in dark theme.
   Keep disabled Save neutral, enabled Save primary, and password management secondary. */
body.dark-theme #saveProfileBtn:disabled:not(.is-success-feedback):not(.is-error-feedback) {
    background-color: #273142;
    border-color: #374151;
    color: #9ca3af;
    opacity: 1;
}

body.dark-theme #saveProfileBtn:not(:disabled):not(.is-success-feedback):not(.is-error-feedback) {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme #saveProfileBtn:not(:disabled):not(.is-success-feedback):not(.is-error-feedback):hover {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

body.dark-theme .profile-settings-actions .btn-secondary {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .profile-settings-actions .btn-secondary:hover {
    background-color: #273142;
    border-color: #4b5563;
}







body.dark-theme .delete-link {
    color: #f87171;
}

body.dark-theme .delete-link:hover {
    color: #fca5a5;
}

/* Изменение пароля */

body.dark-theme .change-password-content {
    background-color: #111827;
}

body.dark-theme .change-password-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .change-password-block h1 {
    color: #f3f4f6;
}

body.dark-theme .change-password-input-group input {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .change-password-input-group input::placeholder {
    color: #9ca3af;
}

body.dark-theme .change-password-button {
    background-color: #374151;
    color: #f3f4f6;
}



body.dark-theme .confirm-content {
    background-color: #111827;
}

body.dark-theme .confirm-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .confirm-block p {
    color: #f3f4f6;
}

/* Смена пароля */

body.dark-theme .reset-content {
    background-color: #111827;
}

body.dark-theme .reset-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .reset-block h1 {
    color: #f3f4f6;
}

body.dark-theme .input-group input {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .input-group input::placeholder {
    color: #9ca3af;
}

body.dark-theme .reset-button {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .reset-button:hover {
    background-color: #418c3a;
}

body.dark-theme .error {
    color: #fca5a5;
}

body.dark-theme .success {
    color: #86efac;
}

/* Задать пароль */

body.dark-theme .set-password-content {
    background-color: #111827;
}

body.dark-theme .set-password-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .set-password-block h1 {
    color: #f3f4f6;
}

body.dark-theme .set-password-input-group input {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .set-password-input-group input::placeholder {
    color: #9ca3af;
}

body.dark-theme .set-password-button {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .set-password-button:hover {
    background-color: #418c3a;
}



/* Политика конфиденциальности */

body.dark-theme .privacy-policy-container {
    background-color: #111827;
}

body.dark-theme .privacy-policy-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .privacy-policy-block p,
body.dark-theme .privacy-policy-block li {
    color: #e5e7eb;
}

body.dark-theme .privacy-policy-block a {
    color: #93c5fd;
    border-bottom-color: rgba(147, 197, 253, 0.35);
}

body.dark-theme .privacy-policy-block a:hover {
    border-bottom-color: #93c5fd;
}

body.dark-theme .privacy-policy-block ul li::marker {
    color: #9ca3af;
}

/* Пользовательское соглашение */

body.dark-theme .user-agreement-container {
    background-color: #111827;
}

body.dark-theme .user-agreement-block {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .user-agreement-block p,
body.dark-theme .user-agreement-block li {
    color: #e5e7eb;
}

body.dark-theme .user-agreement-block h2 {
    color: #f3f4f6;
}

body.dark-theme .user-agreement-block a {
    color: #93c5fd;
    border-bottom-color: rgba(147, 197, 253, 0.35);
}

body.dark-theme .user-agreement-block a:hover {
    border-bottom-color: #93c5fd;
}

body.dark-theme .user-agreement-block ul li::marker {
    color: #9ca3af;
}

body.dark-theme .user-agreement-block hr {
    border-top-color: #374151;
}

body.dark-theme {
    --header-bg: #111827;
}

body.dark-theme .question-block .question-text ul li {
    color: #e5e7eb;
}

body.dark-theme .question-block .question-text ol,
body.dark-theme .question-block .answer-text ol {
    color: #e5e7eb;
}

body.dark-theme .question-block .question-text ol li,
body.dark-theme .question-block .answer-text ol li {
    color: #e5e7eb;
}

body.dark-theme .question-block .question-text ol li::before,
body.dark-theme .question-block .answer-text ol li::before {
    background: #3b82f6;
    color: #ffffff;
}

body.dark-theme .companies-chips,
body.dark-theme .themes-chips {
    scrollbar-color: #4b5563 transparent;
}

body.dark-theme .companies-chips::-webkit-scrollbar-track,
body.dark-theme .themes-chips::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-theme .companies-chips::-webkit-scrollbar-thumb,
body.dark-theme .themes-chips::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

body.dark-theme .companies-chips::-webkit-scrollbar-thumb:hover,
body.dark-theme .themes-chips::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

@media (max-width: 630px) {
    .companies-chips {
        max-height: 12rem;
    }

    .themes-chips {
        max-height: 12rem;
    }
}

body.dark-theme .page-info--jumpable:hover {
    background-color: none;
    box-shadow: none;
}

body.dark-theme .page-jump-input {
    background-color: #1f2937;
    color: #f3f4f6;
}

body.dark-theme .page-jump-input:focus {
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.25);
}

body.dark-theme #companies-search-input,
body.dark-theme #themes-search-input {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme #companies-search-input::placeholder,
body.dark-theme #themes-search-input::placeholder {
    color: #d1d5db;
}

body.dark-theme .filter-search-icon circle,
body.dark-theme .filter-search-icon path {
    stroke: #d1d5db;
}

body.dark-theme .question-search-icon circle,
body.dark-theme .question-search-icon path {
    stroke: #d1d5db;
}

body.dark-theme #companies-reset-toggle,
body.dark-theme #themes-reset-toggle {
    background-color: #374151;
}

body.dark-theme #companies-reset-toggle .reset-icon path,
body.dark-theme #themes-reset-toggle .reset-icon path {
    stroke: #d1d5db;
}

body.dark-theme .footer-social a {
    --social-bg: #ffffff;
    --social-icon: #111827;
}

/* Модальное окно удаления профиля */

body.dark-theme .pm-overlay {
    background: rgba(0, 0, 0, 0.72);
}

body.dark-theme .pm-card {
    background: #1f2937;
    border: 1px solid #374151;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

body.dark-theme .pm-title {
    color: #f3f4f6;
}

body.dark-theme .pm-text {
    color: #d1d5db;
}

body.dark-theme .pm-btn-secondary {
    background: #111827;
    color: #f3f4f6;
    border: 1px solid #374151;
}

body.dark-theme .pm-btn-secondary:hover {
    background: #374151;
}

body.dark-theme .pm-btn-danger {
    background: #dc2626;
    color: #ffffff;
}

body.dark-theme .pm-btn-danger:hover {
    background: #b91c1c;
    filter: none;
}

/* Базовая модалка практики */

body.dark-theme .tlm-overlay {
    background: rgba(0, 0, 0, 0.72);
}

body.dark-theme .tlm-card {
    background: #1f2937;
    border: 1px solid #374151;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

body.dark-theme .tlm-title {
    color: #f3f4f6;
}

body.dark-theme .tlm-text {
    color: #d1d5db;
}

body.dark-theme .tlm-btn-secondary {
    background: #111827;
    color: #f3f4f6;
    border: 1px solid #374151;
}

body.dark-theme .tlm-btn-secondary:hover {
    background: #374151;
}

body.dark-theme .tlm-btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

body.dark-theme .tlm-btn-primary:hover {
    background: #2563eb;
}





html {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: #9298a1;
}

html:has(body.dark-theme) {
    scrollbar-color: #4b5563 #111827;
}

html:has(body.dark-theme)::-webkit-scrollbar-track {
    background: #111827;
}

html:has(body.dark-theme)::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

html:has(body.dark-theme)::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

body.dark-theme .course-toggle__icon {
    background-color: #ffffff;
}







body.dark-theme a.question-link,
body.dark-theme a.question-link {
    color: #3b82f6;
    text-decoration: none;

    transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

body.dark-theme a.question-link:hover,
body.dark-theme a.question-link:hover {
    color: #1d4ed8;
}











body.dark-theme .course-card--system-design {
    background-color: #312e81;
}

body.dark-theme .premium-badge {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

body.dark-theme .course-note {
    background: #1e3a5f;
    border-left-color: #3b82f6;
    color: #e5e7eb;
}

body.dark-theme .course-note strong {
    color: #f3f4f6;
}

/* =========================================================
   COURSE PAGE SIDE NAVIGATION — DARK THEME SYNC
   ========================================================= */

body.dark-theme .course-page-navigation__title,
body.dark-theme .course-course-navigation__title {
    color: #cbd5e1;
}

body.dark-theme .course-page-navigation__link,
body.dark-theme .course-course-navigation__link,
body.dark-theme .course-course-navigation__name {
    color: #94a3b8;
}

body.dark-theme .course-page-navigation__link:hover,
body.dark-theme .course-course-navigation__link:hover,
body.dark-theme .course-course-navigation__link:hover
.course-course-navigation__name {
    color: #f8fafc;
}

body.dark-theme .course-page-navigation__link.is-active {
    color: #7db4f6;
    font-weight: 600;
}

body.dark-theme .course-course-navigation__link.is-current,
body.dark-theme .course-course-navigation__link.is-current
.course-course-navigation__name {
    color: #7db4f6;
    font-weight: 600;
}
/* Практика внутри страницы курса */
body.dark-theme .course-practice {
    border-top-color: #374151;
}



body.dark-theme .course-practice .exercise-block,
body.dark-theme .course-practice__solution{
    background-color: #111827;
    border-color: #374151;
    box-shadow: none;
}







body.dark-theme .course-practice__error {
    color: #fca5a5;
}

body.dark-theme .course-practice__progress{
    color: #9ca3af;
}

body.dark-theme .course-practice__solution {
    background-color: #111827;
    border-color: #374151;
}

body.dark-theme .course-practice .exercise-block {
    background-color: #1f2937;
    border-color: #374151;
}




/* Profile avatar */
body.dark-theme .profile-avatar-error,
body.dark-theme .profile-settings-avatar-error {
    color: #fca5a5;
}

body.dark-theme .practice-navigator__button {
    border: 0;
    background: transparent;
    color: #94a3b8;
}

body.dark-theme .practice-navigator__button:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.10);
    color: #f8fafc;
}

body.dark-theme
.practice-exercise-selector__toggle:hover,
body.dark-theme
.practice-exercise-selector__toggle[aria-expanded="true"] {
    background: rgba(148, 163, 184, 0.10);
}


/* =========================================================
   PROFILE — GENERAL SEASON OVERVIEW
   ========================================================= */

body.dark-theme .general-panel,
body.dark-theme .general-season-layout,
body.dark-theme .season-chart-card,
body.dark-theme .season-achievements {
    background: transparent;
}

body.dark-theme .season-chart-title,
body.dark-theme .general-progress-item{
    color: #e5e7eb;
}

body.dark-theme .season-history-score{
    color: #94a3b8;
}

body.dark-theme .season-history-name,
body.dark-theme .season-history-rank {
    color: #cbd5e1;
}

body.dark-theme .season-achievements-divider {
    background: #374151;
}

body.dark-theme .season-nav-btn {
    border: 0;
    background: transparent;
    color: #94a3b8;
}

body.dark-theme .season-nav-btn:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.10);
    color: #f8fafc;
}

body.dark-theme .season-nav-btn:disabled {
    opacity: 0.35;
    color: #64748b;
}

body.dark-theme .season-nav-icon path {
    stroke: currentColor;
}

body.dark-theme #seasonScoreChart {
    background: transparent;
}


/* =========================================================
   FINAL pagination/control skin
   Course-style line icons, transparent until hover
   Kept in theme.css intentionally: this stylesheet is loaded last.
   ========================================================= */

/* Common controls: no permanent tile/fill. */
body .page-btn,
body .page-info,
body .questions-page-size__pill {
    background: transparent !important;
    box-shadow: none !important;
}

body .page-btn {
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #9ca3af;
    font-size: 0 !important; /* hide original text arrows */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}

body .page-btn:hover:not(:disabled),
body .page-btn:focus-visible:not(:disabled),
body .page-info:hover,
body .page-info:focus-within {
    background: #f3f4f6 !important;
}

body .page-btn:hover:not(:disabled),
body .page-btn:focus-visible:not(:disabled) {
    color: #4b5563;
}

body .page-btn:focus-visible,
body .questions-page-size__pill:focus-visible {
    outline: none;
}

body .page-btn:disabled {
    opacity: .42;
    cursor: default;
    background: transparent !important;
}

/*
   Draw arrows as masks from SVG paths instead of rotated borders.
   This matches the rounded line-chevron used on the course page and
   avoids the "corner" artifacts from CSS border rotation.
*/
body .page-btn::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body .page-btn::after {
    content: none !important;
}

/* Previous */
body .page-btn.prev::before,
body .page-btn.previous::before,
body .page-btn.page-prev::before,
body .page-btn.page-btn--prev::before,
body .page-btn[aria-label*="Назад" i]::before,
body .page-btn[aria-label*="Предыдущ" i]::before,
body .page-btn[aria-label*="Previous" i]::before,
body .page-btn[aria-label*="Prev" i]::before {
    transform: rotate(180deg);
}

/* First = double left */
body .page-btn.first::before,
body .page-btn.page-first::before,
body .page-btn.page-btn--first::before,
body .page-btn[aria-label*="Перв" i]::before,
body .page-btn[aria-label*="First" i]::before {
    width: 20px;
    height: 18px;
    transform: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M11 6l-6 6 6 6M20 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M11 6l-6 6 6 6M20 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Last = double right */
body .page-btn.last::before,
body .page-btn.page-last::before,
body .page-btn.page-btn--last::before,
body .page-btn[aria-label*="Послед" i]::before,
body .page-btn[aria-label*="Last" i]::before {
    width: 20px;
    height: 18px;
    transform: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M6 6l6 6-6 6M15 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M6 6l6 6-6 6M15 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* If the markup contains an SVG, the generated course-style mask is the icon. */
body .page-btn > svg,
body .page-btn > .icon {
    display: none !important;
}

body .page-info {
    min-height: 2.2rem;
    padding: 6px 14px;
    border-radius: 12px;
    transition: background-color .18s ease;
}

body .questions-page-size__pill {
    border-radius: 12px;
    transition: background-color .18s ease;
}

/* Dark theme: same behavior, darker hover only. */
body.dark-theme .page-btn,
body.dark-theme .page-info,
body.dark-theme .questions-page-size__pill {
    background: transparent !important;
    color: #9ca3af;
}

body.dark-theme .page-info,
body.dark-theme .page-info span,
body.dark-theme .questions-page-size__pill .label,
body.dark-theme .questions-page-size__pill .value,
body.dark-theme .questions-page-size__pill .chev {
    color: #d1d5db;
}

body.dark-theme .page-btn:hover:not(:disabled),
body.dark-theme .page-btn:focus-visible:not(:disabled),
body.dark-theme .page-info:hover,
body.dark-theme .page-info:focus-within {
    background: #374151 !important;
}

body.dark-theme .page-btn:hover:not(:disabled),
body.dark-theme .page-btn:focus-visible:not(:disabled) {
    color: #e5e7eb;
}


/* =========================================================
   V3 — pagination direction is determined by button ORDER.
   DOM order: first / previous / [page info] / next / last.
   This intentionally does NOT depend on JS classes or aria-label text.
   ========================================================= */

/* 1) FIRST: << */
body .page-btn:first-of-type::before {
    width: 22px !important;
    height: 18px !important;
    transform: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 6L6 12l6 6M21 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 6L6 12l6 6M21 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 2) PREVIOUS: < */
body .page-btn:nth-of-type(2)::before {
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 3) NEXT: > */
body .page-btn:nth-last-of-type(2)::before {
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 4) LAST: >> */
body .page-btn:last-of-type::before {
    width: 22px !important;
    height: 18px !important;
    transform: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M7 6l6 6-6 6M16 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M7 6l6 6-6 6M16 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* all pagination controls: transparent until interaction */
body .page-btn,
body .page-info,
body .questions-page-size__pill {
    background-color: transparent !important;
    box-shadow: none !important;
}
body .page-btn:hover:not(:disabled),
body .page-btn:focus-visible:not(:disabled),
body .page-info:hover,
body .page-info:focus-within,
body .questions-page-size__pill:hover,
body .questions-page-size__pill:focus-visible {
    background-color: #f3f4f6 !important;
}
body.dark-theme .page-btn:hover:not(:disabled),
body.dark-theme .page-btn:focus-visible:not(:disabled),
body.dark-theme .page-info:hover,
body.dark-theme .page-info:focus-within,
body.dark-theme .questions-page-size__pill:hover,
body.dark-theme .questions-page-size__pill:focus-visible {
    background-color: #374151 !important;
}


/* =========================================================
   FINAL: page-size selector ("По 10")
   2px outline, absolutely no hover/focus fill.
   ========================================================= */

body .questions-page-size__pill,
body .questions-page-size__pill:hover,
body .questions-page-size__pill:focus,
body .questions-page-size__pill:focus-visible,
body .questions-page-size.is-open .questions-page-size__pill {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #eef0f2 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark-theme .questions-page-size__pill,
body.dark-theme .questions-page-size__pill:hover,
body.dark-theme .questions-page-size__pill:focus,
body.dark-theme .questions-page-size__pill:focus-visible,
body.dark-theme .questions-page-size.is-open .questions-page-size__pill {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #374151 !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark-theme .lang-item[aria-selected="true"] {
    background: #1e3a5f;
    color: #93c5fd;
}

body.dark-theme .lang-item[aria-selected="true"]:hover {
    background: #1e3a5f;
    color: #93c5fd;
}
/* =========================================================
   SIDE COLUMNS — MUTED DARK THEME
   ========================================================= */

/* Exercise: заголовки и второстепенный текст. */
body.dark-theme .exercise-navigation__title,
body.dark-theme .exercise-info__title {
    color: #94a3b8;
}

body.dark-theme .exercise-hierarchy__subtopic,
body.dark-theme .exercise-hierarchy__subtopic-name,
body.dark-theme .exercise-hierarchy__exercise,
body.dark-theme .exercise-hierarchy__name,
body.dark-theme .exercise-info .meta-label,
body.dark-theme .exercise-info .exercise-navigation__metric-head,
body.dark-theme .exercise-info .exercise-navigation__metric-head > span:first-child {
    color: #64748b;
}

body.dark-theme .exercise-hierarchy__chevron {
    color: #64748b;
}

/* Practice hierarchy chevrons use an SVG path with currentColor.
   Pin the path stroke too so it cannot drift from the topic text. */
body.dark-theme.practice-task-page .exercise-hierarchy__chevron path {
    stroke: #64748b !important;
}

/* Left-side practice metrics must use the same final muted color as
   the topic names below them. theme.css is loaded after exercise.css. */
body.dark-theme.practice-task-page .exercise-navigation__metric-head,
body.dark-theme.practice-task-page .exercise-navigation__metric-head > span,
body.dark-theme.practice-task-page #progress,
body.dark-theme.practice-task-page #seasonScore {
    color: #64748b;
}

body.dark-theme .exercise-info #progress,
body.dark-theme .exercise-info #seasonScore {
    color: #64748b;
}

body.dark-theme .exercise-hierarchy__subtopic:hover,
body.dark-theme .exercise-hierarchy__subtopic:hover .exercise-hierarchy__subtopic-name,
body.dark-theme .exercise-hierarchy__subtopic:hover .exercise-hierarchy__chevron,
body.dark-theme .exercise-hierarchy__exercise:hover,
body.dark-theme .exercise-hierarchy__exercise:hover .exercise-hierarchy__name {
    color: #e2e8f0;
}

body.dark-theme.practice-task-page
.exercise-hierarchy__subtopic:hover
.exercise-hierarchy__chevron path {
    stroke: #e2e8f0 !important;
}

body.dark-theme .exercise-hierarchy__exercise.is-current,
body.dark-theme .exercise-hierarchy__exercise.is-current .exercise-hierarchy__name {
    color: #3b82f6;
    font-weight: 600;
}

/* Course page: обе боковые колонки используют ту же иерархию. */
body.dark-theme .course-page-navigation__title,
body.dark-theme .course-course-navigation__title {
    color: #94a3b8;
}

body.dark-theme .course-page-navigation__link,
body.dark-theme .course-course-navigation__link,
body.dark-theme .course-course-navigation__name,
body.dark-theme .course-course-navigation__toggle {
    color: #64748b;
}

body.dark-theme .course-page-navigation__link:hover,
body.dark-theme .course-course-navigation__link:hover,
body.dark-theme .course-course-navigation__link:hover .course-course-navigation__name,
body.dark-theme .course-course-navigation__toggle:hover {
    color: #e2e8f0;
    background: transparent;
}

body.dark-theme .course-page-navigation__link.is-active,
body.dark-theme .course-course-navigation__link.is-current,
body.dark-theme .course-course-navigation__link.is-current .course-course-navigation__name {
    color: #3b82f6;
    font-weight: 600;
}

body.dark-theme .exercise-navigation__theme-name,
body.dark-theme .exercise-navigation__title,
body.dark-theme .exercise-info__title {
    color: #94a3b8;
}
/* Shared auth form validation */
body.dark-theme .auth-field-label,
body.dark-theme .auth-hint {
    color: #9ca3af;
}

body.dark-theme .auth-hint.is-invalid {
    color: #f87171;
}

body.dark-theme .auth-field .auth-input {
    background-color: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .auth-field .auth-input::placeholder {
    color: #9ca3af;
}

/* Dark auth primary actions: enabled is clearly green, disabled stays neutral. */
body.dark-theme .auth-submit-button:not(:disabled):not(.is-success-feedback):not(.is-error-feedback) {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    opacity: 1;
}

body.dark-theme .auth-submit-button:disabled:not(.is-success-feedback):not(.is-error-feedback) {
    background-color: #3b82f6;
    border-color: transparent;
    color: #f3f4f6;
    opacity: 1;
}

body.dark-theme .auth-submit-button:hover:not(:disabled):not(.is-success-feedback):not(.is-error-feedback) {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

body.dark-theme .auth-submit-button.is-success-feedback,
body.dark-theme .auth-submit-button.is-success-feedback:disabled,
body.dark-theme .auth-submit-button.is-success-feedback:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

body.dark-theme .auth-submit-button.is-error-feedback,
body.dark-theme .auth-submit-button.is-error-feedback:disabled,
body.dark-theme .auth-submit-button.is-error-feedback:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* =========================================================
   UI COLOR CONSISTENCY
   Shared neutral interaction/border/progress palette.
   Semantic states (primary, success, error, selected mode,
   difficulty and track colors) intentionally stay separate.
   ========================================================= */

:root {
    --ui-border-soft: #eef0f2;
    --ui-hover-menu: #f6f7f8;
    --ui-hover-icon: rgba(148, 163, 184, 0.10);
    --ui-selected-bg: #eff6ff;
    --ui-selected-text: #2563eb;
    --ui-progress-track: #eef0f2;
    --ui-progress-green: #7cb261;
    --ui-progress-season: #f1b933;
}

body.dark-theme {
    --ui-border-soft: #374151;
    --ui-hover-menu: #2b3544;
    --ui-hover-icon: rgba(148, 163, 184, 0.12);
    --ui-selected-bg: #1e3a5f;
    --ui-selected-text: #93c5fd;
    --ui-progress-track: #374151;
}

/* ---------- Neutral borders: menus, dropdowns and navigation controls ---------- */
.header-account-menu,
.lang-trigger,
.lang-menu,
.stats-tab,
.progress-toggle,
.nav-btn,
.questions-page-size__pill {
    border-color: var(--ui-border-soft) !important;
}

/* Footer language selector matches the profile-settings field border in light theme. */
body:not(.dark-theme) footer .lang-trigger {
    border-color: #dddddd !important;
}

.questions-page-size__dropdown,
.filters-dropdown,
.practice-exercise-selector__menu,
.course-practice__navigator .practice-exercise-selector__menu {
    border: 1px solid var(--ui-border-soft);
}

/* ---------- Menu/list hover: one subtle neutral shade everywhere ---------- */
header a:hover,
header .header-account-item:hover,
header .header-account-item:focus-visible,
.lang-item:hover:not([aria-selected="true"]),
.questions-page-size__item:hover:not(.active),
.questions-page-size__item:focus-visible:not(.active),
.practice-exercise-list__item:hover,
.course-practice__navigator .practice-exercise-list__item:hover,
.season-table-row:hover,
.question-row:hover,
.stats-tab:hover:not(.is-active){
    background: var(--ui-hover-menu) !important;
}

/* ---------- Selected dropdown rows keep one blue selection language ---------- */
.lang-item[aria-selected="true"],
.lang-item[aria-selected="true"]:hover,
.questions-page-size__item.active{
    background: var(--ui-selected-bg) !important;
    color: var(--ui-selected-text) !important;
}

/* ---------- Icon/navigation hover: same restrained square/circle highlight ---------- */
.season-nav-btn:hover:not(:disabled),
.practice-navigator__button:hover:not(:disabled),
.course-course-navigation__toggle:hover,
.course-toggle.is-in-card:hover,
.page-btn:hover:not(:disabled),
.page-btn:focus-visible:not(:disabled),
.page-info:hover,
.page-info:focus-within {
    background: var(--ui-hover-icon) !important;
}

/* The previous/next course controls are full controls, so use the menu-level hover. */
.progress-toggle:hover,
.nav-btn:hover {
    background: var(--ui-hover-menu) !important;
    border-color: var(--ui-border-soft) !important;
}

/* Task selector trigger follows the same neutral hover language as menus. */
.practice-exercise-selector__toggle:hover,
.practice-exercise-selector__toggle[aria-expanded="true"],
.course-practice__navigator .practice-exercise-selector__toggle:hover,
.course-practice__navigator .practice-exercise-selector__toggle[aria-expanded="true"] {
    background: var(--ui-hover-menu) !important;
}

/* Secondary actions use the same neutral hover rather than a separate gray. */
.pm-btn-secondary:hover,
.tlm-btn-secondary:hover {
    background: var(--ui-hover-menu) !important;
    border-color: var(--ui-border-soft) !important;
}

/* ---------- Profile statistics tabs ---------- */
body:not(.dark-theme) .stats-tab.is-active {
    background-color: #ffffff;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

body.dark-theme .stats-tab.is-active {
    background-color: #111827;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

/* ---------- Progress indicators ---------- */
.track-progress__bar,
.meta-progress-bar {
    background: var(--ui-progress-track) !important;
}

.track-progress__bar-fill,
.track-progress__bar-fill--practice,
.meta-progress-fill:not(.meta-progress-fill--season) {
    background: var(--ui-progress-green) !important;
}

.track-progress__bar-fill--score,
.meta-progress-fill--season {
    background: var(--ui-progress-season) !important;
}

.season-score-ring {
    --progress-color: var(--ui-progress-season);
}

.general-ring--score {
    --ring-color: var(--ui-progress-season);
}

.topic-progress-wrap {
    --ring-green: var(--ui-progress-green);
    --ring-yellow: var(--ui-progress-season);
    --ring-track: #d9dde2;
}

body.dark-theme .topic-progress-wrap {
    --ring-green: var(--ui-progress-green);
    --ring-yellow: var(--ui-progress-season);
    --ring-track: var(--ui-progress-track);
}

/* ---------- Filled utility icon buttons ---------- */
#all-reset-toggle:hover,
#filter-toggle:hover,
#companies-reset-toggle:hover,
#themes-reset-toggle:hover {
    background-color: #e5e7eb;
}

body.dark-theme #all-reset-toggle:hover,
body.dark-theme #filter-toggle:hover,
body.dark-theme #companies-reset-toggle:hover,
body.dark-theme #themes-reset-toggle:hover {
    background-color: #4b5563;
}

/* ---------- Secondary outlined actions ---------- */
.pm-btn-secondary,
.tlm-btn-secondary {
    border-color: var(--ui-border-soft) !important;
}

/* Retry is a secondary action, so keep its hover neutral instead of blue. */




/* Horizontal scroller arrows: subtle in light theme, clearly visible in dark theme.
   Dark selectors are explicit because the base dark-theme background rules have
   higher specificity than a plain .to-scroll-btn:hover/.scroll-btn:hover rule. */
.to-scroll-btn:hover,
.to-scroll-btn:focus-visible,
.scroll-btn:hover,
.scroll-btn:focus-visible {
    background-color: var(--ui-hover-menu) !important;
}

body.dark-theme .to-scroll-btn:hover,
body.dark-theme .to-scroll-btn:focus-visible,
body.dark-theme .scroll-btn:hover,
body.dark-theme .scroll-btn:focus-visible {
    background-color: #4b5563 !important;
}

.course-toggle.is-in-card {
    transition: background-color 140ms ease;
}

.course-toggle.is-in-card:hover,
.course-toggle.is-in-card:focus-visible {
    background: transparent !important;
}
/* ===== Season rating side cards ===== */
body.dark-theme .season-rating-side-card {
    background-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.dark-theme .season-rating-side-card--me .season-me-summary {
    background: transparent;
    border-color: transparent;
}

body.dark-theme .season-side-subtitle,
body.dark-theme .season-rank-card .rank-scale__head {
    color: #9ca3af;
}

body.dark-theme .season-rank-card .rank-scale__row b {
    color: #f3f4f6;
}

body.dark-theme .season-me-summary__scope {
    color: #9ca3af;
}

body.dark-theme .season-me-summary__avatar {
    background: #374151;
}

/* =========================================================
   QUESTIONS — dark theme completion
   Keeps the page hierarchy consistent with the rest of Java Hub:
   #111827 page, #1f2937 card, restrained neutral controls.
   ========================================================= */
body.dark-theme .questions-description {
    color: #9ca3af;
}

body.dark-theme .questions-block {
    border: 1px solid #2f3b4d;
}

body.dark-theme #question-search-input,
body.dark-theme #companies-search-input,
body.dark-theme #themes-search-input,
body.dark-theme #filter-toggle,
body.dark-theme #all-reset-toggle,
body.dark-theme .questions-search-block .icon-btn {
    background-color: #273142;
    border: 1px solid transparent;
}

body.dark-theme #filter-toggle:hover,
body.dark-theme #all-reset-toggle:hover,
body.dark-theme .questions-search-block .icon-btn:hover {
    background-color: #323d4f;
}

/* All question/filter search fields use one dark-theme visual language. */
body.dark-theme #question-search-input,
body.dark-theme #companies-search-input,
body.dark-theme #themes-search-input {
    color: #f3f4f6;
    caret-color: #f3f4f6;
}

body.dark-theme #question-search-input::placeholder,
body.dark-theme #companies-search-input::placeholder,
body.dark-theme #themes-search-input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

body.dark-theme .question-search-icon circle,
body.dark-theme .question-search-icon path,
body.dark-theme .filter-search-icon circle,
body.dark-theme .filter-search-icon path,
body.dark-theme #all-reset-toggle .reset-icon path,
body.dark-theme .filter-icon .line {
    stroke: #aeb8c6;
}

body.dark-theme .filter-icon .knob-ring {
    fill: #aeb8c6;
}

body.dark-theme .filter-icon .knob-hole {
    fill: #273142;
}

body.dark-theme .filters-dropdown {
    background: #1f2937;
    border-color: #3a4658;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}

body.dark-theme #companies-reset-toggle,
body.dark-theme #themes-reset-toggle {
    background-color: #273142;
    border: 1px solid transparent;
}

body.dark-theme #companies-reset-toggle .reset-icon path,
body.dark-theme #themes-reset-toggle .reset-icon path {
    stroke: #aeb8c6;
}

body.dark-theme .filter-search-clear,
body.dark-theme .filter-section-reset,
body.dark-theme .questions-reset-button {
    color: #aeb8c6;
}

body.dark-theme .filter-search-clear:hover,
body.dark-theme .filter-section-reset:hover,
body.dark-theme .questions-reset-button:hover {
    background-color: #323d4f;
    color: #f3f4f6;
}

body.dark-theme .solve-btn,
body.dark-theme .companies-chips .chip,
body.dark-theme .themes-chips .chip {
    background-color: #2b3544;
    color: #e5e7eb;
}

body.dark-theme .solve-btn:hover:not(.active),
body.dark-theme .companies-chips .chip:hover:not(.active),
body.dark-theme .themes-chips .chip:hover:not(.active) {
    background-color: #374151;
}

body.dark-theme .solve-btn.active,
body.dark-theme .companies-chips .chip.active,
body.dark-theme .themes-chips .chip.active {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme .questions-header {
    color: #d1d5db;
    border-bottom-color: #3a4658;
}

body.dark-theme .question-row {
    color: #e5e7eb;
    border-bottom-color: #3a4658;
}

body.dark-theme .question-row:hover {
    background-color: #263142 !important;
}

body.dark-theme .question-row .chip {
    background-color: #374151;
    color: #f3f4f6;
}

body.dark-theme .month-loading,
body.dark-theme .month-empty {
    color: #9ca3af;
}

body.dark-theme .questions-page-size__dropdown {
    background: #1f2937;
    border-color: #3a4658;
}

body.dark-theme .questions-page-size__item {
    color: #e5e7eb;
}

body.dark-theme .questions-page-size__item:hover:not(.active),
body.dark-theme .questions-page-size__item:focus-visible:not(.active) {
    background: #2b3544 !important;
}

body.dark-theme .page-jump-input {
    background-color: #111827;
    border: 1px solid #374151;
    color: #f3f4f6;
}

body.dark-theme .page-btn:disabled {
    color: #6b7280;
    opacity: 0.55;
}

body.dark-theme .questions-page-size__pill,
body.dark-theme .page-info {
    border-color: #3a4658 !important;
}

body.dark-theme .filters-dropdown,
body.dark-theme .questions-page-size__dropdown {
    scrollbar-color: #4b5563 transparent;
}

body.dark-theme .filters-dropdown::-webkit-scrollbar,
body.dark-theme .questions-page-size__dropdown::-webkit-scrollbar {
    width: 6px;
}

body.dark-theme .filters-dropdown::-webkit-scrollbar-track,
body.dark-theme .questions-page-size__dropdown::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-theme .filters-dropdown::-webkit-scrollbar-thumb,
body.dark-theme .questions-page-size__dropdown::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 999px;
}

/* =========================================================
   QUESTIONS — grouped pagination control
   Keep the whole pager visually paired with the page-size selector.
   Hover/focus is shown by a local outline only; no filled hover tile.
   Scoped to /questions so season-rating pagination is unchanged.
   ========================================================= */
body .questions-pagination-bar {
    --questions-pagination-control-height: 2.4rem;
    --questions-pagination-border: #eef0f2;
    --questions-pagination-inner-radius: 8px;
}

body .questions-pagination-bar .month-pagination {
    height: var(--questions-pagination-control-height);
    box-sizing: border-box;
    padding: 0.18rem;
    gap: 0.25rem;
    border: 1px solid var(--questions-pagination-border);
    border-radius: 11px;
    background: transparent;
}

body .questions-pagination-bar .questions-page-size__pill {
    height: var(--questions-pagination-control-height);
    box-sizing: border-box;
}

body .questions-pagination-bar .page-btn,
body .questions-pagination-bar .page-info {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
    border: 1px solid transparent !important;
    border-radius: var(--questions-pagination-inner-radius) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition:
        border-color 0.16s ease,
        color 0.16s ease,
        opacity 0.16s ease !important;
}

body .questions-pagination-bar .page-btn:hover:not(:disabled),
body .questions-pagination-bar .page-btn:focus-visible:not(:disabled),
body .questions-pagination-bar .page-info:hover,
body .questions-pagination-bar .page-info:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--questions-pagination-border) !important;
    box-shadow: none !important;
}

body .questions-pagination-bar .page-btn:focus-visible,
body .questions-pagination-bar .page-info:focus-within {
    outline: none !important;
}

body .questions-pagination-bar .page-btn:disabled {
    border-color: transparent !important;
    background: transparent !important;
}

body.dark-theme .questions-pagination-bar {
    --questions-pagination-border: #374151;
}

body.dark-theme .questions-pagination-bar .month-pagination {
    border-color: var(--questions-pagination-border);
    background: transparent;
}

body.dark-theme .questions-pagination-bar .page-btn:hover:not(:disabled),
body.dark-theme .questions-pagination-bar .page-btn:focus-visible:not(:disabled),
body.dark-theme .questions-pagination-bar .page-info:hover,
body.dark-theme .questions-pagination-bar .page-info:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #4b5563 !important;
}

/* =========================================================
   QUESTIONS — page jump focus cleanup
   The pager already has one outer frame. Keep the page counter visually
   text-like, and show only one local blue frame on the editable page input.
   ========================================================= */
body .questions-pagination-bar .page-info:focus-within {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .questions-pagination-bar .page-jump-input {
    box-sizing: border-box;
    border: 2px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.16s ease;
}

body .questions-pagination-bar .page-jump-input:focus {
    border-color: rgba(59, 130, 246, 0.30) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark-theme .questions-pagination-bar .page-info:focus-within {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dark-theme .questions-pagination-bar .page-jump-input {
    border-color: transparent !important;
    background: transparent !important;
    color: #f3f4f6;
}

body.dark-theme .questions-pagination-bar .page-jump-input:focus {
    border-color: rgba(147, 197, 253, 0.42) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   COURSE PAGE — FINAL PRIMARY NAV COLOR SYNC
   ---------------------------------------------------------
   theme.css is loaded after course-page.css, so this block is
   intentionally last. Keep the article heading, practice jump,
   top-level course topics with chevrons, and the large selected
   topic title on exactly the same color in both themes.
   ========================================================= */
body.course-page-view {
    --course-primary-nav-color: #64748b;
    --course-secondary-nav-color: #94a3b8;
}

body.dark-theme.course-page-view {
    --course-primary-nav-color: #94a3b8;
    --course-secondary-nav-color: #64748b;
}

/* Primary navigation tone: the same color as the right-side “Article” heading. */
body.course-page-view .course-page-navigation__title,
body.course-page-view .course-page-navigation__practice-jump,
body.course-page-view .course-page-navigation__practice-jump span,
body.course-page-view .course-page-navigation__practice-jump svg,
body.course-page-view .course-page-navigation__practice-jump svg path,
body.course-page-view .course-course-navigation__back,
body.course-page-view .course-course-navigation__back span,
body.course-page-view .course-course-navigation__back svg,
body.course-page-view .course-course-navigation__back svg path,
body.course-page-view .course-course-navigation__level-title,
body.course-page-view .course-course-navigation__topic-title,
body.course-page-view .course-course-navigation__topic-title.is-current,
body.course-page-view .course-course-navigation__topic-title .course-course-navigation__topic-title-text,
body.course-page-view .course-course-navigation__topic-title.is-current .course-course-navigation__topic-title-text {
    color: var(--course-primary-nav-color);
}

/* Basic / Advanced headings should be the same size as the “Course” heading. */
body.course-page-view .course-course-navigation__level-title {
    font-size: 1.05rem;
    line-height: 1.3;
}

/* Topic rows use the same quieter tone as the links listed below “Article”. */
body.course-page-view .course-course-navigation__topic,
body.course-page-view .course-course-navigation__topic:hover,
body.course-page-view .course-course-navigation__topic.is-current,
body.course-page-view .course-course-navigation__topic .course-course-navigation__name,
body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__name,
body.course-page-view .course-course-navigation__topic.is-current .course-course-navigation__name,
body.course-page-view .course-course-navigation__topic .course-course-navigation__enter,
body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__enter,
body.course-page-view .course-course-navigation__topic.is-current .course-course-navigation__enter {
    color: var(--course-secondary-nav-color);
}

body.course-page-view .course-page-navigation__practice-jump svg path,
body.course-page-view .course-course-navigation__back svg path,
body.course-page-view .course-course-navigation__topic .course-course-navigation__enter path,
body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__enter path,
body.course-page-view .course-course-navigation__topic.is-current .course-course-navigation__enter path {
    stroke: currentColor;
}

/* COURSE PAGE — force top-level topic chevrons to match topic text exactly. */
body.course-page-view .course-course-navigation__topic .course-course-navigation__enter,
body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__enter,
body.course-page-view .course-course-navigation__topic.is-current .course-course-navigation__enter {
    color: var(--course-secondary-nav-color) !important;
}

body.course-page-view .course-course-navigation__topic .course-course-navigation__enter path,
body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__enter path,
body.course-page-view .course-course-navigation__topic.is-current .course-course-navigation__enter path {
    fill: none !important;
    stroke: var(--course-secondary-nav-color) !important;
}

/* =========================================================
   COURSE PAGE — LEFT NAV TYPOGRAPHY + HOVER PARITY
   ---------------------------------------------------------
   Mirror the right-side Article navigation exactly:
   - overview topic rows behave like article links;
   - the detail topic title behaves like an article link;
   - “All topics” behaves like the Article heading / practice jump tier.
   Keep this block last because theme.css owns the final cascade.
   ========================================================= */
body.course-page-view {
    --course-secondary-nav-hover-color: #475569;
    --course-primary-nav-hover-color: #475569;
}

body.dark-theme.course-page-view {
    --course-secondary-nav-hover-color: #e2e8f0;
    --course-primary-nav-hover-color: #f8fafc;
}

/* Overview topics under Basic / Advanced: same hover as Article links. */
body.course-page-view .course-course-navigation__topic:hover,
body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__name,
body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__enter {
    color: var(--course-secondary-nav-hover-color) !important;
    background: transparent !important;
}

body.course-page-view .course-course-navigation__topic:hover .course-course-navigation__enter path {
    fill: none !important;
    stroke: var(--course-secondary-nav-hover-color) !important;
}

/* The selected top-level topic under “All topics” now has the same
   typography and tone as links listed below “Article”. */
body.course-page-view .course-course-navigation__topic-title,
body.course-page-view .course-course-navigation__topic-title.is-current,
body.course-page-view .course-course-navigation__topic-title .course-course-navigation__topic-title-text,
body.course-page-view .course-course-navigation__topic-title.is-current .course-course-navigation__topic-title-text {
    color: var(--course-secondary-nav-color) !important;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
}

body.course-page-view .course-course-navigation__topic-title:hover,
body.course-page-view .course-course-navigation__topic-title:hover .course-course-navigation__topic-title-text {
    color: var(--course-secondary-nav-hover-color) !important;
    background: transparent !important;
}

/* “All topics” matches the right-side “Article” heading exactly in
   size/weight/tone, while retaining a hover because it is a button. */
body.course-page-view .course-course-navigation__back,
body.course-page-view .course-course-navigation__back span,
body.course-page-view .course-course-navigation__back svg {
    color: var(--course-primary-nav-color) !important;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

body.course-page-view .course-course-navigation__back svg path {
    fill: none !important;
    stroke: var(--course-primary-nav-color) !important;
}

body.course-page-view .course-course-navigation__back:hover,
body.course-page-view .course-course-navigation__back:hover span,
body.course-page-view .course-course-navigation__back:hover svg {
    color: var(--course-primary-nav-hover-color) !important;
    background: transparent !important;
}

body.course-page-view .course-course-navigation__back:hover svg path {
    fill: none !important;
    stroke: var(--course-primary-nav-hover-color) !important;
}

/* =========================================================
   COURSE PAGE — FINAL DETAIL NAV STATES
   ---------------------------------------------------------
   Keep active topic/subtopic states and dark-theme subtopic
   hover above the late direct color on __name.
   ========================================================= */
body.course-page-view {
    --course-active-nav-color: #3b82f6;
}

body.dark-theme.course-page-view {
    --course-active-nav-color: #7db4f6;
}

/* The current topic directly under “All topics” uses the same
   active treatment as a current subtopic. */
body.course-page-view .course-course-navigation__topic-title.is-current,
body.course-page-view .course-course-navigation__topic-title.is-current .course-course-navigation__topic-title-text {
    color: var(--course-active-nav-color) !important;
    font-weight: 600;
}

body.course-page-view .course-course-navigation__topic-title.is-current:hover,
body.course-page-view .course-course-navigation__topic-title.is-current:hover .course-course-navigation__topic-title-text {
    color: var(--course-active-nav-color) !important;
}

/* Subtopics must override the late direct __name color too, otherwise
   the parent hover changes but the visible text does not in dark theme. */
body.course-page-view .course-course-navigation__subtopic,
body.course-page-view .course-course-navigation__subtopic .course-course-navigation__name {
    color: var(--course-secondary-nav-color) !important;
}

body.course-page-view .course-course-navigation__subtopic:hover,
body.course-page-view .course-course-navigation__subtopic:hover .course-course-navigation__name {
    color: var(--course-secondary-nav-hover-color) !important;
    background: transparent !important;
}

body.course-page-view .course-course-navigation__subtopic.is-current,
body.course-page-view .course-course-navigation__subtopic.is-current .course-course-navigation__name,
body.course-page-view .course-course-navigation__subtopic.is-current:hover,
body.course-page-view .course-course-navigation__subtopic.is-current:hover .course-course-navigation__name {
    color: var(--course-active-nav-color) !important;
    font-weight: 600;
}

/* =========================================================
   COURSE ARTICLE META — SYNC WITH PRIMARY NAV TONE
   ---------------------------------------------------------
   Keep article metadata in the same slate family as the course
   navigation so it feels native to the page in both themes.
   Image captions keep their neutral tone below.
   ========================================================= */
body.course-page-view .course-page-meta__item,
body.course-page-view .course-page-meta__item span,
body.course-page-view .course-page-meta__icon {
    color: var(--course-primary-nav-color) !important;
}

body.course-page-view .course-image__caption {
    color: #777777 !important;
}

body.dark-theme.course-page-view .course-image__caption {
    color: #a3a3a3 !important;
}

body.course-page-view .course-page-meta__icon {
    background-color: currentColor;
}


/* =========================================================
   GLOBAL SURFACE SYSTEM
   ---------------------------------------------------------
   Keep large white cards consistent with /premium and /profile:
   neutral 1px border + calm elevation in light and dark themes.
   Page sections, controls, inputs, tabs and inner chips are intentionally
   excluded so only real card/surface containers get elevation.
   ========================================================= */
:root {
    --jh-surface-border: #e6e9ed;
    --jh-surface-shadow: 0 12px 34px rgba(31, 41, 55, 0.08);
    --jh-surface-shadow-soft: 0 8px 24px rgba(31, 41, 55, 0.07);
    --jh-surface-shadow-compact: 0 4px 12px rgba(31, 41, 55, 0.06);
}

body.dark-theme {
    --jh-surface-border: #374151;
    --jh-surface-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
    --jh-surface-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.22);
    --jh-surface-shadow-compact: 0 5px 14px rgba(0, 0, 0, 0.18);
}

/* Primary page surfaces. */
.premium-offer,
.premium-feature,
.gifts-card,
.profile-content,
.profile-statistic,
.profile-achievements-section,
.course-page-block,
.questions-block,
.season-rating-block,
.help-block,
.feedback-block,
.send-exercise-block,
.user-agreement-block,
.privacy-policy-block,
.profile-settings-summary-card,
.profile-settings-section,
.certificate-check-card,
.question-panel,
.practice-task-page .exercise-block,
.practice-task-page .exercise-assistant,
.course-practice--split .course-practice__card,
.course-practice--split .course-practice-assistant,
.login-block,
.register-block,
.forgot-block,
.change-password-block,
.reset-block,
.set-password-block,
.confirm-block {
    border: 1px solid var(--jh-surface-border);
    box-shadow: var(--jh-surface-shadow);
}

/* Repeated cards use a slightly quieter elevation so grids stay light. */
.course-section,
.practice-content .section,
.certificate-track-card,
.season-rating-side-card {
    border: 1px solid var(--jh-surface-border);
    box-shadow: var(--jh-surface-shadow-soft);
}

/* Compact progress cards under the course heading need a much smaller
   elevation than full-size page cards. */
.track-progress {
    border: 1px solid var(--jh-surface-border);
    box-shadow: var(--jh-surface-shadow-compact);
}

/* Detailed practice explicitly disabled its shadow earlier; make only the
   two top-level workspace panels follow the shared surface system. */
.practice-task-page .exercise-block {
    box-shadow: var(--jh-surface-shadow) !important;
}