/* ============================================ */
/* === СТИЛИ КАТЕГОРИИ «РАЗГОВОРНЫЙ АНГЛИЙСКИЙ» === */
/* ============================================ */
/* Содержит стили для всех 6 сервисов категории.  */
/* Классы имеют префиксы:                          */
/*   tt-  — Скороговорки                           */
/*   pc-  — Фразы выживания (будет позже)          */
/*   dg-  — Диалоги (будет позже)                  */
/*   sh-  — Shadowing (будет позже)                */
/*   mi-  — Мини-интервью (будет позже)            */
/*   ps-  — Picture story (будет позже)            */
/* ============================================ */

/* ============================================ */
/* === СЕРВИС: СКОРОГОВОРКИ (tt-) === */
/* ============================================ */

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

/* Экраны */
.tt-screen {
    display: none;
    animation: ttFadeIn 0.4s ease;
}

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

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

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

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

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

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

.tt-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;
}

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

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

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

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

/* ============================================ */
/* === ЭКРАН СПИСКА === */
/* ============================================ */
.tt-list-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

.tt-progress-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--bg);
    border-radius: 24px;
    font-weight: 600;
    color: var(--dark);
}

.tt-progress-mini strong {
    color: var(--primary);
    font-size: 1.15rem;
}

.tt-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.tt-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tt-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.tt-card.done {
    background: #F0FDF4;
    border-color: #22C55E;
}

.tt-card.done::after {
    content: '✅';
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.4rem;
}

.tt-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.tt-card-level {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.tt-level-easy   { background: #D1FAE5; color: #065F46; }
.tt-level-medium { background: #FEF3C7; color: #92400E; }
.tt-level-hard   { background: #FEE2E2; color: #991B1B; }

.tt-card-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 10px;
    font-style: italic;
}

.tt-card-translation {
    font-size: 0.9rem;
    color: var(--light);
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
}

.tt-card-btn {
    display: block;
    text-align: center;
    padding: 12px 20px;
    background: var(--primary);
    color: var(--white);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.tt-card-btn:hover {
    background: var(--primary-dark);
}

/* ============================================ */
/* === ЭКРАН ТРЕНИРОВКИ === */
/* ============================================ */
.tt-train-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.tt-train-progress strong {
    color: var(--primary);
}

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

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

.tt-card-train {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 56px 40px;
    text-align: center;
    margin-bottom: 24px;
}

.tt-train-level {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
}

.tt-train-text {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 20px;
    font-style: italic;
}

.tt-train-translation {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    margin-bottom: 8px;
    font-style: italic;
}

.tt-train-tip {
    font-size: 0.9rem;
    color: var(--light);
    background: var(--bg);
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    margin-top: 16px;
}

.tt-audio-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.tt-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.tt-audio-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.tt-audio-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.tt-audio-btn.playing {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.tt-train-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.tt-train-actions .btn {
    min-width: 200px;
}

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

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

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

.tt-result-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
}

.tt-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;
}

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

.tt-result-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.tt-result-actions .btn {
    min-width: 200px;
}

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

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

    .tt-list-title {
        font-size: 1.4rem;
    }

    .tt-train-text {
        font-size: 1.5rem;
    }

    .tt-list-grid {
        grid-template-columns: 1fr;
    }

    .tt-train-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .tt-train-actions,
    .tt-result-actions {
        flex-direction: column;
    }

    .tt-train-actions .btn,
    .tt-result-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .tt-audio-btn {
        flex: 1;
        justify-content: center;
        min-width: 130px;
    }
}

/* ============================================ */
/* === СЕРВИС: ФРАЗЫ ВЫЖИВАНИЯ (pc-) === */
/* ============================================ */

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

.pc-screen {
    display: none;
    animation: pcFadeIn 0.4s ease;
}

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

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

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

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

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

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

.pc-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;
}

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

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

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

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

/* ============================================ */
/* === ЭКРАН ВЫБОРА ТЕМЫ === */
/* ============================================ */
.pc-topics-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

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

.pc-topic-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;
}

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

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

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

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

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

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

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

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

.pc-game-score strong {
    color: #10B981;
}

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

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

.pc-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 48px 40px;
    text-align: center;
    margin-bottom: 24px;
}

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

