/* 页面级样式（今日 / 诵读 / 共读 / 知识卡 / 圈子 / 成长 / 管理端）| 作者 fe-lead | 对应契约 13 章 */

/* ============ 欢迎页 ============ */
.welcome-hero { text-align: center; padding: 28px 8px 18px; }
.welcome-logo { font-size: 30px; letter-spacing: 6px; font-weight: 700; color: var(--sage-deep); }
.welcome-sub { margin-top: 10px; font-size: var(--fs-aux); color: var(--ink-soft); letter-spacing: 1px; }
.welcome-tag { display: inline-block; margin-top: 14px; padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-mini); color: var(--sage-deep); background: var(--card); }
.welcome-switch { display: flex; gap: 10px; margin-top: 18px; }
.welcome-switch button { flex: 1; min-height: 44px; border-radius: var(--radius-pill); font-size: var(--fs-body); color: var(--ink-soft); }
.welcome-switch button.on { background: var(--card); color: var(--sage-deep); font-weight: 600; box-shadow: var(--shadow-card); }
.invite-note { font-size: var(--fs-aux); color: var(--ink-soft); line-height: 1.9; }
.invite-note li { padding-left: 14px; position: relative; }
.invite-note li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }

/* ============ 今日 ============ */
.today-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-hello { font-size: 18px; font-weight: 700; }
.today-score { text-align: right; }
.today-score-num { font-size: 20px; font-weight: 700; color: var(--sage-deep); }
.req-pills { display: flex; gap: 6px; }
.check-card { display: flex; gap: 10px; align-items: flex-start; }
.check-card .check-title { font-size: var(--fs-body); font-weight: 600; }
.check-done-flag { color: var(--sage-deep); font-size: var(--fs-mini); }

/* ============ 心要诵读 ============ */
.xinyao-text { font-size: 16px; line-height: 2.2; letter-spacing: 1px; }
.xinyao-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 全文诵读：逐段编号呈现，不裁切、不折叠 */
.xy-body { margin-top: 2px; }
.xy-line { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); }
.xy-line:first-child { border-top: none; padding-top: 4px; }
.xy-no {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--beige);
  color: var(--ink-soft);
  font-size: var(--fs-mini);
  line-height: 20px;
  text-align: center;
}
.xy-text { font-size: 15px; line-height: 2; color: var(--ink); letter-spacing: 0.4px; }
/* 六道整章：道名与要旨同行，原文另起一段 */
.xy-head { display: block; margin-bottom: 4px; }
.xy-dao { font-size: 16px; letter-spacing: 2px; color: var(--sage-deep); }
.xy-motto { font-style: normal; margin-left: 8px; font-size: var(--fs-mini); color: var(--ink-soft); letter-spacing: 1px; }
.xy-para { display: block; }
.xy-line.start .xy-no { background: var(--sage-light); color: var(--sage-deep); font-weight: 700; }
.xy-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--sage-light);
  color: var(--sage-deep);
  font-size: 10px;
  vertical-align: 2px;
  white-space: nowrap;
}

/* ============ 场景问答 ============ */
.scene-card { border-left: 3px solid var(--gold); }
.scene-bg { font-size: var(--fs-body); line-height: 1.9; margin-top: 10px; }
.scene-kw { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.peer-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.peer-item:first-child { border-top: none; }

/* ============ 共读 ============ */
.book-cover {
  width: 62px;
  height: 86px;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--sage), var(--sage-deep));
  color: var(--card);
  font-size: var(--fs-mini);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  line-height: 1.5;
  flex: none;
}

