/* L3 巧算课 · iPad 宽屏版 */
:root{
  --blue:#3b6ef6; --blue-d:#2a54c8; --blue-l:#eef3ff; --purple:#6a5af6;
  --bg:#f3f5fa; --card:#fff; --ink:#20283a; --sub:#74809a; --line:#e9edf4;
  --ok:#18a058; --bad:#d03050; --book:#e8f0fe; --book-ink:#2a54c8;
  --ai:#fdf3e3; --ai-ink:#a8680a;
  --shadow:0 4px 20px rgba(40,58,110,.07); --radius:18px; --side-w:300px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.7}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
video{background:#000}
.layout{display:flex;min-height:100vh}
.topbar{display:none}

/* 左侧树形导航 */
.sidebar{width:var(--side-w);flex:0 0 var(--side-w);background:#fff;border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;z-index:30;
  transition:flex-basis .25s ease,width .25s ease}
body.side-collapsed .sidebar{width:0;flex-basis:0;border-right:0}
.brand{display:flex;align-items:center;gap:11px;padding:22px 20px 16px;border-bottom:1px solid var(--line)}
.brand-text{min-width:0}
.side-collapse{margin-left:auto;flex:0 0 auto;width:40px;height:40px;border-radius:11px;color:var(--sub);
  font-size:16px;display:flex;align-items:center;justify-content:center;transition:.15s}
.side-collapse:hover{background:var(--blue-l);color:var(--blue-d)}

/* 宽屏下侧栏收起后出现的“展开目录”按钮 */
.side-open-fab{display:none;position:fixed;top:16px;left:16px;z-index:35;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-size:13.5px;font-weight:700;
  padding:9px 15px;border-radius:22px;box-shadow:0 4px 14px rgba(74,94,246,.4);transition:.15s}
.side-open-fab:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(74,94,246,.5)}
body.side-collapsed .side-open-fab{display:inline-flex}
body.side-collapsed .content{padding-top:64px}
.brand-logo{width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 4px 12px rgba(74,94,246,.35)}
.brand-name{font-size:17px;font-weight:800}
.brand-sub{font-size:11.5px;color:var(--sub);margin-top:1px}
.tree{flex:1;padding:12px 12px 20px}
.t-lesson{margin-bottom:6px}
.t-lesson-head{width:100%;display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px;
  font-size:15px;font-weight:700;color:var(--ink);text-align:left;transition:.15s}
.t-lesson-head:hover{background:var(--blue-l)}
.t-lesson.active .t-lesson-head{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;
  box-shadow:0 4px 12px rgba(74,94,246,.3)}
.t-lesson-head .ltag{font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--blue-l);color:var(--blue-d);
  margin-left:auto}
