:root {
    --bg: #f1f7ff;
    --panel: #ffffff;
    --text: #2b3a4a;
    --muted: #4d647d;
    --line: #b9c8d8;
    --line-strong: #8ca0b4;
    --primary: #17a766;
    --primary-dark: #11804d;
    --primary-soft: #e4f8ee;
    --warn: #b06a00;
    --warn-soft: #fff8e9;
    --danger: #c73e52;
    --danger-soft: #fff1f3;
    --success: #148f56;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --shadow-soft: 0 8px 20px rgba(40, 83, 126, 0.08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 10% -20%, #ffffff 0%, transparent 50%),
                radial-gradient(circle at 90% 120%, #eef6ff 0%, transparent 55%),
                var(--bg);
    line-height: 1.45;
}

.app-shell {
    width: min(1120px, calc(100vw - 40px));
    margin: var(--space-4) auto var(--space-5);
}

.top-progress {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-5);
    padding: 4px 0 var(--space-3);
    border-bottom: 1px solid #c3ccd5;
    margin-bottom: var(--space-3);
}

.phase-label,
.progress-text {
    margin: 0;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

.progress-track {
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: #d1deea;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    width: 5%;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #19a664, #31c67e);
    transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen {
    display: none;
}

.screen.active {
    display: block;
    animation: enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel {
    background: var(--panel);
    border-radius: var(--radius-lg);
    border: 1px solid #d3e0ec;
    box-shadow: var(--shadow-soft);
    padding: var(--space-5) 30px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 500;
}

h1,
h2,
h3,
p,
ul,
ol {
    margin-top: 0;
}

h1 {
    font-family: "Montserrat", sans-serif;
    margin-bottom: var(--space-4);
    font-size: clamp(22px, 1.9vw, 36px);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-weight: 700;
}

h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    margin-bottom: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 650;
}

.card h2,
.notice h3,
.answer-builder-wrap h2,
.question {
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    margin-bottom: 8px;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 650;
}

.card h2,
.notice h3,
.answer-builder-wrap h2 {
    font-size: 18px;
    border-bottom: 1px solid #cdced3;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.card,
.notice,
.answer-builder-wrap {
    border-radius: var(--radius-md);
    border: 1px solid var(--line-strong);
    padding: var(--space-3) 22px;
    margin-bottom: var(--space-3);
    background: #ffffff;
}

.card.compact {
    margin-bottom: 0;
}

.card ul,
.card ol,
.notice ul,
.notice ol {
    margin-bottom: 0;
    padding-left: 24px;
}

.card li,
.notice li {
    margin-bottom: var(--space-1);
}

.notice {
    border-color: var(--warn);
    background: var(--warn-soft);
}

.notice h3,
.notice p,
.notice li {
    color: #8a5300;
}

.notice.success {
    border-color: #2aa96e;
    background: #ecfbf3;
}

.notice.success h3,
.notice.success p,
.notice.success li,
.notice.success {
    color: #15784a;
}

.notice.danger {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: #9d2b3b;
}

.notice.compact p {
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.25;
    font-size: 11px;
}

.hidden {
    display: none;
}

.media-frame {
    width: 100%;
    height: 320px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    border: 1px solid #798897;
    background: linear-gradient(145deg, rgba(11, 18, 35, 0.65), rgba(42, 76, 117, 0.22)),
                url("https://images.unsplash.com/photo-1584516150909-c43483ee793b?auto=format&fit=crop&w=1400&q=80") center / cover;
}

.video-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    border: 1px solid #798897;
    background: #0f1720;
}

.step-image {
    background: linear-gradient(145deg, rgba(6, 14, 31, 0.58), rgba(47, 80, 122, 0.2)),
                url("https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=1400&q=80") center / cover;
}

.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.actions.end {
    justify-content: flex-end;
}

.actions.between {
    justify-content: space-between;
}

.btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    min-height: 48px;
    min-width: 170px;
    padding: 0 22px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 140ms ease, background-color 180ms ease, border-color 180ms ease, opacity 160ms ease, box-shadow 180ms ease;
}

.btn:hover:enabled {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 36, 53, 0.16);
}

