/* webapp/css/components.css */

/* Стили для кнопок режимов изучения */
#study-mode-buttons-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#study-mode-buttons-wrapper .button-wide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    margin: 0;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#study-mode-buttons-wrapper .button-wide .material-symbols-rounded {
    margin-right: 0.5rem;
    font-size: 1.25rem;
}

/* === Цветовые свойства, универсальные для всех тем === */

body[class^="theme-"] .content-section {
    background-color: var(--theme-bg-secondary);
}
body[class^="theme-"] .content-card-bg {
    background-color: var(--theme-bg-content);
}
body[class^="theme-"] .modal-bg {
    background-color: var(--theme-bg-content);
}
body[class^="theme-"] .course-card, body[class^="theme-"] .grammar-topic-card {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .course-card:hover, body[class^="theme-"] .grammar-topic-card:hover {
    border-color: var(--theme-accent-primary);
}
body[class^="theme-"] .course-card h3, body[class^="theme-"] .course-card h4,
body[class^="theme-"] .grammar-topic-card h3, body[class^="theme-"] .grammar-topic-card h4 {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .course-category-item {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .course-category-item h3 {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .course-category-item p {
    color: var(--theme-text-secondary);
}
body[class^="theme-"] .course-category-item .category-arrow {
    color: var(--theme-text-secondary);
}
body[class^="theme-"] .course-category-item:hover .category-arrow {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .course-category-item-pinned {
    background-color: color-mix(in srgb, var(--theme-bg-secondary) 90%, var(--theme-accent-primary) 5%);
    border: 1px solid var(--theme-accent-secondary);
}
body[class^="theme-"] .course-category-item-pinned:hover {
    border-color: var(--theme-accent-primary);
}
body[class^="theme-"] .course-category-item-pinned h3,
body[class^="theme-"] .course-category-item-pinned p,
body[class^="theme-"] .course-category-item-pinned .category-arrow {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .course-category-item-pinned p {
    color: var(--theme-text-secondary) !important;
}
body[class^="theme-"] .grammar-exercise-type-card {
    background-color: var(--theme-bg-content);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .grammar-exercise-type-card:hover {
    border-color: var(--theme-accent-primary);
}
body[class^="theme-"] .grammar-exercise-type-card h3 {
    color: var(--theme-text-primary);
}
body[class^="theme-"] .grammar-exercise-type-card p {
    color: var(--theme-text-secondary);
}
body[class^="theme-"] .grammar-exercise-type-card .category-arrow {
    color: var(--theme-text-secondary);
}
body[class^="theme-"] .grammar-exercise-type-card:hover .category-arrow {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .srs-bar-container {
    background-color: var(--theme-bg-content);
}
body[class^="theme-"] .srs-bar-short-term  { background-color: var(--theme-srs-bar-short); }
body[class^="theme-"] .srs-bar-medium-term { background-color: var(--theme-srs-bar-medium); }
body[class^="theme-"] .srs-bar-long-term   { background-color: var(--theme-srs-bar-long); }
body[class^="theme-"] .srs-bar-learned     { background-color: var(--theme-srs-bar-learned); }
body[class^="theme-"] .nav-item { color: var(--theme-text-secondary); }
body[class^="theme-"] .nav-item:hover { color: var(--theme-accent-primary); }
body[class^="theme-"] .nav-item.active { color: var(--theme-accent-primary); }
body[class^="theme-"] #bottom-nav {
    background-color: var(--theme-bg-secondary);
    border-top: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .button-primary {
    background-image: linear-gradient(to bottom, var(--theme-accent-primary) 0%, color-mix(in srgb, var(--theme-accent-primary) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
}
body[class^="theme-"] .button-primary:hover:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-primary) 100%, white 10%) 0%, color-mix(in srgb, var(--theme-accent-primary) 85%, black) 100%);
}
body[class^="theme-"] .button-primary:active:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-primary) 70%, black) 0%, color-mix(in srgb, var(--theme-accent-primary) 60%, black) 100%);
}
body[class^="theme-"] .button-secondary {
    background-color: var(--theme-bg-content);
    color: var(--theme-button-text-on-normal);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .button-secondary:hover:not(:disabled):not(.disabled) {
    background-color: color-mix(in srgb, var(--theme-bg-content) 85%, var(--theme-text-primary) 5%);
    border-color: var(--theme-accent-primary);
}
body[class^="theme-"] .button-secondary:active:not(:disabled):not(.disabled) {
    background-color: color-mix(in srgb, var(--theme-bg-content) 70%, black 5%);
}
body[class^="theme-"] .button-secondary:focus, body[class^="theme-"] .button-secondary:focus-visible {
    border-color: var(--theme-accent-primary);
}
body[class^="theme-"] .button-success {
    background-image: linear-gradient(to bottom, var(--theme-success-color) 0%, color-mix(in srgb, var(--theme-success-color) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
}
body[class^="theme-"] .button-success:hover:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-success-color) 100%, white 10%) 0%, color-mix(in srgb, var(--theme-success-color) 85%, black) 100%);
}
body[class^="theme-"] .button-success:active:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-success-color) 70%, black) 0%, color-mix(in srgb, var(--theme-success-color) 60%, black) 100%);
}
body[class^="theme-"] .button-danger {
    background: none !important;
    background-image: linear-gradient(to bottom, var(--theme-error-color) 0%, color-mix(in srgb, var(--theme-error-color) 80%, black) 100%) !important;
    color: var(--theme-button-text-on-accent);
}
body[class^="theme-"] .button-danger:hover:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-error-color) 100%, white 10%) 0%, color-mix(in srgb, var(--theme-error-color) 85%, black) 100%);
}
body[class^="theme-"] .button-danger:active:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-error-color) 70%, black) 0%, color-mix(in srgb, var(--theme-error-color) 60%, black) 100%);
}
body[class^="theme-"] .button-warning {
    background-image: linear-gradient(to bottom, var(--theme-accent-primary) 0%, color-mix(in srgb, var(--theme-accent-primary) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
    border: none;
}
body[class^="theme-"] .button-warning:hover:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-primary) 100%, white 10%) 0%, color-mix(in srgb, var(--theme-accent-primary) 85%, black) 100%);
}
body[class^="theme-"] .button-warning:active:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-primary) 70%, black) 0%, color-mix(in srgb, var(--theme-accent-primary) 60%, black) 100%);
}
body[class^="theme-"] .button-accent-alt1 {
    background-image: linear-gradient(to bottom, var(--theme-accent-alt1) 0%, color-mix(in srgb, var(--theme-accent-alt1) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
}
body[class^="theme-"] .button-accent-alt1:hover:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-alt1) 100%, white 10%) 0%, color-mix(in srgb, var(--theme-accent-alt1) 85%, black) 100%);
}
body[class^="theme-"] .button-accent-alt1:active:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-alt1) 70%, black) 0%, color-mix(in srgb, var(--theme-accent-alt1) 60%, black) 100%);
}
body[class^="theme-"] .button-accent-alt2 {
    background-image: linear-gradient(to bottom, var(--theme-accent-alt2) 0%, color-mix(in srgb, var(--theme-accent-alt2) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
}
body[class^="theme-"] .button-accent-alt2:hover:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-alt2) 100%, white 10%) 0%, color-mix(in srgb, var(--theme-accent-alt2) 85%, black) 100%);
}
body[class^="theme-"] .button-accent-alt2:active:not(:disabled):not(.disabled) {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-alt2) 70%, black) 0%, color-mix(in srgb, var(--theme-accent-alt2) 60%, black) 100%);
}

/* Секции контента - базовая структура */
.content-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    background-color: var(--theme-bg-secondary);
    /* background-color и box-shadow будут заданы темой */
}

/* Заголовки внутри content-section */
.content-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.content-section h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.content-section h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.content-section p { font-size: 0.875rem; margin-bottom: 0.5rem; }

/* Инпуты и Select - базовая структура */
.input-field, select.input-field {
    width: 100%;
    padding: 0.625rem; /* 10px */
    border-radius: 0.375rem; /* 6px */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background-color, border, color, placeholder color будут заданы темой */
}
select.input-field {
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.65rem auto;
    padding-right: 2.5rem;
    /* background-image (стрелка) будет задана темой */
}
.input-field:focus, select.input-field:focus {
    outline: none;
    /* border-color и box-shadow для фокуса будут заданы темой */
}
.input-field[readonly] {
    opacity: 0.7;
    cursor: default;
    /* background-color для readonly будет задана темой */
}

/* Маленькое поле ввода */
.input-field-sm, select.input-field-sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}
select.input-field-sm {
    padding-right: 2rem;
}

/* Кнопка "крестик" для очистки поля */
.clear-input-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    user-select: none;
    transition: color 0.2s ease;
    /* color и hover color будут заданы темой */
}
textarea + .clear-input-btn {
    top: 0.5rem;
    transform: translateY(0);
}


/* Кнопки - базовая структура */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-image 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.2s, border-color 0.2s;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Базовая тень */
    /* background-image/color, color будут заданы темой */
}

/* Общий эффект при наведении для всех кнопок-градиентов */
.button-primary:hover:not(:disabled):not(.disabled),
.button-success:hover:not(:disabled):not(.disabled),
.button-danger:hover:not(:disabled):not(.disabled),
.button-warning:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px); /* <<< САМ "ПРЫЖОК" */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    /* А цвета фона (background-image) будут браться из файла темы */
}

/* Общий эффект для вторичных кнопок */
.button-secondary:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px); /* Менее выраженный прыжок */
}

