/* 命之书 · 网页版
   配色沿用课程中心：米白底 #f8f6f2 + 近黑字 #1a1a1a + 墨绿 #23483a
   手机：顶部栏 + 内容 + 底部导航；≥900px：左侧栏 + 内容
   ──────────────────────────────────────────────
   2026-09-18 质感升级：新增封面屏（宣纸水墨）+ 全局纸纹底 + 衬线标题体系
   素材：assets/cover.jpg（封面水墨）、assets/paper.jpg（内容底纹） */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  /* ══ 颜色：逐项对齐小程序 ══
     小程序的设计规则只有一条：**所有「实心强调块」都用近黑 #1a1a1a**
     （主按钮 .btn-login、角色选中 .segment-item.active、发送键 .send-btn、
       底部导航选中色 app.json → selectedColor，全都是 #1a1a1a）。
     墨绿在本项目里只承担「文字级点缀」，不做大面积实心块。 */
  --bg: #f8f6f2;
  --surface: rgba(255, 255, 255, 0.76);   /* 半透明：让宣纸底纹透上来，出层次 */
  --surface-solid: #ffffff;
  --ink: #1a1a1a;
  --ink-2: rgba(0, 0, 0, 0.62);
  --ink-3: rgba(0, 0, 0, 0.42);
  --line: rgba(0, 0, 0, 0.08);
  --btn: #1a1a1a;            /* 实心强调：主按钮 / 选中态 / 发送键 / 用户气泡 */
  --btn-ink: #f8f6f2;        /* 近黑底上的字色 */
  --accent: #23483a;         /* 墨绿 → 仅点缀：标题线 / 分数 / 吉方 / 统计数字 */
  --accent-2: #2f6350;
  --accent-soft: rgba(35, 72, 58, 0.08);
  --red: #c0392b;            /* 对齐小程序的砖红（原 #b3261e） */
  --gold: #a67c2e;
  /* ══ 圆角与尺寸：取自小程序 12 / 16 / 24 / 28rpx（1rpx = 0.5px） ══ */
  --r-btn: 8px;              /* 按钮 / 输入框 / 小控件   ← 16rpx，小程序最高频 */
  --r-card: 12px;            /* 卡片                    ← 24rpx */
  --r-lg: 14px;              /* 大容器 / 登录卡 / 品牌方块 ← 28rpx */
  --h-btn: 44px;             /* 主按钮高度              ← 88rpx */
  /* ══ 字体：标题/数字走衬线，正文保持无衬线（高级感的来源） ══ */
  --f-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --f-kai:   "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", serif;
  /* ══ 阴影：极轻，靠"纸感"而不是"重投影"撑层次 ══ */
  --sh-1: 0 1px 2px rgba(26,26,26,.03), 0 4px 14px rgba(26,26,26,.035);
  --sh-2: 0 1px 2px rgba(26,26,26,.04), 0 10px 30px rgba(26,26,26,.06);
  --side-w: 220px;
  --top-h: 52px;
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ══════════ 全局宣纸底纹 ══════════
   用独立 fixed 层而不是 body 背景：iOS Safari 对 background-attachment:fixed
   支持不稳（会跟着滚或抖动），独立层在任何浏览器都稳。 */
.bg-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('./assets/paper.jpg') center top / cover no-repeat;
  opacity: .58;
}
/* 纸纹之上再压一层极淡的顶部渐隐，避免页面顶部"平" */
.bg-layer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(248,246,242,.55) 0%, rgba(248,246,242,0) 22%,
    rgba(248,246,242,0) 78%, rgba(248,246,242,.65) 100%);
}

/* 内容层统一抬到纸纹之上 */
.view, .shell { position: relative; z-index: 1; }

.hidden { display: none !important; }

/* ══ 字号/字重微调：标题一律衬线 ══ */
.brand-title, .sec-head, .list-head, .me-name, .modal-title,
.topbar-title, .score-num span, .stat b, .side-name {
  font-family: var(--f-serif);
  letter-spacing: .04em;
}
.score-num span, .stat b { letter-spacing: 0; }

