/* ==========================================================================
   300人大课 · 课程感悟资源库 —— 学员端样式
   视觉基调：宣纸米底 + 竹青主色 + 印章点缀，朋友圈式卡片
   ========================================================================== */

:root {
  --ink: #1E2A24;
  --ink-2: #55655C;
  --ink-3: #8B9A91;
  --ink-4: #AEB9B2;

  --paper: #F4F2EC;
  --paper-2: #EDEAE2;
  --card: #FFFFFF;
  --line: #E7E3D9;
  --line-2: #EFECE4;

  --bamboo: #3F6B57;
  --bamboo-d: #2B4C3D;
  --bamboo-l: #EAF2ED;

  --seal: #B5433A;
  --seal-l: #FBEDEA;

  /* 身份三色 */
  --idt-green: #3E7C59;
  --idt-green-bg: #E6F1EA;
  --idt-amber: #A2761A;
  --idt-amber-bg: #FAF0D8;
  --idt-blue: #2C66A3;
  --idt-blue-bg: #E6EFF9;

  --shadow-s: 0 1px 2px rgba(31, 42, 36, .04);
  --shadow-m: 0 2px 10px rgba(31, 42, 36, .06);
  --shadow-l: 0 8px 30px rgba(31, 42, 36, .12);

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 56px;
}

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

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

body { overscroll-behavior-y: none; }

/* 竹纹底：极淡的斜向节纹，只在页面底色上，不干扰阅读 */
.bamboo-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(63, 107, 87, .055) 0px,
      rgba(63, 107, 87, .055) 1px,
      transparent 1px,
      transparent 26px),
    repeating-linear-gradient(0deg,
      rgba(63, 107, 87, .035) 0px,
      rgba(63, 107, 87, .035) 1px,
      transparent 1px,
      transparent 26px);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(31, 42, 36, .07);
}

