/* ui-guide — 10.29 四页引导对齐（A02 / A03 / A04 / A04b）
   全部选择器限定在 .guide-page（及其 data-step）内，不动 .btn / .sticky-action / .text-link 的全局定义。
   数值取自 390×844 设计稿（1170×2532@3x）逐像素量与 h5/reference/legacy-1026.html 的 .og-* 规格。 */

/* ---------- 整屏骨架：铺满动态视口，圆点与动作区贴底 ---------- */
.guide-page {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100%;
  padding: 0 28px;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.guide-page .guide-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 62px;
  min-height: 0;
}
.guide-page .guide-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0 calc(28px + env(safe-area-inset-bottom));
  background: #fff;
}
/* 引导页的「跳过」：绝对定位在右上，弱灰常规字重，保留 26×35 的点击区（上下各 8px 内边距）。 */
.guide-page .skip {
  position: absolute;
  top: 14px;
  right: 30px;
  float: none;
  z-index: 3;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 400;
  color: #8A8186;
}

/* ---------- 顶部控件与标题区 ---------- */
.guide-page .guide-head {
  display: flex;
  flex-direction: column;
  flex: none;
}
.guide-page .guide-head .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--faint);
}
.guide-page .guide-head h1 {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0;
}
/* A03 / A04b 的标题在设计稿里是 24px（A02 是 26px），只改这两屏。 */
.guide-page[data-step="1"] .guide-head h1,
.guide-page[data-step="3"] .guide-head h1 {
  font-size: 24px;
  line-height: 1.35;
}
.guide-page .guide-head .guide-sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- A02 认出：标签云 + 计数/说明 ---------- */
.guide-page .phrase-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  margin: 22px 0 0;
}
.guide-page .phrase,
.guide-page .phrase:nth-child(3n) {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid #E4E0E2;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  transform: none;
}
.guide-page .phrase.thought {
  border-style: dashed;
  border-color: #CFC9CC;
  font-weight: 500;
  color: #4A3F45;
  transform: none;
}
.guide-page .phrase.selected,
.guide-page .phrase.thought.selected {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.guide-page .guide-feedback {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: auto 0 17px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 15px;
  line-height: 1.7;
  color: #4A3F45;
}
.guide-page .guide-feedback .fb-n {
  font-size: 13px;
  color: var(--faint);
}
.guide-page .guide-feedback .fb-n b {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}

/* ---------- A03 代价：整屏满宽对比区 ---------- */
.guide-page[data-step="1"] .guide-head .guide-sub {
  font-size: 13px;
  text-align: left;
}
.guide-page[data-step="1"] .comparison {
  flex: 1;
  min-height: 0;
  margin: 18px -28px 0;
  border: 0;
  border-radius: 0;
  background: #F6F5F6;
}
.guide-page[data-step="1"] .comparison-pane {
  padding: 16px 28px 0;
}
.guide-page[data-step="1"] .comparison-pane.after {
  padding: 0;
}
.guide-page[data-step="1"] .comparison-pane.after .comparison-body {
  padding: 16px 28px 0;
}
.guide-page[data-step="1"] .comparison-tag {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--faint);
}
.guide-page[data-step="1"] .comparison-pane.after .comparison-tag {
  color: var(--accent);
  text-align: right;
}
.guide-page[data-step="1"] .comparison-row {
  height: 76px;
  padding: 14px 0;
  gap: 14px;
  border-bottom: 1px solid rgba(36, 24, 30, .06);
  color: #4A3F45;
}
.guide-page[data-step="1"] .comparison-row:last-child {
  border-bottom: 0;
}
.guide-page[data-step="1"] .comparison-row b {
  width: 38px;
  padding-top: 2px;
  font-size: 12px;
  color: var(--faint);
}
.guide-page[data-step="1"] .comparison-pane.after .comparison-row b {
  color: var(--accent);
}
.guide-page[data-step="1"] .comparison-row span {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  font-size: 14px;
  line-height: 1.6;
}
.guide-page[data-step="1"] .comparison-divider {
  left: var(--split, 94%);
  border-left: 2px solid #fff;
}
.guide-page[data-step="1"] .comparison-knob {
  top: calc(45% - 18px);
}
.guide-page[data-step="1"] .comparison-reveal {
  bottom: 22px;
  font-size: 15px;
  color: var(--accent);
}