/* ══════════ 封面 ══════════ */

.cover {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #f1ece4;
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.cover.cover-out { opacity: 0; transform: scale(1.035); pointer-events: none; }

/* 水墨底图：极缓慢的推近，静止画面也有呼吸 */
.cover-photo {
  position: absolute; inset: 0;
  background: url('./assets/cover.jpg') no-repeat;
  background-size: cover;
  background-position: 50% 40%;
  transform: scale(1.04);
  animation: coverDrift 30s ease-in-out infinite alternate;
}
@keyframes coverDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(0, -12px, 0); }
}

/* 米白薄纱：中部透出远山、上下游收紧，保证字始终清清楚楚 */
.cover-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(118% 62% at 50% 33%,
      rgba(248,246,242,.90) 0%,
      rgba(248,246,242,.62) 42%,
      rgba(248,246,242,.14) 74%,
      rgba(248,246,242,.50) 100%),
    linear-gradient(180deg, rgba(248,246,242,.70) 0%, rgba(248,246,242,0) 34%,
      rgba(248,246,242,0) 58%, rgba(248,246,242,.72) 100%);
}

/* 水波纹：取自小程序 index.wxss 的 5 个圆，网页版做得更细（1px 细线）更慢（9s） */
.cover-ripples { position: absolute; inset: 0; overflow: hidden; }
.cover-ripples i {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, .075);
  animation: coverRipple 9s ease-in-out infinite;
  will-change: transform, opacity;
}
.cover-ripples i:nth-child(1) { width: 80vmin;  height: 80vmin;  top: 10%;    left: -20%; animation-delay: 0s; }
.cover-ripples i:nth-child(2) { width: 106vmin; height: 106vmin; top: 20%;    right: -30%; animation-delay: 1.2s; }
.cover-ripples i:nth-child(3) { width: 132vmin; height: 132vmin; bottom: 10%; left: -40%; animation-delay: 2.4s; }
.cover-ripples i:nth-child(4) { width: 92vmin;  height: 92vmin;  top: 50%;    right: -20%; animation-delay: 3.6s; }
.cover-ripples i:nth-child(5) { width: 158vmin; height: 158vmin; bottom: -30%; left: 10%; animation-delay: 4.8s; }
@keyframes coverRipple {
  0%, 100% { transform: scale(1);    opacity: .28; }
  50%      { transform: scale(1.09); opacity: .62; }
}

.cover-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 28px;
}

.cover-eyebrow {
  font-family: var(--f-kai);
  font-size: 13px; letter-spacing: .42em; color: rgba(26,26,26,.52);
  /* letter-spacing 会在末字后留一段空隙，居中时整行视觉左偏；
     用等量负 margin 把那段空隙从宽度里扣掉，才真正居中 */
  margin: 0 -.42em 22px 0;
}

.cover-title { display: flex; flex-direction: column; align-items: center; margin: 0; }
.cover-title span {
  font-family: var(--f-kai); font-weight: 400;
  font-size: clamp(52px, 15.5vmin, 76px);
  line-height: 1.12; color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* 竖排标题下的细竖线，像书画的引首 */
.cover-rule {
  width: 1px; height: 44px; margin: 20px 0 16px;
  background: linear-gradient(180deg, rgba(26,26,26,.34), rgba(26,26,26,0));
}

.cover-sub {
  font-family: var(--f-serif);
  font-size: 12.5px; letter-spacing: .30em; color: rgba(26,26,26,.55);
  margin: 0 -.30em 44px 0;   /* 同上：扣掉末字后的字距空隙 */
}

.cover-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 44px; border: none; border-radius: 999px;
  background: #1a1a1a; color: #f8f6f2;
  font-family: inherit; font-size: 15px; font-weight: 500;
  /* 字距用 flex 的 gap，不用 letter-spacing：
     letter-spacing 会在**最后一个字后面**也留一段空隙，居中时整行会视觉左偏，
     而 gap 只加在字与字之间，天然居中（2026-09-18 实测偏移 13px 后改的）。 */
  gap: .34em; letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(26,26,26,.18), 0 2px 6px rgba(26,26,26,.10);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.cover-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(26,26,26,.22), 0 3px 9px rgba(26,26,26,.12); }