/* ---------- 通用 ---------- */
.view { display: none; }
.view.active { display: block; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { border: none; background: none; cursor: pointer; padding: 0; }
input, textarea { -webkit-appearance: none; appearance: none; }
img { display: block; max-width: 100%; }

.hint { color: var(--ink-3); font-size: 12.5px; }
.center { text-align: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: transform .12s, opacity .12s, background .18s;
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--bamboo); color: #fff; box-shadow: 0 4px 14px rgba(63, 107, 87, .28); }
.btn-primary:disabled { background: #C4CFC8; box-shadow: none; }
.btn-ghost { background: #fff; color: var(--bamboo); border: 1px solid var(--line); }
.btn-block { display: flex; width: 100%; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 999px; }

/* ---------- 顶栏（跟随滚动，不固定） ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  background: rgba(244, 242, 236, .93);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.topbar .seal {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--seal), #98362E);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(181, 67, 58, .3);
  font-family: "STKaiti", "KaiTi", serif;
}
.topbar .seal-gold {
  background: linear-gradient(150deg, #C08A2A, #9A6E18);
  box-shadow: 0 2px 8px rgba(192, 138, 42, .32);
}
.topbar .tt { flex: 1; min-width: 0; }
.topbar .tt b { display: block; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.topbar .tt span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: -1px; }
.topbar .act { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink-2);
}
.icon-btn:active { background: rgba(31, 42, 36, .06); }
.icon-btn svg { width: 21px; height: 21px; }

/* 返回式顶栏（二级页） */
.topbar.nav { justify-content: flex-start; }
.topbar.nav .title { flex: 1; font-size: 16px; font-weight: 700; }

/* ---------- 许愿池横幅 ---------- */
.wish-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 16px 4px;
  padding: 11px 14px;
  border-radius: 999px;
  background: linear-gradient(100deg, #FFF9EC, #F3EEDF 55%, #EAF2ED);
  border: 1px solid #E8E1CE;
  color: #6B5A2E;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-s);
}
.wish-banner:active { transform: scale(.985); }
.wish-banner .sp { margin-left: auto; color: #9A8B5E; font-size: 12px; font-weight: 400; }
.wish-banner svg { width: 16px; height: 16px; color: #C08A2A; flex: 0 0 16px; }

/* ---------- 信息流 ---------- */
.feed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.feed-head::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}
.chip:active { transform: scale(.96); }
.chip.on { background: var(--bamboo); border-color: var(--bamboo); color: #fff; font-weight: 600; }
.chip.dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }

.feed { padding: 10px 16px calc(var(--tabbar-h) + var(--safe-b) + 22px); }

.post {
  background: var(--card);
  border-radius: var(--r-m);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-s);
  padding: 14px 14px 6px;
  margin-bottom: 12px;
}
.post.pinned { border-color: #E3D6AE; background: linear-gradient(180deg, #FFFDF6, #fff 70%); }

.post-top { display: flex; gap: 10px; align-items: flex-start; }
.avatar {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bamboo-l);
  color: var(--bamboo);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
  overflow: hidden;
}
.avatar.lg { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 18px; font-size: 22px; }
.avatar.sm { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; font-size: 12px; }
.avatar.xs { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; font-size: 11px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.post-meta { flex: 1; min-width: 0; }
.post-meta .r1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-meta .nick { font-weight: 700; font-size: 15px; color: var(--ink); max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 组别紧跟在身份标签后面，不再单独占一行 */
.post-meta .r1 .g {
  display: inline-flex; align-items: center;
  height: 19px; padding: 0 7px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  color: var(--bamboo); background: var(--bamboo-l); border: 1px solid #D6E4DB;
}
.post-meta .r2 { font-size: 12px; color: var(--ink-3); margin-top: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-meta .r2 .g { color: var(--bamboo); font-weight: 600; }

.pin-tag {
  font-size: 11px; font-weight: 600;
  color: #8A6A15; background: #FBF1D5;
  border-radius: 5px; padding: 1px 6px;
}

/* 身份标签 */
.idtag {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 19px; padding: 0 7px;
  border-radius: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  border: 1px solid transparent;
}
.idt-green { color: var(--idt-green); background: var(--idt-green-bg); border-color: #D3E6DA; }
.idt-amber { color: var(--idt-amber); background: var(--idt-amber-bg); border-color: #EFE0BC; }
.idt-blue  { color: var(--idt-blue);  background: var(--idt-blue-bg);  border-color: #CFE0F1; }
.idt-purple { color: #6B4FA8; background: #F0EBFA; border-color: #DED4F2; }
.idt-seal   { color: #B0413E; background: #FBEEED; border-color: #F2D4D2; }

.post-body {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: #26332C;
  white-space: pre-wrap;
  word-break: break-word;
}
.post-body.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.post-body .kw { color: var(--bamboo); font-weight: 700; }

.imgs { display: grid; gap: 4px; margin-top: 10px; border-radius: 10px; overflow: hidden; }
.imgs.n1 { grid-template-columns: minmax(0, 74%); }
.imgs.n2 { grid-template-columns: repeat(2, 1fr); }
.imgs.n3, .imgs.n4, .imgs.n6, .imgs.n9 { grid-template-columns: repeat(3, 1fr); }
.imgs.n5, .imgs.n7, .imgs.n8 { grid-template-columns: repeat(3, 1fr); }
.imgs .cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.imgs.n1 .cell { aspect-ratio: 4 / 3; }
.imgs img { width: 100%; height: 100%; object-fit: cover; }

.post-foot {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  border-top: 1px solid var(--line-2);
  padding: 3px 0;
}
.act-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 11px;
  border-radius: 8px;
  color: var(--ink-2); font-size: 13.5px;
}
.act-btn:active { background: rgba(31, 42, 36, .05); }
.act-btn svg { width: 17px; height: 17px; }
.act-btn.liked { color: var(--seal); font-weight: 600; }
.act-btn.liked svg { fill: var(--seal); stroke: var(--seal); }
.act-btn .mgr { margin-left: auto; }
.post-foot .sp { margin-left: auto; }

.empty {
  text-align: center;
  padding: 54px 30px;
  color: var(--ink-3);
}
.empty .big { font-size: 40px; opacity: .35; margin-bottom: 8px; }
.empty p { margin: 4px 0; font-size: 14px; }

.loading { text-align: center; padding: 22px; color: var(--ink-3); font-size: 13px; }
.spin {
  width: 18px; height: 18px; margin: 0 auto 8px;
  border: 2px solid var(--line);
  border-top-color: var(--bamboo);
  border-radius: 50%;
  animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------- 底部标签栏 ---------- */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 40;
  width: 100%;
  max-width: 480px;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--ink-3); font-size: 10px; letter-spacing: -.2px;
  padding: 0 2px;
}
.tabbar button.on { color: var(--bamboo); font-weight: 600; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar .pub { display: flex; align-items: center; justify-content: center; }
.tabbar .pub i {
  width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(150deg, var(--bamboo), var(--bamboo-d));
  display: grid; place-items: center;
  box-shadow: 0 3px 12px rgba(63, 107, 87, .3);
  margin-top: -4px;
}
.tabbar .pub svg { color: #fff; width: 21px; height: 21px; }

/* ---------- 发布页 ---------- */
.compose { padding: 14px 16px calc(var(--tabbar-h) + var(--safe-b) + 80px); }
.compose-card {
  background: #fff; border-radius: var(--r-m); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-s); padding: 14px;
}
.compose textarea {
  width: 100%; min-height: 148px;
  border: none; outline: none; resize: none;
  font-size: 16px; line-height: 1.75; color: var(--ink);
  background: transparent;
}
.compose textarea::placeholder { color: #B6C0B9; }
.counter { text-align: right; font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.counter.warn { color: var(--seal); font-weight: 600; }

.img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.img-cell {
  position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: var(--paper-2);
}
.img-cell img { width: 100%; height: 100%; object-fit: cover; }
.img-cell .del {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(20, 26, 22, .62); color: #fff;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
}
.img-add {
  aspect-ratio: 1/1; border-radius: 10px;
  border: 1.5px dashed #C9D2CB; background: #FAFBF9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--ink-3); font-size: 11.5px;
}
.img-add svg { width: 24px; height: 24px; }

.compose-rows {
  margin-top: 14px; background: #fff;
  border-radius: var(--r-m); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-s); overflow: hidden;
}
.crow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; min-height: 52px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
}
.crow:last-child { border-bottom: none; }
.crow .k { color: var(--ink-2); flex: 0 0 62px; }
.crow .v { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.crow .v select {
  border: none; background: none; outline: none;
  font-size: 14.5px; color: var(--ink); font-weight: 600;
  text-align: right; text-align-last: right;
  max-width: 100%;
}
.crow .arrow { color: var(--ink-4); font-size: 13px; }
.crow .v .idtag { height: 22px; font-size: 12.5px; padding: 0 9px; border-radius: 6px; }
.crow .v .cur { color: var(--ink); font-weight: 600; }

/* 引导最后一步的确认框 */
.confirm-box {
  background: var(--paper); border-radius: var(--r-m);
  border: 1px solid var(--line-2); overflow: hidden;
}
.confirm-box > div {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; font-size: 14.5px;
  border-bottom: 1px solid var(--line-2);
}
.confirm-box > div:last-child { border-bottom: none; }
.confirm-box .k { color: var(--ink-2); flex: 0 0 52px; }
.confirm-box .v { flex: 1; text-align: right; font-weight: 700; color: var(--bamboo); }

.compose-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  width: 100%; max-width: 480px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
}

/* ---------- 详情页 / 评论 ---------- */
.detail { padding: 12px 16px calc(var(--tabbar-h) + var(--safe-b) + 80px); }
.detail .post { margin-bottom: 12px; }
.cmt-block { background: #fff; border-radius: var(--r-m); border: 1px solid var(--line-2); padding: 12px 14px; box-shadow: var(--shadow-s); }
.cmt-block h4 { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.cmt { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.cmt:last-child { border-bottom: none; }
.cmt .ct { flex: 1; min-width: 0; }
.cmt .cn { font-size: 13px; color: var(--bamboo); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cmt .cc { font-size: 14.5px; color: #26332C; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
.cmt .cd { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; display: flex; align-items: center; gap: 12px; }
.cmt .cd .cd-act { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cmt .cd .cd-act:active { color: var(--bamboo); }
.cmt .cd .cd-act.danger { color: #B5433A; }

/* 二级回复：只缩进一层，不无限嵌套 */
.cmt-replies {
  margin-left: 41px;
  padding-left: 11px;
  border-left: 2px solid var(--line-2);
}
.cmt.reply { padding: 7px 0; gap: 8px; }
.cmt.reply .cn { font-size: 12.5px; }
.cmt.reply .cc { font-size: 14px; }
.cmt .rt { color: var(--bamboo); font-weight: 600; }

.cmt-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  width: 100%; max-width: 480px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-2);
}
.cmt-bar-row { padding: 9px 14px; display: flex; align-items: center; gap: 9px; }
.cmt-bar input {
  flex: 1; height: 40px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  padding: 0 15px; outline: none; font-size: 14.5px;
}
.cmt-bar input:focus { border-color: var(--bamboo); background: #fff; }

/* 正在回复谁 */
.cmt-reply-tip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 0; font-size: 12.5px; color: var(--ink-2);
}
.cmt-reply-tip b { color: var(--bamboo); }
.cmt-reply-tip button { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.cmt-bar.replying input { border-color: var(--bamboo); }

/* ---------- 我的 ---------- */
.me-head {
  position: relative;
  padding: 22px 16px 40px;
  background: linear-gradient(160deg, #3F6B57, #2B4C3D 70%);
  color: #fff;
  overflow: hidden;
}
.me-head::after {
  content: "";
  position: absolute; right: -30px; bottom: -50px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
}
.me-row { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.me-row .nick { font-size: 19px; font-weight: 700; }
.me-row .sub { font-size: 12.5px; opacity: .82; margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.me-head .idtag { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.3); }

/* 「我的」页背景墙 */
.me-head.has-bg { padding-top: 58px; }
.me-bg { position: absolute; inset: 0; }
.me-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-head.has-bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 34, 27, .34), rgba(20, 34, 27, .55));
}
.me-head.has-bg .me-row { position: relative; z-index: 2; }
.me-bg-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.me-bg-btn svg { width: 17px; height: 17px; }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: -26px 16px 0;
  position: relative; z-index: 2;
  background: #fff; border-radius: var(--r-m);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-m);
  padding: 14px 0;
}
.stats div { text-align: center; }
.stats b { display: block; font-size: 19px; font-weight: 700; color: var(--bamboo); }
.stats span { font-size: 11.5px; color: var(--ink-3); }

.me-body { padding: 16px 16px calc(var(--tabbar-h) + var(--safe-b) + 22px); }
.seg {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--paper-2); border-radius: 10px; padding: 3px; margin-bottom: 12px;
}
.seg button { height: 34px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.seg button.on { background: #fff; color: var(--bamboo); box-shadow: var(--shadow-s); }

.menu { background: #fff; border-radius: var(--r-m); border: 1px solid var(--line-2); box-shadow: var(--shadow-s); overflow: hidden; }
.menu button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 14px 15px; text-align: left;
  font-size: 14.5px; border-bottom: 1px solid var(--line-2);
}
.menu button:last-child { border-bottom: none; }
.menu button:active { background: var(--paper); }
.menu svg { width: 18px; height: 18px; color: var(--bamboo); }
.menu .arrow { margin-left: auto; color: var(--ink-4); font-size: 13px; }
/* 只读信息行（身份 / 小组，不可点击） */
.menu-static {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 15px; font-size: 14.5px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
}
.menu-static svg { color: var(--ink-4); }
.menu-static .k { flex: 1; }
.menu-static .v { color: var(--ink); font-weight: 600; }
.menu-static .idtag { height: 22px; font-size: 12.5px; padding: 0 9px; border-radius: 6px; }

/* ---------- 引导页 ---------- */
.onboard { padding: 30px 20px calc(var(--safe-b) + 30px); }
.ob-step { display: none; }
.ob-step.on { display: block; }
.ob-title { font-size: 22px; font-weight: 700; letter-spacing: .3px; }
.ob-desc { color: var(--ink-2); font-size: 14px; margin: 8px 0 22px; line-height: 1.7; }

.opt-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.opt {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-m); text-align: left;
  transition: border-color .15s, background .15s, transform .12s;
}
.opt:active { transform: scale(.985); }
.opt.on { border-color: var(--bamboo); background: var(--bamboo-l); }
.opt .dot {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 16px; font-weight: 700;
}
.opt .dot.g { background: var(--idt-green-bg); color: var(--idt-green); }
.opt .dot.a { background: var(--idt-amber-bg); color: var(--idt-amber); }
.opt .dot.b { background: var(--idt-blue-bg); color: var(--idt-blue); }
.opt .t1 { font-weight: 600; font-size: 15.5px; }
.opt .t2 { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.opt .tick { margin-left: auto; color: var(--bamboo); font-size: 17px; opacity: 0; }
.opt.on .tick { opacity: 1; }

.group-picker { position: relative; margin-bottom: 20px; }
.group-picker .search-in { position: relative; margin-bottom: 12px; }
.group-picker input {
  width: 100%; height: 46px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
  padding: 0 14px 0 40px; outline: none; font-size: 15px;
}
.group-picker input:focus { border-color: var(--bamboo); }
.group-picker .search-in svg { position: absolute; left: 13px; top: 14px; width: 18px; height: 18px; color: var(--ink-3); }
.group-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 48vh; overflow-y: auto; padding: 2px; }
.group-grid button {
  height: 52px; border-radius: 11px;
  background: #fff; border: 1.5px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.group-grid button .gn { font-size: 15px; font-weight: 700; }
.group-grid button .gc { font-size: 10.5px; color: var(--ink-3); }
.group-grid button.on { border-color: var(--bamboo); background: var(--bamboo-l); }
.group-grid button.on .gn { color: var(--bamboo); }

/* ---------- 弹层 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(22, 30, 25, .48);
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 360px;
  background: #fff; border-radius: var(--r-l);
  box-shadow: var(--shadow-l);
  overflow: hidden;
  animation: pop .22s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes pop { from { transform: scale(.92) translateY(10px); opacity: 0; } }

/* 弹层里的菜单按钮 */
.menu-item {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.menu-item:active { background: var(--paper); }

/* 弹层里的菜单按钮 */
/* 大图预览 */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: #0D1210;
  display: flex; align-items: center; justify-content: center;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .close {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center;
}
.lightbox .idx {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.82); font-size: 13px;
  background: rgba(255,255,255,.12); padding: 4px 13px; border-radius: 999px;
}

/* Toast */
.toast {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  background: rgba(22, 30, 25, .9);
  color: #fff; font-size: 14px;
  padding: 11px 20px; border-radius: 10px;
  max-width: 76vw; text-align: center;
  animation: fade .15s ease;
}

/* 政策页 */
.doc { padding: 18px 18px calc(var(--safe-b) + 30px); }
.doc h3 { font-size: 15.5px; margin: 22px 0 8px; color: var(--bamboo-d); }
.doc p, .doc li { font-size: 14px; color: #3A4741; line-height: 1.8; }
.doc ol, .doc ul { padding-left: 20px; margin: 8px 0; }
.doc .lead { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 14px; box-shadow: var(--shadow-s); }
.doc .foot { margin-top: 26px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* ---------- 评论里的组别 ---------- */
.cmt .cn .g {
  font-size: 11px; font-weight: 600; color: var(--bamboo);
  background: var(--bamboo-l); border: 1px solid #D6E4DB;
  border-radius: 5px; padding: 1px 6px;
}

/* ---------- 许愿池（独立页面） ---------- */
.wish-page { padding: 4px 18px calc(var(--tabbar-h) + var(--safe-b) + 24px); }
.wish-lead { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); text-align: center; margin: 12px 0 20px; }
.wish-stage { perspective: 1000px; }
.wish-slip {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(168deg, #FFFDF7, #FBF6E9 60%, #F7EFDD);
  border: 1px solid #EADFC4;
  box-shadow: 0 12px 32px rgba(150, 120, 60, .13), inset 0 0 0 1px rgba(255, 255, 255, .7);
  overflow: hidden;
}
.wish-slip::after {
  content: "愿";
  position: absolute; right: 14px; bottom: 8px;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 110px; line-height: 1; color: rgba(181, 67, 58, .07);
  pointer-events: none;
}
.wish-slip-inner {
  position: relative;
  min-height: 272px;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column; justify-content: center;
  transform-origin: 50% 40%;
}
.wish-slip-inner.turning { animation: wishTurn .52s cubic-bezier(.22, .8, .3, 1); }
@keyframes wishTurn {
  0% { opacity: 0; transform: translateY(16px) rotateX(-26deg) scale(.97); }
  100% { opacity: 1; transform: none; }
}
.wish-slip-tag {
  align-self: center;
  font-size: 11.5px; letter-spacing: 1.4px; color: #9A8B5E;
  border: 1px solid #E7D9B4; background: #FFFDF6;
  border-radius: 999px; padding: 3px 12px; margin-bottom: 18px;
}
.wish-slip-text {
  font-family: "STKaiti", "KaiTi", -apple-system, sans-serif;
  font-size: 19.5px; line-height: 1.92; color: #2C3A32;
  text-align: center; white-space: pre-wrap; word-break: break-word;
  min-height: 78px; display: grid; place-items: center;
}
.wish-slip-text.loading { color: var(--ink-3); font-size: 15px; font-family: inherit; }
.wish-slip-who {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 22px; padding-top: 16px; border-top: 1px dashed #EADFC4;
  flex-wrap: wrap;
}
.wish-slip-who .who-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wish-slip-who .nm { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.wish-slip-who .g {
  font-size: 11.5px; font-weight: 600; color: var(--bamboo);
  background: var(--bamboo-l); border: 1px solid #D6E4DB;
  border-radius: 5px; padding: 1px 7px;
}
.wish-slip-who .mt { font-size: 11.5px; color: var(--ink-4); }
.wish-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.wish-actions .btn { height: 48px; font-size: 15.5px; }

/* 翻过的话 */
.wish-history { display: flex; flex-direction: column; gap: 8px; }
.wh-item {
  text-align: left; padding: 11px 13px;
  border: 1px solid var(--line-2); background: var(--paper); border-radius: 10px;
}
.wh-item:active { background: #fff; border-color: var(--bamboo); }
.wh-t { display: block; font-size: 14px; color: var(--ink); line-height: 1.6; }
.wh-n { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* ---------- 昱竹金句（整页卡片） ---------- */
.quote-page { padding: 4px 16px calc(var(--tabbar-h) + var(--safe-b) + 84px); }
.quote-page .feed-head { padding: 6px 0 12px; }
.quote-list { display: flex; flex-direction: column; gap: 12px; }
.quote-card {
  position: relative;
  background: linear-gradient(170deg, #FFFFFF, #FCFAF5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bamboo);
  border-radius: 14px;
  padding: 20px 18px 13px;
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.quote-card.top {
  border-left-color: var(--seal);
  background: linear-gradient(170deg, #FFFDF8, #FDF6EC);
}
.quote-card .q-mark {
  position: absolute; top: 0; right: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 62px; line-height: 1; color: rgba(63, 107, 87, .1);
  pointer-events: none;
}
.quote-card .q-text {
  margin: 0; position: relative;
  font-family: "STKaiti", "KaiTi", -apple-system, sans-serif;
  font-size: 18px; line-height: 1.95; color: #26332C;
  white-space: pre-wrap; word-break: break-word;
}
.quote-card .q-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--line);
}
.quote-card .q-from { font-size: 12.5px; color: var(--ink-3); flex: 1; min-width: 0; }
.quote-card .q-like {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-3); font-weight: 600;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff;
}
.quote-card .q-like svg { width: 16px; height: 16px; }
.quote-card .q-like.on { color: var(--seal); border-color: #F0D8D5; background: var(--seal-l); }
.quote-card .q-like:active { transform: scale(.94); }
.sk-q {
  min-height: 106px; border-left-color: var(--line-2);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}

/* 提交金句的弹层 */
.quote-sheet { padding: 22px 20px 18px; }
.quote-sheet h3 { margin: 10px 0 6px; font-size: 17.5px; }
.quote-sheet .hint { margin: 0 0 12px; }
.quote-sheet textarea {
  width: 100%; min-height: 96px; resize: none; outline: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 12px 13px;
  font-family: "STKaiti", "KaiTi", -apple-system, sans-serif;
  font-size: 15.5px; line-height: 1.85;
}
.quote-sheet textarea:focus { border-color: var(--bamboo); background: #fff; }
.q-badge {
  display: inline-block; font-size: 11.5px; letter-spacing: 1px;
  color: #9A8B5E; border: 1px solid #E7D9B4; background: #FFFDF6;
  border-radius: 999px; padding: 3px 11px;
}
.q-row { display: flex; justify-content: flex-end; margin-top: 5px; }
.q-counter { font-size: 12px; color: var(--ink-4); }
.q-type {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 14px 0; background: var(--paper-2); border-radius: 10px; padding: 3px;
}
.q-type button { height: 34px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.q-type button.on { background: #fff; color: var(--bamboo); box-shadow: var(--shadow-s); }
.q-acts { display: flex; gap: 9px; }
.q-acts .btn { flex: 1; height: 44px; }

/* 「我也记了一句」入口按钮 */
#btn-quote-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; font-size: 15px; font-weight: 600;
}
#btn-quote-add svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* 骨架屏 */
.sk { background: linear-gradient(90deg, #EDEAE2 25%, #E4E1D8 37%, #EDEAE2 63%); background-size: 400% 100%; animation: sk 1.3s ease-in-out infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-post { background: #fff; border-radius: var(--r-m); border: 1px solid var(--line-2); padding: 14px; margin-bottom: 12px; }
.sk-post .l { height: 12px; margin-bottom: 9px; }

@media (max-width: 360px) {
  .group-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 问答页 ---------- */
.qa-page { padding: 6px 16px calc(var(--tabbar-h) + var(--safe-b) + 86px); }
.qa-sec-title {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  letter-spacing: 1px; margin: 14px 2px 8px;
}
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 8px; overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 13px 15px; font-size: 14.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  margin-left: auto; width: 8px; height: 8px; flex: 0 0 8px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s; margin-top: -3px;
}
.faq-item[open] summary i { transform: rotate(225deg); margin-top: 3px; }
.faq-item .faq-a {
  padding: 0 15px 14px; font-size: 14px; line-height: 1.75; color: #3A4740;
  white-space: pre-wrap; word-break: break-word;
}
.qa-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 15px; margin-bottom: 10px; box-shadow: var(--shadow-s);
}
.qa-q { min-width: 0; }
.qa-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.qa-head .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qa-head .g { font-size: 12px; color: var(--bamboo); font-weight: 600; }
.qa-head .tm { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }
.qa-text { margin-top: 7px; font-size: 15px; line-height: 1.7; color: #26332C; white-space: pre-wrap; word-break: break-word; }
.qa-a {
  margin-top: 11px; padding: 11px 13px;
  background: #F2F6F1; border-radius: 10px;
}
.qa-badge {
  font-size: 11.5px; font-weight: 700; color: var(--bamboo);
  background: rgba(63, 107, 87, .1); border-radius: 999px; padding: 2.5px 9px;
}
.qa-a .qa-text { margin-top: 6px; }
.qa-wait { margin-top: 9px; font-size: 12px; color: var(--ink-4); }
.qa-ans-btn { margin-top: 10px; }
.qa-del { margin-top: 7px; font-size: 12px; color: var(--ink-4); }
.qa-del:active { color: var(--seal); }

/* 金句时间标记 */
.q-time { font-style: normal; margin-left: 8px; font-size: 11px; color: var(--ink-4); font-weight: 400; }
.chip-qa { color: var(--bamboo); font-weight: 600; }

/* ==========================================================================
   关键兜底：hidden 属性必须能压住类里的 display
   --------------------------------------------------------------------------
   hidden 只是浏览器默认样式（UA 样式表里的 display:none），
   而下面这些元素在作者样式里写了 display:flex / grid，
   优先级更高，会把 hidden 反过来盖掉 —— 结果是：
     · .lightbox（全屏近黑遮罩，z-index 200）会一直盖在整个页面上 → 打开就是黑屏
     · .modal、.tabbar 同理
   这一条用 !important 兜底，确保任何地方只要写了 hidden，就一定不显示。
   ========================================================================== */
[hidden] { display: none !important; }