.button:disabled, .button.disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    /* background-color, color, border для disabled будут заданы темой */
}
.button:focus, .button:focus-visible {
    outline: none !important;
    /* box-shadow для фокуса будет задан темой */
}
.button.text-xs { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.button.text-sm { font-size: 0.875rem; padding: 0.375rem 0.75rem; }

/* Кнопка-иконка для озвучки */
.button-icon-study {
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    /* background-color, color будут заданы темой */
}
.button-icon-study svg.icon,
.button-icon-study .material-symbols-rounded {
    width: 18px;
    height: 18px;
    font-size: 18px; /* Для Material Symbols */
}
.button-icon-study:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Переключатель (Toggle Button) */
.toggle-button {
    min-width: 44px;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    padding: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, background-image 0.3s ease;
    flex-shrink: 0; /* Запрещаем сжатие */
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    /* background-color, border будут заданы темой */
}

.toggle-button-slider {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
    left: 0;
    /* background-color будет задана темой */
}

.toggle-button.active .toggle-button-slider {
    transform: translateX(20px);
    /* background-color (активный) будет задана темой */
}



.content-section > div > label {
    flex: 1;
    margin-right: 16px;
    min-width: 0; /* Разрешаем сжатие текста */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Модальное окно - базовая структура */
.modal-bg { /* Контейнер контента модального окна */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 80vh;
    margin: 0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
    /* background-color, padding, border-radius, box-shadow будут заданы темой */
    background-color: var(--theme-bg-content);
}
.modal-form-content-wrapper {
    flex-grow: 1;
}
.modal-bg > h3,
.modal-bg > .flex.justify-end {
    flex-shrink: 0;
}
.modal-bg > .flex.justify-end {
    margin-top: 1rem;
}
#edit-word-modal, #global-error-modal { /* Внешний контейнер-оверлей */
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.75); /* Полупрозрачный фон по умолчанию */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000; /* Базовый z-index */
    backdrop-filter: blur(2px); /* Легкий блюр по умолчанию */
}
#global-error-modal { z-index: 9999; }

/* Стили для страницы "Учить" - общие элементы карточек */
.card-mode-title { font-size: 1.125rem; font-weight: 600; text-align: center; margin-bottom: 0.75rem; }
#question-text-element, #mc-question-text-element {
    min-height: 1.8em;
    word-break: break-word;
    line-height: 1.3;
    font-size: 1.5rem; /* Базовый размер */
    font-weight: 500; /* Базовый вес */
    text-align: center; /* Базовое выравнивание */
}
.card-word-srs-info {
    font-size: 0.75rem;
    text-align: center;
    margin-bottom: 0.25rem;
    min-height: 1em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}
.study-card-status-text {
    display: inline-block;
}
.study-card-next-review-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em 0.6em;
    border-radius: 1em;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    vertical-align: middle;
    text-wrap: nowrap;
    min-height: 1.5em;
    min-width: 4em;
}

/* SRS Progress Bar */
.srs-progress-bar-container {
    display: flex;
    width: 75%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    height: 16px; /* увеличено для лучшей видимости */
    border-radius: 5px;
    overflow: hidden;
    padding: 1px;
    gap: 1px;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    background-color: var(--theme-bg-content);
}
.srs-progress-segment {
    flex-grow: 1;
    height: 100%;
    border-radius: 4px;
    margin: 0 2px;
    background: #2d3748; /* дефолтный тёмно-серый */
    transition: background 0.3s;
    position: relative;
    overflow: hidden;
}
.srs-progress-segment.filled {
    background: #fbbf24; /* жёлтый */
}
.srs-progress-segment.completed {
    background: #38a169; /* зелёный */
}
.srs-progress-segment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.4s ease-in-out, background-color 0.4s ease-in-out;
    background-color: transparent;
}
.srs-segment-fill-half::before { width: 50%; }
.srs-segment-fill-full::before { width: 100%; }
/* Конкретные цвета srs-segment-*::before будут заданы темой */

/* Примеры предложений на карточках */
#mc-example-sentence-display, #input-example-sentence-display, #dictation-example-sentence-display {
    font-style: italic;
    font-size: 0.875rem;
    text-align: center;
    min-height: 1.2em;
    padding: 0 0.25rem;
    word-break: break-word;
    flex-grow: 1;
    /* color будет задан темой */
}
.study-example-action-button {
    background: none;
    border: none;
    font-size: 1.1rem;
    padding: 0.2rem;
    margin: 0 0.1rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.study-example-action-button:hover {
    /* color будет задан темой */
}
.study-example-action-button:active {
    transform: scale(0.9);
}
.study-example-action-button.saved-state {
    cursor: default;
}
.study-example-action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Кнопки выбора варианта в MC */
.mc-option-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* background-color, border, color и состояния hover/selected/correct/incorrect будут заданы темой */
}
.mc-option-button:disabled { opacity: 0.7; cursor: not-allowed; }

/* "Жизни" в режиме ввода */
#input-lives-container span, #dictation-lives-container span {
    /* color для сердечек будет задан темой (--theme-error-color) */
}

/* Кнопка "Назад" на странице Учить */
#study-back-button {
    z-index: 10;
    transition: color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.25rem;
    /* color будет задан темой */
}
#study-back-button:hover, #study-back-button:focus, #study-back-button:focus-visible {
    outline: none;
    /* hover/focus color и border-color будут заданы темой */
}
#study-back-button svg.icon { width: 1.75rem; height: 1.75rem; }

/* Индикатор прогресса на главной */
.progress-svg-container { width: 150px; height: 150px; position: relative; }
.progress-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-svg__background-circle { fill: none; stroke-width: 10; /* stroke color будет задан темой */ }
.progress-svg__bar-circle { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 339.292; transition: stroke-dashoffset 0.5s ease-out; /* stroke color/url будет задан темой */ }
.progress-svg__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: bold; /* color будет задан темой */ }

/* Списки слов и курсов */
.list-item-bg {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.2s, background-color 0.2s;
}
.list-item-text-secondary {
    font-size: 0.95em;
    opacity: 0.85;
}
.list-item-accent {
    font-weight: 600;
    font-size: 1em;
}
.example-indicator-icon {
    font-size: 0.7rem;
    margin-left: 4px;
    opacity: 0.7;
    cursor: help;
}
.needs-review-indicator {
    font-size: 1em;
    margin-right: 0.2em;
    display: inline-block;
    vertical-align: baseline;
}
.word-item-element {
    transition: opacity 0.3s ease-out,
                max-height 0.4s ease-out 0.1s,
                padding 0.3s ease-out 0.1s,
                margin 0.3s ease-out 0.1s,
                border-width 0.3s ease-out 0.1s,
                transform 0.3s ease-out;
    overflow: hidden;
    border: 1px solid transparent;
}
.word-item-element.hidden-word { opacity: 0.55; }
.word-item-element.hidden-word strong,
.word-item-element.hidden-word .list-item-text-secondary,
.word-item-element.hidden-word .list-item-accent { opacity: 0.8; }

/* Панель управления списком слов */
#words-list-controls-panel, #course-words-list-controls-panel {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    /* background-color, border будут заданы темой */
}
#words-list-controls-panel label:not(.sr-only), #course-words-list-controls-panel label:not(.sr-only) {
    margin-right: 0.25rem;
    /* color будет задан темой */
}
#words-list-controls-panel select.input-field-sm, #course-words-list-controls-panel select.input-field-sm {
    max-width: 180px;
}

/* Кастомный чекбокс */
.custom-checkbox {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 1.1em; height: 1.1em;
  border-radius: 0.2rem; cursor: pointer; position: relative;
  display: inline-block; vertical-align: middle;
  transition: background-color 0.2s ease, border-color 0.2s ease, background-image 0.2s ease;
  /* background-color, border будут заданы темой */
}
.custom-checkbox:checked::after {
  content: '✔'; font-size: 0.8em;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); line-height: 1;
  /* color (галочки) будет задан темой */
}
.custom-checkbox:focus { outline: none; /* box-shadow будет задан темой */ }
#words-list-controls-panel label[for="filter-no-examples"],
#course-words-list-controls-panel label[for="course-words-filter-no-examples"] {
    cursor: pointer; /* color будет задан темой */
}

/* Карточки курсов и категорий */
.course-card, .grammar-topic-card, .course-category-item, .grammar-exercise-type-card {
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
    margin-bottom: 1rem;
    /* background-color, border будут заданы темой */
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
}
.course-card:hover, .grammar-topic-card:hover, .course-category-item:hover, .grammar-exercise-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-color: var(--theme-accent-primary);
}
.course-category-item, .grammar-exercise-type-card {
    display: flex; justify-content: space-between; align-items: center;
}
.course-card h3, .course-card h4, .grammar-topic-card h3, .grammar-topic-card h4,
.course-category-item h3, .grammar-exercise-type-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    /* color будет задан темой */
    color: var(--theme-accent-primary);
}
.course-category-item p, .grammar-exercise-type-card p {
    font-size: 0.875rem; margin-bottom: 0;
    /* color будет задан темой */
    color: var(--theme-text-secondary);
}
.course-category-item .category-arrow, .grammar-exercise-type-card .category-arrow {
    font-size: 1.5rem; transition: color 0.2s ease;
    /* color и hover color будут заданы темой */
    color: var(--theme-accent-primary);
}
.course-category-item:hover .category-arrow {
    color: var(--theme-accent-primary);
}