.cover-btn:active { transform: scale(.975); box-shadow: 0 5px 14px rgba(26,26,26,.16); }
/* 一道极慢的高光扫过，暗示"可点" */
.cover-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.26), transparent);
  transform: translateX(-240%);
  animation: coverSheen 5.2s ease-in-out infinite;
}
@keyframes coverSheen {
  0%, 58%   { transform: translateX(-240%); }
  86%, 100% { transform: translateX(340%); }
}

.cover-foot {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2;
  text-align: center; font-size: 11px; letter-spacing: .16em;
  color: rgba(26,26,26,.36);
}

/* 封面内容逐项升起 */
.cover-body > * { animation: coverRise .95s cubic-bezier(.2,.7,.3,1) both; }
.cover-eyebrow        { animation-delay: .10s; }
.cover-rule           { animation-delay: .34s; }
.cover-sub            { animation-delay: .40s; }
.cover-btn            { animation-delay: .52s; }
.cover-foot           { animation: coverRise .95s cubic-bezier(.2,.7,.3,1) .70s both; }
@keyframes coverRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 标题三字逐字落墨 */
.cover-title span { animation: coverInk .8s cubic-bezier(.2,.7,.3,1) both; }
.cover-title span:nth-child(1) { animation-delay: .18s; }
.cover-title span:nth-child(2) { animation-delay: .28s; }
.cover-title span:nth-child(3) { animation-delay: .38s; }
@keyframes coverInk {
  from { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-photo, .cover-ripples i, .cover-btn::after { animation: none; }
  .cover-body > *, .cover-title span, .cover-foot { animation: none; }
}

/* ══════════ 登录 ══════════ */

.view {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}

.login-wrap {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 420px; width: 100%; margin: 0 auto; padding: 48px 24px;
}
.brand { text-align: center; margin-bottom: 34px; }
.brand-mark {
  position: relative;
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, #2a2a2a 0%, var(--btn) 58%, #0d0d0d 100%);
  color: var(--btn-ink); font-size: 27px; line-height: 56px; text-align: center;
  font-family: var(--f-kai);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--sh-2);
}
/* 印章式内框 */
.brand-mark::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(248,246,242,.22); border-radius: calc(var(--r-lg) - 4px);
}
.brand-title { font-size: 22px; font-weight: 600; letter-spacing: .12em; }
.brand-sub {
  font-family: var(--f-serif);
  font-size: 12.5px; color: var(--ink-3); margin-top: 9px; letter-spacing: .16em;
}

.login-card {
  background: var(--surface); border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-lg);
  padding: 26px 22px 22px;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(26,26,26,.035);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 7px; letter-spacing: .5px; }
