/* ============================================ */
/* === СЕРВИС: СОБЕРИ ПРЕДЛОЖЕНИЕ (wo-) === */
/* ============================================ */

.wo-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.wo-screen {
    display: none;
    animation: woFadeIn 0.4s ease;
}

.wo-screen.active {
    display: block;
}

@keyframes woFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.wo-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.wo-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.wo-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.wo-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.wo-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.wo-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.wo-rule:last-child {
    margin-bottom: 0;
}

.wo-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.wo-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.wo-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.wo-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.wo-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.wo-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.wo-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.wo-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.wo-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.wo-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.wo-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.wo-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.wo-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.wo-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.wo-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.wo-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.wo-game-progress strong {
    color: var(--primary);
}

.wo-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.wo-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.wo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Задание */
.wo-task {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    text-align: center;
    margin-bottom: 24px;
}

.wo-task-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.wo-task-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    font-style: italic;
}

/* Зона сборки */
.wo-build-zone {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border: 2px dashed #C7D2FE;
    border-radius: var(--radius);
    padding: 24px;
    min-height: 90px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.wo-build-zone.empty::before {
    content: 'Нажимайте на слова ниже, чтобы собрать предложение';
    color: var(--light);
    font-size: 0.95rem;
    font-style: italic;
}

.wo-word {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    user-select: none;
}

/* Слова в зоне сборки (уже выбраны) */
.wo-build-zone .wo-word {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.wo-build-zone .wo-word:hover {
    background: var(--primary-dark);
}

/* Слова в пуле (внизу, ещё не выбраны) */
.wo-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
    min-height: 60px;
}

.wo-pool .wo-word {
    background: var(--white);
    color: var(--dark);
    border-color: #E2E8F0;
    box-shadow: var(--shadow);
}

.wo-pool .wo-word:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.wo-pool .wo-word.used {
    opacity: 0.3;
    pointer-events: none;
    transform: none;
}

/* Кнопки действий */
.wo-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.wo-actions .btn {
    min-width: 220px;
}

/* Сообщение результата */
.wo-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: woFadeIn 0.3s ease;
}

.wo-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.wo-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.wo-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wo-feedback.correct .wo-feedback-title {
    color: #166534;
}

.wo-feedback.wrong .wo-feedback-title {
    color: #991B1B;
}

.wo-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.wo-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.wo-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.wo-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.wo-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.wo-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.wo-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.wo-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.wo-result-stat {
    text-align: center;
}

.wo-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.wo-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.wo-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.wo-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.wo-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.wo-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .wo-start,
    .wo-result-card {
        padding: 36px 24px;
    }

    .wo-start-title,
    .wo-result-title {
        font-size: 1.6rem;
    }

    .wo-levels-title {
        font-size: 1.4rem;
    }

    .wo-levels-grid {
        grid-template-columns: 1fr;
    }

    .wo-task {
        padding: 24px 20px;
    }

    .wo-task-text {
        font-size: 1.15rem;
    }

    .wo-word {
        font-size: 0.95rem;
        padding: 10px 14px;
    }

    .wo-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wo-actions {
        flex-direction: column;
    }

    .wo-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .wo-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}/* ============================================ */
/* === СЕРВИС: АРТИКЛИ (ar-) === */
/* ============================================ */

.ar-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.ar-screen {
    display: none;
    animation: arFadeIn 0.4s ease;
}

.ar-screen.active {
    display: block;
}

@keyframes arFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.ar-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.ar-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.ar-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.ar-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.ar-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.ar-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.ar-rule:last-child {
    margin-bottom: 0;
}

.ar-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.ar-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.ar-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.ar-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.ar-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.ar-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.ar-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.ar-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.ar-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.ar-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.ar-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.ar-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.ar-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.ar-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.ar-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ar-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.ar-game-progress strong {
    color: var(--primary);
}

.ar-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.ar-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.ar-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Задание */
.ar-task {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
}

.ar-task-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.ar-task-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 16px;
}

.ar-gap {
    display: inline-block;
    min-width: 80px;
    padding: 4px 12px;
    margin: 0 4px;
    border-bottom: 3px solid var(--primary);
    color: var(--primary);
    text-align: center;
    font-weight: 800;
    transition: all 0.3s ease;
}

.ar-gap.filled {
    background: rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    border-bottom-color: transparent;
}

.ar-gap.correct {
    background: #F0FDF4;
    color: #166534;
    border-bottom-color: #22C55E;
}

.ar-gap.wrong {
    background: #FEF2F2;
    color: #991B1B;
    border-bottom-color: #EF4444;
}

.ar-task-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.6;
}

/* Варианты ответа */
.ar-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.ar-option {
    padding: 22px 16px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
}

.ar-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.ar-option:disabled {
    cursor: default;
}

.ar-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.ar-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

.ar-option-empty {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light);
}

/* Обратная связь */
.ar-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: arFadeIn 0.3s ease;
}

.ar-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.ar-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.ar-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ar-feedback.correct .ar-feedback-title {
    color: #166534;
}

.ar-feedback.wrong .ar-feedback-title {
    color: #991B1B;
}

.ar-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.ar-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.ar-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.ar-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.ar-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.ar-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.ar-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.ar-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.ar-result-stat {
    text-align: center;
}

.ar-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.ar-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.ar-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.ar-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.ar-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.ar-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .ar-start,
    .ar-result-card {
        padding: 36px 24px;
    }

    .ar-start-title,
    .ar-result-title {
        font-size: 1.6rem;
    }

    .ar-levels-title {
        font-size: 1.4rem;
    }

    .ar-levels-grid {
        grid-template-columns: 1fr;
    }

    .ar-task {
        padding: 28px 20px;
    }

    .ar-task-text {
        font-size: 1.3rem;
    }

    .ar-gap {
        min-width: 60px;
    }

    .ar-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .ar-option {
        padding: 18px 12px;
        font-size: 1.1rem;
    }

    .ar-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ar-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: ВРЕМЕНА ГЛАГОЛОВ (tn-) === */