/* ============ 知识卡 ============ */
.kb-group-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 600; }
.kb-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.kb-item:first-child { border-top: none; }
.kb-item .kb-title { font-size: var(--fs-body); }
.kb-points { font-size: var(--fs-mini); color: var(--ink-soft); margin-top: 4px; line-height: 1.7; }
.video-slot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-inner); background: var(--beige); font-size: var(--fs-mini); color: var(--ink-soft); }
.video-slot-ico { width: 16px; height: 16px; flex: none; color: var(--gold); }
/* 知识卡讲解视频：宽度跟着卡片走，高度封顶，避免长视频把列表撑散 */
.kb-video { display: block; width: 100%; max-height: 320px; margin-top: 8px; border-radius: var(--radius-inner); background: #000; }

/* ============ 同修圈 ============ */
.seed-card { background: linear-gradient(140deg, var(--sage-light), var(--card)); }
.help-flag { border-left: 3px solid var(--gold); }
.help-flag .tag.gold { background: var(--beige); color: var(--rose-deep); }
.composer textarea { min-height: 76px; }
.comment-item { display: flex; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.comment-item:first-child { border-top: none; }

/* ============ 成长 ============ */
.growth-hero { text-align: center; }
.hotel-chip { background: var(--card); border-radius: var(--radius-inner); padding: 8px 10px; font-size: var(--fs-mini); flex: none; min-width: 92px; }
.hotel-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.hotel-row::-webkit-scrollbar { display: none; }

/* ============ 我的 ============ */
.profile-head { display: flex; gap: 12px; align-items: center; }
.entry-list { margin-top: 4px; }
.entry-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  text-align: left;
}

.entry-item:last-child { border-bottom: none; }
.entry-ico { width: 20px; text-align: center; flex: none; }
.entry-arrow { color: var(--ink-soft); flex: none; font-size: var(--fs-body); }
.footprint { display: flex; flex-wrap: wrap; gap: 6px; }
.footprint i { width: 12px; height: 12px; border-radius: 3px; background: var(--track-bg); display: block; }
.footprint i.on { background: var(--sage-deep); }
.footprint i.light { background: var(--sage); }

/* ============ 反馈 ============ */
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chips .chip { flex: 1 1 44%; }
.fb-done { text-align: center; padding: 20px 8px; }

/* ============ 小博客 ============ */
.blog-head { display: flex; gap: 12px; align-items: center; }
.blog-stat { display: flex; gap: 14px; margin-top: 10px; font-size: var(--fs-aux); color: var(--ink-soft); }

/* ============ 管理端 ============ */
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.admin-stat { background: var(--beige); border-radius: var(--radius-inner); padding: 12px 8px; text-align: center; }
.admin-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-entry .chip { justify-content: flex-start; }
.member-row { padding: 12px 0; border-top: 1px solid var(--line); }
.member-row:first-child { border-top: none; }
.member-name { font-size: var(--fs-body); font-weight: 600; }
.member-meta { font-size: var(--fs-mini); color: var(--ink-soft); margin-top: 4px; line-height: 1.7; }
.member-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pending-item { background: var(--beige); border-radius: var(--radius-inner); padding: 12px; margin-top: 10px; }
.pending-text { font-size: var(--fs-body); line-height: 1.8; }
.cfg-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cfg-row:last-child { border-bottom: none; }
.cfg-key { flex: 1; font-size: var(--fs-aux); color: var(--ink); }
.cfg-key small { display: block; color: var(--ink-soft); font-size: var(--fs-mini); }
.cfg-input { width: 88px; }
.cfg-input input { width: 88px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--beige); text-align: right; font-size: var(--fs-aux); outline: none; }
.report-row { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-aux); }
.report-row:first-child { border-top: none; }
.hotel-form .field { margin-bottom: 10px; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--beige);
  border: 1px solid var(--line);
  font-size: var(--fs-mini);
  color: var(--ink-soft);
}

/* ============ 练习库（扩展打卡 F2） ============ */
.pf-group { margin: 14px 2px 6px; font-size: var(--fs-aux); font-weight: 600; color: var(--sage-deep); }
.pf-group:first-child { margin-top: 2px; }
.pf-card { margin-bottom: 10px; }
.pf-card .fold { margin-top: 8px; }
.pf-steps { margin: 0; padding-left: 20px; line-height: 1.9; list-style: decimal; }
.pf-steps li { margin-bottom: 4px; list-style: decimal; }
/* 日常怎么练：手册里的日常口径，折叠区末尾的浅色小条 */
.pf-daily { padding: 8px 10px; border-radius: var(--radius-inner); background: var(--beige); line-height: 1.8; }
.pf-card .pf-panel .vis-picker { margin-top: 4px; }

/* ============ 学分流水 ============ */
.ledger .kv { padding: 9px 0; border-top: 1px solid var(--line); }
.ledger .kv:first-child { border-top: none; }
.ledger .kv > span { min-width: 0; flex: 1; }
.ledger-amt { color: var(--sage-deep); flex: none; }

/* ============ 互助（F6.4） ============ */
.help-panel .peer-item:first-child { border-top: none; }

/* ============ 管理端 · 能力之树分布 ============ */
.lv-dist-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-aux); }
.lv-dist-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lv-dist-name { flex: none; width: 38px; color: var(--ink-soft); }
.lv-dist-bar { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--track-bg); overflow: hidden; }
.lv-dist-bar i { display: block; height: 100%; border-radius: var(--radius-pill); transition: width var(--dur) var(--ease); }
.lv-dist-num { flex: none; min-width: 22px; text-align: right; color: var(--ink); }