.field input {
  width: 100%; height: var(--h-btn); padding: 0 14px; font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-btn);
  font-family: inherit; outline: none; transition: border-color .15s, background .15s;
}
.field input:focus { border-color: var(--accent); background: #fff; }
.login-err { color: var(--red); font-size: 13px; min-height: 20px; margin-bottom: 10px; text-align: center; }

.btn-primary {
  width: 100%; height: var(--h-btn); border: none; border-radius: var(--r-btn); background: var(--btn);
  color: var(--btn-ink); font-size: 15px; font-family: inherit; letter-spacing: 0.08em; cursor: pointer;
  transition: opacity .15s;
}
.btn-primary:active { opacity: .82; }
.btn-primary[disabled] { opacity: .5; cursor: default; }
.login-hint { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 16px; }
.foot-note { font-size: 11px; color: var(--ink-3); text-align: center; line-height: 1.8; margin-top: 26px; }
.foot-note.pad { padding: 24px 24px 40px; margin-top: 0; }

/* ══════════ ICP 备案号（法律规定必须展示并链回工信部）══════════ */
.beian-line {
  display: inline-block; margin-top: 6px; color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(26,26,26,.18); letter-spacing: .06em;
}
.foot-note .beian-line { margin-top: 0; }

/* ══════════ 框架 ══════════ */

.shell { min-height: 100vh; min-height: 100dvh; }

.side { display: none; }

.main {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  /* 刘海屏适配：高度加上顶部安全区，否则 iPhone 上标题会被状态栏压住 */
  height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  background: rgba(248,246,242,.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);   /* iOS Safari 必须带前缀，否则毛玻璃失效 */
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-title { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.who { font-size: 12px; color: var(--ink-3); }
.link-btn {
  border: none; background: none; font-size: 13px; color: var(--ink-3); font-family: inherit;
  cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px;
}

.page-scroll { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 16px 16px 96px; }
.page { display: none; }
.page.on { display: block; }

/* ══════════ 通用块 ══════════ */

.card {
  background: var(--surface); border: 1px solid rgba(26,26,26,.06); border-radius: var(--r-card);
  padding: 18px 16px; margin-bottom: 16px;
  box-shadow: var(--sh-1);
}

/* 分区标题：竖笔 + 衬线字 + 右侧淡出细线，比纯竖线更收得住 */
.sec-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: .16em;
  margin: 26px 0 12px;
}
.sec-head::before {
  content: ''; flex: 0 0 auto; width: 3px; height: 15px; border-radius: 2px;
  background: var(--accent);
}
.sec-head::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(26,26,26,.13), rgba(26,26,26,0));
}

.loading { text-align: center; font-size: 13px; color: var(--ink-3); padding: 28px 0; }

.inp {
  width: 100%; height: 44px; padding: 0 13px; font-size: 15px; font-family: inherit;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-btn); outline: none; margin-bottom: 9px; transition: border-color .15s;
}
.inp:focus { border-color: var(--accent); }

.btn-ghost {
  height: var(--h-btn); padding: 0 20px; border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-family: inherit; cursor: pointer;
}
.btn-ghost:active { background: var(--bg); }
.btn-wide { width: 100%; margin-top: 18px; }

/* ══════════ 运书 ══════════ */

.datestrip {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.datestrip::-webkit-scrollbar { display: none; }
.dcell {
  flex: 0 0 auto; width: 52px; padding: 8px 0; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); cursor: pointer;
}
.dcell .d-wk { font-size: 11px; color: var(--ink-3); }
.dcell .d-day { font-size: 17px; font-weight: 600; line-height: 1.3; }
.dcell.on { background: var(--btn); border-color: var(--btn); }
.dcell.on .d-wk, .dcell.on .d-day { color: #fff; }

.score-top { display: flex; align-items: center; gap: 20px; }
.score-num { flex: 0 0 auto; color: var(--accent); }
.score-num span { font-size: 44px; font-weight: 600; line-height: 1; }
.score-num em { font-size: 13px; font-style: normal; margin-left: 4px; color: var(--ink-3); }
.score-side { flex: 1; display: grid; gap: 5px; justify-content: end; align-content: center; }
/* 三行「标签 + 值」用固定两列网格：标签成一列、值成一列，整体靠右。
   ⛔ 别用 space-between —— 它会把标签和值顶到卡片两端，隔了大半个屏幕 */
.kv {
  display: grid; grid-template-columns: 56px 62px; column-gap: 12px;
  align-items: baseline; font-size: 13px;
}
.kv span { color: var(--ink-3); }
.kv b { font-weight: 600; }

.advice {
  margin-top: 15px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 14px; line-height: 1.85; color: var(--ink-2);
}
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent);
}
.tag.avoid { background: rgba(179,38,30,.07); color: var(--red); }

