*{margin:0;padding:0;box-sizing:border-box;}

body{
    font-family:'Inter',sans-serif;
    background:#f5f7fa;
    color:#1f2937;
    user-select: none;
    -webkit-user-select: none;
}

.app{
    max-width:1000px;
    margin:40px auto;
    padding:20px;
}

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

.course{
    font-size:13px;
    color:#6b7280;
}

.header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.progress-block{width:220px;}

/* --- Блок счёта --- */
.score-block{
    background:white;
    border-radius:14px;
    padding:10px 20px;
    text-align:center;
    box-shadow:0 2px 12px rgba(0,0,0,0.07);
    min-width:90px;
}

.score-value{
    font-size:26px;
    font-weight:700;
    color:#1f2937;
    line-height:1;
    transition: color .3s;
}

.score-label{
    font-size:11px;
    color:#6b7280;
    margin-top:3px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

/* --- Всплывающий +N над блоком счёта --- */
.score-delta{
    display:block;
    text-align:center;
    font-size:20px;
    font-weight:700;
    pointer-events:none;
    animation: deltaFly 0.7s ease-out forwards;
    margin-top: 4px;
}

.score-delta--pos{ color:#16a34a; }
.score-delta--neg{ color:#dc2626; }

@keyframes deltaFly{
    0%  { opacity:1; transform:translateY(0) scale(1.1); }
    60% { opacity:1; transform:translateY(-10px) scale(1); }
    100%{ opacity:0; transform:translateY(-20px); }
}

.progress-bar{
    height:8px;
    background:#e5e7eb;
    border-radius:6px;
    overflow:hidden;
    margin-bottom:5px;
}

.progress-fill{
    height:100%;
    width:0%;
    background:#ffcc00;
    transition:width .3s ease;
}

.progress-text{
    font-size:12px;
    text-align:right;
}

.card{
    background:white;
    padding:30px;
    border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,0.05);
}

.question-title{
    font-weight:600;
    margin-bottom:15px;
}

.question-description{
    margin-bottom:25px;
    color:#4b5563;
}

.matching{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:30px;
}

.event-item{
    background:#f3f4f6;
    padding:14px;
    border-radius:10px;
}

.answer-slot{
    background:#fff;
    border:2px dashed #d1d5db;
    padding:14px;
    border-radius:10px;
    min-height:50px;
    transition:.2s;
    cursor:pointer;
}

.answer-slot.filled{
    border:2px solid #ffcc00;
    background:#fffbea;
}

.options{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:10px;
    margin-bottom:20px;
}

.option{
    padding:12px;
    background:#ffcc00;
    border-radius:8px;
    cursor:grab;
    text-align:center;
    transition:.2s;
    touch-action: none;
}

.option.selected{
    box-shadow: 0 0 0 3px #1f2937;
    transform: scale(1.03);
    cursor: pointer;
}

.option.used{
    opacity:.4;
    pointer-events:none;
}

.controls{
    display:flex;
    gap:10px;
    margin-bottom:15px;
}

.primary-btn{
    background: linear-gradient(135deg,#ffd700,#ffb300);
    border:none;
    padding:14px 28px;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    color:#1f2937;
    font-size:14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.primary-btn:hover{
    transform: translateY(-2px);
    box-shadow:0 6px 20px rgba(255,204,0,0.4);
}

.primary-btn:active{
    transform: translateY(0);
    box-shadow:0 4px 10px rgba(255,204,0,0.3);
}

.primary-btn:disabled{opacity:.5;}

.ghost-btn{
    background:transparent;
    border:2px solid #d1d5db;
    padding:14px 28px;
    border-radius:12px;
    cursor:pointer;
    transition: all 0.2s;
}

.ghost-btn:hover{
    background:#f3f4f6;
    border-color:#ffcc00;
}

.feedback{
    font-weight:600;
    min-height:24px;
    transition:.3s;
}

.feedback.success{
    color:#16a34a;
}

.feedback.error{
    color:#dc2626;
}

.feedback.fade{
    opacity:0;
}

/* ============================================================
   Селектор тренажёров
   ============================================================ */
.modal--selector{
    width:500px;
    max-width:95%;
    padding:36px 28px;
    text-align:left;
}

.selector-header{
    text-align:center;
    margin-bottom:24px;
}
.selector-header h1{ font-size:24px; margin-bottom:8px; }
.selector-header p { font-size:14px; color:#6b7280; }

.quiz-cards{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.quiz-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:#f8f9fa;
    border:2px solid #e5e7eb;
    border-radius:14px;
    padding:16px 18px;
    cursor:pointer;
    text-align:left;
    width:100%;
    transition:all .2s;
}

.quiz-card:hover{
    border-color:#ffcc00;
    background:#fffbea;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,204,0,0.25);
}

.quiz-card__icon{
    font-size:34px;
    line-height:1;
    flex-shrink:0;
}

.quiz-card__info{ flex:1; }

.quiz-card__title{
    font-size:16px;
    font-weight:700;
    color:#1f2937;
    margin-bottom:3px;
}

.quiz-card__desc{
    font-size:13px;
    color:#6b7280;
}

.quiz-card__count{
    font-size:11px;
    color:#9ca3af;
    margin-top:4px;
}

.quiz-card__arrow{
    font-size:22px;
    color:#d1d5db;
    flex-shrink:0;
    transition:color .2s;
}

.quiz-card:hover .quiz-card__arrow{ color:#ffb300; }

/* Кнопка в шапке — открыть выбор тренажёра */
.selector-btn{
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}

.selector-btn:hover{
    border-color: #ffcc00;
    background: #fffbea;
    color: #1f2937;
}

/* Кнопки в финальном модале */
.modal-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:100;
    opacity:0;
    pointer-events:none;
    transition: opacity 0.3s ease;
}

.modal-overlay.show{
    opacity:1;
    pointer-events:all;
}

.modal{
    background:white;
    padding:40px 30px;
    border-radius:20px;
    text-align:center;
    width:380px;
    max-width:90%;
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
    transform: translateY(-30px);
    transition: transform 0.3s ease;
}

.modal-overlay.show .modal{
    transform: translateY(0);
}

.modal h1{
    font-size:24px;
    margin-bottom:15px;
    color:#1f2937;
}

.modal p{
    font-size:15px;
    margin-bottom:25px;
    color:#4b5563;
}

.hidden{display:none;}

/* Анимация появления слотов и событий */
.event-item, .answer-slot, .option {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeInUp 0.18s forwards;
}


@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Подсветка правильного ответа */
.answer-slot.correct {
    border-color: #16a34a;
    background: #d1fae5;
    animation: pulseGreen 0.3s;
}

/* Подсветка неправильного ответа */
.answer-slot.incorrect {
    border-color: #dc2626;
    background: #fee2e2;
    animation: pulseRed 0.3s;
}

@keyframes pulseGreen {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pulseRed {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================================
   Мобильная адаптация
   ============================================================ */
@media (max-width: 640px) {
    .app { margin: 10px auto; padding: 10px; }
    .header { flex-wrap: wrap; gap: 10px; }
    .header-right { flex-direction: row; gap: 12px; }
    .progress-block { width: 160px; }
    .score-block { padding: 8px 14px; min-width: 70px; }
    .score-value { font-size: 20px; }
    .matching { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
    .card { padding: 16px; }
    .options { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .answer-slot { min-height: 48px; font-size: 14px; }
    .option { padding: 14px 10px; font-size: 14px; }
    .controls { flex-direction: column; }
    .primary-btn, .ghost-btn { width: 100%; text-align: center; }
    .selector-btn { padding: 7px 10px; font-size: 12px; }
    .modal--selector { padding: 24px 16px; }
    .quiz-card { padding: 12px 14px; gap: 12px; }
    .quiz-card__icon { font-size: 26px; }
    .quiz-card__title { font-size: 15px; }
}
/* ============================================================
   Auth pages
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    padding: 20px;
}
.auth-card {
    background: white;
    border-radius: 20px;
    padding: 44px 40px;
    width: 420px;
    max-width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
.auth-logo { font-size: 48px; text-align: center; margin-bottom: 12px; }
.auth-title { font-size: 26px; font-weight: 700; text-align: center; margin-bottom: 6px; color: #1f2937; }
.auth-subtitle { font-size: 14px; color: #6b7280; text-align: center; margin-bottom: 28px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group label { font-size: 13px; font-weight: 600; color: #374151; }
.form-group input { padding: 12px 14px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; font-family: inherit; transition: border-color .2s; outline: none; width: 100%; box-sizing: border-box; }
.form-group input:focus { border-color: #ffcc00; }
.input-disabled { background: #f9fafb; color: #6b7280; }
.auth-btn { background: linear-gradient(135deg,#ffd700,#ffb300); border: none; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; color: #1f2937; margin-top: 6px; transition: transform .2s, box-shadow .2s; text-align: center; display: block; width: 100%; }
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,204,0,0.4); }
.auth-hint { font-size: 12px; color: #9ca3af; text-align: center; margin-top: 18px; }
.auth-messages { margin-bottom: 16px; }
.auth-message { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 6px; }
.auth-message--error { background: #fee2e2; color: #b91c1c; }
.user-info { font-size: 13px; color: #6b7280; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.logout-link, .dashboard-link { color: #6b7280; font-weight: 600; text-decoration: none; font-size: 12px; padding: 4px 10px; border: 1px solid #e5e7eb; border-radius: 6px; transition: all .2s; }
.logout-link:hover, .dashboard-link:hover { border-color: #ffcc00; background: #fffbea; color: #1f2937; }
.quiz-card__progress { font-size: 11px; color: #16a34a; margin-top: 4px; font-weight: 600; }