.lesson-card{padding:22px;background:linear-gradient(155deg,#fff 0%,#fbfaff 72%,#f7f4ff 100%)}
.lesson-card .lesson-top{padding-bottom:2px}.lesson-card .lesson-top h2{margin-top:4px;font-size:clamp(1.45rem,2.4vw,2rem)}
.lesson-card .lesson-level-badge{margin-bottom:6px}.lesson-card .ability{display:flex;align-items:center;gap:10px;margin:15px 0 0;padding:13px 15px;background:#edf9f6}
.ability-label{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:rgba(22,166,161,.13);color:#117f7b;font-size:.68rem;font-weight:950}.ability-text{line-height:1.65}
.lesson-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:15px 0 10px}.lesson-flow-step{position:relative;min-width:0;padding:9px 8px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center;cursor:pointer;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}.lesson-flow-step:hover{transform:translateY(-1px);border-color:rgba(102,80,216,.2)}.lesson-flow-step b{display:inline-grid;width:22px;height:22px;place-items:center;margin-left:5px;border-radius:50%;background:var(--soft);color:#5741c7;font-size:.68rem}.lesson-flow-step span{font-size:.72rem;font-weight:900;color:#536474}.lesson-flow-step.active{border-color:rgba(22,166,161,.38);background:linear-gradient(135deg,#eaf8f5,#f7fcfb);box-shadow:0 7px 18px rgba(22,166,161,.1),inset 0 0 0 1px rgba(22,166,161,.08)}.lesson-flow-step.active b{background:var(--teal);color:#fff}.lesson-flow-step.active span{color:#117f7b}.lesson-flow-step.completed{border-color:rgba(22,166,161,.18);background:#f8fcfb}.lesson-flow-step.completed b{background:rgba(22,166,161,.18);color:#117f7b}
.lesson-start-early{width:100%;min-height:50px;margin:0 0 15px;font-size:.93rem;border-radius:15px}.lesson-start-early::after{content:"  →";font-weight:900}
.lesson-card .daily-listening{margin:0 0 17px;padding:15px}.lesson-card .learning-row{margin:0 0 17px;gap:12px}.lesson-card>.mini-box.lesson-activity-box{margin:0 0 18px;padding:15px;background:#fcfbff}.lesson-card>.mini-box.lesson-activity-box small{color:#6a59c6}.lesson-card>.mini-box.lesson-activity-box strong{display:block;margin-top:2px;font-size:.95rem}.lesson-card>.mini-box.lesson-activity-box p{margin-top:6px}
.lesson-card>.actions{display:none!important}.lesson-card [data-action="play-activity"]{display:none!important}
.btn{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.custom-card .btn.soft{background:#fff;border-color:rgba(102,80,216,.2);color:#5741c7;box-shadow:none}.custom-card .btn.soft:hover{background:#f7f4ff}
.quick-card{border-color:rgba(22,166,161,.17)}.quick-card [data-action="quick-say"]{background:#fff!important;color:#117f7b!important;border:1px solid rgba(22,166,161,.27)!important;box-shadow:none!important}.quick-card [data-action="quick-say"]:hover{background:#f2fbf9!important}.quick-card .quick-call{margin-top:16px;padding:15px 16px;background:linear-gradient(135deg,rgba(22,166,161,.09),rgba(22,166,161,.04));border-color:rgba(22,166,161,.24)}.quick-card .quick-call>span{font-size:1.35rem}.quick-card .call-action-row{margin-top:9px}.quick-card [data-action="open-call"]{width:100%;min-height:52px;border:0;color:#fff;background:linear-gradient(135deg,var(--teal),var(--teal2));box-shadow:0 12px 26px rgba(22,166,161,.19);font-size:.92rem}
.custom-card h2,.quick-card h2{letter-spacing:-.01em}.custom-card,.quick-card{padding:21px}.custom-card textarea,.quick-card textarea{margin-top:10px}
.lesson-card .lesson-icon{box-shadow:none}.lesson-card .lesson-icon small{font-size:.56rem}.lesson-card .mini-box{box-shadow:none}
/* English chat bubbles always render LTR so question marks and punctuation stay in the correct place. */
.chat .bubble.teacher,.chat .bubble.user{direction:ltr;text-align:left;unicode-bidi:plaintext}
.chat .bubble.teacher small,.chat .bubble.user small{direction:rtl;text-align:right;unicode-bidi:isolate}
@media(min-width:821px){.grid{grid-template-columns:minmax(0,1.34fr) minmax(310px,.66fr);gap:18px}.lesson-card{padding:24px}.hero{padding:21px 26px}.hero h1{font-size:clamp(2.3rem,3.55vw,3.15rem);margin:7px 0 5px}.hero p{max-width:780px}.topbar{margin-bottom:15px}}
@media(max-width:680px){.lesson-flow{grid-template-columns:1fr 1fr}.lesson-flow-step{padding:8px 7px}.lesson-card{padding:17px}.lesson-start-early{margin-bottom:13px}.lesson-card .daily-listening,.lesson-card .learning-row,.lesson-card>.mini-box.lesson-activity-box{margin-bottom:13px}}