.page-spoken-materials #mainContent{background:#f5f8fc} .page-spoken-materials .ajax-practice-room{padding:54px 0 68px} .page-spoken-materials .practice-goal-panel{overflow:hidden;padding:0} .page-spoken-materials .goal-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid #dce5f0;background:#f8fbff} .page-spoken-materials .goal-tab{min-width:0;min-height:92px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:16px 18px;border:0;border-right:1px solid #dce5f0;background:transparent;color:#63718a;text-align:left;cursor:pointer;transition:.2s} .page-spoken-materials .goal-tab:last-child{border-right:0} .page-spoken-materials .goal-tab b{display:flex;align-items:center;gap:8px;color:#10213d;font-size:14px} .page-spoken-materials .goal-tab b i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#eaf3fc;color:#2266ad} .page-spoken-materials .goal-tab span{padding-left:42px;font-size:11px;line-height:1.4} .page-spoken-materials .goal-tab:hover,.page-spoken-materials .goal-tab.active{background:#fff5d9;color:#6f5000;box-shadow:inset 0 -4px 0 #d8a62d} .page-spoken-materials .goal-tab.active b i{background:#d8a62d;color:#04162f} .page-spoken-materials .ajax-practice-filter{display:grid;grid-template-columns:1fr 1fr 1.15fr auto;align-items:end;gap:14px;padding:20px} .page-spoken-materials .ajax-practice-filter label{display:flex;min-width:0;flex-direction:column;gap:7px;color:#071f43;font-size:12px;font-weight:750} .page-spoken-materials .ajax-practice-filter .btn{min-width:130px} .page-spoken-materials .practice-loader,.page-spoken-materials .empty-state{margin-top:18px;padding:24px;text-align:center;color:#63718a} .page-spoken-materials .enhanced-practice-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;margin-top:20px} .page-spoken-materials .practice-progress-card{position:sticky;top:112px;align-self:start;padding:22px} .page-spoken-materials .practice-progress-card .badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf9f2;color:#168a58;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em} .page-spoken-materials .practice-progress-card h3{margin:14px 0 7px;font-size:22px} .page-spoken-materials .practice-progress-card p{margin:0;font-size:13px;line-height:1.65} .page-spoken-materials .practice-meter{height:9px;margin:20px 0 9px;border-radius:999px;background:#e7edf5;overflow:hidden} .page-spoken-materials .practice-meter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d8a62d,#2266ad);transition:width .3s ease} .page-spoken-materials .practice-progress-card>strong{display:block;color:#071f43;font-size:13px} .page-spoken-materials .mini-tips{display:grid;gap:8px;margin-top:18px} .page-spoken-materials .mini-tips div{display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 10px;border:1px solid #dce5f0;border-radius:12px;background:#f9fbfe;color:#42516a;font-size:11px;font-weight:700} .page-spoken-materials .mini-tips i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#eaf3fc;color:#2266ad} .page-spoken-materials .practice-stepper{min-width:0} .page-spoken-materials .practice-slide{display:none;min-width:0;padding:26px;border:1px solid #dce5f0;border-radius:26px;background:#fff;box-shadow:0 18px 48px rgba(4,22,47,.09)} .page-spoken-materials .practice-slide.active{display:block;animation:wf130PracticeIn .28s ease} @keyframes wf130PracticeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .page-spoken-materials .practice-slide .practice-question,.page-spoken-materials .practice-slide .material-question-card{padding:20px;border-radius:20px;background:linear-gradient(145deg,#071f43,#174e8f);color:#fff} .page-spoken-materials .practice-slide h2,.page-spoken-materials .practice-slide h3{color:#071f43} .page-spoken-materials .practice-slide .practice-question h2,.page-spoken-materials .practice-slide .material-question-card h2,.page-spoken-materials .practice-slide .practice-question h3,.page-spoken-materials .practice-slide .material-question-card h3{color:#fff} .page-spoken-materials .practice-slide textarea{min-height:130px;font-size:17px;line-height:1.55} .page-spoken-materials .practice-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .page-spoken-materials .practice-action-row .btn{min-width:150px} .page-spoken-materials .voice-status{margin-top:10px;padding:10px 12px;border-radius:12px;background:#fff5d9;color:#6f5000;font-size:12px} .page-spoken-materials .material-inline-result{margin-top:18px;padding:18px;border-radius:18px} .page-spoken-materials .material-inline-result.is-correct{border:1px solid #bce6cf;background:#edf9f2;color:#126c45} .page-spoken-materials .material-inline-result.is-improve{border:1px solid #f0d69b;background:#fff8e8;color:#775700} .page-spoken-materials .material-inline-result.is-checking{border:1px solid #c8d9ed;background:#f2f7fc;color:#174e8f} .page-spoken-materials .material-inline-result p{margin:7px 0;color:inherit} .page-spoken-materials .correct-speak-box{margin-top:12px;padding:13px;border-radius:13px;background:rgba(255,255,255,.68)} .page-spoken-materials .correct-speak-box span{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em} .page-spoken-materials .correct-speak-box h4{margin:4px 0 0;font-size:18px} .page-spoken-materials .dark-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border-radius:24px;background:linear-gradient(135deg,#071f43,#174e8f);color:#fff} .page-spoken-materials .dark-cta h2{margin:0 0 6px;color:#fff;font-size:25px} .page-spoken-materials .dark-cta p{margin:0;color:rgba(255,255,255,.7)} @media(max-width:980px){.page-spoken-materials .goal-tabs{grid-template-columns:repeat(2,1fr)} .page-spoken-materials .goal-tab:nth-child(2){border-right:0} .page-spoken-materials .goal-tab:nth-child(-n+2){border-bottom:1px solid #dce5f0} .page-spoken-materials .ajax-practice-filter{grid-template-columns:1fr 1fr} .page-spoken-materials .ajax-practice-filter .btn{width:100%} .page-spoken-materials .enhanced-practice-shell{grid-template-columns:1fr} .page-spoken-materials .practice-progress-card{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px} .page-spoken-materials .practice-progress-card .mini-tips{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}} @media(max-width:680px){.page-spoken-materials .ajax-practice-room{padding:38px 0 54px} .page-spoken-materials .goal-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .page-spoken-materials .goal-tabs::-webkit-scrollbar{display:none} .page-spoken-materials .goal-tab{min-width:78%;min-height:82px;scroll-snap-align:start;border-right:1px solid #dce5f0!important;border-bottom:0!important;padding:13px} .page-spoken-materials .goal-tab span{padding-left:42px} .page-spoken-materials .ajax-practice-filter{grid-template-columns:1fr;padding:16px} .page-spoken-materials .practice-progress-card{display:block;padding:18px} .page-spoken-materials .practice-progress-card .mini-tips{grid-template-columns:1fr 1fr} .page-spoken-materials .practice-slide{padding:18px;border-radius:20px} .page-spoken-materials .practice-slide textarea{min-height:115px} .page-spoken-materials .practice-action-row{display:grid;grid-template-columns:1fr} .page-spoken-materials .practice-action-row .btn{width:100%;min-width:0} .page-spoken-materials .dark-cta{align-items:flex-start;flex-direction:column;padding:22px} .page-spoken-materials .dark-cta .btn{width:100%}}