/* ---------- A04 词典：白底平铺、无卡片 ---------- */
.guide-page[data-step="2"] .dict {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 15px;
}
.guide-page[data-step="2"] .dict-head {
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.guide-page[data-step="2"] .dict-head b {
  font-family: inherit;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
}
.guide-page[data-step="2"] .dict-head i {
  font-size: 15px;
  letter-spacing: 0;
  color: var(--muted);
}
.guide-page[data-step="2"] .dict-head em {
  padding: 1px 5px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
}
.guide-page[data-step="2"] .dict-sense {
  gap: 3px;
  margin-top: 12px;
  padding: 0;
  border-bottom: 0;
}
.guide-page[data-step="2"] .dict-sense > .sense-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.guide-page[data-step="2"] .dict-sense p {
  font-size: 15px;
  line-height: 1.75;
}
.guide-page[data-step="2"] .dict-ex {
  margin: 6px 0 0;
  padding: 0 0 0 8px;
  border-bottom: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.guide-page[data-step="2"] .dict-ex span {
  padding-left: 30px;
}.guide-page[data-step="2"] .dict-line {
  align-items: flex-start;
  gap: 0;
  margin-top: 12px;
  padding: 0 0 0 8px;
  border-bottom: 0;
  font-size: 13px;
  line-height: 1.75;
  color: #4A3F45;
}
.guide-page[data-step="2"] .dict-line > b {
  flex: none;
  margin-right: 10px;
  font-size: 13px;
  color: var(--ink);
}
.guide-page[data-step="2"] .dict-line s {
  margin-right: 8px;
  color: #B9B2B6;
}
.guide-page[data-step="2"] .dict-line .text-link {
  padding: 0;
  font-size: 14px;
  color: var(--accent);
}

/* ---------- A04b 怎么练 ---------- */
.guide-page .guide-flow {
  margin: 20px 0 0;
}
.guide-page .guide-flow:before {
  left: 10px;
  top: 8px;
  bottom: 18px;
}
.guide-page .guide-step {
  gap: 14px;
  padding-bottom: 11px;
}
.guide-page .guide-step > i {
  width: 21px;
  height: 21px;
  margin-top: 1px;
  font-size: 10px;
}
.guide-page .guide-step b {
  font-size: 15px;
  line-height: 1.3;
}
.guide-page .guide-step p {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.6;
  color: #4A3F45;
}
.guide-page .guide-slogan {
  margin: 18px 0 0;
  font-size: 24px;
  line-height: 1.4;
}
.guide-page .guide-login {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  color: var(--faint);
}
.guide-page .guide-login b {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 底部：圆点 + 动作区贴底，按钮左右 28 ---------- */
.guide-page .guide-dots {
  margin: 0;
  gap: 6px;
}
.guide-page .guide-dots i {
  width: 5px;
  height: 5px;
  background: #E2DEE0;
  border-radius: 99px;
}
.guide-page .guide-dots .active {
  width: 16px;
  background: var(--accent);
}
.guide-page .sticky-action {
  position: static;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
}
.guide-page .sticky-action .btn {
  width: 100%;
}

/* ---------- 矮屏兜底：内容溢出时整页滚动，不挤压动作区 ---------- */
@media (max-height: 720px) {
  .guide-page .guide-body {
    padding-top: 48px;
  }
  .guide-page .guide-foot {
    padding-top: 8px;
    gap: 8px;
  }
}

/* A11/A13 验证码页：粉边焦点格、脱敏副标题、倒计时/收不到并排、自动登录说明 */
.code-form .otp-cell{height:clamp(52px,16vw,62px);border:1.5px solid #F1E7EA;border-radius:20px;background:#FFF7F9;font-size:26px;color:var(--ink)}
.code-form .otp-cell:focus{outline:none;border:2px solid var(--accent);background:#fff}
.code-form .otp-cells.invalid .otp-cell{border-color:#D83448;border-width:2px;background:#FFF0F3;color:var(--ink)}
.otp-meta{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.otp-meta .otp-resend,.otp-meta .otp-help{padding:4px 0;border:0;background:none;font-size:12px;font-weight:400;line-height:1.6;color:var(--muted)}
.otp-meta .otp-help{color:#4A4145}
.otp-hint{margin:2px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.code-form .otp-dev{font-size:12px;line-height:1.6;color:var(--muted)}

/* A14 收不到验证码弹层：左对齐标题 + 编号圆点列表 + 底部客服链接 */
.sheet-otp-help .bottom-sheet{padding-top:14px}
.sheet-otp-help .page-title h1{font-size:26px;line-height:1.3}
.otp-help-list{display:grid;gap:16px;margin:18px 0 0;padding:0;list-style:none}
.otp-help-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.otp-help-list .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#F4F0F1;color:#6F6469;font-size:13px;font-weight:700}
.otp-help-list b{display:block;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink)}
.otp-help-list p{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
.otp-help-more{margin:18px 0 0;font-size:14px;color:var(--muted)}
.otp-help-link{margin-left:2px;color:var(--ink);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sheet-otp-help .bottom-sheet>.btn{margin-top:18px}

/* A17 添加到桌面：图标+标题、灰底分段控件、编号三步、说明、整宽按钮 + 居中「下次再说」 */
.sheet-install .bottom-sheet{padding:6px 24px calc(36px + env(safe-area-inset-bottom))}
.install-lockup{display:flex;align-items:center;gap:12px;margin-top:6px}
.install-icon{flex:none;width:56px;height:56px;border-radius:14px}
.install-lockup h1{margin:0;font-size:22px;font-weight:900;line-height:1.35;color:var(--ink)}
.install-lockup p{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.install-seg{display:flex;margin-top:14px;padding:3px;border-radius:999px;background:#F4F0F1}
.install-seg .filter{flex:1;min-width:0;height:38px;padding:0;border:0;border-radius:999px;background:transparent;font-size:15px;font-weight:400;line-height:38px;color:var(--muted)}
.install-seg .filter.active{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(36,24,30,.08)}
.install-steps{margin-top:14px}
.install-steps ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.install-steps li{display:flex;align-items:flex-start;gap:14px}
.install-steps .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#F4F0F1;color:#6F6469;font-size:13px;font-weight:700;line-height:1}
.install-steps p{margin:1px 0 0;font-size:15px;line-height:1.65;color:var(--ink)}
.install-note{margin:14px 0 0;font-size:12px;line-height:1.8;color:var(--muted)}
.sheet-install .bottom-sheet>.btn{margin-top:16px}
.sheet-install .install-later{display:block;width:100%;margin-top:2px;padding:9px 0;border:0;background:none;font-size:15px;font-weight:400;color:#6F6469;text-align:center}