/* Чат */
.chat-messages-container {
    scrollbar-width: thin;
    /* scrollbar-color будет задана темой */
}
.chat-message { display: flex; margin-bottom: 0.75rem; font-size: 0.875rem; }
.chat-message-user { justify-content: flex-end; }
.chat-message-gemini { justify-content: flex-start; }
.chat-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-right: 0.5rem; margin-left: 0.5rem; flex-shrink: 0;
    /* background-color, color будут заданы темой */
}
.chat-avatar .material-symbols-rounded { font-size: 18px; }
.chat-message-user .chat-avatar { order: 2; margin-left: 0.5rem; margin-right: 0; }
.chat-message-content {
    max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 0.75rem;
    line-height: 1.5; word-break: break-word;
    /* background-color, color и specific border-radius будут заданы темой */
}
.chat-message-content p:not(:last-child) { margin-bottom: 0.3rem; }

/* Подсказки */
.translation-context-note {
    font-size: 0.85em;
    font-style: italic;
    margin-left: 0.3em;
}

.info-icon {
    font-size: 1em;
    margin-left: 0.3rem;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    transition: color 0.2s ease;
    line-height: 1;
}
.info-icon:hover, .info-icon:focus-visible {
    outline: none;
}
.info-icon:focus-visible {
    box-shadow: 0 0 0 2px var(--theme-focus-ring-color);
    border-radius: 50%;
}

body.theme-default .custom-tooltip {
    position: fixed;
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--theme-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    z-index: 1050;
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 280px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, visibility 0.18s;
    pointer-events: none;
    margin: 0;
}
body.theme-default .custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
body.theme-default .custom-tooltip::after {
    display: none !important;
}

/* Кнопка "Наверх" */
#scroll-to-top-words-button,
#scroll-to-top-course-words-button {
    position: fixed;
    right: 1.5rem;
    bottom: 5.5rem;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 95;
    font-size: 1.25rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}
#scroll-to-top-words-button.visible,
#scroll-to-top-course-words-button.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#scroll-to-top-words-button .material-symbols-rounded,
#scroll-to-top-course-words-button .material-symbols-rounded {
    font-size: 1.25rem;
    transition: color 0.2s;
}
#scroll-to-top-words-button:hover,
#scroll-to-top-course-words-button:hover {
    transform: translateY(-2px) scale(1.08);
}

/* AI Explanation Panel (common structure) */
.ai-explanation-display {
    /* background-color, border-radius, box-shadow, border будут заданы темой */
}
.ai-explanation-close-button {
    position: absolute; top: 0.25rem; right: 0.25rem; /* Tailwind top-1 right-1 */
    padding: 0.125rem; /* Tailwind p-0.5 */
    /* color, hover color будут заданы темой */
}
.ai-explanation-content { padding: 1rem; } /* Tailwind p-4 */
.ai-main-word-transliteration { font-size: 0.9rem; margin-bottom: 0.6rem; /* color будет задан темой */ }
.ai-main-word-transliteration strong { /* color будет задан темой */ }
.ai-main-explanation { font-size: 0.9rem; margin-bottom: 0.8rem; line-height: 1.65; /* color будет задан темой */ }
.ai-main-explanation h3 { font-size: 1rem; font-weight: 600; margin-top: 0.8rem; margin-bottom: 0.4rem; padding-bottom: 0.2rem; /* color, border-bottom будут заданы темой */ }
.ai-main-explanation h3:first-child { margin-top: 0.2rem; }
.ai-main-explanation p { margin-bottom: 0.6rem; }
.ai-main-explanation code { padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.85em; /* background-color, color будут заданы темой */ }
.ai-main-explanation ul, .ai-main-explanation ol { margin-top: 0.4rem; margin-bottom: 0.6rem; padding-left: 1.25rem; }
.ai-main-explanation li { margin-bottom: 0.25rem; }
.ai-examples-section h4 { font-size: 0.95rem; font-weight: 600; margin-top: 0.8rem; margin-bottom: 0.5rem; padding-bottom: 0.2rem; /* color, border-bottom будут заданы темой */ }
.ai-examples-section h4 .material-symbols-rounded { font-size: 1.1rem; vertical-align: text-bottom; margin-right: 0.25rem; opacity: 0.85; }
.ai-examples-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.ai-example-item { padding-bottom: 0.5rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: flex-start; /* border-bottom будет задан темой */ }
.ai-example-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.ai-example-text-content { flex-grow: 1; margin-right: 0.5rem; }
.ai-example-original { font-weight: 600; margin-bottom: 0.1rem; /* color будет задан темой */ }
.ai-example-transliteration { font-style: italic; opacity: 0.90; margin-bottom: 0.1rem; /* color будет задан темой */ }
.ai-example-translation { /* color будет задан темой */ }
.ai-example-translation .opacity-80 { opacity: 0.8; margin-right: 0.2rem; }
.quick-add-example-btn {
    background: none; border: none; cursor: pointer; padding: 0.2rem; margin-left: 0.3rem;
    line-height: 1; transition: color 0.2s ease, transform 0.1s ease; flex-shrink: 0;
    /* color, hover color, saved color будут заданы темой */
}
.quick-add-example-btn .material-symbols-rounded { font-size: 1.1rem; vertical-align: middle; }
.quick-add-example-btn:active:not(:disabled) { transform: scale(0.95); }
.quick-add-example-btn.loading .material-symbols-rounded { animation: spin 1s linear infinite; }

/* Фидбек */
.feedback-correct { /* color будет задан темой */ }
.feedback-incorrect { /* color будет задан темой */ }
.feedback-highlight { font-weight: bold; /* color будет задан темой */ }
.input-field.border-correct { /* border-color, box-shadow будут заданы темой */ }
.input-field.border-incorrect { /* border-color, box-shadow будут заданы темой */ }

/* Анимации */
@keyframes correctIconAnimation {
    0% { transform: scale(0.5) translateY(5px); opacity: 0; }
    50% { transform: scale(1.2) translateY(-2px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes incorrectIconAnimation {
    0% { transform: translateX(0) scale(0.8); opacity: 0.5; }
    25% { transform: translateX(-3px) scale(1.1) rotate(-3deg); opacity: 1; }
    50% { transform: translateX(3px) scale(1.1) rotate(3deg); opacity: 1; }
    75% { transform: translateX(-2px) scale(1.05) rotate(-2deg); opacity: 1; }
    100% { transform: translateX(0) scale(1) rotate(0); opacity: 1; }
}
.feedback-icon {
    display: inline-block;
    margin-right: 0.25rem;
}
.feedback-icon-correct-animated {
    animation: correctIconAnimation 0.4s ease-out;
}
.feedback-icon-incorrect-animated {
    animation: incorrectIconAnimation 0.5s ease-in-out;
}

/* Грамматика */
.grammar-exercise-type-card {
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    background-color: var(--theme-bg-content);
    border: 1px solid var(--theme-border-color);
}
.grammar-exercise-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    border-color: var(--theme-accent-primary);
}
.grammar-exercise-type-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--theme-text-primary);
}
.grammar-exercise-type-card p {
    font-size: 0.8rem;
    margin-bottom: 0;
    color: var(--theme-text-secondary);
}
.grammar-exercise-type-card .category-arrow {
    font-size: 1.5rem;
    transition: color 0.2s ease;
    color: var(--theme-accent-primary);
}
.grammar-exercise-type-card:hover .category-arrow {
    /* color — только в теме */
    color: var(--theme-accent-primary);
}

.feedback-correct-grammar-bg { padding: 0.75rem; border-radius: 0.375rem; /* background-color, border, color будут заданы темой */ }
.feedback-incorrect-grammar-bg { padding: 0.75rem; border-radius: 0.375rem; /* background-color, border, color будут заданы темой */ }
#grammar-ai-explanation-container { margin-top: 0.75rem; padding: 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; line-height: 1.6; /* background-color, border, color будут заданы темой */ }
#grammar-ai-explanation-container strong { font-weight: 600; /* color будет задан темой */ }
#grammar-ai-explanation-container em { font-style: italic; /* color будет задан темой */ }
#grammar-chat-container { margin-top: 0.75rem; padding: 0.625rem; border-radius: 0.375rem; /* background-color, border будут заданы темой */ }
#grammar-chat-input { font-size: 0.875rem; padding: 0.5rem 0.75rem; }
#grammar-chat-send-btn { padding: 0.5rem; min-width: auto; }
#grammar-chat-send-btn .material-symbols-rounded { font-size: 1.25rem; }
.grammar-correct-incorrect-btn { padding: 0.75rem 1rem; font-size: 0.9rem; }
.grammar-correct-incorrect-btn .material-symbols-rounded { font-size: 1.1rem; margin-right: 0.3rem; }

/* Sentence Scramble */
#sentence-scramble-word-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; border-radius: 0.375rem; min-height: 40px; align-items: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; /* background-color, border будут заданы темой */ }
.scramble-token { padding: 0.375rem 0.75rem; border-radius: 0.375rem; cursor: grab; transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease, filter 0.15s ease; font-size: 0.9rem; user-select: none; -webkit-user-select: none; touch-action: none; /* background-color, border, color будут заданы темой */ }
.scramble-token:hover { /* border-color, background-color для hover будут заданы темой */ }
.scramble-token.dragging { opacity: 0.5; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.3); filter: brightness(1.1); }
.scramble-token.used { opacity: 0.4; cursor: not-allowed; pointer-events: none; /* background-color, border-color будут заданы темой */ }
.scramble-token.placeholder { border: 1px dashed; color: transparent; /* background-color, border-color будут заданы темой */ }
.scramble-answer-area { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; border: 2px dashed; border-radius: 0.375rem; min-height: 40px; align-items: center; transition: border-color 0.2s ease, background-color 0.2s ease; /* background-color, border-color будут заданы темой */ }
.scramble-answer-area.drag-over { /* border-color, background-color для drag-over будут заданы темой */ }
.answer-token { padding: 0.375rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.9rem; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease, filter 0.15s ease; /* background-color, border, color будут заданы темой */ }
.answer-token:hover { /* background-color для hover будет задан темой */ }
.answer-token.dragging { opacity: 0.6; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.3); filter: brightness(1.1); }
.scramble-answer-area.border-correct-grammar-bg, .scramble-answer-area.border-incorrect-grammar-bg { border-style: solid; border-width: 2px; }
body > .scramble-token.dragging { scrollbar-width: none; -ms-overflow-style: none; }
body > .scramble-token.dragging::-webkit-scrollbar { display: none; }
.touch-manipulation { -ms-touch-action: manipulation; touch-action: manipulation; }