.btn:active:enabled {
    transform: translateY(0);
    box-shadow: none;
}

.btn:focus-visible {
    outline: 3px solid #8fe5ba;
    outline-offset: 2px;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover:enabled {
    background: var(--primary-dark);
}

.btn-secondary {
    background: #f7fbff;
    border-color: #97abc0;
    color: #3a5066;
}

.question {
    margin-bottom: var(--space-3);
    font-size: clamp(20px, 1.8vw, 30px);
}

.options-list {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.option {
    border: 1px solid #8391a0;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fdfefe;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(15px, 1.25vw, 20px);
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 140ms ease;
}

.option:hover {
    transform: translateY(-1px);
    border-color: #607486;
}

.option input {
    transform: scale(1.4);
}

.option.selected {
    border-color: #6f88a0;
    background: #f0f8ff;
}

.option.correct {
    border-color: #2aa96e;
    background: #ecfbf3;
    color: #15784a;
}

.option.incorrect {
    border-color: #d06a78;
    background: #fff1f3;
    color: #9d2b3b;
}

.assessment-bank {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.bank-item,
.sequence-item,
.review-row {
    border: 1px solid #8391a0;
    border-radius: var(--radius-sm);
    background: #ffffff;
    padding: var(--space-2) 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    gap: 10px;
    font-size: clamp(14px, 1.1vw, 17px);
}

.bank-item.added {
    border-color: #2aa96e;
    background: #ecfbf3;
}

.bank-item.invalid {
    border-color: #d06a78;
    background: #fff1f3;
    animation: nudge 280ms ease;
}

@keyframes nudge {
    0% { transform: translateX(0); }
    30% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

.chip {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid transparent;
}

.chip.correct {
    color: #15784a;
    background: #ecfbf3;
    border-color: #2aa96e;
}

.chip.incorrect {
    color: #9d2b3b;
    background: #fff1f3;
    border-color: #d06a78;
}

.chip.neutral {
    color: #567089;
    background: #f0f6fc;
    border-color: #c0cfde;
}

.sequence-builder {
    display: grid;
    gap: var(--space-1);
    min-height: 90px;
}

.helper {
    margin: var(--space-1) 0 0;
    color: #5f7388;
    font-size: 14px;
}

.helper.error {
    color: #9d2b3b;
    font-weight: 500;
}

.helper.success {
    color: #15784a;
    font-weight: 500;
}

.inline-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

input[type="text"] {
    flex: 1;
    height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid #7f8f9f;
    background: #ffffff;
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
}

input[type="text"]:focus-visible {
    outline: 3px solid #b7e6cb;
    border-color: #5bbb8b;
}

.answer-review {
    display: grid;
    gap: 10px;
}

.review-row {
    display: block;
    padding: 12px 14px;
}

.review-row p {
    margin: 0;
    font-size: 15px;
}

.review-row .correct-answer {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #d4d4d4;
    font-size: 14px;
}

.review-row.correct {
    border-color: #2aa96e;
    background: #ecfbf3;
    color: #15784a;
}

.review-row.incorrect {
    border-color: #d06a78;
    background: #fff1f3;
    color: #9d2b3b;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1024px) {
    .app-shell {
        width: calc(100vw - 24px);
    }

    .panel {
        padding: 20px;
    }

    .card h2,
    .notice h3,
    .answer-builder-wrap h2 {
        font-size: 20px;
    }

    .btn {
        font-size: 15px;
    }

    .option,
    .bank-item,
    .sequence-item,
    .review-row {
        font-size: 15px;
    }
}

@media (max-width: 800px) {
    .top-progress {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .two-col-grid,
    .inline-form,
    .actions.between {
        grid-template-columns: 1fr;
        display: grid;
    }

    .actions.end {
        justify-content: stretch;
    }

    .btn {
        width: 100%;
    }
}