.t-lesson.active .ltag{background:rgba(255,255,255,.22);color:#fff}
.t-lesson-head .larrow{font-size:11px;opacity:.7;transition:.2s;flex:0 0 auto}
.t-lesson.open .larrow{transform:rotate(90deg)}
.t-points{display:none;padding:4px 0 6px 18px}
.t-lesson.open .t-points{display:block}
.t-point{width:100%;display:flex;align-items:center;gap:9px;text-align:left;padding:8px 11px;border-radius:10px;
  font-size:13.5px;color:#48536a;border-left:2px solid transparent;transition:.15s;line-height:1.45}
.t-point:hover{background:var(--blue-l)}
.t-point.active{background:var(--blue-l);color:var(--blue-d);font-weight:700;border-left-color:var(--blue)}
.t-point .pdot{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1.8px solid #c3ccdd;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent}
.t-point.done .pdot{background:var(--ok);border-color:var(--ok);color:#fff}
.side-foot{padding:12px 20px 18px;font-size:11px;color:#a8b1c2;border-top:1px solid var(--line)}
.scrim{display:none}

/* 右侧内容 */
.content{flex:1;min-width:0;padding:26px 34px 60px}
.wrap{max-width:900px;margin:0 auto}
.crumb{font-size:13px;color:var(--sub);margin-bottom:6px}
.crumb b{color:var(--blue-d)}
.lesson-hero{border-radius:var(--radius);background:linear-gradient(120deg,#3b6ef6,#5a6af6 55%,#6a5af6);
  color:#fff;padding:24px 28px;margin-bottom:22px;box-shadow:0 8px 24px rgba(74,94,246,.25);
  position:relative;overflow:hidden}
.lesson-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.1)}
.lesson-hero::before{content:"";position:absolute;right:60px;bottom:-70px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08)}
.lesson-hero h1{font-size:23px;font-weight:800;margin-bottom:7px;position:relative}
.lesson-hero p{font-size:14.5px;opacity:.95;position:relative;max-width:680px}

/* 知识点区块 */
.point{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;
  overflow:hidden;border:1px solid #f0f3f9;scroll-margin-top:20px}
.p-head{padding:18px 24px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfcff,#fff)}
.p-no{width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(74,94,246,.3)}
.p-head h2{font-size:19px;font-weight:800;flex:1}
.p-dur{font-size:12.5px;color:var(--sub);background:var(--bg);padding:4px 11px;border-radius:20px}
.p-body{padding:22px 24px 24px}
.video-frame{border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(20,30,60,.18);background:#000}
.video-frame video{width:100%;display:block;aspect-ratio:16/9}
.vtip{font-size:13px;color:var(--sub);margin:10px 4px 0}
.sec-t{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;margin:26px 0 13px}
.sec-t .ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:14px;background:var(--blue-l)}
.sec-t .line{flex:1;height:1px;background:var(--line)}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summary li{background:#f8faff;border:1px solid #edf1fb;border-radius:12px;padding:11px 14px;font-size:14.5px;color:#39435a}
.summary li::before{content:"✓";color:var(--blue);font-weight:800;margin-right:7px}
.example{background:#f7f9ff;border:1px solid #e4ebfd;border-left:4px solid var(--blue);border-radius:12px;
  padding:13px 16px;margin-bottom:11px;font-size:15px}
.example .tip{margin-top:6px;font-size:14px;color:#4a5670}
.example video{width:100%;max-height:260px;border-radius:10px;margin-top:10px}
/* 练习题 */
.ex{border:1.5px solid var(--line);border-radius:15px;padding:18px 20px;margin-bottom:15px;background:#fff;transition:.2s}
.ex:hover{border-color:#d4def5;box-shadow:0 4px 14px rgba(40,58,110,.06)}
.ex-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.badge{font-size:12px;font-weight:700;padding:3px 11px;border-radius:20px}
.badge.book{background:var(--book);color:var(--book-ink)}
.badge.ai{background:var(--ai);color:var(--ai-ink)}
.ex-type{font-size:12.5px;color:#9aa6bb}
.ex-q{font-size:17px;font-weight:700;line-height:1.7;white-space:pre-wrap}
.ex-actions{display:flex;gap:11px;margin-top:15px;flex-wrap:wrap}
.btn{border-radius:11px;padding:11px 20px;font-size:15px;font-weight:700;display:inline-flex;
  align-items:center;gap:7px;transition:.15s}
.btn.primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;box-shadow:0 4px 12px rgba(74,94,246,.3)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(74,94,246,.4)}
.btn.ghost{background:#f0f3f9;color:#46536e}
.btn.ghost:hover{background:#e6ebf4}
.thumb{display:none;max-width:170px;border-radius:11px;margin-top:14px;border:1px solid var(--line)}
.thumb.show{display:block}
.loading{display:none;align-items:center;gap:9px;color:var(--sub);font-size:14px;margin-top:14px}
.loading.show{display:flex}
.spinner{width:17px;height:17px;border:2.5px solid #d3dcf0;border-top-color:var(--blue);border-radius:50%;
  animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* 批改结果 */
.grade{display:none;margin-top:15px;border-radius:14px;padding:16px 18px;font-size:15px}
.grade.show{display:block;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.grade.correct{background:#ecf9f2;border:1px solid #b4e7cc}
.grade.partial{background:#fdf7ea;border:1px solid #f3dca5}
.grade.wrong{background:#fdeef2;border:1px solid #f4c3cd}
.grade.error{background:#f2f4f8;border:1px solid #dde3ec}
.g-head{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;margin-bottom:8px}
.score{margin-left:auto;background:#fff;border-radius:20px;padding:3px 14px;font-size:14px;font-weight:800;
  box-shadow:0 1px 4px rgba(0,0,0,.08)}
.g-recognized{font-size:13.5px;color:#5b6779;background:rgba(255,255,255,.75);border-radius:10px;
  padding:9px 12px;margin:8px 0;white-space:pre-wrap}
.g-comment{margin:8px 0}
.g-correct{background:rgba(255,255,255,.8);border-radius:10px;padding:10px 13px;margin-top:9px;
  white-space:pre-wrap;font-size:14.5px}
.engine{font-size:12px;color:#9aa6bb;margin-top:10px}

/* 解析 */
.solution{display:none;margin-top:15px;border-top:1.5px dashed var(--line);padding-top:15px}
.solution.show{display:block;animation:pop .25s ease}
.solution .ans{font-size:16px;font-weight:800;color:var(--bad)}
.solution .steps{margin-top:8px;color:#39435a;white-space:pre-wrap;font-size:15px;background:#fafbfe;
  border-radius:10px;padding:11px 14px;border:1px solid #f0f3f9}
.solution video{width:100%;max-height:300px;border-radius:11px;margin-top:12px}
.sol-vtip{font-size:13px;color:var(--sub);margin:7px 3px 0}

/* 上一/下一点 */
.pager{display:flex;gap:12px;margin-top:8px}
.pager button{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:13px 18px;
  font-size:14px;color:#46536e;font-weight:600;text-align:center;transition:.15s}
.pager button:hover:not(:disabled){border-color:var(--blue);color:var(--blue-d);background:#fafbff}
.pager button:disabled{opacity:.35;cursor:not-allowed}
.pager .pdir{display:block;font-size:11.5px;color:#a4aec2;margin-bottom:2px}
.loading-page{color:var(--sub);padding:60px;text-align:center;font-size:15px}

/* iPad 竖屏 / 窄窗口：侧栏变为抽屉 */
@media (max-width:960px){
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;
    background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;padding:12px 16px}
  .menu-btn{font-size:20px;color:#fff;line-height:1}
  .topbar-title{font-weight:800;font-size:16px}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-100%);transition:.25s;box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.25)}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(20,28,50,.4);z-index:45}
  .content{padding:20px 18px 50px}
  body.side-collapsed .content{padding-top:20px}
  .side-open-fab{display:none !important}
  .side-collapse{display:none}
  /* 窄屏用抽屉，忽略宽屏的“收起”宽度状态 */
  body.side-collapsed .sidebar{width:var(--side-w);flex:0 0 var(--side-w);border-right:1px solid var(--line)}
  .summary{grid-template-columns:1fr}
}
@media (min-width:1300px){
  .wrap{max-width:980px}
}