/* Анимации и переходы для вкладок, режимов и fade-in */
#study-mode-message,
#study-mode-buttons-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0s linear 0.15s;
    will-change: opacity, visibility;
}
#study-mode-message.fade-in-visible,
#study-mode-buttons-wrapper.fade-in-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease-in-out, visibility 0s linear 0s;
}
.hidden {
    display: none !important;
}
#study-card-input, #study-card-mc, #study-card-audition,
#study-card-dictation, #study-card-phrase-audition, #study-card-phrase-translation {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out 0.1s, visibility 0s linear 0.4s;
    will-change: opacity, visibility;
}
#study-card-input.fade-in-visible,
#study-card-mc.fade-in-visible,
#study-card-audition.fade-in-visible,
#study-card-dictation.fade-in-visible,
#study-card-phrase-audition.fade-in-visible,
#study-card-phrase-translation.fade-in-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out 0.1s, visibility 0s linear 0.1s;
}
.ai-explanation-display {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-in-out,
                max-height 0.4s ease-in-out,
                visibility 0s linear 0.4s,
                margin-top 0.3s ease-in-out,
                margin-bottom 0.3s ease-in-out,
                padding-top 0.3s ease-in-out,
                padding-bottom 0.3s ease-in-out;
    will-change: opacity, max-height, visibility, margin, padding;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.08);
}
.ai-explanation-display.fade-in-visible {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
    transition: opacity 0.3s ease-in-out,
                max-height 0.4s ease-in-out,
                visibility 0s linear 0s,
                margin-top 0.3s ease-in-out,
                margin-bottom 0.3s ease-in-out,
                padding-top 0.3s ease-in-out,
                padding-bottom 0.3s ease-in-out;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.word-item-removing-fade-out {
    opacity: 0;
    max-height: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    border-width: 0px !important;
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
}
@keyframes quickRedrawAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.97);
    background-color: color-mix(in srgb, var(--theme-bg-content) 90%, var(--theme-accent-primary) 10%);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.word-item-resetting-redraw {
    animation: quickRedrawAnimation 0.5s ease-in-out;
}

.course-category-item {
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
}
.course-category-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-color: var(--theme-accent-primary);
}
.course-category-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--theme-accent-primary);
}
.course-category-item p {
    font-size: 0.875rem;
    margin-bottom: 0;
    color: var(--theme-text-secondary);
}
.course-category-item .category-arrow {
    font-size: 1.5rem;
    transition: color 0.2s ease;
    color: var(--theme-accent-primary);
}
.course-category-item-pinned {
    margin-bottom: 1rem;
    /* background, border-color — только в теме */
    background-color: color-mix(in srgb, var(--theme-bg-secondary) 90%, var(--theme-accent-primary) 5%);
    border: 1px solid var(--theme-accent-secondary);
}
.course-category-item-pinned:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    border-color: var(--theme-accent-primary);
}
.course-category-item-pinned h3,
.course-category-item-pinned p,
.course-category-item-pinned .category-arrow {
    /* color — только в теме */
    color: var(--theme-accent-primary);
}
.course-category-item-pinned p {
    color: var(--theme-text-secondary) !important;
}

#app-container {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 1;
    padding: 0;
}
#app-content {
    flex-grow: 1;
    padding: 1rem;
    padding-bottom: 70px;
}
#header-title-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    cursor: pointer;
}
#header-title-logo h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-right: 0.5rem;
}
#header-title-logo .header-logo-en-accent {
    /* color — только в теме */
}
#header-title-logo .app-logo-icon {
    width: 70px;
    height: 70px;
    vertical-align: middle;
    filter: none;
}

.button-large {
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    height: 56px;
    width: 100%;
    display: block;
}

.fade-in-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s !important;
}

.visibility-toggle-button {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.2rem;
    transition: color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.visibility-toggle-button .material-symbols-rounded {
    font-size: 1.1rem;
    vertical-align: middle;
}
.visibility-toggle-button:hover,
.visibility-toggle-button:focus,
.visibility-toggle-button:focus-visible {
    outline: none;
    border-color: var(--theme-accent-primary);
}
.visibility-toggle-button.active .material-symbols-rounded {
    /* цвет будет задан темой */
}

.srs-status-pill-new,
.srs-status-pill-studying,
.srs-status-pill-consolidating,
.srs-status-pill-confident,
.srs-status-pill-learned {
    display: inline-block;
    min-width: 2.2em;
    padding: 0.2em 0.7em;
    border-radius: 1em;
    font-size: 0.95em;
    font-weight: 600;
    text-align: center;
    margin-right: 0.3em;
    margin-bottom: 0.2em;
    vertical-align: middle;
    transition: background-color 0.2s, color 0.2s;
}

.srs-bar-container {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 2px;
    background-color: var(--theme-bg-content);
}
.srs-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease-out;
}
.srs-bar-short-term  { background-color: var(--theme-srs-bar-short); }
.srs-bar-medium-term { background-color: var(--theme-srs-bar-medium); }
.srs-bar-long-term   { background-color: var(--theme-srs-bar-long); }
.srs-bar-learned     { background-color: var(--theme-srs-bar-learned); }

#audition-speaker-button svg.icon {
    width: 48px;
    height: 48px;
}
#dictation-speaker-button svg.icon {
    width: 32px;
    height: 32px;
}

#phrase-audition-speaker-button {
    border-radius: 20px !important;
    overflow: hidden;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #7e57c2, #9c27b0) !important;
    border: none !important;
    box-shadow: 8px 8px 16px var(--neo-shadow-dark, rgba(0, 0, 0, 0.5)),
                -8px -8px 16px var(--neo-shadow-light, rgba(255, 255, 255, 0.1)),
                0 0 25px rgba(126, 87, 194, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

#phrase-audition-speaker-button:hover:not(:disabled) {
    box-shadow: 12px 12px 24px var(--neo-shadow-dark, rgba(0, 0, 0, 0.5)),
                -12px -12px 24px var(--neo-shadow-light, rgba(255, 255, 255, 0.1)),
                0 0 35px rgba(126, 87, 194, 0.6) !important;
    transform: translateY(-3px) scale(1.05) !important;
}

#phrase-audition-speaker-button:active:not(:disabled) {
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark, rgba(0, 0, 0, 0.5)),
                inset -4px -4px 8px var(--neo-shadow-light, rgba(255, 255, 255, 0.1)),
                0 0 20px rgba(126, 87, 194, 0.5) !important;
    transform: translateY(-1px) scale(0.95) !important;
}

.course-category-title-accent {
    color: var(--theme-accent-primary) !important;
}

/* Компонентные стили для debug log */
.log-entry { border-bottom: 1px dashed var(--theme-border-color); }
.log-timestamp { color: var(--theme-text-secondary); }
.log-context { color: var(--theme-accent-primary); }
.log-message { color: var(--theme-text-primary); }
.log-data { background-color: var(--theme-bg-primary); border: 1px solid var(--theme-border-color); border-left: 3px solid var(--theme-accent-secondary); }
.log-data pre { color: var(--theme-text-primary); }
.log-highlight {
    background: #fffbe6;
    color: #222;
    font-weight: bold;
    border-radius: 2px;
    padding: 0 2px;
}