/* ============================================ */

.tn-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.tn-screen {
    display: none;
    animation: tnFadeIn 0.4s ease;
}

.tn-screen.active {
    display: block;
}

@keyframes tnFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.tn-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.tn-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.tn-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.tn-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.tn-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.tn-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.tn-rule:last-child {
    margin-bottom: 0;
}

.tn-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.tn-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.tn-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.tn-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.tn-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.tn-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.tn-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.tn-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.tn-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.tn-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.tn-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.tn-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.tn-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.tn-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.tn-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tn-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.tn-game-progress strong {
    color: var(--primary);
}

.tn-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.tn-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.tn-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Задание */
.tn-task {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
}

.tn-task-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.tn-task-text {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 16px;
}

.tn-gap {
    display: inline-block;
    min-width: 120px;
    padding: 4px 12px;
    margin: 0 4px;
    border-bottom: 3px solid var(--primary);
    color: var(--primary);
    text-align: center;
    font-weight: 800;
    transition: all 0.3s ease;
}

.tn-gap.filled {
    background: rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    border-bottom-color: transparent;
}

.tn-gap.correct {
    background: #F0FDF4;
    color: #166534;
    border-bottom-color: #22C55E;
}

.tn-gap.wrong {
    background: #FEF2F2;
    color: #991B1B;
    border-bottom-color: #EF4444;
}

.tn-task-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.6;
}

/* Варианты ответа */
.tn-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.tn-option {
    padding: 20px 16px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
}

.tn-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.tn-option:disabled {
    cursor: default;
}

.tn-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.tn-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.tn-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: tnFadeIn 0.3s ease;
}

.tn-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.tn-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.tn-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tn-feedback.correct .tn-feedback-title {
    color: #166534;
}

.tn-feedback.wrong .tn-feedback-title {
    color: #991B1B;
}

.tn-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.tn-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.tn-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.tn-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.tn-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.tn-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.tn-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.tn-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.tn-result-stat {
    text-align: center;
}

.tn-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.tn-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.tn-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.tn-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.tn-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.tn-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .tn-start,
    .tn-result-card {
        padding: 36px 24px;
    }

    .tn-start-title,
    .tn-result-title {
        font-size: 1.6rem;
    }

    .tn-levels-title {
        font-size: 1.4rem;
    }

    .tn-levels-grid {
        grid-template-columns: 1fr;
    }

    .tn-task {
        padding: 28px 20px;
    }

    .tn-task-text {
        font-size: 1.25rem;
    }

    .tn-gap {
        min-width: 80px;
    }

    .tn-options {
        grid-template-columns: 1fr;
    }

    .tn-option {
        padding: 16px 14px;
        font-size: 1rem;
    }

    .tn-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tn-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: ПРЕДЛОГИ (pp-) === */
/* ============================================ */

.pp-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.pp-screen {
    display: none;
    animation: ppFadeIn 0.4s ease;
}

.pp-screen.active {
    display: block;
}

@keyframes ppFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.pp-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.pp-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.pp-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.pp-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.pp-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.pp-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.pp-rule:last-child {
    margin-bottom: 0;
}

.pp-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.pp-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.pp-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.pp-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.pp-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.pp-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.pp-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.pp-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.pp-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.pp-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.pp-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.pp-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.pp-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.pp-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.pp-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pp-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.pp-game-progress strong {
    color: var(--primary);
}

.pp-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.pp-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.pp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Задание */
.pp-task {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
}

.pp-task-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.pp-task-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 16px;
}

.pp-gap {
    display: inline-block;
    min-width: 70px;
    padding: 4px 12px;
    margin: 0 4px;
    border-bottom: 3px solid var(--primary);
    color: var(--primary);
    text-align: center;
    font-weight: 800;
    transition: all 0.3s ease;
}

.pp-gap.filled {
    background: rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    border-bottom-color: transparent;
}

.pp-gap.correct {
    background: #F0FDF4;
    color: #166534;
    border-bottom-color: #22C55E;
}

.pp-gap.wrong {
    background: #FEF2F2;
    color: #991B1B;
    border-bottom-color: #EF4444;
}

.pp-task-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.6;
}

/* Варианты */
.pp-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.pp-option {
    padding: 22px 16px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
}

.pp-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.pp-option:disabled {
    cursor: default;
}

.pp-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.pp-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.pp-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: ppFadeIn 0.3s ease;
}

.pp-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.pp-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.pp-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-feedback.correct .pp-feedback-title {
    color: #166534;
}

.pp-feedback.wrong .pp-feedback-title {
    color: #991B1B;
}

.pp-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.pp-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.pp-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.pp-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.pp-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.pp-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.pp-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.pp-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.pp-result-stat {
    text-align: center;
}

.pp-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.pp-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.pp-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.pp-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.pp-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.pp-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .pp-start,
    .pp-result-card {
        padding: 36px 24px;
    }

    .pp-start-title,
    .pp-result-title {
        font-size: 1.6rem;
    }

    .pp-levels-title {
        font-size: 1.4rem;
    }

    .pp-levels-grid {
        grid-template-columns: 1fr;
    }

    .pp-task {
        padding: 28px 20px;
    }

    .pp-task-text {
        font-size: 1.2rem;
    }

    .pp-gap {
        min-width: 55px;
    }

    .pp-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-option {
        padding: 18px 12px;
        font-size: 1.05rem;
    }

    .pp-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pp-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: ТРАНСФОРМАЦИИ (tr-) === */