.pc-question-text {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 8px;
}

.pc-question-hint {
    font-size: 0.95rem;
    color: var(--light);
    font-style: italic;
}

.pc-options {
    display: grid;
    gap: 12px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pc-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;
}

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

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

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

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

    .pc-topics-title {
        font-size: 1.4rem;
    }

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

    .pc-question-text {
        font-size: 1.3rem;
    }

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

    .pc-result-actions {
        flex-direction: column;
    }

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

@media (max-width: 480px) {
    .pc-topics-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* === БЛОК ОБЪЯСНЕНИЯ ОТВЕТА (pc-) === */
/* ============================================ */
.pc-explanation {
    margin-top: 24px;
    padding: 20px 24px;
    border-radius: 10px;
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    text-align: left;
    animation: pcFadeIn 0.3s ease;
}

.pc-explanation.wrong {
    background: #FEF2F2;
    border-left-color: #EF4444;
}

.pc-explanation-title {
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-explanation.wrong .pc-explanation-title {
    color: #991B1B;
}

.pc-explanation-text {
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.6;
}

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

.pc-explanation-text em {
    font-style: italic;
    color: var(--light);
    font-size: 0.9rem;
}

/* Кнопка "Далее" — показывается после ответа */
.pc-next-wrapper {
    margin-top: 24px;
    text-align: center;
    animation: pcFadeIn 0.3s ease;
}

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

/* ============================================ */
/* === СЕРВИС: ДИАЛОГИ-СИМУЛЯТОР (dg-) === */
/* ============================================ */

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

.dg-screen {
    display: none;
    animation: dgFadeIn 0.4s ease;
}

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

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

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

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

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

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

.dg-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;
}

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

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

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

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

/* ============================================ */
/* === ЭКРАН ВЫБОРА СЦЕНАРИЯ === */
/* ============================================ */
.dg-scenarios-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

.dg-scenarios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dg-scenario-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    display: flex;
    gap: 20px;
    align-items: center;
}

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

.dg-scenario-icon {
    font-size: 2.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.dg-scenario-info {
    flex-grow: 1;
}

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

.dg-scenario-desc {
    font-size: 0.9rem;
    color: var(--light);
    line-height: 1.5;
}

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

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

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

.dg-game-scenario {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.95rem;
}

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

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

/* Лента диалога */
.dg-dialogue {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 480px;
    overflow-y: auto;
}

.dg-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: dgMessageIn 0.4s ease;
}

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

.dg-message-them {
    align-self: flex-start;
}

.dg-message-you {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.dg-message-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    background: var(--bg);
}

.dg-message-you .dg-message-avatar {
    background: rgba(124, 58, 237, 0.1);
}

.dg-message-bubble {
    background: var(--bg);
    padding: 12px 16px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.5;
}

.dg-message-you .dg-message-bubble {
    background: var(--primary);
    color: var(--white);
    border-top-left-radius: 14px;
    border-top-right-radius: 4px;
}

.dg-message-translation {
    font-size: 0.82rem;
    color: var(--light);
    margin-top: 4px;
    font-style: italic;
    opacity: 0.85;
}

.dg-message-you .dg-message-translation {
    color: rgba(255, 255, 255, 0.75);
}

/* Вопрос */
.dg-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 20px;
}

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

.dg-question-hint {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.5;
}

/* Опции */
.dg-options {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

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

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

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

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

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

/* Блок объяснения */
.dg-explanation {
    margin-top: 16px;
    padding: 20px 24px;
    border-radius: 10px;
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    text-align: left;
    animation: dgFadeIn 0.3s ease;
}

.dg-explanation.wrong {
    background: #FEF2F2;
    border-left-color: #EF4444;
}

.dg-explanation-title {
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dg-explanation.wrong .dg-explanation-title {
    color: #991B1B;
}

.dg-explanation-text {
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.6;
}

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

.dg-next-wrapper {
    margin-top: 20px;
    text-align: center;
    animation: dgFadeIn 0.3s ease;
}

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

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

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

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

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

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

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

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

.dg-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;
}

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

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

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

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

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

    .dg-scenarios-title {
        font-size: 1.4rem;
    }

    .dg-scenarios-grid {
        grid-template-columns: 1fr;
    }

    .dg-message {
        max-width: 95%;
    }

    .dg-dialogue {
        padding: 20px 16px;
        max-height: 380px;
    }

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

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

/* ============================================ */
/* === СЕРВИС: SHADOWING (sh-) === */
/* ============================================ */

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

.sh-screen {
    display: none;
    animation: shFadeIn 0.4s ease;
}

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

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

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

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

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

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

.sh-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;
}

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

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

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

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

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

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

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

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

