body { 
    font-family: sans-serif; 
    padding: 20px; 
    max-width: 600px; 
    margin: 0 auto; 
    background-color: #f9f9f9;
}

/* --- ШАПКА ВОЗВРАТА В ХАБ --- */
.hub-back-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-decoration: none;
    margin-bottom: 25px;
    padding: 15px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.hub-back-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hub-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.hub-back-header h1 {
    margin: 0;
    font-size: 22px;
    color: #2c3e50;
}

/***********************************/

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-container h2 {
    margin: 0; /* Убираем отступы у заголовка */
}

/* Переключатель языка */
.lang-switch select {
    font-family: 'Noto Color Emoji', sans-serif;
    background: white;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: auto; /* Сбрасываем 100% ширину из глобальных стилей */
}

/* --- Стили для выбора (Input Groups) --- */
.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.icon {
    font-size: 24px;
    margin-right: 12px;
    min-width: 35px;
    text-align: center;
    cursor: default;
    line-height: 1;
}

select { 
    display: block;
    width: 100%;
    border: none;
    font-size: 16px; 
    cursor: pointer;
    background: transparent;
}
select:focus { outline: none; }


/* --- НОВЫЕ СТИЛИ: ВКЛАДКИ --- */
.tabs-container {
    margin-top: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tabs-header {
    display: flex;
    border-bottom: 1px solid #eee;
}

.tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: #f1f1f1;
    font-size: 16px;
    font-weight: bold;
    color: #7f8c8d;
    cursor: pointer;
    transition: background 0.2s;
}

.tab-btn:hover { background: #e8e8e8; }

.tab-btn.active {
    background: white;
    color: #2c3e50;
    border-bottom: 3px solid #3498db; /* Синяя полоска активной вкладки */
}

.tab-content {
    /* min-height: 200px; Убрали фикс. высоту, пусть тянется */
}

.hidden { display: none; }

/* --- СТИЛИ ДЛЯ СПИСКА ПРЕДЛОЖЕНИЙ --- */
#sentencesList {
    padding-bottom: 10px;
}

.sentence-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.sentence-item:last-child { border-bottom: none; }

.sentence-item:hover {
    background-color: #fcfcfc;
}

/* Класс для активного (проигрываемого) элемента */
.sentence-item.playing {
    background-color: #e3f2fd; /* Светло-голубой фон */
    border-left: 5px solid #3498db;
    padding-left: 15px; /* Компенсация border-left */
}

.text-de {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 5px;
    line-height: 1.4;
}

.text-ru {
    font-size: 14px;
    color: #7f8c8d;
}

.footer {
    margin-top: 40px;      /* Отступ от основного контента */
    text-align: center;    /* Центрируем текст */
    padding-bottom: 20px;  /* Отступ снизу страницы */
}

.divider {
    height: 1px;           /* Толщина линии */
    background-color: #e0e0e0; /* Светло-серый цвет */
    margin-bottom: 20px;   /* Отступ от линии до текста */
    width: 100%;
}

.footer p {
    color: #95a5a6;        /* Серый цвет текста "Feedback:" */
    font-size: 14px;
    margin: 0;
}

.contact-link {
    color: #7f8c8d;        /* Цвет ссылки (чуть темнее текста) */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.2s;
    font-weight: bold;
}

.contact-link:hover {
    color: #3498db;        /* При наведении становится синим (как активная вкладка) */
    text-decoration: underline;
}

/* --- СТИЛИ ДЛЯ ВКЛАДКИ УПРАЖНЕНИЯ --- */

.exercise-card {
    text-align: center;
    padding-top: 20px;
    min-height: 180px; /* Увеличили высоту, так как добавилась строка пользователя */
    
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    transition: transform 0.1s, background-color 0.3s; /* Плавная смена цвета */
    
    border-radius: 12px; /* Скруглим углы, чтобы фон смотрелся красиво */
}