.guide-note { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.guide-list { display: grid; gap: 9px; }
.guide {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px;
}
.guide .g-dir { font-size: 16px; font-weight: 600; color: var(--accent); }
.guide .g-men { font-size: 12px; color: var(--gold); margin-left: 8px; font-weight: 500; }
.guide .g-meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

.btn-checkin {
  width: 100%; height: var(--h-btn); margin-top: 20px; border: 1px solid var(--btn); border-radius: var(--r-btn);
  background: var(--btn); color: var(--btn-ink); font-size: 15px; font-family: inherit; cursor: pointer;
  transition: opacity .15s;
}
.btn-checkin.done { background: transparent; color: var(--accent); }
.btn-checkin:active { opacity: .8; }

/* ══════════ 召唤 ══════════ */

.persona-row { display: flex; gap: 9px; margin-bottom: 12px; }
.persona {
  flex: 1; text-align: left; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--surface); cursor: pointer; font-family: inherit;
}
.persona b { display: block; font-size: 14px; font-weight: 600; }
.persona span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.persona.on { border-color: var(--btn); background: rgba(0, 0, 0, 0.04); }
.persona.on b { color: var(--ink); }

.tpl-tabs { display: flex; gap: 7px; margin-bottom: 10px; }
.tpl-tab {
  padding: 6px 15px; font-size: 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); cursor: pointer; font-family: inherit;
}
.tpl-tab.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }

.tpl-box { margin-bottom: 12px; }
.opt-head { font-size: 12px; color: var(--ink-3); margin: 4px 0 7px; }
.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.opt-row .inp { margin-bottom: 0; }
.opt-del {
  flex: 0 0 auto; width: 34px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink-3); font-size: 17px; cursor: pointer; font-family: inherit;
}
.btn-mini {
  border: 1px dashed var(--line); background: none; border-radius: var(--r-btn); padding: 7px 13px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; font-family: inherit;
}

.msgs { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; padding: 11px 14px; border-radius: var(--r-card); font-size: 14.5px; line-height: 1.8; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--btn); color: var(--btn-ink); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.bot p { margin: 0 0 8px; }
.msg.bot p:last-child { margin-bottom: 0; }
.msg .pan { margin-bottom: 10px; }
.msg .pan table { font-size: 12px; }


/* ── 底部按键区：两个角色都不开放自由输入，问题只能从这些按键发出 ── */
.act-bar { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.act-btn {
  width: 100%; min-height: var(--h-btn); padding: 10px 14px; border: 1px solid var(--line);
  border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 14.5px; cursor: pointer; text-align: center;
}
.act-btn:active { background: var(--bg); }
.act-btn--main {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--btn); border-color: var(--btn); color: var(--btn-ink);
}
.act-btn--main:active { opacity: .86; background: var(--btn); }
.act-btn-icon { font-size: 15px; }

/* ── 按模板提问弹层 ── */
.tpl-modal-box { max-height: 86vh; overflow-y: auto; }
.tpl-hint { font-size: 12.5px; color: var(--ink-3); margin: -6px 0 12px; line-height: 1.6; }

/* ── 老六：日期选择 ── */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-nav {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font-size: 17px; cursor: pointer; font-family: inherit;
}
.cal-title { font-size: 15px; font-weight: 600; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-week span { text-align: center; font-size: 11.5px; color: var(--ink-3); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 16px; }
.cal-d {
  height: 36px; border: 1px solid transparent; border-radius: var(--r-btn); background: none;
  color: var(--ink); font-family: inherit; font-size: 13.5px; cursor: pointer;
}
.cal-d:active { background: var(--bg); }
.cal-d--empty { pointer-events: none; }
.cal-d--today { border-color: var(--btn); font-weight: 600; }

/* ══════════ 星球 ══════════ */

.sub-tabs { display: flex; gap: 7px; margin-bottom: 14px; }
.sub-tab {
  padding: 6px 18px; font-size: 13.5px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); cursor: pointer; font-family: inherit;
}
.sub-tab.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }

.stat-row { display: flex; gap: 9px; margin-bottom: 13px; }
.stat {
  flex: 1; text-align: center; padding: 11px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.stat b { display: block; font-size: 19px; font-weight: 600; color: var(--accent); }
.stat span { font-size: 11px; color: var(--ink-3); }

.tagbar { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.tagbar::-webkit-scrollbar { display: none; }
.tchip {
  flex: 0 0 auto; padding: 5px 13px; font-size: 12.5px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tchip.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }

.q-list { display: grid; gap: 9px; }
.qitem {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 13px 14px; cursor: pointer;
}
.qitem .qi-title { font-size: 15px; font-weight: 600; line-height: 1.5; }
.qitem .qi-body { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.7; }
.qitem .qi-foot { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-3); margin-top: 9px; }
.qi-badge { color: var(--accent); }
.qi-badge.wait { color: var(--gold); }

.btn-ask { margin-top: 18px; }

/* ══════════ 我的 ══════════ */

.me-card { text-align: center; padding: 28px 16px; }
.me-avatar {
  position: relative;
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, #2a2a2a 0%, var(--btn) 58%, #0d0d0d 100%);
  color: var(--btn-ink); font-size: 28px; line-height: 62px;
  font-family: var(--f-kai);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--sh-2);
}
.me-avatar::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(248,246,242,.22); border-radius: calc(var(--r-lg) - 4px);
}
.me-name { font-size: 20px; font-weight: 600; letter-spacing: .08em; }
.me-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.me-links { display: grid; gap: 9px; }
.me-link {
  display: flex; justify-content: space-between; align-items: center; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  text-decoration: none; color: var(--ink);
}
.me-link span { font-size: 13px; color: var(--ink-3); }

/* ══════════ 弹层 ══════════ */

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.modal-box {
  position: relative; width: calc(100% - 40px); max-width: 420px; background: var(--surface-solid);
  border-radius: var(--r-lg); padding: 22px 20px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.10);
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.modal-ta {
  width: 100%; min-height: 110px; padding: 12px 13px; font-size: 15px; font-family: inherit;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-btn); outline: none; resize: vertical; margin-bottom: 9px;
}
.modal-err { color: var(--red); font-size: 12.5px; min-height: 18px; margin-bottom: 8px; }
.modal-btns { display: flex; gap: 9px; }
.btn-flex { flex: 1; }

/* ══════════ 底部导航（手机） ══════════ */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  background: rgba(248,246,242,.96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);   /* iOS Safari 必须带前缀 */
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; height: 54px; border: none; background: none; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; color: var(--ink-3); cursor: pointer;
}
.tab span { font-size: 17px; line-height: 1; }
.tab.on { color: var(--ink); font-weight: 600; }

/* ══════════ 四、课程（原课程中心已并入本页） ══════════ */

.cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; -webkit-overflow-scrolling: touch; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.cat.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }

.list-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 12px; font-size: 15px; font-weight: 600; }
.list-count { font-size: 12px; font-weight: 400; color: var(--ink-3); }

