:root { --blue:#123c69; --light:#f4f7fb; --border:#d7e0ef; --accent:#0b72d9; --danger:#b00020; --ok:#0a7a3b; }
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:#12213a; background:var(--light); line-height:1.5; }
.app { max-width: 980px; margin: 0 auto; padding: 24px; }
.hero { background: linear-gradient(135deg, #123c69, #285e9e); color:white; padding: 26px; border-radius: 16px; display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px; }
.hero h1 { margin:0 0 8px; font-size: 28px; }
.hero p { margin:0; opacity:.95; }
.badge { width:64px; height:64px; border:2px solid rgba(255,255,255,.6); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:22px; }
.card { background:white; border:1px solid var(--border); border-radius:16px; padding:24px; margin:18px 0; box-shadow:0 8px 24px rgba(18,60,105,.08); }
.hidden { display:none; }
h2 { margin-top:0; color:var(--blue); }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
label { display:block; font-weight:600; }
input, select, textarea { width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; margin-top:6px; font:inherit; background:white; }
textarea { min-height:160px; resize:vertical; }
.declaration { margin:18px 0; display:flex; gap:10px; font-weight:400; }
.declaration input { width:auto; margin-top:4px; }
button { border:0; border-radius:10px; padding:12px 18px; font-weight:700; cursor:pointer; }
.primary { background:var(--accent); color:white; }
.secondary { background:#e8eef7; color:#123c69; }
button:disabled { opacity:.55; cursor:not-allowed; }
.muted { color:#5d6b82; }
.error { color:var(--danger); font-weight:bold; }
.ok { color:var(--ok); font-weight:bold; }
.progress-wrap { margin-bottom:18px; }
.progress { height:10px; background:#e8eef7; border-radius:99px; overflow:hidden; margin-top:8px; }
#progressBar { height:100%; width:0; background:var(--accent); transition:.2s width; }
.passage { background:#f9fbff; border:1px solid var(--border); border-radius:12px; padding:14px; white-space:pre-wrap; margin: 14px 0; }
.question-code { color:var(--blue); font-weight:bold; margin-bottom:6px; }
.options { display:grid; gap:10px; margin-top:14px; }
.option { border:1px solid var(--border); border-radius:12px; padding:12px; cursor:pointer; display:flex; gap:10px; align-items:flex-start; }
.option:hover { border-color:var(--accent); }
.option input { width:auto; margin:3px 0 0; }
.nav { display:flex; justify-content:space-between; margin-top:20px; }
.word-count { font-size:14px; margin-top:6px; }
.summary { background:#f9fbff; border:1px solid var(--border); border-radius:12px; padding:14px; }
@media (max-width:700px) { .grid { grid-template-columns:1fr; } .hero { flex-direction:column; align-items:flex-start; } }
.progress-head { display:flex; justify-content:space-between; gap:14px; align-items:center; font-weight:700; color:var(--blue); }
#totalTimer, .step-timer { color:#5d6b82; font-size:14px; font-weight:600; }
.recording-box { display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:#f9fbff; border:1px solid var(--border); border-radius:12px; padding:14px; margin:14px 0; }
#audioPreview { width:100%; margin:12px 0; }
.oral-questions { background:#f9fbff; border:1px solid var(--border); border-radius:12px; padding:14px 14px 14px 36px; }
.oral-questions li { margin:6px 0; }
@media (max-width:700px) { .progress-head { flex-direction:column; align-items:flex-start; } }