.sh-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;
}

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

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

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

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

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

/* ============================================ */
/* === ЭКРАН ТРЕНИРОВКИ === */
/* ============================================ */
.sh-train-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.sh-train-progress strong {
    color: var(--primary);
}

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

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

.sh-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 48px 40px;
    text-align: center;
    margin-bottom: 24px;
}

.sh-phrase-level {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
}

.sh-phrase-text {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 16px;
}

.sh-phrase-translation {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    margin-bottom: 8px;
    font-style: italic;
}

.sh-phrase-tip {
    font-size: 0.9rem;
    color: var(--light);
    background: var(--bg);
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    margin-top: 16px;
}

/* Кнопки озвучки */
.sh-audio-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.sh-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.sh-audio-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.sh-audio-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.sh-audio-btn.playing {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

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

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

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

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

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

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

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

.sh-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;
}

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

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

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

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

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

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

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

    .sh-phrase-text {
        font-size: 1.4rem;
    }

    .sh-repeats {
        flex-wrap: wrap;
    }

    .sh-result-stats {
        grid-template-columns: 1fr;
    }

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

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

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

    .sh-audio-btn {
        flex: 1;
        justify-content: center;
        min-width: 130px;
    }
}

/* ============================================ */
/* === СЕРВИС: МИНИ-ИНТЕРВЬЮ (mi-) === */
/* ============================================ */

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

.mi-screen {
    display: none;
    animation: miFadeIn 0.4s ease;
}

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

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

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

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

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

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

.mi-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;
}

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

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

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

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

/* ============================================ */
/* === ВЫБОР ТЕМЫ === */
/* ============================================ */
.mi-topics-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

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

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

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

.mi-topic-icon {
    font-size: 2.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.mi-topic-info {
    flex-grow: 1;
}

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

.mi-topic-desc {
    font-size: 0.9rem;
    color: var(--light);
    line-height: 1.5;
}

/* ============================================ */
/* === ЭКРАН ВОПРОСА === */
/* ============================================ */
.mi-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.mi-question-progress strong {
    color: var(--primary);
}

.mi-question-topic {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.95rem;
}

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

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

/* Карточка вопроса */
.mi-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 48px 40px;
    text-align: center;
    margin-bottom: 24px;
}

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

.mi-question-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 16px;
}

.mi-question-translation {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 20px;
}

.mi-question-hint {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--dark);
    background: rgba(124, 58, 237, 0.08);
    padding: 10px 18px;
    border-radius: 20px;
    border-left: 3px solid var(--primary);
    text-align: left;
    max-width: 560px;
    line-height: 1.5;
}

.mi-question-hint strong {
    color: var(--primary);
}

/* Кнопка прослушать */
.mi-audio-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.mi-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.mi-audio-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.mi-audio-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.mi-audio-btn.playing {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Кнопка "Показать образец" */
.mi-sample-toggle {
    display: block;
    margin: 0 auto 20px;
    min-width: 280px;
}

/* Блок образца ответа */
.mi-sample {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    border-radius: 10px;
    padding: 24px;
    text-align: left;
    margin-bottom: 24px;
    animation: miFadeIn 0.3s ease;
}

.mi-sample-title {
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mi-sample-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.7;
}

/* Действия */
.mi-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

.mi-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;
}

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

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

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

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

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

    .mi-topics-title {
        font-size: 1.4rem;
    }

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

    .mi-question-text {
        font-size: 1.35rem;
    }

    .mi-result-stats {
        grid-template-columns: 1fr;
    }

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

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

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

/* ============================================ */
/* === СЕРВИС: РАССКАЗ ПО КАРТИНКЕ (ps-) === */
/* ============================================ */

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

