:root{--bg:#f5f7fb;--surface:#fff;--surface2:#f8fafc;--ink:#10213d;--muted:#66758b;--line:#e5eaf2;--navy:#071b3d;--navy2:#0b2a55;--blue:#1769ff;--cyan:#2dd4ff;--green:#16b67a;--amber:#f2a900;--red:#e5484d;--shadow:0 18px 50px rgba(16,33,61,.08);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}html.instant-jump{scroll-behavior:auto!important}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}.wrap{width:min(1180px,calc(100% - 36px));margin:auto}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}
header{position:sticky;top:0;z-index:40;background:rgba(7,27,61,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(7,27,61,.12)}.top{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:950!important;font-size:1.3rem;letter-spacing:-.04em;color:#fff!important}.brand b{color:#55d9ff}.header-links{display:flex;align-items:center;gap:10px}.header-links a{color:#c8d8ee;padding:10px 13px;border-radius:12px}.header-links a:hover{background:rgba(255,255,255,.08);color:#fff}.header-test{border:1px solid rgba(255,255,255,.16)!important;background:linear-gradient(135deg,#2580ff,#5a63ff)!important;color:#fff!important;border-radius:13px!important;padding:10px 16px!important;box-shadow:0 8px 22px rgba(37,128,255,.24)}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 20%,rgba(45,212,255,.24),transparent 28%),radial-gradient(circle at 20% 80%,rgba(92,99,255,.2),transparent 30%),linear-gradient(135deg,#071b3d,#0d3a72 70%,#125a8d);color:#fff;padding:46px 0 32px}.hero:after{content:"";position:absolute;right:-120px;top:-150px;width:380px;height:380px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 40px rgba(255,255,255,.025),0 0 0 80px rgba(255,255,255,.018)}.hero>*{position:relative;z-index:1}.hero small{display:inline-flex;align-items:center;gap:8px;color:#76e6ff;font-weight:900;font-size:.72rem;letter-spacing:.14em}.hero small:before{content:"";width:7px;height:7px;background:#55e6b1;border-radius:50%;box-shadow:0 0 0 5px rgba(85,230,177,.12)}.hero h1{font-size:clamp(2.25rem,5vw,4rem);line-height:1.02;letter-spacing:-.055em;margin:10px 0 10px;max-width:850px}.hero>div>p{color:#c5d4e9;margin:0;max-width:760px}.track{height:10px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:22px}.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fe3b0,#55d9ff,#7c83ff);border-radius:99px;transition:.35s}.hero #progress{color:#b9cbe2;font-size:.83rem;margin:9px 0 0}
.learning-summary{display:grid;grid-template-columns:repeat(3,150px) 1fr;gap:12px;margin-top:22px}.learning-summary>div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:14px 16px;backdrop-filter:blur(10px)}.learning-summary strong{display:block;font-size:1.3rem;letter-spacing:-.03em}.learning-summary span{display:block;color:#b8c9df;font-size:.76rem;margin-top:2px}.summary-actions{display:flex;align-items:center;gap:9px;justify-content:flex-end}.learning-summary button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:10px 13px;font-weight:800}.learning-summary .primary,.summary-actions .primary{background:#fff!important;color:#0b4ca4!important;border-color:#fff!important;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;padding:28px 0 70px}aside{position:sticky;top:92px;align-self:start;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:var(--shadow);backdrop-filter:blur(14px);max-height:calc(100vh - 112px);overflow:auto}aside:before{content:"CHAPTER PROGRESS";display:block;padding:7px 10px 10px;color:#8190a4;font-size:.68rem;font-weight:900;letter-spacing:.12em}#menu{display:block}aside button{position:relative;display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:#61728a;text-align:left;padding:10px;border-radius:13px;line-height:1.25;transition:.2s}.layout aside button span{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:10px;background:#eef2f7;color:#718198;font-size:.7rem;font-weight:900}.layout aside button:hover{background:#f2f6fb;color:#183c68;transform:translateX(2px)}.layout aside button.active{background:linear-gradient(135deg,#eaf3ff,#f1f4ff);color:#0d5dcb;font-weight:900;box-shadow:inset 3px 0 0 #1769ff}.layout aside button.active span{background:#1769ff;color:#fff}.layout aside button.done span{background:#e4fbf2;color:#0a8b63;font-size:0}.layout aside button.done span:after{content:'✓';font-size:.78rem}.layout aside button.needs-revision{color:#8a5a00}.layout aside button.needs-revision span{background:#fff3d6;color:#9b6500;font-size:0}.layout aside button.needs-revision span:after{content:'!';font-size:.8rem;font-weight:900}.sidebar-test{width:100%;margin:12px 0 0;border:0!important;background:linear-gradient(135deg,#1769ff,#5b63ff)!important;color:#fff!important;border-radius:14px!important;padding:13px!important;font-weight:900!important;box-shadow:0 10px 25px rgba(23,105,255,.22)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,42px);box-shadow:var(--shadow)}article.card{min-width:0}.step{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#edf5ff;color:#1769d6;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.card>h2{font-size:clamp(1.7rem,3.5vw,2.55rem);line-height:1.08;letter-spacing:-.045em;margin:13px 0 25px}.content{font-size:1.02rem;color:#243753}.content p,.content li{line-height:1.82}.content h3{font-size:1.2rem;margin:32px 0 12px;color:#132b4d}.content h4{color:#18385f}.content strong{color:#122e51}.content ul,.content ol{padding-left:24px}.concept,.example,.warning,.neet,.formula,.reference,.visual,.key-grid{padding:19px 21px;border-radius:17px;margin:20px 0}.concept{background:linear-gradient(135deg,#eef7ff,#f7fbff);border:1px solid #d8eaff;border-left:4px solid #1769ff}.example{background:linear-gradient(135deg,#fff8e9,#fffdf7);border:1px solid #f5e4bc;border-left:4px solid #e7a600}.warning{background:linear-gradient(135deg,#fff0f1,#fff8f8);border:1px solid #f5d3d6;border-left:4px solid #e5484d}.neet{background:linear-gradient(135deg,#e9fbf4,#f8fffc);border:1px solid #ccefe0;border-left:4px solid #16b67a}.formula{background:linear-gradient(135deg,#f2f2ff,#f8f8ff);border:1px solid #dedfff;border-left:4px solid #6668ed;font-family:Georgia,serif;font-size:1.08rem;line-height:2.05}.reference{background:#f7f9fc;color:#596a81;border:1px solid var(--line);font-size:.9rem}.visual{background:#f8fbff;border:1px solid #dbe7f4;overflow:auto}.visual svg{display:block;max-width:100%;height:auto;margin:auto}.key-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:#f7f9fc}.key-grid div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.table-wrap{overflow:auto;margin:20px 0;border:1px solid var(--line);border-radius:15px}table{border-collapse:collapse;width:100%;min-width:560px}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}th{background:#f2f6fb;color:#274667;font-size:.83rem}
.checks{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}.checks-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px;padding:13px 15px;border:1px solid #dce8f5;background:#f7fbff;border-radius:15px}.checks-intro span{display:block;color:#1769ff;font-size:.64rem;font-weight:950;letter-spacing:.11em}.checks-intro strong{display:block;margin-top:2px;font-size:.9rem;color:#183652}.checks-intro em{font-style:normal;color:#6e8096;font-size:.72rem;font-weight:800;text-align:right}.mini-check:first-of-type{margin-top:6px}.mini-check{padding:20px 0;border-bottom:1px solid #edf1f6}.mini-check:last-child{border-bottom:0}.mini-check h3{display:flex;align-items:center;gap:8px;color:#718198;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}.mini-check h3:before{content:"";width:7px;height:7px;border-radius:50%;background:#1769ff}.option{display:flex;align-items:flex-start;gap:10px;width:100%;padding:14px 15px;margin:9px 0;border:1px solid #dce4ee;background:#fbfcfe;border-radius:14px;text-align:left;transition:.18s;color:#263b57}.option:hover{border-color:#8ebaf6;background:#f5f9ff;transform:translateY(-1px)}.option.correct{background:#e9fbf3;border-color:#55cfa6;color:#075e46}.option.wrong{background:#fff0f1;border-color:#ed858a;color:#8e2830}.feedback{display:none}.feedback.show,.explain.show{display:block;padding:14px 16px;margin-top:11px;border-radius:14px;font-size:.92rem}.good{background:#e9fbf3;color:#075e46}.bad{background:#fff0f1;color:#8e2830}.topic-message{display:none}.topic-message.show{display:block;background:#fff5d9;color:#785100;padding:13px 15px;border-radius:14px;margin-top:15px;border:1px solid #f4df9f}.topic-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding:15px;border:1px solid var(--line);background:linear-gradient(135deg,#f8fbff,#fff);border-radius:17px}.topic-actions>div{margin-right:auto}.topic-actions strong,.topic-actions span{display:block}.topic-actions strong{font-size:.94rem}.topic-actions span{font-size:.75rem;color:var(--muted);margin-top:3px}.topic-actions button,.clear-response{border:1px solid #d5dfeb;background:#fff;color:#294968;border-radius:12px;padding:10px 13px;font-weight:850}.topic-actions .primary{border-color:#1769ff;background:linear-gradient(135deg,#1769ff,#5c63ff);color:#fff;box-shadow:0 8px 18px rgba(23,105,255,.18)}.topic-actions button:hover,.clear-response:hover{border-color:#a9c7e8;background:#f5f9ff}nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}nav button{border:1px solid #d5dfeb;background:#fff;color:#294968;border-radius:13px;padding:11px 15px;font-weight:850}nav .primary{background:#1769ff;color:#fff;border-color:#1769ff}
/* Mastery test */.test{padding:32px 0 70px}.test>h1{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.05em;line-height:1.05;margin:0}.test>p{color:var(--muted);margin:8px 0 20px}.test-progress{position:sticky;top:88px;z-index:9;width:100%;margin:0 0 14px;padding:11px 15px;border:1px solid #d5e3f3;border-radius:14px;background:rgba(245,249,255,.92);backdrop-filter:blur(12px);color:#075fc8;font-size:.83rem;font-weight:900;box-shadow:0 8px 24px rgba(20,63,105,.08)}.test-progress:before{content:"YOUR PROGRESS  ·  ";color:#7b8ba0}.q{margin:14px 0;padding:26px;border-radius:20px;box-shadow:0 12px 35px rgba(16,33,61,.055);scroll-margin-top:140px}.q h3{margin:12px 0 18px;line-height:1.55;font-size:1.05rem}.question-type{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#edf5ff;color:#1769d6;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.question-separator{height:1px;border:0;background:#e5ebf3;margin:12px 0 18px}.q label{display:flex;align-items:flex-start;gap:11px;width:100%;padding:14px 15px;margin:9px 0;border:1px solid #dce4ee;background:#fbfcfe;border-radius:14px;cursor:pointer;transition:.18s}.q label:hover{border-color:#8ebaf6;background:#f5f9ff;transform:translateY(-1px)}.q label input{margin-top:4px;accent-color:#1769ff}.q label.correct{background:#e9fbf3;border-color:#55cfa6}.q label.wrong{background:#fff0f1;border-color:#ed858a}.question-visual{margin:15px 0 19px;padding:16px;border:1px solid #d7e4f2;border-radius:16px;background:#f8fbff;overflow:auto}.question-visual svg{display:block;width:100%;max-width:680px;height:auto;margin:auto}.question-visual .axis{stroke:#173b64;stroke-width:3}.question-visual .plot{fill:none;stroke:#1769ff;stroke-width:5}.question-visual .guide{stroke:#8ca5c2;stroke-width:2;stroke-dasharray:7 6}.question-visual text{fill:#244563;font:700 17px system-ui,sans-serif}.clear-response{font-size:.78rem;padding:8px 11px}.explain{display:none}.counts{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.counts span{padding:9px 12px;border-radius:999px;background:#f0f4f9;color:#40546d;font-size:.8rem;font-weight:800}.test-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.test-actions .submit{margin-left:auto}.submit,.secondary{padding:12px 17px;border-radius:13px;font-weight:900;border:1px solid #d3dfed}.submit{background:linear-gradient(135deg,#1769ff,#5c63ff);color:#fff;border-color:#1769ff;box-shadow:0 10px 24px rgba(23,105,255,.2)}.secondary{background:#fff;color:#294968}.result{display:none;margin-top:22px;overflow:hidden}.result-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid #e3eaf2}.result-head h2{margin:10px 0 0;font-size:clamp(1.8rem,5vw,2.7rem);letter-spacing:-.05em}.result-percent{display:grid;place-items:center;width:96px;height:96px;flex:0 0 96px;border-radius:50%;background:linear-gradient(135deg,#eaf4ff,#eef0ff);color:#1769ff;font-size:1.65rem;font-weight:950}.result-percent small{font-size:.72rem;margin-left:2px}.result-status{display:inline-flex;padding:7px 11px;border-radius:999px;background:#edf5ff;color:#075fc8;font-size:.7rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.result-guidance{color:#53677f}.weak-analysis{margin:22px 0}.analysis-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.analysis-heading h3{margin:0}.analysis-heading span{font-size:.75rem;color:#8190a4}.weak-analysis a{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 15px;margin:9px 0;border:1px solid #dce5ef;border-radius:14px;background:#fbfcfe;color:#173d66}.weak-analysis a:hover{border-color:#a9c7e8;background:#f5f9ff}.weak-analysis a b{white-space:nowrap;color:#a05c00;font-size:.8rem}.weak-analysis a i{font-style:normal}.mastery-success,.result-notice{margin:18px 0;padding:15px 16px;border-radius:14px}.mastery-success{background:#e9fbf3;color:#075f45;border:1px solid #c8efdf;font-weight:850}.result-notice{background:#f3f7fb;color:#4f647d}.result-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.result-actions button,.result-actions a{display:inline-flex;align-items:center;justify-content:center;padding:11px 13px;border:1px solid #d3dfeb;border-radius:12px;background:#fff;color:#294968;text-decoration:none;font-weight:850}.result-actions .primary-result-action{background:linear-gradient(135deg,#1769ff,#5c63ff);color:#fff;border-color:#1769ff}.result-actions button:disabled{opacity:.45}.back-results{display:none;position:fixed;bottom:20px;right:20px;z-index:50;border:0;border-radius:13px;background:#071b3d;color:#fff;padding:11px 15px;font-weight:900;box-shadow:0 12px 28px rgba(7,27,61,.25)}
/* Modals */.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(3,16,38,.62);backdrop-filter:blur(10px)}.modal-backdrop[hidden]{display:none}.decision-modal{position:relative;width:min(520px,100%);background:#fff;border:1px solid #e1e8f1;border-radius:25px;padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.modal-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:11px;background:#f2f5f9;color:#607189;font-size:1.3rem}.modal-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:#eaf4ff;color:#1769ff;font-size:1.35rem;font-weight:950}.retake-icon{background:#e9fbf3;color:#0a9368}.modal-eyebrow{display:block;margin-top:18px;color:#1769ff;font-size:.68rem;font-weight:950;letter-spacing:.12em}.decision-modal h2{font-size:1.65rem;letter-spacing:-.04em;margin:7px 0}.decision-modal p{color:#5c6f86}.modal-progress{margin:18px 0}.modal-progress>div:first-child{display:flex;justify-content:space-between;color:#50657e;font-size:.82rem;font-weight:800}.modal-track{height:8px;background:#e9eef4;border-radius:99px;overflow:hidden;margin-top:8px}.modal-track i{display:block;height:100%;background:linear-gradient(90deg,#1769ff,#5c63ff);border-radius:99px}.modal-note{padding:13px 14px;border-radius:13px;background:#f5f8fb;color:#50657e;font-size:.85rem}.retake-note{background:#e9fbf3;color:#17624c}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.modal-primary,.modal-secondary{padding:11px 15px;border-radius:12px;font-weight:900;border:1px solid #d3dfeb}.modal-primary{background:#1769ff;color:#fff;border-color:#1769ff}.modal-secondary{background:#fff;color:#294968}
.mobile-test-bar{display:none}
@media(max-width:900px){.learning-summary{grid-template-columns:repeat(3,1fr)}.summary-actions{grid-column:1/-1;justify-content:flex-start}.layout{grid-template-columns:230px minmax(0,1fr);gap:16px}}
@media(max-width:760px){.wrap{width:min(100% - 20px,1180px)}.top{height:62px}.header-links a{font-size:.8rem}.header-test{padding:9px 11px!important;font-size:.8rem}.hero{padding:32px 0 25px}.hero h1{font-size:2.25rem}.learning-summary{grid-template-columns:repeat(3,1fr);gap:8px}.learning-summary>div{padding:11px 10px}.learning-summary strong{font-size:1.05rem}.learning-summary span{font-size:.68rem}.summary-actions{gap:7px}.summary-actions button{flex:1;min-height:44px;font-size:.78rem}.layout{display:block;padding-top:18px}.layout aside{position:relative;top:auto;max-height:none;margin-bottom:14px;padding:10px;border-radius:18px}.layout aside:before{padding-bottom:7px}.layout aside #menu{display:flex;overflow:auto;gap:5px}.layout aside button{min-width:175px}.sidebar-test{display:none}.card{border-radius:19px;padding:20px}.card>h2{font-size:1.75rem}.topic-actions{display:grid;grid-template-columns:1fr 1fr}.topic-actions>div{grid-column:1/-1}.topic-actions button{width:100%}nav button{flex:1}.test{padding-top:24px}.test-progress{top:70px}.q{padding:20px;border-radius:18px}.test-actions{display:grid;grid-template-columns:1fr 1fr}.test-actions .secondary{grid-column:1}.test-actions .submit{grid-column:2;margin-left:0}.mobile-test-bar{display:block;position:fixed;z-index:45;left:0;right:0;bottom:0;padding:9px 12px;background:rgba(255,255,255,.94);border-top:1px solid #dbe3ed;box-shadow:0 -8px 25px rgba(16,33,61,.12);backdrop-filter:blur(14px)}.mobile-test-bar button{width:100%;border:0;border-radius:13px;padding:12px;background:linear-gradient(135deg,#1769ff,#5c63ff);color:#fff;font-weight:900}.result-head{align-items:flex-start}.result-percent{width:76px;height:76px;flex-basis:76px;font-size:1.3rem}.weak-analysis a{align-items:flex-start;flex-direction:column}.weak-analysis a b{white-space:normal}.result-actions button,.result-actions a{width:100%}.modal-actions{flex-direction:column}.modal-actions button{width:100%}body{padding-bottom:70px}}
@media(max-width:520px){.header-links{gap:5px}.header-links a{display:inline-flex;font-size:.68rem;padding:8px 7px;white-space:nowrap}.header-test{font-size:.68rem!important;padding:8px 8px!important;white-space:nowrap}.learning-summary{grid-template-columns:repeat(3,1fr)}.summary-actions{display:grid;grid-template-columns:1fr 1fr}.summary-actions .primary{grid-column:1/-1}.summary-actions button{font-size:.76rem}.key-grid{grid-template-columns:1fr}.content{font-size:.98rem}.q h3{font-size:1rem}.question-type{font-size:.62rem}.question-visual{padding:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Final hover visibility safeguard — text must remain readable on hover */
button:hover,
button:focus-visible,
a:hover{color:inherit}
.submit:hover,
.submit-top:hover,
.bottom-submit:hover,
.primary:hover,
.sidebar-test:hover,
.header-test:hover{color:#fff!important}
.clear-response:hover,
.secondary:hover,
.topic-actions button:hover,
nav button:hover{color:#0d5dcb!important}
.learning-summary .primary:hover,
.summary-actions .primary:hover{color:#0b4ca4!important;background:#fff!important;border-color:#fff!important}

/* =========================================================
   PHASE 1 — PREMIUM RESPONSIVE FOUNDATION
   Targets: small phones (320px+), phones, tablets and desktop.
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(23,105,255,.35);outline-offset:2px}
.wrap{width:min(1180px,calc(100% - 36px))}

/* Tablet: give the learning page a comfortable single-column reading width. */
@media (min-width:761px) and (max-width:1000px){
  .wrap{width:min(100% - 32px,1180px)}
  .layout{grid-template-columns:1fr;gap:16px}
  .layout aside{position:relative;top:auto;max-height:none;padding:10px;margin-bottom:0}
  .layout aside:before{padding:7px 10px 9px}
  .layout aside #menu{display:flex;overflow-x:auto;gap:6px;scroll-snap-type:x proximity;padding-bottom:2px}
  .layout aside button{min-width:205px;scroll-snap-align:start}
  .sidebar-test{display:none}
  .hero{padding:38px 0 28px}
  .learning-summary{grid-template-columns:repeat(3,minmax(0,1fr)) 1.7fr}
  .summary-actions{justify-content:flex-end}
  .card{padding:28px}
  .content{font-size:1rem}
}

/* Phone: compact chrome and comfortable one-hand controls. */
@media (max-width:760px){
  .wrap{width:min(100% - 20px,1180px)}
  header{position:sticky}
  .top{height:60px;gap:10px}
  .brand{font-size:1.15rem}
  .header-links{min-width:0;overflow-x:auto;scrollbar-width:none}
  .header-links::-webkit-scrollbar{display:none}
  .header-links a{flex:0 0 auto}
  .hero{padding:28px 0 23px}
  .hero h1{font-size:clamp(2rem,9vw,2.55rem);max-width:100%}
  .hero>div>p{font-size:.9rem}
  .track{height:9px;margin-top:17px}
  .learning-summary{margin-top:16px}
  .learning-summary>div{min-width:0}
  .learning-summary strong{white-space:nowrap}
  .summary-actions button{min-width:0}
  .layout{padding-bottom:48px}
  .layout aside #menu{scrollbar-width:none}
  .layout aside #menu::-webkit-scrollbar{display:none}
  .layout aside button{min-width:185px}
  .card{padding:19px 17px}
  .content p,.content li{line-height:1.72}
  .content h3{margin-top:27px}
  .concept,.example,.warning,.neet,.formula,.reference,.visual,.key-grid{padding:16px 15px;border-radius:15px}
  .table-wrap{margin-left:-2px;margin-right:-2px;border-radius:13px}
  th,td{padding:11px 10px}
  .topic-actions{grid-template-columns:1fr 1fr;gap:8px}
  .topic-actions button{min-height:44px}
  nav{position:relative;gap:8px}
  nav button{min-height:46px}
}

/* Very small phones: 320–380px. */
@media (max-width:380px){
  .wrap{width:calc(100% - 14px)}
  .top{height:56px}
  .brand{font-size:1.05rem}
  .header-links{gap:4px}
  .header-links a{font-size:.64rem;padding:7px 6px}
  .header-test{font-size:.64rem!important;padding:7px 6px!important}
  .hero{padding:23px 0 19px}
  .hero h1{font-size:1.85rem}
  .hero p{font-size:.82rem!important}
  .learning-summary{gap:5px;margin-top:12px}
  .learning-summary>div{padding:9px 6px;border-radius:13px}
  .learning-summary strong{font-size:.9rem}
  .learning-summary span{font-size:.58rem}
  .summary-actions{gap:6px}
  .summary-actions button{font-size:.69rem;padding:9px 6px}
  .layout aside{padding:7px;border-radius:15px}
  .layout aside button{min-width:165px;font-size:.76rem;padding:9px}
  .layout aside button span{flex-basis:25px;width:25px;height:25px}
  .card{padding:16px 13px;border-radius:16px}
  .card>h2{font-size:1.5rem;margin-bottom:19px}
  .content{font-size:.93rem}
  .content p,.content li{line-height:1.66}
  .option{padding:12px 11px;gap:8px;font-size:.9rem}
  .topic-actions{grid-template-columns:1fr;gap:7px}
  .topic-actions>div{grid-column:1}
  nav button{font-size:.78rem;padding:10px 8px}
  body{padding-bottom:72px}
}

/* Avoid iOS zooming the page when a form control receives focus. */
@media (max-width:760px){input,select,textarea{font-size:16px!important}}


/* =========================================================
   PHASE 2 — LEARNING UX
   ========================================================= */
.topic-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.topic-heading-row h2{min-width:0}.topic-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin:0}.topic-tools button{width:38px;height:36px;border:1px solid #d6e1ec;background:#fff;color:#52677e;border-radius:10px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px rgba(16,33,61,.035)}.topic-tools button:hover,.topic-tools button.active{background:#edf5ff;border-color:#b9d5f4;color:#1769ff}.content{transition:font-size .18s ease}.reading-large .content{font-size:1.08rem}.reading-large .content p,.reading-large .content li{line-height:1.86}.reading-small .content{font-size:.94rem}.mini-check-score{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px;color:#78899d;font-size:.74rem;font-weight:800}.mini-check-score b{color:#1769ff}.topic-takeaway{margin:22px 0;padding:17px 18px;border:1px solid #d7e4f2;border-radius:16px;background:linear-gradient(135deg,#f7fbff,#f0f6ff)}.topic-takeaway .takeaway-label{display:inline-flex;align-items:center;gap:7px;color:#1769ff;font-size:.68rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.topic-takeaway h3{margin:6px 0 5px;font-size:1rem}.topic-takeaway p{margin:0;color:#52677f;font-size:.86rem;line-height:1.6}.topic-complete-banner{display:flex;align-items:center;gap:12px;margin:18px 0;padding:14px 15px;border:1px solid #bfead9;border-radius:15px;background:linear-gradient(135deg,#edfcf6,#f7fffb);color:#075f45}.topic-complete-banner .complete-mark{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:#0a9368;color:#fff;font-weight:950}.topic-complete-banner strong{display:block}.topic-complete-banner span{display:block;margin-top:2px;font-size:.78rem;color:#347460}.topic-complete-banner[hidden],.topic-takeaway[hidden]{display:none!important}
@media(max-width:760px){.topic-heading-row{gap:9px}.topic-tools{margin-top:-2px}.topic-tools button{width:35px;height:34px;font-size:.76rem}.topic-complete-banner{align-items:flex-start}.topic-complete-banner .complete-mark{margin-top:1px}.reading-large .content{font-size:1.04rem}.reading-large .content p,.reading-large .content li{line-height:1.82}}
@media(max-width:380px){.checks-intro{align-items:flex-start;flex-direction:column;gap:4px;padding:12px}.checks-intro em{text-align:left;font-size:.68rem}.topic-heading-row{display:block}.topic-tools{justify-content:flex-end;margin:-4px 0 10px}.topic-tools button{width:34px;height:32px}.topic-takeaway{padding:14px}.topic-complete-banner{padding:12px}.topic-complete-banner span{font-size:.72rem}}
.checks-error{margin-top:14px;padding:16px;border:1px solid #f1d79a;border-radius:14px;background:#fff8e6;color:#72530b}.checks-error strong{display:block;font-size:.9rem}.checks-error span{display:block;margin-top:4px;font-size:.78rem;color:#8a7442}.server-options{display:contents}
@media(max-width:520px){.checks-intro{margin-bottom:2px}.mini-check{padding:18px 0}.mini-check p{font-size:.92rem;line-height:1.65}.option{padding:13px 12px;font-size:.9rem}}

/* =========================================================
   PHASE 4 — PREMIUM RESULT UX
   ========================================================= */
.result{background:#fff;border:1px solid #dce6f1;border-radius:24px;padding:26px;box-shadow:0 18px 48px rgba(16,33,61,.08)}
.result-head{padding-bottom:22px;align-items:center}
.result-score-copy h2{margin:8px 0 0;font-size:clamp(2.15rem,5vw,3.25rem);letter-spacing:-.06em;line-height:1}
.result-subtitle{margin:6px 0 8px;color:#718198;font-size:.82rem;font-weight:750}
.result-score-copy .result-performance{margin-top:3px}
.result-percent{width:118px;height:118px;flex-basis:118px;background:conic-gradient(#1769ff calc(var(--pct,0) * 1%),#e7eef7 0);box-shadow:0 10px 28px rgba(23,105,255,.12)}
.result-percent:before{inset:9px}
.result-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:20px 0}
.result-counts span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:68px;padding:10px;border:1px solid #dfe7f1;border-radius:15px;background:#f9fbfd;color:#40546d;font-size:.8rem}
.result-counts span b{font-size:1rem;color:#173b64}
.result-counts span small{margin-top:3px;color:#7a899d;font-size:.68rem;font-weight:800}
.result-next{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0;padding:17px 18px;border:1px solid #cfe0f3;border-radius:17px;background:linear-gradient(135deg,#f2f8ff,#f8fbff)}
.result-next h3{margin:5px 0 0;font-size:1.02rem;color:#173b64}
.result-next a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:12px;background:#1769ff;color:#fff;font-weight:900;text-decoration:none;box-shadow:0 8px 18px rgba(23,105,255,.18)}
.result-next a:hover{background:#0f5ce8;color:#fff;transform:translateY(-1px)}
.section-eyebrow{display:block;color:#1769ff;font-size:.64rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.weak-analysis{margin:24px 0}
.analysis-heading{margin-bottom:10px}
.analysis-heading h3{margin:4px 0 0;font-size:1.15rem;color:#173b64}
.weak-analysis a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:13px 14px;margin:8px 0}
.weak-topic-main{min-width:0}.weak-topic-main>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#173d66;font-weight:850}
.weak-track{height:6px;margin-top:8px;border-radius:99px;background:#e8edf3;overflow:hidden}.weak-track i{display:block;height:100%;border-radius:99px;background:#f0a51a}
.weak-analysis a>b{color:#a05c00}.weak-analysis a>b small{font-size:.65rem;font-weight:750}.weak-arrow{font-style:normal;color:#1769ff;font-size:1.05rem}
.result-guidance{margin:14px 0;color:#53677f;line-height:1.6}
.result-actions{margin-top:22px!important}
.result-action-group{background:#f9fbfd}
.result-action-group .primary-result-action{background:#1769ff!important;color:#fff!important;border-color:#1769ff!important}
.result-action-group .primary-result-action:hover{background:#0f5ce8!important;color:#fff!important}
.share-result{margin-top:24px;padding:19px;border-radius:18px}
.share-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.share-heading h3{margin:4px 0 0}
.share-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border-radius:999px;background:#edf5ff;color:#1769ff;font-size:.65rem;font-weight:950}
.share-btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease}.share-btn:hover{transform:translateY(-1px);box-shadow:0 6px 15px rgba(23,105,255,.09)}

@media(max-width:760px){
  .result{padding:19px 15px;border-radius:19px}
  .result-head{gap:12px}
  .result-score-copy h2{font-size:2.25rem}
  .result-percent{width:88px;height:88px;flex-basis:88px}
  .result-percent:before{inset:7px}
  .result-counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:16px 0}
  .result-counts span{min-height:60px}
  .result-next{align-items:stretch;flex-direction:column;gap:12px;padding:14px}
  .result-next a{width:100%;box-sizing:border-box}
  .weak-analysis a{grid-template-columns:minmax(0,1fr) auto;gap:7px 10px}.weak-arrow{grid-column:2;grid-row:1}.weak-analysis a>b{grid-column:2;grid-row:2}.weak-topic-main{grid-column:1;grid-row:1 / span 2}
}
@media(max-width:380px){
  .result{padding:16px 12px}
  .result-head{align-items:flex-start}.result-score-copy h2{font-size:2rem}.result-percent{width:76px;height:76px;flex-basis:76px;font-size:1.15rem}.result-percent:before{inset:6px}
  .result-performance{font-size:.61rem}.result-counts span{min-height:56px;padding:8px 5px}.result-counts span b{font-size:.9rem}.result-counts span small{font-size:.61rem}
  .share-buttons{grid-template-columns:1fr 1fr}.share-btn{padding:9px 8px;font-size:.74rem}
}

/* FINAL FIX — keep chapter number in the left meta row; never overlap status badge */
.chapter .meta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.chapter .meta-left{position:static;display:inline-flex;align-items:center;gap:8px;min-width:0}
.chapter .chapter-number{position:static;top:auto;right:auto;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;height:23px;padding:0 7px;border-radius:8px;background:#f0f5fb;color:#6f8197;font-size:.64rem;line-height:1;font-weight:950;letter-spacing:.02em}
.chapter .status{position:static;flex:0 0 auto;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){
  .chapter .meta-left{gap:7px}
  .chapter .chapter-number{min-width:27px;height:22px;font-size:.61rem;padding:0 6px}
  .chapter .status{max-width:50%;font-size:.62rem;padding:5px 8px}
}
@media(max-width:380px){
  .chapter .chapter-number{min-width:25px;height:21px;font-size:.58rem;padding:0 5px}
  .chapter .status{max-width:52%;font-size:.58rem;padding:4px 7px}
}

/* =========================================================
   YAFONE BASICS — PHASE 2: MOBILE-FIRST LEARNING EXPERIENCE
   Presentation layer only. Existing learning logic/IDs preserved.
   ========================================================= */
.lesson-page{background:#f3f6fa;color:#10213d;padding-bottom:0}
.lesson-page .lesson-header{position:sticky;top:0;z-index:60;background:rgba(7,27,61,.97);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 5px 24px rgba(7,27,61,.14);backdrop-filter:blur(16px)}
.lesson-top{height:64px;display:flex;align-items:center;justify-content:space-between}
.lesson-brand{font-size:1.28rem;font-weight:950;letter-spacing:-.045em;color:#fff!important}.lesson-brand b{color:#55d9ff}
.lesson-header-actions{display:flex;align-items:center;gap:8px}.lesson-back{color:#d1dced;padding:9px 11px;border-radius:11px;font-size:.8rem;font-weight:800}.lesson-back:hover{background:rgba(255,255,255,.08);color:#fff}
.lesson-header .header-test{padding:9px 12px!important;border-radius:11px!important;font-size:.78rem!important}
.lesson-hero{background:linear-gradient(135deg,#071b3d,#0c396c 70%,#0e5b83);color:#fff;position:relative;overflow:hidden;padding:30px 0 24px}
.lesson-hero:after{content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-120px;top:-180px;box-shadow:0 0 0 35px rgba(255,255,255,.018),0 0 0 70px rgba(255,255,255,.012);pointer-events:none}
.lesson-hero-inner{position:relative;z-index:1}.lesson-crumb{display:flex;align-items:center;gap:8px;color:#74e4ff;font-size:.66rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.lesson-crumb i{font-style:normal;color:rgba(255,255,255,.4)}
.lesson-hero h1{margin:8px 0 7px;font-size:clamp(2rem,5vw,3.25rem);line-height:1.02;letter-spacing:-.055em;max-width:900px}.lesson-description{margin:0;color:#c8d8ea;font-size:.86rem}.lesson-description span{color:#7690ad;padding:0 3px}
.lesson-progress-line{max-width:760px;margin-top:18px}.lesson-progress-copy{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#a9bfd8;font-size:.7rem;font-weight:750}.lesson-progress-copy strong{color:#e7f0f9}.lesson-progress-line .track{margin-top:7px;height:7px;background:rgba(255,255,255,.14);border:0}.lesson-progress-line .track i{background:linear-gradient(90deg,#3fe3b0,#55d9ff,#7c83ff)}
.lesson-page .learning-summary{grid-template-columns:120px 120px 120px minmax(0,1fr);gap:8px;margin-top:16px}.lesson-page .learning-summary>div{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11)}.lesson-page .learning-summary strong{font-size:1.05rem}.lesson-page .learning-summary span{font-size:.66rem;color:#afc2d8}.lesson-page .summary-actions{gap:7px}.lesson-page .learning-summary button{padding:8px 10px;border-radius:10px;font-size:.73rem}.lesson-page .learning-summary .primary{color:#0b4ca4!important;background:#fff!important}
.lesson-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;padding:22px 0 60px;align-items:start}
.lesson-page .topic-sidebar{position:sticky;top:80px;max-height:calc(100vh - 98px);overflow:auto;padding:12px;background:rgba(255,255,255,.9);border:1px solid #dfe7f0;border-radius:18px;box-shadow:0 12px 35px rgba(16,33,61,.07);backdrop-filter:blur(12px)}
.lesson-page .topic-sidebar:before{display:none}.topic-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 10px;border-bottom:1px solid #edf1f5}.topic-sidebar-head span:first-child{display:block;color:#8796aa;font-size:.59rem;font-weight:950;letter-spacing:.12em}.topic-sidebar-head strong{display:block;font-size:1rem;margin-top:2px}.topic-count-badge{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#edf4ff;color:#1769ff;font-size:.72rem;font-weight:950}
.lesson-page .topic-menu{display:block;padding-top:7px}.lesson-page .topic-menu button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:#61728a;text-align:left;padding:8px 7px;border-radius:11px;font-size:.73rem;line-height:1.2}.lesson-page .topic-menu button span{flex:0 0 25px;width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:#eef3f8;color:#75869a;font-size:.62rem;font-weight:950}.lesson-page .topic-menu button.active{background:#edf5ff;color:#0c5bc1;font-weight:900;box-shadow:inset 3px 0 #1769ff}.lesson-page .topic-menu button.active span{background:#1769ff;color:#fff}.lesson-page .topic-menu button.done span{font-size:0;background:#e5faf1;color:#087c59}.lesson-page .topic-menu button.done span:after{content:'✓';font-size:.72rem}.lesson-page .topic-menu button.needs-revision{color:#8a5b00}.lesson-page .topic-menu button.needs-revision span{font-size:.62rem;background:#fff3d8;color:#9a6700}.lesson-page .topic-menu button.needs-revision:after{content:'↻';position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#fff3d8;color:#9a6700;font-size:.82rem;font-weight:950}.lesson-page .topic-menu button.needs-revision{padding-right:34px}.lesson-page .sidebar-test{margin:10px 0 0;padding:10px!important;border-radius:11px!important;font-size:.76rem!important}
.lesson-page .lesson-card{background:#fff;border:1px solid #dfe6ef;border-radius:20px;padding:clamp(20px,3.5vw,34px);box-shadow:0 14px 40px rgba(16,33,61,.07);min-width:0}
.lesson-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.lesson-page .step{padding:6px 9px;font-size:.64rem;border-radius:8px;background:#edf5ff;color:#1769d6}.lesson-page .topic-tools{margin:0;display:flex;align-items:center;gap:5px}.lesson-page .topic-tools .tools-label{font-size:.64rem;color:#8a99ab;font-weight:800;margin-right:3px}.lesson-page .topic-tools button{width:34px;height:32px;border-radius:9px;font-size:.72rem;box-shadow:none}
.topic-title-block{margin:16px 0 20px;padding-bottom:18px;border-bottom:1px solid #edf1f5}.topic-overline{font-size:.61rem;letter-spacing:.13em;font-weight:950;color:#1769ff}.lesson-page .topic-title-block h2{font-size:clamp(1.65rem,4vw,2.45rem);line-height:1.08;letter-spacing:-.045em;margin:5px 0 7px}.topic-reading-meta{display:flex;align-items:center;gap:7px;color:#7a899b;font-size:.72rem;font-weight:700}.topic-reading-meta span:nth-child(2){color:#b3bfcd}
.lesson-page .content{font-size:1rem;color:#243753;max-width:860px}.lesson-page .content p,.lesson-page .content li{line-height:1.78}.lesson-page .content h3{margin-top:28px}.lesson-page .content .concept,.lesson-page .content .example,.lesson-page .content .warning,.lesson-page .content .neet,.lesson-page .content .formula,.lesson-page .content .reference,.lesson-page .content .visual,.lesson-page .content .key-grid{border-radius:14px}
.lesson-page .checks{margin-top:30px;padding-top:22px}.lesson-page .checks-intro{padding:12px 14px;border-radius:13px}.lesson-page .mini-check{padding:18px 0}.lesson-page .option{padding:13px 14px;border-radius:12px}
.lesson-page .topic-actions{margin-top:20px;padding:12px;border-radius:14px}.lesson-page .topic-actions button{padding:9px 12px;border-radius:10px;font-size:.78rem}.lesson-page .topic-actions .primary{background:#1769ff}
.lesson-next-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:18px;padding-top:17px;border-top:1px solid #e9eef4}.lesson-next-nav button{border:1px solid #d5dfeb;background:#fff;color:#294968;border-radius:10px;padding:10px 13px;font-weight:850;font-size:.78rem}.lesson-next-nav button.primary{background:#1769ff;color:#fff;border-color:#1769ff}.nav-center{text-align:center;min-width:0}.nav-center span{display:block;color:#8a98aa;font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.nav-center b{display:block;color:#53677f;font-size:.66rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson-page .mobile-test-bar{display:none}

@media(max-width:900px){
  .lesson-layout{grid-template-columns:1fr;gap:10px}.lesson-page .topic-sidebar{position:sticky;top:64px;z-index:35;max-height:none;padding:8px 9px;border-radius:14px;overflow:hidden}.topic-sidebar-head{display:none}.lesson-page .topic-menu{display:flex;overflow-x:auto;gap:5px;padding:0;scrollbar-width:none}.lesson-page .topic-menu::-webkit-scrollbar{display:none}.lesson-page .topic-menu button{flex:0 0 auto;width:auto;min-width:142px;max-width:190px;padding:7px 9px;border:1px solid #e4eaf1;background:#f8fafc}.lesson-page .topic-menu button.active{background:#edf5ff;border-color:#c8def8;box-shadow:inset 3px 0 #1769ff}.lesson-page .sidebar-test{display:none}
}
@media(max-width:760px){
  .lesson-page .wrap{width:min(calc(100% - 20px),1180px)}.lesson-top{height:58px}.lesson-brand{font-size:1.18rem}.lesson-back{font-size:.75rem;padding:8px 9px}.lesson-header .header-test{font-size:.72rem!important;padding:8px 9px!important}
  .lesson-hero{padding:20px 0 17px}.lesson-crumb{font-size:.56rem;gap:6px}.lesson-hero h1{font-size:1.82rem;margin-top:7px}.lesson-description{font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-progress-line{margin-top:13px}.lesson-progress-copy{font-size:.62rem}.lesson-page .learning-summary{grid-template-columns:repeat(3,1fr) 1.45fr;margin-top:12px;gap:5px}.lesson-page .learning-summary>div{padding:8px 7px;border-radius:10px}.lesson-page .learning-summary strong{font-size:.84rem}.lesson-page .learning-summary span{font-size:.56rem}.lesson-page .summary-actions{gap:5px}.lesson-page .summary-actions button{padding:7px 7px;font-size:.61rem;min-height:34px}
  .lesson-layout{padding:10px 0 78px;gap:8px}.lesson-page .topic-sidebar{top:58px;padding:6px 7px;border-radius:12px}.lesson-page .topic-menu button{min-width:154px;max-width:210px;font-size:.67rem;padding:6px 8px}.lesson-page .topic-menu button span{width:23px;height:23px;flex-basis:23px}
  .lesson-page .lesson-card{border-radius:16px;padding:17px 15px;box-shadow:0 9px 26px rgba(16,33,61,.055)}.lesson-card-top{gap:7px}.lesson-page .step{font-size:.58rem;padding:5px 7px}.lesson-page .topic-tools .tools-label{display:none}.lesson-page .topic-tools button{width:32px;height:30px;font-size:.68rem}.topic-title-block{margin:13px 0 16px;padding-bottom:14px}.topic-overline{font-size:.56rem}.lesson-page .topic-title-block h2{font-size:1.45rem;margin-top:4px}.topic-reading-meta{font-size:.63rem}.lesson-page .content{font-size:.91rem}.lesson-page .content p,.lesson-page .content li{line-height:1.72}.lesson-page .content h3{font-size:1.05rem;margin-top:24px}.lesson-page .content .concept,.lesson-page .content .example,.lesson-page .content .warning,.lesson-page .content .neet,.lesson-page .content .formula,.lesson-page .content .reference,.lesson-page .content .visual,.lesson-page .content .key-grid{padding:14px 13px;margin:15px 0}.lesson-page .formula{font-size:.97rem}.lesson-page .table-wrap{margin:15px 0}.lesson-page th,.lesson-page td{padding:10px 11px}
  .lesson-page .checks{margin-top:24px;padding-top:18px}.lesson-page .checks-intro{padding:10px 11px}.lesson-page .checks-intro strong{font-size:.78rem}.lesson-page .checks-intro span{font-size:.56rem}.lesson-page .checks-intro em{font-size:.61rem}.lesson-page .mini-check{padding:16px 0}.lesson-page .mini-check h3{font-size:.64rem}.lesson-page .mini-check p{font-size:.86rem}.lesson-page .option{font-size:.85rem;padding:12px 11px;margin:7px 0}
  .lesson-page .topic-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:17px;padding:10px}.lesson-page .topic-actions>div{grid-column:1/-1}.lesson-page .topic-actions button{font-size:.7rem;padding:9px 8px}.lesson-next-nav{grid-template-columns:1fr 1fr;gap:7px;margin-top:14px;padding-top:13px}.lesson-next-nav .nav-center{display:none}.lesson-next-nav button{font-size:.71rem;padding:10px 8px}.lesson-page .mobile-test-bar{display:block;position:fixed;z-index:50;left:0;right:0;bottom:0;padding:8px 10px 10px;background:rgba(255,255,255,.97);border-top:1px solid #dbe3ed;box-shadow:0 -8px 25px rgba(16,33,61,.1);backdrop-filter:blur(14px)}.lesson-page .mobile-test-bar button{display:block;width:100%;border:0;border-radius:10px;padding:10px;background:#1769ff;color:#fff;font-weight:900;font-size:.78rem;margin:0}.lesson-page .modal-backdrop{padding:12px}.lesson-page .decision-modal{padding:24px 18px;border-radius:20px}
}
@media(max-width:380px){
  .lesson-page .wrap{width:calc(100% - 14px)}.lesson-page .lesson-header .header-test{display:none}.lesson-back span{display:none}.lesson-hero h1{font-size:1.68rem}.lesson-page .learning-summary{grid-template-columns:repeat(3,1fr)}.lesson-page .summary-actions{grid-column:1/-1;margin-top:1px}.lesson-page .summary-actions button{font-size:.66rem}.lesson-page .topic-menu button{min-width:142px}.lesson-page .lesson-card{padding:15px 13px}.lesson-page .topic-title-block h2{font-size:1.35rem}
}

/* Phase 4 navigation typography lock: keep mobile bottom-menu labels consistently large. */
.bottom-nav .nav-btn,
.ph-bottom .ph-nav,
.bottom .nav{
  font-size:16px !important;
  line-height:1.05 !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
.bottom-nav .nav-btn > span:not(.nav-icon),
.ph-bottom .ph-nav > span:not(.ph-nav-icon),
.bottom .nav > span:not(.nav-icon){
  font-size:16px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}
.bottom-nav .nav-icon,
.ph-bottom .ph-nav-icon,
.bottom .nav-icon{
  line-height:1 !important;
}


/* Final mobile topic navigator: always horizontal, never stacked. */
@media (max-width:760px){
  .lesson-page .topic-sidebar{
    width:100%;
    min-width:0;
  }
  .lesson-page .topic-menu,
  .lesson-page #menu.topic-menu{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:7px !important;
    padding:2px 1px 5px !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .lesson-page .topic-menu::-webkit-scrollbar{display:none}
  .lesson-page .topic-menu button,
  .lesson-page #menu.topic-menu button{
    display:flex !important;
    flex:0 0 190px !important;
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
    white-space:normal !important;
    margin:0 !important;
    scroll-snap-align:start;
  }
  .lesson-page .topic-menu button.active{
    box-shadow:inset 3px 0 #1769ff !important;
  }
}

/* A completed topic that needs revision is not an error: use a calm review icon. */
.lesson-page .topic-menu button.needs-revision span{
  font-size:.62rem !important;
  background:#fff3d8 !important;
  color:#9a6700 !important;
}
.lesson-page .topic-menu button.needs-revision:after{
  content:'↻' !important;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#fff3d8;
  color:#9a6700 !important;
  font-size:.82rem !important;
  font-weight:950 !important;
}

/* Keep topic numbers visible and show mastery as a separate status mark. */
.lesson-page .topic-menu button.done span{
  font-size:.62rem !important;
}
.lesson-page .topic-menu button.done span:after{
  content:none !important;
}
.lesson-page .topic-menu button.mastered{
  position:relative;
  padding-right:34px;
}
.lesson-page .topic-menu button.mastered span{
  background:#e5faf1 !important;
  color:#087c59 !important;
}
.lesson-page .topic-menu button.mastered:after{
  content:'✓';
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#e5faf1;
  color:#087c59;
  font-size:.76rem;
  font-weight:950;
}
.lesson-page .topic-menu button.needs-revision{padding-right:34px !important;}

/* Reading-size control: every tap changes the lesson body size and persists it. */
.lesson-page .content{font-size:calc(var(--reading-scale,1) * 1rem) !important;transition:font-size .18s ease;}
.lesson-page .content p,.lesson-page .content li{font-size:inherit;}

/* Final mobile lesson bottom spacing fix. The global mobile body padding
   was creating a large blank gap below Previous / Next before the fixed CTA. */
@media(max-width:760px){
  body.lesson-page{padding-bottom:0 !important;}
  .lesson-page .lesson-layout{padding-bottom:66px !important;}
}

/* Phase 6C browser-width stability fix: prevent the lesson reader from becoming
   a narrow second grid column on desktop/tablet browser viewports. */
.lesson-page .lesson-layout{
  width:min(1180px,calc(100% - 36px));
  min-width:0;
}
.lesson-page .lesson-card{
  width:100%;
  min-width:0;
}
@media (max-width:1100px){
  .lesson-page .lesson-layout{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px;
  }
  .lesson-page .topic-sidebar,
  .lesson-page .lesson-card{
    width:100%;
    min-width:0;
  }
}


/* Phase 6E definitive lesson reader layout fix.
   Use an explicit flex row on desktop so the topic sidebar can never consume
   the reader column width. The article always owns the remaining space. */
.lesson-page .lesson-layout{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:18px !important;
  width:min(1180px,calc(100% - 36px)) !important;
  min-width:0 !important;
}
.lesson-page .lesson-layout > .topic-sidebar{
  order:1 !important;
  flex:0 0 250px !important;
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;
}
.lesson-page .lesson-layout > .lesson-card{
  order:2 !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
@media (max-width:1100px){
  .lesson-page .lesson-layout{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
  }
  .lesson-page .lesson-layout > .topic-sidebar,
  .lesson-page .lesson-layout > .lesson-card{
    order:initial !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* Phase 6G lesson-page guest card safety: the lesson reader should be Topics + Reader only. */
.lesson-page [data-yafone-guest-sync-card]{display:none !important;}

/* Phase 7: premium compact lesson header and mobile-first chapter hero. */
.lesson-page .lesson-header{background:rgba(255,255,255,.97);border-bottom:1px solid #e3e9f2;box-shadow:0 3px 14px rgba(31,66,122,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lesson-page .lesson-top{height:68px}
.lesson-page .lesson-brand{width:62px;height:51px;display:grid;place-items:center;padding:3px;border:1px solid rgba(83,126,202,.28);border-radius:15px;background:linear-gradient(145deg,#17345c,#0c2343);box-shadow:0 4px 12px rgba(20,54,102,.15);overflow:hidden}
.lesson-page .lesson-brand img{display:block;width:100%;height:100%;object-fit:contain}
.lesson-page .lesson-header-actions{margin-left:auto;min-width:0}
.lesson-page .lesson-header [data-yafone-auth-ui]{display:inline-flex!important;align-items:center!important;gap:7px!important;margin-left:0!important;white-space:nowrap}
.lesson-page .lesson-header [data-yafone-auth-status]{color:#6b7890!important;font-size:.75rem!important}
.lesson-page .lesson-header [data-yafone-login],.lesson-page .lesson-header [data-yafone-guest-sync],.lesson-page .lesson-header [data-yafone-auth-ui] a,.lesson-page .lesson-header [data-yafone-auth-ui] button{min-height:40px!important;padding:7px 10px!important;border:1px solid #dfe7f3!important;border-radius:11px!important;background:#f3f6fc!important;color:#365aa8!important;font-size:.8rem!important;font-weight:800!important;box-shadow:none!important}
.lesson-page .lesson-header [data-yafone-login]{background:#3567ed!important;border-color:#3567ed!important;color:#fff!important}
.lesson-hero-back{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 13px;margin:0 0 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.09);color:#fff!important;font-size:.78rem;font-weight:850;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.lesson-hero-back:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.27)}

@media(max-width:760px){
  .lesson-page .lesson-top{height:64px}
  .lesson-page .lesson-brand{width:56px;height:47px;border-radius:14px}
  .lesson-page .lesson-header .header-test{display:none!important}
  .lesson-page .lesson-header [data-yafone-auth-status]{display:none!important}
  .lesson-page .lesson-header [data-yafone-login],.lesson-page .lesson-header [data-yafone-guest-sync],.lesson-page .lesson-header [data-yafone-auth-ui] a,.lesson-page .lesson-header [data-yafone-auth-ui] button{min-height:38px!important;padding:6px 9px!important;font-size:.74rem!important}
  .lesson-hero{padding:14px 0 14px}
  .lesson-hero-back{min-height:42px;margin-bottom:10px;padding:7px 12px;font-size:.75rem}
  .lesson-crumb{font-size:.55rem;gap:5px}
  .lesson-hero h1{font-size:1.65rem;line-height:1.08;margin:6px 0}
  .lesson-description{font-size:.7rem}
  .lesson-progress-line{margin-top:10px}
  .lesson-progress-line .track{height:6px;margin-top:6px}
  .lesson-page .learning-summary{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;gap:6px}
  .lesson-page .learning-summary>div{padding:7px 8px;border-radius:11px}
  .lesson-page .learning-summary strong{font-size:.86rem}
  .lesson-page .learning-summary span{font-size:.57rem}
  .lesson-page .summary-actions{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;gap:7px;margin-top:0;padding:6px!important}
  .lesson-page .summary-actions button{min-height:40px;padding:7px 8px;font-size:.68rem}
  .lesson-page .summary-actions .primary{grid-column:auto}
  .lesson-page .summary-actions .mastery-link{display:none}
  .lesson-layout{padding-top:8px;padding-bottom:70px}
  .lesson-page .topic-sidebar{top:64px;padding:6px 7px}
  .lesson-page .topic-menu button{min-height:54px;min-width:142px;max-width:190px;padding:6px 8px}
  .lesson-page .mobile-test-bar{padding:6px 10px max(7px,env(safe-area-inset-bottom));box-shadow:0 -5px 18px rgba(16,33,61,.09)}
  .lesson-page .mobile-test-bar button{min-height:42px;padding:8px 12px;border-radius:11px;font-size:.76rem}
  .lesson-page{padding-bottom:calc(55px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){
  .lesson-page .lesson-brand{width:52px;height:44px;border-radius:13px}
  .lesson-page .lesson-header [data-yafone-login],.lesson-page .lesson-header [data-yafone-guest-sync],.lesson-page .lesson-header [data-yafone-auth-ui] a,.lesson-page .lesson-header [data-yafone-auth-ui] button{padding:6px 8px!important;font-size:.7rem!important}
  .lesson-back span{display:inline}
  .lesson-hero h1{font-size:1.55rem}
}

/* Phase 8: final mobile alignment, active-topic visibility and Android bar fix. */
.lesson-page .lesson-top{position:relative;display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important}
.lesson-page .lesson-header-actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;width:auto!important}
.lesson-page .lesson-header [data-yafone-auth-ui]{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;width:auto!important}
.lesson-page .lesson-header [data-yafone-login],.lesson-page .lesson-header [data-yafone-guest-sync],.lesson-page .lesson-header [data-yafone-auth-ui] a,.lesson-page .lesson-header [data-yafone-auth-ui] button{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1!important}
.lesson-hero-kicker{display:flex;align-items:center;gap:14px;margin-bottom:11px;min-width:0}
.lesson-hero-kicker .lesson-hero-back{flex:0 0 auto;margin:0}
.lesson-hero-kicker .lesson-crumb{min-width:0}

@media(max-width:760px){
  .lesson-page .lesson-top{height:62px}
  .lesson-page .lesson-brand{width:54px;height:45px}
  .lesson-hero{padding:12px 0 12px}
  .lesson-hero-kicker{gap:9px;margin-bottom:7px}
  .lesson-hero-kicker .lesson-hero-back{min-height:38px;padding:6px 10px;font-size:.7rem}
  .lesson-hero-kicker .lesson-crumb{font-size:.5rem;gap:4px;letter-spacing:.08em;white-space:nowrap}
  .lesson-hero h1{margin:5px 0;font-size:1.6rem}
  .lesson-progress-line{margin-top:8px}
  .lesson-page .learning-summary{margin-top:8px}
  .lesson-page .learning-summary>div{padding:6px 7px}
  .lesson-page .summary-actions{padding:5px!important}
  .lesson-page .summary-actions button{min-height:38px}
  .lesson-page .topic-menu{scroll-behavior:auto;scroll-snap-type:x proximity}
  .lesson-page .topic-menu button{scroll-snap-align:center}
  .lesson-page .mobile-test-bar{padding:5px 10px max(6px,env(safe-area-inset-bottom))}
  .lesson-page .mobile-test-bar button{min-height:40px;padding:7px 12px}
  html[data-ya-android="true"] .lesson-page .mobile-test-bar{padding-bottom:6px}
  html[data-ya-android="true"] .lesson-page{padding-bottom:53px}
}
@media(max-width:380px){
  .lesson-page .lesson-header [data-yafone-login],.lesson-page .lesson-header [data-yafone-guest-sync],.lesson-page .lesson-header [data-yafone-auth-ui] a,.lesson-page .lesson-header [data-yafone-auth-ui] button{min-width:0!important;min-height:36px!important;padding:5px 8px!important}
  .lesson-hero-kicker{gap:7px}
  .lesson-hero-kicker .lesson-hero-back{padding:6px 8px}
  .lesson-hero-kicker .lesson-crumb{font-size:.47rem;letter-spacing:.055em}
}

/* Phase 9: guarantee authentication UI stays in the single header row. */
.lesson-page .lesson-header{height:68px;min-height:68px}
.lesson-page .lesson-header>.lesson-top{height:68px!important}
.lesson-page .lesson-header>[data-yafone-auth-ui]{position:absolute!important;right:max(10px,calc((100% - 1180px)/2));top:50%!important;transform:translateY(-50%);margin:0!important;display:flex!important;align-items:center!important;z-index:2}
@media(max-width:760px){
  .lesson-page .lesson-header{height:62px;min-height:62px}
  .lesson-page .lesson-header>.lesson-top{height:62px!important}
  .lesson-page .lesson-header>[data-yafone-auth-ui]{right:10px}
}

/* Phase 10: clear disabled and active states for the topic-check retake control. */
.lesson-page #retakeTopic{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease}
.lesson-page #retakeTopic:disabled,.lesson-page #retakeTopic:disabled:hover,.lesson-page #retakeTopic:disabled:active{opacity:1!important;background:#edf2f8!important;border-color:#d8e1ec!important;color:#65758a!important;box-shadow:none!important;cursor:not-allowed;transform:none!important}

/* Phase 11: center Mastery Test labels and restore clear pointer interactions. */
.lesson-page .sidebar-test,
.lesson-page .mobile-test-bar .mastery-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.15!important;
  cursor:pointer!important;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease,border-color .18s ease!important;
}
.lesson-page .sidebar-test:hover,
.lesson-page .sidebar-test:focus-visible,
.lesson-page .mobile-test-bar .mastery-link:hover,
.lesson-page .mobile-test-bar .mastery-link:focus-visible{
  background:linear-gradient(135deg,#0d5de8,#4f55e9)!important;
  color:#fff!important;
  box-shadow:0 13px 28px rgba(23,105,255,.32)!important;
  transform:translateY(-2px)!important;
}
.lesson-page .sidebar-test:active,
.lesson-page .mobile-test-bar .mastery-link:active{
  background:linear-gradient(135deg,#0a52cf,#4449d4)!important;
  box-shadow:0 6px 15px rgba(23,105,255,.24)!important;
  transform:translateY(0)!important;
}
@media(max-width:760px){
  .lesson-page .sidebar-test{display:none!important}
}
.lesson-page #retakeTopic:not(:disabled){background:linear-gradient(135deg,#1769ff,#4f64f3)!important;border-color:#1769ff!important;color:#fff!important;box-shadow:0 8px 18px rgba(23,105,255,.2)!important;cursor:pointer}
.lesson-page #retakeTopic:not(:disabled):hover{background:linear-gradient(135deg,#0f5fe9,#4258df)!important;border-color:#0f5fe9!important;color:#fff!important;transform:translateY(-1px)}
.lesson-page #retakeTopic:not(:disabled):active{background:#0d56d6!important;color:#fff!important;transform:scale(.985)}
@media(max-width:760px){.lesson-page #retakeTopic{min-height:44px;padding:9px 10px!important}}

/* Phase 11: clear action hierarchy in the early Mastery Test confirmation. */
.lesson-page #stayLearning,.lesson-page #takeTestAnyway{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-align:center;line-height:1.2}
.lesson-page #stayLearning{background:#1769ff!important;border-color:#1769ff!important;color:#fff!important;box-shadow:0 8px 18px rgba(23,105,255,.18)}
.lesson-page #stayLearning:hover,.lesson-page #stayLearning:active{background:#0f5ce8!important;border-color:#0f5ce8!important;color:#fff!important}
.lesson-page #takeTestAnyway{background:#fff!important;border-color:#1769ff!important;color:#1769ff!important;box-shadow:none!important}
.lesson-page #takeTestAnyway:hover,.lesson-page #takeTestAnyway:active,.lesson-page #takeTestAnyway:focus{background:#edf5ff!important;border-color:#1769ff!important;color:#0d5dcb!important;box-shadow:none!important}
@media(max-width:760px){.lesson-page #stayLearning,.lesson-page #takeTestAnyway{width:100%;min-height:46px}}