/* =========================================================
   产品级布局 APP SHELL —— 去掉设计稿的手机框/文档外壳，
   让每一屏成为真实视口里的实际界面（移动优先）
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Noto Sans SC","Baloo 2",sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-size:var(--fs-body);
}

/* App 外壳：手机基线居中限宽，模拟单列流；真机即满屏 */
#app{
  max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;
  background:var(--cream);position:relative;display:flex;flex-direction:column;
  box-shadow:0 0 60px rgba(0,0,0,.06);
  overflow:hidden;
}

/* 每个 screen 是一块全高列；用 .on 切换显隐 */
.screen{display:none;flex-direction:column;flex:1;min-height:0}
.screen.on{display:flex}

/* 顶部状态条占位（真机交给系统；此处留安全区内边距） */
.safe-top{padding-top:env(safe-area-inset-top,8px)}

/* 可滚动主区 */
.view{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.view::-webkit-scrollbar{width:0}

/* 通用容器内边距 */
.pad{padding:0 18px}
.pad-lg{padding:0 22px}

/* 顶部品牌行（首页） */
.brandbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 0}
.brandbar .name{font-family:"ZCOOL KuaiLe",sans-serif;font-size:22px;color:var(--coral)}
.pill-coin{background:var(--paper);border-radius:var(--r-pill);padding:6px 12px;font-weight:700;color:#E0A52A;box-shadow:var(--sh-soft);font-family:"Baloo 2",sans-serif}

/* 地图蛇形定位辅助 */
.map-col{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0 28px}
.map-node-wrap{text-align:center}
.map-node-wrap.l{align-self:flex-start;margin-left:22%}
.map-node-wrap.r{align-self:flex-end;margin-right:22%}
.map-node-wrap.c{align-self:center}
.map-link{height:26px;border-left:3px dashed #DCD6C8}
.map-link.mint{border-left:3px solid var(--mint)}
.map-link.coral{border-left:3px dashed var(--coral)}
.node-label{font-size:12px;font-weight:700;margin-top:4px}

/* 课程内页底部固定操作区 */
.lesson-actions{padding:12px 18px 18px;display:flex;gap:10px}

/* 抽屉式反馈固定底 */
.feedback.dock{position:absolute;left:0;right:0;bottom:0;z-index:20}

/* 居中空/错态 */
.centered{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 26px}

/* 完课庆祝底部按钮区 */
.celebrate-foot{padding:14px 18px;border-top:1px solid var(--line);background:var(--paper)}

/* 焦点可见 */
a:focus-visible,button:focus-visible,.opt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* =========================================================
   响应式：平板双栏 / 桌面限宽
   ========================================================= */

/* 平板 600–1024：课程内页 & 地图升级为双栏体验，外壳放宽 */
@media (min-width:600px){
  #app{max-width:820px}
  /* 课程内页：进入双栏（左步骤导航 / 右大内容） */
  .screen.lesson.wide .view{display:flex;flex-direction:row}
  .screen.lesson.wide .lesson-nav{display:flex}
  .lesson-nav{display:none;flex-direction:column;gap:8px;width:220px;flex:none;
    background:var(--paper);border-right:1px solid var(--line);padding:16px}
  .lesson-nav .step{border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700;background:var(--cream);border:1px solid var(--line);color:var(--ink-faint)}
  .lesson-nav .step.done{background:var(--mint-soft);border-color:var(--mint);color:var(--ink)}
  .lesson-nav .step.on{background:var(--coral);border-color:var(--coral);color:#fff}
  .lesson-stage{flex:1;min-width:0}
}
@media (max-width:599px){
  .lesson-nav{display:none !important}
}

/* 桌面 >1024：内容居中限宽，两侧留白（家长/老师查看为主） */
@media (min-width:1025px){
  #app{max-width:960px;min-height:auto;margin:24px auto;border-radius:28px}
}