/* Режим записи (Светло-желтый фон) */
.recording-mode {
    background-color: #fff9c4; /* Pastel Yellow */
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

/* Строка пользователя */
.ex-user-text {
    font-size: 16px;
    margin-top: 10px;
    min-height: 24px; /* Резервируем место под одну строку текста */
    font-weight: normal;
    transition: color 0.3s;
}

/* Результаты сравнения */
.match-success {
    color: #27ae60; /* Зеленый */
}

.match-fail {
    color: #c0392b; /* Красный */
    /* text-decoration: line-through;  Можно добавить зачеркивание, если хотите */
}

/* Анимация пульсации микрофона при записи */
.mic-active {
    color: #e74c3c !important;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.exercise-card:active {
    transform: scale(0.98);   /* Карточка чуть "пружинит" при нажатии */
}

.ex-row {
    margin-bottom: 15px;
    padding: 0 10px;
}

/* Строка 1: Контекст (Русский перевод всего предложения) */
.ex-context {
    font-size: 14px;
    color: #95a5a6;
    font-style: italic;
    min-height: 20px;
}

/* Класс для скрытия контекста с сохранением места */
.invisible {
    visibility: hidden; 
}

/* Строка 2: Задание (То, что переводим сейчас) */
.ex-task {
    font-size: 18px;
    color: #2c3e50;
    font-weight: bold;
}

/* Строка 3: Ответ (??? или Немецкий) */
.ex-answer {
    font-size: 20px;
    color: #3498db; /* Синий цвет для немецкого */
    font-weight: bold;
    min-height: 28px;
}

/* Панель кнопок */
.ex-controls {
    display: flex;
    justify-content: center;
    gap: 20px; /* Чуть больше расстояние между кнопками */
    /* margin-top: 20px; */
    align-items: center;
}

.control-btn {
    width: 60px;            /* Увеличили зону клика */
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: transparent; /* ПРОЗРАЧНЫЙ ФОН */
    font-size: 32px;        /* Крупные символы */
    color: #bdc3c7;         /* Светло-серый по умолчанию */
    cursor: pointer;
    transition: color 0.2s, transform 0.1s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;             /* Убираем отступы, чтобы символ был по центру */
}

/* Эффект при наведении (легкий серый круг) */
.control-btn:hover:not(:disabled) {
    color: #7f8c8d;
    background-color: #f7f9f9; /* Едва заметный фон при наведении */
}

.control-btn:active:not(:disabled) {
    transform: scale(0.90);
}

.control-btn:disabled {
    color: #ecf0f1; /* Очень бледный, если неактивна */
    cursor: default;
}

/* Акцентная кнопка для звука (оставляем цветной, или тоже делаем символом?) */
/* Давайте сделаем её тоже прозрачной, но цветной */
#btnSpeak {
    color: #1abc9c; /* Бирюзовый динамик */
    font-size: 36px; /* Чуть крупнее остальных */
}
#btnSpeak:hover { color: #16a085; background-color: transparent; }

/* Стрелки Влево и Вправо - Синие (когда активны) */
#btnPrev:not(:disabled),
#btnNext:not(:disabled) {
    color: #3498db;
}

#btnPrev:not(:disabled):hover,
#btnNext:not(:disabled):hover {
    color: #2980b9; 
    background-color: transparent;
}

/* Кнопка "Микрофон" - Красная (когда заработает) */
#btnMic {
    font-size: 28px;
}

/* --- PROGRESS BAR --- */
.progress-container {
    width: 90%;             /* Ширина полоски относительно экрана */
    max-width: 400px;       /* Ограничение ширины на десктопе */
    height: 6px;            /* Высота полоски */
    background-color: #ecf0f1; /* Серый фон (пустая часть) */
    border-radius: 3px;     /* Закругленные края */
    margin: 20px auto;      /* Центрирование и отступы сверху/снизу */
    overflow: hidden;       /* Обрезаем заливку по краям контейнера */
}

.progress-fill {
    height: 100%;
    width: 0%;              /* Начальная ширина */
    background-color: #3498db; /* Синий цвет прогресса (как кнопки) */
    transition: width 0.3s ease; /* Плавная анимация роста */
    border-radius: 3px;
}

/* Состояние загрузки (желтый) */
.btn-loading {
    color: #f1c40f !important; /* Ярко-желтый */
    transform: scale(1.1);      /* Чуть увеличена */
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.4); /* Желтое свечение */
    cursor: wait;               /* Курсор ожидания */
}

/* Индикация проигрывания */
.btn-speaking {
    color: #2ecc71 !important; /* Ярко-зеленый цвет */
    transform: scale(1.1);     /* Чуть увеличиваем */
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.4); /* Легкое свечение */
}