/* ─── Test Page ──────────────────────────────────────────────────────────── */
.test-page {
    max-width: 720px;
    margin: 24px auto;
    padding: 0 16px 80px;
}

.test-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.test-page__title {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 26px);
    margin: 0;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test-progress {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--shape-full);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.test-progress__bar {
    flex: 1;
    height: 8px;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--shape-full);
    overflow: hidden;
}

.test-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-secondary));
    border-radius: var(--shape-full);
    width: 0%;
    transition: width 0.4s var(--motion-emphasized);
}

.test-progress__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    padding-right: 8px;
    min-width: 50px;
    text-align: right;
}

.test-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--shape-2xl);
}

.test-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--shape-2xl);
    padding: 28px 26px;
    box-shadow: var(--elev-2);
    min-height: 320px;
    will-change: transform, opacity;
}

.test-card__question {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 22px;
    color: var(--md-sys-color-on-surface);
}

.test-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.test-option {
    text-align: left;
    padding: 16px 20px;
    border-radius: var(--shape-lg);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font-size: 15px;
    font-weight: 500;
    transition:
        background 0.18s var(--motion-standard),
        transform 0.16s var(--motion-spring),
        box-shadow 0.2s var(--motion-standard);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.test-option:hover { background: var(--md-sys-color-surface-container-high); transform: translateX(2px); }
.test-option:active { transform: scale(0.985); }

.test-option__letter {
    width: 32px; height: 32px;
    border-radius: var(--shape-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    transition: background 0.18s var(--motion-standard), color 0.18s var(--motion-standard);
}

.test-option__text { flex: 1; }

.test-option__check {
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 22px;
}

.test-option.is-correct {
    background: var(--md-sys-color-success);
    color: var(--md-sys-color-success-on);
    animation: pulse-good 0.5s var(--motion-spring);
}
.test-option.is-correct .test-option__letter {
    background: var(--md-sys-color-success-on);
    color: var(--md-sys-color-success);
}
.test-option.is-correct .test-option__check {
    opacity: 1;
    color: var(--md-sys-color-success-on);
}

.test-option.is-wrong {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    animation: shake 0.4s var(--motion-standard);
}
.test-option.is-wrong .test-option__letter {
    background: var(--md-sys-color-on-error-container);
    color: var(--md-sys-color-error-container);
}

.test-option.is-disabled { pointer-events: none; }
.test-option.is-dimmed { opacity: 0.5; }

@keyframes pulse-good {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.test-finish {
    text-align: center;
    padding: 40px 20px;
}
.test-finish__icon {
    font-size: 72px !important;
    color: var(--md-sys-color-primary);
    margin-bottom: 12px;
    display: inline-block;
    animation: bounce-in 0.6s var(--motion-spring);
}
.test-finish__title {
    font-family: var(--font-display);
    font-size: 28px;
    margin: 0 0 8px;
}
.test-finish__score {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 16px;
    margin: 0 0 24px;
}
.test-finish__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes bounce-in {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Generation skeleton (for AI tests) */
.test-skeleton {
    padding: 28px 26px;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--shape-2xl);
    box-shadow: var(--elev-1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 320px;
}
.skeleton-line {
    height: 16px;
    border-radius: var(--shape-xs);
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-container) 0%,
        color-mix(in srgb, var(--md-sys-color-primary-container) 60%, var(--md-sys-color-surface-container)) 50%,
        var(--md-sys-color-surface-container) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}
.skeleton-line--lg { height: 24px; }
.skeleton-line--option { height: 54px; border-radius: var(--shape-lg); }
.skeleton-line--w-80 { width: 80%; }
.skeleton-line--w-60 { width: 60%; }
.skeleton-line--w-90 { width: 90%; }

/* Test mode selector modal */
.choice-grid {
    display: grid;
    gap: 12px;
    margin: 8px 0 12px;
}

.choice-card {
    text-align: left;
    padding: 18px 20px;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--shape-lg);
    display: flex;
    gap: 14px;
    align-items: center;
    transition: background 0.18s var(--motion-standard), transform 0.14s var(--motion-spring);
    width: 100%;
}
.choice-card:hover { background: var(--md-sys-color-surface-container-high); }
.choice-card:active { transform: scale(0.98); }

.choice-card__icon {
    width: 44px; height: 44px;
    border-radius: var(--shape-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    flex-shrink: 0;
}
.choice-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 2px;
}
.choice-card__desc {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
}

@media (max-width: 640px) {
    .test-card { padding: 22px 18px; min-height: 280px; }
    .test-card__question { font-size: 18px; }
    .test-option { padding: 14px 16px; font-size: 14px; }
}