/* ============================================ */

.tr-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.tr-screen {
    display: none;
    animation: trFadeIn 0.4s ease;
}

.tr-screen.active {
    display: block;
}

@keyframes trFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.tr-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.tr-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.tr-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.tr-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.tr-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.tr-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.tr-rule:last-child {
    margin-bottom: 0;
}

.tr-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.tr-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.tr-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.tr-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.tr-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.tr-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.tr-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.tr-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.tr-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.tr-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.tr-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.tr-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.tr-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.tr-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.tr-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tr-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.tr-game-progress strong {
    color: var(--primary);
}

.tr-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.tr-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.tr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Задание */
.tr-task {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    margin-bottom: 20px;
}

.tr-task-type {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(124, 58, 237, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.tr-task-label {
    font-size: 0.95rem;
    color: var(--light);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.tr-source {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 8px;
    font-style: italic;
}

.tr-source-translation {
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.5;
    font-style: italic;
}

/* Варианты трансформаций */
.tr-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.tr-option {
    padding: 20px 24px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
    line-height: 1.5;
}

.tr-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: #FAFAFE;
    transform: translateX(4px);
}

.tr-option:disabled {
    cursor: default;
}

.tr-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
    font-weight: 600;
}

.tr-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.tr-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: trFadeIn 0.3s ease;
}

.tr-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.tr-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.tr-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tr-feedback.correct .tr-feedback-title {
    color: #166534;
}

.tr-feedback.wrong .tr-feedback-title {
    color: #991B1B;
}

.tr-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.tr-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.tr-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.tr-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.tr-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.tr-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.tr-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.tr-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.tr-result-stat {
    text-align: center;
}

.tr-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.tr-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.tr-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.tr-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.tr-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.tr-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .tr-start,
    .tr-result-card {
        padding: 36px 24px;
    }

    .tr-start-title,
    .tr-result-title {
        font-size: 1.6rem;
    }

    .tr-levels-title {
        font-size: 1.4rem;
    }

    .tr-levels-grid {
        grid-template-columns: 1fr;
    }

    .tr-task {
        padding: 24px 20px;
    }

    .tr-source {
        font-size: 1.15rem;
    }

    .tr-option {
        padding: 16px 18px;
        font-size: 0.98rem;
    }

    .tr-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tr-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: КОНСТРУКТОР ВОПРОСОВ (qb-) === */
/* ============================================ */

.qb-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.qb-screen {
    display: none;
    animation: qbFadeIn 0.4s ease;
}

.qb-screen.active {
    display: block;
}

@keyframes qbFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.qb-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.qb-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.qb-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.qb-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.qb-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.qb-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.qb-rule:last-child {
    margin-bottom: 0;
}

.qb-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.qb-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.qb-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.qb-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.qb-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.qb-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.qb-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.qb-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.qb-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.qb-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.qb-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.qb-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.qb-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.qb-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.qb-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.qb-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.qb-game-progress strong {
    color: var(--primary);
}

.qb-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.qb-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.qb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Задание */
.qb-task {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    text-align: center;
    margin-bottom: 20px;
}

.qb-task-type {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(124, 58, 237, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.qb-task-label {
    font-size: 0.9rem;
    color: var(--light);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.qb-source {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 8px;
    font-style: italic;
}

.qb-source-translation {
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.5;
}

/* Зона сборки */
.qb-build-zone {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border: 2px dashed #C7D2FE;
    border-radius: var(--radius);
    padding: 24px;
    min-height: 90px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.qb-build-zone.empty::before {
    content: 'Нажимайте на слова ниже, чтобы собрать вопрос';
    color: var(--light);
    font-size: 0.95rem;
    font-style: italic;
}

.qb-word {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    user-select: none;
}

/* Слова в зоне сборки */
.qb-build-zone .qb-word {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.qb-build-zone .qb-word:hover {
    background: var(--primary-dark);
}

/* Слова в пуле */
.qb-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
    min-height: 60px;
}

.qb-pool .qb-word {
    background: var(--white);
    color: var(--dark);
    border-color: #E2E8F0;
    box-shadow: var(--shadow);
}

.qb-pool .qb-word:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.qb-pool .qb-word.used {
    opacity: 0.3;
    pointer-events: none;
    transform: none;
}

/* Кнопки действий */
.qb-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.qb-actions .btn {
    min-width: 220px;
}

/* Обратная связь */
.qb-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: qbFadeIn 0.3s ease;
}

.qb-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.qb-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.qb-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qb-feedback.correct .qb-feedback-title {
    color: #166534;
}

.qb-feedback.wrong .qb-feedback-title {
    color: #991B1B;
}

.qb-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.qb-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.qb-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.qb-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.qb-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.qb-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.qb-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.qb-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.qb-result-stat {
    text-align: center;
}

.qb-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.qb-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.qb-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.qb-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.qb-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.qb-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .qb-start,
    .qb-result-card {
        padding: 36px 24px;
    }

    .qb-start-title,
    .qb-result-title {
        font-size: 1.6rem;
    }

    .qb-levels-title {
        font-size: 1.4rem;
    }

    .qb-levels-grid {
        grid-template-columns: 1fr;
    }

    .qb-task {
        padding: 24px 20px;
    }

    .qb-source {
        font-size: 1.15rem;
    }

    .qb-word {
        font-size: 0.95rem;
        padding: 10px 14px;
    }

    .qb-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .qb-actions {
        flex-direction: column;
    }

    .qb-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .qb-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === БЛОК: КОМУ ПОДХОДИТ === */
/* ============================================ */
.audience-block {
    padding: 60px 0;
    background: var(--white);
}

.audience-block-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.audience-card-beginner {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.audience-card-beginner:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.audience-card-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 16px;
}

.audience-card-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.audience-card-desc {
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.6;
}

/* ============================================ */
/* === БЛОК: ПОШАГОВЫЙ ПЛАН === */
/* ============================================ */
.roadmap-section {
    padding: 60px 0;
    background: var(--bg);
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}

.roadmap-step {
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    position: relative;
}

.roadmap-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.roadmap-step-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.roadmap-step-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin: 10px 0 14px;
}

.roadmap-step-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.roadmap-step-desc {
    font-size: 0.85rem;
    color: var(--light);
    line-height: 1.5;
}

/* ============================================ */
/* === БЛОК: СОВЕТЫ === */
/* ============================================ */
.tips-section {
    padding: 60px 0;
    background: var(--white);
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tip-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(6, 182, 212, 0.04) 100%);
    border-radius: var(--radius);
    padding: 24px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-left: 4px solid var(--primary);
    transition: all 0.3s ease;
}

.tip-card:hover {
    transform: translateX(4px);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
}

.tip-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.tip-content { flex-grow: 1; }

.tip-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.tip-text {
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.6;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 1024px) {
    .roadmap-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }
}

