/* ---- 顶栏 ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:var(--bw) solid var(--line);
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{display:flex; align-items:baseline; gap:8px}
.brand b{font-size:20px; font-weight:900; letter-spacing:.02em; text-shadow:2px 2px 0 var(--orange)}
.brand .en{font-size:10px; letter-spacing:.22em; color:var(--orange)}
.theme-btn{
  background:var(--card); color:var(--ink);
  border:2.5px solid var(--line); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm); padding:4px 14px; font-size:var(--fs-sm); font-weight:700;
}
.theme-btn:active{translate:1px 2px; box-shadow:1px 1px 0 var(--hard)}

/* ---- 底部标签栏 ---- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  /* iPhone 底部有 home 指示条，不留安全区的话导航按钮会被压住点不到 */
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--card); border-top:var(--bw) solid var(--line);
  display:flex;
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--soft); font-size:12.5px; font-weight:700;
}
.tabbar a .dot{width:22px; height:5px; border-radius:99px; background:transparent}
.tabbar a.active{color:var(--ink)}
.tabbar a.active .dot{background:var(--orange)}

/* ---- 贴纸组件 ---- */
.sticker{
  background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--pad);
}
.tilt-l{rotate:-1deg} .tilt-r{rotate:.8deg}
.tape{
  display:inline-block; background:var(--acid); color:var(--on-acid);
  border:var(--bw) solid var(--line); border-radius:6px; box-shadow:var(--shadow-sm);
  padding:2px 12px; font-weight:900; letter-spacing:.06em;
  rotate:-1.5deg; margin:4px 0 6px;
}
.chip{
  display:inline-block; border:2.5px solid var(--line); border-radius:var(--radius-pill);
  padding:1px 12px; font-weight:700; font-size:var(--fs-xs); background:var(--card); color:var(--ink);
}
.chip.acid{background:var(--acid); color:var(--on-acid)}
.chip.orange{background:var(--orange); color:var(--on-orange)}
.chip.ghost{border-style:dashed; color:var(--soft)}
.btn{
  display:inline-block; text-align:center;
  background:var(--acid); color:var(--on-acid);
  border:var(--bw) solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:10px 20px; font-weight:900; font-size:var(--fs-base);
}
.btn.orange{background:var(--orange); color:var(--on-orange)}
.btn:active{translate:2px 3px; box-shadow:1px 1px 0 var(--hard)}
.banner{
  display:block; background:var(--orange); color:var(--on-orange);
  border:var(--bw) solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  padding:8px 14px; font-weight:900; rotate:-.6deg;
}

/* ---- 课程地图 ---- */
.boards{display:flex; gap:8px; flex-wrap:wrap}
.locked-stamp{
  border:var(--bw) dashed var(--line); border-radius:var(--radius-sm);
  padding:4px 12px; color:var(--soft); font-weight:700; font-size:var(--fs-sm); rotate:-1deg;
}
.lvl{display:grid; grid-template-columns:72px 1fr; gap:12px; position:relative; padding:10px 0}
.lvl::before{
  content:""; position:absolute; left:35px; top:0; bottom:0;
  border-left:3px dashed var(--line); opacity:.3;
}
.lvl-tag{
  position:relative; z-index:1; align-self:start; width:70px; text-align:center;
  background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); font-size:16px; font-weight:900; padding:5px 0; rotate:-2deg;
}
.lvl:nth-child(even) .lvl-tag{rotate:2deg}
.lvl-body h3{font-size:17px}
.lvl-sub{font-size:var(--fs-xs); color:var(--soft); margin-bottom:6px}
.mv{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  border:2.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--card); padding:8px 12px; margin-top:8px; color:var(--ink);
}
.mv .g{font-size:var(--fs-xs); color:var(--soft)}
.mv.locked{opacity:.55; border-style:dashed}
.mv .state{flex-shrink:0}

