.free-learning{max-width:1100px;margin:0 auto;padding-bottom:36px}
.free-learning-hero{padding:26px;border-radius:18px;background:linear-gradient(135deg,#172847,#315586);color:#fff}
.free-learning-hero span{font-size:11px;font-weight:800;letter-spacing:.1em;color:#cbdcff}
.free-learning-hero h2{margin:7px 0;font-size:clamp(24px,3vw,32px);color:#fff}
.free-learning-hero p{margin:0;line-height:1.6;color:#e7efff}
.free-learning-actions,.free-track-list{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.free-track-button{border:1px solid #dce3ef;border-radius:999px;background:#fff;padding:10px 16px;color:#334155;font-size:13px;font-weight:700;cursor:pointer}
.free-track-button:hover,.free-track-button.active{border-color:#5658da;background:#eef0ff;color:#4546b9}
.free-question-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 12px}
.free-question-head h3{margin:0;color:#18264a}
.free-question-head span{font-size:12px;font-weight:700;color:#5658da}
.free-question{background:#fff;border:1px solid #e1e6ef;border-radius:15px;margin:12px 0;padding:18px;box-shadow:0 6px 20px rgba(20,35,65,.04)}
.free-question-number{font-size:11px;font-weight:800;letter-spacing:.05em;color:#5d63be;text-transform:uppercase}
.free-question h4{margin:8px 0 14px;color:#18264a;font-size:17px;line-height:1.45}
.free-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.free-option{text-align:left;border:1px solid #dfe5ee;border-radius:10px;background:#fff;color:#29374c;padding:11px 12px;cursor:pointer;font-size:13px;line-height:1.4}
.free-option:hover{background:#f5f6ff;border-color:#8587e7}
.free-option.correct{border-color:#28a369;background:#ebfbf2;color:#16623f}
.free-option.wrong{border-color:#d15b65;background:#fff0f1;color:#8d2630}
.free-option:disabled{cursor:default}
.free-answer-feedback{margin:10px 0 0;font-size:12px;color:#40546c;min-height:1em}
.free-continue{padding:22px;border-radius:15px;background:#eff2ff;text-align:center;margin-top:20px}
.free-continue p{margin:0 0 12px;color:#39455f}
.free-topic-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}
.free-topic-list{background:#fff;border:1px solid #e1e6ef;border-radius:15px;padding:14px;position:sticky;top:12px;max-height:75vh;overflow:auto}
.free-topic-list h3{margin:3px 4px 4px;color:#18264a;font-size:17px}
.free-topic-list p{margin:0 4px 12px;color:#738096;font-size:12px}
.free-topic-link{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:#40516b;text-align:left;font-size:13px;line-height:1.35;cursor:pointer}
.free-topic-link span{flex:0 0 28px;font-size:11px;font-weight:800;color:#6473a5}
.free-topic-link:hover,.free-topic-link.active{background:#edf0ff;color:#3f45b9}
.free-topic-locked{margin-top:10px;border-top:1px solid #e2e6f0;border-radius:0 0 9px 9px;color:#5557c0;font-weight:800}
.free-topic-workspace{min-width:0;background:#fff;border:1px solid #e1e6ef;border-radius:15px;padding:20px}
.free-topic-heading{border-bottom:1px solid #e5e9f1;padding-bottom:12px;margin-bottom:16px}
.free-topic-heading span{font-size:11px;font-weight:800;color:#5557c0;text-transform:uppercase;letter-spacing:.05em}
.free-topic-heading h3{margin:6px 0 0;font-size:23px;color:#18264a}
.free-topic-workspace .tl-panel-card{max-width:none}
.free-topic-navigation{display:flex;gap:10px;justify-content:space-between;margin-top:22px;border-top:1px solid #e5e9f1;padding-top:16px}
.free-lesson-section{padding:14px 0;border-bottom:1px solid #e9edf3}
.free-lesson-section h4{margin:0 0 8px;font-size:16px;color:#263754}
.free-lesson-section p{margin:0 0 8px;line-height:1.65;color:#43536c}
.free-lesson-section ul{margin:5px 0 8px;padding-left:22px;line-height:1.6;color:#43536c}
.free-code{white-space:pre-wrap;overflow:auto;background:#101b2e;color:#edf3ff;border-radius:10px;padding:14px;font-size:12px;line-height:1.55}
.free-speak-track{animation:freeSpeakScroll 300s linear forwards;animation-play-state:paused;opacity:1}
@keyframes freeSpeakScroll{from{transform:translateY(430px)}to{transform:translateY(-100%)}}
.speak-video-shell>p{color:#e8efff;padding:14px 16px;margin:0;line-height:1.5}
@media(max-width:760px){.free-topic-layout{grid-template-columns:1fr}.free-topic-list{position:static;max-height:none}.free-topic-workspace{padding:16px}}
@media(max-width:620px){.free-options{grid-template-columns:1fr}.free-learning-hero{padding:20px}.free-question{padding:15px}}