.flowSteps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0}.flowStep{border:1px solid #cbd5e1;background:#f8fafc;border-radius:12px;padding:11px 7px;text-align:center;color:#64748b;font-weight:800}.flowStep.active{background:#1d4ed8;color:#fff;border-color:#1d4ed8}.flowStep.done{background:#dcfce7;color:#166534;border-color:#86efac}.flowStep.locked{opacity:.5}.flowCard{background:#fff;border:1px solid #dbe5ef;border-radius:18px;padding:22px;box-shadow:0 8px 24px rgba(15,23,42,.06)}.flowCard h2{margin-top:0}.flowIntro{border-left:5px solid #2563eb;background:#eff6ff;border-radius:12px;padding:16px;margin:14px 0}.flowGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.flowItem{border:1px solid #dbe5ef;border-radius:13px;padding:14px;background:#f8fafc}.flowItem h4{margin:0 0 7px}.flowActions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.flowActions button{border:0;border-radius:9px;padding:8px 10px;background:#e0ebff;color:#1d4ed8;font-weight:800}.flowActions .flowMic{background:#dcfce7;color:#166534}.dialogue{max-width:760px;margin:18px auto}.speech{display:flex;gap:10px;align-items:flex-start;margin:11px 0}.speech.right{flex-direction:row-reverse}.speaker{width:42px;height:42px;border-radius:50%;background:#1d4ed8;color:#fff;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.bubble{background:#eff6ff;border-radius:14px;padding:12px 15px;max-width:78%}.speech.right .bubble{background:#ecfdf5}.readingBox{max-width:780px;background:#fff;border:1px solid #dbe5ef;border-radius:14px;padding:18px;margin:14px 0}.readingLine{padding:5px 0;border-bottom:1px dashed #e2e8f0}.readingLine:last-child{border:0}.flowQuestion{border:1px solid #dbe5ef;border-radius:13px;padding:15px;margin:10px 0;background:#fff}.flowQuestion p{font-weight:800}.flowQuestion label{display:block;border:1px solid #e2e8f0;border-radius:9px;padding:9px;margin:6px 0}.flowQuestion label:hover{background:#eff6ff}.flowContinue{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:20px}.flowNotice{padding:13px;border-radius:11px;background:#eff6ff;color:#1e40af;font-weight:750}.flowNotice.pass{background:#dcfce7;color:#166534}.flowNotice.fail{background:#fee2e2;color:#991b1b}@media(max-width:800px){.flowSteps{grid-template-columns:repeat(3,1fr)}.flowGrid{grid-template-columns:1fr}}@media(max-width:500px){.flowSteps{grid-template-columns:repeat(2,1fr)}.flowContinue{align-items:stretch;flex-direction:column}.flowContinue .btn{width:100%}}