/* ============================================================
   设计规范对齐（依据《提示词归纳整理.docx》）
   - 动效：统一时长变量（进场 250ms 缓出 / 离场 150ms 缓入 / 页内移动 300ms）
   - 数字：全站等宽，避免滚动与刷新时抖动
   - 列表：错峰入场统一 50ms 一档
   - 表单：错误提示固定在输入框下方，失焦后才出现
   - 内容区：最大宽度 1200px
   ============================================================ */

:root {
  --page-max: 1200px;
  --dur-in: 0.25s;
  --dur-out: 0.15s;
  --dur-move: 0.3s;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 数字统一等宽（规范：数字列/计时器不做字宽跳动） */
body {
  font-variant-numeric: tabular-nums;
}

/* 错峰入场统一 50ms */
.lib-row,
.plan-school,
.train-card,
.pb-tile,
.ip-phase {
  animation-delay: calc(var(--i, 0) * 50ms);
}

/* 弹窗：出现 250ms 缓出，关闭 150ms 缓入（离场比进场快） */
.idea-modal .im-panel {
  transition: transform var(--dur-in) var(--ease-out),
              opacity var(--dur-in) var(--ease-out);
}
.idea-modal:not(.is-open) .im-panel {
  transition-duration: var(--dur-out);
  transition-timing-function: var(--ease-in);
}

/* 表单校验：提示在输入框正下方 */
.fld-err {
  font-size: 11.5px;
  line-height: 1.45;
  color: #b4453c;
  margin-top: 2px;
}
.ielts-f input.is-bad {
  border-color: #b4453c;
  background: color-mix(in srgb, #b4453c 6%, var(--surface));
}

/* 勾选描边动画：先收缩再画出对勾 */
.ip-todo button::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg) scale(0);
  transition: transform 0.18s var(--ease-out);
}
.ip-todo li.is-done button::after {
  transform: rotate(42deg) scale(1);
}
.ip-todo button:active {
  transform: scale(0.92);
}

/* 按压反馈：统一 0.12s，避免各组件各写一套 */
.btn:active:not(:disabled),
.eq-mini:active,
.ip-hotel-h:active {
  transition-duration: 0.12s;
}

/* 首屏克制：大标题与主按钮之间留白统一 */
.view .viewhead + .panel,
.view .viewhead + .plan-panel {
  margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .ip-todo button::after { transition: none; }
}

/* 页面切换：规范要求约 0.4s，旧页淡出上移、新页接续 */
.view.is-enter {
  animation-duration: 0.4s;
}

/* 滚动渐显：进入视口才淡入，只播一次（减弱动态效果时直接显示） */
@media (prefers-reduced-motion: no-preference) {
  .lib-row,
  .plan-school,
  .ip-phase,
  .pb-tile {
    animation-fill-mode: both;
  }
}