/* ---- 动作详情（Phase 1 预览版） ---- */
.risk{display:inline-flex; gap:3px; align-items:center; font-size:var(--fs-xs); color:var(--soft)}
.risk i{width:12px; height:12px; border:2px solid var(--line); border-radius:3px; display:inline-block}
.risk i.on{background:var(--orange)}
.steps{list-style:none; padding:0; display:flex; flex-direction:column; gap:10px}
.steps li{display:grid; grid-template-columns:28px 1fr; gap:10px; font-size:15.5px}
.steps .n{
  width:26px; height:26px; border:2.5px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:var(--card); font-weight:700;
}
.figph{font-size:var(--fs-xs); color:var(--soft); background:var(--code-bg); border-radius:6px; padding:2px 8px; display:inline-block; margin-top:2px}
.mistake{
  border:2.5px solid var(--bad); border-radius:var(--radius-sm);
  padding:10px 12px; margin-top:10px; font-size:var(--fs-sm); background:var(--card);
}
.mistake b{color:var(--bad)}
.fear{
  margin-top:10px; font-size:var(--fs-sm); padding:8px 12px;
  background:var(--code-bg); border-radius:var(--radius-sm); border-left:5px solid var(--acid);
}
.gatebox{margin-top:12px; border-top:3px dashed var(--line); padding-top:12px}
.gatebox .nums{display:flex; gap:18px; font-size:var(--fs-sm)}
.gatebox .nums b{font-size:20px; font-variant-numeric:tabular-nums}
.bar{height:14px; border:2.5px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; background:var(--card); margin-top:8px}
.bar i{display:block; height:100%; width:0; background:var(--orange); transition:width .25s}

/* ---- 插图 ---- */
.fig{border:var(--bw) solid var(--line); border-radius:var(--radius-sm); background:var(--bg); padding:8px; position:relative}
.fig svg{display:block; width:100%; height:auto}
.fig-cap{font-size:var(--fs-xs); color:var(--soft); padding:6px 2px 0}

/* 翻页动画：每帧轮流显示 1/N 个周期 */
.flip .fr{opacity:0}
@keyframes flip2{0%,49.5%{opacity:1}50%,100%{opacity:0}}
@keyframes flip3{0%,33%{opacity:1}33.4%,100%{opacity:0}}
@keyframes flip4{0%,24.6%{opacity:1}25%,100%{opacity:0}}
@keyframes flip5{0%,19.6%{opacity:1}20%,100%{opacity:0}}
@keyframes flip6{0%,16.3%{opacity:1}16.7%,100%{opacity:0}}
/* 暂停由 JS 直接写 inline animation-play-state：
   帧上的 animation 简写是 inline 的，会把 play-state 一起设成 running，
   放在这里的类选择器压不过它。 */
.anim-ctl{
  position:absolute; right:10px; top:10px; z-index:2;
  font:inherit; font-size:var(--fs-xs); font-weight:900; line-height:1;
  background:var(--card); color:var(--ink);
  border:2.5px solid var(--line); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm); padding:5px 12px;
}
.anim-ctl:active{translate:1px 2px; box-shadow:1px 1px 0 var(--hard)}
.speed-ctl{position:absolute; right:10px; top:44px; z-index:2}
@media (prefers-reduced-motion:reduce){
  .flip .fr{animation:none !important; opacity:0}
  .flip .fr:first-of-type{opacity:1}
}

/* ---- 占位页 ---- */
.stub{text-align:center; padding:36px 16px; color:var(--soft)}
.stub b{font-size:var(--fs-lg); color:var(--ink)}

