/* =============================================================
   APP.CSS — единая дизайн-система МоиТесты.рф
   Purple-тема. Подключается первым на всех страницах.
   Специфика стандартных тестов → standard_test_style.css
   ============================================================= */

/* ===== CSS ПЕРЕМЕННЫЕ ===== */
:root {
    /* Основная палитра */
    --primary-purple:          #667eea;
    --primary-purple-dark:     #764ba2;
    --primary-purple-light:    #9ca3ea;
    --primary-purple-lighter:  #c7c7f5;
    --primary-purple-lightest: #ede9fe;
    --secondary-purple:        #764ba2;
    --accent-purple:           #5a52e0;

    /* Градиенты */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --hover-gradient:   linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --light-gradient:   linear-gradient(135deg, #f0f0ff 0%, #ede9fe 100%);

    /* Семантические цвета */
    --success-color: #10B981;
    --error-color:   #EF4444;
    --warning-color: #F59E0B;
    --info-color:    #3B82F6;

    /* Фоны и текст */
    --bg-primary:   #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-tertiary:  #F5F3FF;
    --text-primary:   #1F2937;
    --text-secondary: #6B7280;
    --text-muted:     #9CA3AF;
    --border-color:   #E5E7EB;

    /* Отступы */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;

    /* Типографика */
    --font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    --font-size-sm:       15px;
    --font-size-base:     16px;
    --font-size-lg:       18px;
    --font-size-xl:       20px;
    --font-size-2xl:      22px;
    --line-height-compact: 1.3;
    --line-height-base:    1.5;

    /* Скругления */
    --border-radius-sm: 6px;
    --border-radius:    8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* Тени */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.10);
}

/* ===== RESET ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ ДЛЯ СКРОЛЛА/LAYOUT =====
   Эти правила html/body одинаковы на ВСЕХ страницах (главная, категории,
   тесты, марафон, english). Скролл — нативный, на уровне документа.
   НЕ задаём overflow-y:auto на body (это создаёт второй скролл-контейнер
   и конфликтует с нативным скроллом), НЕ фиксируем height (только min-height,
   чтобы страница росла под контент и скроллилась естественно). */
html {
    overflow-x: clip;
    width: 100%;
    min-height: 100%;
    /* запрет авто-увеличения шрифтов браузером при повороте в горизонталь */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    width: 100%;
    /* min-height:100% (а НЕ 100dvh/100vh) — высота не скачет при сворачивании
       адресной строки мобильного браузера, поэтому скролл без дёрганья.
       Страница растёт под контент естественно. */
    min-height: 100%;
}

/* ===== БАЗОВЫЙ КОНТЕЙНЕР ===== */
/* Используется на страницах профиля, статистики, администрирования.
   min-height НЕ задаём — страница растёт под контент (см. body min-height). */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: var(--spacing-md);
    }
}

/* ===== КАРТОЧКА ===== */
.card {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/* ===== КНОПКИ ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn:hover {
    background: var(--hover-gradient);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
}

.btn-secondary {
    background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
    color: white;
}

.btn-back {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
}

/* ===== ЗАГРУЗЧИК ===== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== МЕНЮ — ЗАГОЛОВОК ===== */
.menu-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
    width: 100%;
}

.menu-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-purple);
    margin-bottom: 10px;
    line-height: 1.3;
}

.menu-description {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767px) {
    .menu-title       { font-size: 20px; }
    .menu-description { font-size: 14px; }
}

/* ===== МЕНЮ-ЭКРАН (english_oge и стандартные тесты) ===== */
.menu-screen {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100%;
}

.menu-screen .card {
    max-width: 720px;
    width: 100%;
    padding: 20px;
    margin: 20px auto;
}

.menu-screen .btn {
    margin-top: 12px;
    width: 100%;
    display: block;
}

.menu-screen .btn:first-of-type {
    margin-top: 0;
}