.lesson-list { display: flex; flex-direction: column; gap: 10px; }
.lesson {
  display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.lesson:active { transform: scale(.99); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.lesson-cover {
  position: relative; flex: 0 0 auto; width: 104px; height: 62px; border-radius: var(--r-btn);
  overflow: hidden; background: var(--accent-soft);
}
.lesson-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lesson-cover .no-cover {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 20px;
}
.lesson-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lesson-play::after {
  content: ''; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.42);
}
.lesson-play::before {
  content: ''; position: absolute; margin-left: 3px; z-index: 1;
  width: 0; height: 0; border-left: 8px solid #fff;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.lesson-info { flex: 1; min-width: 0; }
.lesson-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.lesson-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-desc {
  font-size: 12.5px; color: var(--ink-3); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.done-badge {
  flex: 0 0 auto; font-size: 11px; font-weight: 500; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-soft);
  border-radius: 999px; padding: 1px 7px;
}
.empty { padding: 40px 0; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 播放弹层 */
#videoModal { flex-direction: column; padding: 18px; }
.v-mask { position: absolute; inset: 0; background: rgba(0,0,0,.78); }
.v-box { position: relative; width: 100%; max-width: 860px; }
.v-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.v-title { flex: 1; color: #fff; font-size: 15px; font-weight: 600; }
.v-close {
  flex: 0 0 auto; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 14px; cursor: pointer;
}
.v-stage { position: relative; background: #000; border-radius: var(--r-card); overflow: hidden; }
.v-stage video { width: 100%; max-height: 60vh; display: block; background: #000; }
.v-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; padding: 0 16px; text-align: center;
}
.v-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.v-foot .btn-ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #fff; }
.v-foot .btn-ghost:disabled { opacity: .4; }

/* ══════════ 卡片质感统一 ══════════
   半透明白 + 顶部一线内高光 + 极轻投影：
   让每张卡像"浮在宣纸上的一小片纸"，有厚度但不抢内容 */
.card, .qitem, .lesson, .guide, .stat, .me-link {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), var(--sh-1);
  border-color: rgba(26, 26, 26, .06);
}
.qitem, .lesson, .me-link { transition: box-shadow .2s ease, border-color .2s ease, transform .16s ease; }
.qitem:hover, .lesson:hover, .me-link:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2);
  border-color: rgba(26, 26, 26, .10);
}

/* 分数卡：整页的视觉主角 —— 右上角一片极淡的墨圆，呼应封面的圆相 */
.score-card { position: relative; overflow: hidden; padding: 20px 18px; }
.score-card::after {
  content: ''; position: absolute; right: -64px; top: -64px;
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid rgba(35, 72, 58, .12);
  box-shadow: 0 0 0 16px rgba(35, 72, 58, .028);
  pointer-events: none;
}
.score-num span { font-size: 46px; letter-spacing: -.01em; }

/* 日期条选中：给近黑块一点浮起感 */
.dcell.on { box-shadow: 0 4px 14px rgba(26, 26, 26, .18); }

/* ══════════ 桌面端（≥900px） ══════════ */

@media (min-width: 900px) {
  .side {
    display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--side-w); background: rgba(252,251,248,.82); border-right: 1px solid var(--line);
    padding: 22px 14px; z-index: 40;
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
  }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
  .side-mark {
    width: 38px; height: 38px; border-radius: var(--r-btn);
    background: linear-gradient(160deg, #2a2a2a 0%, var(--btn) 58%, #0d0d0d 100%);
    color: var(--btn-ink); font-size: 20px; line-height: 38px; text-align: center;
    font-family: var(--f-kai);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--sh-1);
  }
  .side-name { font-size: 17px; font-weight: 600; letter-spacing: .10em; }
  .side-nav { display: grid; gap: 4px; }
  .side-item {
    display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px;
    border: none; border-radius: var(--r-btn); background: none; font-size: 14.5px; font-family: inherit;
    color: var(--ink-2); cursor: pointer; text-align: left; transition: background .15s, color .15s;
  }
  .side-item:hover { background: var(--bg); }
  .side-item.on { background: rgba(0, 0, 0, 0.05); color: var(--ink); font-weight: 600; }
  .si-ico { width: 20px; text-align: center; font-size: 15px; }
  .side-foot { margin-top: auto; padding: 12px 12px 0; border-top: 1px solid var(--line); }
  .side-user { font-size: 12.5px; color: var(--ink-3); margin-bottom: 5px; word-break: break-all; }

  .main { margin-left: var(--side-w); }
  .topbar { display: none; }
  .page-scroll { padding: 26px 30px 60px; max-width: 860px; }
  .tabbar { display: none; }

  .persona-row { max-width: 560px; }
  .datestrip { gap: 9px; }
  .dcell { width: 60px; }
  .guide-list { grid-template-columns: 1fr 1fr; }
  .stat-row { max-width: 420px; }
  .lesson-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}