body {
    display: block;
    min-height: 100vh;
    padding: 32px 16px;
    box-sizing: border-box;
}

.placement-app { max-width: 860px; margin: 0 auto; }
.test-header { text-align: center; margin: 0 auto 28px; max-width: 760px; }
.test-header h1 { font: 800 clamp(2rem, 5vw, 3.1rem)/1.15 'Poppins', sans-serif; margin: 12px 0; color: var(--text-color); }
.test-header p { font-size: 1.1rem; line-height: 1.65; margin: 0; }
.back-link { display: inline-block; color: var(--text-color); font-weight: 800; text-decoration: none; margin-bottom: 18px; }
.test-badge, .result-overline { display: inline-block; font-size: .78rem; font-weight: 900; letter-spacing: 1.4px; color: var(--accent-blue); }
.panel { background: rgba(255,255,255,.92); border-radius: 30px; box-shadow: var(--shadow-light); padding: clamp(24px, 5vw, 42px); }
.intro-panel { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
.intro-icon { width: 74px; height: 74px; display: grid; place-items: center; background: #fff2bd; border-radius: 22px; font-size: 2.4rem; }
.intro-panel h2, .result-panel h2, .learning-plan h3, .level-bars h3 { font-family: 'Poppins', sans-serif; margin: 0 0 12px; color: var(--text-color); }
.intro-panel ul { padding-left: 22px; margin: 0 0 26px; line-height: 1.75; }
.primary-button { border: 0; border-radius: 999px; padding: 14px 24px; background: var(--accent-blue); box-shadow: 0 8px 18px rgba(77,150,255,.25); color: white; cursor: pointer; font: 800 1rem 'Poppins', sans-serif; transition: transform .18s ease, background .18s ease; }
.primary-button:hover { transform: translateY(-2px); background: #3484ed; }
.test-stats { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 12px; font-weight: 900; }
.level-chip { padding: 6px 12px; background: #fff2bd; border-radius: 99px; color: #745100; font-size: .88rem; }
.progress-track { height: 12px; border-radius: 999px; background: #dfeafa; overflow: hidden; margin-bottom: 20px; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-blue), var(--success-green)); transition: width .3s ease; }
.question-panel { min-height: 400px; }
.topic-label { color: var(--secondary-coral); font-size: .88rem; font-weight: 900; letter-spacing: .7px; margin: 0 0 14px; text-transform: uppercase; }
.question-panel h2 { font: 800 clamp(1.45rem, 3vw, 2rem)/1.35 'Poppins', sans-serif; margin: 0 0 28px; color: var(--text-color); }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.answer-option { min-height: 66px; padding: 12px 16px; border: 2px solid #dbe8f7; border-radius: 17px; background: white; color: var(--text-color); cursor: pointer; font: 800 1rem 'Nunito', sans-serif; text-align: left; transition: transform .16s, border-color .16s, background .16s; }
.answer-option:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent-blue); }
.answer-option:disabled { cursor: default; }
.answer-option.correct { border-color: var(--success-green); background: #e9faed; color: #21762d; }
.answer-option.incorrect { border-color: var(--secondary-coral); background: #fff0ef; color: #b44242; }
.feedback { margin-top: 24px; padding: 16px 18px; border-left: 5px solid var(--accent-blue); border-radius: 14px; background: #f4f8ff; line-height: 1.55; }
.feedback.correct-feedback { border-color: var(--success-green); background: #eaf9ed; }
.feedback.wrong-feedback { border-color: var(--secondary-coral); background: #fff1f0; }
.next-button { margin-top: 18px; }
.result-top { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; margin: 18px 0 32px; }
.score-chart { --score: 0%; display: grid; place-content: center; width: 160px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--success-green) var(--score), #e1eaf4 0); position: relative; text-align: center; }
.score-chart::before { content: ''; position: absolute; inset: 16px; background: white; border-radius: 50%; }
.score-chart strong, .score-chart span { position: relative; z-index: 1; }
.score-chart strong { font: 800 1.65rem 'Poppins', sans-serif; color: var(--text-color); }
.score-chart span { font-size: .8rem; font-weight: 800; }
.score-summary { font-weight: 900; color: var(--accent-blue); margin: 0 0 4px; }
#result-description { line-height: 1.6; margin-bottom: 0; }
.level-bars, .learning-plan { border-radius: 20px; padding: 22px; background: #f7faff; margin-top: 18px; }
.bar-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; margin-top: 12px; font-weight: 800; }
.bar-track { height: 11px; overflow: hidden; background: #dce7f5; border-radius: 99px; }
.bar-fill { height: 100%; border-radius: inherit; background: var(--accent-blue); transition: width .45s ease; }
.learning-plan { background: #fff8df; }
.learning-plan ul { margin: 12px 0 0; padding-left: 22px; line-height: 1.65; }
.result-panel > .primary-button { margin-top: 26px; }

@media (max-width: 600px) {
    body { padding: 20px 12px; }
    .intro-panel, .result-top { grid-template-columns: 1fr; }
    .intro-icon { display: none; }
    .answers { grid-template-columns: 1fr; }
    .score-chart { width: 140px; }
    .test-stats { font-size: .9rem; }
}