#debug-log-container {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: var(--theme-bg-content, #222);
    color: var(--theme-text-primary, #fff);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.4);
    border-top: 6px solid var(--theme-accent-primary, orange);
    max-height: 80vh;
    min-height: 10px;
    height: 30vh;
    transition: height 0.2s, min-height 0.2s;
    overflow-y: auto;
    resize: none;
    cursor: ns-resize;
}
#debug-log-container:hover {
    border-top-color: var(--theme-accent-secondary, #ffa500);
}
#debug-log-container.debug-log-collapsed {
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    border-top: 6px solid var(--theme-accent-primary, orange);
    pointer-events: auto;
}
#debug-log-container.debug-log-collapsed #debug-ui-header,
#debug-log-container.debug-log-collapsed #debug-log-entries {
    display: none;
}
#debug-log-container.debug-log-expanded {
    min-height: 40px;
    height: 30vh;
    max-height: 80vh;
    cursor: ns-resize;
    pointer-events: auto;
    border-top: 6px solid var(--theme-accent-primary, orange);
}
#debug-log-resizer {
    width: 100%;
    height: 8px;
    cursor: ns-resize;
    background: linear-gradient(to bottom, var(--theme-border-color, #aaa) 40%, transparent 100%);
    border-top: 1px solid var(--theme-border-color, #aaa);
    border-bottom: 1px solid var(--theme-border-color, #aaa);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
#debug-log-resizer:hover {
    background: linear-gradient(to bottom, var(--theme-accent-primary, orange) 40%, transparent 100%);
}
#debug-log-pin-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--theme-accent-primary, orange);
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    opacity: 0.7;
    transition: opacity 0.2s;
}
#debug-close-button {
    position: absolute;
    top: 8px;
    right: 40px;
    background: none;
    border: none;
    color: var(--theme-text-secondary, #a0a0b0);
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
    opacity: 0.7;
    transition: opacity 0.2s;
}
#debug-log-pin-button.pinned {
    color: var(--theme-success-color, #22c55e);
    opacity: 1;
}
#debug-log-pin-button:hover,
#debug-close-button:hover {
    opacity: 1;
}

#debug-ui-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--theme-bg-content, #222);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 6px 12px;
    min-height: 36px;
    cursor: default;
    user-select: none;
}
.debug-log-label {
    min-width: 100px;
    padding-right: 16px;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 15px;
    color: var(--theme-text-primary, #e0e0e0);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
@media (max-width: 500px) {
    .debug-log-label { display: none; }
}
#debug-ui-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}
#debug-filter-input {
    min-width: 120px;
    max-width: 220px;
    flex: 1 1 160px;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--theme-border-color, #383838);
    background: var(--theme-bg-primary, #121212);
    color: var(--theme-text-primary, #e0e0e0);
}
#debug-log-pin-button, #debug-close-button, #debug-clear-button, #debug-copy-button {
    min-width: 32px;
    min-height: 32px;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
    padding: 0;
}
#debug-log-pin-button.pinned {
    color: var(--theme-success-color, #22c55e);
    opacity: 1;
}
#debug-log-pin-button:hover, #debug-close-button:hover, #debug-clear-button:hover, #debug-copy-button:hover {
    opacity: 1;
    background: var(--theme-bg-secondary, #232e3c);
}

#debug-log-container.debug-log-collapsed #debug-ui-header {
    min-height: 8px;
    height: 8px;
    padding: 0;
    cursor: pointer;
    background: var(--theme-accent-primary, orange);
    border-bottom: none;
    user-select: none;
}
#debug-log-container.debug-log-collapsed #debug-ui-header * {
    visibility: hidden;
    pointer-events: none;
}
#debug-log-container.debug-log-collapsed #debug-ui-header:hover {
    background: var(--theme-accent-secondary, #ffa500);
}
#debug-log-container.debug-log-expanded #debug-ui-header {
    min-height: 36px;
    height: auto;
    padding: 6px 12px;
    background: var(--theme-bg-content, #222);
    cursor: ns-resize;
}
#debug-log-container.debug-log-expanded #debug-ui-header * {
    visibility: visible;
    pointer-events: auto;
}

#debug-filter-clear-btn {
    background: none;
    border: none;
    padding: 0 0.3rem;
    margin-left: -2.1rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--theme-text-secondary);
    border-radius: 0.25rem;
    transition: color 0.2s, background 0.2s;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#debug-filter-clear-btn:hover, #debug-filter-clear-btn:focus {
    color: var(--theme-accent-primary);
    background: var(--theme-bg-secondary);
}

/* === Универсальные цветовые правила для всех тем === */

