:root { font-family: system-ui, sans-serif; color: #172033; background: #f5f7fb; }
body { margin: 0; }
.shell { max-width: 820px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.eyebrow, .meta { color: #5266d8; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
h1 { font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.05; margin: .25rem 0 1rem; }
h2 { line-height: 1.3; }
.intro { color: #536070; font-size: 1.1rem; }
.panel, .card { background: white; border-radius: 16px; padding: 1rem; margin-top: 1.5rem; box-shadow: 0 8px 30px #25385812; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.card { display: flex; flex-direction: column; gap: .55rem; width: 100%; text-align: left; color: #172033; border: 1px solid transparent; }
.card:hover:not(:disabled) { border-color: #5266d8; transform: translateY(-2px); }
.card:disabled { cursor: not-allowed; opacity: .55; }
.card-title { font-size: 1.2rem; font-weight: 750; }
.card-description { color: #536070; font-weight: 450; }
.card-meta { color: #5266d8; font-size: .85rem; font-weight: 700; margin-top: auto; }
.controls { display: grid; gap: .8rem; }
label { display: grid; gap: .3rem; font-weight: 650; }
select, button { font: inherit; padding: .7rem .8rem; border-radius: 10px; border: 1px solid #d8deea; }
button { cursor: pointer; background: #5266d8; color: white; border: 0; font-weight: 700; }
button.secondary, button.back { background: #eef1ff; color: #4054c5; }
button.back { padding: .45rem .7rem; font-size: .9rem; }
.assessment-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.option { display: block; width: 100%; text-align: left; margin: .6rem 0; background: #eef1ff; color: #172033; }
.option:disabled { cursor: default; opacity: .75; }
.option.selected { border: 2px solid #5266d8; }
#continue { margin-top: 1rem; }
.result { text-align: center; }
.score { color: #5266d8; font-size: 4rem; font-weight: 800; margin: .5rem 0; }
.result-summary { color: #536070; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
@media (max-width: 520px) { .assessment-head { align-items: flex-start; flex-direction: column; } }