:root{--red:#f44046;--orange:#f5a000;--navy:#222d67;--softgreen:#ebfcf5;--softred:#fff2f3}.learning{padding-left:230px;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;background:white;width:230px;padding:30px 18px;display:flex;flex-direction:column;z-index:5}.sidebar .brand{font-size:20px;padding:0 14px;gap:14px}.sidebar .mark{width:48px;height:48px;border-radius:12px;font-size:28px}.sidebar nav{display:grid;gap:8px;margin-top:35px}.sidebar nav a,.sidebar nav button{display:flex;align-items:center;text-align:left;gap:16px;padding:17px 20px;color:#6e809d;font-size:14px;font-weight:600;border-radius:13px}.sidebar nav a.active{background:var(--pale);color:var(--blue)}.sidebar nav svg{width:18px;height:18px}.sidebar nav em{margin-left:auto;background:var(--softred);color:var(--red);border-radius:20px;font-style:normal;padding:3px 8px;font-size:12px}.side-recommend{display:block;text-decoration:none;margin:32px 6px 20px;background:var(--pale);padding:20px;border-radius:18px;color:var(--navy);font-size:13px;cursor:pointer;border:1.5px solid transparent;transition:all .2s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 8px rgba(61,87,223,0.04)}.side-recommend:hover{background:#e2e8fc;border-color:#c7d2fe;transform:translateY(-2px);box-shadow:0 8px 20px rgba(61,87,223,0.12)}.side-recommend:active{transform:translateY(0);box-shadow:0 4px 10px rgba(61,87,223,0.08)}.side-recommend b{display:flex;align-items:center;gap:6px;color:var(--navy);font-weight:700}.side-recommend b svg{color:var(--blue);flex-shrink:0}.side-recommend p{margin-top:10px;color:#5a6cac;font-size:13px;line-height:1.5}.side-recommend .sr-action{display:inline-flex;align-items:center;margin-top:12px;font-size:12px;font-weight:700;color:var(--blue);transition:transform .2s ease}.side-recommend:hover .sr-action{transform:translateX(3px)}.student-chip{margin-top:auto;background:#f7f9fb;border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center}.avatar{border-radius:50%;width:42px;height:42px;display:grid;place-items:center;background:#e8eaff;color:var(--blue);font-size:17px;font-weight:700;flex:none}.student-chip strong{font-size:13px}.student-chip small{display:block;font-size:12px;line-height:1.4;color:#8b9db7}.learning-content{padding:40px 42px;max-width:1540px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.page-heading h1{font-size:27px}.page-heading p{font-size:14px;margin-top:7px}.heading-actions{display:flex;gap:12px;flex-shrink:0}.learning .primary,.learning .secondary{font-size:14px;padding:15px 23px}.learning .card{padding:32px;border-radius:23px}.learning h2{font-size:22px}.learning h3{font-size:17px}.crumb{display:flex;gap:12px;align-items:center;color:#94a4bb;font-size:13px;margin-bottom:18px}.crumb a{font-weight:400;color:inherit}.crumb b{color:var(--blue)}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:25px 0}.stat-card{background:white;padding:24px;border-radius:18px;box-shadow:0 6px 20px #273b7204}.stat-card.compact{display:flex;align-items:center;gap:14px}.stat-card small{color:#8d9db4;display:block;font-size:13px;line-height:1.4}.stat-card strong{display:block;font-size:24px;line-height:1.5}.stat-card.compact strong{font-size:16px}.colored-icon{display:grid;place-items:center;width:48px;height:48px;background:var(--pale);color:var(--blue);border-radius:14px;flex:none}.colored-icon svg{width:24px;height:24px}.green{color:var(--green)!important}.red{color:var(--red)!important}.orange{color:var(--orange)!important}.blue{color:var(--blue)!important}.bg-green{background:var(--softgreen)!important}.bg-red{background:var(--softred)!important}.bg-orange{background:#fff7ed!important}.dark-card{background:var(--navy)!important;color:white}.dark-card p{color:#c8d1f6;font-size:14px}.dark-card .secondary{background:#ffffff17;border-color:#ffffff24;color:white}.banner{border-radius:23px;padding:34px;margin:26px 0;display:grid;grid-template-columns:minmax(0,1fr) 195px;gap:34px;align-items:center}.banner h2{margin:14px 0;font-size:24px}.banner .banner-buttons{display:grid;gap:12px}.badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:22px;background:var(--pale);color:var(--blue);font-size:12px;font-weight:600;line-height:1.4}.badge.green{background:var(--softgreen)}.badge.red{background:var(--softred)}.badge.orange{background:#fff7ed}.dark-card .badge{background:#ffffff18;color:#d2dbff;margin-right:8px}.dark-card .badge:first-child{background:var(--blue);color:white}.banner-meta{display:flex;gap:24px;margin-top:23px;color:#c8d1f6;font-size:12px}.training-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:18px}.method.card{padding:28px;display:flex;flex-direction:column}.method h3{margin:22px 0 9px}.method p{font-size:13px;line-height:1.6;flex:1}.method .primary{margin-top:24px;width:100%}.method .colored-icon{width:58px;height:58px}.btn-green{background:var(--green)!important;color:white}.btn-red{background:var(--red)!important;color:white}.btn-orange{background:var(--orange)!important;color:white}.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:27px;margin-top:27px;align-items:start}.equal-cols{grid-template-columns:1fr 1fr}.stack{display:grid;gap:27px;min-width:0}.card-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:27px}.card-title h3{display:flex;align-items:center;gap:12px}.card-title small{color:#92a2bb;font-size:12px}.card-title svg{width:21px;height:21px;color:var(--blue)}.plan-row{display:flex;align-items:center;gap:16px;background:#f7f9fb;border-radius:13px;padding:18px;margin-top:13px;font-size:14px}.plan-row .status{margin-left:auto;font-size:12px;white-space:nowrap}.plan-row small{display:block;font-size:12px;color:#8094ae}.step-round{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#e3e9f1;color:#93a2b9;flex:none}.plan-row.done{background:var(--softgreen);color:#087756}.plan-row.done .step-round{background:var(--green);color:white}.plan-row.current{background:var(--pale);color:#324592}.plan-row.current .step-round{background:var(--blue);color:white}.achievement{display:flex;gap:17px;align-items:center;margin-top:20px;font-size:14px}.achievement small{display:block;font-size:12px;color:#8d9db4}.small-button{font-size:12px;color:var(--blue);font-weight:600}.mini-bars{display:grid;gap:22px}.bar-row{display:grid;grid-template-columns:115px 1fr 46px;gap:16px;align-items:center;font-size:13px}.bar-track{height:13px;background:#f0f3f8;border-radius:15px;overflow:hidden}.bar-track span{display:block;height:100%;border-radius:15px;background:var(--blue)}.bar-row>b{text-align:right}.weakness{margin-top:22px}.weakness .row{font-size:13px;gap:8px;margin-bottom:10px}.weakness strong{font-size:13px;flex:1}.weakness small{font-size:12px;white-space:nowrap;color:#7a8ba4}.weakness .badge{padding:5px 9px}.notice{padding:19px 20px;border-radius:14px;background:var(--pale);color:#324593;font-size:13px;line-height:1.6}.notice p{font-size:12px;color:inherit;margin-top:6px}.notice.success{background:var(--softgreen);color:#087f5b}.notice.caution{background:#fff6eb;color:#aa580a}.notice.danger{background:var(--softred);color:#c02c33;border:1px solid #ffcbd0}.radar{display:block;width:100%;max-width:420px;height:330px;margin:22px auto 50px}.radar text{font-size:13px;fill:#5c6c87}.radar line,.radar polygon.grid{stroke:#e0e7f4;fill:none}.tag-cloud{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}.tag-cloud .badge{font-size:12px;padding:10px 15px}.line-chart{width:100%;height:180px;display:block}.line-chart text{font-size:11px;fill:#8c9bb3}.segmented{display:inline-flex;background:#f1f4f8;padding:5px;border-radius:12px;gap:4px}.segmented button{padding:10px 17px;border-radius:9px;font-size:13px;font-weight:600;color:#71829c}.segmented .active{background:white;color:var(--blue)}.toolbar{display:flex;align-items:center;gap:18px;margin:28px 0}.toolbar select,.toolbar input{background:white;border:1px solid var(--border);border-radius:13px;padding:14px 19px;color:#63748f;outline:0;font-size:14px}.toolbar input{margin-left:auto;width:250px}.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.module-card{display:flex;flex-direction:column;min-height:280px;border:2px solid transparent}.module-card.recommended{border-color:var(--red)}.module-card .module-head{display:flex;gap:14px;align-items:center;margin-bottom:22px}.module-card .module-head h3{font-size:18px}.module-head small{color:#94a3bb;font-size:13px}.module-card .tag-cloud{flex:1;margin:0 0 28px;align-content:flex-start}.module-card .module-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}.module-foot small{font-size:12px;color:#8d9fba}.module-foot .primary{padding:12px 17px}.mini-ring{width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--ringcolor,var(--green)) calc(var(--value)*1%),var(--pale) 0);display:grid;place-items:center;margin-left:auto;flex:none}.mini-ring span{width:38px;height:38px;border-radius:50%;background:white;display:grid;place-items:center;font-size:12px}.builder-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px}.number-title{display:flex;align-items:center;gap:15px;margin-bottom:25px}.number-title b{width:34px;height:34px;background:var(--blue);color:white;border-radius:50%;display:grid;place-items:center}.config-row{display:flex;align-items:center;gap:20px;margin-top:20px}.config-row>strong{font-size:13px;width:70px;flex:none}.config-row .choices{gap:9px}.pill{border-radius:30px;padding:11px 18px;font-size:13px;line-height:1.5}.stepper-input{display:flex;gap:9px;align-items:center}.stepper-input button{width:36px;height:38px;border-radius:9px;background:var(--pale);color:var(--blue)}.stepper-input input{width:65px;height:38px;text-align:center;border:1px solid var(--border);border-radius:9px;font-size:14px}.config-row small{font-size:12px;color:#90a1b9}.difficulty-row{margin-top:20px}.difficulty-row .row{font-size:13px}.difficulty-row input{width:100%;accent-color:var(--green);height:18px;margin-top:10px}.preview-dl{display:grid;grid-template-columns:85px 1fr;gap:25px;font-size:13px;margin:30px 0}.preview-dl dt{color:#91a2ba}.preview-dl dd{margin:0;text-align:right;font-weight:600}.distribution{display:flex;height:24px;margin-top:9px;overflow:hidden}.distribution span{color:white;display:grid;place-items:center;font-size:11px;border-right:3px solid white;white-space:nowrap;min-width:0}.template-button{display:flex;gap:16px;background:#f7f9fb;border-radius:12px;padding:17px;width:100%;margin-top:15px;text-align:left}.template-button small{display:block;color:#94a3bb;font-size:12px}.ai-summary{display:block}.ai-summary .summary-top{display:flex;justify-content:space-between;gap:30px}.duration-box{min-width:160px;background:#ffffff16;border-radius:18px;text-align:center;padding:18px}.duration-box strong{display:block;font-size:30px}.duration-box small{color:#c4ceef;font-size:12px}.ai-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:27px}.ai-metrics div{background:#ffffff12;padding:17px 20px;border-radius:13px}.ai-metrics small{display:block;color:#acbce5;font-size:12px}.ai-metrics strong{font-size:20px}.phase{display:flex;align-items:flex-start;gap:18px;border:1px solid var(--border);background:#f8f9fc;padding:22px;border-radius:15px;margin-top:16px}.phase-number{display:grid;place-items:center;width:43px;height:43px;background:var(--blue);color:white;border-radius:12px;flex:none}.phase p{font-size:13px;line-height:1.6;margin:6px 0 14px}.phase h4{margin:0;font-size:14px}.phase .badge{margin-right:7px;padding:5px 10px;font-size:11px}.phase-status{margin-left:auto;color:#93a3bb;white-space:nowrap;font-size:12px}.switch-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:14px;gap:15px}.switch-row small{display:block;font-size:12px;color:#8d9eb6}.switch{appearance:none;width:48px;height:28px;border-radius:30px;background:#e0e6ef;position:relative;cursor:pointer;flex:none;transition:.2s}.switch:before{content:'';position:absolute;left:4px;top:4px;width:20px;height:20px;background:white;border-radius:50%;transition:.2s}.switch:checked{background:var(--blue)}.switch:checked:before{left:24px}.knowledge-row{display:flex;gap:16px;align-items:center;background:#f7f9fb;border-radius:13px;padding:20px;margin-top:13px}.knowledge-row strong{font-size:13px}.knowledge-row small{display:block;font-size:12px;color:#8a9bb5}.knowledge-row .bar-track{width:100px;margin-left:auto;height:8px;flex:none}.exam-header{padding:20px max(25px,calc((100% - 1250px)/2));height:98px;gap:24px}.exam-heading{margin-right:auto}.exam-heading h3{font-size:16px}.exam-heading p{font-size:12px;color:#92a2ba}.exam-header .secondary{font-size:13px;padding:13px 18px;background:#f8f9fb;border-radius:12px}.timer-pill{background:var(--pale);color:var(--blue);padding:10px 20px;border-radius:13px;display:flex;gap:13px;align-items:center}.timer-pill strong{display:block;font-size:20px;line-height:1.2}.timer-pill small{font-size:12px;color:#8294dd}.exam-progress{height:7px;background:var(--pale)}.exam-progress span{display:block;height:100%;background:var(--blue);transition:width .2s}.exam-layout{max-width:1300px;margin:35px auto;display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:28px;padding:0 25px;align-items:start}.exam-main{padding:36px}.question-meta{display:flex;align-items:center;gap:12px;margin-bottom:30px}.question-meta .tag{margin:0;padding:10px 18px}.question-meta .tag:first-child{background:var(--blue);color:white}.question-meta .question-time{margin-left:auto;white-space:nowrap}.math-question{font-size:17px;font-weight:650;line-height:1.8;margin-bottom:17px}.math-diagram{width:100%;height:250px;display:block;background:#f7f9fb;border-radius:17px;margin-bottom:27px}.math-diagram text{font:12px sans-serif;fill:#8b9cb5}.exam-options{display:grid;gap:13px}.exam-option{display:flex;align-items:center;gap:25px;border:1px solid var(--border);border-radius:14px;padding:17px 22px;text-align:left;min-height:70px;font-size:15px}.letter{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#f0f3f8;color:#70809a;font-size:13px;font-weight:600;flex:none}.exam-option.active{background:var(--pale);border-color:var(--blue);color:var(--navy);font-weight:600}.exam-option.active .letter{background:var(--blue);color:white}.exam-option.correct{border-color:var(--green);background:var(--softgreen)}.exam-option.incorrect{border-color:var(--red);background:var(--softred)}.exam-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:30px}.exam-controls>div{display:flex;gap:12px}.exam-controls .primary,.exam-controls .secondary{padding:15px 22px;font-size:13px;border-radius:12px}.exam-aside .card{padding:28px;border-radius:21px}.answer-card{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:22px 0}.answer-card button{position:relative;aspect-ratio:1;border-radius:10px;background:#f0f3f8;color:#95a4b9;font-size:13px;font-weight:600}.answer-card button.answered{background:var(--blue);color:white}.answer-card button.correct{background:var(--green);color:white}.answer-card button.incorrect{background:var(--red);color:white}.answer-card button.current{border:1px solid var(--blue);background:var(--pale);color:var(--blue)}.answer-card button.marked:after{content:'';position:absolute;right:2px;top:2px;width:7px;height:7px;border-radius:50%;background:var(--orange)}.exam-aside .primary{width:100%;font-size:14px;padding:16px}.exam-aside h3{font-size:16px}.legend{display:flex;gap:12px;font-size:11px;color:#98a7bc}.legend span{display:flex;gap:5px;align-items:center}.legend i{display:block;width:12px;height:12px;border-radius:50%;background:var(--blue)}.exam-aside .line-chart{height:100px;margin-top:35px}.exam-aside small{color:#8d9fba;font-size:12px}.exam-stage{display:flex;align-items:center;gap:15px;margin-top:20px;font-size:13px}.exam-stage small{display:block;font-size:11px}.exam-stage .step-round.active{background:var(--blue);color:white}.exam-stage .step-round.done{background:var(--green);color:white}.exam-tip{margin-top:26px;border:1px solid #a5eccd}.scratch{display:none;margin-top:22px}.scratch.open{display:block}.scratch textarea{width:100%;min-height:160px;border:1px solid var(--border);border-radius:14px;padding:18px;font:15px/1.8 inherit;resize:vertical;background:repeating-linear-gradient(white,white 29px,#edf1f8 30px);color:var(--ink)}.short-answer{width:100%;border:1px solid var(--border);border-radius:14px;min-height:65px;padding:18px;font:inherit}.exam-controls button:disabled{opacity:.4;cursor:not-allowed}.result-wrap{max-width:1250px;margin:45px auto;padding:0 24px}.result-overview{display:flex;align-items:center;gap:38px;padding:42px}.score-circle{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--blue) calc(var(--value)*1%),var(--pale) 0);display:grid;place-items:center;flex:none}.score-circle>div{width:132px;height:132px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;flex-direction:column}.score-circle strong{font-size:43px;font-weight:500;line-height:1.15}.score-circle small{color:#94a3bb;font-size:15px}.result-stats{flex:1;min-width:0}.result-stats>p{margin-bottom:32px;font-size:13px}.result-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.result-stat-row>div{background:#f7f9fb;border-radius:14px;padding:17px}.result-stat-row small{color:#8fa0b9;font-size:12px;display:block}.result-stat-row strong{font-size:23px;white-space:nowrap}.percentile{padding:25px;background:var(--pale);color:var(--navy);border-radius:18px;min-width:170px}.percentile strong{display:block;font-size:34px;color:var(--blue);margin-top:15px}.percentile small{color:#7d8ed0;font-size:12px}.result-wrap .two-col{grid-template-columns:1.65fr 1fr}.bar-chart{display:flex;align-items:flex-end;gap:10px;height:165px;border-bottom:1px solid #e0e7f1;margin-top:35px;padding:0 10px}.bar-chart .col{flex:1;background:var(--green);min-height:5px;position:relative}.bar-chart .col.wrong{background:var(--red)}.bar-chart .col span{position:absolute;top:100%;font-size:10px;color:#8c9cb5;left:50%;transform:translateX(-50%);padding-top:8px}.result-wrap .card{padding:33px}.result-wrap .result-overview{padding:42px}.result-wrap .dark-card .primary,.result-wrap .dark-card .secondary{width:100%;margin-top:15px;font-size:14px}.result-wrap .bar-chart-card{padding-bottom:45px}.demo-note{font-size:12px;color:#98a6b9;margin-top:18px}.complete-symbol{text-align:center;flex:none;font-size:15px}.complete-symbol>div{width:108px;height:108px;border-radius:50%;background:var(--softgreen);color:var(--green);display:grid;place-items:center;margin-bottom:13px}.complete-symbol svg{width:45px;height:45px;fill:var(--green);stroke:white;background:var(--green);border-radius:50%;padding:8px}.training-overview{display:flex;gap:32px;align-items:center}.training-overview .result-stats h2{font-size:23px;margin-bottom:8px}.training-overview .result-stats>p{font-size:13px;margin-bottom:24px}.result-action-list{display:grid;gap:12px;min-width:165px}.result-action-list .primary,.result-action-list .secondary{font-size:12px}.error-item{display:flex;gap:18px;background:#f8f9fc;border:1px solid var(--border);border-radius:16px;padding:23px;margin-top:18px}.error-item .num{color:var(--red);background:var(--softred);padding:12px 16px;border-radius:12px;align-self:start;font-weight:650}.error-item h4{font-size:14px;margin:0}.error-item p{font-size:12px;margin:4px 0 14px}.error-item .primary{padding:11px 15px;align-self:start;margin-left:auto;font-size:12px;white-space:nowrap}.error-item .badge{font-size:11px;padding:5px 10px}.error-item small{font-size:11px;color:#8b9bb5}.empty-state{padding:35px;text-align:center;color:#8293ad}.dialog-actions{display:flex;gap:12px;margin-top:22px;justify-content:flex-end}.dialog-wide{max-width:580px;width:90vw}.dialog-wide textarea,.dialog-wide input{width:100%;padding:13px;border:1px solid var(--border);border-radius:10px;font:inherit}.export-report{display:none}.icon-svg{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.learning .brand .mark{font-size:0}.learning .brand .mark svg{width:27px;height:27px}.small-muted{color:#92a2b9;font-size:12px}
@media(min-width:1550px){.learning-content{padding:45px 50px}.sidebar{width:245px}.learning{padding-left:245px}}@media(max-width:1150px){.sidebar{width:195px;padding:25px 12px}.learning{padding-left:195px}.learning-content{padding:30px 25px}.training-methods{grid-template-columns:repeat(2,1fr)}.module-grid{grid-template-columns:repeat(2,1fr)}.learning .card{padding:25px}.stats-grid{gap:13px}.stat-card{padding:20px}.stat-card.compact{flex-wrap:wrap}.two-col,.builder-grid{grid-template-columns:1.3fr 1fr}.heading-actions{flex-wrap:wrap}.page-heading{flex-wrap:wrap}.result-overview{gap:24px}.percentile{min-width:130px;padding:20px}.result-stat-row{gap:9px}.result-stat-row>div{padding:13px}.result-stat-row strong{font-size:20px}.training-overview{flex-wrap:wrap}.result-action-list{display:flex;width:100%;flex-wrap:wrap}.toolbar{flex-wrap:wrap}.toolbar input{margin-left:0}.exam-layout{grid-template-columns:minmax(0,1fr) 270px;gap:22px}.exam-main{padding:28px}.exam-controls{flex-wrap:wrap}.exam-aside .card{padding:22px}.phase{gap:12px;padding:18px}.phase-status{display:none}.bar-row{grid-template-columns:100px 1fr 36px;gap:10px}.card-title{flex-wrap:wrap}.banner{grid-template-columns:1fr 175px}.weakness .row{flex-wrap:wrap}.weakness strong{min-width:70%}.ai-metrics{gap:12px}}
@media(max-width:800px){.sidebar{width:75px;padding:20px 8px}.sidebar .brand{padding:0;justify-content:center}.sidebar .brand>div{display:none}.sidebar nav{gap:12px}.sidebar nav a,.sidebar nav button{justify-content:center;padding:14px}.sidebar nav .nav-label,.sidebar nav em,.side-recommend,.student-chip{display:none}.learning{padding-left:75px}.learning-content{padding:25px 20px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col,.equal-cols,.builder-grid,.result-wrap .two-col{grid-template-columns:1fr}.banner{grid-template-columns:1fr}.banner .banner-buttons{display:flex}.ai-summary .summary-top{gap:15px}.duration-box{min-width:100px}.ai-metrics{grid-template-columns:repeat(2,1fr)}.result-overview{flex-wrap:wrap}.result-stats{min-width:240px}.percentile{width:100%;display:flex;gap:15px;align-items:center}.percentile strong{margin:0}.exam-layout{grid-template-columns:1fr}.exam-aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.exam-header{height:auto;flex-wrap:wrap;padding:18px 22px}.exam-heading{flex:1}.exam-header .timer-pill{padding:8px 15px}.exam-header .limit{display:none}.exam-layout{margin-top:25px}.exam-aside .notice{margin:0}.toolbar{gap:12px}.toolbar input{width:100%}.range-labels{font-size:11px}}
@media(max-width:520px){.learning{padding-left:0;padding-top:69px}.sidebar{height:69px;width:100%;padding:12px 15px;flex-direction:row;align-items:center;justify-content:space-between;bottom:auto;border-bottom:1px solid #edf0f7}.sidebar .mark{width:40px;height:40px}.sidebar nav{display:flex;margin:0;gap:4px}.sidebar nav a,.sidebar nav button{padding:10px}.sidebar nav>*:nth-child(n+4){display:none}.learning-content{padding:23px 16px}.page-heading h1{font-size:24px}.page-heading p{font-size:13px}.learning .card{padding:22px;border-radius:19px}.training-methods,.module-grid{grid-template-columns:1fr}.stats-grid{gap:12px}.stat-card{padding:18px}.stat-card.compact{gap:10px}.stat-card.compact strong{font-size:14px}.colored-icon{width:40px;height:40px}.stat-card small{font-size:12px}.banner{padding:25px;gap:22px}.banner h2{font-size:21px}.banner-meta{flex-wrap:wrap;gap:10px}.banner .banner-buttons{display:grid}.learning .primary,.learning .secondary{padding:13px 17px}.method h3{margin-top:17px}.module-card{min-height:250px}.toolbar select{max-width:100%}.toolbar .segmented button{padding:10px 12px}.config-row{flex-wrap:wrap;gap:12px}.config-row>strong{width:100%}.builder-grid .card{padding:22px}.phase{gap:12px;padding:17px}.phase-number{width:35px;height:35px;border-radius:10px}.phase p{font-size:12px}.ai-summary .summary-top{display:block}.duration-box{display:none}.ai-metrics div{padding:14px}.knowledge-row{padding:16px;gap:10px}.knowledge-row .bar-track{width:70px}.exam-layout{padding:0 14px;gap:20px}.exam-main{padding:23px}.question-meta{gap:8px;flex-wrap:wrap;margin-bottom:23px}.question-meta .tag{padding:8px 12px;font-size:12px}.question-meta .question-time{margin-left:0}.math-question{font-size:16px}.math-diagram{height:210px}.exam-option{padding:15px;gap:15px;font-size:14px;min-height:66px}.exam-controls>div{flex:1}.exam-controls>div:last-child{justify-content:flex-end}.exam-controls .primary,.exam-controls .secondary{padding:12px 15px;font-size:12px}.exam-controls{gap:16px}.exam-aside{grid-template-columns:1fr}.exam-aside .answer-card{grid-template-columns:repeat(8,1fr)}.result-wrap{padding:0 16px;margin:25px auto}.result-wrap .result-overview{padding:25px;justify-content:center}.result-stat-row{grid-template-columns:repeat(2,1fr)}.score-circle{width:130px;height:130px}.score-circle>div{width:107px;height:107px}.result-stats>p{text-align:center;margin-bottom:20px}.result-wrap .card{padding:24px}.bar-row{grid-template-columns:90px 1fr 34px;font-size:12px;gap:8px}.bar-chart{gap:6px;height:140px;padding:0}.training-overview{justify-content:center;gap:23px}.training-overview .result-stats h2{text-align:center;font-size:21px}.result-action-list{display:grid;grid-template-columns:1fr;width:100%}.error-item{padding:17px;gap:12px;flex-wrap:wrap}.error-item>div:nth-child(2){flex:1}.error-item .primary{margin-left:auto}.radar{height:290px;margin-bottom:25px}.heading-actions{width:100%}.heading-actions button{flex:1}.stats-grid .row{gap:7px}.dialog-actions .primary,.dialog-actions .secondary{padding:12px 16px}.exam-header .secondary{padding:11px 13px}.exam-header{gap:13px}.exam-heading h3{font-size:14px}}
@media print{.sidebar,.heading-actions,.demo-note,.result-action-list{display:none!important}.learning{padding:0}.learning-content{padding:0}.card{break-inside:avoid;box-shadow:none!important;border:1px solid #eee}.two-col{display:block}.stack{display:block}.stack .card{margin-bottom:20px}body{background:white}}

/* ==================== BATCH 3 STYLES: MISTAKES & SOCRATIC GUIDE ==================== */
.mistakes-top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.mistakes-top-header h2 { margin: 0; font-size: 24px; color: var(--navy); }
.mistakes-top-header .subtitle { margin: 6px 0 0; font-size: 14px; color: #64748b; }
.mistakes-top-header .heading-actions { display: flex; gap: 12px; }
.mistakes-top-header .heading-actions button { border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }

.mistakes-nav-tabs { display: flex; gap: 10px; margin-bottom: 24px; border-bottom: 1px solid #e2e8f0; padding-bottom: 14px; }
.tab-pill { border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 600; border: 1px solid #e2e8f0; background: white; color: #64748b; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
.tab-pill:hover { border-color: #cbd5e1; color: #334155; }
.tab-pill.active { background: var(--blue); color: white; border-color: var(--blue); box-shadow: 0 4px 12px rgba(62,87,223,0.25); }

.mistakes-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.mistakes-left-panel { display: flex; flex-direction: column; gap: 20px; }
.topic-nav-card { padding: 18px 14px; border-radius: 16px; }
.panel-card-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.panel-card-head h3 { margin: 0; font-size: 15px; color: var(--navy); }
.panel-card-head small { color: #889bb5; font-size: 12px; }
.topic-list { display: flex; flex-direction: column; gap: 6px; }
.topic-item { display: flex; align-items: center; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid transparent; text-align: left; cursor: pointer; transition: all 0.15s; }
.topic-item:hover { background: #eff6ff; }
.topic-item.active { background: #eff6ff; border-color: #bfdbfe; color: var(--blue); }
.topic-bar { width: 4px; height: 26px; border-radius: 2px; background: transparent; margin-right: 12px; }
.topic-item.active .topic-bar { background: var(--blue); }
.topic-info { flex: 1; }
.topic-info strong { display: block; font-size: 14px; color: #1e293b; }
.topic-item.active .topic-info strong { color: var(--blue); }
.topic-info small { color: #889bb5; font-size: 12px; }
.topic-arrow { color: #94a3b8; font-size: 18px; font-weight: 700; }

.rule-card { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 18px; border-radius: 16px; }
.rule-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: #15803d; }
.rule-card p { margin: 0; font-size: 12px; line-height: 1.6; color: #166534; }

.list-filter-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: white; border-radius: 12px; margin-bottom: 18px; font-size: 13px; color: #475569; border: 1px solid #e8edf5; }
.btn-clear-filter { background: #e2e8f0; border: none; border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: #475569; }
.btn-clear-filter:hover { background: #cbd5e1; }
.list-total-tag { margin-left: auto; color: #64748b; font-size: 13px; }

.mistake-cards-stack { display: flex; flex-direction: column; gap: 20px; }
.mistake-card { padding: 24px; border-radius: 18px; border: 1px solid #e8edf5; transition: transform 0.2s, box-shadow 0.2s; }
.mistake-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.m-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.m-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.m-badge { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.m-badge.topic { background: #eff6ff; color: #2563eb; }
.m-badge.pink { background: #fff1f2; color: #e11d48; }
.m-badge.yellow { background: #fffbeb; color: #d97706; }
.m-badge.purple { background: #faf5ff; color: #9333ea; }
.m-badge.red { background: #fee2e2; color: #dc2626; }
.m-badge.difficulty { background: #f1f5f9; color: #475569; }
.m-source { color: #94a3b8; font-size: 12px; }

.m-question h4 { font-size: 16px; line-height: 1.5; color: #1e293b; margin: 0 0 16px; cursor: pointer; }
.m-question h4:hover { color: var(--blue); }

.m-answers-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ans-box { padding: 12px 16px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.ans-box.user { background: #fef2f2; border: 1px solid #fee2e2; }
.ans-box.user .ans-label { color: #dc2626; font-size: 12px; font-weight: 700; }
.ans-box.user .ans-val { color: #991b1b; font-size: 15px; font-weight: 600; }
.ans-box.correct { background: #f0fdf4; border: 1px solid #dcfce7; }
.ans-box.correct .ans-label { color: #16a34a; font-size: 12px; font-weight: 700; }
.ans-box.correct .ans-val { color: #166534; font-size: 15px; font-weight: 600; }

.m-analysis-box { display: flex; gap: 10px; padding: 12px 16px; background: #f8fafc; border-radius: 12px; color: #475569; font-size: 13px; line-height: 1.6; margin-bottom: 18px; border: 1px solid #f1f5f9; }
.m-analysis-box .info-icon { color: #3b82f6; font-size: 16px; font-weight: bold; flex-shrink: 0; }
.m-analysis-box p { margin: 0; }

.m-card-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 16px; }
.m-progress-stepper { display: flex; align-items: center; gap: 12px; }
.step-dots { display: flex; align-items: center; gap: 6px; }
.step-dots .dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: #e2e8f0; color: #64748b; font-weight: 700; }
.step-dots .dot.done { background: #22c55e; color: white; }
.step-dots .line { width: 14px; height: 2px; background: #e2e8f0; }
.step-dots .line.done { background: #22c55e; }
.step-text { font-size: 13px; color: #64748b; }
.m-actions { display: flex; gap: 10px; }
.btn-video { background: #f8fafc; border: 1px solid #cbd5e1; color: #334155; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-video:hover { background: #f1f5f9; }
.btn-blue { background: var(--blue); color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-blue:hover { background: #3146b9; }
.btn-orange { background: #f59e0b; color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-orange:hover { background: #d97706; }
.btn-red { background: #ef4444; color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-red:hover { background: #dc2626; }
.btn-purple { background: #9333ea; color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-purple:hover { background: #7e22ce; }

/* Reason view */
.reason-overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.reason-stat-card { padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0; background: white; text-align: left; cursor: pointer; transition: all 0.2s; }
.reason-stat-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.reason-stat-card.active { border-color: var(--blue); box-shadow: 0 4px 16px rgba(62,87,223,0.12); }
.r-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.r-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.r-icon.red { background: #fee2e2; color: #dc2626; }
.r-icon.orange { background: #fef3c7; color: #d97706; }
.r-icon.blue { background: #dbeafe; color: #2563eb; }
.r-icon.purple { background: #f3e8ff; color: #9333ea; }
.r-count { font-size: 26px; font-weight: 800; color: #1e293b; }
.r-title { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.r-sub { font-size: 12px; color: #64748b; margin: 0 0 12px; }
.r-bar-track { width: 100%; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.r-bar-track span { display: block; height: 100%; border-radius: 3px; }

.reason-table-card { padding: 24px; border-radius: 18px; }
.reason-table-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.rth-title { display: flex; align-items: center; gap: 12px; }
.rth-title h3 { margin: 0; font-size: 17px; color: var(--navy); }
.rth-title small { color: #64748b; font-size: 12px; }
.table-responsive { overflow-x: auto; }
.m-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-table th { text-align: left; padding: 12px 14px; color: #64748b; font-weight: 600; border-bottom: 1px solid #e2e8f0; font-size: 13px; }
.m-table td { padding: 16px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.m-num-tag { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.m-num-tag.red { background: #fee2e2; color: #dc2626; }
.m-num-tag.orange { background: #fef3c7; color: #d97706; }
.m-num-tag.blue { background: #dbeafe; color: #2563eb; }
.m-num-tag.purple { background: #f3e8ff; color: #9333ea; }
.m-table-summary { color: #1e293b; font-weight: 500; text-decoration: none; }
.m-table-summary:hover { color: var(--blue); }
.m-table-topic { color: #2563eb; background: #eff6ff; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.table-dots { display: flex; align-items: center; gap: 6px; }
.table-dots .tdot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; }
.table-dots .tdot.done { background: #22c55e; }
.table-dots small { color: #64748b; margin-left: 4px; font-size: 12px; }
.m-link-btn { display: inline-block; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; background: #eff6ff; color: #2563eb; text-decoration: none; }
.m-link-btn:hover { background: #dbeafe; }

/* Time view */
.time-sorted-card { padding: 24px; border-radius: 18px; }
.time-list-head { margin-bottom: 18px; }
.time-list-head h3 { margin: 0; font-size: 17px; color: var(--navy); }
.time-list-head small { color: #64748b; font-size: 12px; }
.time-list { display: flex; flex-direction: column; gap: 14px; }
.time-row { display: flex; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 12px; background: #f8fafc; border: 1px solid #f1f5f9; }
.tr-date { width: 110px; }
.tr-date strong { display: block; font-size: 13px; color: #1e293b; }
.tr-date small { color: #94a3b8; font-size: 11px; }
.tr-body { flex: 1; }
.tr-tags { display: flex; gap: 6px; margin-bottom: 4px; }
.tr-text { margin: 0 0 6px; font-size: 14px; color: #1e293b; cursor: pointer; }
.tr-text:hover { color: var(--blue); }
.tr-meta { font-size: 12px; color: #64748b; }
.tr-meta .red { color: #dc2626; }
.tr-meta .green { color: #16a34a; }

/* Socratic Guide Layout */
.socratic-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.s-top-left { display: flex; align-items: center; gap: 16px; }
.s-back-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: white; border: 1px solid #e2e8f0; color: #475569; font-size: 13px; font-weight: 600; text-decoration: none; }
.s-back-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.s-title-box h2 { margin: 0; font-size: 18px; color: var(--navy); }
.s-title-box small { color: #64748b; font-size: 12px; }
.s-top-right { display: flex; align-items: center; gap: 10px; }
.s-badge-mode { display: flex; align-items: center; gap: 6px; background: #eff6ff; color: #2563eb; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.s-badge-finish { display: flex; align-items: center; gap: 6px; background: #dcfce7; color: #16a34a; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.s-badge-variant { background: #f1f5f9; color: #64748b; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }

.socratic-layout { display: grid; grid-template-columns: 1fr 310px; gap: 24px; align-items: start; }
.socratic-main { display: flex; flex-direction: column; gap: 20px; }
.socratic-q-card { padding: 22px; border-radius: 18px; }
.sq-top { margin-bottom: 12px; }
.sq-text h3 { font-size: 17px; line-height: 1.5; color: #1e293b; margin: 0 0 16px; }
.red-box { background: #fef2f2; border: 1px solid #fee2e2; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; color: #b91c1c; font-size: 13px; margin-bottom: 12px; }
.sq-lock-box { background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; color: #475569; font-size: 13px; }
.sq-lock-box.soft { background: #f8fafc; border: 1px dashed #e2e8f0; color: #94a3b8; }
.sq-unlock-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px; padding: 16px 20px; }
.unlock-head { display: flex; align-items: center; gap: 8px; color: #16a34a; font-size: 15px; margin-bottom: 6px; }
.unlock-msg { color: #166534; font-size: 14px; margin: 0; line-height: 1.5; }

.socratic-think-card { padding: 24px; border-radius: 18px; }
.st-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #f1f5f9; margin-bottom: 20px; }
.st-title { display: flex; align-items: center; gap: 12px; }
.st-icon { width: 36px; height: 36px; border-radius: 10px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; }
.st-icon.green { background: #dcfce7; color: #16a34a; }
.st-title h3 { margin: 0; font-size: 16px; color: var(--navy); }
.st-title small { color: #64748b; font-size: 12px; }
.s-steps-indicator { display: flex; align-items: center; gap: 8px; }
.s-step { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: #f1f5f9; color: #64748b; }
.s-step.active { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.s-step.done { background: #dcfce7; color: #16a34a; }
.s-line { width: 14px; height: 2px; background: #e2e8f0; }
.s-line.done { background: #86efac; }

.dialogue-flow { display: flex; flex-direction: column; gap: 16px; }
.dialogue-msg { display: flex; gap: 12px; align-items: flex-start; }
.dialogue-msg.user { justify-content: flex-end; }
.avatar-tutor { width: 34px; height: 34px; border-radius: 50%; background: #2563eb; color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-user { width: 34px; height: 34px; border-radius: 50%; background: #f59e0b; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 13px; }
.bubble { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 18px; max-width: 85%; font-size: 14px; line-height: 1.6; color: #334155; }
.bubble p { margin: 0; }
.bubble-tag { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-bottom: 8px; }
.bubble-tag.green { background: #dcfce7; color: #16a34a; }
.bubble-main { margin: 0; font-size: 14px; font-weight: 600; color: #1e293b; }
.user-bubble { background: #2563eb; color: white; border: none; border-radius: 14px 14px 2px 14px; }
.user-bubble p { margin: 0; color: white; }

.s-options-box, .s-param-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; margin-left: 46px; }
.options-hint { font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.s-radio-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; cursor: pointer; transition: all 0.15s; font-size: 14px; color: #334155; }
.s-radio-item:hover { border-color: #93c5fd; background: #f0f9ff; }
.s-radio-item.checked { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.s-radio-item input { display: none; }
.radio-mark { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #94a3b8; display: inline-block; flex-shrink: 0; }
.s-radio-item.checked .radio-mark { border-color: #2563eb; background: radial-gradient(circle, #2563eb 40%, white 45%); }
.pill-values-preview { display: flex; gap: 10px; margin-bottom: 8px; }
.val-pill { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; padding: 4px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; }

.s-hint-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 14px 18px; margin-left: 46px; color: #92400e; font-size: 13px; line-height: 1.5; }
.s-hint-box .hint-header { font-weight: 700; margin-bottom: 6px; }
.s-hint-box p { margin: 0; }

.s-bottom-bar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 14px; margin-left: 46px; }
.s-bottom-bar.space-between { justify-content: space-between; }
.s-btn-hint { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-weight: 600; }
.s-btn-hint:hover { background: #fef3c7; }

.s-scratchpad-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px; margin-left: 46px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.scratchpad-header { font-size: 13px; color: #64748b; margin-bottom: 12px; font-weight: 600; }
.scratchpad-calc p { margin: 4px 0; line-height: 1.6; color: #1e293b; font-size: 15px; }
.scratchpad-calc .calc-res { color: #2563eb; font-weight: 700; }
.scratchpad-sum { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #cbd5e1; color: #1e293b; font-weight: 700; font-size: 15px; }

.green-banner { margin-left: 46px; }

.reflection-card { padding: 24px; border-radius: 18px; }
.ref-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ref-icon { color: #f59e0b; font-size: 18px; font-weight: 800; }
.ref-title h3 { margin: 0; font-size: 16px; color: var(--navy); }
.ref-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ref-box { padding: 16px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.ref-box.wrong { background: #fef2f2; border: 1px solid #fee2e2; }
.ref-box.wrong .rb-label { color: #dc2626; font-size: 12px; font-weight: 700; }
.ref-box.wrong .rb-math { font-size: 18px; font-weight: 800; color: #991b1b; }
.ref-box.wrong .rb-desc { font-size: 12px; color: #dc2626; margin: 0; }
.ref-box.right { background: #f0fdf4; border: 1px solid #dcfce7; }
.ref-box.right .rb-label { color: #16a34a; font-size: 12px; font-weight: 700; }
.ref-box.right .rb-math { font-size: 18px; font-weight: 800; color: #166534; }
.ref-box.right .rb-desc { font-size: 12px; color: #16a34a; margin: 0; }
.ref-input-box { display: flex; flex-direction: column; gap: 8px; }
.ref-input-label { font-size: 13px; font-weight: 600; color: #475569; }
.ref-input { width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; background: #f8fafc; color: #1e293b; box-sizing: border-box; }
.ref-input:focus { border-color: var(--blue); background: white; outline: none; }

.socratic-sidebar { display: flex; flex-direction: column; gap: 18px; }
.s-aside-card { padding: 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.s-aside-head { font-size: 14px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.s-flow-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.s-flow-item { display: flex; gap: 10px; align-items: flex-start; opacity: 0.5; }
.s-flow-item.active { opacity: 1; color: var(--blue); }
.s-flow-item.done { opacity: 1; color: #16a34a; }
.sfi-num { width: 22px; height: 22px; border-radius: 50%; background: #f1f5f9; color: #64748b; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.s-flow-item.active .sfi-num { background: #2563eb; color: white; }
.s-flow-item.done .sfi-num { background: #22c55e; color: white; }
.s-flow-item strong { display: block; font-size: 13px; line-height: 1.3; }
.s-flow-item small { display: block; font-size: 11px; color: #64748b; line-height: 1.3; }

.encouragement-card { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; font-size: 12px; line-height: 1.5; }
.encourage-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #15803d; }
.encouragement-card p { margin: 0; }

.locked-card { background: #f8fafc; color: #64748b; font-size: 12px; }
.locked-dots { display: flex; gap: 8px; margin: 4px 0; }
.locked-dots span { width: 26px; height: 26px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #64748b; }
.locked-text { margin: 0; line-height: 1.5; }

.formula-card { background: #f8fafc; }
.fc-label { font-size: 12px; color: #64748b; margin: 0; }
.formula-display { background: white; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; text-align: center; color: #1e293b; font-size: 13px; }

.timer-card { background: #f0fdf4; border: 1px solid #bbf7d0; }
.big-timer-val { font-size: 32px; font-weight: 800; color: #15803d; letter-spacing: 1px; }
.timer-note { color: #166534; font-size: 12px; }

.action-hot-card { background: #1e293b; color: white; border: none; box-shadow: 0 8px 24px rgba(30,41,59,0.25); }
.hot-badge { font-size: 16px; font-weight: 700; color: #fbbf24; }
.hot-desc { font-size: 12px; color: #cbd5e1; line-height: 1.5; margin: 0; }
.hot-dots { display: flex; gap: 8px; margin: 6px 0 12px; }
.hot-dots span { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: white; }
.btn-glow { background: #3b82f6; color: white; font-weight: 700; padding: 12px; border-radius: 10px; box-shadow: 0 4px 14px rgba(59,130,246,0.4); border: none; cursor: pointer; }
.btn-glow:hover { background: #2563eb; }

.perf-card { font-size: 13px; }
.perf-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f1f5f9; color: #475569; }
.perf-row strong { color: #1e293b; }

.score-card { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 12px; }
.score-badge { font-size: 14px; font-weight: 800; color: #2563eb; }
.score-card p { margin: 0; line-height: 1.5; }

.parent-sync-card { background: #f8fafc; color: #64748b; font-size: 12px; }
.parent-sync-card p { margin: 0; line-height: 1.5; }

/* Video modal */
.video-modal-content { display: flex; flex-direction: column; gap: 14px; }
.video-player-mock { background: #0f172a; border-radius: 14px; padding: 16px; color: white; }
.video-screen { position: relative; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
.video-watermark { font-size: 11px; color: rgba(255,255,255,0.5); }
.video-chalkboard { background: rgba(255,255,255,0.05); padding: 14px; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.2); }
.video-chalkboard h4 { margin: 0 0 8px; font-size: 14px; color: #67e8f9; }
.formula-line { font-family: monospace; color: #fef08a; font-size: 13px; margin: 4px 0; }
.highlight-line { color: #fca5a5; font-size: 12px; margin: 4px 0 0; }
.video-controls-bar { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #cbd5e1; margin-top: 14px; }
.v-play-btn { cursor: pointer; color: white; font-size: 14px; }
.v-scrubber { flex: 1; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden; }
.v-scrubber span { display: block; height: 100%; background: #38bdf8; }
.v-time { font-size: 11px; font-family: monospace; }
.v-hd { background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; font-size: 10px; }

/* Print styles */
@media print {
  @page { size: auto; margin: 15mm; }
  .sidebar, .socratic-top-bar, .mistakes-nav-tabs, .heading-actions, .s-bottom-bar, .socratic-sidebar, .m-actions, .btn-clear-filter, .list-filter-bar button, .demo-note { display: none !important; }
  .learning { padding: 0 !important; }
  .learning-content { padding: 0 !important; }
  .mistakes-grid { display: block !important; }
  .mistakes-left-panel { display: none !important; }
  .mistake-card { break-inside: avoid; border: 1px solid #cbd5e1 !important; box-shadow: none !important; margin-bottom: 20px !important; }
}

/* ==================== BATCH 4 STYLES: VARIANT SESSION, POINTS & PHOTO QA ==================== */
em.points-em { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe; }

/* Variant Session Page */
.variant-session-wrap { padding-bottom: 40px; }
.top-progress-line { width: 100%; height: 4px; background: #e2e8f0; margin-bottom: 20px; border-radius: 2px; overflow: hidden; }
.top-progress-line span { display: block; height: 100%; background: var(--blue); transition: width 0.3s; }
.vs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.vs-h-left { display: flex; align-items: center; gap: 16px; }
.btn-exit-vs { border: 1px solid #e2e8f0; background: white; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.btn-exit-vs:hover { background: #f8fafc; border-color: #cbd5e1; }
.vs-title-box h2 { margin: 0; font-size: 18px; color: var(--navy); }
.vs-title-box small { color: #64748b; font-size: 12px; }
.vs-pills { display: flex; gap: 8px; }
.vs-pill { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #f1f5f9; color: #64748b; }
.vs-pill.active { background: #2563eb; color: white; }
.vs-pill.done { background: #22c55e; color: white; }

.vs-notice-banner { background: #fffbeb; border: 1px solid #fef3c7; border-radius: 12px; padding: 12px 18px; display: flex; align-items: center; gap: 10px; color: #b45309; font-size: 13px; font-weight: 500; margin-bottom: 22px; }
.banner-icon { font-size: 18px; }
.vs-notice-banner p { margin: 0; }

.vs-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.vs-main { display: flex; flex-direction: column; gap: 20px; }
.vs-card { padding: 26px; border-radius: 18px; }
.vsc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.vsc-tags { display: flex; gap: 8px; align-items: center; }
.m-badge.dark-blue { background: #1e3a8a; color: white; }
.vsc-timer { color: #2563eb; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.vsc-question h3 { font-size: 17px; line-height: 1.5; color: #1e293b; margin: 0 0 22px; }
.vsc-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.vsc-opt-btn { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 12px; background: white; border: 1px solid #cbd5e1; text-align: left; cursor: pointer; transition: all 0.15s; font-size: 15px; color: #1e293b; }
.vsc-opt-btn:hover { border-color: #93c5fd; background: #f8fafc; }
.vsc-opt-btn.selected { border-color: #2563eb; background: #eff6ff; color: #1e40af; font-weight: 600; box-shadow: 0 0 0 1px #2563eb; }
.opt-alpha { width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #475569; }
.vsc-opt-btn.selected .opt-alpha { background: #2563eb; color: white; }
.vsc-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid #f1f5f9; }
.btn-scratch { border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }

.vs-sidebar { display: flex; flex-direction: column; gap: 18px; }
.vs-aside-card { padding: 20px; border-radius: 16px; }
.vsa-head { font-size: 14px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vsa-sub { font-size: 12px; color: #64748b; line-height: 1.5; margin: 0 0 14px; }
.vsa-compare-table { background: #f8fafc; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.vsa-row { display: flex; justify-content: space-between; color: #475569; }
.vsa-row.highlight { color: #2563eb; font-weight: 700; }
.master-pill { margin-top: 10px; padding: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; text-align: center; color: #166534; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Points & Shop Page */
.points-page-wrap { padding-bottom: 40px; }
.points-hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-bottom: 28px; }
.points-asset-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: white; padding: 28px; border-radius: 20px; border: none; box-shadow: 0 10px 25px rgba(15,23,42,0.18); }
.pac-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pac-pill { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #93c5fd; }
.pac-badge-lvl { background: #2563eb; color: white; padding: 4px 14px; border-radius: 14px; font-size: 12px; font-weight: 700; }
.pac-number { font-size: 48px; font-weight: 800; letter-spacing: 1px; line-height: 1; margin-bottom: 8px; color: white; }
.pac-sub { font-size: 13px; color: #94a3b8; margin-bottom: 20px; }
.pac-bar-row { display: flex; flex-direction: column; gap: 8px; }
.pbar-track { width: 100%; height: 8px; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; }
.pbar-track span { display: block; height: 100%; background: #facc15; border-radius: 4px; }
.pbar-labels { display: flex; justify-content: space-between; font-size: 12px; color: #94a3b8; }

.points-chart-card { padding: 24px; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.pcc-head { display: flex; justify-content: space-between; align-items: center; }
.pcc-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.pcc-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 120px; padding-top: 16px; }
.pcc-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.pcc-track { width: 14px; height: 90px; background: #eff6ff; border-radius: 7px; display: flex; align-items: flex-end; overflow: hidden; }
.pcc-track span { width: 100%; background: #3b82f6; border-radius: 7px; display: block; }
.pcc-col small { font-size: 11px; color: #64748b; }

.points-section-title { margin: 28px 0 16px; }
.points-section-title h3 { margin: 0; font-size: 18px; color: var(--navy); }

.rewards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.reward-card { padding: 22px 18px; border-radius: 18px; display: flex; flex-direction: column; text-align: left; transition: transform 0.2s, box-shadow 0.2s; }
.reward-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.rc-icon { width: 44px; height: 44px; border-radius: 12px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.rc-title { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 6px; }
.rc-desc { font-size: 12px; color: #64748b; margin: 0 0 16px; flex: 1; }
.rc-bottom { display: flex; justify-content: space-between; align-items: center; }
.rc-cost { font-size: 15px; font-weight: 800; color: #1e293b; }
.btn-exchange { border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; }
.btn-disabled { border-radius: 8px; padding: 6px 12px; font-size: 12px; background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; cursor: not-allowed; }
.btn-wish { border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; background: #f8fafc; border: 1px solid #cbd5e1; color: #334155; cursor: pointer; }

.reward-info-card { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 18px; padding: 22px 18px; color: #1e40af; }
.ric-head { font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.reward-info-card ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.8; color: #1e40af; }

.points-bottom-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; }
.points-guide-card, .points-history-card { padding: 24px; border-radius: 20px; }
.pgc-head, .phc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.pgc-head h3, .phc-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.pgc-list { display: flex; flex-direction: column; gap: 14px; }
.pgc-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #f8fafc; }
.pgc-info { flex: 1; }
.pgc-info strong { display: block; font-size: 13px; color: #1e293b; }
.pgc-info small { color: #64748b; font-size: 11px; }
.pgc-gain { font-size: 13px; font-weight: 700; color: #d97706; }
.phc-title { display: flex; align-items: center; gap: 8px; }
.btn-text { background: none; border: none; color: #2563eb; font-size: 12px; cursor: pointer; }
.phc-list { display: flex; flex-direction: column; gap: 12px; }
.phc-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.phc-sign { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.phc-sign.green { background: #dcfce7; color: #16a34a; }
.phc-sign.red { background: #fee2e2; color: #dc2626; }
.phc-info { flex: 1; }
.phc-info strong { display: block; font-size: 13px; color: #1e293b; }
.phc-info small { color: #94a3b8; font-size: 11px; }
.phc-amount.green { color: #16a34a; font-size: 14px; font-weight: 700; }
.phc-amount.red { color: #dc2626; font-size: 14px; font-weight: 700; }

/* Exchange Modal */
.exchange-modal-body { display: flex; flex-direction: column; gap: 16px; }
.ex-item-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; }
.ex-icon { font-size: 28px; }
.ex-info { flex: 1; }
.ex-info h4 { margin: 0 0 4px; font-size: 15px; color: #1e293b; }
.ex-info p { margin: 0; font-size: 12px; color: #64748b; }
.ex-cost { font-size: 16px; font-weight: 800; color: #1e293b; }
.ex-balance-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.eb-row { display: flex; justify-content: space-between; font-size: 13px; color: #475569; }
.eb-row.total { border-top: 1px dashed #e2e8f0; padding-top: 8px; font-size: 14px; font-weight: 700; }
.eb-row .red { color: #dc2626; }
.eb-row .blue { color: #2563eb; }
.ex-flow-card { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 14px 18px; font-size: 12px; color: #92400e; }
.efc-title { font-weight: 700; margin-bottom: 6px; }
.ex-flow-card ol { margin: 0; padding-left: 18px; line-height: 1.6; }
.ex-msg-box { display: flex; flex-direction: column; gap: 6px; }
.ex-msg-box label { font-size: 12px; font-weight: 600; color: #475569; }
.ex-msg-box textarea { padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; width: 100%; box-sizing: border-box; resize: vertical; }

/* Photo QA & Guide */
.photo-qa-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.upload-card { padding: 36px 20px; border-radius: 20px; border: 2px dashed #bfdbfe; background: #f8fafc; text-align: center; }
.upload-cloud-icon { font-size: 36px; color: #3b82f6; display: inline-block; margin-bottom: 8px; }
.upload-dropzone h4 { margin: 0 0 6px; font-size: 16px; color: var(--navy); }
.upload-dropzone p { margin: 0 0 20px; font-size: 13px; color: #64748b; }
.upload-btns { display: flex; justify-content: center; gap: 14px; }

.result-card { padding: 24px; border-radius: 20px; margin-top: 20px; }
.rc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.rch-title { display: flex; align-items: center; gap: 8px; }
.rch-title h3 { margin: 0; font-size: 16px; color: var(--navy); }
.rc-content { display: flex; gap: 18px; margin-bottom: 16px; }
.rc-thumb-mock { width: 140px; height: 110px; border-radius: 12px; overflow: hidden; background: #1e293b; position: relative; flex-shrink: 0; }
.photo-preview-box { width: 100%; height: 100%; background: linear-gradient(45deg, #1e293b, #334155); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; }
.math-photo-overlay { text-align: center; font-weight: 600; color: #38bdf8; }
.rc-text-box { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rc-label { color: #64748b; font-size: 12px; }
.rc-problem { font-size: 14px; line-height: 1.6; color: #1e293b; margin: 0 0 8px; font-weight: 500; }
.rc-edit-tip { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 10px 14px; border-radius: 8px; }

.mode-select-card, .record-card, .tips-card { padding: 22px; border-radius: 18px; }
.msc-head, .rec-head, .tips-head { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.mode-options { display: flex; flex-direction: column; gap: 10px; }
.mode-radio { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: 12px; cursor: pointer; transition: all 0.15s; background: white; }
.mode-radio:hover { border-color: #93c5fd; background: #f8fafc; }
.mode-radio.checked { border-color: #2563eb; background: #eff6ff; }
.mode-radio input { display: none; }
.mr-content strong { display: block; font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.mr-content small { display: block; font-size: 11px; color: #64748b; line-height: 1.4; }

.rec-list { display: flex; flex-direction: column; gap: 12px; }
.rec-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; }
.rec-info { flex: 1; }
.rec-info strong { display: block; font-size: 13px; color: #1e293b; }
.rec-info small { color: #94a3b8; font-size: 11px; }
.rec-status.done { width: 20px; height: 20px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.tips-card ul { margin: 0; padding-left: 18px; font-size: 12px; color: #64748b; line-height: 1.8; }

.table-mini-card { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tmc-row { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; background: #f8fafc; }


/* ==========================================================================
   BATCH 5: SETTINGS, REMINDER MODAL, DUAL-MODE MISTAKES & DIRECT SOLUTION
   ========================================================================== */

/* Settings Page */
.settings-page-wrap { max-width: 1200px; margin: 0 auto; padding-bottom: 40px; }
.settings-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.settings-left-col, .settings-right-col { display: flex; flex-direction: column; gap: 20px; }

/* Settings Hero Card (Daily Reminder) */
.settings-hero-card {
  border: 2px solid #3b82f6;
  border-radius: 20px;
  padding: 24px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
}
.shc-top { display: flex; justify-content: space-between; align-items: center; }
.shc-iconbox {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.shc-title h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--navy); }
.shc-title p { margin: 0; font-size: 12px; color: #64748b; }

.shc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #475569; font-weight: 500; }
.shc-time-box {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
  color: #1e293b;
  font-size: 15px;
  transition: all 0.15s;
}
.shc-time-box:hover { border-color: #3b82f6; background: #eff6ff; }
.icon-refresh { font-size: 13px; color: #64748b; }

.shc-pills { display: flex; gap: 10px; }
.shc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.shc-pill.active { background: #eff6ff; border-color: #3b82f6; color: #2563eb; font-weight: 600; }

.shc-days { display: flex; gap: 8px; }
.day-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: #f1f5f9;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.day-dot.active { background: #2563eb; color: white; }

.streak-encourage-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: #15803d;
  font-weight: 500;
}

/* Switch UI Component */
.switch-ui {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.switch-ui input { opacity: 0; width: 0; height: 0; }
.switch-ui .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .25s;
  border-radius: 24px;
}
.switch-ui .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switch-ui input:checked + .slider { background-color: #2563eb; }
.switch-ui input:checked + .slider:before { transform: translateX(20px); }

/* Settings Form Cards */
.settings-card { padding: 24px; border-radius: 20px; background: white; border: 1px solid #e2e8f0; }
.sc-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 20px; }
.sc-rows { display: flex; flex-direction: column; gap: 18px; }
.sc-item { display: flex; justify-content: space-between; align-items: center; }
.sc-info h4 { margin: 0 0 3px; font-size: 14px; font-weight: 600; color: #1e293b; }
.sc-info p { margin: 0; font-size: 12px; color: #64748b; }
.sc-select { padding: 6px 12px; border-radius: 8px; border: 1px solid #cbd5e1; background: #f8fafc; font-size: 13px; color: #1e293b; font-weight: 600; cursor: pointer; }

/* Right Aside Cards */
.account-card { padding: 24px; border-radius: 20px; background: white; border: 1px solid #e2e8f0; }
.ac-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 18px; }
.ac-user-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.avatar-big { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #e2e8f0; }
.ac-user-info strong { display: block; font-size: 15px; color: #1e293b; }
.ac-user-info small { color: #64748b; font-size: 12px; }
.btn-change-avatar { margin-left: auto; padding: 6px 14px; font-size: 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; cursor: pointer; }
.ac-list { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.ac-item { display: flex; justify-content: space-between; align-items: center; }
.ac-label { color: #64748b; }
.ac-val { color: #1e293b; font-weight: 500; }
.btn-text-blue { background: none; border: none; color: #2563eb; cursor: pointer; font-size: 12px; font-weight: 600; padding: 0; }

.parent-binding-card { padding: 24px; border-radius: 20px; background: white; border: 1px solid #e2e8f0; }
.pbc-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.pbc-bound-box { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; margin-bottom: 16px; }
.pbc-user { display: flex; align-items: center; gap: 10px; }
.avatar-parent { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pbc-user strong { display: block; font-size: 13px; color: #1e293b; }
.pbc-user small { color: #64748b; font-size: 11px; }
.pbc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-light-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; }

.reward-setting-card { padding: 24px; border-radius: 20px; background: white; border: 1px solid #e2e8f0; }
.rsc-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.rsc-desc { font-size: 12px; color: #64748b; margin: 0 0 14px; }
.btn-warm-orange { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border-radius: 10px; background: #fff7ed; border: 1px solid #ffedd5; color: #c2410c; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; box-sizing: border-box; }
.btn-warm-orange:hover { background: #ffedd5; }

/* Reminder Modal */
.reminder-modal-body { display: flex; flex-direction: column; gap: 16px; }
.rm-sub { color: #64748b; font-size: 13px; margin: 0; }
.rm-section { display: flex; flex-direction: column; gap: 8px; }
.rm-label { font-size: 13px; font-weight: 700; color: #1e293b; }
.rm-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rm-preset-btn { padding: 10px 0; text-align: center; border-radius: 10px; border: 1px solid #e2e8f0; background: white; font-size: 14px; font-weight: 600; color: #334155; cursor: pointer; transition: all 0.15s; }
.rm-preset-btn.active { background: #eff6ff; border-color: #2563eb; color: #2563eb; font-weight: 700; }
.rm-custom-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; font-size: 13px; color: #475569; }
.rm-custom-row input[type="time"] { font-weight: 700; font-size: 15px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 12px; color: #1e293b; }
.rm-channel-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: white; cursor: pointer; transition: all 0.15s; user-select: none; }
.rm-channel-card.checked { border-color: #2563eb; background: #eff6ff; }
.rm-chk-mark { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 2px; }
.rm-channel-card.checked .rm-chk-mark { background: #2563eb; border-color: #2563eb; color: white; }
.rmc-info strong { display: block; font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.rmc-info small { color: #64748b; font-size: 11px; }

/* Direct Solution Page */
.direct-solution-wrap { min-height: 100vh; background: #f8fafc; }
.direct-solution-container { max-width: 1200px; margin: 24px auto; padding: 0 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.ds-notice-banner { display: flex; align-items: center; gap: 10px; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 12px; padding: 14px 18px; font-size: 13px; color: #b45309; font-weight: 500; }
.step-solution-card { padding: 24px; border-radius: 20px; background: white; border: 1px solid #e2e8f0; }
.ssc-head { font-size: 16px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.ssc-steps { display: flex; flex-direction: column; gap: 18px; }
.ssc-item { display: flex; gap: 16px; align-items: flex-start; }
.ssc-num { width: 28px; height: 28px; border-radius: 8px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.ssc-num.check { background: #dcfce7; color: #15803d; }
.ssc-body { flex: 1; }
.ssc-body strong { display: block; font-size: 14px; color: #1e293b; margin-bottom: 6px; }
.ssc-body p { margin: 0; font-size: 13px; color: #475569; line-height: 1.6; }
.final-result-card { margin-top: 18px; padding: 14px 20px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; text-align: center; font-size: 15px; font-weight: 700; color: #15803d; }
.knowledge-lecture-card { padding: 24px; border-radius: 20px; background: white; border: 1px solid #e2e8f0; margin-top: 20px; }
.klc-head { font-size: 16px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.klc-box { padding: 16px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; }
.klc-box strong { display: block; font-size: 14px; color: #1e293b; margin-bottom: 6px; }
.klc-box p { margin: 0; font-size: 13px; color: #475569; font-family: monospace, sans-serif; }

.action-socratic-card { background: linear-gradient(135deg, #eff6ff, #f8fafc); border: 1px solid #bfdbfe; }
.action-socratic-card h4 { margin: 0 0 6px; font-size: 15px; color: #1e293b; }
.action-socratic-card p { font-size: 12px; color: #64748b; line-height: 1.5; margin: 0 0 14px; }
.action-socratic-card .asc-icon { font-size: 28px; margin-bottom: 10px; }

.action-hot-card { border: 1px solid #fed7aa; background: #fffaf5; }
.hot-badge { font-size: 14px; font-weight: 700; color: #ea580c; margin-bottom: 8px; }
.hot-desc { font-size: 12px; color: #7c2d12; line-height: 1.5; margin: 0 0 14px; }
.hot-dots { display: flex; gap: 8px; margin-bottom: 16px; }
.hot-dots span { width: 24px; height: 24px; border-radius: 50%; background: #fed7aa; color: #c2410c; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

.parent-sync-card { padding: 16px 20px; border-radius: 16px; background: white; border: 1px solid #e2e8f0; }
.sync-head { font-size: 14px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.parent-sync-card p { margin: 0; font-size: 12px; color: #64748b; line-height: 1.5; }

/* =========================================================
   PARENT PORTAL (家长端) STYLES
   ========================================================= */

.parent-app-wrap {
  min-height: 100vh;
  background-color: #f8fafc;
  color: #0f172a;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.parent-topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.pt-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.parent-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.pt-logo {
  font-size: 24px;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: white;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
}

.pt-brand-name {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.parent-role-badge {
  font-size: 12px;
  font-weight: 700;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 9999px;
}

.parent-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pn-item {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pn-item:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.pn-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}

.pt-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.parent-child-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 6px 14px 6px 6px;
  border-radius: 9999px;
}

.pcc-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #3b82f6;
}

.parent-child-chip strong {
  font-size: 13px;
  color: #1e293b;
}

.parent-switch-btn {
  background: white;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.parent-switch-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

/* View Container */
.parent-view-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  width: 100%;
}

/* Hero Banner */
.parent-hero-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 60%, #2563eb 100%);
  border-radius: 20px;
  padding: 28px 32px;
  color: white;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.25);
  position: relative;
  overflow: hidden;
}

.parent-hero-banner::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.phb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.parent-hero-banner h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.phb-tag {
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}

.phb-streak-badge {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.phb-sub {
  margin: 0;
  font-size: 14px;
  color: #cbd5e1;
  max-width: 600px;
  line-height: 1.5;
}

/* Metrics Grid */
.parent-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.pm-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  transition: transform 0.2s, box-shadow 0.2s;
}

.pm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.04);
}

.pm-icon {
  font-size: 30px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  flex-shrink: 0;
}

.pm-icon.pm-blue { background: #eff6ff; }
.pm-icon.pm-emerald { background: #ecfdf5; }
.pm-icon.pm-amber { background: #fffbeb; }
.pm-icon.pm-purple { background: #faf5ff; }

.pm-text {
  flex: 1;
}

.pm-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
}

.pm-val-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pm-val {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.pm-unit {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.pm-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
  background: #ecfdf5;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
}

/* Layout Grid */
.parent-grid-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.parent-main-col, .parent-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* General Card */
.p-daily-report-card, .p-timeline-card, .p-encourage-card, .p-pending-wishes-card, .p-add-reward-card, .p-child-card-bound, .p-settings-form, .pr-plan-card {
  background: white;
  border-radius: 18px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.p-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.p-card-head h3 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-card-tip {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Report Sections */
.p-report-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.prs-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
}

.prs-tag {
  font-weight: 700;
  color: #1e3a8a;
  flex-shrink: 0;
}

.p-tutor-advice {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: 14px;
  padding: 16px;
}

.pta-badge {
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
  margin-bottom: 6px;
}

.pta-quote {
  font-size: 13px;
  color: #166534;
  line-height: 1.6;
}

/* Timeline */
.p-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding-left: 10px;
}

.ptl-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

.ptl-time {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  width: 44px;
  flex-shrink: 0;
  padding-top: 2px;
}

.ptl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3b82f6;
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #eff6ff;
}

.ptl-dot.green {
  background: #10b981;
  box-shadow: 0 0 0 4px #ecfdf5;
}

.ptl-body {
  flex: 1;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
}

.ptl-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

.ptl-meta {
  font-size: 12px;
  color: #64748b;
}

/* Encouragement Card */
.p-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.p-pill-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.p-pill-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.p-encourage-input-box {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.p-encourage-input-box input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.p-encourage-input-box input:focus {
  border-color: #2563eb;
}

.p-send-btn {
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.p-send-btn:hover {
  background: #1d4ed8;
}

.p-history-encs {
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
}

.phe-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 10px;
}

.phe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phe-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.phe-bubble {
  color: #1e293b;
}

.phe-time {
  color: #94a3b8;
  font-size: 11px;
}

/* Wishes & Rewards */
.pw-card {
  border: 1px solid #fed7aa;
  background: #fffaf5;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}

.pw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pw-title {
  font-size: 15px;
  font-weight: 800;
  color: #9a3412;
}

.pw-cost-badge {
  background: #ea580c;
  color: white;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
}

.pw-desc {
  font-size: 13px;
  color: #7c2d12;
  margin: 0 0 10px;
}

.pw-note-box {
  background: rgba(255,255,255,0.7);
  border: 1px dashed #fdba74;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: #c2410c;
  margin-bottom: 14px;
}

.pw-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pw-approve-btn {
  background: #ea580c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pw-reject-btn {
  background: white;
  border: 1px solid #fdba74;
  color: #9a3412;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.p-reward-table {
  width: 100%;
  border-collapse: collapse;
}

.p-reward-table th {
  text-align: left;
  padding: 10px;
  font-size: 12px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.p-reward-table td {
  padding: 12px 10px;
  font-size: 13px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.p-cost-input {
  width: 80px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
}

/* History Wish list */
.pah-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pah-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 13px;
}

.pah-status-done {
  color: #16a34a;
  font-weight: 600;
  font-size: 12px;
}

/* Sync Banner */
.p-sync-banner {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.psb-left strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 2px;
}

.psb-left p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.psb-right {
  font-size: 12px;
  color: #10b981;
  font-weight: 600;
}

/* Academic Portrait */
.pr-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.pr-subject-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.pr-subject-name {
  width: 140px;
  font-size: 13px;
  color: #334155;
  font-weight: 600;
}

.pr-bar-track {
  flex: 1;
  height: 8px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
}

.pr-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s;
}

.pr-bar-val {
  width: 44px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.pr-focus-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-focus-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
}

.pr-focus-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

/* Settings */
.pcc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #3b82f6;
}

.p-child-card-bound {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.pcc-meta h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #0f172a;
}

.pcc-meta p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.ps-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.ps-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f8fafc;
}

.ps-field-info strong {
  display: block;
  font-size: 14px;
  color: #334155;
  margin-bottom: 2px;
}

.ps-field-desc {
  font-size: 12px;
  color: #94a3b8;
}

.p-save-btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 24px;
}

.pa-info-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 20px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .parent-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .parent-grid-layout {
    grid-template-columns: 1fr;
  }
  .pr-grid-2 {
    grid-template-columns: 1fr;
  }
  .parent-topbar {
    padding: 0 16px;
  }
}

/* Exam Grouped Answer Card Styles */
.exam-grouped-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 14px 0 20px;
}
.ag-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}
.ag-sec-title {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

a.stat-card.clickable{text-decoration:none;color:inherit;display:block;cursor:pointer;border:1.5px solid transparent;transition:all .2s cubic-bezier(0.4,0,0.2,1)}
a.stat-card.clickable:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(39,59,114,0.08);border-color:#dbe4fa}
a.stat-card.clickable:active{transform:translateY(0)}
a.stat-card.clickable .stat-arrow{transition:transform .2s ease}
a.stat-card.clickable:hover .stat-arrow{transform:translateX(3px);color:var(--blue)!important}
.record-card{transition:all .2s ease}
.record-card:hover{border-color:#c7d2fe!important;box-shadow:0 10px 28px rgba(61,87,223,0.08)!important;transform:translateY(-1px)}
@media(max-width:800px){.record-meta-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:520px){.record-meta-grid{grid-template-columns:1fr!important}}


/* ==========================================
   教师端（Teacher Portal）专属样式体系
   ========================================== */

.teacher-app-wrap {
  min-height: 100vh;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

/* 教师端统一顶部导航栏 */
.teacher-topbar {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tt-left {
  display: flex;
  align-items: center;
  gap: 36px;
}

.teacher-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #1e293b;
}

.tt-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  display: grid;
  place-items: center;
  color: white;
}

.tt-logo svg {
  width: 20px;
  height: 20px;
}

.tt-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-brand-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.teacher-role-badge {
  background: #e0f2fe;
  color: #0284c7;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.teacher-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.teacher-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.teacher-nav a svg {
  width: 17px;
  height: 17px;
}

.teacher-nav a:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.teacher-nav a.active {
  background: #e0f2fe;
  color: #0369a1;
}

/* 顶栏右侧：班级切换、教师芯片与快速切端 */
.tt-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.teacher-class-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.teacher-class-chip:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.tt-class-icon {
  font-size: 18px;
}

.tt-class-info strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  color: #0f172a;
}

.tt-class-info small {
  display: block;
  font-size: 11px;
  color: #64748b;
}

.tt-arrow {
  color: #94a3b8;
  font-size: 12px;
}

.teacher-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid #e2e8f0;
}

.tt-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #0284c7;
}

.tt-user-info strong {
  display: block;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.2;
}

.tt-user-info small {
  display: block;
  font-size: 11px;
  color: #64748b;
}

.tt-switch-group {
  display: flex;
  gap: 8px;
  margin-left: 8px;
}

.teacher-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #475569;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.teacher-switch-btn:hover {
  background: #f8fafc;
  color: #0284c7;
  border-color: #93c5fd;
}

.teacher-switch-btn svg {
  width: 14px;
  height: 14px;
}

/* 教师端内容主容器 */
.teacher-view-container {
  padding: 32px 36px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

/* 顶部概况横幅卡片 */
.teacher-hero-banner {
  padding: 28px 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 1px solid #bae6fd;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.06);
  margin-bottom: 28px;
}

.thb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.thb-top h2 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.thb-sub {
  color: #64748b;
  font-size: 14px;
  margin-top: 6px;
}

.thb-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* 核心指标 4 宫格 */
.teacher-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.tm-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.tm-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.tm-icon svg {
  width: 22px;
  height: 22px;
}

.tm-icon.blue { background: #e0f2fe; color: #0284c7; }
.tm-icon.green { background: #dcfce7; color: #16a34a; }
.tm-icon.orange { background: #ffedd5; color: #ea580c; }
.tm-icon.purple { background: #f3e8ff; color: #9333ea; }

.tm-text small {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 2px;
}

.tm-text strong {
  display: block;
  font-size: 22px;
  color: #0f172a;
  line-height: 1.2;
}

.tm-text .unit {
  font-size: 13px;
  font-weight: normal;
  color: #94a3b8;
}

.tm-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

.tm-tag.green { background: #dcfce7; color: #15803d; }
.tm-tag.blue { background: #e0f2fe; color: #0369a1; }

/* 左右分栏 */
.teacher-grid-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: start;
}

.teacher-main-col, .teacher-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 卡片头部 */
.t-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tch-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tch-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.tch-title small {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.t-icon-head {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.t-icon-head.blue { background: #e0f2fe; color: #0284c7; }
.t-icon-head.green { background: #dcfce7; color: #16a34a; }
.t-icon-head.orange { background: #ffedd5; color: #ea580c; }
.t-icon-head.purple { background: #f3e8ff; color: #9333ea; }
.t-icon-head svg { width: 18px; height: 18px; }

/* AI 教学智能周报 */
.ai-digest-blocks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-block {
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
}

.ai-block.highlight {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.ai-block.warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.ai-block.action {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}

.ab-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ab-foot-actions {
  margin-top: 12px;
}

.small-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* 6大知识模块柱状图 */
.t-module-bars-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.t-module-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.tm-name {
  width: 90px;
  font-weight: 600;
  color: #334155;
}

.tm-bar-track {
  flex: 1;
  height: 10px;
  background: #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
}

.tm-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.tm-score {
  width: 50px;
  text-align: right;
  font-weight: 700;
  color: #0f172a;
}

/* 分层梯队与催交列表 */
.t-tier-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.t-tier-item {
  background: #f8fafc;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.tti-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.btn-block-action {
  display: block;
  text-align: center;
  padding: 12px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-block-action:hover {
  background: #bae6fd;
}

.unsub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unsub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.ui-info strong {
  display: block;
  font-size: 13px;
  color: #0f172a;
}

.ui-info small {
  font-size: 11px;
  color: #94a3b8;
}

/* 作业卡片流 */
.assignment-cards-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.assignment-card {
  padding: 24px 28px;
  border-radius: 18px;
}

.ac-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.ac-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ac-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

.ac-meta {
  color: #64748b;
  font-size: 13px;
  margin: 0;
}

.ac-score-badge {
  text-align: right;
  background: #f8fafc;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.ac-score-badge strong {
  display: block;
  font-size: 24px;
  color: #0284c7;
  line-height: 1.1;
}

.ac-score-badge small {
  font-size: 11px;
  color: #64748b;
}

.ac-progress-wrap {
  margin: 18px 0;
}

.ac-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #475569;
  margin-bottom: 6px;
}

.ac-footer {
  display: flex;
  gap: 12px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

/* 学生名册网格卡片 */
.student-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.student-card {
  padding: 22px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e2e8f0;
}

.student-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
}

.sc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.sc-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0284c7;
  font-weight: 700;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sc-basic {
  flex: 1;
}

.sc-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-name-row strong {
  font-size: 16px;
  color: #0f172a;
}

.sc-basic small {
  color: #64748b;
  font-size: 12px;
}

.sc-score {
  text-align: right;
}

.sc-score strong {
  display: block;
  font-size: 20px;
  color: #0284c7;
  line-height: 1.1;
}

.sc-score small {
  font-size: 11px;
  color: #94a3b8;
}

.sc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.scm-item {
  text-align: center;
}

.scm-item small {
  display: block;
  font-size: 11px;
  color: #64748b;
}

.scm-item strong {
  font-size: 14px;
  color: #0f172a;
}

.sc-weak-tags {
  margin-bottom: 16px;
  flex: 1;
}

.sc-weak-tags .tag {
  margin: 0 4px 4px 0;
  font-size: 11px;
  padding: 4px 8px;
}

.sc-footer {
  margin-top: auto;
}

/* 高频错题卡片体系 */
.mistakes-rank-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mistake-rank-card {
  padding: 26px 30px;
  border-radius: 20px;
}

.mrc-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.mrc-rank-badge {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}

.mrc-rank-badge.gold { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.mrc-rank-badge.silver { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); }
.mrc-rank-badge.bronze { background: linear-gradient(135deg, #b45309 0%, #78350f 100%); }

.mrc-title-block {
  flex: 1;
}

.mrc-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mrc-question-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #0f172a;
}

.mrc-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.mrc-box {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13px;
}

.mrc-box.wrong {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.mrc-box.correct {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.mrc-box small {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.mrc-draft-box {
  background: #fffbeb;
  border: 1px dashed #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 16px;
}

.mrc-draft-box p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.mrc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

.mrc-tips {
  font-size: 13px;
  color: #475569;
  flex: 1;
}

.mrc-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* 响应式断点 */
@media (max-width: 1024px) {
  .teacher-topbar { padding: 0 20px; }
  .tt-left { gap: 18px; }
  .teacher-view-container { padding: 20px; }
  .teacher-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-grid-layout { grid-template-columns: 1fr; }
  .mrc-body-grid { grid-template-columns: 1fr; }
  .mrc-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .teacher-topbar { flex-direction: column; height: auto; padding: 14px 16px; gap: 12px; }
  .tt-left { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
  .teacher-nav { flex-wrap: wrap; }
  .tt-right { width: 100%; justify-content: space-between; }
  .teacher-metrics-grid { grid-template-columns: 1fr; }
  .thb-top { flex-direction: column; align-items: flex-start; }
  .student-cards-grid { grid-template-columns: 1fr; }
}