body[class^="theme-"] #header-title-logo {
    color: var(--theme-text-primary);
}
body[class^="theme-"] #header-title-logo .header-logo-en-accent {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] #header-title-logo .app-logo-icon {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .material-symbols-rounded {
    color: var(--theme-text-primary);
}
body[class^="theme-"] .material-symbols-rounded.accent {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .material-symbols-rounded.secondary {
    color: var(--theme-text-secondary);
}
body[class^="theme-"] .floating-action-button {
    background: var(--theme-bg-secondary);
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .floating-action-button:hover, body[class^="theme-"] .floating-action-button:focus-visible {
    background: var(--theme-accent-primary);
    color: var(--theme-button-text-on-accent);
}
body[class^="theme-"] .progress-svg__bar-circle {
    stroke: var(--theme-accent-primary);
}
body[class^="theme-"] .progress-svg__background-circle {
    stroke: var(--theme-border-color);
}
body[class^="theme-"] .progress-svg__text {
    color: #fff !important;
}
body[class^="theme-"] .study-card, body[class^="theme-"] .study-card-input, body[class^="theme-"] .study-card-mc, body[class^="theme-"] .study-card-audition, body[class^="theme-"] .study-card-dictation, body[class^="theme-"] .study-card-phrase-audition, body[class^="theme-"] .study-card-phrase-translation {
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
}
body[class^="theme-"] .input-field, body[class^="theme-"] select.input-field {
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .input-field::placeholder {
    color: var(--theme-text-placeholder);
}
body[class^="theme-"] .modal-bg {
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
}
body[class^="theme-"] .statistic-section, body[class^="theme-"] .add-word-section {
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
}
body[class^="theme-"] .button, body[class^="theme-"] .button-icon-study {
    color: var(--theme-button-text-on-accent);
    background: var(--theme-accent-primary);
}
body[class^="theme-"] .button-secondary {
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .nav-item {
    color: var(--theme-text-secondary);
}
body[class^="theme-"] .nav-item.active, body[class^="theme-"] .nav-item:hover {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .tab {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}
body[class^="theme-"] .tab.active {
    background: var(--theme-accent-primary);
    color: var(--theme-button-text-on-accent);
}
body[class^="theme-"] .pill {
    background: var(--theme-bg-secondary);
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .category-item, body[class^="theme-"] .course-card {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .category-item .category-arrow, body[class^="theme-"] .course-card .category-arrow {
    color: var(--theme-accent-primary);
}
body[class^="theme-"] .mc-option-button {
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .mc-option-button.selected {
    background: var(--theme-accent-primary);
    color: var(--theme-button-text-on-accent);
    border-color: var(--theme-accent-primary);
}
body[class^="theme-"] .ai-explanation-display {
    background: var(--theme-bg-content);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
}
body[class^="theme-"] .srs-bar {
    background: var(--theme-bg-content);
}
body[class^="theme-"] .srs-bar-short-term  { background: var(--theme-srs-bar-short); }
body[class^="theme-"] .srs-bar-medium-term { background: var(--theme-srs-bar-medium); }
body[class^="theme-"] .srs-bar-long-term   { background: var(--theme-srs-bar-long); }
body[class^="theme-"] .srs-bar-learned     { background: var(--theme-srs-bar-learned); }
body[class^="theme-"] .list-item-bg {
    background: var(--theme-bg-secondary);
}
body[class^="theme-"] .secondary-text {
    color: var(--theme-text-secondary);
}
body[class^="theme-"] .accent {
    color: var(--theme-accent-primary);
}

/* === Цвета для режимов обучения (Study Modes) === */
body[class^="theme-"] .mode-mc {
    background: var(--mode-mc-bg) !important;
    color: var(--mode-mc-text) !important;
}
body[class^="theme-"] .mode-dictation {
    background: var(--mode-dictation-bg) !important;
    color: var(--mode-dictation-text) !important;
}
body[class^="theme-"] .mode-audition {
    background: var(--mode-audition-bg) !important;
    color: var(--mode-audition-text) !important;
}
body[class^="theme-"] .mode-phrase-dictation {
    background: var(--mode-phrase-dictation-bg) !important;
    color: var(--mode-phrase-dictation-text) !important;
}
body[class^="theme-"] .mode-phrase-audition {
    background: var(--mode-phrase-audition-bg) !important;
    color: var(--mode-phrase-audition-text) !important;
}
body[class^="theme-"] .mode-phrase-translation {
    background: var(--mode-phrase-translation-bg) !important;
    color: var(--mode-phrase-translation-text) !important;
}
body[class^="theme-"] .mode-input {
    background: var(--mode-input-bg) !important;
    color: var(--mode-input-text) !important;
}
body[class^="theme-"] .mode-translate {
    background: var(--mode-translate-bg) !important;
    color: var(--mode-translate-text) !important;
}

.mode-mc,
.mode-dictation,
.mode-audition,
.mode-phrase-dictation,
.mode-phrase-audition,
.mode-phrase-translation,
.mode-input,
.mode-translate {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.7em 1em;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.2;
}

body[class^="theme-"] .mode-mc:hover,
body[class^="theme-"] .mode-input:hover,
body[class^="theme-"] .mode-audition:hover,
body[class^="theme-"] .mode-dictation:hover,
body[class^="theme-"] .mode-phrase-translation:hover,
body[class^="theme-"] .mode-phrase-audition:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.2s;
}

.life-heart.alive {
    color: var(--life-heart-alive, #ff4d4f);
    opacity: 1;
    transition: color 0.2s, opacity 0.2s;
}
.life-heart.lost {
    color: var(--life-heart-lost, #bbb);
    opacity: 0.5;
    transition: color 0.2s, opacity 0.2s;
}

.srs-segment-short::before {
    background-color: var(--theme-srs-bar-short);
    transition: width 0.4s, background-color 0.4s;
}
.srs-segment-medium::before {
    background-color: var(--theme-srs-bar-medium);
    transition: width 0.4s, background-color 0.4s;
}
.srs-segment-long::before {
    background-color: var(--theme-srs-bar-long);
    transition: width 0.4s, background-color 0.4s;
}
.srs-segment-learned::before {
    background-color: var(--theme-srs-bar-learned);
    transition: width 0.4s, background-color 0.4s;
}

.palette-icon, .palette-btn .material-symbols-rounded {
    color: var(--theme-accent-primary) !important;
}

body[class^="theme-"] .floating-action-button .material-symbols-rounded {
    color: #fff !important;
    background: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    transition: color 0.18s;
}
body[class^="theme-"] .floating-action-button:hover .material-symbols-rounded,
body[class^="theme-"] .floating-action-button:focus-visible .material-symbols-rounded {
    background: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: #fff !important;
}

/* === Плавающие action-кнопки: палитра и настройки === */
body[class^="theme-"] #theme-toggle-button.floating-action-button {
    background-color: var(--theme-accent-primary);
    color: #fff;
    border: none;
    transition: background-color 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.18s;
}
body[class^="theme-"] #theme-toggle-button.floating-action-button:hover,
body[class^="theme-"] #theme-toggle-button.floating-action-button:focus-visible {
    background-color: color-mix(in srgb, var(--theme-accent-primary) 100%, white 10%);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
}

body[class^="theme-"] #floating-settings-button.floating-action-button {
    background: var(--theme-bg-secondary);
    color: #fff;
    border: 1px solid transparent;
    transition: border-color 0.18s, background 0.18s;
}
body[class^="theme-"] #floating-settings-button.floating-action-button .material-symbols-rounded {
    color: #fff !important;
    transition: color 0.18s;
}
body[class^="theme-"] #floating-settings-button.floating-action-button:hover,
body[class^="theme-"] #floating-settings-button.floating-action-button:focus-visible {
    border-color: var(--theme-accent-primary);
    background: var(--theme-bg-secondary);
}

body[class^="theme-"] #theme-toggle-button.floating-action-button .material-symbols-rounded,
body[class^="theme-"] #floating-settings-button.floating-action-button .material-symbols-rounded {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
}

body[class^="theme-"] #theme-toggle-button.floating-action-button .material-symbols-rounded {
    color: #fff !important;
}
body[class^="theme-"] #floating-settings-button.floating-action-button .material-symbols-rounded {
    color: #fff !important;
}

/* === Варианты ответа MC === */
body[class^="theme-"] .mc-option-button {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border: 1.5px solid var(--theme-border-color);
    box-shadow: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body[class^="theme-"] .mc-option-button:hover,
body[class^="theme-"] .mc-option-button:focus-visible {
    background: var(--theme-bg-content);
    border-color: var(--theme-accent-primary);
    color: var(--theme-accent-primary);
    outline: none;
}
body[class^="theme-"] .mc-option-button.selected {
    background: var(--theme-accent-primary);
    color: #fff;
    border-color: var(--theme-accent-primary);
}
body[class^="theme-"] .mc-option-button.correct {
    background: var(--theme-success-bg, #e6f9e6);
    color: var(--theme-success-color, #1a7f37);
    border-color: var(--theme-success-color, #1a7f37);
}
body[class^="theme-"] .mc-option-button.incorrect {
    background: var(--theme-error-bg, #fbeaea);
    color: var(--theme-error-color, #d32f2f);
    border-color: var(--theme-error-color, #d32f2f);
}

/* === Кнопка "Наверх" в списке слов === */
body[class^="theme-"] #scroll-to-top-words-button,
body[class^="theme-"] #scroll-to-top-course-words-button {
    background: var(--theme-bg-secondary);
    color: var(--theme-accent-primary);
    border: 1.5px solid var(--theme-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
body[class^="theme-"] #scroll-to-top-words-button:hover,
body[class^="theme-"] #scroll-to-top-course-words-button:hover {
    background: var(--theme-accent-primary);
    color: #fff;
    border-color: var(--theme-accent-primary);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
    transform: translateY(-2px) scale(1.08);
}
body[class^="theme-"] #scroll-to-top-words-button .material-symbols-rounded,
body[class^="theme-"] #scroll-to-top-course-words-button .material-symbols-rounded {
    color: inherit !important;
}

/* === Кнопка "Добавить в мои слова" (до и после активации) === */
body[class^="theme-"] .quick-add-example-btn:not(.saved-state):not(:disabled) {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    border: 1.5px solid var(--theme-border-color);
    box-shadow: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body[class^="theme-"] .quick-add-example-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
body[class^="theme-"] .quick-add-example-btn.saved-state {
    background: var(--theme-accent-primary);
    color: #fff;
    border-color: var(--theme-accent-primary);
}

/* === Блоки списка слов в "Добавить" === */
body[class^="theme-"] .word-item-element {
    background: var(--theme-bg-secondary);
    border-radius: 0.5rem;
    border: 1.5px solid var(--theme-border-color);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.07);
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.18s, background 0.18s, border-color 0.18s;
}
body[class^="theme-"] .word-item-element:hover {
    background: var(--theme-bg-content);
    border-color: var(--theme-accent-primary);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.13);
}

/* === Подсказка: code-блоки в ai-explanation и custom-tooltip === */
body[class^="theme-"] .ai-main-explanation code,
body[class^="theme-"] .custom-tooltip code {
    background: #000;
    color: var(--theme-accent-primary);
    font-family: inherit;
    border-radius: 0.25rem;
    padding: 0.15em 0.4em;
    font-size: 1em;
    font-weight: 600;
    box-shadow: none;
    border: none;
}

/* === Варианты ответа MC (как в зелёной теме) === */
body.theme-default .mc-option-button {
    border: 1px solid var(--theme-border-color);
    background-color: var(--theme-bg-content);
    color: var(--theme-text-primary);
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.theme-default .mc-option-button:hover:not(:disabled) {
    border-color: var(--theme-accent-primary);
    background-color: color-mix(in srgb, var(--theme-bg-content) 80%, var(--theme-accent-primary) 20%);
    color: var(--theme-accent-primary);
}
body.theme-default .mc-option-button.selected {
    border-color: var(--theme-accent-primary);
    background-color: color-mix(in srgb, var(--theme-bg-content) 70%, var(--theme-accent-primary) 30%);
    color: #fff;
}
body.theme-default .mc-option-button.correct {
    background-color: color-mix(in srgb, var(--theme-success-color) 25%, var(--theme-bg-content) 75%);
    border-color: var(--theme-success-color);
    color: var(--theme-success-color);
}
body.theme-default .mc-option-button.incorrect {
    background-color: color-mix(in srgb, var(--theme-error-color) 20%, var(--theme-bg-content) 80%);
    border-color: var(--theme-error-color);
    color: var(--theme-error-color);
}

/* === Кнопка "Наверх" (как в зелёной теме) === */
body.theme-default #scroll-to-top-words-button,
body.theme-default #scroll-to-top-course-words-button {
    background-color: var(--theme-accent-primary);
    color: var(--theme-button-text-on-accent);
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
}
body.theme-default #scroll-to-top-words-button:hover,
body.theme-default #scroll-to-top-course-words-button:hover {
    background-color: color-mix(in srgb, var(--theme-accent-primary) 85%, black);
    color: #fff;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
    transform: translateY(-2px) scale(1.08);
}
body.theme-default #scroll-to-top-words-button .material-symbols-rounded,
body.theme-default #scroll-to-top-course-words-button .material-symbols-rounded {
    color: inherit !important;
}

/* === Кнопка "Добавить в мои слова" (как в зелёной теме) === */
body.theme-default .quick-add-example-btn:not(.saved-state):not(:disabled) {
    background: var(--theme-bg-content);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-color);
    box-shadow: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.theme-default .quick-add-example-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
body.theme-default .quick-add-example-btn.saved-state {
    background: var(--theme-accent-primary);
    color: #fff;
    border-color: var(--theme-accent-primary);
}

/* === Блоки списка слов в "Добавить" (как в зелёной теме) === */
body.theme-default .word-item-element {
    background: var(--theme-bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border-color);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.07);
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.18s, background 0.18s, border-color 0.18s;
}
body.theme-default .word-item-element:hover {
    background: color-mix(in srgb, var(--theme-bg-secondary) 80%, var(--theme-accent-primary) 20%);
    border-color: var(--theme-accent-primary);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.13);
}

/* === Подсказка: code-блоки (чёрный фон + оранжевый текст, максимально контрастно) === */
body.theme-default .ai-main-explanation code,
body.theme-default .custom-tooltip code {
    background: #000;
    color: var(--theme-accent-primary);
    font-family: 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
    border-radius: 0.25rem;
    padding: 0.15em 0.4em;
    font-size: 0.95em;
    font-weight: 600;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
    border: none;
}

/* === Кнопка 'Сохранить' в 'Добавить' === */
body.theme-default .button-save-word:not(:disabled) {
    background-image: linear-gradient(to bottom, var(--theme-accent-primary) 0%, color-mix(in srgb, var(--theme-accent-primary) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
    border: none;
    transition: background 0.18s, color 0.18s;
}
body.theme-default .button-save-word:disabled {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-color);
}

/* === Кнопка 'Сохранить' в 'Добавить' (как в зелёной теме, невзрачная по умолчанию) === */
body.theme-default .button-save-word {
    border: 2px solid var(--theme-accent-primary);
    color: var(--theme-accent-primary);
    background-color: color-mix(in srgb, var(--theme-bg-content) 90%, var(--theme-accent-primary) 10%);
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.theme-default .button-save-word:hover:not(:disabled):not(.disabled) {
    background-color: color-mix(in srgb, var(--theme-bg-content) 80%, var(--theme-accent-primary) 20%);
}
body.theme-default .button-save-word:active:not(:disabled):not(.disabled) {
    background-color: color-mix(in srgb, var(--theme-bg-content) 70%, var(--theme-accent-primary) 30%);
}
body.theme-default .button-save-word.enabled,
body.theme-default .button-save-word:not(:disabled):not(.disabled):not([disabled]):not([aria-disabled="true"]) {
    background-image: linear-gradient(to bottom, var(--theme-accent-primary) 0%, color-mix(in srgb, var(--theme-accent-primary) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
    border: none;
}
body.theme-default .button-save-word:disabled {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-color);
}

/* === Кнопка 'Сохранить' в 'Добавить' — по умолчанию secondary, акцентная только при .active/.enabled === */
body.theme-default .button-save-word {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-color);
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.theme-default .button-save-word.active,
body.theme-default .button-save-word.enabled {
    background-image: linear-gradient(to bottom, var(--theme-accent-primary) 0%, color-mix(in srgb, var(--theme-accent-primary) 80%, black) 100%);
    color: var(--theme-button-text-on-accent);
    border: none;
}
body.theme-default .button-save-word.active:hover,
body.theme-default .button-save-word.enabled:hover {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-primary) 100%, white 10%) 0%, color-mix(in srgb, var(--theme-accent-primary) 85%, black) 100%);
}
body.theme-default .button-save-word.active:active,
body.theme-default .button-save-word.enabled:active {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-primary) 70%, black) 0%, color-mix(in srgb, var(--theme-accent-primary) 60%, black) 100%);
}
body.theme-default .button-save-word:disabled {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-color);
}