.ps-screen {
    display: none;
    animation: psFadeIn 0.4s ease;
}

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

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

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

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

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

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

.ps-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;
}

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

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

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

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

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

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

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

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

.ps-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;
}

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

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

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

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

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

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

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

.ps-card-progress strong {
    color: var(--primary);
}

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

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

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

/* Блок с "картинкой" */
.ps-picture {
    border-radius: var(--radius);
    padding: 60px 40px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow-hover);
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    position: relative;
    overflow: hidden;
}

.ps-picture::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.ps-picture-emoji {
    font-size: 10rem;
    line-height: 1;
    position: relative;
    z-index: 1;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    animation: psEmojiFloat 4s ease-in-out infinite;
}

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

.ps-picture-title {
    position: relative;
    z-index: 1;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark);
    margin-top: 20px;
    line-height: 1.3;
}

/* Блок вопроса */
.ps-question {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 32px;
    margin-bottom: 24px;
}

.ps-question-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
}

.ps-question-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-question-list li {
    font-size: 0.98rem;
    color: var(--dark);
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
}

.ps-question-list li::before {
    content: '▸';
    position: absolute;
    left: 6px;
    color: var(--primary);
    font-weight: 700;
}

/* Кнопка "Показать образец" */
.ps-sample-toggle {
    display: block;
    margin: 0 auto 20px;
    min-width: 280px;
}

.ps-sample {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    border-radius: 10px;
    padding: 24px;
    text-align: left;
    margin-bottom: 24px;
    animation: psFadeIn 0.3s ease;
}

.ps-sample-title {
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-sample-text {
    font-size: 1.05rem;
    color: var(--dark);
    line-height: 1.7;
}

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

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

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

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

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

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

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

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

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

.ps-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;
}

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

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

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

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

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

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

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

    .ps-picture {
        padding: 40px 24px;
    }

    .ps-picture-emoji {
        font-size: 7rem;
    }

    .ps-question {
        padding: 20px 24px;
    }

    .ps-result-stats {
        grid-template-columns: 1fr;
    }

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

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

    .ps-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%);
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 900px) {
    .services-list-2col {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* === ПОПУЛЯРНЫЕ — 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: 700px) {
    .popular-section .popular-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* === СЕРВИС: ВЕЖЛИВЫЕ ФРАЗЫ (pol-) === */
/* ============================================ */

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

.pol-screen {
    display: none;
    animation: polFadeIn 0.4s ease;
}

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

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

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

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

.pol-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;
}

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

.pol-rule:last-child { margin-bottom: 0; }
.pol-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

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

.pol-start-actions .btn { min-width: 240px; }

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

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

.pol-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;
}

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

.pol-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);
}

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

/* Панель просмотра */
.pol-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: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

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

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

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

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

.pol-viewer-example {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    max-width: 500px;
}

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

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

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

.pol-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);
}

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

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

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

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

/* ============================================ */
/* === РЕЖИМ КВИЗА === */
/* ============================================ */
.pol-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

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

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

.pol-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);
}

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

.pol-quiz-emoji {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 16px;
    animation: polFloat 2.5s ease-in-out infinite;
}

.pol-quiz-situation {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.5;
    max-width: 560px;
    margin: 0 auto;
}

/* Варианты */
.pol-options {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.pol-option {
    padding: 18px 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.pol-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;
}

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

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

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

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

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

    .pol-viewer { padding: 28px 20px; }
    .pol-viewer-emoji { font-size: 3.5rem; }
    .pol-viewer-word { font-size: 1.4rem; }
    .pol-viewer-example { padding: 12px 16px; }

    .pol-quiz-card { padding: 28px 20px; }
    .pol-quiz-emoji { font-size: 3.5rem; }
    .pol-quiz-situation { font-size: 1.1rem; }

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

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

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

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

/* ============================================ */
/* === СЕРВИС: ЭМОЦИИ И РЕАКЦИИ (em-) === */
/* ============================================ */

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

.em-screen { display: none; animation: emFadeIn 0.4s ease; }
.em-screen.active { display: block; }

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

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

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

.em-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;
}

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

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

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

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

.em-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;
}

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

.em-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);
}

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

