:root{--learn-primary:#0d6efd;--learn-green:#15803d;--learn-ink:#172033;--learn-muted:#667085;--learn-line:#e4e9f2;--learn-bg:#f5f7fb;--learn-card:#fff;--learn-radius:22px}
.learning-page{background:var(--learn-bg);min-height:72vh;color:var(--learn-ink)}
.learning-page *{box-sizing:border-box}.learning-page a{text-underline-offset:3px}.learning-eyebrow{display:block;font-size:.74rem;letter-spacing:.13em;font-weight:800;opacity:.82;margin-bottom:.45rem}.learning-hero{background:linear-gradient(135deg,#0f766e,#0b5ed7);color:#fff;border-radius:28px;padding:clamp(1.5rem,4vw,3.2rem);box-shadow:0 18px 50px rgba(15,118,110,.2)}
.learning-hero-dashboard{display:flex;justify-content:space-between;align-items:center;gap:2rem;overflow:hidden;position:relative}.learning-hero-dashboard:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08);right:-100px;top:-130px}.hero-copy{position:relative;z-index:1;max-width:760px}.hero-copy h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:850;line-height:1.12;margin:0 0 .8rem}.hero-copy p{font-size:clamp(1rem,2vw,1.18rem);opacity:.92;margin:0 0 1.2rem}.hero-stats{display:flex;flex-wrap:wrap;gap:.7rem}.hero-stats span{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.55rem .8rem;font-size:.88rem}.hero-stats strong{font-size:1rem;margin-right:.25rem}.hero-ring,.topic-ring{--size:140px;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:conic-gradient(#fff calc(var(--progress)*1%),rgba(255,255,255,.22) 0);position:relative;z-index:1}.hero-ring:after,.topic-ring:after{content:"";position:absolute;inset:10px;background:linear-gradient(145deg,#0e7490,#0b5ed7);border-radius:50%}.hero-ring>div,.topic-ring>div{position:relative;z-index:1;text-align:center}.hero-ring strong,.topic-ring strong{display:block;font-size:1.65rem}.hero-ring span,.topic-ring span{display:block;font-size:.73rem;opacity:.85}
.continue-card{background:#fff;border:1px solid #dce5f1;border-radius:22px;padding:1.15rem 1.3rem;display:flex;align-items:center;gap:1rem;box-shadow:0 10px 30px rgba(30,41,59,.07)}.continue-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#eaf2ff;color:var(--learn-primary);font-size:1.45rem}.continue-label{font-size:.76rem;font-weight:800;letter-spacing:.08em;color:var(--learn-primary);text-transform:uppercase}.continue-card h2{font-size:1.25rem;font-weight:800;margin:.1rem 0}.continue-card p{margin:0;color:var(--learn-muted);font-size:.9rem}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin:1.7rem 0 1rem}.section-heading h2{font-weight:850;margin:0}.login-hint,.roadmap-note{color:var(--learn-muted);font-size:.88rem}
.learning-subject-card{background:#fff;border:1px solid var(--learn-line);border-radius:22px;padding:1.35rem;box-shadow:0 7px 24px rgba(30,41,59,.05);transition:.2s ease;display:flex;flex-direction:column}.learning-subject-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,41,59,.1);border-color:#b7cff6}.subject-card-top{display:flex;justify-content:space-between;align-items:start}.subject-icon{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;background:#eaf2ff;color:var(--learn-primary);font-size:1.48rem}.subject-status{font-size:.73rem;font-weight:800;padding:.34rem .58rem;border-radius:999px;background:#f0f2f5;color:#667085}.subject-status.is-active{background:#eaf2ff;color:#0b5ed7}.subject-status.is-complete{background:#e9f8ef;color:#15803d}.learning-subject-card h3{font-size:1.35rem;font-weight:850;margin:1rem 0 .4rem}.subject-description{color:var(--learn-muted);min-height:48px}.course-progress-meta{display:flex;justify-content:space-between;font-size:.86rem;margin-top:auto;margin-bottom:.4rem}.course-progress{height:9px;background:#edf1f6;border-radius:999px}.progress-bar{background:linear-gradient(90deg,#0d6efd,#16a085);border-radius:999px}.course-action{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-weight:800;margin-top:1rem;color:var(--learn-primary)}.course-action i{font-size:1.35rem}.empty-learning{background:#fff;border:1px dashed #cad3e0;border-radius:22px;padding:3rem;text-align:center;color:var(--learn-muted)}.empty-learning>i{font-size:2.4rem}.empty-learning h3{color:var(--learn-ink);margin:.8rem 0 .3rem}
.learning-back{display:inline-flex;align-items:center;gap:.45rem;color:#46566b;text-decoration:none;font-weight:750}.course-overview{background:linear-gradient(135deg,#0f766e,#0b5ed7);color:#fff;border-radius:28px;padding:clamp(1.5rem,4vw,2.8rem);display:flex;justify-content:space-between;gap:2rem;align-items:center}.course-overview h1{font-weight:850;margin:.15rem 0 .65rem}.course-overview p{max-width:760px;opacity:.92}.course-summary{display:flex;flex-wrap:wrap;gap:1rem;font-size:.9rem}.course-summary span{display:inline-flex;gap:.35rem;align-items:center}.overview-progress{width:min(260px,100%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:1rem;border-radius:18px}.overview-progress strong{font-size:1.8rem;display:block}.overview-progress span{font-size:.8rem;opacity:.9}.overview-progress .progress{height:8px;margin-top:.7rem;background:rgba(255,255,255,.22)}.overview-progress .progress-bar{background:#fff}.roadmap-shell{position:relative}.chapter-roadmap{display:grid;grid-template-columns:56px 1fr;gap:1rem;position:relative;padding-bottom:1.2rem}.chapter-roadmap:not(:last-child):before{content:"";position:absolute;left:27px;top:52px;bottom:-4px;width:2px;background:#d9e1ec}.chapter-marker{position:relative;z-index:1}.chapter-marker span{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#0d6efd;color:#fff;font-weight:850;box-shadow:0 8px 20px rgba(13,110,253,.22)}.chapter-content{background:#fff;border:1px solid var(--learn-line);border-radius:22px;padding:1.2rem;box-shadow:0 7px 24px rgba(30,41,59,.04)}.chapter-kicker{font-size:.73rem;letter-spacing:.08em;font-weight:850;color:var(--learn-primary)}.chapter-title-row h2{font-size:1.35rem;font-weight:850;margin:.15rem 0}.chapter-title-row p{color:var(--learn-muted);margin:0 0 .8rem}.topic-card-v2{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;border:1px solid #e3e9f2;border-radius:17px;padding:1rem;transition:.18s ease;height:100%}.topic-card-v2:hover{transform:translateY(-2px);border-color:#8ebaff;box-shadow:0 10px 23px rgba(30,41,59,.08)}.topic-card-v2.is-active{background:#f8fbff;border-color:#b9d3ff}.topic-card-v2.is-complete{background:#f4fbf6;border-color:#b9e2c5}.topic-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#edf3ff;color:var(--learn-primary);flex:0 0 auto}.is-complete .topic-icon{background:#dff4e5;color:#15803d}.topic-title-line{display:flex;justify-content:space-between;gap:.6rem}.topic-title-line h3{font-size:1rem;font-weight:800;margin:0}.topic-title-line span{font-size:.78rem;font-weight:800;color:var(--learn-primary)}.topic-card-v2 p{font-size:.84rem;color:var(--learn-muted);margin:.25rem 0 .5rem}.topic-card-v2 .progress{height:6px;background:#edf1f5}.topic-card-v2 small{display:block;margin-top:.35rem;color:var(--learn-muted)}.topic-arrow{color:#98a2b3}
.topic-hero-v2{background:linear-gradient(135deg,#0f766e,#0b5ed7);color:#fff;border-radius:28px;padding:clamp(1.5rem,4vw,2.8rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;box-shadow:0 18px 45px rgba(15,118,110,.18)}.topic-copy h1{font-weight:850;margin:.15rem 0 .65rem}.topic-copy p{max-width:700px;opacity:.92}.topic-stats{display:flex;flex-wrap:wrap;gap:1rem;font-size:.88rem}.topic-stats span{display:inline-flex;align-items:center;gap:.35rem}.topic-ring{--size:126px}.topic-ring:after{background:linear-gradient(145deg,#0e7490,#0b5ed7)}.next-up-card{background:#fff;border:1px solid #b9d3ff;border-radius:18px;padding:1rem 1.15rem;display:flex;align-items:center;gap:1rem;box-shadow:0 8px 24px rgba(13,110,253,.07)}.next-up-badge{font-size:.72rem;font-weight:850;background:#eaf2ff;color:#0b5ed7;padding:.38rem .55rem;border-radius:999px;white-space:nowrap}.next-up-card>div{flex:1}.next-up-card strong{display:block}.next-up-card small{display:block;color:var(--learn-muted);margin-top:.2rem}.skill-roadmap{max-width:980px;margin:0 auto}.skill-node{position:relative;padding-left:76px;padding-bottom:1rem}.skill-line{position:absolute;left:27px;top:56px;bottom:-5px;width:3px;background:#dfe5ed}.skill-node:last-child .skill-line{display:none}.lesson-card-v2{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:1rem 1.1rem;display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;transition:.18s ease;box-shadow:0 6px 20px rgba(30,41,59,.04)}.lesson-card-v2:hover{transform:translateX(3px);border-color:#9bc1ff;box-shadow:0 11px 26px rgba(30,41,59,.08)}.lesson-orb{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:#edf1f6;color:#596579;font-weight:850;border:4px solid var(--learn-bg);z-index:1}.skill-node.done .lesson-orb{background:#198754;color:#fff}.skill-node.current .lesson-orb{background:#0d6efd;color:#fff;box-shadow:0 0 0 5px rgba(13,110,253,.12)}.skill-node.current .lesson-card-v2{border-color:#91baff;background:#f8fbff}.skill-node.done .lesson-card-v2{border-color:#c8e7d1}.lesson-card-body{flex:1}.lesson-title-row{display:flex;justify-content:space-between;gap:1rem;align-items:start}.lesson-title-row h3{font-size:1.08rem;font-weight:850;margin:0}.lesson-state{font-size:.72rem;font-weight:850;border-radius:999px;padding:.3rem .55rem;background:#f0f2f5;color:#667085;white-space:nowrap}.done .lesson-state{background:#e6f6eb;color:#15803d}.current .lesson-state{background:#e8f1ff;color:#0b5ed7}.lesson-card-body p{color:var(--learn-muted);font-size:.88rem;margin:.35rem 0 .6rem}.lesson-meta{display:flex;flex-wrap:wrap;gap:.9rem;color:#65748b;font-size:.84rem}.lesson-arrow{color:#98a2b3}
.lesson-container{max-width:1180px}.lesson-page{scroll-behavior:smooth}.lesson-breadcrumb{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;font-size:.86rem;margin-bottom:1rem;color:var(--learn-muted)}.lesson-breadcrumb a{text-decoration:none}.lesson-progress-strip{background:#fff;border:1px solid var(--learn-line);border-radius:15px;padding:.75rem 1rem;margin-bottom:1rem}.lesson-progress-strip>div:first-child{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:.4rem}.lesson-progress-strip .progress{height:7px;background:#edf1f5}.lesson-header-v2{background:#fff;border:1px solid var(--learn-line);border-radius:24px;padding:clamp(1.2rem,3vw,2rem);display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1rem;box-shadow:0 8px 28px rgba(30,41,59,.05)}.lesson-ep-badge{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#0d6efd,#0f766e);color:#fff;font-weight:850;font-size:1.1rem;flex:0 0 auto}.lesson-header-v2 h1{font-size:clamp(1.65rem,3vw,2.45rem);font-weight:850;margin:.15rem 0 .5rem}.lesson-header-v2 p{color:var(--learn-muted);margin-bottom:.8rem}.lesson-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1rem;align-items:start}.lesson-toc{position:sticky;top:1rem;background:#fff;border:1px solid var(--learn-line);border-radius:18px;padding:1rem}.lesson-toc>strong{display:block;margin-bottom:.65rem}.lesson-toc nav{display:grid;gap:.2rem}.lesson-toc nav a{font-size:.84rem;text-decoration:none;color:#58667a;border-left:3px solid transparent;padding:.4rem .5rem}.lesson-toc nav a:hover,.lesson-toc nav a.active{color:var(--learn-primary);border-left-color:var(--learn-primary);background:#f4f8ff}.lesson-toc>a{display:block;border-top:1px solid #edf0f5;margin-top:.8rem;padding-top:.75rem;text-decoration:none;font-size:.84rem;font-weight:750}.lesson-content{background:#fff;border:1px solid var(--learn-line);border-radius:22px;padding:clamp(1.15rem,3vw,2.2rem);font-size:1.06rem;line-height:1.85;box-shadow:0 8px 28px rgba(30,41,59,.05);overflow-wrap:anywhere}.lesson-content h2{font-size:1.42rem;font-weight:850;margin:2rem 0 .8rem;scroll-margin-top:1rem}.lesson-content h2:first-child{margin-top:.25rem}.lesson-content h3{font-size:1.18rem;font-weight:800;margin-top:1.5rem}.lesson-content img{max-width:100%;height:auto;border-radius:14px}.lesson-content table{width:100%;display:block;overflow-x:auto}.lesson-content .formula-box,.lesson-content .example-box,.lesson-content .tip-box,.lesson-content .warning-box,.lesson-content .note-box{border-radius:16px;padding:1rem 1.1rem;margin:1rem 0}.formula-box{background:#f1f6ff;border-left:5px solid #0d6efd;text-align:center}.example-box{background:#f8fafc;border-left:5px solid #64748b}.tip-box{background:#effbf5;border-left:5px solid #198754}.warning-box{background:#fff8e6;border-left:5px solid #f0ad00}.note-box{background:#f7f1ff;border-left:5px solid #7c3aed}.lesson-finish-v2{background:linear-gradient(135deg,#effaf3,#f7fbff);border:1px solid #bfe1c9;border-radius:20px;padding:1.1rem;display:flex;align-items:center;gap:1rem;margin-top:1rem}.finish-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#198754;color:#fff;font-size:1.25rem}.lesson-finish-v2 h2{font-size:1.15rem;font-weight:850;margin:0}.lesson-finish-v2 p{margin:.2rem 0 0;color:var(--learn-muted);font-size:.88rem}.lesson-navigation-v2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.lesson-navigation-v2 a{background:#fff;border:1px solid var(--learn-line);border-radius:17px;padding:1rem;text-decoration:none;color:inherit;display:flex;flex-direction:column}.lesson-navigation-v2 a span{font-size:.78rem;color:var(--learn-muted);margin-bottom:.25rem}.lesson-navigation-v2 a strong{font-size:.92rem}.lesson-navigation-v2 .is-next{text-align:right;border-color:#b9d3ff;background:#f8fbff}.pulse-next{animation:pulseNext 1.15s ease 2}.learning-toast{position:fixed;right:20px;bottom:20px;z-index:1080;background:#173b2c;color:#fff;padding:.82rem 1rem;border-radius:13px;box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;align-items:center;gap:.55rem}.learning-toast.is-error{background:#842029}@keyframes pulseNext{50%{transform:scale(1.02);box-shadow:0 0 0 6px rgba(13,110,253,.12)}}
@media(max-width:991.98px){.lesson-layout{grid-template-columns:1fr}.lesson-toc{position:static}.lesson-toc nav{display:flex;overflow-x:auto;padding-bottom:.25rem}.lesson-toc nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}.lesson-toc nav a.active{border-left:0;border-bottom-color:var(--learn-primary)}.hero-ring{--size:112px}.course-overview{align-items:flex-start}.overview-progress{width:210px}}
@media(max-width:767.98px){.learning-hero-dashboard,.course-overview,.topic-hero-v2{display:block}.hero-ring,.topic-ring{margin:1.25rem auto 0}.hero-stats{gap:.45rem}.hero-stats span{font-size:.78rem}.continue-card{align-items:flex-start;flex-wrap:wrap}.continue-card .btn{width:100%}.section-heading{align-items:flex-start;display:block}.login-hint,.roadmap-note{display:block;margin-top:.35rem}.chapter-roadmap{grid-template-columns:42px 1fr;gap:.6rem}.chapter-marker span{width:42px;height:42px}.chapter-roadmap:not(:last-child):before{left:20px;top:40px}.chapter-content{padding:1rem}.overview-progress{width:100%;margin-top:1rem}.next-up-card{align-items:flex-start;flex-wrap:wrap}.next-up-card .btn{width:100%}.skill-node{padding-left:60px}.lesson-orb{width:46px;height:46px;border-radius:14px;font-size:.78rem}.skill-line{left:22px;top:45px}.lesson-card-v2{align-items:flex-start;padding:.9rem}.lesson-title-row{display:block}.lesson-state{display:inline-block;margin-top:.35rem}.lesson-arrow{display:none}.lesson-header-v2{display:block}.lesson-ep-badge{width:56px;height:56px;margin-bottom:.8rem}.lesson-content{font-size:1rem;padding:1.1rem}.lesson-finish-v2{align-items:flex-start;flex-wrap:wrap}.lesson-finish-v2 .btn{width:100%}.lesson-navigation-v2{grid-template-columns:1fr}.learning-toast{left:14px;right:14px;bottom:14px}}
@media(max-width:420px){.hero-stats span{width:100%}.topic-stats{display:grid;gap:.45rem}.lesson-meta{gap:.55rem}.chapter-content{border-radius:17px}.lesson-card-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* Floating back-to-top button — Build 6.2 */
.lesson-scroll-top{
  position:fixed;
  right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  z-index:1060;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-width:52px;
  height:52px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:linear-gradient(135deg,#0d6efd,#0f766e);
  color:#fff;
  font:inherit;
  font-weight:800;
  box-shadow:0 12px 30px rgba(13,110,253,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,box-shadow .2s ease;
}
.lesson-scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.lesson-scroll-top:hover,
.lesson-scroll-top:focus-visible{
  color:#fff;
  box-shadow:0 15px 34px rgba(13,110,253,.38);
  transform:translateY(-2px);
}
.lesson-scroll-top:focus-visible{
  outline:3px solid rgba(13,110,253,.25);
  outline-offset:3px;
}
.lesson-scroll-top i{
  font-size:1.25rem;
  line-height:1;
}
@media(max-width:767.98px){
  .lesson-scroll-top{
    right:calc(14px + env(safe-area-inset-right,0px));
    bottom:calc(18px + env(safe-area-inset-bottom,0px));
    width:50px;
    min-width:50px;
    height:50px;
    padding:0;
  }
  .lesson-scroll-top span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .lesson-scroll-top{transition:none}
}