/* ============ 今日 · 共读卡（独立墨绿色阶，一眼能认出是可以点的地方） ============ */
.read-card {
  display: flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid rgba(46, 64, 56, 0.55);
  background: linear-gradient(135deg, #4A5D50 0%, #33453C 55%, #2B3B33 100%);
  color: #F4F1E9;
  box-shadow: 0 10px 26px rgba(43, 59, 51, 0.22);
}
.read-card .read-band {
  flex: none;
  width: 5px;
  background: linear-gradient(180deg, #C9A87C 0%, #A8B5A2 100%);
}
.read-card .read-inner { flex: 1; min-width: 0; padding: 14px var(--sp-card); }
.read-card .read-top { display: flex; align-items: center; gap: 8px; }
.read-card .read-badge {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(244, 241, 233, 0.14);
  border: 1px solid rgba(244, 241, 233, 0.22);
  color: #F0EADA;
  font-size: var(--fs-mini);
  letter-spacing: 2px;
}
.read-card .read-go {
  margin-left: auto;
  flex: none;
  font-size: var(--fs-aux);
  color: #E7D9BC;
  font-weight: 600;
}
.read-card .read-book { margin-top: 10px; font-size: 16px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.4px; }
.read-card .read-progress { margin-top: 4px; font-size: var(--fs-mini); color: rgba(244, 241, 233, 0.68); letter-spacing: 0.6px; }
.read-card .read-chapter { margin-top: 8px; font-size: var(--fs-aux); color: rgba(244, 241, 233, 0.94); line-height: 1.6; }
.read-card .read-chapter.off { color: rgba(244, 241, 233, 0.66); }

/* ============ 个人资料二级页 / 密码字段 ============ */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-soft);
  background: transparent;
}
.pw-toggle:active { background: var(--beige); }
.pw-toggle.on { color: var(--sage-deep); }
.pw-ico { display: flex; align-items: center; justify-content: center; }
.pw-ico[hidden] { display: none; }
.pw-hint { margin-top: 6px; font-size: var(--fs-mini); color: var(--ink-soft); line-height: 1.6; }
.pw-meter { display: none; align-items: center; gap: 8px; margin-top: 8px; }
.pw-meter.on { display: flex; }
.pw-meter-bar { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--track-bg); overflow: hidden; }
.pw-meter-bar i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--sage); transition: width var(--dur) var(--ease); }
.pw-meter-text { flex: none; font-size: var(--fs-mini); color: var(--ink-soft); min-width: 78px; text-align: right; }
.pw-meter[data-level="weak"] .pw-meter-bar i { background: var(--rose-deep); }
.pw-meter[data-level="fair"] .pw-meter-bar i { background: var(--gold); }
.pw-meter[data-level="good"] .pw-meter-bar i { background: var(--sage-deep); }
.phone-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-inner);
  background: var(--beige);
  border-left: 3px solid var(--gold);
  font-size: var(--fs-mini);
  color: var(--ink-soft);
  line-height: 1.75;
}
.tag.on { background: var(--sage-deep); color: var(--card); }
.req { color: var(--rose-deep); font-size: var(--fs-mini); font-weight: 400; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-aux); color: var(--ink); }
.check-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--sage-deep); }
textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  background: var(--beige);
  color: var(--ink);
  font-size: var(--fs-body);
  font-family: inherit;
  line-height: 1.7;
  outline: none;
  resize: vertical;
}
input[type="date"], input[type="number"], input[type="tel"] { font-family: inherit; }

/* ============ 管理端 · 共读圈管理 ============ */
.read-head { padding: 12px; border-radius: var(--radius-inner); background: var(--beige); border-left: 3px solid var(--sage-deep); }
.read-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.read-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: var(--fs-mini); color: var(--ink-soft); }
.read-list { margin-top: 10px; }
.read-row { padding: 12px 0; border-top: 1px solid var(--line); }
.read-row:first-child { border-top: none; }
.read-edit { margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-inner); background: var(--beige); }
.read-edit[hidden] { display: none; }
.read-edit .field { margin-bottom: 8px; }

/* ============ 可见性选择（两个选项分开成卡片，别挤在一起） ============ */
.vis-options { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.vis-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  background: var(--beige);
  text-align: left;
  transition: all var(--dur) var(--ease);
}
.vis-opt.on { border-color: var(--sage-deep); background: var(--sage-light); }
.vis-dot {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  position: relative;
}
.vis-opt.on .vis-dot { border-color: var(--sage-deep); }
.vis-opt.on .vis-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sage-deep);
}
.vis-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vis-label { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.vis-opt.on .vis-label { color: var(--sage-deep); }
.vis-hint { font-size: var(--fs-mini); color: var(--ink-soft); line-height: 1.55; }
.vis-check { flex: none; margin-top: 2px; font-size: var(--fs-aux); color: var(--sage-deep); opacity: 0; }
.vis-opt.on .vis-check { opacity: 1; }

/* ============ 宽屏兜底（仍保持手机感） ============ */
@media (min-width: 560px) {
  .app-frame { box-shadow: var(--shadow-float); }
}