/* ===== МЕНЮ ТЕСТА — МОБИЛЬ: кнопки как карточки главной страницы ===== */
@media (max-width: 767px) {
    .menu-screen .card {
        margin: 0 0 8px 0 !important;
        padding: 12px !important;
    }

    .menu-screen .menu-header {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }

    .menu-screen .attempts-info {
        margin: 8px 0 12px 0 !important;
    }

    .menu-screen .btn.menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        padding: 20px 15px !important;
        border-radius: 16px !important;
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        margin-top: 10px !important;
        min-height: 100px !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25) !important;
        text-align: center !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    .menu-screen .btn.menu-btn:first-of-type {
        margin-top: 0 !important;
    }

    .menu-screen .btn.menu-btn:active:not(:disabled) {
        transform: translateY(2px) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2) !important;
    }

    .menu-screen .btn.menu-btn:disabled {
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
        opacity: 0.5 !important;
        box-shadow: none !important;
    }
}

/* ===== ИНФОРМАЦИЯ О ПОПЫТКАХ ===== */
.attempts-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: var(--border-radius-lg);
    margin: 15px 0 20px 0;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
    color: white;
}

.attempts-info:hover { transform: translateY(-2px); }

.attempts-icon  { font-size: 32px; flex-shrink: 0; }
.attempts-text  { flex: 1; }

.attempts-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}

.attempts-subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.attempts-info.attempts-available {
    background: var(--primary-gradient);
}

.attempts-info.subscription-active,
.attempts-info.attempts-unlimited {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.attempts-info.limit-reached,
.attempts-info.attempts-blocked {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.attempts-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.attempts-progress-fill {
    height: 100%;
    background: white;
    border-radius: 10px;
    transition: width 0.5s ease;
}

@media (max-width: 767px) {
    .attempts-info      { padding: 12px 15px; gap: 12px; }
    .attempts-icon      { font-size: 28px; }
    .attempts-title     { font-size: 15px; }
    .attempts-subtitle  { font-size: 13px; }
    .attempts-progress-bar { height: 6px; }
}

/* ===== ПРОГРЕСС-БАР (общий) ===== */
.progress-section {
    margin-bottom: 6px;
    flex-shrink: 0;
}

.progress {
    background: var(--border-color);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    background: var(--primary-gradient);
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ===== СТАТУСЫ ВОПРОСОВ (общие) ===== */
.correct-question {
    background: #D1FAE5 !important;
    border-color: var(--success-color) !important;
}

.incorrect-question {
    background: #FEE2E2 !important;
    border-color: var(--error-color) !important;
}

.has-result { pointer-events: none; }

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.question-number {
    font-size: 14px;
    color: var(--text-secondary);
}

.question-status {
    font-size: 14px;
    font-weight: 700;
}

.status-correct   { color: var(--success-color); }
.status-incorrect { color: var(--error-color); }

.passed { color: var(--success-color); }
.failed { color: var(--error-color); }

/* ===== ПОДПИСКА — КНОПКИ ===== */
.btn-subscription-active {
    background: var(--primary-gradient) !important;
    color: white !important;
    font-weight: 600 !important;
}

.btn-subscription-inactive {
    background: var(--text-muted) !important;
    color: white !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ===== SUMMARY (общий, используется в обоих движках) ===== */
.summary-item {
    text-align: center;
}

.summary-value {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-purple);
}

.summary-label {
    display: block;
    font-size: 15px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Защита от pull-to-refresh — ТОЛЬКО на мобильных экранах через медиа-запрос.
   ВАЖНО: свойство задаётся ТОЛЬКО на <html>, НЕ на <html, body> вместе —
   именно комбинация "оба селектора сразу" ломает скролл в Chromium-браузерах
   (Opera/Chrome) — это подтверждено раньше на десктопе (колесо мыши переставало
   работать) и сейчас проявилось на мобильной ширине (тач-скролл/эмуляция мышью
   в Opera) ровно по той же причине — медиа-запрос просто скрывал баг на десктопе,
   а не устранял его. Достаточно повесить overscroll-behavior только на <html>,
   защита от pull-to-refresh продолжает работать, а скролл — нет.
   JS-версия (touchmove + preventDefault, pull_to_refresh_guard.js) тоже
   отключена — она ломала обычный скролл на Android (preventDefault внутри
   touchmove отменяет весь жест целиком на этой платформе). */
@media (max-width: 767px) {
    html {
        overscroll-behavior-y: none;
    }
}