body.theme-default #all-words-list-container .list-item-bg,
body.theme-default #course-words-list-container .list-item-bg {
    background: #18191c;
    border: 1px solid var(--theme-border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
    margin-bottom: 0.65rem;
    padding: 0.85rem 1.1rem 0.7rem 1.1rem;
    display: flex;
    align-items: center;
    transition: background 0.18s, box-shadow 0.18s;
}
body.theme-default #all-words-list-container .list-item-bg:last-child,
body.theme-default #course-words-list-container .list-item-bg:last-child {
    margin-bottom: 0;
}
body.theme-default #all-words-list-container .list-item-text-secondary,
body.theme-default #course-words-list-container .list-item-text-secondary {
    color: #b0b3b8;
}
body.theme-default #all-words-list-container .list-item-accent,
body.theme-default #course-words-list-container .list-item-accent {
    color: var(--theme-accent-primary);
    font-weight: 600;
}
body.theme-default .word-item-element.hidden-word {
    opacity: 0.55;
}

body.theme-default .visibility-toggle-button {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.2rem;
    color: var(--theme-text-secondary);
    transition: color 0.2s, border-color 0.2s;
}
body.theme-default .visibility-toggle-button .material-symbols-rounded {
    font-size: 1.1rem;
    vertical-align: middle;
}
body.theme-default .visibility-toggle-button:hover,
body.theme-default .visibility-toggle-button:focus,
body.theme-default .visibility-toggle-button:focus-visible {
    outline: none;
    color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}
body.theme-default .visibility-toggle-button.active .material-symbols-rounded {
    color: var(--theme-error-color);
}
body.theme-default .word-action-button .material-symbols-rounded {
    font-size: 1.1rem;
    color: var(--theme-text-secondary);
    border-radius: 0.25rem;
    padding: 0.2rem;
    transition: color 0.2s, background 0.2s;
}
body.theme-default .word-action-button:hover .material-symbols-rounded,
body.theme-default .word-action-button:focus .material-symbols-rounded {
    color: var(--theme-accent-primary);
    background: rgba(255, 140, 0, 0.08);
}

body.theme-default .course-card,
body.theme-default .grammar-exercise-type-card {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
body.theme-default .course-card:hover,
body.theme-default .grammar-exercise-type-card:hover {
    background: color-mix(in srgb, var(--theme-bg-secondary) 85%, var(--theme-accent-primary) 15%);
    border-color: var(--theme-accent-primary);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
}
body.theme-default .category-arrow {
    color: var(--theme-text-secondary);
    transition: color 0.18s;
}
body.theme-default .course-card:hover .category-arrow,
body.theme-default .grammar-exercise-type-card:hover .category-arrow {
    color: var(--theme-accent-primary);
}

body.theme-default .course-category-item {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
body.theme-default .course-category-item:hover {
    background: color-mix(in srgb, var(--theme-bg-secondary) 85%, var(--theme-accent-primary) 15%);
    border-color: var(--theme-accent-primary);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
}
body.theme-default .course-category-item .category-arrow {
    color: var(--theme-text-secondary);
    transition: color 0.18s;
}
body.theme-default .course-category-item:hover .category-arrow {
    color: var(--theme-accent-primary);
}

/* === Универсальные адаптивные стили для action-иконок (мобильные + десктоп) === */
.material-symbols-rounded,
.icon,
.info-icon,
.example-indicator-icon {
    font-size: 1.15em; /* чуть крупнее текста, адаптивно */
    min-width: 1em;
    min-height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: color 0.18s, background 0.18s;
    /* width/height не фиксируем! */
}

/* Для кнопок-обёрток — размеры через em/rem, а не px */
.button-icon-study,
.word-action-button,
.visibility-toggle-button {
    width: 2.2em;
    height: 2.2em;
    min-width: 2em;
    min-height: 2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

/* transform: scale только на кнопке, не на иконке! */
.button-icon-study:active,
.word-action-button:active,
.visibility-toggle-button:active {
    transform: scale(0.93);
}
.button-icon-study .material-symbols-rounded,
.word-action-button .material-symbols-rounded,
.visibility-toggle-button .material-symbols-rounded {
    transform: none !important;
}

/* Для info-icon и example-indicator-icon — не уменьшаем размер при нажатии */
.info-icon:active,
.example-indicator-icon:active {
    transform: none;
}

/* === Адаптивная кнопка проверки ответа === */
.button-check-answer {
    min-width: 7em;
    transition: min-width 0.2s, width 0.2s;
    text-align: center;
    white-space: nowrap;
}

/* === Фиксированная адаптивная ширина для кнопок "Проверить" и "Объяснить" === */
.button-row {
    display: flex;
    gap: 1em;
}
.button-row > * {
    flex: 1 1 0;
    min-width: 11em;
    max-width: 11em;
    width: 100%;
    min-height: 2.8em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
    overflow: hidden;
}

/* === Универсальная адаптивная ширина для всех кнопок внутри .button-row === */
.button-row button,
.button-row .button,
.button-row > * {
    flex: 1 1 0;
    min-width: 11em !important;
    max-width: 11em !important;
    width: 100% !important;
    min-height: 2.8em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
    overflow: hidden;
}

/* === Фиксированная адаптивная ширина для кнопок "Проверить" и "Объяснить" вне зависимости от контейнера === */
.button-check-answer,
.grammar-explain-exercise-btn {
    flex-grow: 0 !important;
    min-width: 11em !important;
    max-width: 11em !important;
    width: 100% !important;
    min-height: 2.8em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5em !important;
}

body[class^="theme-"] .button.button-check-answer,
body[class^="theme-"] .button.grammar-explain-exercise-btn {
    flex-grow: 0 !important;
    width: 11em !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 2.8em !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: background 0.18s, color 0.18s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5em !important;
}

.button-check-answer .material-symbols-rounded,
.grammar-explain-exercise-btn .material-symbols-rounded {
    width: 1.2em !important;
    min-width: 1.2em !important;
    max-width: 1.2em !important;
    height: 1.2em !important;
    min-height: 1.2em !important;
    max-height: 1.2em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: content-box !important;
}

.spinner-svg {
    color: var(--theme-accent-primary) !important;
    width: 1.2em !important;
    height: 1.2em !important;
    min-width: 1.2em !important;
    min-height: 1.2em !important;
    max-width: 1.2em !important;
    max-height: 1.2em !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ai-main-explanation h2,
.ai-main-explanation h3,
.ai-main-explanation h4,
.ai-main-explanation h5,
.ai-main-explanation h6 {
    color: var(--theme-accent-primary);
}
.ai-examples-section h2,
.ai-examples-section h3,
.ai-examples-section h4,
.ai-examples-section h5,
.ai-examples-section h6 {
    color: var(--theme-accent-primary);
}

body[class^="theme-"] .visibility-toggle-button .material-symbols-rounded {
    color: var(--theme-text-secondary);
    opacity: 0.55;
}

.ai-examples-section h4 .material-symbols-rounded {
    color: var(--theme-accent-primary);
}

.ai-explanation-content .spinner-svg {
    width: 3.5em !important;
    height: 3.5em !important;
    min-width: 3.5em !important;
    min-height: 3.5em !important;
    max-width: none !important;
    max-height: none !important;
}

#words-list-controls-panel {
    background: var(--theme-bg-elevated, rgba(255,255,255,0.03));
    border-left: 2px solid var(--theme-accent-primary, orange);
    border-radius: 0.75em;
    padding: 1.25em 1em;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);
    position: relative;
    overflow: visible;
}
#words-list-controls-panel::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    border-radius: 6px 0 0 6px;
    background: var(--theme-accent-primary, orange);
    opacity: 0.25;
    pointer-events: none;
}
#words-list-controls-panel select,
#words-list-controls-panel button,
#words-list-controls-panel input[type="checkbox"] {
    transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
#words-list-controls-panel select:focus,
#words-list-controls-panel button:focus,
#words-list-controls-panel input[type="checkbox"]:focus {
    box-shadow: 0 0 0 1px var(--theme-accent-primary, orange);
    border-color: var(--theme-accent-primary, orange);
    outline: none;
    opacity: 0.5;
}