/* ---- 设置流 ---- */
.steps-dots{display:flex; gap:6px; margin:2px 0 4px}
.dot-step{width:26px; height:6px; border-radius:99px; border:2px solid var(--line); background:var(--card)}
.dot-step.done{background:var(--soft)}
.dot-step.on{background:var(--orange)}
.field{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; font-weight:700}
.field.row{justify-content:flex-start; font-weight:400}
.field input[type=number],.field-in,.field-sel{
  font:inherit; font-size:var(--fs-base); color:var(--ink); background:var(--card);
  border:2.5px solid var(--line); border-radius:var(--radius-sm); padding:8px 12px; width:52%;
}
.field input[type=checkbox]{width:22px; height:22px; flex-shrink:0}
.field-in,.field-sel{width:100%; margin-top:8px}
.pick{background:var(--card); border:2.5px solid var(--line); font:inherit; color:var(--ink)}
.pick.on{background:var(--acid); color:var(--on-acid)}
.pick:active{translate:1px 2px}
table.score{width:100%; border-collapse:collapse; margin-top:10px; font-size:var(--fs-sm)}
table.score td{border-top:2px dashed var(--line); padding:5px 0}
table.score td:nth-child(2){text-align:right; color:var(--soft)}
table.score td:last-child{text-align:right; width:44px; color:var(--orange); font-weight:700}

/* ---- 复盘 ---- */
.q{margin:14px 0}
.qh{font-weight:700; margin-bottom:6px}
.pickrow{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  font:inherit; font-size:var(--fs-sm); font-weight:700; color:var(--ink); background:var(--card);
  border:2.5px solid var(--line); border-radius:var(--radius-pill); box-shadow:var(--shadow-sm); padding:6px 16px;
}
.pill.on{background:var(--orange); color:var(--on-orange)}
.pill:active{translate:1px 2px; box-shadow:1px 1px 0 var(--hard)}
.statrow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; text-align:center}
.statrow b{display:block; font-size:22px}
.statrow span{font-size:12px; color:var(--soft)}

/* ---- 计划 ---- */
.legend{display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--soft); margin:6px 0 10px; flex-wrap:wrap}
.lg{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:2px solid var(--line); border-radius:6px; font-weight:900; font-size:11px; color:var(--ink)}
.lg.skate{background:var(--orange); color:var(--on-orange)} .lg.gym{background:var(--blue); color:#fff} .lg.rest{background:var(--card)}
.wk{margin-bottom:12px}
.wk-h{font-size:var(--fs-xs); color:var(--soft); font-weight:700; margin-bottom:4px}
.wk-g{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.day{border:2.5px solid var(--line); border-radius:8px; padding:5px 0; text-align:center; background:var(--card)}
.day .dh{display:block; font-size:10px; color:var(--soft)}
.day .dl{display:block; font-size:14px; font-weight:900}
.day.skate{background:var(--orange); color:var(--on-orange)}
.day.skate .dh{color:var(--on-orange); opacity:.8}
.day.gym{background:var(--blue); color:#fff}
.day.gym .dh{color:#fff; opacity:.8}
.day.today{box-shadow:0 0 0 3px var(--acid)}

/* ---- 贴纸墙 ---- */
.wall{display:flex; flex-wrap:wrap; gap:8px}
.badge{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--acid); color:var(--on-acid);
  border:2.5px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); padding:6px 10px; max-width:120px;
}
.badge b{font-family:var(--font-en); font-size:13px; line-height:1}
.badge span{font-size:11px; font-weight:700; text-align:center; line-height:1.3}
.badge:nth-child(3n){rotate:-2deg}
.badge:nth-child(3n+1){rotate:1.5deg}
.badge:nth-child(4n){background:var(--orange); color:var(--on-orange)}

/* ---- 进度细节 ---- */
.bar.mini{height:6px; margin-top:6px; border-width:2px}
.lvlbar{display:flex; gap:4px; margin-top:8px}
.lvlseg{
  flex:1; text-align:center; font-size:11px; font-weight:900; padding:3px 0;
  border:2px solid var(--line); border-radius:6px; background:var(--card); color:var(--soft);
}
.lvlseg.part{background:var(--code-bg); color:var(--ink)}
.lvlseg.full{background:var(--acid); color:var(--on-acid)}
details.mv summary::-webkit-details-marker{display:none}
details.mv{padding:10px 12px}
.mfig{margin-top:8px}