/* ============================================================
   登录/注册 弹窗样式 — 遵守 ReadRex 视觉规范 v1
   三层世界模型：官网层（对家长），白底，Nunito + PingFang SC
   色板、字体、圆角、阴影、按钮体系统一收口
   ============================================================ */

/* ============== Overlay ============== */
.lm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20,20,30,.35);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease;
}
.lm-overlay.open {
  opacity: 1; visibility: visible;
}

/* ============== Card ============== */
.lm-dialog {
  width: 520px; max-width: 94vw; max-height: 92vh;
  background: var(--card, #fff);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 24px 64px rgba(20,20,30,.09);
  padding: 44px 36px 36px;
  position: relative; overflow-y: auto; overflow-x: hidden;
  transform: translateY(12px);
  transition: transform .28s ease, width .28s ease;
  font-family: "Nunito", -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink, #1F1F26);
}
.lm-overlay.open .lm-dialog {
  transform: translateY(0);
}
.lm-dialog--wide {
  width: 680px;
}

/* ============== Close ============== */
.lm-close {
  position: absolute; top: 16px; right: 20px;
  width: 36px; height: 36px; border-radius: 999px;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--muted, #8A8F98); cursor: pointer;
  transition: background .16s, color .16s;
}
.lm-close:hover { background: #F2F2F0; color: var(--ink, #1F1F26); }

/* ============== Steps ============== */
.lm-steps { display: flex; gap: 0; margin-bottom: 28px; }
.lm-step {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--line, #ECECEA);
  transition: background .2s;
}
.lm-step + .lm-step { margin-left: 4px; }
.lm-step.done { background: var(--teal, #1E9E70); }
.lm-step.active { background: var(--teal, #1E9E70); }

/* ============== Step Content ============== */
.lm-panel { display: none; flex-direction: column; }
.lm-panel.active { display: flex; }

/* 标题 */
.lm-title {
  font-size: 22px; font-weight: 900; line-height: 1.4;
  letter-spacing: -.3px; color: var(--ink, #1F1F26);
  margin-bottom: 6px;
}
.lm-sub {
  font-size: 13.5px; font-weight: 700; color: var(--ink-2, #4A4C55);
  line-height: 1.6; margin-bottom: 22px;
}

/* 输入框 */
.lm-field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
.lm-field label {
  font-size: 13.5px; font-weight: 800; color: var(--ink-2, #4A4C55);
  letter-spacing: .2px;
}
.lm-input {
  height: 50px; padding: 0 18px;
  border: 1.5px solid var(--line, #ECECEA);
  border-radius: 12px; font-size: 16px; font-weight: 700;
  font-family: "Nunito", -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink, #1F1F26); background: var(--card, #fff);
  outline: none; transition: border-color .2s;
  width: 100%;
}
.lm-input:focus {
  border-color: var(--teal, #1E9E70);
  box-shadow: 0 0 0 3px rgba(30,158,112,.1);
}
.lm-input::placeholder { color: var(--muted, #8A8F98); font-weight: 700; }

/* 验证码行 */
.lm-sms-row {
  display: flex; gap: 12px;
}
.lm-sms-row .lm-input { flex: 1; }
.lm-sms-btn {
  flex-shrink: 0; height: 50px; padding: 0 20px;
  border: 1.5px solid var(--teal, #1E9E70);
  border-radius: 999px; cursor: pointer;
  background: var(--teal-soft, #E2F6EC);
  color: var(--teal-deep, #15805A);
  font-family: "Nunito", -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 900; white-space: nowrap;
  transition: background .2s, transform .12s;
}
.lm-sms-btn:active { transform: scale(.97); }
.lm-sms-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 主按钮 */
.lm-btn-main {
  display: block; width: 100%; height: 54px;
  border: 0; cursor: pointer;
  font-family: "Nunito", -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: 17px; letter-spacing: .4px;
  color: #fff; background: var(--teal, #1E9E70);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--teal-deep, #15805A), 0 18px 36px rgba(30,158,112,.24);
  transition: transform .12s;
}
.lm-btn-main:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--teal-deep, #15805A); }
.lm-btn-main:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 4px 0 var(--teal-deep, #15805A); }

/* 次级文字链 */
.lm-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14.5px; font-weight: 900; color: var(--teal-deep, #15805A);
  cursor: pointer; border: none; background: none;
  font-family: inherit; letter-spacing: .3px;
  margin: 0 auto;
  text-decoration: none;
}
.lm-link:hover { opacity: .8; }

/* 底部提示 */
.lm-footer {
  margin-top: 18px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--muted, #8A8F98);
  letter-spacing: .3px;
}
.lm-footer .lm-link { font-size: 12.5px; }

/* 错误提示：v3.1 加重样式为"警示框"（浅红底 + icon） */
.lm-err {
  display: none;
  font-size: 13.5px; font-weight: 800; line-height: 1.5;
  color: #C73A1F;
  background: #FFF1ED;
  border: 1px solid #FFC9B8;
  border-left: 3px solid #C73A1F;
  padding: 10px 14px 10px 12px; border-radius: 10px;
  margin: 4px 0 12px;
  text-align: left;
}
.lm-err::before { content: "⚠"; margin-right: 6px; font-size: 14px; }
.lm-err.show { display: block; }

/* 成功提示 */
.lm-success {
  text-align: center; padding: 20px 0;
}
.lm-success .lm-icon {
  display: inline-flex; width: 80px; height: 80px; border-radius: 50%;
  background: var(--teal-soft, #E2F6EC);
  font-size: 40px; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.lm-success .lm-title { margin-bottom: 12px; }
.lm-success .lm-sub { margin-bottom: 28px; }

/* ============================================================
   v1.1 增量：孩子情况 / 授权与计划 步骤
   ============================================================ */

/* ============== 返回按钮 ============== */
.lm-back {
  position: absolute; top: 16px; left: 20px;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1.5px solid var(--line, #ECECEA);
  background: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--ink, #1F1F26);
  cursor: pointer; font-family: inherit;
  transition: background .16s, border-color .16s;
}
.lm-back:hover { background: #F2F2F0; border-color: #D5D6D2; }

/* ============== 卡片容器 ============== */
.lm-card {
  border: 1.5px solid var(--line, #ECECEA);
  border-radius: 16px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  background: var(--card, #fff);
}
.lm-card-label {
  font-size: 15px; font-weight: 900; color: var(--ink, #1F1F26);
  margin-bottom: 12px; letter-spacing: .2px;
}
.lm-card-desc {
  font-size: 13px; font-weight: 700; color: var(--ink-2, #4A4C55);
  line-height: 1.7; margin: 4px 0 4px;
}
.lm-req { color: var(--coral, #FF6B4A); margin-left: 3px; font-weight: 900; }

/* ============== 行（label + 内容） ============== */
.lm-card-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.lm-card-row + .lm-card-row { margin-top: 10px; }
.lm-card-row--inline {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line, #ECECEA);
}
.lm-label {
  font-size: 14px; font-weight: 800; color: var(--ink-2, #4A4C55);
  min-width: 56px; flex-shrink: 0;
}
.lm-hint {
  font-size: 12.5px; font-weight: 700; color: var(--muted, #8A8F98);
}
.lm-hint--indent { padding-left: 68px; margin-top: 6px; }

/* ============== Chips ============== */
.lm-chip-group {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.lm-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 14px;
  border: 1.5px solid var(--line, #ECECEA);
  border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 800; color: var(--ink-2, #4A4C55);
  cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s, color .2s, transform .12s;
  font-family: inherit;
}
.lm-chip:hover { border-color: var(--teal, #1E9E70); }
.lm-chip:active { transform: scale(.97); }
.lm-chip--picked {
  border-color: var(--teal, #1E9E70);
  background: var(--teal-soft, #E2F6EC);
  color: var(--teal-deep, #15805A);
}

/* ============== Inline Input（行内） ============== */
.lm-input--inline {
  flex: 0 0 auto;
  height: 40px; padding: 0 14px; font-size: 14px;
  width: auto; min-width: 160px;
}

/* select.lm-input：去掉默认下拉箭头，统一用系统原生外观（PoC 够用）。
   如果要自定义箭头再加背景图，现在先保持简洁。 */
select.lm-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%238A8F98' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  cursor: pointer;
}

/* ============== Link Small（换一批） ============== */
.lm-link-small {
  font-size: 13px; font-weight: 800;
  color: var(--teal-deep, #15805A);
  text-decoration: underline;
  cursor: pointer;
  background: none; border: none; padding: 4px 2px;
  font-family: inherit;
}
.lm-link-small:hover { opacity: .8; }

/* ============== Checkbox ============== */
.lm-check {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; cursor: pointer; user-select: none;
  font-size: 14px; font-weight: 800; color: var(--ink, #1F1F26);
  position: relative;
}
.lm-check input { position: absolute; opacity: 0; pointer-events: none; }
.lm-check-box {
  width: 20px; height: 20px;
  border: 1.5px solid var(--line, #ECECEA);
  border-radius: 6px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.lm-check input:checked + .lm-check-box {
  background: var(--teal, #1E9E70);
  border-color: var(--teal, #1E9E70);
}
.lm-check input:checked + .lm-check-box::after {
  content: "✓";
  color: #fff; font-size: 13px; font-weight: 900; line-height: 1;
}
.lm-check:hover .lm-check-box { border-color: var(--teal, #1E9E70); }

/* ============== Time Select ============== */
.lm-time-select {
  height: 40px; padding: 0 36px 0 16px;
  border: 1.5px solid var(--ink, #1F1F26);
  border-radius: 999px;
  font-size: 14px; font-weight: 800;
  font-family: inherit; color: var(--ink, #1F1F26);
  background: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%231F1F26' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  transition: border-color .2s;
}
.lm-time-select:focus {
  outline: none; border-color: var(--teal, #1E9E70);
}
.lm-time-select--narrow {
  min-width: 72px;
  text-align: center;
  padding-right: 32px;
}
.lm-time-sep {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink, #1F1F26);
  padding: 0 6px;
  user-select: none;
}

/* ============== Footer 修饰：左对齐 ============== */
.lm-footer--left {
  text-align: left; line-height: 1.7;
}
.lm-footer--left .lm-link { font-weight: 800; }