/* Общие стили */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

#app-container {
    background-color: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
    text-align: center;
}

h1, h2, h3 { color: #1c1e21; }
.hidden { display: none; }

/* Кнопки */
.btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin: 8px 4px;
    transition: background-color 0.2s, transform 0.2s;
}
.btn:hover:not(:disabled) { background-color: #0056b3; transform: translateY(-2px); }
.btn:disabled { background-color: #a0a0a0; cursor: not-allowed; }
.btn-secondary { background-color: #6c757d; }
.btn-main { background-color: #28a745; font-weight: bold; }
.btn-link { background: none; color: #007bff; padding: 5px; }

/* Панель курса */
#progress-bar-container { background-color: #e9ecef; border-radius: 8px; overflow: hidden; margin: 15px 0; }
#progress-bar { height: 20px; width: 0%; background-color: #28a745; transition: width 0.5s; }
#module-list .module-item {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
#module-list .module-item:hover { background-color: #e9ecef; }
.module-item.completed { border-left: 5px solid #28a745; }
.module-item.locked { color: #999; border-left: 5px solid #ccc; cursor: not-allowed; }
.module-item .status-icon { font-size: 24px; }
.status-icon.completed { color: #28a745; }

/* Экран модуля */
#lesson-content { text-align: right; direction: rtl; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
#lesson-explanation, #lesson-example { margin: 10px 0; }
.translit-text { font-style: italic; color: #666; direction: ltr; text-align: left; }
.russian-text { direction: ltr; text-align: left; }
.example-box { background-color: #e9f7fd; border: 1px solid #bce8f1; padding: 10px; border-radius: 5px; }

/* Мини-тест */
#mini-quiz-options .option { background-color: #e9ecef; border: 1px solid #ced4da; padding: 12px; margin: 8px 0; border-radius: 8px; cursor: pointer; direction: rtl; text-align: right; }
#mini-quiz-feedback { font-weight: bold; margin-top: 10px; }
.option.correct { background-color: #28a745 !important; color: white; }
.option.incorrect { background-color: #dc3545 !important; color: white; }

/* Экзамен */
.hebrew-text { font-size: 20px; font-weight: bold; direction: rtl; }
#exam-options-container .option { background-color: #e9ecef; border: 1px solid #ced4da; padding: 12px; margin: 8px 0; border-radius: 8px; cursor: pointer; direction: rtl; text-align: right; }