@media (max-width: 900px) {
    .audience-block-grid { grid-template-columns: 1fr; }
    .tips-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .roadmap-grid { grid-template-columns: 1fr; }
    .audience-block,
    .roadmap-section,
    .tips-section { padding: 40px 0; }
    .tip-card { padding: 20px; }
}

/* ============================================ */
/* === КАРТОЧКИ СЕРВИСОВ В 2 КОЛОНКИ === */
/* ============================================ */
.services-list-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.services-list-2col .service-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px;
    align-items: flex-start;
}

.services-list-2col .service-card-icon {
    font-size: 2.6rem;
    margin-bottom: 14px;
    line-height: 1;
}

.services-list-2col .service-card-content {
    flex-grow: 1;
    width: 100%;
}

.services-list-2col .service-card-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
    line-height: 1.3;
}

.services-list-2col .service-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.services-list-2col .service-card-features {
    margin-bottom: 16px;
    gap: 8px;
}

.services-list-2col .service-card-feature {
    font-size: 0.8rem;
}

.services-list-2col .service-card-action {
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
}

.services-list-2col .service-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-size: 0.95rem;
    border-radius: 10px;
}

/* ============================================ */
/* === КНОПКА В КАРТОЧКАХ ПОПУЛЯРНОГО === */
/* ============================================ */
.popular-card-btn {
    display: block;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--primary);
    color: var(--white);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.popular-card:hover .popular-card-btn {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.popular-section {
    background: linear-gradient(135deg, #F8FAFC 0%, #F0F4FF 100%);
}

/* ============================================ */
/* === ПОПУЛЯРНЫЕ — 3 КАРТОЧКИ В РЯД === */
/* ============================================ */
.popular-section .popular-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 1024px) {
    .popular-section .popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .services-list-2col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .popular-section .popular-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* === СЕРВИС: НАЙДИ ПАРУ (sm-) === */
/* ============================================ */

.sm-wrapper { max-width: 900px; margin: 0 auto; }

.sm-screen { display: none; animation: smFadeIn 0.4s ease; }
.sm-screen.active { display: block; }

@keyframes smFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.sm-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.sm-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.sm-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.sm-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.sm-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.sm-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.sm-rule:last-child { margin-bottom: 0; }
.sm-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.sm-start-btn { max-width: 400px; margin: 0 auto; display: block; }

/* ВЫБОР ТЕМЫ */
.sm-topics-header { text-align: center; margin-bottom: 32px; }
.sm-topics-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.sm-topics-subtitle { font-size: 1.05rem; color: var(--light); }

.sm-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.sm-topic-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.sm-topic-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.sm-topic-icon { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.sm-topic-name { font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
.sm-topic-desc { font-size: 0.85rem; color: var(--light); line-height: 1.4; }

/* ИГРА */
.sm-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sm-game-topic { font-weight: 600; color: var(--dark); font-size: 0.95rem; }
.sm-game-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.sm-game-progress strong { color: var(--primary); }

.sm-game-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.sm-stat-box {
    background: var(--white);
    padding: 12px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-stat-label { font-size: 0.9rem; color: var(--light); font-weight: 500; }
.sm-stat-value { font-size: 1.3rem; font-weight: 700; color: var(--primary); }

/* Игровое поле — 2 колонки */
.sm-game-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.sm-column-title {
    text-align: center;
    margin-bottom: 14px;
    color: var(--dark);
    font-size: 1.05rem;
    font-weight: 700;
}

.sm-words-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sm-word-item {
    background: var(--white);
    padding: 14px 16px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid #E2E8F0;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.4;
    user-select: none;
}

.sm-word-item:hover:not(.sm-disabled):not(.sm-correct) {
    border-color: var(--primary);
    background: #FAFAFE;
    transform: translateX(3px);
}

.sm-word-item.sm-selected {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.sm-word-item.sm-correct {
    background: #10B981;
    color: var(--white);
    border-color: #10B981;
    animation: smPulse 0.5s ease;
    cursor: default;
}

.sm-word-item.sm-incorrect {
    background: #EF4444;
    color: var(--white);
    border-color: #EF4444;
    animation: smShake 0.5s ease;
}

.sm-word-item.sm-disabled {
    pointer-events: none;
}

@keyframes smPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

@keyframes smShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-8px); }
    75%      { transform: translateX(8px); }
}

.sm-game-actions { text-align: center; }

/* РЕЗУЛЬТАТ */
.sm-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.sm-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.sm-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.sm-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.sm-result-stat { text-align: center; }
.sm-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.sm-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.sm-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.sm-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.sm-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.sm-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .sm-start,
    .sm-result-card { padding: 36px 24px; }
    .sm-start-title,
    .sm-result-title { font-size: 1.6rem; }
    .sm-topics-title { font-size: 1.4rem; }

    .sm-topics-grid { grid-template-columns: 1fr; }

    .sm-game-area { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sm-word-item { padding: 10px 10px; font-size: 0.85rem; }
    .sm-column-title { font-size: 0.9rem; }

    .sm-result-stats { grid-template-columns: 1fr; gap: 12px; }
    .sm-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .sm-game-area { grid-template-columns: 1fr 1fr; gap: 8px; }
    .sm-word-item { padding: 8px 8px; font-size: 0.78rem; }
}

/* ============================================ */
/* === СЕРВИС: DO ИЛИ MAKE (dm-) === */
/* ============================================ */

.dm-wrapper { max-width: 900px; margin: 0 auto; }

.dm-screen { display: none; animation: dmFadeIn 0.4s ease; }
.dm-screen.active { display: block; }

@keyframes dmFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.dm-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dm-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.dm-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.dm-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.dm-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.dm-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.dm-rule:last-child { margin-bottom: 0; }
.dm-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.dm-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}
.dm-start-actions .btn { min-width: 240px; }

/* ИЗУЧЕНИЕ */
.dm-learn-header { text-align: center; margin-bottom: 32px; }
.dm-learn-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.dm-learn-subtitle { font-size: 1.05rem; color: var(--light); }

.dm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.dm-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dm-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.dm-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.dm-emoji-big { font-size: 1.7rem; line-height: 1; }
.dm-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}
.dm-card.active .dm-name { color: var(--white); }

/* Панель просмотра */
.dm-viewer {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dm-viewer-placeholder { color: var(--light); font-size: 1.05rem; font-style: italic; }

.dm-viewer-emoji {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 12px;
    animation: dmFloat 2.5s ease-in-out infinite;
}

@keyframes dmFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.dm-viewer-word {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.dm-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 16px;
}

.dm-viewer-meaning {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.5;
    max-width: 540px;
    margin-bottom: 16px;
    text-align: left;
}

.dm-viewer-example {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    max-width: 500px;
    text-align: left;
}

.dm-example-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.dm-example-en {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.dm-example-ru {
    font-size: 0.88rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.4;
}

.dm-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.dm-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.dm-play-btn.playing { background: #10B981; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35); }

.dm-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.dm-learn-actions .btn { min-width: 220px; }

/* КВИЗ */
.dm-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dm-quiz-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.dm-quiz-progress strong { color: var(--primary); }
.dm-quiz-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.dm-quiz-score strong { color: #10B981; }

.dm-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.dm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.dm-quiz-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.dm-quiz-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.dm-quiz-sentence {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 12px;
}

.dm-quiz-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.5;
}

/* Опции */
.dm-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.dm-option {
    padding: 22px 12px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1;
}

.dm-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.dm-option:disabled { cursor: default; }

.dm-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.dm-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.dm-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: dmFadeIn 0.3s ease;
    line-height: 1.6;
}

.dm-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.dm-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.dm-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.dm-feedback.correct .dm-feedback-title { color: #166534; }
.dm-feedback.wrong .dm-feedback-title { color: #991B1B; }

.dm-feedback-text { font-size: 0.98rem; color: var(--dark); }
.dm-feedback-text strong { color: var(--primary); font-weight: 700; }

.dm-next-wrapper { margin-top: 20px; text-align: center; }
.dm-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.dm-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dm-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.dm-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.dm-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.dm-result-stat { text-align: center; }
.dm-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.dm-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.dm-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.dm-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.dm-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.dm-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .dm-start,
    .dm-result-card { padding: 36px 24px; }
    .dm-start-title,
    .dm-result-title { font-size: 1.6rem; }
    .dm-learn-title { font-size: 1.4rem; }

    .dm-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dm-card { padding: 12px 6px; }
    .dm-emoji-big { font-size: 1.4rem; }
    .dm-name { font-size: 0.72rem; }

    .dm-viewer { padding: 28px 20px; }
    .dm-viewer-emoji { font-size: 3.5rem; }
    .dm-viewer-word { font-size: 1.35rem; }

    .dm-quiz-card { padding: 28px 20px; }
    .dm-quiz-sentence { font-size: 1.15rem; }

    .dm-options { grid-template-columns: repeat(2, 1fr); }
    .dm-option { padding: 18px 12px; font-size: 1.05rem; }

    .dm-result-stats { grid-template-columns: 1fr; gap: 12px; }

    .dm-start-actions,
    .dm-learn-actions { flex-direction: column; }
    .dm-start-actions .btn,
    .dm-learn-actions .btn { width: 100%; min-width: 0; }
    .dm-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .dm-grid { grid-template-columns: 1fr; }
    .dm-options { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================ */
/* === СЕРВИС: МОДАЛЬНЫЕ ГЛАГОЛЫ (md-) === */
/* ============================================ */

.md-wrapper { max-width: 900px; margin: 0 auto; }

.md-screen { display: none; animation: mdFadeIn 0.4s ease; }
.md-screen.active { display: block; }

@keyframes mdFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.md-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.md-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.md-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.md-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.md-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.md-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.md-rule:last-child { margin-bottom: 0; }
.md-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.md-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}
.md-start-actions .btn { min-width: 240px; }

/* ИЗУЧЕНИЕ */
.md-learn-header { text-align: center; margin-bottom: 32px; }
.md-learn-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.md-learn-subtitle { font-size: 1.05rem; color: var(--light); }

.md-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.md-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.md-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.md-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.md-emoji-big { font-size: 2rem; line-height: 1; }
.md-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}
.md-card.active .md-name { color: var(--white); }

/* Панель просмотра */
.md-viewer {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.md-viewer-placeholder { color: var(--light); font-size: 1.05rem; font-style: italic; }

.md-viewer-emoji {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 12px;
    animation: mdFloat 2.5s ease-in-out infinite;
}

@keyframes mdFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.md-viewer-word {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.md-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 16px;
}

.md-viewer-meaning {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.5;
    max-width: 540px;
    margin-bottom: 16px;
    text-align: left;
}

.md-viewer-example {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    max-width: 500px;
    text-align: left;
}

.md-example-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.md-example-en {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.md-example-ru {
    font-size: 0.88rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.4;
}

.md-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.md-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.md-play-btn.playing { background: #10B981; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35); }

.md-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.md-learn-actions .btn { min-width: 220px; }

/* КВИЗ */
.md-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.md-quiz-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.md-quiz-progress strong { color: var(--primary); }
.md-quiz-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.md-quiz-score strong { color: #10B981; }

.md-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.md-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.md-quiz-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.md-quiz-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.md-quiz-sentence {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 12px;
}

.md-quiz-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.5;
}

/* Опции */
.md-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.md-option {
    padding: 22px 12px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1;
}

.md-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.md-option:disabled { cursor: default; }

.md-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.md-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.md-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: mdFadeIn 0.3s ease;
    line-height: 1.6;
}

.md-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.md-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.md-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.md-feedback.correct .md-feedback-title { color: #166534; }
.md-feedback.wrong .md-feedback-title { color: #991B1B; }

.md-feedback-text { font-size: 0.98rem; color: var(--dark); }
.md-feedback-text strong { color: var(--primary); font-weight: 700; }

.md-next-wrapper { margin-top: 20px; text-align: center; }
.md-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.md-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.md-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.md-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.md-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.md-result-stat { text-align: center; }
.md-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.md-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.md-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.md-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.md-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.md-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .md-start,
    .md-result-card { padding: 36px 24px; }
    .md-start-title,
    .md-result-title { font-size: 1.6rem; }
    .md-learn-title { font-size: 1.4rem; }

    .md-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .md-card { padding: 14px 8px; }
    .md-emoji-big { font-size: 1.6rem; }
    .md-name { font-size: 0.85rem; }

    .md-viewer { padding: 28px 20px; }
    .md-viewer-emoji { font-size: 3.5rem; }
    .md-viewer-word { font-size: 1.5rem; }

    .md-quiz-card { padding: 28px 20px; }
    .md-quiz-sentence { font-size: 1.15rem; }

    .md-options { grid-template-columns: repeat(2, 1fr); }
    .md-option { padding: 18px 12px; font-size: 1.05rem; }

    .md-result-stats { grid-template-columns: 1fr; gap: 12px; }

    .md-start-actions,
    .md-learn-actions { flex-direction: column; }
    .md-start-actions .btn,
    .md-learn-actions .btn { width: 100%; min-width: 0; }
    .md-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .md-grid { grid-template-columns: repeat(2, 1fr); }
    .md-options { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================ */
/* === СЕРВИС: СТЕПЕНИ СРАВНЕНИЯ (cm-) === */
/* ============================================ */

.cm-wrapper { max-width: 900px; margin: 0 auto; }

.cm-screen { display: none; animation: cmFadeIn 0.4s ease; }
.cm-screen.active { display: block; }

@keyframes cmFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.cm-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cm-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cm-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.cm-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.cm-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.cm-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.cm-rule:last-child { margin-bottom: 0; }
.cm-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.cm-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}
.cm-start-actions .btn { min-width: 240px; }

/* ИЗУЧЕНИЕ */
.cm-learn-header { text-align: center; margin-bottom: 32px; }
.cm-learn-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.cm-learn-subtitle { font-size: 1.05rem; color: var(--light); }

.cm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.cm-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cm-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.cm-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.cm-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}
.cm-card.active .cm-name { color: var(--white); }

.cm-forms {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--light);
    line-height: 1.2;
    transition: color 0.2s ease;
}
.cm-card.active .cm-forms { color: rgba(255, 255, 255, 0.85); }

/* Панель просмотра */
.cm-viewer {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cm-viewer-placeholder { color: var(--light); font-size: 1.05rem; font-style: italic; }

.cm-viewer-base {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.cm-viewer-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 20px;
}

.cm-viewer-forms {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 16px 22px;
    margin-bottom: 16px;
    min-width: 320px;
}

.cm-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
    font-size: 1rem;
}

.cm-form-row:not(:last-child) {
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.cm-form-label {
    color: var(--light);
    font-size: 0.85rem;
    font-weight: 600;
}

.cm-form-value {
    font-weight: 800;
    color: var(--primary);
    font-size: 1.1rem;
}

.cm-viewer-example {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    max-width: 520px;
    text-align: left;
}

.cm-example-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cm-example-en {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.cm-example-ru {
    font-size: 0.88rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.4;
}

.cm-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.cm-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.cm-play-btn.playing { background: #10B981; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35); }

.cm-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cm-learn-actions .btn { min-width: 220px; }

/* КВИЗ */
.cm-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cm-quiz-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cm-quiz-progress strong { color: var(--primary); }
.cm-quiz-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cm-quiz-score strong { color: #10B981; }

.cm-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.cm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.cm-quiz-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.cm-quiz-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.cm-quiz-sentence {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 12px;
}

.cm-quiz-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.5;
}

/* Опции — 2x2, чтобы длинные варианты влезали */
.cm-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.cm-option {
    padding: 20px 16px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.3;
}

.cm-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.cm-option:disabled { cursor: default; }

.cm-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.cm-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.cm-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: cmFadeIn 0.3s ease;
    line-height: 1.6;
}

.cm-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.cm-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.cm-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.cm-feedback.correct .cm-feedback-title { color: #166534; }
.cm-feedback.wrong .cm-feedback-title { color: #991B1B; }

.cm-feedback-text { font-size: 0.98rem; color: var(--dark); }
.cm-feedback-text strong { color: var(--primary); font-weight: 700; }

.cm-next-wrapper { margin-top: 20px; text-align: center; }
.cm-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.cm-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cm-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cm-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.cm-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.cm-result-stat { text-align: center; }
.cm-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.cm-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.cm-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.cm-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.cm-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.cm-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .cm-start,
    .cm-result-card { padding: 36px 24px; }
    .cm-start-title,
    .cm-result-title { font-size: 1.6rem; }
    .cm-learn-title { font-size: 1.4rem; }

    .cm-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cm-card { padding: 12px 6px; }
    .cm-name { font-size: 0.9rem; }
    .cm-forms { font-size: 0.65rem; }

    .cm-viewer { padding: 28px 20px; }
    .cm-viewer-base { font-size: 1.8rem; }
    .cm-viewer-forms { min-width: 0; width: 100%; padding: 12px 16px; }
    .cm-form-row { font-size: 0.9rem; }
    .cm-form-value { font-size: 1rem; }

    .cm-quiz-card { padding: 28px 20px; }
    .cm-quiz-sentence { font-size: 1.15rem; }

    .cm-options { grid-template-columns: 1fr; }
    .cm-option { padding: 16px 12px; font-size: 1rem; }

    .cm-result-stats { grid-template-columns: 1fr; gap: 12px; }

    .cm-start-actions,
    .cm-learn-actions { flex-direction: column; }
    .cm-start-actions .btn,
    .cm-learn-actions .btn { width: 100%; min-width: 0; }
    .cm-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .cm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================ */
/* === СЕРВИС: УСЛОВНЫЕ ПРЕДЛОЖЕНИЯ (cd-) === */
/* ============================================ */

.cd-wrapper { max-width: 900px; margin: 0 auto; }

.cd-screen { display: none; animation: cdFadeIn 0.4s ease; }
.cd-screen.active { display: block; }

@keyframes cdFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.cd-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cd-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cd-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.cd-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.cd-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.cd-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.cd-rule:last-child { margin-bottom: 0; }
.cd-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }
.cd-rule em { color: var(--light); font-style: italic; font-size: 0.95rem; }

.cd-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}
.cd-start-actions .btn { min-width: 240px; }

/* ИЗУЧЕНИЕ */
.cd-learn-header { text-align: center; margin-bottom: 32px; }
.cd-learn-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.cd-learn-subtitle { font-size: 1.05rem; color: var(--light); }

.cd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.cd-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cd-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.cd-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.cd-emoji-big { font-size: 1.8rem; line-height: 1; }
.cd-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}
.cd-card.active .cd-name { color: var(--white); }
.cd-short {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--light);
    line-height: 1.2;
    font-style: italic;
    transition: color 0.2s ease;
}
.cd-card.active .cd-short { color: rgba(255, 255, 255, 0.85); }

/* Панель просмотра */
.cd-viewer {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 36px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cd-viewer-placeholder { color: var(--light); font-size: 1.05rem; font-style: italic; }

.cd-viewer-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    justify-content: center;
}

.cd-viewer-emoji { font-size: 3rem; line-height: 1; }
.cd-viewer-titles { text-align: left; }
.cd-viewer-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 4px;
}
.cd-viewer-short {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    font-style: italic;
}

.cd-viewer-ru {
    font-size: 0.95rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 16px;
}

.cd-viewer-meaning {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.5;
    max-width: 560px;
    margin-bottom: 16px;
    text-align: left;
}

.cd-viewer-example {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    max-width: 520px;
    text-align: left;
}

.cd-example-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cd-example-en {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.cd-example-ru {
    font-size: 0.88rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.4;
}

.cd-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.cd-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.cd-play-btn.playing { background: #10B981; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35); }

.cd-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cd-learn-actions .btn { min-width: 220px; }

/* КВИЗ */
.cd-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cd-quiz-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cd-quiz-progress strong { color: var(--primary); }
.cd-quiz-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cd-quiz-score strong { color: #10B981; }

.cd-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.cd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.cd-quiz-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.cd-quiz-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.cd-quiz-sentence {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 12px;
}

.cd-quiz-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.5;
}

/* Опции */
.cd-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.cd-option {
    padding: 20px 16px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.3;
}

.cd-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.cd-option:disabled { cursor: default; }

.cd-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.cd-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.cd-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: cdFadeIn 0.3s ease;
    line-height: 1.6;
}

.cd-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.cd-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.cd-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.cd-feedback.correct .cd-feedback-title { color: #166534; }
.cd-feedback.wrong .cd-feedback-title { color: #991B1B; }

.cd-feedback-text { font-size: 0.98rem; color: var(--dark); }
.cd-feedback-text strong { color: var(--primary); font-weight: 700; }

.cd-next-wrapper { margin-top: 20px; text-align: center; }
.cd-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.cd-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cd-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cd-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.cd-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.cd-result-stat { text-align: center; }
.cd-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.cd-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.cd-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.cd-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.cd-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.cd-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .cd-start,
    .cd-result-card { padding: 36px 24px; }
    .cd-start-title,
    .cd-result-title { font-size: 1.6rem; }
    .cd-learn-title { font-size: 1.4rem; }

    .cd-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cd-card { padding: 12px 6px; }
    .cd-emoji-big { font-size: 1.5rem; }
    .cd-name { font-size: 0.72rem; }
    .cd-short { font-size: 0.62rem; }

    .cd-viewer { padding: 24px 20px; }
    .cd-viewer-header { flex-direction: column; gap: 12px; }
    .cd-viewer-titles { text-align: center; }
    .cd-viewer-name { font-size: 1.15rem; }
    .cd-viewer-meaning,
    .cd-viewer-example { padding: 12px 16px; }

    .cd-quiz-card { padding: 28px 20px; }
    .cd-quiz-sentence { font-size: 1.15rem; }

    .cd-options { grid-template-columns: 1fr; }
    .cd-option { padding: 16px 12px; font-size: 1rem; }

    .cd-result-stats { grid-template-columns: 1fr; gap: 12px; }

    .cd-start-actions,
    .cd-learn-actions { flex-direction: column; }
    .cd-start-actions .btn,
    .cd-learn-actions .btn { width: 100%; min-width: 0; }
    .cd-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .cd-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================ */
/* === СЕРВИС: СОЮЗЫ И СВЯЗКИ (cj-) === */
/* ============================================ */

.cj-wrapper { max-width: 900px; margin: 0 auto; }

.cj-screen { display: none; animation: cjFadeIn 0.4s ease; }
.cj-screen.active { display: block; }

@keyframes cjFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.cj-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cj-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cj-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.cj-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.cj-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.cj-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.cj-rule:last-child { margin-bottom: 0; }
.cj-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.cj-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}
.cj-start-actions .btn { min-width: 240px; }

/* ИЗУЧЕНИЕ */
.cj-learn-header { text-align: center; margin-bottom: 32px; }
.cj-learn-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.cj-learn-subtitle { font-size: 1.05rem; color: var(--light); }

.cj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.cj-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cj-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.cj-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.cj-emoji-big { font-size: 1.6rem; line-height: 1; }
.cj-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}
.cj-card.active .cj-name { color: var(--white); }

/* Панель просмотра */
.cj-viewer {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cj-viewer-placeholder { color: var(--light); font-size: 1.05rem; font-style: italic; }

.cj-viewer-emoji {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 12px;
    animation: cjFloat 2.5s ease-in-out infinite;
}

@keyframes cjFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.cj-viewer-word {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.cj-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 16px;
}

.cj-viewer-meaning {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.5;
    max-width: 540px;
    margin-bottom: 16px;
    text-align: left;
}

.cj-viewer-example {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    max-width: 500px;
    text-align: left;
}

.cj-example-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cj-example-en {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.cj-example-ru {
    font-size: 0.88rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.4;
}

.cj-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.cj-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.cj-play-btn.playing { background: #10B981; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35); }

.cj-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cj-learn-actions .btn { min-width: 220px; }

/* КВИЗ */
.cj-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cj-quiz-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cj-quiz-progress strong { color: var(--primary); }
.cj-quiz-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cj-quiz-score strong { color: #10B981; }

.cj-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.cj-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.cj-quiz-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.cj-quiz-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.cj-quiz-sentence {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 12px;
}

.cj-quiz-translation {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.5;
}

/* Опции */
.cj-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.cj-option {
    padding: 22px 12px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.2;
}

.cj-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.cj-option:disabled { cursor: default; }

.cj-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.cj-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.cj-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: cjFadeIn 0.3s ease;
    line-height: 1.6;
}

.cj-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.cj-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.cj-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.cj-feedback.correct .cj-feedback-title { color: #166534; }
.cj-feedback.wrong .cj-feedback-title { color: #991B1B; }

.cj-feedback-text { font-size: 0.98rem; color: var(--dark); }
.cj-feedback-text strong { color: var(--primary); font-weight: 700; }

.cj-next-wrapper { margin-top: 20px; text-align: center; }
.cj-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.cj-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cj-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cj-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.cj-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.cj-result-stat { text-align: center; }
.cj-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.cj-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.cj-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.cj-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.cj-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.cj-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .cj-start,
    .cj-result-card { padding: 36px 24px; }
    .cj-start-title,
    .cj-result-title { font-size: 1.6rem; }
    .cj-learn-title { font-size: 1.4rem; }

    .cj-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cj-card { padding: 12px 6px; }
    .cj-emoji-big { font-size: 1.3rem; }
    .cj-name { font-size: 0.72rem; }

    .cj-viewer { padding: 28px 20px; }
    .cj-viewer-emoji { font-size: 3.5rem; }
    .cj-viewer-word { font-size: 1.5rem; }

    .cj-quiz-card { padding: 28px 20px; }
    .cj-quiz-sentence { font-size: 1.15rem; }

    .cj-options { grid-template-columns: repeat(2, 1fr); }
    .cj-option { padding: 18px 12px; font-size: 1rem; }

    .cj-result-stats { grid-template-columns: 1fr; gap: 12px; }

    .cj-start-actions,
    .cj-learn-actions { flex-direction: column; }
    .cj-start-actions .btn,
    .cj-learn-actions .btn { width: 100%; min-width: 0; }
    .cj-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .cj-grid { grid-template-columns: repeat(2, 1fr); }
    .cj-options { grid-template-columns: repeat(2, 1fr); }
}