/* Панель просмотра */
.em-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;
}

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

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

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

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

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

.em-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;
}

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

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

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

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

.em-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);
}

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

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

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

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

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

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

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

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

.em-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);
}

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

.em-quiz-emoji {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 16px;
    animation: emFloat 2.5s ease-in-out infinite;
}

.em-quiz-situation {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.5;
    max-width: 560px;
    margin: 0 auto;
}

.em-options {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.em-option {
    padding: 18px 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;
}

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

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

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

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

.em-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: emFadeIn 0.3s ease;
    line-height: 1.6;
}

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

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

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

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

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

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

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

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

.em-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;
}

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

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

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

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

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

    .em-viewer { padding: 28px 20px; }
    .em-viewer-emoji { font-size: 3.5rem; }
    .em-viewer-word { font-size: 1.4rem; }
    .em-viewer-meaning,
    .em-viewer-example { padding: 12px 16px; }

    .em-quiz-card { padding: 28px 20px; }
    .em-quiz-emoji { font-size: 3.5rem; }
    .em-quiz-situation { font-size: 1.05rem; }

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

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

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

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

/* ============================================ */
/* === СЕРВИС: SMALL TALK (st-) === */
/* ============================================ */

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

.st-screen { display: none; animation: stFadeIn 0.4s ease; }
.st-screen.active { display: block; }

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

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

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

.st-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;
}

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

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

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

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

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

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

.st-topic-icon { font-size: 2.8rem; line-height: 1; flex-shrink: 0; }
.st-topic-info { flex-grow: 1; }
.st-topic-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; line-height: 1.3; }
.st-topic-desc { font-size: 0.9rem; color: var(--light); line-height: 1.5; }

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

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

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

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

/* Лента */
.st-dialogue {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 420px;
    overflow-y: auto;
}

.st-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: stFadeIn 0.4s ease;
}

.st-message-them { align-self: flex-start; }
.st-message-you  { align-self: flex-end; flex-direction: row-reverse; }

.st-message-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: var(--bg);
}

.st-message-you .st-message-avatar { background: rgba(124, 58, 237, 0.1); }

.st-message-bubble {
    background: var(--bg);
    padding: 12px 16px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.5;
}

.st-message-you .st-message-bubble {
    background: var(--primary);
    color: var(--white);
    border-top-left-radius: 14px;
    border-top-right-radius: 4px;
}

.st-message-translation {
    font-size: 0.82rem;
    color: var(--light);
    margin-top: 4px;
    font-style: italic;
    opacity: 0.85;
}

.st-message-you .st-message-translation { color: rgba(255, 255, 255, 0.75); }

/* Вопрос */
.st-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 24px;
    margin-bottom: 20px;
}

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

.st-question-hint { font-size: 1rem; color: var(--dark); line-height: 1.5; }

/* Опции */
.st-options { display: grid; gap: 12px; margin-bottom: 16px; }

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

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

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

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

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

/* Объяснение */
.st-explanation {
    margin-top: 16px;
    padding: 20px 24px;
    border-radius: 10px;
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    text-align: left;
    animation: stFadeIn 0.3s ease;
}

.st-explanation.wrong { background: #FEF2F2; border-left-color: #EF4444; }

.st-explanation-title {
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-explanation.wrong .st-explanation-title { color: #991B1B; }

.st-explanation-text {
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.6;
}

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

.st-next-wrapper { margin-top: 20px; text-align: center; animation: stFadeIn 0.3s ease; }
.st-next-wrapper .btn { min-width: 240px; }

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

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

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

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

.st-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;
}

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

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

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

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

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

    .st-message { max-width: 95%; }
    .st-dialogue { padding: 20px 16px; max-height: 340px; }

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

/* ============================================ */
/* === СЕРВИС: ПО ТЕЛЕФОНУ (ph-) === */
/* ============================================ */

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

.ph-screen { display: none; animation: phFadeIn 0.4s ease; }
.ph-screen.active { display: block; }

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

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

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

.ph-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;
}

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

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

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

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

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

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

.ph-topic-icon { font-size: 2.8rem; line-height: 1; flex-shrink: 0; }
.ph-topic-info { flex-grow: 1; }
.ph-topic-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; line-height: 1.3; }
.ph-topic-desc { font-size: 0.9rem; color: var(--light); line-height: 1.5; }

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

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

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

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