/* === ОСТАВЛЕНЫ ТОЛЬКО РАБОЧИЕ СТИЛИ ДЛЯ ФИЛЬТРОВ === */
.filter-chip {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid #fff !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s;
  overflow: visible;
  position: relative;
}
.filter-chip .chip-icon {
  margin-right: 0.5em;
  font-size: 1.1em;
}
.filter-chip.active,
.filter-chip.open,
.filter-chip:hover {
  background: var(--theme-accent-primary) !important;
  color: #fff !important;
  border-color: var(--theme-accent-primary) !important;
}
.filter-chip:hover {
  background: color-mix(in srgb, var(--theme-accent-primary) 20%, #222 80%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.filter-chip .dropdown-arrow {
  margin-left: 0.5em;
  font-size: 1.1em;
}

/* === Современные фильтры-чипы для панели фильтров === */
.filter-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 2px solid var(--theme-accent-primary);
  background: transparent;
  color: var(--theme-accent-primary);
  padding: 0.4em 1.2em 0.4em 0.9em;
  font-weight: 500;
  font-size: 1em;
  margin-right: 0.5em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.filter-chip .chip-icon {
  margin-right: 0.5em;
  font-size: 1.1em;
}
.filter-chip.active,
.filter-chip.open {
  background: var(--theme-accent-primary);
  color: #fff;
  border-color: var(--theme-accent-primary);
}
.filter-chip:hover {
  background: color-mix(in srgb, var(--theme-accent-primary) 20%, #222 80%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.filter-chip .dropdown-arrow {
  margin-left: 0.5em;
  font-size: 1.1em;
}

/* === КОНЕЦ БЛОКА ФИЛЬТРОВ === */

/* === КРАСИВОЕ ПОЛЕ ПОИСКА === */
.search-input {
    background: var(--theme-bg-content, #232323);
    border: 1.5px solid var(--theme-border-color, #444);
    color: var(--theme-text-primary, #fff);
    border-radius: 1em;
    font-size: 1em;
    padding: 0.9em 1.2em 0.9em 2.5em;
    width: 100%;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.search-input::placeholder {
    color: var(--theme-text-secondary, #aaa);
    opacity: 0.7;
}
.search-input:focus {
    outline: none;
    border-color: var(--theme-accent-primary, #ff8c00);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent-primary, #ff8c00) 40%, transparent 60%);
}

/* === ПЛАВНОЕ ПОЯВЛЕНИЕ ПАНЕЛИ ФИЛЬТРОВ === */
#filters-collapsible {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
  /* overflow: hidden; */
  overflow: visible;
}
#filters-collapsible.expanded {
  max-height: 1000px;
  opacity: 1;
}

/* === Компактные современные фильтры-чипы === */
.filter-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 18px;
  border: 1.5px solid var(--theme-accent-primary);
  background: transparent;
  color: var(--theme-accent-primary);
  padding: 0.18em 0.9em 0.18em 0.7em;
  font-weight: 400;
  font-size: 0.98em;
  margin-right: 0.4em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  min-height: 32px;
  min-width: 0;
}
.filter-chip .chip-icon {
  margin-right: 0.4em;
  font-size: 1em;
}
.filter-chip.active,
.filter-chip.open {
  background: var(--theme-accent-primary);
  color: #fff;
  border-color: var(--theme-accent-primary);
}
.filter-chip:hover {
  background: color-mix(in srgb, var(--theme-accent-primary) 15%, #222 85%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
}
.filter-chip .dropdown-arrow {
  margin-left: 0.4em;
  font-size: 1em;
}

/* === Выпадающие списки фильтров === */
.filter-dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 110%;
  margin-top: 4px;
  background: #232323;
  color: #fff;
  padding: 7px 0;
  z-index: 99999;
  min-width: 160px;
  border-radius: 10px;
  box-shadow: 0 6px 24px 0 rgba(0,0,0,0.18);
  border: 1.2px solid #383838;
  font-size: 0.97em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  transform: translateY(-8px);
}
.filter-chip.open .filter-dropdown {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.filter-dropdown .dropdown-item {
  padding: 7px 18px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 7px;
  margin: 1px 4px;
  transition: background 0.15s, color 0.15s;
  font-size: 0.97em;
}
.filter-dropdown .dropdown-item:hover {
  background: var(--theme-accent-primary, #ff8c00);
  color: #232323;
}
/* === Конец блока фильтров === */

.filter-chip {
  overflow: visible;
  position: relative;
}
.filter-dropdown {
  z-index: 2000;
}

.filter-chip#sort-filter-chip:hover,
.filter-chip#sort-filter-chip.active,
.filter-chip#sort-filter-chip.open {
  background: var(--theme-accent-primary) !important;
  color: #fff !important;
  border-color: var(--theme-accent-primary) !important;
}
.filter-chip#sort-filter-chip .sort-arrow {
  color: #666 !important;
  transition: color 0.18s;
}
.filter-chip#sort-filter-chip.active .sort-arrow,
.filter-chip#sort-filter-chip.open .sort-arrow,
.filter-chip#sort-filter-chip:hover .sort-arrow {
  color: #fff !important;
}

/* === Glow-on-hover button for main app === */
.glow-on-hover {
  width: 100%;
  min-width: 220px;
  height: 60px;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  transition: all .3s ease-in-out;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 2em;
  border: 2px solid #ff8c00;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg,
    #ff0000, #ff7300, #fffb00, #48ff00,
    #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:hover:after {
  background: transparent;
}

.glow-on-hover:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: #111;
  transition: background .2s ease-in-out;
}

.glow-on-hover:active {
  color: #fff;
}

.glow-on-hover:active:after {
  background: transparent;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.srs-segment-fill-full {
    background: var(--theme-accent-color, #4ade80) !important;
    /* Для совместимости с Tailwind и кастомными темами */
    border-radius: 4px;
    transition: background 0.2s;
}

/* === TOAST уведомление для подарка === */
.gift-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--theme-bg-content, #fff);
  color: var(--theme-accent-primary, #3a2e7a);
  border-radius: 18px;
  box-shadow: 0 4px 24px #aee1ff55, 0 1.5px 8px #0002;
  padding: 1.1em 1.7em 1.1em 1.3em;
  display: flex;
  align-items: center;
  gap: 1.1em;
  font-size: 1.08em;
  font-weight: 500;
  animation: gift-toast-fadein 0.5s;
}
.gift-toast__icon {
  font-size: 1.7em;
  margin-right: 0.5em;
}
.gift-toast__text {
  flex: 1;
}
.gift-toast__btn {
  background: linear-gradient(90deg, #fff 0%, #aee1ff 100%);
  color: #3a2e7a;
  border-radius: 14px;
  border: none;
  font-size: 1em;
  font-weight: 600;
  padding: 0.5em 1.5em;
  box-shadow: 0 2px 12px #aee1ff44;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gift-toast__btn:hover {
  background: linear-gradient(90deg, #aee1ff 0%, #fff 100%);
}
@keyframes gift-toast-fadein {
  from { opacity: 0; transform: translateX(-50%) translateY(30px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.gift-toast--fadeout {
  animation: gift-toast-fadeout 0.4s forwards;
}
@keyframes gift-toast-fadeout {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(30px); }
}

.center-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 1.2em 4em;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 1.5em auto;
}
.stat-item {
  font-size: 1em;
  color: var(--theme-text-primary, #fff);
  text-align: center;
}

#generate-example-button {
  box-sizing: border-box;
  background: var(--theme-bg-content);
  color: var(--theme-accent-primary, #ff9800);
  border: 1.5px solid var(--theme-accent-primary, #ff9800);
  border-radius: 0.5em;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
#generate-example-button:hover:not(:disabled):not(.disabled),
#generate-example-button:focus-visible {
  background: color-mix(in srgb, var(--theme-bg-content) 85%, var(--theme-accent-primary, #ff9800) 15%);
  border-color: var(--theme-accent-primary, #ff9800);
  color: var(--theme-button-text-on-accent, #fff);
  box-shadow: none;
  transform: translateY(-2px);
}
#generate-example-button:active:not(:disabled):not(.disabled) {
  background: color-mix(in srgb, var(--theme-bg-content) 70%, var(--theme-accent-primary, #ff9800) 30%);
  color: var(--theme-button-text-on-accent, #fff);
  box-shadow: none;
  transform: translateY(0);
}



/* 🎯 АНИМАЦИЯ ПРОГРЕСС-БАРА ДЛЯ INPUT РЕЖИМА */
.srs-segment-animate-fill {
    animation: srsSegmentFillAnimation 0.6s ease-out;
}

@keyframes srsSegmentFillAnimation {
    0% {
        transform: scale(0.8);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Дополнительный эффект свечения для заполненных сегментов */
.srs-segment-animate-fill.srs-segment-fill-full::before,
.srs-segment-animate-fill.srs-segment-fill-half::before {
    animation: srsSegmentGlowAnimation 0.6s ease-out;
}

@keyframes srsSegmentGlowAnimation {
    0% {
        box-shadow: 0 0 0 rgba(var(--theme-accent-primary-rgb, 59, 130, 246), 0);
    }
    50% {
        box-shadow: 0 0 15px rgba(var(--theme-accent-primary-rgb, 59, 130, 246), 0.6);
    }
    100% {
        box-shadow: 0 0 0 rgba(var(--theme-accent-primary-rgb, 59, 130, 246), 0);
    }
}/* 🎯 
ПРИНУДИТЕЛЬНО ОДИНАКОВЫЕ СТИЛИ ДЛЯ КНОПКИ "ДАЛЕЕ" КАК У "ПРОВЕРИТЬ" */
#input-next-button.button-primary {
    /* Убираем все возможные переопределения */
    transform: none !important;
    transition: all 0.2s ease !important;
    animation: none !important;
}

#input-next-button.button-primary:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

#input-next-button.button-primary:active:not(:disabled):not(.disabled) {
    transform: translateY(0px) !important;
}