/* Лента */
.ph-dialogue {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 420px;
    overflow-y: auto;
}

.ph-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: phFadeIn 0.4s ease;
}

.ph-message-them { align-self: flex-start; }
.ph-message-you  { align-self: flex-end; flex-direction: row-reverse; }

.ph-message-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: var(--bg);
}

.ph-message-you .ph-message-avatar { background: rgba(124, 58, 237, 0.1); }

.ph-message-bubble {
    background: var(--bg);
    padding: 12px 16px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.5;
}

.ph-message-you .ph-message-bubble {
    background: var(--primary);
    color: var(--white);
    border-top-left-radius: 14px;
    border-top-right-radius: 4px;
}

.ph-message-translation {
    font-size: 0.82rem;
    color: var(--light);
    margin-top: 4px;
    font-style: italic;
    opacity: 0.85;
}

.ph-message-you .ph-message-translation { color: rgba(255, 255, 255, 0.75); }

/* Вопрос */
.ph-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 24px;
    margin-bottom: 20px;
}

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

.ph-question-hint { font-size: 1rem; color: var(--dark); line-height: 1.5; }

/* Опции */
.ph-options { display: grid; gap: 12px; margin-bottom: 16px; }

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

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

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

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

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

/* Объяснение */
.ph-explanation {
    margin-top: 16px;
    padding: 20px 24px;
    border-radius: 10px;
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    text-align: left;
    animation: phFadeIn 0.3s ease;
}

.ph-explanation.wrong { background: #FEF2F2; border-left-color: #EF4444; }

.ph-explanation-title {
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ph-explanation.wrong .ph-explanation-title { color: #991B1B; }

.ph-explanation-text {
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.6;
}

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

.ph-next-wrapper { margin-top: 20px; text-align: center; animation: phFadeIn 0.3s ease; }
.ph-next-wrapper .btn { min-width: 240px; }

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

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

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

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

.ph-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;
}

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

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

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

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

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

    .ph-message { max-width: 95%; }
    .ph-dialogue { padding: 20px 16px; max-height: 340px; }

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

/* ============================================ */
/* === СЕРВИС: ФРАЗОВЫЕ ГЛАГОЛЫ (pv-) === */
/* ============================================ */

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

.pv-screen { display: none; animation: pvFadeIn 0.4s ease; }
.pv-screen.active { display: block; }

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

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

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

.pv-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;
}

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

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

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

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

.pv-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;
}

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

.pv-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);
}

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

/* Панель просмотра */
.pv-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;
}

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

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

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

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

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

.pv-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;
}

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

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

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

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

.pv-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);
}

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

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

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

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

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

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

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

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

.pv-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);
}

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

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

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

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

.pv-option {
    padding: 20px 24px;
    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.4;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.pv-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;
}

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

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

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

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

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

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

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

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

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

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

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

/* ============================================ */
/* === СЕРВИС: ВЫРАЖЕНИЕ МНЕНИЯ (op-) === */
/* ============================================ */

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

.op-screen { display: none; animation: opFadeIn 0.4s ease; }
.op-screen.active { display: block; }

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

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

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

.op-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;
}

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

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

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

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

.op-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;
}

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

.op-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);
}

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

/* Панель просмотра */
.op-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;
}

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

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

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

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

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

.op-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;
}

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

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

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

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

.op-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);
}

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

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

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

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

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

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

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

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

.op-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);
}

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

.op-quiz-emoji {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 16px;
    animation: opFloat 2.5s ease-in-out infinite;
}

.op-quiz-situation {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.5;
    max-width: 560px;
    margin: 0 auto;
}

/* Опции */
.op-options {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.op-option {
    padding: 18px 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.op-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;
}

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

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

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

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

    .op-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .op-card { padding: 12px 6px; }
    .op-emoji-big { font-size: 1.6rem; }
    .op-name { font-size: 0.7rem; }

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

    .op-quiz-card { padding: 28px 20px; }
    .op-quiz-emoji { font-size: 3.5rem; }
    .op-quiz-situation { font-size: 1.05rem; }

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

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

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

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