:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --primary: #2563eb;
  --line: #e5e7eb;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  position: relative;
}

/* 全站背景（与各 tab 页共用） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("./素材/背景底图/底图1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transform-origin: center center;
}

/* 首頁：底圖視覺放大（裁邊 zoom，仍鋪滿視窗） */
body.home-bg-active::before {
  background-image: url("./素材/背景底图/底图3.webp");
  transform: none;
}

body.discover-page-active::before {
  background-image: url("./素材/背景底图/底图3.webp");
  transform: none;
}

body.dialog-page-active {
  background: #060a1c;
}

body.dialog-page-active::before {
  display: none;
}

body.starmap-page-active::before {
  background-image: none;
  background-color: #060a1c;
}

.app {
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
  display: grid;
  /* 底欄實際高度 ≥ min-height + 安全區，固定 58px 會擠壓或把欄位頂出視覺區 */
  grid-template-rows: 52px 1fr auto;
  position: relative;
  z-index: 1;
}

.app--headerless {
  grid-template-rows: 1fr auto;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  min-height: 52px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.top-bar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.content {
  overflow-y: auto;
  padding: 12px;
}

.legacy-pages-host {
  display: contents;
}

.page {
  display: none;
  min-height: 100%;
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
}

.page.active {
  display: block;
}

/* 非首页 tab：透出让底图可见（保持卡片区块可读） */
.page[data-page="discover"].active,
.page[data-page="library"].active,
.page[data-page="philosophy-starmap"].active,
.page[data-page="message"].active {
  background: transparent;
  border-radius: 0;
}

/* 首页特殊样式 */
.page[data-page="home"].active {
  display: block;
  position: relative;
}

/* 非星空底圖時略減首頁卡片上內距，讓主標更靠上 */
body:not(.home-bg-active) .page[data-page="home"].active {
  padding-top: 8px;
}

body.home-bg-active .app {
  grid-template-rows: 1fr auto;
}

body.home-bg-active .top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 10;
  background: transparent;
  border-bottom: none;
}

body.home-bg-active .top-bar h1 {
  opacity: 0;
}

/* 其他 tab：顶栏略透明以衔接底图 */
body:not(.home-bg-active) .top-bar {
  background: rgba(250, 246, 238, 0.88);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(200, 182, 155, 0.35);
}

/* 我的页：隐藏最上方白框（标题栏） */
body.mine-page-active .app {
  grid-template-rows: 1fr auto;
}

body.mine-page-active .top-bar {
  display: none;
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
}

body.mine-page-active .content {
  padding: 0;
}

/* 「我的」底下子頁：不要外層白卡片 + content 留白，避免與板塊底圖「套兩層」 */
body.mine-subpage-view .content {
  padding: 0;
  background: transparent;
}

/* 「我的」子頁：無四格主底欄時僅頂欄 + 內容 */
body.mine-subpage-view:not(.main-tab-bar-visible) .app {
  grid-template-rows: 52px 1fr;
}

/* 「我的收藏」「智慧小记」：內容區內滾動，底部由 capsule／流星 欄佔位 */
body.mine-inner-nav-view .content {
  overflow: hidden;
  padding: 0;
  min-height: 0;
}

body.mine-inner-nav-view .page.active[data-page="saved-stories"],
body.mine-inner-nav-view .page.active[data-page="wisdom-notes"] {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* 內層底欄頁：不佔用主四格底欄那一行，避免出現兩排導航 */
body.mine-inner-nav-view .app {
  grid-template-rows: 52px 1fr;
}

body.mine-inner-nav-view:not(.saved-stories-page-active) .app {
  grid-template-rows: 1fr;
}

body.mine-inner-nav-view:not(.saved-stories-page-active) .top-bar {
  display: none;
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-bottom: none;
}

body.mine-inner-nav-view .tab-bar {
  display: none !important;
}

body.my-capsules-page-active::before {
  background-image: url("./素材/背景底图/胶囊页背景.webp");
  background-size: cover;
  background-position: center;
  transform: none;
}

body.saved-stories-page-active::before {
  background-image: url("./素材/背景底图/收藏页背景.webp");
  background-size: cover;
  background-position: center;
  transform: none;
}

body.my-capsules-page-active .app,
body.my-capsules-page-active.mine-subpage-view .app,
body.saved-stories-page-active .app,
body.saved-stories-page-active.mine-subpage-view .app,
body.saved-stories-page-active.mine-inner-nav-view .app {
  grid-template-rows: 1fr;
}

body.my-capsules-page-active .top-bar,
body.saved-stories-page-active .top-bar {
  display: none;
}

/* 智慧流星：無頂欄，避免 mine-subpage 的 52px 空行把內容擠沒 */
body.meteor-page-active .top-bar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-bottom: none;
}

body.meteor-page-active.mine-subpage-view:not(.main-tab-bar-visible) .app,
body.meteor-page-active .app,
body.meteor-page-active .app.app--headerless {
  grid-template-rows: 1fr auto !important;
}

body.meteor-page-active .content {
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.meteor-page-active .page[data-page="meteor"].active {
  padding: max(8px, env(safe-area-inset-top, 0px)) 0
    calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

body.my-capsules-page-active .content,
body.saved-stories-page-active .content {
  overflow: hidden;
  padding: 0;
}

body.my-capsules-page-active .legacy-pages-host,
body.saved-stories-page-active .legacy-pages-host {
  display: contents;
}

body.home-bg-active .tab-bar {
  background: rgba(8, 24, 48, 0.62);
  border-top-color: rgba(255, 241, 199, 0.25);
  backdrop-filter: blur(2px);
}

body.home-bg-active .content {
  padding: 0;
}

body.home-bg-active .page[data-page="home"].active {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.page[data-page="home"] .home-shell {
  --home-serif:
    "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Songti SC", "STKaiti", "KaiTi", serif;
  --home-sans:
    "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  min-height: 100%;
  /* 頂部多留空：避免主標負 margin / drop-shadow 被 .content 捲動區裁切 */
  padding: calc(env(safe-area-inset-top) + 12px) 16px 14px;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.page[data-page="home"] .home-header {
  color: #122436;
}

/* 首頁主標：宋體感襯線 + 深藍炭黑漸層 + 細高光與暖色柔光（無字後裝飾底圖） */
.page[data-page="home"] .home-title-stage {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 0 6px;
  text-align: center;
}

.page[data-page="home"] .home-title {
  margin: 0;
  padding: 0.06em 0.04em 0;
  font-family: var(--home-serif);
  font-size: clamp(40px, 11.8vw, 54px);
  font-weight: 600;
  letter-spacing: 0.38em;
  line-height: 1.22;
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0) 18%
    ),
    linear-gradient(
      178deg,
      #5a6d88 0%,
      #3d4d66 14%,
      #283448 32%,
      #151d2c 52%,
      #0c1018 72%,
      #1a2436 100%
    );
  background-size: 55% 90%, 100% 100%;
  background-position: 8% 15%, 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.12))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08))
    drop-shadow(0 10px 28px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 32px rgba(255, 244, 220, 0.14))
    drop-shadow(0 0 56px rgba(255, 236, 200, 0.08));
}

@media (prefers-reduced-motion: reduce) {
  .page[data-page="home"] .home-title {
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.06))
      drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2))
      drop-shadow(0 0 24px rgba(255, 244, 220, 0.1));
  }
}

.page[data-page="home"] .home-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1.5px solid rgba(186, 149, 79, 0.55);
  font-family: var(--home-sans);
  font-size: 12px;
  text-align: center;
  color: rgba(62, 52, 38, 0.78);
  letter-spacing: 0.1em;
  font-weight: 500;
}

.page[data-page="home"] .home-question {
  margin-top: 12px;
  margin-bottom: 0;
  font-family: var(--home-serif);
  font-size: clamp(17px, 5.2vw, 25px);
  line-height: 1.42;
  color: #1e3352;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.page[data-page="home"] .capsule-feature {
  margin-top: clamp(12px, 7vh, 44px);
  align-self: center;
}

.page[data-page="home"] .capsule-btn {
  position: relative;
  width: min(84vw, 336px);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  aspect-ratio: auto;
}

/* 膠囊圖：上下緩動 + 光暈／粒子（偽元素） */
.page[data-page="home"] .capsule-thumb-float {
  position: relative;
  display: block;
  line-height: 0;
  animation: capsule-thumb-float 3.4s ease-in-out infinite;
  will-change: transform;
}

.page[data-page="home"] .capsule-thumb-float::before {
  content: "";
  position: absolute;
  inset: -18% -12% -14% -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 42% 38% at 28% 32%,
      rgba(255, 236, 200, 0.55) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 36% 40% at 72% 58%,
      rgba(190, 220, 255, 0.42) 0%,
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 88%,
      rgba(255, 248, 220, 0.28) 0%,
      transparent 45%
    );
  filter: blur(10px);
  opacity: 0.85;
  animation: capsule-ambient-glow 3.8s ease-in-out infinite alternate;
}

/* 光粒子：中心點在膠囊幾何中心，box-shadow 圍一圈包圍四周 */
.page[data-page="home"] .capsule-thumb-float::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  pointer-events: none;
  font-size: clamp(10px, 3.5vw, 18px);
  width: 0.15em;
  height: 0.15em;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  /* 橢圓環繞（略高於寬，貼近膠囊外形）；blur+spread 做小光點 */
  box-shadow:
    0 -5.9em 0.15em 0.09em rgba(255, 252, 240, 0.92),
    2.15em -5.35em 0.12em 0.07em rgba(255, 236, 200, 0.88),
    4.35em -3.15em 0.14em 0.08em rgba(200, 224, 255, 0.9),
    5.85em 0 0.12em 0.075em rgba(255, 255, 255, 0.9),
    4.45em 3.35em 0.15em 0.07em rgba(186, 214, 255, 0.85),
    2.25em 5.45em 0.12em 0.08em rgba(255, 248, 215, 0.9),
    0 6.15em 0.14em 0.09em rgba(255, 240, 190, 0.88),
    -2.25em 5.45em 0.12em 0.07em rgba(255, 252, 245, 0.87),
    -4.45em 3.35em 0.15em 0.075em rgba(210, 230, 255, 0.82),
    -5.85em 0 0.12em 0.08em rgba(255, 255, 255, 0.88),
    -4.35em -3.15em 0.14em 0.07em rgba(255, 230, 175, 0.86),
    -2.15em -5.35em 0.12em 0.08em rgba(255, 250, 235, 0.9);
  filter: blur(0.35px);
  animation: capsule-sparkle 2.4s ease-in-out infinite;
}

.page[data-page="home"] .capsule-thumb {
  position: relative;
  z-index: 1;
  width: min(58vw, 238px);
  height: auto;
  transform: translateY(-30px);
  filter: drop-shadow(0 14px 24px rgba(12, 24, 42, 0.3));
}

@keyframes capsule-thumb-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes capsule-ambient-glow {
  0% {
    opacity: 0.55;
    transform: scale(0.96) translateY(2px);
  }
  100% {
    opacity: 0.95;
    transform: scale(1.04) translateY(-2px);
  }
}

@keyframes capsule-sparkle {
  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.92);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  70% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page[data-page="home"] .capsule-thumb-float {
    animation: none;
  }

  .page[data-page="home"] .capsule-thumb-float::before {
    animation: none;
  }

  .page[data-page="home"] .capsule-thumb-float::after {
    animation: none;
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1);
  }
}

.page[data-page="home"] .capsule-cta {
  width: min(72vw, 286px);
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid rgba(214, 175, 96, 0.72);
  background: linear-gradient(180deg, #17345b 0%, #0f2240 100%);
  color: #f0e4c8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-family: var(--home-serif);
  letter-spacing: 0.14em;
  font-weight: 600;
}

.page[data-page="home"] .home-story-card {
  position: relative;
  isolation: isolate;
  margin: 36px 16px max(4px, env(safe-area-inset-bottom));
  padding: 50px 58px 40px;
  min-height: 184px;
  background: transparent;
  filter: drop-shadow(0 12px 20px rgba(82, 58, 34, 0.13));
}

.page[data-page="home"] .home-story-card::before {
  content: "";
  position: absolute;
  inset: -24px -58px -26px;
  z-index: -1;
  background-image: url("./素材/组件底图/字条.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.page[data-page="home"] .home-story-card > * {
  position: relative;
  z-index: 1;
}

.page[data-page="home"] .home-story-card h3 {
  margin: 0;
  font-family: var(--home-sans);
  color: #8a6a3a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.page[data-page="home"] .story-sentence {
  margin: 8px 0 0;
  font-family: var(--home-serif);
  color: #2a3d58;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.55;
  white-space: pre-line;
}

.page[data-page="home"] .story-author {
  margin: 8px 0 0;
  font-family: var(--home-sans);
  color: #8a6a3a;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: right;
}

.page[data-page="home"] .story-author[hidden] {
  display: none;
}

.page[data-page="home"] .home-unknown-label {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--home-serif);
  color: #3a2b21;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}

.page[data-page="home"] .home-unknown-input {
  --home-note-line: 25px;
  display: block;
  width: 100%;
  height: calc(var(--home-note-line) * 3);
  min-height: calc(var(--home-note-line) * 3);
  max-height: calc(var(--home-note-line) * 3);
  margin: 0;
  padding: 1px 4px 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--home-note-line) - 1px),
    rgba(107, 78, 46, 0.34) calc(var(--home-note-line) - 1px),
    rgba(107, 78, 46, 0.34) var(--home-note-line)
  );
  background-size: 100% var(--home-note-line);
  background-attachment: local;
  color: #2f241d;
  font-family: var(--home-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: var(--home-note-line);
  letter-spacing: 0.04em;
  resize: none;
  outline: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.page[data-page="home"] .home-unknown-input::placeholder {
  color: rgba(88, 69, 51, 0.45);
}

.page[data-page="home"] .home-unknown-actions {
  position: absolute;
  right: 64px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.page[data-page="home"] .home-unknown-status {
  order: 2;
  min-height: 18px;
  color: rgba(93, 70, 46, 0.66);
  font-family: var(--home-sans);
  font-size: 12px;
  line-height: 1.5;
}

.page[data-page="home"] .home-unknown-save {
  order: 1;
  flex: 0 0 auto;
  padding: 5px 13px;
  border: 1px solid rgba(139, 98, 50, 0.36);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.58);
  color: rgba(72, 48, 26, 0.88);
  font-family: var(--home-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(82, 58, 34, 0.08);
}

.page[data-page="home"] .home-unknown-save:active {
  transform: translateY(1px);
}

.legacy-overlays-host {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}

.home-today-save-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 20px
    max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  pointer-events: auto;
}

.home-today-save-modal.is-open {
  display: flex !important;
}

.home-today-save-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(42, 30, 20, 0.42);
  cursor: pointer;
}

.home-today-save-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 340px);
  padding: 22px 20px 24px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(170, 155, 131, 0.35);
  box-shadow: 0 18px 48px rgba(82, 58, 34, 0.22);
}

.home-today-save-modal-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(60, 44, 33, 0.94);
  letter-spacing: 0.06em;
}

.home-today-save-modal-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(90, 61, 34, 0.76);
}

.home-today-save-modal-content {
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(244, 239, 228, 0.92);
  box-shadow: inset 0 0 0 1px rgba(139, 98, 50, 0.14);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: rgba(47, 36, 29, 0.92);
  white-space: pre-wrap;
  word-break: break-word;
}

.home-today-save-modal-confirm {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid rgba(214, 175, 96, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #17345b 0%, #0f2240 100%);
  color: #f0e4c8;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 34, 64, 0.18);
}

.home-today-save-modal-confirm:active {
  background: linear-gradient(180deg, #122a4a 0%, #0b1b33 100%);
}

.page h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.page p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.page[data-page="mine"].active {
  padding: 0 0 16px;
  background: transparent;
  min-height: auto;
}

.page[data-page="mine"] .mine-shell {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
}

.page[data-page="mine"] .mine-hero-panel {
  position: relative;
  overflow: visible;
  border-radius: 0;
  padding: 16px 12px 14px;
  text-align: center;
  background: transparent;
  border: none;
}

.page[data-page="mine"] .mine-hero-panel::before {
  display: none;
}

.page[data-page="mine"] .mine-hero-panel::after {
  display: none;
}

.page[data-page="mine"] .mine-hero-text {
  position: absolute;
  top: 16px;
  left: 6px;
  text-align: left;
  color: #f0e4cb;
  z-index: 2;
}

.page[data-page="mine"] .mine-hero-text h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: 1.5px;
  font-family: "STZhongsong", "STSong", "SimSun", serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page[data-page="mine"] .mine-hero-text h3:focus-visible {
  outline: 2px solid rgba(232, 197, 134, 0.78);
  outline-offset: 4px;
  border-radius: 8px;
}

.page[data-page="mine"] .mine-hero-text p {
  margin-top: 8px;
  color: #d2b586;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.page[data-page="mine"] .mine-avatar {
  width: 86px;
  height: 86px;
  margin: 66px auto 14px;
  border-radius: 50%;
  border: 2px solid rgba(180, 138, 78, 0.62);
  background-color: #f6f0e2;
  background-image: url("./素材/思想家头像/马可·奥勒留头像.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 14px rgba(20, 30, 48, 0.18);
  position: relative;
  z-index: 1;
}

.page[data-page="mine"] .mine-avatar::after {
  display: none;
}

.page[data-page="mine"] .mine-name {
  display: block;
  margin: 0;
  padding: 0 4px;
  font-size: 38px;
  color: #213758;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.page[data-page="mine"] .mine-name--zh {
  font-family: "STXingkai", "FZYaoti", "KaiTi", "Kaiti SC", "STKaiti", serif;
  font-weight: 500;
}

.page[data-page="mine"] .mine-name--en {
  color: #1c1c1c;
  font-family: "Great Vibes", "Pinyon Script", "Edwardian Script ITC", "Bickham Script Pro", "Snell Roundhand", cursive;
  max-width: min(72vw, 280px);
  padding: 8px 6px 5px;
  font-size: clamp(44px, 13vw, 54px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.18;
  text-shadow: 0 1px 2px rgba(33, 55, 88, 0.12);
  white-space: nowrap;
}

.page[data-page="mine"] .mine-name-editor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}

.page[data-page="mine"] .mine-name-edit-btn {
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.page[data-page="mine"] .mine-name-edit-btn img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.page[data-page="mine"] .mine-name-save-btn,
.page[data-page="mine"] .mine-name-cancel-btn {
  border: 1px solid rgba(134, 104, 57, 0.38);
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.76);
  color: #6f5a37;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.page[data-page="mine"] .mine-name-form {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 56px);
  padding: 10px;
  border: 1px solid rgba(134, 104, 57, 0.28);
  border-radius: 18px;
  background: rgba(255, 250, 238, 0.98);
  box-shadow: 0 10px 24px rgba(20, 30, 48, 0.16);
  transform: translateX(-50%);
}

.page[data-page="mine"] .mine-name-form::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(134, 104, 57, 0.28);
  border-top: 1px solid rgba(134, 104, 57, 0.28);
  background: rgba(255, 250, 238, 0.98);
  transform: translateX(-50%) rotate(45deg);
}

.page[data-page="mine"] .mine-name-form[hidden] {
  display: none;
}

.page[data-page="mine"] .mine-name-input {
  width: min(180px, 48vw);
  padding: 7px 10px;
  border: 1px solid rgba(134, 104, 57, 0.42);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.9);
  color: #213758;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 20px;
  text-align: center;
  outline: none;
}

.page[data-page="mine"] .mine-name-save-btn,
.page[data-page="mine"] .mine-name-cancel-btn {
  padding: 7px 10px;
}

.page[data-page="mine"] .mine-name-edit-btn:focus-visible,
.page[data-page="mine"] .mine-name-save-btn:focus-visible,
.page[data-page="mine"] .mine-name-cancel-btn:focus-visible,
.page[data-page="mine"] .mine-name-input:focus-visible {
  outline: 2px solid rgba(134, 104, 57, 0.45);
  outline-offset: 2px;
}

.page[data-page="mine"] .mine-slogan {
  margin: 0;
  font-size: 13px;
  color: #576b86;
  line-height: 1.55;
  letter-spacing: 0.05em;
}

.page[data-page="mine"] .mine-slogan-editor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: min(92vw, 320px);
  margin: 8px auto 0;
}

.page[data-page="mine"] .mine-slogan-edit-btn {
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.page[data-page="mine"] .mine-slogan-edit-btn img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.72;
}

.page[data-page="mine"] .mine-slogan-form {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 56px);
  padding: 10px;
  border: 1px solid rgba(134, 104, 57, 0.28);
  border-radius: 18px;
  background: rgba(255, 250, 238, 0.98);
  box-shadow: 0 10px 24px rgba(20, 30, 48, 0.16);
  transform: translateX(-50%);
}

.page[data-page="mine"] .mine-slogan-form::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(134, 104, 57, 0.28);
  border-top: 1px solid rgba(134, 104, 57, 0.28);
  background: rgba(255, 250, 238, 0.98);
  transform: translateX(-50%) rotate(45deg);
}

.page[data-page="mine"] .mine-slogan-form[hidden] {
  display: none;
}

.page[data-page="mine"] .mine-slogan-input {
  width: min(52vw, 220px);
  padding: 8px 12px;
  border: 1px solid rgba(134, 104, 57, 0.32);
  border-radius: 999px;
  background: #fffdf6;
  color: #3f4f66;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 13px;
  line-height: 1.4;
}

.page[data-page="mine"] .mine-slogan-save-btn,
.page[data-page="mine"] .mine-slogan-cancel-btn {
  border: 1px solid rgba(134, 104, 57, 0.38);
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.76);
  color: #6f5a37;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 12px;
}

.page[data-page="mine"] .mine-slogan-edit-btn:focus-visible,
.page[data-page="mine"] .mine-slogan-save-btn:focus-visible,
.page[data-page="mine"] .mine-slogan-cancel-btn:focus-visible,
.page[data-page="mine"] .mine-slogan-input:focus-visible {
  outline: 2px solid rgba(134, 104, 57, 0.45);
  outline-offset: 2px;
}

.page[data-page="mine"] .mine-streak {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-size: 12px;
  color: #6f5a37;
  position: relative;
  z-index: 1;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.page[data-page="mine"] .mine-card {
  border-radius: 14px;
  background: rgba(252, 248, 240, 0.92);
  border: 1px solid rgba(207, 187, 154, 0.58);
  box-shadow: 0 7px 16px rgba(12, 24, 41, 0.1);
  overflow: hidden;
}

.page[data-page="mine"] .mine-card-title {
  margin: 0;
  padding: 12px 14px 10px;
  font-size: 21px;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  color: #866839;
  border-bottom: 1px solid rgba(211, 193, 164, 0.5);
  letter-spacing: 0.06em;
  line-height: 1.35;
}

.page[data-page="mine"] .mine-archive-card {
  margin-top: -2px;
}

/* 「我的」頁：裝飾邊框（背景圖鋪滿，內容內縮避免遮擋花紋） */
.page[data-page="mine"] .mine-card-decor {
  border: none;
  box-shadow: none;
  background-color: rgba(252, 248, 240, 0.94);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: visible;
}

.page[data-page="mine"] .mine-card-decor .mine-card-title {
  border-bottom-color: transparent;
  padding-left: clamp(16px, 4.5vw, 26px);
  padding-right: clamp(16px, 4.5vw, 26px);
}

.page[data-page="mine"] .mine-card-decor--archive {
  background-image: url("./素材/装饰元素/边框3.webp");
  padding: clamp(14px, 3.5vw, 22px) clamp(12px, 4vw, 26px)
    clamp(16px, 4vw, 26px);
}

.page[data-page="mine"] .mine-card-decor--archive .mine-stats-grid {
  padding-left: clamp(6px, 1.2vw, 10px);
  padding-right: clamp(6px, 1.2vw, 10px);
}

.page[data-page="mine"] .mine-card-decor--actions {
  background-image: url("./素材/装饰元素/边框2.webp");
  padding: clamp(14px, 3.5vw, 22px) clamp(12px, 4vw, 26px)
    clamp(16px, 4vw, 26px);
}

.page[data-page="mine"] .mine-card-decor--actions .mine-row:first-of-type {
  border-top: none;
}

.page[data-page="mine"] .mine-card-decor--track {
  background-image: none;
  background-color: rgba(252, 248, 240, 0.92);
  border: 1px solid rgba(207, 187, 154, 0.58);
  box-shadow: 0 7px 16px rgba(12, 24, 41, 0.1);
  padding: clamp(14px, 3.5vw, 22px) clamp(12px, 4vw, 26px)
    clamp(16px, 4vw, 26px);
}

.page[data-page="mine"] .mine-card-decor--track .mine-track-desc {
  margin-left: clamp(2px, 1vw, 8px);
  margin-right: clamp(2px, 1vw, 8px);
}

.page[data-page="mine"] .mine-card-decor--track .mine-track-list {
  padding: clamp(12px, 2.5vw, 18px) clamp(10px, 2.5vw, 16px)
    clamp(16px, 3vw, 22px) clamp(14px, 3vw, 20px);
  min-height: clamp(300px, 40vh, 400px);
}

.page[data-page="mine"] .mine-archive-card .mine-card-title::before {
  content: "✦";
  margin-right: 8px;
  color: #b48a4e;
  font-size: 14px;
  vertical-align: 1px;
}

.page[data-page="mine"] .mine-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 8px 6px 10px;
}

.page[data-page="mine"] .mine-stat-item {
  padding: 12px 5px;
  text-align: center;
  border-right: 1px solid rgba(214, 197, 170, 0.42);
}

.page[data-page="mine"] .mine-stat-item:last-child {
  border-right: none;
}

.page[data-page="mine"] .mine-stat-item strong {
  display: block;
  font-size: 43px;
  line-height: 1.05;
  color: #243c5e;
  font-family: "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page[data-page="mine"] .mine-stat-item span,
.page[data-page="mine"] .mine-stat-label-btn {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  color: #7c6951;
  line-height: 1.45;
  letter-spacing: 0.05em;
}

.page[data-page="mine"] .mine-stat-label-btn {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page[data-page="mine"] .mine-stat-label-btn:hover,
.page[data-page="mine"] .mine-stat-label-btn:focus-visible {
  color: #5e4d38;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page[data-page="mine"] .mine-stat-label-btn:focus-visible {
  outline: 2px solid rgba(134, 104, 57, 0.45);
  outline-offset: 2px;
}

.page[data-page="mine"] .mine-stat-item--calendar {
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.page[data-page="mine"] .mine-stat-item--calendar:active {
  opacity: 0.92;
}

.page[data-page="mine"] .mine-row {
  width: 100%;
  border: none;
  background: transparent;
  display: grid;
  grid-template-columns: 24px 1fr 16px;
  align-items: center;
  column-gap: 11px;
  padding: 12px 12px;
  text-align: left;
  border-top: 1px solid rgba(217, 201, 176, 0.45);
  cursor: pointer;
}

.page[data-page="mine"] .mine-row:first-of-type {
  border-top: none;
}

.page[data-page="mine"] .mine-row:active {
  background: rgba(234, 223, 204, 0.35);
}

.page[data-page="mine"] .mine-row-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page[data-page="mine"] .mine-row-main strong {
  font-size: 18px;
  color: #2d4467;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.page[data-page="mine"] .mine-row-main small {
  font-size: 11px;
  color: #7f8695;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.page[data-page="mine"] .mine-row-arrow {
  font-size: 20px;
  line-height: 1;
  color: #9d8762;
  justify-self: end;
}

.page[data-page="mine"] .mine-row-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page[data-page="mine"] .mine-row-icon-img {
  width: 180%;
  height: 180%;
  object-fit: contain;
  display: block;
}

/* 充钱.png 的画面只占画布约 1/4，放大后才与其他图标视觉等重 */
.page[data-page="mine"] .mine-row-icon-img--pay {
  transform: scale(2.1);
}

.page[data-page="mine"] .mine-track-card {
  margin-top: 0;
  flex: 1 1 auto;
}

.page[data-page="mine"] .mine-track-card-title {
  margin: 0;
}

.page[data-page="mine"] .mine-track-desc {
  margin: -2px 0 10px;
  padding: 0 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #7e8490;
  letter-spacing: 0.03em;
}

.page[data-page="mine"] .mine-track-list {
  position: relative;
  padding: 12px 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
}

.page[data-page="mine"] .mine-track-list::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: rgba(184, 138, 78, 0.44);
}

.page[data-page="mine"] .mine-track-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
  padding-left: 18px;
}

.page[data-page="mine"] .mine-track-item::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b48a4e;
  box-shadow: 0 0 0 2px rgba(245, 239, 228, 0.92);
}

.page[data-page="mine"] .mine-track-day {
  font-size: 14px;
  color: #846e47;
  padding-top: 2px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  align-self: start;
}

.page[data-page="mine"] .mine-track-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.page[data-page="mine"] .mine-track-time {
  display: block;
  margin: 0;
  font-size: 12px;
  color: #7e8490;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.page[data-page="mine"] .mine-track-quote-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.page[data-page="mine"] .mine-track-quote {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  color: #304869;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  line-height: 1.8;
  letter-spacing: 0.03em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
}

.page[data-page="mine"] .mine-track-quote--empty {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  font-family: var(--home-sans, system-ui, sans-serif);
  font-size: 13px;
  color: #7e8490;
}

.page[data-page="mine"] .mine-track-more-btn {
  flex-shrink: 0;
  margin: 0 0 1px;
  padding: 2px;
  border: none;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  opacity: 0.88;
  -webkit-tap-highlight-color: transparent;
}

.page[data-page="mine"] .mine-track-more-btn img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.page[data-page="mine"] .mine-track-more-btn:active {
  opacity: 0.65;
}

.mine-track-full-modal-time {
  margin: 0 0 10px;
  font-size: 12px;
  color: #7e8490;
  letter-spacing: 0.03em;
}

.page[data-page="mine"] .mine-track-expand-btn {
  align-self: center;
  margin: auto auto 0;
  padding: 8px 22px;
  border: 1px solid rgba(180, 138, 78, 0.45);
  border-radius: 999px;
  background: rgba(252, 248, 240, 0.7);
  color: #846e47;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.page[data-page="mine"] .mine-track-expand-btn:active {
  opacity: 0.75;
}

@keyframes mine-track-item-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page[data-page="mine"] .mine-track-item--expand {
  animation: mine-track-item-reveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page[data-page="mine"] .mine-service-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.auth-page-active .app {
  grid-template-rows: 1fr;
}

body.auth-page-active .content {
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

body.auth-page-active .tab-bar {
  display: none;
}

.page[data-page="mine"] .mine-service-item {
  border: none;
  background: transparent;
  border-right: 1px solid rgba(214, 197, 170, 0.58);
  padding: 14px 8px;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 16px;
  font-weight: 500;
  color: #536175;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.page[data-page="mine"] .mine-service-item:last-child {
  border-right: none;
}

.page[data-page="mine"] a.mine-service-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

.capsule-btn {
  width: min(52vw, 210px);
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(13, 36, 72, 0.28);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
  overflow: visible;
}

.capsule-btn:active {
  transform: scale(0.96);
}

.capsule-btn:hover {
  box-shadow: 0 14px 34px rgba(13, 36, 72, 0.34);
}

.capsule-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.capsule-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  overflow: hidden;
}

.capsule-overlay.show-page {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.capsule-overlay.active {
  display: block;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 35, 0.5);
  opacity: 0;
  transition: opacity 0.48s ease;
}

.overlay-center {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  pointer-events: none;
}

/* 閱讀頁：紙條撐滿視窗高度，小故事區才能 flex 長到接近底欄按鈕 */
.capsule-overlay.show-page .overlay-center {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: stretch;
}

.capsule-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.capsule-overlay.video-open .capsule-video-wrap {
  opacity: 1;
  pointer-events: auto;
}

.capsule-overlay.show-page .capsule-video-wrap {
  opacity: 0;
  pointer-events: none;
}

/* 外層負責動效與陰影；鋪滿視窗，內層 img 再以 object-fit: cover 填滿 */
.capsule-video-frame {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background: transparent;
  opacity: 0;
  transform: scale(0.84) translateY(12px);
  filter: drop-shadow(0 28px 56px rgba(5, 14, 32, 0.42));
  transition:
    opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s ease;
}

.capsule-overlay.video-open .capsule-video-frame {
  opacity: 1;
  transform: scale(0.9) translateY(0);
}

.capsule-video {
  box-sizing: border-box;
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  background: transparent;
  background-color: transparent;
}

.capsule-overlay.video-open .overlay-capsule {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.capsule-overlay.video-open .overlay-note {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.overlay-capsule {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(74vw, 350px);
  aspect-ratio: 1 / 1;
  overflow: visible;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(0.62);
  transition:
    transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.25s ease;
}

.capsule-artwork {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.34));
  transition: transform 0.45s ease;
}

.capsule-scroll {
  position: absolute;
  left: 47%;
  bottom: 27%;
  width: 34%;
  height: 56%;
  transform: translate(-50%, 8%) scale(0.45);
  transform-origin: bottom center;
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.28s ease;
}

.scroll-roll {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64%;
  height: 44%;
  border-radius: 24px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #f6f0e4 0%, #d7c7af 100%);
  border: 1px solid rgba(140, 110, 76, 0.4);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
}

.scroll-paper-tip {
  position: absolute;
  left: 50%;
  bottom: 30%;
  width: 40%;
  height: 8%;
  border-radius: 4px 4px 0 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f8f3e7 0%, #e8dcc7 100%);
  border: 1px solid rgba(155, 126, 88, 0.28);
  border-bottom: none;
  transition: height 0.45s ease;
}

.overlay-note {
  position: relative;
  z-index: 1;
  width: min(78vw, 288px);
  height: min(42vh, 246px);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #fffdf8 0%, #f3ede2 100%);
  border: 1px solid rgba(196, 174, 145, 0.55);
  box-shadow:
    0 22px 52px rgba(8, 16, 30, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.45);
  transform-origin: 50% 18%;
  transition:
    transform 0.76s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.note-string {
  position: absolute;
  top: 2px;
  width: 82px;
  height: 2px;
  background: linear-gradient(90deg, #a06a33, #c58b46);
  transform-origin: center;
  transition:
    transform 0.45s ease,
    opacity 0.3s ease;
}

.note-string-left {
  left: calc(50% - 82px);
}

.note-string-right {
  left: 50%;
}

.note-knot {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eac489 0%, #b67a36 80%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.35s ease,
    opacity 0.3s ease;
}

.capsule-overlay.active .overlay-backdrop {
  opacity: 1;
}

.capsule-overlay.release-knot .overlay-capsule {
  transform: translate(-50%, -50%) scale(0.72);
}

.capsule-overlay.release-knot .capsule-artwork {
  transform: rotate(-4deg) translateY(-4px);
}

.capsule-overlay.release-knot .overlay-note {
  opacity: 1;
  transform: translateY(0) scale(0.46);
}

.capsule-overlay.release-knot .note-string-left {
  transform: translateX(-20px) rotate(-18deg);
}

.capsule-overlay.release-knot .note-string-right {
  transform: translateX(20px) rotate(18deg);
}

.capsule-overlay.release-knot .note-knot {
  transform: translateY(-10px) scale(0.6);
  opacity: 0;
}

.capsule-overlay.pull-scroll .capsule-scroll {
  opacity: 1;
  transform: translate(-50%, -46%) scale(1);
}

.capsule-overlay.pull-scroll .scroll-paper-tip {
  height: 46%;
}

.capsule-overlay.unfold-paper .overlay-capsule {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

.capsule-overlay.unfold-paper .overlay-note {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  border: none;
  padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(0) scale(1);
  background-image: url("./素材/背景底图/底图1.webp");
  background-size: 130%;
  background-position: center;
  background-repeat: no-repeat;
}

.capsule-overlay.show-page .overlay-backdrop {
  opacity: 0;
}

.capsule-overlay.show-page .overlay-note {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow: visible;
  padding: 14px 14px calc(10px + env(safe-area-inset-bottom));
}

.capsule-overlay.show-page .note-date {
  align-self: flex-end;
  flex-shrink: 0;
}

.note-date {
  align-self: flex-end;
  width: 84px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(11, 31, 67, 0.78);
  color: #f6f7fb;
  border-radius: 3px;
  text-align: center;
  padding: 6px 0 7px;
}

.note-date strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
}

.note-date span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.3px;
}

#capsule-note-time {
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.92;
}

.wisdom-card {
  position: relative;
  width: 100%;
  min-height: clamp(158px, 24vh, 210px);
  max-height: clamp(158px, 24vh, 210px);
  flex-shrink: 0;
  border-radius: 14px;
  padding: 16px 14px;
  background-image: url("./素材/思想家头像/亚里士多德.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(220, 200, 166, 0.45);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.wisdom-card--quote-long,
.wisdom-card--quote-xlong {
  background-position: 118% center;
}

.wisdom-card--quote-long::before,
.wisdom-card--quote-xlong::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(5, 16, 32, 0.52) 0%,
    rgba(5, 16, 32, 0.3) 54%,
    rgba(5, 16, 32, 0.02) 100%
  );
  pointer-events: none;
}

.wisdom-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 56%;
  color: #efe8dd;
  font-size: clamp(19px, 4.8vw, 30px);
  line-height: 1.75;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: pre-line;
}

.wisdom-quote--medium {
  max-width: 56%;
  font-size: clamp(18px, 4.45vw, 26px);
  line-height: 1.72;
  letter-spacing: 0.95px;
}

.wisdom-quote--long {
  max-width: 57%;
  font-size: clamp(16px, 3.95vw, 21px);
  line-height: 1.68;
  letter-spacing: 0.82px;
}

.wisdom-quote--xlong {
  max-width: 58%;
  font-size: clamp(13px, 3.35vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.68px;
}

.wisdom-story {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: clamp(220px, 30vh, 380px);
  border-radius: 12px;
  padding: 12px 14px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.capsule-overlay.show-page .wisdom-story {
  /* 固定高度：不隨內容長短變化，超出文字在框內捲動 */
  flex: none;
  height: clamp(420px, 38vh, 520px);
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  /* 加大內距讓文字與裝飾框邊緣保持距離 */
  padding: 24px 30px 26px 32px;
  overflow: hidden;
  isolation: isolate;
}

.capsule-overlay.show-page .wisdom-story-toolbar {
  padding-top: 2px;
  padding-left: 4px;
  margin-bottom: 6px;
}

.wisdom-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./素材/装饰元素/边框3.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.95;
  pointer-events: none;
}

.wisdom-story > * {
  position: relative;
  z-index: 1;
}

.wisdom-story-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.wisdom-story-toolbar h3 {
  margin:0;
  font-size: 20px;
  color: #38445b;
  font-weight: 500;
}

.capsule-insight-trigger {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 2px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 0;
  opacity: 0.92;
}

.capsule-insight-trigger:focus-visible {
  outline: 2px solid rgba(74, 123, 198, 0.65);
  outline-offset: 2px;
}

.capsule-insight-trigger:active {
  opacity: 0.75;
}

.capsule-insight-trigger img {
  display: block;
  width: clamp(36px, 9vw, 44px);
  height: clamp(36px, 9vw, 44px);
  object-fit: contain;
}

.capsule-insight-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.capsule-insight-modal[hidden] {
  display: none !important;
}

.capsule-insight-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.capsule-insight-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: min(72vh, 520px);
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border-radius: 14px;
  border: 1px solid rgba(170, 155, 131, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.capsule-insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(223, 214, 195, 0.85);
}

.capsule-insight-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #38445b;
}

.capsule-insight-close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}

.capsule-insight-body {
  padding: 14px 16px 18px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.65;
  color: #454d5a;
  -webkit-overflow-scrolling: touch;
}

.capsule-overlay.show-page .wisdom-story p {
  padding: 4px 12px 8px 8px;
}

.wisdom-story p {
  margin: 0;
  color: #454d5a;
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.58;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  touch-action: pan-y;
}

.wisdom-story p::-webkit-scrollbar {
  width: 6px;
}

.wisdom-story p::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(120, 126, 138, 0.38);
}

.wisdom-story p::selection {
  background: rgba(74, 123, 198, 0.26);
  color: #1f2a3d;
}

.capsule-story-select-confirm {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.capsule-story-select-confirm:active {
  opacity: 0.88;
}

.note-actions {
  width: 100%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.note-actions > button:not(.capsule-skip-series-btn) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.capsule-skip-series-btn {
  grid-column: 1 / -1;
  width: 100%;
  background: rgba(220, 90, 80, 0.08) !important;
  border-color: rgba(200, 80, 70, 0.35) !important;
  color: #b03a30 !important;
  font-size: 13px !important;
}

.capsule-long-source-panel {
  max-height: min(78vh, 640px);
}

.capsule-long-source-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 15px;
  line-height: 1.7;
  color: #454d5a;
}

/* 閱讀頁底欄：flex-shrink 0 確保按鈕不被壓縮，margin-top 控制框底與按鈕距離 */
.capsule-overlay.show-page .note-actions {
  flex-shrink: 0;
  margin-top: 0;
  padding-bottom: 4px;
}

.note-actions button {
  border: 1px solid rgba(170, 155, 131, 0.45);
  background: rgba(251, 246, 236, 0.5);
  border-radius: 999px;
  padding: 8px 0;
  font-size: 14px;
  color: #59616e;
}

.close-note {
  position: absolute;
  top: 14px;
  left: 14px;
  border: 1px solid rgba(223, 214, 195, 0.82);
  background: rgba(255, 253, 247, 0.92);
  color: #5a6069;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
}

.meteor-setting {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  background: #fafbff;
}

.meteor-setting h3 {
  margin: 0;
  font-size: 17px;
}

.setting-desc {
  margin: 8px 0 12px;
  font-size: 13px;
  color: #6b7280;
}

.setting-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #374151;
}

.setting-select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #ffffff;
}

.time-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.time-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 10px;
}

.time-item span {
  font-size: 13px;
  color: #4b5563;
}

.time-item input[type="time"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 14px;
  background: #ffffff;
}

.save-settings {
  margin-top: 14px;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  color: #ffffff;
  background: #2563eb;
}

.test-settings {
  margin-top: 8px;
  width: 100%;
  border: 1px solid #dbe4f3;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  color: #334155;
  background: #ffffff;
}

.setting-status {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 13px;
  color: #475569;
}

.setting-next {
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
}

.meteor-layer {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
  display: none;
}

.meteor-layer.active {
  display: block;
  pointer-events: auto;
  /* 低於智慧膠囊全層(30)：產品策略為「關閉膠囊後才播流星」，不在膠囊之上疊放 */
  z-index: 25;
}

.meteor-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(10, 18, 32, 0.78);
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(3px);
}

.meteor-layer.active .meteor-backdrop {
  opacity: 1;
}

.meteor-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.meteor-comet-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.meteor-shower-video-host .meteor-shower-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.projector-play-video {
  position: relative;
  z-index: 2;
  opacity: 0.98;
}

.projector-lit-screen {
  position: absolute;
  left: 14.5%;
  top: 31%;
  z-index: 8;
  width: 72%;
  height: 25.5%;
  border-radius: 2px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 42% 38%, #ffffff 0%, #fffdf0 54%, #f7ecc8 100%);
  box-shadow:
    0 0 18px rgba(255, 255, 240, 1),
    0 0 46px rgba(255, 235, 170, 0.82),
    0 0 90px rgba(255, 220, 110, 0.38),
    inset 0 0 20px rgba(255, 228, 150, 0.28);
  opacity: 0;
  transform: none;
  filter: blur(0.15px);
  animation: projector-screen-light-on 4.2s ease-in-out 1.5s forwards;
}

.projector-lit-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 34%, rgba(255, 255, 255, 0.16) 66%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.projector-rec-frame {
  position: absolute;
  inset: clamp(12px, 3.6vw, 28px) clamp(14px, 5.7vw, 34px);
  z-index: 12;
  pointer-events: none;
  color: rgba(235, 216, 174, 0.82);
  font-family:
    "Courier New",
    "Consolas",
    monospace;
  font-size: clamp(10px, 2.65vw, 12px);
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.42),
    0 0 7px rgba(255, 240, 190, 0.26);
  opacity: 0;
  animation: projector-rec-frame-in 1.2s ease 1.35s forwards;
}

.projector-rec-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 8px, rgba(0, 0, 0, 0.035) 8px 16px);
  opacity: 0.2;
  mix-blend-mode: screen;
}

.projector-rec-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 0 16px rgba(255, 255, 255, 0.2);
  opacity: 0.52;
}

.projector-rec-corner {
  position: absolute;
  width: clamp(72px, 26vw, 100px);
  height: clamp(72px, 26vw, 100px);
  border-color: rgba(246, 238, 214, 0.66);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.36));
}

.projector-rec-corner--tl {
  left: 0;
  top: 0;
  border-left: 1px solid;
  border-top: 1px solid;
}

.projector-rec-corner--tr {
  right: 0;
  top: 0;
  border-right: 1px solid;
  border-top: 1px solid;
}

.projector-rec-corner--bl {
  left: 0;
  bottom: 0;
  border-left: 1px solid;
  border-bottom: 1px solid;
}

.projector-rec-corner--br {
  right: 0;
  bottom: 0;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.projector-rec-mark {
  position: absolute;
  left: clamp(18px, 5.5vw, 28px);
  top: clamp(14px, 4.6vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: rgba(245, 230, 194, 0.9);
  font-weight: 600;
}

.projector-rec-mark i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d91f2f;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 8px rgba(217, 31, 47, 0.42);
  animation: projector-rec-dot 1.35s ease-in-out infinite;
}

.projector-rec-label,
.projector-rec-time,
.projector-rec-battery {
  position: absolute;
  z-index: 1;
}

.projector-rec-label--left {
  left: calc(clamp(72px, 26vw, 100px) * -0.52);
  top: 49%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

.projector-rec-label--right {
  right: clamp(8px, 2.5vw, 14px);
  top: clamp(54px, 17vw, 72px);
  transform: rotate(-90deg) translateY(50%);
  transform-origin: center;
}

.projector-rec-time {
  right: clamp(48px, 14vw, 72px);
  bottom: clamp(18px, 5vw, 26px);
}

.projector-rec-battery {
  right: clamp(18px, 5.8vw, 30px);
  bottom: clamp(17px, 4.8vw, 25px);
  display: inline-flex;
  gap: 2px;
  width: 28px;
  height: 13px;
  padding: 2px 4px 2px 3px;
  border: 1px solid rgba(235, 216, 174, 0.76);
  border-radius: 1px;
}

.projector-rec-battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 3px;
  height: 7px;
  border: 1px solid rgba(235, 216, 174, 0.72);
  border-left: 0;
}

.projector-rec-battery b {
  display: block;
  flex: 1;
  background: rgba(235, 216, 174, 0.78);
}

@keyframes projector-rec-frame-in {
  0% {
    opacity: 0;
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes projector-rec-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.42;
  }
}

@keyframes projector-screen-light-on {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(0.75);
  }
  15% {
    opacity: 0.72;
    filter: blur(3px) brightness(1.12);
  }
  24% {
    opacity: 1;
    filter: blur(0.15px) brightness(1.35);
  }
  42% {
    opacity: 0.9;
    filter: blur(0.25px) brightness(1.12);
  }
  62% {
    opacity: 1;
    filter: blur(0.12px) brightness(1.3);
  }
  100% {
    opacity: 0.96;
    filter: blur(0.15px) brightness(1.16);
  }
}

.meteor-streak {
  position: absolute;
  width: var(--meteor-width, 220px);
  height: var(--meteor-height, 5px);
  top: var(--meteor-top, 20vh);
  left: var(--meteor-left, 110%);
  opacity: 0;
  transform-origin: left center;
  transform: rotate(var(--meteor-angle, -58deg));
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.98) 22%,
    rgba(230, 248, 255, 0.72) 42%,
    rgba(200, 230, 255, 0.38) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow:
    0 0 10px 2px rgba(255, 255, 255, 0.55),
    0 0 22px 6px rgba(186, 220, 255, 0.45);
  animation: meteor-fly var(--meteor-duration, 2s) ease-out
    var(--meteor-delay, 0s) 1 forwards;
}

.meteor-streak::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
  box-shadow:
    0 0 10px 5px rgba(220, 245, 255, 1),
    0 0 22px 10px rgba(180, 220, 255, 0.65),
    0 0 36px 14px rgba(140, 200, 255, 0.35);
}

.meteor-hero {
  background: linear-gradient(
    90deg,
    rgba(255, 252, 235, 1) 0%,
    rgba(255, 230, 140, 0.99) 18%,
    rgba(255, 200, 80, 0.82) 38%,
    rgba(255, 180, 60, 0.42) 58%,
    rgba(255, 160, 40, 0) 100%
  );
  filter: brightness(1.38) saturate(1.18);
  box-shadow:
    0 0 28px rgba(255, 220, 140, 0.7),
    0 0 56px rgba(255, 195, 90, 0.45),
    0 0 88px rgba(255, 170, 60, 0.28);
  animation: meteor-fly var(--meteor-duration, 3.4s) linear
    var(--meteor-delay, 0s) 1 forwards;
}

.meteor-hero::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #fffef5 0%,
    #ffe566 45%,
    #ffb020 100%
  );
  box-shadow:
    0 0 12px 6px rgba(255, 240, 200, 1),
    0 0 28px 14px rgba(255, 200, 80, 0.9),
    0 0 52px 22px rgba(255, 170, 40, 0.55);
}

@keyframes meteor-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--meteor-angle, -58deg));
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-1 * var(--meteor-distance-x, 110vw)),
        var(--meteor-distance-y, 130vh)
      )
      rotate(var(--meteor-angle, -58deg));
  }
}

/* 智慧流星：中央草書金句 + 斷開式金色虛線（無框） */
.meteor-quote {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 600px);
  padding: 0 20px;
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  isolation: isolate;
  z-index: 10;
}

.meteor-layer.show-note .meteor-quote {
  visibility: visible;
  pointer-events: auto;
  z-index: 20;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote {
  left: 14.5%;
  top: 31%;
  width: 72%;
  height: 25.5%;
  padding: 10px 12px;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.meteor-quote-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  width: 100%;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-stack {
  width: 100%;
  height: 100%;
  display: block;
}

.meteor-quote-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-block {
  height: 100%;
  justify-content: center;
  gap: 0.35rem;
  overflow: hidden;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-inner {
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

/* 上下各一排「斷開」金線：多段 + 虛線 */
.meteor-quote-lines {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.55rem, 3vw, 1.1rem);
  width: 100%;
  max-width: 94%;
}

.meteor-quote-seg {
  display: block;
  height: 0;
  border: none;
  border-top: 1px dashed rgba(230, 200, 130, 0.82);
  box-shadow:
    0 0 5px rgba(255, 220, 150, 0.35),
    0 0 14px rgba(255, 185, 80, 0.22);
  flex: 1 1 auto;
  min-width: 2.5rem;
  max-width: 30%;
}

.meteor-quote-lines--bottom .meteor-quote-seg--short {
  max-width: 18%;
  min-width: 2rem;
  opacity: 0.75;
}

.meteor-quote-lines--bottom .meteor-quote-seg--long {
  max-width: 42%;
}

.meteor-layer.show-note .meteor-quote-seg {
  animation: meteor-gold-line-pulse 2.55s ease-in-out infinite;
}

@keyframes meteor-gold-line-pulse {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.82);
    border-top-color: rgba(200, 168, 95, 0.55);
  }

  50% {
    opacity: 1;
    filter: brightness(1.35);
    border-top-color: rgba(255, 236, 190, 0.95);
  }
}

.meteor-quote-inner {
  position: relative;
  padding: 0.25rem 0.15rem;
  min-height: 5.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meteor-note-text {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0.18em;
  font-family:
    "STKaiti",
    "Kaiti SC",
    "KaiTi",
    "BiauKai",
    "DFKai-SB",
    "FangSong",
    "STFangSong",
    "Noto Serif SC",
    serif;
  font-size: clamp(1.65rem, 6.2vw, 2.15rem);
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
  letter-spacing: 0.12em;
  color: #ffe97a;
  width: 100%;
  text-shadow:
    0 0 4px  rgba(255, 255, 180, 0.9),
    0 0 14px rgba(255, 210, 80, 0.85),
    0 0 30px rgba(255, 170, 40, 0.65),
    0 0 55px rgba(200, 120, 20, 0.42),
    0 0 90px rgba(140, 80, 0, 0.22);
}

.meteor-layer.meteor-layer--projector.show-note .meteor-note-text {
  max-height: 100%;
  overflow: hidden;
  font-size: var(--projector-quote-font-size, 0.96rem);
  line-height: 1.68;
  letter-spacing: 0.105em;
  color: #17130d;
  font-family:
    "霞鹜文楷",
    "LXGW WenKai",
    "HYKaiTi",
    "STKaiti",
    "Kaiti SC",
    "KaiTi",
    "Songti SC",
    "SimSun",
    "FangSong",
    "STFangSong",
    "Noto Serif SC",
    serif;
  font-weight: 500;
  text-shadow:
    0 0 0.35px rgba(18, 14, 8, 0.72),
    0 0.8px 0 rgba(255, 255, 255, 0.36),
    0 3px 7px rgba(80, 60, 25, 0.08);
  word-break: break-word;
  animation: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-east-asian: proportional-width;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-line {
  gap: 0.13em;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-unit {
  gap: 0;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-author {
  width: 100%;
  margin-top: 0.36em;
  padding-right: clamp(0.5rem, 7.5vw, 2.9rem);
  font-size: 0.9em;
  line-height: 1.35;
  letter-spacing: 0.12em;
  color: rgba(24, 18, 10, 0.76);
  justify-content: flex-end;
  opacity: 1;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-lines {
  display: none;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-note-actions {
  position: fixed;
  left: 50%;
  top: calc(31% + 25.5% + 14px);
  bottom: auto;
  transform: translateX(-50%);
  z-index: 30;
}

.meteor-layer.meteor-layer--projector.show-note .close-meteor {
  position: fixed;
  left: 50%;
  top: calc(31% + 25.5% + 64px);
  bottom: auto;
  transform: translateX(-50%);
  z-index: 30;
}

.meteor-quote-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.06em 0.02em;
  max-width: 100%;
}

.meteor-quote-unit {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.06em;
  white-space: nowrap;
}

.meteor-quote-char--nos {
  min-width: 0.42em;
}

.meteor-quote-line + .meteor-quote-line {
  margin-top: 0.3rem;
}

.meteor-quote-author {
  align-self: flex-end;
  justify-content: flex-end;
  padding-right: clamp(0.4rem, 5vw, 2.25rem);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  opacity: 0.95;
}

.meteor-layer.show-note .meteor-note-text {
  animation: meteor-text-glow-pulse 2.55s ease-in-out infinite;
}

@keyframes meteor-text-glow-pulse {
  0%,
  100% {
    text-shadow:
      0 0 3px rgba(255, 252, 200, 0.75),
      0 0 10px rgba(255, 205, 75, 0.68),
      0 0 22px rgba(255, 165, 40, 0.48),
      0 0 42px rgba(185, 115, 25, 0.28);
  }

  50% {
    text-shadow:
      0 0 5px rgba(255, 255, 220, 0.95),
      0 0 16px rgba(255, 220, 110, 0.92),
      0 0 34px rgba(255, 175, 55, 0.72),
      0 0 62px rgba(200, 125, 30, 0.45),
      0 0 88px rgba(120, 70, 10, 0.2);
  }
}

/* 初始狀態：暗、模糊、略下移 */
.meteor-quote-char {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.14em, 0);
  filter: blur(6px);
  color: rgba(255, 200, 60, 0.15);
  text-shadow: none;
  will-change: transform, opacity, filter, color, text-shadow;
}

/* 逐字迸發：金色光粒子（與字浮現節奏對齊） */
.meteor-layer.show-note .meteor-quote-char:not(.meteor-quote-char--nos)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: transparent;
  box-shadow:
    0 -15px 3px 0 rgba(255, 248, 210, 0.95),
    11px -11px 2px 0 rgba(255, 228, 150, 0.92),
    16px 0 2px 0 rgba(255, 205, 95, 0.88),
    11px 11px 2px 0 rgba(255, 190, 75, 0.85),
    0 15px 2px 0 rgba(255, 215, 120, 0.82),
    -11px 11px 2px 0 rgba(255, 235, 175, 0.88),
    -16px 0 2px 0 rgba(255, 240, 195, 0.9),
    -11px -11px 2px 0 rgba(255, 220, 130, 0.9),
    0 -24px 4px -1px rgba(255, 185, 60, 0.55),
    19px -19px 4px -1px rgba(255, 175, 50, 0.48),
    24px 0 4px -1px rgba(255, 165, 45, 0.45),
    19px 19px 4px -1px rgba(255, 195, 80, 0.42),
    0 24px 4px -1px rgba(255, 200, 90, 0.45),
    -19px 19px 4px -1px rgba(255, 210, 110, 0.48),
    -24px 0 4px -1px rgba(255, 225, 150, 0.5),
    -19px -19px 4px -1px rgba(255, 215, 100, 0.52);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.12);
  transform-origin: center center;
  animation: meteor-char-gold-sparks 0.62s cubic-bezier(0.22, 0.82, 0.35, 1) forwards;
  animation-delay: calc(var(--char-i, 0) * 0.038s + 0.48s);
}

@keyframes meteor-char-gold-sparks {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
    filter: blur(0);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.72);
    filter: blur(0.5px);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
    filter: blur(2px);
  }
}

/* show-note 後才觸發逐字動畫 */
.meteor-layer.show-note .meteor-quote-char {
  animation: meteor-char-gold-emerge 1.3s cubic-bezier(0.16, 0.04, 0.22, 1) forwards;
  animation-delay: calc(var(--char-i, 0) * 0.038s);
}

@keyframes meteor-char-gold-emerge {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.14em, 0);
    filter: blur(6px);
    color: rgba(255, 195, 50, 0.12);
    text-shadow: none;
  }

  /* 字從霧中探出，暖橙先亮 */
  38% {
    opacity: 0.82;
    transform: translate3d(0, 0.02em, 0);
    filter: blur(1.5px);
    color: #ffcc44;
    text-shadow:
      0 0 6px  rgba(255, 240, 140, 0.95),
      0 0 20px rgba(255, 190, 60,  0.8),
      0 0 42px rgba(220, 130, 20,  0.55);
  }

  /* 穩定落地，深金色帶燃燒暈 */
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    color: #ffe97a;
    text-shadow:
      0 0 3px  rgba(255, 255, 200, 0.92),
      0 0 12px rgba(255, 210, 80,  0.88),
      0 0 28px rgba(255, 165, 35,  0.68),
      0 0 52px rgba(195, 110, 10,  0.44),
      0 0 80px rgba(130,  70,  0,  0.24);
  }
}

/* 放映機幕布：覆蓋金色火花，改用黑字緩緩浮現（須排在金色規則之後） */
.meteor-layer.meteor-layer--projector.show-note .meteor-quote-char {
  opacity: 0;
  transform: translate3d(0, 0.08em, 0);
  filter: blur(4px);
  color: #17130d;
  text-shadow:
    0 0 0.35px rgba(18, 14, 8, 0.72),
    0 0.8px 0 rgba(255, 255, 255, 0.36),
    0 3px 7px rgba(80, 60, 25, 0.08);
  animation: projector-quote-char-fade-in 1.35s ease-out forwards;
  animation-delay: calc(var(--char-i, 0) * 0.022s + 0.45s);
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-char--nos {
  min-width: 0.48em;
}

.meteor-layer.meteor-layer--projector.show-note .meteor-quote-char:not(.meteor-quote-char--nos)::after {
  content: none;
  display: none;
  animation: none;
}

@keyframes projector-quote-char-fade-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.08em, 0);
    filter: blur(4px);
  }

  45% {
    opacity: 0.72;
    transform: translate3d(0, 0.02em, 0);
    filter: blur(1.4px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

.close-meteor {
  flex-shrink: 0;
  margin: 0;
  padding: 11px 28px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 95, 0.55);
  background: rgba(12, 22, 42, 0.88);
  color: rgba(255, 244, 220, 0.92);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1.45;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 236, 200, 0.12) inset,
    0 4px 18px rgba(0, 0, 0, 0.35);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  outline: none;
  outline-offset: 0;
}

.close-meteor::-moz-focus-inner {
  border: 0;
}

.close-meteor:hover,
.close-meteor:focus-visible {
  border-color: rgba(236, 210, 150, 0.85);
  color: #fffdf6;
  background: rgba(18, 32, 58, 0.92);
  outline: none;
}

.close-meteor:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .meteor-layer.show-note .meteor-quote-seg {
    animation: none;
    opacity: 0.75;
    filter: none;
  }

  .meteor-layer.show-note .meteor-note-text {
    animation: none;
  }

  .meteor-layer.show-note .meteor-quote-char {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    color: #ffe97a;
  }

  .meteor-layer.show-note .meteor-quote-char::after {
    display: none;
  }

  .meteor-layer.meteor-layer--projector.show-note .meteor-quote-char {
    color: #000000;
  }
}

.tab-bar {
  display: none;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 66px;
}

body.main-tab-bar-visible .tab-bar {
  display: flex;
  width: 100%;
}

.tab-bar .tab {
  flex: 1 1 0;
  min-width: 0;
}

.tab {
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px 8px;
}

.tab-icon {
  width: 31px;
  height: 31px;
  object-fit: contain;
  flex-shrink: 0;
}

.tab-label {
  line-height: 1.1;
}

.tab.active {
  color: var(--primary);
  font-weight: 600;
}

body.home-bg-active .tab {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

body.home-bg-active .tab.active {
  color: #ffffff;
  font-weight: 700;
}

/* 蘋果：牛頓式瞬間 — 沉墜、靜默、靈光乍現（層級低於語錄紙條，避免遮擋文字與按鈕） */
.apple-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  /* 苹果掉落动画不透明度：越接近 1 越实。
     WebP 已是真透明，預設 1；如想讓蘋果融入暗色場景，可在父層覆寫此變數。 */
  --apple-drop-video-opacity: 1;
}

.apple-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 90% at 50% 42%,
    rgba(25, 35, 70, 0.35) 0%,
    rgba(4, 8, 22, 0.72) 55%,
    rgba(2, 4, 14, 0.88) 100%
  );
  animation: apple-veil-mood 2.85s ease-in-out forwards;
}

@keyframes apple-veil-mood {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  78% {
    opacity: 0.38;
  }
  88% {
    opacity: 0.72;
  }
  100% {
    opacity: 0.55;
  }
}

.apple-enlighten-bloom {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(120vw, 520px);
  height: min(120vw, 520px);
  margin-left: calc(min(120vw, 520px) / -2);
  margin-top: calc(min(120vw, 520px) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle at 45% 42%,
    rgba(255, 255, 250, 0.95) 0%,
    rgba(255, 235, 180, 0.45) 18%,
    rgba(255, 200, 120, 0.22) 38%,
    rgba(180, 140, 255, 0.08) 58%,
    transparent 72%
  );
  filter: blur(2px);
  transform: scale(0);
  opacity: 0;
  animation: apple-enlighten-bloom 1.35s cubic-bezier(0.22, 1, 0.36, 1) 1.78s
    forwards;
  z-index: 2;
}

@keyframes apple-enlighten-bloom {
  0% {
    transform: scale(0.05);
    opacity: 0;
    filter: blur(8px);
  }
  28% {
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
    filter: blur(12px);
  }
}

.apple-rays {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 220vmin;
  height: 220vmin;
  margin-left: -110vmin;
  margin-top: -110vmin;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg 10deg,
    rgba(255, 252, 235, 0.14) 10deg 11deg
  );
  opacity: 0;
  animation: apple-rays-flash 1.1s ease-out 1.76s forwards;
  z-index: 2;
}

@keyframes apple-rays-flash {
  0% {
    opacity: 0;
    transform: scale(0.15) rotate(-6deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.55) rotate(4deg);
  }
}

.apple-rings {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 0;
  height: 0;
  z-index: 3;
}

.apple-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 230, 190, 0.55);
  box-shadow:
    0 0 20px rgba(255, 220, 160, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.15);
  opacity: 0;
  animation: apple-ring-expand 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(1.72s + var(--ring-i, 0) * 0.1s);
}

@keyframes apple-ring-expand {
  0% {
    transform: scale(0.2);
    opacity: 0.9;
  }
  100% {
    transform: scale(14);
    opacity: 0;
  }
}

.apple-sparkles {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 0;
  height: 0;
  z-index: 4;
}

.apple-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 230, 160, 0.6) 45%,
    transparent 70%
  );
  opacity: 0;
  transform: rotate(var(--spark-angle, 0deg)) translateY(0);
  animation: apple-spark-fly 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}

@keyframes apple-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(var(--spark-angle, 0deg)) translateY(0) scale(0.2);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--spark-angle, 0deg))
      translateY(calc(-1 * min(28vw, 140px))) scale(0.6);
  }
}

.apple-drop {
  position: absolute;
  top: 0;
  font-size: clamp(52px, 14vw, 72px);
  z-index: 5;
  transform: translate(-50%, -18vh) rotate(-6deg);
  animation: apple-fall-philosophy 1.95s cubic-bezier(0.33, 0.67, 0.28, 1)
    forwards;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.apple-drop--video {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: none;
  animation: none;
  font-size: 0;
  filter: none;
}

.apple-drop-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: var(--apple-drop-video-opacity, 0.9);
  pointer-events: none;
}

.apple-body {
  position: relative;
  display: inline-block;
}

.apple-body::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 25%;
  width: 30%;
  height: 20%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 255, 255, 0.85) 0%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: 1;
}

.apple-body::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: #6b4226;
  border-radius: 0 0 2px 2px;
}

@keyframes apple-fall-philosophy {
  0% {
    transform: translate(-50%, -18vh) rotate(-8deg);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25)) brightness(1);
  }
  52% {
    transform: translate(-50%, 44vh) translateX(6px) rotate(5deg);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.3)) brightness(1);
  }
  72% {
    transform: translate(-50%, 54.5vh) translateX(-3px) rotate(11deg);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)) brightness(0.92);
  }
  78% {
    transform: translate(-50%, 52.8vh) rotate(9deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)) brightness(1.08);
  }
  84% {
    transform: translate(-50%, 54.2vh) rotate(10deg);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4)) brightness(1);
  }
  100% {
    transform: translate(-50%, 53.5vh) rotate(9deg);
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.42)) brightness(1);
  }
}

.apple-idea {
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%) scale(0);
  font-size: clamp(44px, 12vw, 64px);
  z-index: 30;
  opacity: 0;
  animation: apple-idea-enlighten 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) 1.82s
    forwards;
  filter: drop-shadow(0 0 24px rgba(255, 220, 140, 0.9));
}

.apple-idea-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 120%;
  margin: -60% 0 0 -60%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 235, 160, 0.35) 35%,
    rgba(255, 200, 100, 0.12) 55%,
    transparent 70%
  );
  transform: scale(0);
  animation: apple-idea-aura-pop 0.9s ease-out 1.8s forwards;
  pointer-events: none;
}

.apple-idea-bulb {
  position: relative;
  z-index: 1;
  display: inline-block;
}

@keyframes apple-idea-aura-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes apple-idea-enlighten {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-18deg);
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent) blur(6px);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.15) rotate(4deg);
    opacity: 1;
    filter: drop-shadow(0 0 36px rgba(255, 230, 160, 1)) blur(0);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.96) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 210, 130, 0.85));
  }
}

/* 智慧流星子页 */
.wisdom-notes-meteor-hint {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: rgba(252, 249, 242, 0.75);
}

.meteor-layer.show-note .meteor-quote-stack,
.meteor-layer.show-note .meteor-note-actions,
.meteor-layer.show-note .close-meteor {
  position: relative;
  z-index: 2;
}

.meteor-note-actions {
  width: 100%;
  max-width: min(92vw, 600px);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* 勿讓按鈕撐滿整欄：格線上拉滿的 button 在部分瀏覽器會畫「矩形」焦點環，看起來像淡藍框包住藥丸 */
.meteor-note-actions button {
  flex: 0 1 min(28vw, 8.5rem);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(230, 200, 130, 0.55);
  background: rgba(30, 22, 10, 0.42);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  color: #f8ecd4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  outline: none;
  outline-offset: 0;
}

.meteor-analysis-content {
  white-space: pre-wrap;
}

.meteor-note-actions button::-moz-focus-inner {
  border: 0;
}

.meteor-note-actions button:focus,
.meteor-note-actions button:focus-visible {
  outline: none;
  box-shadow: none;
}

.meteor-note-actions button:active {
  opacity: 0.9;
}

/* 流星對話內所有按鈕：再壓一層，避免 WebView／系統瀏覽器仍畫預設焦點框 */
#meteor-note.meteor-quote .meteor-note-actions button,
#meteor-note.meteor-quote .close-meteor {
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

#meteor-note.meteor-quote .meteor-note-actions button:focus,
#meteor-note.meteor-quote .meteor-note-actions button:focus-visible,
#meteor-note.meteor-quote .close-meteor:focus,
#meteor-note.meteor-quote .close-meteor:focus-visible {
  outline: none;
}

.page[data-page="my-capsules"].active,
.page[data-page="saved-stories"].active,
.page[data-page="wisdom-notes"].active,
.page[data-page="login-days"].active,
.page[data-page="meteor"].active,
.page[data-page="thought-profile"].active,
.page[data-page="about-us"].active {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  min-height: auto;
}

.page[data-page="saved-stories"].active,
.page[data-page="wisdom-notes"].active,
.page[data-page="login-days"].active,
.page[data-page="thought-profile"].active {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.mine-subpage-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mine-subpage-panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

/* 與首頁 .tab-bar 同構：底欄單行 + 圖標上、文字下 */
.mine-inner-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  min-height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(229, 231, 235, 0.9);
  box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.08);
  z-index: 80;
}

.mine-inner-tabbar .mine-inner-tab {
  flex: 1 1 0;
  min-width: 0;
}

.mine-inner-tabbar .tab-icon {
  width: 29px;
  height: 29px;
  object-fit: contain;
  opacity: 0.72;
  filter: saturate(0.55) contrast(0.95);
}

.mine-inner-tabbar .tab-label {
  line-height: 1.1;
  font-size: 12px;
  white-space: nowrap;
}

.mine-inner-tab {
  margin: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  min-height: 0;
  padding: 7px 2px 9px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mine-inner-tab.is-active {
  color: var(--primary);
  font-weight: 700;
}

.mine-inner-tab.is-active .tab-icon {
  opacity: 1;
  filter: saturate(1.25) contrast(1.05);
}

body.mine-inner-nav-view .page.active[data-page="wisdom-notes"] {
  background: #f1e7d7 url("./素材/背景底图/小记页背景.webp") center top / cover no-repeat;
}

body.mine-inner-nav-view .page[data-page="wisdom-notes"].active .mine-subpage-shell {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

body.mine-inner-nav-view .page[data-page="wisdom-notes"].active .mine-inner-tabbar--notes {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: calc(100% - 28px);
  height: 42px;
  min-height: 42px;
  margin: 8px auto 10px;
  padding: 3px;
  border: 1px solid rgba(126, 99, 61, 0.36);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 3px 9px rgba(82, 59, 35, 0.07);
}

body.mine-inner-nav-view
  .page[data-page="wisdom-notes"].active
  .mine-inner-tabbar--notes
  .mine-inner-tab {
  position: relative;
  height: 100%;
  padding: 0 8px;
  border-radius: 999px;
  color: #4c3f35;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  gap: 0;
}

body.mine-inner-nav-view
  .page[data-page="wisdom-notes"].active
  .mine-inner-tabbar--notes
  .mine-inner-tab
  + .mine-inner-tab {
  border-left: 1px solid rgba(126, 99, 61, 0.22);
}

body.mine-inner-nav-view
  .page[data-page="wisdom-notes"].active
  .mine-inner-tabbar--notes
  .mine-inner-tab.is-active {
  border-left-color: transparent;
  background:
    linear-gradient(180deg, rgba(32, 54, 91, 0.94), rgba(19, 43, 77, 0.98));
  color: #f2d891;
  box-shadow:
    inset 0 0 0 1px rgba(245, 213, 142, 0.22),
    0 2px 7px rgba(28, 43, 72, 0.2);
}

body.mine-inner-nav-view
  .page[data-page="wisdom-notes"].active
  .mine-inner-tabbar--notes
  .mine-inner-tab.is-active
  .tab-label::before,
body.mine-inner-nav-view
  .page[data-page="wisdom-notes"].active
  .mine-inner-tabbar--notes
  .mine-inner-tab.is-active
  .tab-label::after {
  content: "✦";
  color: #e9cf78;
  font-size: 9px;
  margin: 0 4px;
  vertical-align: 0.08em;
}

body.mine-inner-nav-view
  .page[data-page="wisdom-notes"].active
  .mine-subpage-panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 6px max(18px, env(safe-area-inset-bottom, 0px));
  background: transparent;
}

.wisdom-notes-hero {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 154px;
  padding: calc(34px + env(safe-area-inset-top, 0px)) 22px 24px;
  overflow: hidden;
  text-align: center;
  color: #f3ead7;
  background: transparent;
}

.wisdom-notes-hero::before {
  display: none;
}

.wisdom-notes-hero::after {
  display: none;
}

.wisdom-notes-hero h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "STXingkai", "FZYaoti", "KaiTi", "STKaiti", serif;
  font-size: clamp(42px, 12vw, 58px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.12em;
  text-shadow: 0 3px 9px rgba(0, 0, 0, 0.32);
}

.wisdom-notes-hero p {
  position: relative;
  z-index: 1;
  margin: 9px 0 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: rgba(240, 224, 188, 0.9);
}

.page[data-page="wisdom-notes"] .my-capsules-back-row {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 3;
  height: 46px;
  padding: 0;
  background: transparent;
}

.page[data-page="wisdom-notes"] .my-capsules-back {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: transparent;
}

.page[data-page="wisdom-notes"] .my-capsules-back-icon {
  width: 30px;
  height: 30px;
  filter: brightness(0) saturate(100%) invert(86%) sepia(30%) saturate(520%) hue-rotate(344deg) brightness(101%) contrast(90%);
}

.wisdom-notes-page-card {
  margin: 0;
  padding: 0 max(4px, env(safe-area-inset-left)) 20px
    max(4px, env(safe-area-inset-right));
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.page[data-page="wisdom-notes"] {
  --wisdom-note-card-bg: #f4efe4;
  --wisdom-note-card-radius: 18px;
}

.wisdom-notes-compose {
  position: relative;
  z-index: 2;
  min-height: 228px;
  margin: 14px -10px 22px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 10px 16px rgba(74, 53, 30, 0.13));
  -webkit-tap-highlight-color: transparent;
}

.wisdom-notes-compose::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("./素材/组件底图/小记框1.webp") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

.wisdom-notes-compose-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 228px;
  padding: 34px 58px 30px 84px;
}

.wisdom-notes-compose-quill {
  position: absolute;
  z-index: 2;
  right: max(10px, 2vw);
  top: -40px;
  width: 48px;
  height: 58px;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.12));
  transform: rotate(-18deg);
  transform-origin: 65% 92%;
  opacity: 0.92;
}

.wisdom-notes-quill-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wisdom-notes-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.wisdom-notes-compose .wisdom-notes-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #4a3322;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(100, 74, 45, 0.24);
}

.wisdom-notes-compose .wisdom-notes-label::after {
  content: "";
  width: 36px;
  height: 22px;
  background: url("./素材/icon图标/羽毛笔.webp") center / contain no-repeat;
  transform: rotate(-10deg);
  opacity: 0.72;
}

.wisdom-note-input {
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  min-height: 88px;
  box-sizing: border-box;
  color: #000000;
}

.wisdom-notes-compose .wisdom-note-input {
  min-height: 96px;
  margin: 0;
  padding: 8px 0;
  line-height: 1.7;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #5c4a36;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 16px;
  resize: none;
  outline: none;
  caret-color: #6b4b2c;
  -webkit-appearance: none;
}

.wisdom-notes-compose .wisdom-note-input::placeholder {
  color: rgba(111, 93, 70, 0.46);
}

.wisdom-notes-compose .wisdom-note-input:focus {
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
}

.wisdom-notes-compose:focus-within {
  filter: drop-shadow(0 10px 16px rgba(74, 53, 30, 0.13));
}

.wisdom-notes-compose .wisdom-note-save-btn {
  justify-self: end;
  min-width: 112px;
  margin-top: -4px;
  border: 1px solid rgba(212, 190, 139, 0.34);
  border-radius: 4px;
  padding: 9px 18px;
  color: #f3e5bd;
  background:
    linear-gradient(180deg, rgba(28, 49, 68, 0.96), rgba(10, 28, 45, 0.98));
  box-shadow:
    0 5px 12px rgba(36, 30, 24, 0.18),
    inset 0 0 0 1px rgba(238, 221, 174, 0.08);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 17px;
}

.wisdom-note-save-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--primary);
  cursor: pointer;
}

.wisdom-note-save-btn:active {
  opacity: 0.9;
}

.wisdom-notes-list-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 4px 12px;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 24px;
  font-weight: 600;
  color: #23364d;
  letter-spacing: 0.04em;
}

.wisdom-notes-list-title::before {
  content: "❧";
  color: rgba(104, 89, 60, 0.52);
  font-size: 22px;
}

.wisdom-notes-list-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background:
    linear-gradient(90deg, rgba(91, 80, 61, 0.42), transparent);
}

.wisdom-notes-list {
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wisdom-notes-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-radius: 10px;
  border: 1px dashed var(--line);
}

.wisdom-note-item {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: 120px;
  padding: 22px 20px 24px;
  border: 1px solid rgba(126, 99, 61, 0.14);
  border-radius: var(--wisdom-note-card-radius, 18px);
  background: var(--wisdom-note-card-bg, #f4efe4);
  box-shadow: 0 8px 18px rgba(61, 45, 28, 0.1);
  overflow: visible;
}

.wisdom-note-item::before {
  display: none;
}

.wisdom-note-item > * {
  position: relative;
  z-index: 1;
}

.wisdom-note-item--with-source {
  padding-bottom: 24px;
}

.wisdom-note-item--paper-2,
.wisdom-note-item--paper-3,
.wisdom-note-item--paper-4 {
  min-height: 120px;
  padding: 22px 20px 24px;
  border-radius: var(--wisdom-note-card-radius, 18px);
}

.wisdom-note-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.wisdom-note-item-time {
  flex: 1;
  min-width: 0;
  font-family: "Times New Roman", "Songti SC", serif;
  font-size: 13px;
  color: rgba(85, 72, 58, 0.78);
}

.wisdom-note-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.wisdom-note-item-edit,
.wisdom-note-item-delete {
  position: static;
  flex-shrink: 0;
  margin: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(96, 78, 56, 0.72);
  font-size: 0;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wisdom-note-item-edit svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  fill: currentColor;
}

.wisdom-note-item-delete::before {
  content: "⌫";
  font-size: 18px;
  line-height: 28px;
}

.wisdom-note-item-edit:active,
.wisdom-note-item-delete:active {
  opacity: 0.7;
}

.wisdom-note-item-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 8px;
}

.wisdom-note-item-editor-input {
  width: 100%;
  min-height: 88px;
  max-height: none;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(126, 99, 61, 0.28);
  border-radius: 12px;
  box-sizing: border-box;
  background: rgba(255, 252, 244, 0.92);
  color: #2d241b;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 16px;
  line-height: 1.55;
  resize: none;
  overflow: hidden;
  field-sizing: content;
}

.wisdom-note-item-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wisdom-note-item-editor-cancel,
.wisdom-note-item-editor-save {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wisdom-note-item-editor-cancel {
  border: 1px solid rgba(154, 117, 76, 0.28);
  background: rgba(255, 252, 244, 0.9);
  color: rgba(60, 44, 33, 0.82);
}

.wisdom-note-item-editor-save {
  border: 0;
  background:
    linear-gradient(180deg, rgba(28, 49, 68, 0.96), rgba(10, 28, 45, 0.98));
  color: #f3e5bd;
}

.wisdom-note-item-editor-cancel:active,
.wisdom-note-item-editor-save:active {
  opacity: 0.88;
}

.wisdom-note-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.wisdom-note-delete-modal[hidden] {
  display: none !important;
}

.wisdom-note-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(42, 30, 20, 0.42);
  cursor: pointer;
}

.wisdom-note-delete-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 320px);
  min-height: 188px;
  padding: 22px 20px 28px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(170, 155, 131, 0.35);
  box-shadow: 0 16px 48px rgba(86, 61, 38, 0.2);
}

.wisdom-note-delete-modal-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(60, 44, 33, 0.92);
}

.wisdom-note-delete-modal-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(90, 61, 34, 0.78);
}

.wisdom-note-delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 36px;
  padding-top: 8px;
}

.wisdom-note-delete-modal-cancel,
.wisdom-note-delete-modal-confirm {
  padding: 9px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.wisdom-note-delete-modal-cancel {
  border: 1px solid rgba(154, 117, 76, 0.28);
  background: rgba(255, 252, 244, 0.9);
  color: rgba(60, 44, 33, 0.82);
}

.wisdom-note-delete-modal-confirm {
  border: 1.5px solid rgba(214, 175, 96, 0.72);
  background: linear-gradient(180deg, #17345b 0%, #0f2240 100%);
  color: #f0e4c8;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(15, 34, 64, 0.18);
}

.wisdom-note-delete-modal-cancel:active {
  background: rgba(232, 196, 137, 0.18);
}

.wisdom-note-delete-modal-confirm:active {
  background: linear-gradient(180deg, #122a4a 0%, #0b1b33 100%);
}

.wisdom-note-item-text {
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 17px;
  line-height: 1.55;
  color: #2d241b;
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.wisdom-note-source-excerpt {
  margin: 8px 0 0;
  color: rgba(67, 55, 42, 0.76);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.wisdom-note-item--today {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wisdom-note-today-label {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(180, 83, 9, 0.08);
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
}

.wisdom-note-today-question {
  margin: 0;
  color: #1f2937;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
  white-space: pre-wrap;
  word-break: break-word;
}

.wisdom-note-today-original {
  font-weight: 500;
}

.wisdom-note-today-answer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wisdom-note-today-followup {
  font-weight: 500;
  color: #374151;
}

.wisdom-note-today-followup-time {
  margin: 0;
  color: rgba(85, 72, 58, 0.68);
  font-family: "Times New Roman", "Songti SC", serif;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.wisdom-note-today-answer-btn,
.wisdom-note-today-save,
.wisdom-note-today-cancel {
  align-self: flex-start;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.wisdom-note-today-answer-btn,
.wisdom-note-today-save {
  color: #ffffff;
  border-color: rgba(180, 83, 9, 0.2);
  background:
    linear-gradient(135deg, rgba(217, 119, 6, 0.95), rgba(180, 83, 9, 0.92));
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.18);
}

.wisdom-note-today-cancel {
  color: #4b5563;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(248, 250, 252, 0.92);
}

.wisdom-note-today-answer-btn {
  margin-top: 2px;
}

.wisdom-note-today-answer-btn::before {
  content: "+";
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
}

.wisdom-note-today-answer-btn:hover,
.wisdom-note-today-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(180, 83, 9, 0.22);
}

.wisdom-note-today-cancel:hover {
  background: rgba(241, 245, 249, 0.98);
}

.wisdom-note-today-answer-btn:active,
.wisdom-note-today-save:active,
.wisdom-note-today-cancel:active {
  transform: translateY(0);
  opacity: 0.88;
}

.wisdom-note-today-answer-btn:focus-visible,
.wisdom-note-today-save:focus-visible,
.wisdom-note-today-cancel:focus-visible {
  outline: 2px solid rgba(217, 119, 6, 0.35);
  outline-offset: 2px;
}

.wisdom-note-today-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wisdom-note-today-editor[hidden] {
  display: none !important;
}

.wisdom-note-today-answer-input {
  width: 100%;
  min-height: 92px;
  max-height: none;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: #111827;
  background: rgba(255, 255, 255, 0.92);
  resize: none;
  overflow: hidden;
  field-sizing: content;
}

.wisdom-note-today-editor-actions {
  display: flex;
  gap: 8px;
}

.wisdom-note-source-excerpt {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 12px;
  line-height: 1.5;
  color: #a3a3a3;
  font-weight: 400;
  white-space: pre-wrap;
  word-break: break-word;
}

.wisdom-note-source-btn {
  position: static;
  align-self: flex-end;
  width: 36px;
  height: 36px;
  margin: 4px 0 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: transparent;
}

.wisdom-note-source-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.wisdom-note-source-btn:active {
  opacity: 0.82;
}

.page[data-page="wisdom-notes"] .wisdom-note-source-excerpt {
  margin: 8px 0 0;
  padding-top: 0;
  border-top: none;
  color: rgba(67, 55, 42, 0.76);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.page[data-page="wisdom-notes"] .wisdom-note-source-btn {
  position: static;
  align-self: flex-end;
  margin-top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.page[data-page="wisdom-notes"] .wisdom-note-source-btn img {
  width: 20px;
  height: 20px;
  opacity: 0.72;
}

.page[data-page="wisdom-notes"] .wisdom-note-item-edit,
.page[data-page="wisdom-notes"] .wisdom-note-item-delete {
  position: static;
  transform: none;
  color: rgba(83, 67, 48, 0.62);
}

/* 膠囊／流星小記彈窗（須高於播放中的 .meteor-layer.active，否則無法輸入） */
.capsule-note-composer-layer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px
    max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.capsule-note-composer-layer.is-open {
  display: flex;
}

.capsule-note-composer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(2px);
}

.capsule-note-composer-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  max-height: min(85vh, 520px);
  overflow: auto;
  padding: 18px 16px 16px;
  border-radius: 14px;
  background: #fffdf8;
  border: 1px solid rgba(200, 182, 155, 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

.capsule-note-composer-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.capsule-note-composer-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.capsule-note-composer-input {
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.capsule-note-composer-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.capsule-note-composer-cancel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
}

.capsule-note-composer-save {
  border: 1px solid rgba(214, 175, 96, 0.45);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #f0e4c8;
  background: linear-gradient(180deg, #17345b 0%, #0f2240 100%);
  cursor: pointer;
}

.saved-stories-page-card {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

body.my-capsules-page-active .page[data-page="my-capsules"],
body.saved-stories-page-active .page[data-page="saved-stories"] {
  color: #1f2f53;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  padding: 0;
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.my-capsules-page-active .page[data-page="my-capsules"]
  > .my-capsules-back-row,
body.saved-stories-page-active .page[data-page="saved-stories"]
  > .my-capsules-back-row {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 12px;
  z-index: 6;
  height: 38px;
  padding: 0;
}

body.my-capsules-page-active .page[data-page="my-capsules"]
  .my-capsules-back,
body.saved-stories-page-active .page[data-page="saved-stories"]
  .my-capsules-back {
  width: 38px;
  height: 38px;
}

.saved-stories-hero {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 24px 12px;
  text-align: center;
}

.saved-stories-hero-title {
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(36px, 10vw, 50px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #243a68;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.saved-stories-hero-subtitle {
  margin: 15px 0 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(55, 65, 81, 0.78);
}

.saved-stories-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 26px;
  margin-top: 15px;
  max-width: min(292px, calc(100vw - 74px));
  padding: 2px 14px;
  border: 1px solid rgba(188, 154, 102, 0.38);
  background: transparent;
  color: #5f4b35;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: none;
}

body.my-capsules-page-active .mine-subpage-shell,
body.saved-stories-page-active .mine-subpage-shell {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

body.saved-stories-page-active .mine-inner-tabbar--saved {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 28px);
  height: 42px;
  min-height: 42px;
  margin: 14px auto 10px;
  padding: 3px;
  border: 1px solid rgba(126, 99, 61, 0.36);
  border-radius: 999px;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 3px 9px rgba(82, 59, 35, 0.07);
}

body.saved-stories-page-active .mine-inner-tabbar--saved .mine-inner-tab {
  position: relative;
  height: 100%;
  padding: 0 8px;
  border-radius: 999px;
  color: #4c3f35;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

body.saved-stories-page-active .mine-inner-tabbar--saved .mine-inner-tab + .mine-inner-tab {
  border-left: 1px solid rgba(126, 99, 61, 0.22);
}

body.saved-stories-page-active .mine-inner-tabbar--saved .mine-inner-tab.is-active {
  border-left-color: transparent;
  background:
    linear-gradient(180deg, rgba(32, 54, 91, 0.94), rgba(19, 43, 77, 0.98));
  color: #f2d891;
  box-shadow:
    inset 0 0 0 1px rgba(245, 213, 142, 0.22),
    0 2px 7px rgba(28, 43, 72, 0.2);
}

body.saved-stories-page-active
  .mine-inner-tabbar--saved
  .mine-inner-tab.is-active
  .tab-label::before,
body.saved-stories-page-active
  .mine-inner-tabbar--saved
  .mine-inner-tab.is-active
  .tab-label::after {
  content: "✦";
  color: #e9cf78;
  font-size: 9px;
  margin: 0 5px;
  vertical-align: 0.08em;
}

body.my-capsules-page-active .mine-subpage-panels,
body.saved-stories-page-active .mine-subpage-panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 6px 26px;
  background: transparent;
}

.saved-stories-list {
  margin: 0;
  padding: 18px max(14px, env(safe-area-inset-left)) 24px
    max(10px, env(safe-area-inset-right));
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.saved-stories-page-active .saved-stories-list {
  padding: 0;
  gap: 10px;
}

body.my-capsules-page-active .my-capsules-list {
  padding: 0;
  gap: 10px;
}

.saved-stories-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-radius: 10px;
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.28);
  border: 1px dashed rgba(100, 116, 139, 0.38);
}

body.saved-stories-page-active .saved-stories-empty {
  padding: 24px 26px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: url("./素材/组件底图/收藏页框.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 106% auto;
  color: rgba(46, 55, 76, 0.72);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 14px;
  line-height: 1.8;
}

body.my-capsules-page-active .my-capsules-empty {
  padding: 24px 26px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: url("./素材/组件底图/收藏页框.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 106% auto;
  color: rgba(46, 55, 76, 0.72);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 14px;
  line-height: 1.8;
}

/* ── 收藏卡片：非收藏页的默认样式 ── */
.saved-stories-item {
  padding: 14px 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  list-style: none;
}

/* ── 收藏页激活后：新卡片布局 ── */
body.saved-stories-page-active .saved-stories-item {
  position: relative;
  display: block;
  box-sizing: border-box;
  height: 216px;
  min-height: 216px;
  max-height: 216px;
  padding: 34px 50px 34px 48px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: url("./素材/组件底图/收藏页框.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 106% auto;
  box-shadow: none;
  cursor: default;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

body.saved-stories-page-active .saved-stories-item:active {
  opacity: 0.85;
}

/* 书签角标 */
.ss-bookmark {
  display: none;
}

body.saved-stories-page-active .ss-bookmark {
  display: block;
  position: absolute;
  top: 10px;
  right: 32px;
  width: 28px;
  height: 40px;
  background: linear-gradient(175deg, #1d2f5a 0%, #25397c 100%);
  border-radius: 0 0 3px 3px;
  z-index: 2;
}

body.saved-stories-page-active .ss-bookmark::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 9px;
  background:
    linear-gradient(to bottom right, #25397c 50%, transparent 50%) 0 0 / 50% 100% no-repeat,
    linear-gradient(to bottom left, #25397c 50%, transparent 50%) 100% 0 / 50% 100% no-repeat;
}

body.saved-stories-page-active .ss-bookmark::after {
  content: "✦";
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  color: #f2d87c;
  font-size: 10px;
}

/* 哲学家头像圆圈 */
.ss-avatar {
  display: none;
}

body.saved-stories-page-active .ss-avatar {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(180, 148, 80, 0.48);
  background: rgba(240, 225, 190, 0.4);
  margin-top: 0;
}

body.saved-stories-page-active .ss-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
}

.ss-avatar-initial {
  display: none;
}

body.saved-stories-page-active .ss-avatar--text .ss-avatar-initial {
  display: block;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 20px;
  font-weight: 700;
  color: #4a3820;
}

body.saved-stories-page-active .ss-avatar:not(.ss-avatar--text) .ss-avatar-initial {
  display: none;
}

/* 右侧文字区 */
.ss-card-text {
  display: none;
}

body.saved-stories-page-active .ss-card-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  gap: 7px;
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-right: 16px;
}

.ss-title {
  display: none;
}

body.saved-stories-page-active .ss-title {
  display: block;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 18px;
  font-weight: 700;
  color: #1d2e54;
  line-height: 1.42;
  letter-spacing: 0.03em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.saved-stories-page-active .ss-title::after {
  content: " ✦";
  color: #b28a38;
  font-size: 10px;
  vertical-align: middle;
}

.ss-source {
  display: none;
}

body.saved-stories-page-active .ss-source {
  display: block;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 13px;
  color: rgba(100, 78, 48, 0.7);
  line-height: 1.45;
}

.ss-preview {
  display: none;
}

body.saved-stories-page-active .ss-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 3px 0 0;
  font-size: 14px;
  color: rgba(48, 58, 80, 0.7);
  line-height: 1.72;
}

body.saved-stories-page-active .saved-stories-item--meteor .ss-title {
  -webkit-line-clamp: 1;
}

body.saved-stories-page-active .saved-stories-item--meteor .ss-preview {
  -webkit-line-clamp: 2;
}

body.saved-stories-page-active .saved-stories-item--chat .ss-title {
  -webkit-line-clamp: 1;
}

body.saved-stories-page-active .saved-stories-item--chat .ss-preview {
  -webkit-line-clamp: 2;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ss-footer {
  display: none;
}

body.saved-stories-page-active .ss-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 7px;
  transform: none;
}

.ss-date {
  display: none;
}

body.saved-stories-page-active .ss-date {
  display: block;
  font-size: 11px;
  color: rgba(100, 80, 50, 0.52);
}

.ss-view-full {
  display: none;
}

body.saved-stories-page-active .ss-view-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(37, 58, 102, 0.78);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.saved-stories-page-active .ss-view-full:active {
  opacity: 0.65;
}

.saved-stories-item-delete {
  flex-shrink: 0;
  margin: 0;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b45309;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.saved-stories-page-active .saved-stories-item-delete {
  color: rgba(140, 90, 30, 0.58);
  font-size: 11px;
  padding: 2px 4px;
}

.saved-stories-item-delete:active {
  opacity: 0.7;
}

/* ── 收藏详情浮窗 ── */
.ss-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: flex-end;
}

.ss-detail-overlay.is-open {
  display: flex;
}

body.ss-detail-open {
  overflow: hidden;
  touch-action: none;
}

.ss-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 38, 0.56);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ss-detail-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(172deg, #fdf8ee 0%, #f8edcf 100%);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 36px rgba(16, 26, 58, 0.24);
  animation: ss-slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ss-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ss-detail-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(30, 46, 84, 0.1);
  color: #2a3a60;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ss-detail-close:active {
  background: rgba(30, 46, 84, 0.2);
}

.ss-detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 22px max(22px, env(safe-area-inset-bottom));
}

.ss-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-right: 32px;
}

.ss-detail-avatar {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2.5px solid rgba(180, 148, 80, 0.5);
  background: rgba(240, 225, 190, 0.45) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-detail-avatar--text {
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 24px;
  font-weight: 700;
  color: #4a3820;
}

.ss-detail-hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ss-detail-title {
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 20px;
  font-weight: 700;
  color: #1a2a50;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.ss-detail-source {
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 13px;
  color: rgba(100, 78, 48, 0.75);
}

.ss-detail-date {
  font-size: 11px;
  color: rgba(100, 80, 50, 0.48);
}

.ss-detail-quote {
  margin: 0 0 18px;
  padding: 13px 16px;
  background: rgba(30, 46, 84, 0.05);
  border-left: 3px solid rgba(178, 138, 56, 0.55);
  border-radius: 0 8px 8px 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 16px;
  color: #263552;
  line-height: 1.68;
  quotes: none;
}

.ss-detail-quote:empty {
  display: none;
}

.ss-detail-story-section,
.ss-detail-insight-section {
  margin-bottom: 18px;
}

.ss-detail-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(100, 80, 50, 0.52);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(180, 148, 80, 0.2);
}

.ss-detail-story {
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 15px;
  line-height: 1.82;
  color: #263450;
}

.ss-detail-insight {
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 14px;
  line-height: 1.72;
  color: #364060;
  padding: 12px 16px;
  background: rgba(240, 220, 170, 0.28);
  border-radius: 8px;
  border: 1px solid rgba(180, 148, 80, 0.18);
}

.my-capsules-back-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 8px 2px max(4px, env(safe-area-inset-left));
  margin: 0;
  background: transparent;
}

.page[data-page="my-capsules"].active > .my-capsules-back-row,
.page[data-page="meteor"].active > .my-capsules-back-row {
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.page[data-page="my-capsules"].active > .my-capsules-back-row .my-capsules-back,
.page[data-page="meteor"].active > .my-capsules-back-row .my-capsules-back {
  height: 34px;
}

body.mine-inner-nav-view .page[data-page="saved-stories"].active
  > .my-capsules-back-row,
body.mine-inner-nav-view .page[data-page="wisdom-notes"].active
  > .my-capsules-back-row {
  flex-shrink: 0;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

body.mine-inner-nav-view .page[data-page="wisdom-notes"].active
  > .my-capsules-back-row {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 5;
  height: 46px;
  padding: 0;
  background: transparent;
}

body.mine-inner-nav-view .page[data-page="wisdom-notes"].active
  > .my-capsules-back-row
  .my-capsules-back {
  width: 46px;
  height: 46px;
}

.my-capsules-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.my-capsules-back:active {
  opacity: 0.65;
}

.my-capsules-back-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.my-capsules-page-card {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.my-capsules-list {
  margin: 0;
  padding: 0 max(10px, env(safe-area-inset-left)) 20px
    max(10px, env(safe-area-inset-right));
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.my-capsules-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 6.5vw, 34px) clamp(22px, 7vw, 40px)
    clamp(46px, 10vw, 56px);
  border-radius: 14px;
  border: none;
  background-color: transparent;
  background-image: url("./素材/组件底图/板块2.webp");
  background-position: center;
  /* 整張板塊圖即外框視覺，鋪滿 li 邊界 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  overflow: hidden;
}

body.my-capsules-page-active .my-capsules-item {
  display: block;
  box-sizing: border-box;
  height: 216px;
  min-height: 216px;
  max-height: 216px;
  padding: 42px 50px 34px 48px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: url("./素材/组件底图/收藏页框.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 106% auto;
  box-shadow: none;
  cursor: default;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

body.my-capsules-page-active .my-capsules-item::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 32px;
  width: 28px;
  height: 40px;
  background: linear-gradient(175deg, #1d2f5a 0%, #25397c 100%);
  border-radius: 0 0 3px 3px;
  z-index: 2;
}

body.my-capsules-page-active .my-capsules-item::after {
  content: "✦";
  position: absolute;
  top: 31px;
  right: 42px;
  color: #f2d87c;
  font-size: 10px;
  z-index: 3;
}

.my-capsules-item-body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(34em, 100%);
  margin: 0 auto;
  padding: 4px 2px clamp(8px, 2vh, 14px);
  text-align: center;
}

body.my-capsules-page-active .my-capsules-item-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  gap: 7px;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 16px 0 0;
  text-align: left;
}

.my-capsules-story-link {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 6vw, 40px);
  transform: translateX(-50%);
  z-index: 2;
  font-size: 12px;
  font-weight: 500;
  color: #b8860b;
  text-shadow: 0 0 6px rgba(255, 252, 245, 0.9);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

body.my-capsules-page-active .my-capsules-story-link {
  left: auto;
  right: 50px;
  bottom: 34px;
  transform: none;
  color: rgba(37, 58, 102, 0.78);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  text-shadow: none;
}

.my-capsules-story-link:active {
  opacity: 0.75;
}

.my-capsules-date {
  display: block;
  font-size: 12px;
  color: #475569;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

body.my-capsules-page-active .my-capsules-date {
  order: 4;
  margin: auto 0 0;
  padding-top: 7px;
  font-size: 11px;
  color: rgba(100, 80, 50, 0.52);
}

.my-capsules-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 10px;
  line-height: 1.35;
}

body.my-capsules-page-active .my-capsules-title {
  order: 1;
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 18px;
  font-weight: 700;
  color: #1d2e54;
  line-height: 1.42;
  letter-spacing: 0.03em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.my-capsules-page-active .my-capsules-title::after {
  content: " ✦";
  color: #b28a38;
  font-size: 10px;
  vertical-align: middle;
}

.my-capsules-quote-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 6px;
}

.my-capsules-quote {
  margin: 0;
  font-size: 13px;
  color: #334155;
  line-height: 1.6;
}

body.my-capsules-page-active .my-capsules-quote {
  order: 2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 3px 0 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 14px;
  color: rgba(48, 58, 80, 0.7);
  line-height: 1.72;
}

.my-capsules-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-radius: 10px;
  border: 1px dashed var(--line);
}

.my-capsules-item-missing {
  border-style: dashed;
}

.my-capsules-missing-msg {
  margin: 8px 0 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
}

/* 我的膠囊：檔案頁視覺 */
body.my-capsules-page-active .page[data-page="my-capsules"] {
  color: #192946;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
}

body.my-capsules-page-active .page[data-page="my-capsules"]
  > .my-capsules-back-row {
  top: max(18px, env(safe-area-inset-top));
  left: 22px;
  height: 46px;
}

body.my-capsules-page-active .page[data-page="my-capsules"]
  .my-capsules-back {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(247, 241, 224, 0.58);
  box-shadow:
    0 0 0 1px rgba(81, 68, 48, 0.16),
    0 6px 18px rgba(55, 47, 36, 0.08);
}

body.my-capsules-page-active .my-capsules-back-icon {
  width: 25px;
  height: 25px;
  filter: sepia(0.32) saturate(0.72) brightness(0.82);
}

.my-capsules-hero {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: calc(68px + env(safe-area-inset-top, 0px)) 28px 4px;
  text-align: center;
}

.my-capsules-hero-title {
  margin: 0;
  font-family: "STZhongsong", "STSong", "SimSun", "Songti SC", serif;
  font-size: clamp(42px, 12.5vw, 62px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #162847;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 24px rgba(36, 48, 68, 0.12);
}

.my-capsules-hero-subtitle {
  margin: 14px 0 0;
  color: rgba(74, 58, 42, 0.74);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.16em;
}

.my-capsules-hero-subtitle::before,
.my-capsules-hero-subtitle::after {
  content: "✦";
  margin: 0 8px;
  color: rgba(171, 130, 58, 0.82);
  font-size: 10px;
  vertical-align: 0.12em;
}

.my-capsules-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  left: 50%;
  box-sizing: border-box;
  width: min(calc(100vw - 8px), 900px);
  min-height: 124px;
  margin: 22px 0 0;
  padding: 18px 52px;
  transform: translateX(-50%);
  background-image: url("./素材/组件底图/胶囊页框3.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: none;
  filter: drop-shadow(0 8px 14px rgba(68, 53, 35, 0.1));
}

.my-capsules-stats::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  width: 1px;
  background: rgba(133, 104, 68, 0.22);
}

.my-capsules-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 10px;
  align-items: center;
  justify-self: center;
  align-self: center;
  justify-content: start;
  width: max-content;
  min-width: 0;
  color: #1b2b49;
}

.my-capsules-stat:nth-child(2) {
  transform: translateX(-12px);
}

.my-capsules-stat-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}

.my-capsules-stat-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.my-capsules-stat-label {
  grid-area: label;
  color: rgba(69, 58, 43, 0.72);
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.my-capsules-stat strong {
  grid-area: value;
  color: #162847;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

body.my-capsules-page-active .mine-subpage-shell {
  padding: 0 0 max(16px, env(safe-area-inset-bottom));
}

body.my-capsules-page-active .mine-subpage-panels {
  gap: 15px;
  padding: 0 0 26px;
  margin-top: -18px;
}

body.my-capsules-page-active .my-capsules-list {
  padding: 0 0 20px;
  gap: 15px;
}

body.my-capsules-page-active .my-capsules-item {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: 260px;
  max-height: 260px;
  padding: 0;
  background-image: url("./素材/组件底图/胶囊页框1.webp");
  background-size: 100% 100% !important;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 12px rgba(70, 55, 34, 0.1));
}

body.my-capsules-page-active .my-capsules-item::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 42px;
  z-index: 3;
  display: block;
  width: 56px;
  height: 98px;
  background-image: url("./素材/装饰元素/书签.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(33, 25, 18, 0.18));
}

body.my-capsules-page-active .my-capsules-item:nth-child(even)::before {
  display: block;
}

body.my-capsules-page-active .my-capsules-item::after {
  display: none;
}

body.my-capsules-page-active .my-capsules-item-body {
  position: absolute;
  top: 70px;
  right: 50px;
  bottom: 112px;
  left: 54px;
  gap: 5px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

body.my-capsules-page-active .my-capsules-date {
  order: 0;
  margin: 0;
  padding: 0;
  color: rgba(93, 72, 45, 0.78);
  font-size: 12px;
  letter-spacing: 0.04em;
}

body.my-capsules-page-active .my-capsules-title {
  font-size: 16px;
  line-height: 1.28;
  color: #172845;
  letter-spacing: 0.04em;
  -webkit-line-clamp: 1;
}

body.my-capsules-page-active .my-capsules-quote {
  -webkit-line-clamp: 1;
  margin-top: 1px;
  color: rgba(47, 50, 58, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

body.my-capsules-page-active .my-capsules-story-link {
  right: 36px;
  top: 142px;
  bottom: auto;
  width: 162px;
  height: 45px;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  color: transparent;
  background-image: url("./素材/装饰元素/按键.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  box-shadow: none;
  text-align: center;
}

body.my-capsules-page-active
  .my-capsules-item:nth-child(even)
  .my-capsules-story-link {
  background-image: url("./素材/装饰元素/按键.webp");
}

body.my-capsules-page-active .my-capsules-empty {
  margin-top: 18px;
  min-height: 120px;
  background-image: url("./素材/组件底图/胶囊页框1.webp");
  background-size: 100% 100%;
}

@media (max-width: 420px) {
  .my-capsules-hero {
    padding-left: 18px;
    padding-right: 18px;
  }

  .my-capsules-stats {
    width: min(calc(100vw - 8px), 390px);
    min-height: 118px;
    padding: 18px 26px;
  }

  .my-capsules-stat {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon label"
      "icon value";
    column-gap: 8px;
    row-gap: 0;
    text-align: left;
    justify-self: center;
    justify-content: start;
    width: max-content;
  }

  .my-capsules-stat:nth-child(2) {
    transform: translateX(-10px);
  }

  .my-capsules-stat-icon {
    margin: 0;
    width: 40px;
    height: 40px;
  }

  .my-capsules-stat-label {
    font-size: 11px;
  }

  .my-capsules-stat strong {
    font-size: 20px;
  }

  body.my-capsules-page-active .mine-subpage-panels {
    padding-left: 0;
    padding-right: 0;
  }

  body.my-capsules-page-active .my-capsules-item {
    height: 248px;
    max-height: 248px;
    padding: 0;
  }

  body.my-capsules-page-active .my-capsules-item + .my-capsules-item {
    margin-top: -72px;
  }

  body.my-capsules-page-active .my-capsules-item-body {
    top: 66px;
    right: 42px;
    bottom: 108px;
    left: 46px;
  }

  body.my-capsules-page-active .my-capsules-title {
    font-size: 15px;
  }

  body.my-capsules-page-active .my-capsules-date {
    font-size: 11px;
  }

  body.my-capsules-page-active .my-capsules-quote {
    font-size: 14px;
    line-height: 1.4;
  }

  body.my-capsules-page-active .my-capsules-story-link {
    right: 30px;
    top: 137px;
    bottom: auto;
    width: 148px;
    height: 42px;
    min-width: 0;
    padding-inline: 0;
  }

  body.my-capsules-page-active .my-capsules-item::before {
    top: 22px;
    right: 34px;
    width: 50px;
    height: 88px;
  }
}

/* 我的膠囊 · 故事浮窗 */
#wisdom-note-source-modal {
  z-index: 86;
}

/* 入学任务 · 任务纸条弹窗 */
.newbie-task-modal {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 14px
    max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.newbie-task-modal.is-open {
  display: flex;
}

.newbie-task-modal[hidden] {
  display: none !important;
}

.newbie-task-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(12, 20, 36, 0.52);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.newbie-task-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  margin: 0 auto;
}

.newbie-task-modal__paper {
  position: relative;
  width: 100%;
  aspect-ratio: 1086 / 1448;
  box-sizing: border-box;
  background: url("./素材/组件底图/任务纸条.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 36px rgba(20, 30, 48, 0.22));
}

.newbie-task-modal__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(19.8% - 30px);
  margin: 0;
  text-align: center;
  font-family: "STZhongsong", "STSong", "SimSun", serif;
  font-size: clamp(24px, 6.8vw, 30px);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #1c3152;
  line-height: 1;
  pointer-events: none;
}

.newbie-task-modal__list {
  list-style: none;
  margin: 0;
  padding: 4px 2px 10px;
  position: absolute;
  left: 13.5%;
  right: 10.5%;
  top: 28%;
  bottom: 18.5%;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 2.6vw, 12px);
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 137, 88, 0.45) transparent;
}

.newbie-task-modal__list::-webkit-scrollbar {
  width: 4px;
}

.newbie-task-modal__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(168, 137, 88, 0.45);
}

.newbie-task-modal__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-height: clamp(28px, 7vw, 34px);
}

.newbie-task-modal__label {
  margin: 0;
  padding: 0.15em 0 0;
  border: none;
  background: transparent;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: clamp(16px, 4.4vw, 18px);
  color: #4a5568;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: left;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.newbie-task-modal__label.is-done,
.newbie-task-modal__item.is-done .newbie-task-modal__label {
  color: rgba(74, 85, 104, 0.72);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(90, 70, 48, 0.72);
}

/* 剛完成任務自動彈窗時短暫標藍；手動打開入學任務時不會出現 */
.newbie-task-modal__label.is-just-done,
.newbie-task-modal__item.is-just-done .newbie-task-modal__label {
  color: #2f6fed;
  text-decoration-color: rgba(47, 111, 237, 0.55);
}

.newbie-task-modal__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.newbie-task-modal__check.is-checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d4b06a, #8a6838 78%);
  transform: translate(-50%, -50%);
}

.newbie-task-modal__check:focus-visible {
  outline: 2px solid rgba(134, 104, 57, 0.45);
  outline-offset: 1px;
  border-radius: 50%;
}

.newbie-task-modal__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(8.8% + 7px);
  height: 5.5%;
  z-index: 3;
  pointer-events: none;
}

.newbie-task-modal__text-btn {
  position: absolute;
  top: 50%;
  left: calc(26.5% + 15px);
  border: none;
  padding: 0;
  background: transparent;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: clamp(14px, 3.8vw, 16px);
  letter-spacing: 0.12em;
  line-height: 1;
  color: #5a4630;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}

.newbie-task-modal__text-btn--confirm {
  left: auto;
  right: calc(26.5% + 17px);
  transform: translate(50%, -50%);
  color: #fff8eb;
}

.newbie-task-modal__text-btn:active {
  opacity: 0.82;
}

.newbie-task-modal__text-btn:focus-visible {
  outline: 2px solid rgba(134, 104, 57, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

.my-capsules-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px
    max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.my-capsules-modal.is-open {
  display: flex;
}

.my-capsules-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
}

.my-capsules-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  max-height: min(78vh, 620px);
  margin: 0 auto;
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom));
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.my-capsules-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  cursor: pointer;
}

.my-capsules-modal-title {
  margin: 0 56px 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.my-capsules-modal-section-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--muted);
}

.my-capsules-modal-story {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  line-height: 1.65;
  color: #334155;
}

.my-capsules-modal-content-section {
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid rgba(180, 148, 80, 0.2);
}

.my-capsules-modal-content-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.my-capsules-modal-content-title {
  margin: 0 0 10px;
  color: rgba(100, 80, 50, 0.68);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.my-capsules-modal-quote {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(178, 138, 56, 0.55);
  border-radius: 0 8px 8px 0;
  background: rgba(30, 46, 84, 0.05);
  color: #263552;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 16px;
  line-height: 1.68;
}

.my-capsules-modal-story-body,
.my-capsules-modal-insight {
  color: #263450;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 15px;
  line-height: 1.82;
}

.my-capsules-modal-insight {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(240, 220, 170, 0.28);
  border: 1px solid rgba(180, 148, 80, 0.18);
  color: #364060;
}

/* 智慧小記「查看原文」彈窗：引用片段用淺灰，與標題／一般故事區分 */
#wisdom-note-source-excerpt.my-capsules-modal-story {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #a3a3a3;
  font-weight: 400;
  white-space: pre-wrap;
  word-break: break-word;
}

.subpage-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.subpage-back {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 10px;
  cursor: pointer;
}

a.subpage-back {
  text-decoration: none;
  display: inline-block;
}

.subpage-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

/* 智慧流星設定：與智慧小記等子頁一致的米紙底、金線意、深藍字 */
.meteor-page-card {
  margin: 12px max(12px, env(safe-area-inset-left)) 24px
    max(12px, env(safe-area-inset-right));
  padding: 18px 16px 20px;
  background: rgba(252, 249, 242, 0.96);
  border: 1px solid rgba(214, 197, 170, 0.5);
  border-radius: 16px;
  box-shadow:
    0 2px 12px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset;
  position: relative;
  z-index: 1;
}

.page[data-page="meteor"] .group-desc {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(186, 149, 79, 0.38);
  font-family: "STKaiti", "Kaiti SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(62, 54, 42, 0.82);
  letter-spacing: 0.04em;
}

.page[data-page="meteor"] .setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  flex-wrap: wrap;
}

.page[data-page="meteor"] .setting-item .setting-label {
  flex: 1 1 40%;
  min-width: 7em;
}

.page[data-page="meteor"] .setting-item label,
.page[data-page="meteor"] .setting-label {
  font-family: "STKaiti", "Kaiti SC", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2a3548;
  letter-spacing: 0.06em;
}

.page[data-page="meteor"] .setting-select {
  flex: 1 1 48%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(200, 182, 155, 0.75);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: #1e293b;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.page[data-page="meteor"] .time-list {
  display: grid;
  gap: 10px;
  margin: 4px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(186, 149, 79, 0.35);
}

.page[data-page="meteor"] .time-item {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  align-items: center;
  gap: 10px;
}

.page[data-page="meteor"] .time-item span {
  font-family: "STKaiti", "Kaiti SC", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(42, 53, 72, 0.88);
  letter-spacing: 0.04em;
}

.page[data-page="meteor"] .time-item input[type="time"] {
  width: 100%;
  border: 1px solid rgba(200, 182, 155, 0.75);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
  background: rgba(255, 253, 248, 0.98);
  box-sizing: border-box;
}

.page[data-page="meteor"] .setting-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

@media (min-width: 380px) {
  .page[data-page="meteor"] .setting-actions {
    flex-direction: row;
    align-items: stretch;
  }
}

.page[data-page="meteor"] .save-settings {
  flex: 1;
  min-height: 46px;
  border: none;
  border-radius: 12px;
  padding: 11px 14px;
  font-family: "STKaiti", "Kaiti SC", "PingFang SC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fffef8;
  background: linear-gradient(165deg, #2d4a7c 0%, #1e3a5f 45%, #152a45 100%);
  box-shadow:
    0 2px 10px rgba(15, 35, 62, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  cursor: pointer;
}

.page[data-page="meteor"] .save-settings:active {
  opacity: 0.92;
  transform: scale(0.99);
}

.page[data-page="meteor"] .test-settings {
  flex: 1;
  min-height: 46px;
  border: 1px solid rgba(186, 149, 79, 0.55);
  border-radius: 12px;
  padding: 11px 14px;
  font-family: "STKaiti", "Kaiti SC", "PingFang SC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #3d3428;
  background: rgba(255, 251, 240, 0.95);
  box-shadow: 0 1px 4px rgba(62, 48, 28, 0.08);
  cursor: pointer;
}

.page[data-page="meteor"] .test-settings:active {
  opacity: 0.92;
  transform: scale(0.99);
}

.page[data-page="meteor"] .setting-status {
  min-height: 20px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(214, 197, 170, 0.35);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(62, 72, 88, 0.9);
}

.page[data-page="meteor"] .setting-next {
  margin: 8px 0 0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(100, 90, 72, 0.78);
  letter-spacing: 0.02em;
}

/* 累计登录：无顶栏，避免 mine-subpage 的 52px 空行把日历挤没 */
body.login-days-page-active .top-bar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-bottom: none;
}

body.login-days-page-active.mine-subpage-view:not(.main-tab-bar-visible) .app,
body.login-days-page-active .app,
body.login-days-page-active .app.app--headerless {
  grid-template-rows: 1fr auto !important;
}

body.login-days-page-active .content {
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

/* 累计登录 · 日历页 */
.login-days-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0px));
}

.login-days-calendar-card,
.login-days-detail-card {
  border: 1px solid rgba(217, 201, 176, 0.55);
  border-radius: 20px;
  background: rgba(255, 252, 246, 0.92);
  box-shadow: 0 12px 28px rgba(86, 61, 38, 0.1);
}

.login-days-calendar-card {
  padding: 16px;
}

.login-days-detail-card {
  margin-top: 14px;
  padding: 16px;
}

.login-days-header {
  margin-bottom: 12px;
}

.login-days-header h3,
.login-days-detail-header h3 {
  margin: 0;
  color: #243c5e;
  font-size: 20px;
  line-height: 1.25;
}

.login-days-header p,
.login-days-detail-header p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.login-calendar-modal {
  z-index: 72;
}

.login-calendar-modal-panel {
  width: min(100%, 360px);
  max-height: min(85vh, 520px);
}

.login-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}

.login-cal-nav-btn {
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid rgba(217, 201, 176, 0.65);
  border-radius: 10px;
  background: rgba(255, 252, 246, 0.9);
  color: #243c5e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.login-cal-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.login-cal-month-label {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.login-cal-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.login-cal-legend-icon {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.login-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 6px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
}

.login-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  padding: 2px 0 4px;
}

.login-cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 4px 2px 5px;
  border-radius: 10px;
  background: rgba(248, 246, 241, 0.85);
  border: 1px solid rgba(214, 197, 170, 0.35);
  box-sizing: border-box;
  font: inherit;
  cursor: pointer;
}

.login-cal-day--empty {
  min-height: 44px;
  background: transparent;
  border-color: transparent;
}

.login-cal-day--today {
  border-color: rgba(180, 138, 78, 0.65);
  box-shadow: 0 0 0 1px rgba(180, 138, 78, 0.25);
}

.login-cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  line-height: 1.2;
}

.login-cal-day--visited .login-cal-day-num {
  color: #243c5e;
}

.login-cal-day-icon {
  display: block;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  object-fit: contain;
}

.login-cal-day--visited {
  background: linear-gradient(
    160deg,
    rgba(255, 251, 235, 0.95),
    rgba(232, 244, 252, 0.75)
  );
  border-color: rgba(180, 138, 78, 0.45);
}

.login-cal-day--selected {
  background: rgba(36, 60, 94, 0.92);
  border-color: rgba(36, 60, 94, 0.95);
  box-shadow: 0 10px 18px rgba(36, 60, 94, 0.22);
}

.login-cal-day--selected .login-cal-day-num {
  color: #fffaf0;
}

.login-cal-day--selected .login-cal-day-icon {
  filter: invert(1) brightness(1.8);
}

.login-day-detail-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.login-day-section {
  display: grid;
  gap: 8px;
}

.login-day-section h4 {
  margin: 0;
  color: #8a5f2a;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.login-day-record {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(248, 246, 241, 0.82);
  border: 1px solid rgba(214, 197, 170, 0.35);
}

.login-day-record strong {
  color: #243c5e;
  font-size: 15px;
  line-height: 1.35;
}

.login-day-record-meta {
  color: #8a6a46;
  font-size: 12px;
}

.login-day-record p,
.login-day-empty {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

.login-day-empty {
  padding: 16px;
  border-radius: 14px;
  background: rgba(248, 246, 241, 0.72);
  text-align: center;
}

.page[data-page="about-us"] .subpage-toolbar {
  background: transparent;
  border-bottom: none;
}

.page[data-page="about-us"] .about-us-content {
  margin: 8px 16px 24px;
  padding: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(42, 34, 24, 0.92);
}

.page[data-page="about-us"] .about-us-content p {
  margin: 0 0 14px;
}

.page[data-page="about-us"] .about-us-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   智慧印记
   ========================================================================== */

body.wisdom-imprint-page-active::before {
  background-image: url("./素材/背景底图/智慧印记背景.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: none;
}

body.wisdom-imprint-page-active .content {
  padding: 0;
  background: transparent;
  overflow: hidden;
}

/* 智慧印记：无底栏，全高内容 */
body.wisdom-imprint-page-active .app.app--headerless {
  grid-template-rows: 1fr;
}

body.wisdom-imprint-page-active .tab-bar {
  display: none !important;
}

body.wisdom-imprint-page-active .page.active[data-page="wisdom-imprint"] {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.wi-page {
  --wi-ink: #1a2b3c;
  --wi-ink-soft: rgba(26, 43, 60, 0.7);
  --wi-muted: rgba(90, 104, 118, 0.82);
  --wi-serif: var(--home-serif, "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif);
  --wi-sans: var(--home-sans, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif);
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 18px 18px;
  color: var(--wi-ink);
  container-type: inline-size;
  container-name: wi-page;
}

/* 标题区：设计稿无独立返回栏，返回叠在左上角 */
.wi-hero {
  position: relative;
  margin-top: 30px;
  padding: 8px 0 6px;
  min-height: 72px;
}

.wi-back {
  position: absolute;
  left: -6px;
  /* 标题整体下移 30px，返回键保持原位 */
  top: -26px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.5);
  cursor: pointer;
}

.wi-back__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.8;
}

.wi-hero__text {
  padding: 2px 38% 0 28px;
}

.wi-hero__title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wi-hero__title {
  margin: 0;
  font-family: var(--wi-serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wi-ink);
  line-height: 1.1;
}

.wi-hero__quill {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.wi-hero__sub {
  margin: 8px 0 0;
  font-family: var(--wi-serif);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--wi-ink-soft);
  line-height: 1.4;
}

/* 框1：保持当前宽度，上下再拉长（累计 +100） */
.wi-summary {
  position: relative;
  width: calc(100% + 60px);
  margin-left: -30px;
  margin-right: -30px;
  margin-top: 4px;
  margin-bottom: 10px;
  aspect-ratio: auto;
  /* 内容区宽 = 100cqi - 36px padding，框宽 +40；高度累计 +100 */
  height: calc((100cqi + 4px) / 3.5 + 100px);
  min-height: 208px;
  box-sizing: border-box;
}

.wi-summary__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 素材上下留白很大，直接拉伸可见框线，视觉高度增加约 20px */
  transform: scaleY(1.18);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}

.wi-summary__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 5% 12px 30%;
  box-sizing: border-box;
  transform: scale(0.85);
  transform-origin: 70% 50%;
}

.wi-summary__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  align-items: end;
}

.wi-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.wi-stat__label {
  font-family: var(--wi-sans);
  font-size: 12px;
  line-height: 1.15;
  color: var(--wi-muted);
  white-space: nowrap;
}

.wi-stat__value {
  font-family: var(--wi-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--wi-ink);
}

.wi-summary__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wi-progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(26, 43, 60, 0.12);
  overflow: hidden;
}

.wi-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #1a2b3c;
  transition: width 0.35s ease;
}

.wi-progress-label {
  margin: 0;
  font-family: var(--wi-sans);
  font-size: 13px;
  color: var(--wi-muted);
  letter-spacing: 0.04em;
}

/* 分类：七项均分，小图标在上、文字在下 */
.wi-cats {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  width: calc(100% + 20px);
  padding: 2px 0 8px;
  /* 抵消框1素材底部透明留白，连同后续内容整体上移 */
  margin: -42px -10px 0;
  overflow: visible;
}

.wi-cat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0 6px;
  border: none;
  background: transparent;
  color: var(--wi-muted);
  cursor: pointer;
  position: relative;
}

.wi-cat__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  display: block;
  opacity: 0.78;
  filter: none;
}

.wi-cat__label {
  font-family: var(--wi-sans);
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.wi-cat.is-active {
  color: var(--wi-ink);
}

.wi-cat.is-active .wi-cat__icon {
  opacity: 1;
}

.wi-cat.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--wi-ink);
  transform: translateX(-50%);
}

.wi-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 16px;
  /* 框2：左右再各加 10px */
  margin-left: -73px;
  margin-right: -73px;
  width: calc(100% + 146px);
  max-width: none;
  box-sizing: border-box;
}

.wi-list-empty {
  margin: 24px 8px;
  text-align: center;
  font-size: 14px;
  color: var(--wi-muted);
}

/* 素材多为超大画布 + 居中图形，用裁切容器放大到视觉正确尺寸 */
.wi-crop {
  position: relative;
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}

.wi-crop__img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
}

.wi-crop__img--landscape {
  width: 1536px;
  height: 1024px;
}

.wi-crop__img--portrait {
  width: 1024px;
  height: 1536px;
}

/*
 * 内容框：框2 背景；比例与设计稿一致（约 2.9:1）
 * 长宽恢复为减少间距前那版（加宽列表 + cover）
 */
.wi-card {
  position: relative;
  width: 100%;
  aspect-ratio: 2.9 / 1;
  min-height: 132px;
  height: auto;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
  background-color: transparent;
  background-image: url("./素材/组件底图/智慧印记框2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.wi-card + .wi-card {
  /* 抵消框2素材上下透明留白，不改变卡片长宽 */
  margin-top: -36px;
}

.wi-card__body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  /* 左空 51px：文字与左图标整体右移，右印章不动 */
  grid-template-columns: 51px 58px minmax(0, 1fr) 62px;
  align-items: center;
  column-gap: 14px;
  padding: 18px 26px 18px 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.wi-card__badge {
  position: relative;
  grid-column: 2;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  margin: 0 auto;
}

.wi-crop--badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
}

.wi-crop--badge .wi-crop__img--landscape {
  transform: translate(-50%, -50%) scale(0.081);
}

.wi-card.is-locked .wi-crop--badge {
  filter: grayscale(0.3) saturate(0.75);
  opacity: 0.88;
}

.wi-crop--dot,
.wi-card__status-dot {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px rgba(26, 43, 60, 0.16));
}

.wi-crop--dot .wi-crop__img--portrait {
  transform: translate(-50%, -52%) scale(0.032);
}

.wi-card__main {
  grid-column: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  padding-right: 4px;
}

.wi-card__title {
  margin: 0;
  font-family: var(--wi-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--wi-ink);
  line-height: 1.25;
}

.wi-card__desc {
  margin: 0;
  font-family: var(--wi-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--wi-muted);
}

.wi-card__date {
  margin-top: 2px;
  font-family: var(--wi-sans);
  font-size: 11px;
  color: rgba(110, 122, 134, 0.7);
  letter-spacing: 0.02em;
}

.wi-card__progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 4px;
  width: 100%;
  max-width: 160px;
}

.wi-card__progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(26, 43, 60, 0.12);
  overflow: hidden;
}

.wi-card__progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #1a2b3c;
}

.wi-card__progress-count {
  font-family: var(--wi-sans);
  font-size: 11px;
  color: var(--wi-muted);
}

.wi-crop--stamp,
.wi-card__stamp {
  grid-column: 4;
  width: 56px;
  height: 56px;
  justify-self: center;
  overflow: hidden;
  opacity: 0.9;
  transform: translateX(-60px);
}

.wi-crop--stamp .wi-crop__img--portrait {
  transform: translate(-50%, -50%) scale(0.104);
  filter: contrast(1.12) saturate(1.15);
}

.wi-crop--stamp.is-unlocked .wi-crop__img--portrait {
  transform: translate(-50%, -50%) scale(0.098) rotate(-14deg);
  filter: contrast(1.18) saturate(1.25);
}

.wi-crop--stamp.is-locked .wi-crop__img--portrait {
  transform: translate(-50%, -50%) scale(0.112);
  filter: contrast(1.2) saturate(0.9);
  opacity: 0.9;
}

@media (max-width: 360px) {
  .wi-hero__title {
    font-size: 28px;
  }

  .wi-summary__body {
    padding-left: 28%;
    padding-right: 4%;
  }

  .wi-stat__value {
    font-size: 17px;
  }

  .wi-stat__label {
    font-size: 9px;
  }

  .wi-cat__icon {
    width: 28px;
    height: 28px;
  }

  .wi-cat__label {
    font-size: 10px;
  }

  .wi-card__body {
    grid-template-columns: 51px 50px minmax(0, 1fr) 52px;
    column-gap: 10px;
    padding: 14px 18px;
  }

  .wi-card__badge,
  .wi-crop--badge {
    width: 44px;
    height: 44px;
  }

  .wi-crop--badge .wi-crop__img--landscape {
    transform: translate(-50%, -50%) scale(0.069);
  }

  .wi-crop--stamp,
  .wi-card__stamp {
    width: 48px;
    height: 48px;
  }

  .wi-card__title {
    font-size: 15px;
  }
}

/* ==========================================================================
   发现页入口
   ========================================================================== */

.page[data-page="discover"] {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

body.discover-page-active .content {
  padding: 0;
  background: transparent;
}

body.discover-page-active .app {
  grid-template-rows: 52px 1fr auto;
}

body.discover-page-active .app.app--headerless {
  grid-template-rows: 1fr auto;
}

body.discover-page-active .top-bar {
  position: relative;
  height: auto;
  z-index: 2;
  background: rgba(250, 246, 238, 0.58);
  border-bottom-color: rgba(200, 182, 155, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.discover-page-active .tab-bar {
  background: rgba(250, 246, 238, 0.62);
  border-top-color: rgba(200, 182, 155, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.discover-page-active .page[data-page="discover"].active,
body.discover-page-active .page[data-page="library"].active {
  min-height: 100%;
}

.page[data-page="discover"].active,
.page[data-page="library"].active {
  display: block;
}

.discover-shell {
  min-height: 100%;
  padding: 0 16px 28px;
  color: #3b3028;
}

.discover-header {
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
}

.discover-eyebrow {
  margin: 0 0 4px;
  color: rgba(128, 84, 24, 0.96);
  font-family: var(--home-sans, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255, 252, 244, 0.78),
    0 6px 16px rgba(126, 83, 28, 0.22);
}

.discover-header h2 {
  display: none;
}

.discover-header p:last-child {
  margin: 0;
  max-width: 300px;
  color: rgba(43, 35, 28, 0.68);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.045em;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.62);
}

.page[data-page="library"].active {
  overflow-x: hidden;
}

.library-shell {
  padding-bottom: 18px;
}

.library-bookcase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 18px 0 0;
  padding: 6px 2px 24px;
}

.library-bay {
  position: relative;
  min-height: 170px;
  padding: 0 2px 22px;
  border: none;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(139, 99, 57, 0.08), transparent 24% 76%, rgba(139, 99, 57, 0.08));
  box-shadow:
    inset 0 -1px 0 rgba(255, 250, 237, 0.54);
}

.library-bay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 12px;
  border-radius: 999px 999px 6px 6px;
  background:
    linear-gradient(180deg, rgba(219, 174, 105, 0.96), rgba(126, 84, 43, 0.98));
  box-shadow:
    0 8px 14px rgba(87, 56, 29, 0.24),
    inset 0 1px 0 rgba(255, 235, 185, 0.58);
}

.library-bay-title {
  margin: 0 0 6px 4px;
  color: rgba(100, 70, 40, 0.82);
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.72);
}

.library-books {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 7px;
  min-height: 132px;
  padding: 0 12px;
}

.library-book {
  position: relative;
  width: 32px;
  height: 116px;
  padding: 12px 5px 10px;
  border: 1px solid rgba(255, 236, 194, 0.26);
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 26% 74%, rgba(0, 0, 0, 0.18)),
    var(--library-book-color, #8a5a34);
  box-shadow:
    5px 0 10px rgba(0, 0, 0, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    inset -2px 0 0 rgba(0, 0, 0, 0.14);
  color: rgba(255, 246, 226, 0.96);
  cursor: pointer;
  font: inherit;
  writing-mode: vertical-rl;
  text-align: center;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.library-book strong,
.library-book small {
  display: block;
}

.library-book strong {
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

.library-book small {
  margin-block-start: 8px;
  color: rgba(255, 232, 185, 0.72);
  font-family: "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.library-book::before,
.library-book::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 1px;
  background: rgba(255, 231, 181, 0.44);
}

.library-book::before {
  top: 32px;
}

.library-book::after {
  bottom: 26px;
}

.library-book-mark {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 7px;
  height: 26px;
  border-radius: 0 0 999px 999px;
  background: rgba(255, 224, 155, 0.64);
  transform: translateX(-50%);
}

.library-book:enabled:hover,
.library-book:enabled:focus-visible {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-8px);
  box-shadow:
    7px 8px 18px rgba(0, 0, 0, 0.28),
    inset 1px 0 0 rgba(255, 255, 255, 0.24),
    inset -2px 0 0 rgba(0, 0, 0, 0.14);
}

.library-book:focus-visible {
  outline: 2px solid rgba(255, 225, 161, 0.82);
  outline-offset: 4px;
}

.library-book:disabled {
  cursor: default;
  opacity: 0.72;
}

.library-book--tall {
  height: 138px;
}

.library-book--slim {
  width: 25px;
  height: 104px;
}

.library-book--capsule {
  --library-book-color: #2f5575;
}

.library-book--saved {
  --library-book-color: #8f4f32;
}

.library-book--notes {
  --library-book-color: #6f7441;
}

.library-book--ochre {
  --library-book-color: #b9823d;
}

.library-book--ink {
  --library-book-color: #24364d;
}

.library-book--sage {
  --library-book-color: #56634c;
}

.library-book--blue {
  --library-book-color: #3c5f79;
}

.library-book--brown {
  --library-book-color: #775136;
}

.library-book--cream {
  --library-book-color: #d1b486;
  color: #523b26;
}

.library-book--red {
  --library-book-color: #8e4238;
}

.library-book--dark {
  --library-book-color: #2d332d;
}

.library-book--gold {
  --library-book-color: #a27739;
}

body.library-page-active::before {
  background-image: url("./素材/背景底图/图书馆背景.webp");
  background-size: cover;
  background-position: center;
  transform: none;
}

body.library-page-active .app {
  grid-template-rows: 1fr auto;
}

body.library-page-active .top-bar {
  display: none;
}

body.library-page-active .content {
  padding: 0;
  background: transparent;
}

.page[data-page="library"].active {
  overflow: hidden;
  padding: 0;
}

.library-room-shell {
  position: relative;
  min-height: 100%;
  padding: 28px 22px 20px;
  color: #51402c;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  background:
    radial-gradient(circle at 82% 10%, rgba(188, 151, 91, 0.16), transparent 18%),
    radial-gradient(circle at 10% 0%, rgba(86, 112, 84, 0.12), transparent 20%),
    linear-gradient(180deg, rgba(252, 244, 224, 0.72), rgba(247, 232, 196, 0.58));
  border: 1px solid rgba(139, 102, 53, 0.28);
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, 0.46),
    inset 0 0 38px rgba(146, 101, 42, 0.1);
  overflow: hidden;
}

.library-room-shell::before,
.library-room-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.library-room-shell::before {
  inset: 12px;
  border: 1px solid rgba(139, 102, 53, 0.16);
  border-radius: 22px;
}

.library-room-shell::after {
  right: 26px;
  top: 44px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(86, 68, 42, 0.2) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 38%, rgba(133, 103, 64, 0.28), transparent 38%);
  background-size: 16px 16px, auto;
  opacity: 0.42;
}

.library-room-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.library-round-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(91, 73, 45, 0.3);
  border-radius: 50%;
  background: rgba(251, 244, 224, 0.68);
  box-shadow: 0 4px 14px rgba(92, 63, 31, 0.12);
}

.library-round-btn--menu::before,
.library-round-btn--menu::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: #6b5638;
  box-shadow: 0 6px 0 #6b5638;
}

.library-round-btn--menu::before {
  top: 11px;
}

.library-round-btn--menu::after {
  top: 23px;
  box-shadow: none;
}

.library-round-btn--bell::before {
  content: "♧";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6b5638;
  font-size: 18px;
}

.library-room-header {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  padding: 0 26px;
}

.library-room-header h2 {
  display: none;
  margin: 0 0 10px;
  color: #3c2d1e;
  font-size: clamp(42px, 12vw, 58px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.16em;
}

.library-room-kicker {
  margin: 0 0 2px;
  color: rgba(114, 82, 44, 0.74);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.library-room-header p:last-child {
  margin: 0;
  max-width: 265px;
  color: rgba(78, 62, 42, 0.78);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.library-hero-shelf,
.library-notes-row,
.library-capsule-dialog-row,
.library-booklist {
  position: relative;
  z-index: 1;
}

.library-hero-shelf {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 10px;
  align-items: end;
  min-height: 166px;
  margin: 0 4px 22px;
  padding: 8px 10px 12px;
}

.library-hero-shelf::after,
.library-booklist::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 6px;
  bottom: 0;
  height: 12px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #b37b3e, #70431f);
  box-shadow:
    0 10px 12px rgba(82, 51, 24, 0.22),
    inset 0 1px 0 rgba(255, 230, 176, 0.44);
}

.library-feature-card,
.library-tile,
.library-booklist {
  border: 1px solid rgba(139, 102, 53, 0.2);
  background: rgba(253, 246, 227, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 252, 244, 0.34);
}

.library-feature-card,
.library-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 118px;
  padding: 18px 14px;
  border-radius: 16px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.library-feature-card strong,
.library-tile strong,
.library-booklist-copy strong {
  color: #5a4229;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.library-feature-card small,
.library-tile small,
.library-booklist-copy small {
  margin-top: 8px;
  color: rgba(78, 62, 42, 0.68);
  font-size: 13px;
  line-height: 1.6;
}

.library-feature-icon,
.library-tile-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #43543d;
  color: #f7ecd0;
  font-size: 15px;
}

.library-link-text {
  margin-top: 20px;
  color: #6e542f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.library-feature-books {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
  transform: translateY(1px);
}

.library-standing-book {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 58px;
  height: 138px;
  padding: 12px 7px;
  border-radius: 3px 3px 2px 2px;
  color: #f6ebcf;
  text-align: center;
  box-shadow:
    4px 4px 8px rgba(67, 45, 24, 0.22),
    inset 3px 0 0 rgba(255, 255, 255, 0.14),
    inset -4px 0 0 rgba(0, 0, 0, 0.16);
}

.library-standing-book::after {
  content: "✦";
  position: absolute;
  top: 0;
  right: 5px;
  width: 13px;
  height: 24px;
  border-radius: 0 0 2px 2px;
  background: #8a6a3c;
  color: #f7df9a;
  font-size: 8px;
  line-height: 18px;
}

.library-standing-book strong {
  font-size: 15px;
  line-height: 1.45;
}

.library-standing-book small {
  margin-top: 6px;
  font-family: Georgia, serif;
  font-size: 8px;
  letter-spacing: 0.06em;
}

.library-standing-book--green {
  background: linear-gradient(90deg, #24362b, #435b45);
}

.library-standing-book--cream {
  width: 72px;
  height: 128px;
  background: linear-gradient(155deg, #f1e5c7, #c9b389);
  color: #594532;
}

.library-standing-book--blue {
  width: 62px;
  height: 136px;
  background: linear-gradient(90deg, #102a38, #244d5a);
}

.library-vase {
  width: 26px;
  height: 58px;
  border-radius: 45% 45% 28% 28%;
  background: linear-gradient(90deg, #1f261f, #5d5f45, #171b17);
  box-shadow: 4px 6px 9px rgba(67, 45, 24, 0.2);
}

.library-notes-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  align-items: stretch;
  margin: 0 4px 16px;
}

.library-note-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.library-note-card {
  min-height: 120px;
  padding: 14px 11px 12px;
  border: 1px solid rgba(139, 102, 53, 0.18);
  border-radius: 10px;
  background: rgba(252, 245, 226, 0.76);
  color: #5b4a35;
  box-shadow: 0 6px 12px rgba(95, 65, 31, 0.12);
}

.library-note-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

.library-note-card strong {
  display: block;
  color: #8a6a3c;
  font-size: 30px;
  line-height: 0.9;
}

.library-note-card small {
  display: block;
  margin-top: 14px;
  color: rgba(89, 72, 48, 0.56);
  font-size: 10px;
}

.library-capsule-dialog-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 4px 16px;
}

.library-tile {
  min-height: 126px;
  overflow: hidden;
}

.library-tile--capsule::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: 58px;
  height: 82px;
  border-radius: 18px 18px 12px 12px;
  background:
    linear-gradient(180deg, rgba(119, 80, 38, 0.7), rgba(119, 80, 38, 0.18) 12%, transparent 12%),
    linear-gradient(90deg, rgba(123, 83, 40, 0.16), rgba(255, 250, 232, 0.54), rgba(123, 83, 40, 0.18));
  border: 1px solid rgba(94, 69, 42, 0.28);
}

.library-tile--dialog::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 10px;
  width: 72px;
  height: 64px;
  background:
    linear-gradient(125deg, transparent 44%, rgba(84, 61, 32, 0.72) 45% 49%, transparent 50%),
    radial-gradient(ellipse at 72% 12%, rgba(91, 65, 35, 0.52), transparent 44%);
  opacity: 0.7;
}

.library-booklist {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 10px;
  align-items: end;
  min-height: 142px;
  margin: 0 4px 18px;
  padding: 16px 12px 20px;
  border-radius: 16px;
}

.library-booklist-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.library-booklist-shelf {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
}

.library-shelf-book {
  display: grid;
  place-items: center;
  width: 30px;
  height: 100px;
  padding: 8px 3px;
  border-radius: 3px 3px 1px 1px;
  color: #efe4ca;
  font-size: 11px;
  line-height: 1.2;
  writing-mode: vertical-rl;
  text-align: center;
  box-shadow:
    3px 4px 7px rgba(70, 45, 22, 0.22),
    inset 2px 0 0 rgba(255, 255, 255, 0.14),
    inset -2px 0 0 rgba(0, 0, 0, 0.12);
}

.library-shelf-book--paper {
  background: #d8c4a0;
  color: #554533;
}

.library-shelf-book--green {
  background: #455b48;
}

.library-shelf-book--cream {
  background: #d8bd88;
  color: #59432a;
}

.library-shelf-book--brown {
  background: #6d4a2e;
}

.library-shelf-book--ochre {
  background: #a37b3d;
}

.library-shelf-book--ink {
  background: #24333d;
}

.library-shelf-book--blue {
  background: #244f63;
}

.library-room-footer {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  text-align: center;
  color: rgba(88, 66, 36, 0.72);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.library-feature-card:enabled:active,
.library-tile:enabled:active {
  transform: translateY(1px);
  opacity: 0.84;
}

@media (max-width: 380px) {
  .library-room-shell {
    padding: 22px 16px 16px;
  }

  .library-hero-shelf,
  .library-notes-row,
  .library-booklist {
    grid-template-columns: 104px 1fr;
  }

  .library-standing-book {
    width: 50px;
  }

  .library-standing-book--cream {
    width: 60px;
  }

  .library-note-card {
    padding-inline: 8px;
  }
}

.discover-option-grid {
  display: grid;
  gap: 14px;
}

.discover-option-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 112px;
  padding: 14px 16px;
  border: 1px solid rgba(154, 117, 76, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 18%, rgba(230, 198, 139, 0.22), transparent 36%),
    rgba(255, 252, 244, 0.88);
  box-shadow:
    0 14px 34px rgba(87, 63, 38, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.discover-option-card:active {
  transform: translateY(1px) scale(0.99);
}

.discover-option-card:focus-visible {
  outline: 2px solid rgba(157, 111, 51, 0.52);
  outline-offset: 3px;
}

.discover-option-card:hover {
  border-color: rgba(154, 117, 76, 0.34);
  box-shadow:
    0 18px 42px rgba(87, 63, 38, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.44);
}

.discover-option-icon-wrap {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.discover-option-icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

.discover-option-text {
  display: grid;
  gap: 6px;
}

.discover-option-text strong {
  color: #30241d;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.discover-option-text small {
  color: rgba(76, 61, 48, 0.62);
  font-size: 13px;
  line-height: 1.5;
}

/* ── 思辩之庭（发现子页） ── */
body.speculation-hall-page-active::before {
  background-image: url("./素材/背景底图/思辩之庭.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  transform: none;
}

body.speculation-hall-page-active {
  background: #0a1428;
}

body.speculation-hall-page-active .app {
  grid-template-rows: 1fr;
}

body.speculation-hall-page-active .top-bar {
  display: contents;
}

body.speculation-hall-page-active .top-bar h1 {
  display: none;
}

body.speculation-hall-page-active .content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.speculation-hall-page-active .content > .speculation-hall-page {
  flex: 1;
  min-height: 0;
}

body.speculation-hall-page-active .tab-bar {
  display: none !important;
}

.starmap-help-btn,
.board-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(232, 196, 137, 0.3);
  border-radius: 999px;
  background: rgba(6, 10, 28, 0.58);
  color: rgba(245, 221, 163, 0.92);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.starmap-help-btn__glyph,
.board-help-btn__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin: 0;
  line-height: 1;
  text-align: center;
  /* 全形「？」在圓形按鈕中視覺偏左偏下，做光學置中 */
  transform: translate(3px, -1px);
}

.starmap-help-btn:active,
.board-help-btn:active {
  transform: translateY(1px);
}

.starmap-help-btn:focus-visible,
.board-help-btn:focus-visible {
  outline: 2px solid rgba(245, 221, 163, 0.66);
  outline-offset: 3px;
}

.speculation-hall-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 130;
  pointer-events: auto;
}

body.speculation-hall-page-active .speculation-hall-top-actions .board-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  top: auto;
  left: auto;
  width: 34px;
  height: 34px;
}

body.speculation-hall-page-active .speculation-hall-top-actions .board-back-icon {
  width: 34px;
  height: 34px;
}

body.speculation-hall-page-active .speculation-hall-top-actions .board-help-btn {
  display: inline-flex;
}

.speculation-layout-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.speculation-layout-toggle:focus-visible {
  outline: 2px solid rgba(232, 196, 137, 0.7);
  outline-offset: 2px;
  border-radius: 999px;
}

.speculation-layout-toggle__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 72px;
  height: 30px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(232, 196, 137, 0.35);
  background: rgba(12, 18, 40, 0.72);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.speculation-layout-toggle__label {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  color: rgba(244, 236, 220, 0.45);
  transition: color 0.22s ease;
  pointer-events: none;
  user-select: none;
}

.speculation-layout-toggle__track:not(.speculation-layout-toggle__track--simple)
  .speculation-layout-toggle__label--guide,
.speculation-layout-toggle__track--simple .speculation-layout-toggle__label--simple {
  color: rgba(18, 22, 36, 0.92);
}

.speculation-layout-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 999px;
  background: linear-gradient(180deg, #f3e2bf 0%, #e0c48a 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease;
  z-index: 0;
}

.speculation-layout-toggle__track--simple .speculation-layout-toggle__thumb {
  transform: translateX(100%);
}

.speculation-hall-page--simple .spec-side-text {
  visibility: hidden;
  min-height: 2.8em;
}

body.speculation-archive-page-active::before {
  background-image: url("./素材/背景底图/辩题页背景.webp");
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: none;
}

body.speculation-archive-page-active {
  background: transparent;
}

body.speculation-archive-page-active .app {
  grid-template-rows: 1fr;
}

body.speculation-archive-page-active .top-bar {
  display: contents;
}

body.speculation-archive-page-active .top-bar h1 {
  display: none;
}

body.speculation-archive-page-active .content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.speculation-archive-page-active .content > .spec-archive-page {
  flex: 1;
  min-height: 0;
}

body.speculation-archive-page-active .tab-bar {
  display: none !important;
}

body.speculation-archive-page-active .board-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 720px) {
  .discover-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   哲学星盘—— 全屏沉浸式宇宙场景
   ========================================================================== */

/* ── 星盘页激活：消除布局内边距，星图铺满可用空间 ── */
body.starmap-page-active .content {
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

body.starmap-page-active .app {
  /* 頂欄改為絕對定位後不佔格，只保留內容區 + Tab 栏 */
  grid-template-rows: minmax(0, 1fr) auto;
  position: relative;
}

body.starmap-page-active .page[data-page="philosophy-starmap"].active {
  height: 100%;
  padding: 0;
  min-height: unset;
}

/* ── 沉浸頁：頂欄不佔版面，按鈕改由 .starmap-top-actions 固定浮層 ── */
body.starmap-page-active .top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  z-index: 130;
  pointer-events: none;
}

body.starmap-page-active .top-bar > * {
  pointer-events: auto;
}

body.starmap-page-active .top-bar h1 {
  display: none;
}

.starmap-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 130;
}

/* ── 底部 Tab 栏：融入宇宙背景 ── */
body.starmap-page-active .tab-bar {
  background: rgba(6, 10, 28, 0.80);
  border-top: 1px solid rgba(232, 196, 137, 0.13);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.4s ease;
}

/* ── 星盘页 section：零内边距，flex 撑满 content 区 ── */
.page[data-page="philosophy-starmap"] {
  display: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.page[data-page="philosophy-starmap"].active {
  display: flex;
  flex-direction: column;
}

/* ── 星图舞台：铺满整个发现页，无边框圆角 ── */
.starmap-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #060a1c;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.starmap-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.starmap-back-btn {
  display: none;
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  padding: 8px 12px;
  border: 1px solid rgba(232, 196, 137, 0.30);
  border-radius: 999px;
  background: rgba(6, 10, 28, 0.58);
  color: rgba(245, 221, 163, 0.90);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}

body.starmap-page-active .starmap-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.starmap-page-active .starmap-top-actions .starmap-help-btn {
  display: inline-flex;
}

.starmap-back-btn:active {
  transform: translateY(1px);
}

.starmap-back-btn:focus-visible {
  outline: 2px solid rgba(245, 221, 163, 0.66);
  outline-offset: 3px;
}

/* ── 叠加标题（左上角，漂浮于画布上方）── */
.starmap-overlay-header {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  left: 20px;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.starmap-eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232, 196, 137, 0.42);
  font-weight: 500;
}

.starmap-title {
  margin: 0 0 5px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(243, 214, 138, 0.80);
  text-shadow: 0 0 20px rgba(232, 196, 137, 0.30);
}

.starmap-subtitle {
  margin: 0;
  font-size: 11px;
  color: rgba(149, 162, 194, 0.55);
  letter-spacing: 0.04em;
}

/* ── 信息卡片 ── */
.starmap-card {
  position: absolute;
  left: 0;
  top: 0;
  width: min(260px, 72%);
  padding: 12px 14px 14px;
  background: rgba(7, 12, 28, 0.93);
  border: 1px solid rgba(232, 196, 137, 0.48);
  border-radius: 12px;
  color: #f3e6c7;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.70),
    inset 0 0 0 1px rgba(255, 222, 158, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: top left;
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 4;
  font-size: 13px;
  line-height: 1.55;
}

.starmap-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* 保持 none，避免挡住 canvas 上的拖拽与点击 */
  pointer-events: none;
}

.starmap-card-period {
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 196, 137, 0.70);
}

.starmap-card-name {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: #f8e3a8;
  letter-spacing: 0.04em;
}

.starmap-card-idea {
  margin: 0 0 10px;
  color: rgba(243, 230, 199, 0.92);
}

.starmap-card-quote {
  margin: 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(232, 196, 137, 0.52);
  background: rgba(255, 222, 158, 0.05);
  border-radius: 0 8px 8px 0;
  color: #f6e9c6;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.6;
}

/* ── 桌面端 ── */
@media (min-width: 720px) {
  .starmap-title {
    font-size: 22px;
  }
  .starmap-card {
    width: 300px;
    font-size: 13.5px;
  }
  .starmap-card-name {
    font-size: 19px;
  }
}

/* ── 移动端小屏 ── */
@media (max-width: 380px) {
  .starmap-card {
    width: min(240px, 80%);
    font-size: 12px;
    padding: 10px 12px 12px;
  }
  .starmap-card-name {
    font-size: 15px;
  }
}

/* ── 减少动画偏好 ── */
@media (prefers-reduced-motion: reduce) {
  /* Three.js 动画在 JS 层按需降速 */
}

/* ==========================================================================
   对话页 —— 思想家半身照轮播
   ========================================================================== */

body.dialog-page-active .content {
  padding: 0;
  overflow: hidden;
}

body.dialog-page-active .app {
  grid-template-rows: 52px minmax(0, 1fr) auto;
}

body.dialog-page-active .page[data-page="message"].active {
  height: 100%;
  padding: 0;
  min-height: unset;
}

body.dialog-page-active .top-bar {
  position: relative;
  z-index: 2;
  height: 52px;
  min-height: 52px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080d20;
  border-bottom: 1px solid rgba(232, 196, 137, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

body.dialog-page-active .top-bar h1 {
  margin: 0;
  padding: 0;
  color: rgba(232, 196, 137, 0.72);
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 15px;
}

body.dialog-page-active .tab-bar {
  background: rgba(6, 10, 28, 0.8);
  border-top: 1px solid rgba(232, 196, 137, 0.13);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.dialog-picker-open .content {
  overflow: hidden;
}

.page[data-page="message"] {
  display: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.page[data-page="message"].active {
  display: flex;
  flex-direction: column;
}

.dialog-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  isolation: isolate;
  background: radial-gradient(
      ellipse 120% 80% at 50% 18%,
      rgba(48, 62, 98, 0.55) 0%,
      transparent 58%
    ),
    linear-gradient(180deg, #0a1024 0%, #060a1c 48%, #0c1228 100%);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.dialog-stars-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dialog-pick-btn {
  position: absolute;
  top: 10px;
  right: max(18px, env(safe-area-inset-right, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(232, 196, 137, 0.28);
  border-radius: 10px;
  background: rgba(12, 18, 40, 0.72);
  color: rgba(232, 196, 137, 0.88);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.dialog-pick-btn:hover,
.dialog-pick-btn:focus-visible {
  background: rgba(24, 32, 58, 0.88);
  border-color: rgba(232, 196, 137, 0.45);
  color: #f0d9a8;
  outline: none;
}

.dialog-pick-btn[aria-expanded="true"] {
  background: rgba(232, 196, 137, 0.14);
  border-color: rgba(232, 196, 137, 0.5);
  color: #f0d9a8;
}

.dialog-philosopher-picker {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
}

.dialog-philosopher-picker:not([hidden]) {
  pointer-events: auto;
}

.dialog-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 20, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dialog-picker-panel {
  position: absolute;
  top: calc(52px + env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  width: min(288px, calc(100vw - 24px));
  max-height: min(440px, 64vh);
  display: flex;
  flex-direction: column;
  padding: 14px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(232, 196, 137, 0.22);
  background: linear-gradient(
    165deg,
    rgba(18, 26, 52, 0.97) 0%,
    rgba(10, 14, 32, 0.98) 100%
  );
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.dialog-picker-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: rgba(240, 217, 168, 0.95);
  letter-spacing: 0.06em;
}

.dialog-picker-hint {
  margin: 4px 0 10px;
  font-size: 11px;
  color: rgba(232, 220, 196, 0.48);
  line-height: 1.4;
}

.dialog-picker-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.dialog-picker-back-btn {
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(232, 196, 137, 0.16);
  border-radius: 999px;
  background: rgba(232, 196, 137, 0.06);
  color: rgba(232, 220, 196, 0.72);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.dialog-picker-back-btn:hover,
.dialog-picker-back-btn:focus-visible {
  background: rgba(232, 196, 137, 0.12);
  outline: none;
}

.dialog-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 220, 196, 0.9);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.dialog-picker-item:hover,
.dialog-picker-item:focus-visible {
  background: rgba(232, 196, 137, 0.1);
  border-color: rgba(232, 196, 137, 0.22);
  outline: none;
}

.dialog-picker-item.is-current {
  border-color: rgba(232, 196, 137, 0.35);
  background: rgba(232, 196, 137, 0.08);
}

.dialog-picker-field-item.is-current {
  border-color: rgba(120, 180, 255, 0.35);
  background: rgba(120, 180, 255, 0.08);
}

.dialog-picker-item.is-disabled {
  opacity: 0.62;
  cursor: pointer;
}

.dialog-picker-item-main {
  flex: 1;
  min-width: 0;
}

.dialog-picker-item-name {
  display: block;
  font-family: SimSun, "Songti SC", "STSong", serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(240, 217, 168, 0.95);
}

.dialog-picker-item-school {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(232, 220, 196, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-picker-item-tag {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.dialog-picker-item-tag.is-ready {
  color: rgba(120, 220, 160, 0.95);
  background: rgba(80, 180, 120, 0.14);
  border: 1px solid rgba(120, 220, 160, 0.25);
}

.dialog-picker-item-tag.is-soon {
  color: rgba(232, 196, 137, 0.55);
  background: rgba(232, 196, 137, 0.06);
  border: 1px solid rgba(232, 196, 137, 0.12);
}

.dialog-header {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 12px 72px 8px;
  text-align: center;
  pointer-events: none;
}

.dialog-eyebrow {
  margin: 0 0 5px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232, 196, 137, 0.58);
  line-height: 1.2;
}

.dialog-hint {
  margin: 0 auto;
  max-width: 240px;
  font-size: 12px;
  color: rgba(232, 220, 196, 0.58);
  line-height: 1.45;
  letter-spacing: 0.04em;
  white-space: pre-line;
}

.dialog-stage[data-view-mode="carousel"] .dialog-group-photo {
  display: none !important;
}

.dialog-stage[data-view-mode="group_photo"] .dialog-carousel {
  display: none !important;
}

.dialog-stage[data-view-mode="group_photo"] {
  touch-action: pan-x pan-y;
}

.dialog-stage[data-view-mode="group_photo"] .dialog-header {
  display: none;
}

.dialog-stage[data-view-mode="group_photo"] .dialog-stars-canvas {
  display: none;
}

body.dialog-group-immersive.dialog-page-active .app {
  grid-template-rows: 1fr;
}

body.dialog-group-immersive .content,
body.dialog-group-immersive .legacy-pages-host {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body.dialog-group-immersive .page[data-page="message"].active {
  height: 100dvh;
  min-height: 100dvh;
}

body.dialog-group-immersive .dialog-stage {
  height: 100dvh;
  min-height: 100dvh;
  background: #000;
}

body.dialog-group-immersive .dialog-group-photo {
  position: fixed;
  inset: 0;
  z-index: 200;
  flex: none;
  height: 100dvh;
  width: 100vw;
}

body.dialog-group-immersive .dialog-group-photo-scroll {
  height: 100dvh;
  width: 100vw;
}

body.dialog-group-immersive .dialog-group-back-btn {
  display: flex;
}

body.dialog-group-immersive .dialog-pick-btn {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 210;
}

.dialog-group-back-btn {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(14px, env(safe-area-inset-left, 0px));
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(232, 196, 137, 0.28);
  border-radius: 10px;
  background: rgba(12, 18, 40, 0.72);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.dialog-group-back-btn[hidden] {
  display: none !important;
}

.dialog-group-back-btn:active {
  background: rgba(24, 32, 58, 0.88);
}

.dialog-group-back-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.92;
}

.dialog-group-photo {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.dialog-group-photo[hidden] {
  display: none !important;
}

.dialog-group-photo-scroll {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  cursor: default;
}

.dialog-group-photo-scroll::-webkit-scrollbar {
  display: none;
}

.dialog-group-photo-stage {
  position: relative;
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

.dialog-group-photo-img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.dialog-group-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 4;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(244, 236, 220, 0.82);
  background: rgba(8, 12, 28, 0.62);
  border: 1px solid rgba(232, 196, 137, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  animation: dialog-group-hint-fade 4s ease 1.2s forwards;
}

@keyframes dialog-group-hint-fade {
  0%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.dialog-group-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dialog-group-hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.dialog-group-card {
  position: fixed;
  z-index: 12;
  max-width: min(300px, 88vw);
  padding: 14px 16px 12px;
  border-radius: 12px;
  border: 1px solid rgba(232, 196, 137, 0.28);
  background: rgba(10, 16, 36, 0.94);
  color: rgba(244, 236, 220, 0.95);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

.dialog-group-card[hidden] {
  display: none !important;
}

.dialog-group-card-name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f0d9a8;
}

.dialog-group-card-period {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(232, 220, 196, 0.68);
}

.dialog-group-card-desc {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 236, 220, 0.88);
}

.dialog-group-card-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(232, 196, 137, 0.82);
}

.dialog-carousel {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.dialog-track::before,
.dialog-track::after {
  position: absolute;
  top: 38%;
  z-index: 6;
  width: 30px;
  height: 38px;
  border: 0;
  color: rgba(255, 232, 176, 0.92);
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  text-shadow:
    0 0 8px rgba(232, 196, 137, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.45);
  opacity: 0.9;
}

.dialog-track::before {
  content: "‹";
  left: 18px;
}

.dialog-track::after {
  content: "›";
  right: 18px;
}

.dialog-track {
  position: relative;
  width: min(100%, 420px);
  height: min(72vh, 560px);
  margin: 0 auto;
  perspective: 1200px;
}

.dialog-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 300px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition:
    transform 0.42s cubic-bezier(0.22, 0.9, 0.32, 1),
    opacity 0.38s ease,
    filter 0.38s ease;
  will-change: transform, opacity;
  cursor: default;
  pointer-events: none;
}

.dialog-slide[data-state="active"] {
  z-index: 5;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: none;
  pointer-events: auto;
  cursor: default;
}

.dialog-slide[data-state="prev"] {
  z-index: 2;
  opacity: 0;
  transform: translate(calc(-50% - 38%), -50%) scale(0.78);
  filter: brightness(0.72) saturate(0.85);
  pointer-events: none;
  cursor: default;
}

.dialog-slide[data-state="next"] {
  z-index: 2;
  opacity: 0;
  transform: translate(calc(-50% + 38%), -50%) scale(0.78);
  filter: brightness(0.72) saturate(0.85);
  pointer-events: none;
  cursor: default;
}

.dialog-slide[data-state="far-prev"],
.dialog-slide[data-state="far-next"] {
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62);
  filter: brightness(0.55) blur(1px);
}

.dialog-slide[data-state="far-prev"] {
  transform: translate(calc(-50% - 52%), -50%) scale(0.62);
}

.dialog-slide[data-state="far-next"] {
  transform: translate(calc(-50% + 52%), -50%) scale(0.62);
}

/* 金色流光沿边框划行（SVG path + JS Web Animations API） */
.dialog-portrait-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.45));
}

.dialog-slide[data-state="active"] .dialog-portrait-wrap {
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
}

.dialog-border-sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dialog-slide[data-state="active"] .dialog-border-sweep {
  opacity: 1;
}

.dialog-border-track {
  stroke: rgba(232, 196, 137, 0.38);
  stroke-width: 1;
}

.dialog-border-light {
  stroke: #fff5dc;
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(255, 228, 160, 0.95))
    drop-shadow(0 0 8px rgba(232, 196, 137, 0.55));
}

.dialog-portrait {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 380px);
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.dialog-slide[data-state="active"] .dialog-portrait {
  filter: drop-shadow(0 0 18px rgba(232, 196, 137, 0.35));
}

.dialog-meta {
  margin-top: 14px;
  padding: 0 8px;
  transition: opacity 0.35s ease;
}

.dialog-slide:not([data-state="active"]) .dialog-meta {
  opacity: 0.55;
}

.dialog-name {
  margin: 0 0 6px;
  font-family: SimSun, "Songti SC", "STSong", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 248, 235, 0.96);
}

.dialog-slide[data-state="active"] .dialog-name {
  color: #fff6e8;
  text-shadow: 0 0 24px rgba(232, 196, 137, 0.35);
}

.dialog-origin {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(232, 220, 196, 0.78);
}

.dialog-school {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: rgba(232, 196, 137, 0.72);
}

@media (max-width: 380px) {
  .dialog-slide {
    width: min(84vw, 280px);
  }

  .dialog-name {
    font-size: 20px;
  }

  .dialog-slide[data-state="prev"] {
    transform: translate(calc(-50% - 34%), -50%) scale(0.74);
  }

  .dialog-slide[data-state="next"] {
    transform: translate(calc(-50% + 34%), -50%) scale(0.74);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-slide {
    transition: none;
  }

  .dialog-border-light {
    opacity: 0.85;
  }
}

/* 「开始对话」按钮（carousel 轮播页，仅 active 可见） */
.dialog-start-btn {
  display: none;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 22px;
  border: 1px solid rgba(232, 196, 137, 0.7);
  border-radius: 100px;
  background: rgba(232, 196, 137, 0.1);
  color: rgba(255, 246, 232, 0.92);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, transform 0.15s;
  backdrop-filter: blur(8px);
}

.dialog-slide[data-state="active"] .dialog-start-btn {
  display: flex;
}

.dialog-start-btn:hover,
.dialog-start-btn:active {
  background: rgba(232, 196, 137, 0.22);
  border-color: rgba(255, 224, 160, 0.9);
  transform: translateY(-1px);
}

.dialog-start-btn svg {
  flex-shrink: 0;
  color: rgba(255, 210, 130, 0.9);
}

/* ==========================================================================
   哲学家智能体对话页（philosopher-chat）
   全屏 fixed 叠层，避免 grid 在隐藏顶栏/底栏后把 content 放进 0 高行
   ========================================================================== */

body.philosopher-chat-active .top-bar,
body.philosopher-chat-active .tab-bar {
  display: none;
}

body.philosopher-chat-active::before {
  visibility: visible;
}

.page[data-page="philosopher-chat"] {
  display: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.page[data-page="philosopher-chat"].active {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── 整体布局壳（grid 保证输入框始终贴底可见）── */
.pchat-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(250, 246, 238, 0.82), rgba(240, 229, 211, 0.72)),
    rgba(250, 246, 238, 0.68);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.pchat-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(224, 184, 114, 0.18), transparent 30%),
    radial-gradient(circle at 88% 26%, rgba(126, 143, 104, 0.14), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(172, 105, 84, 0.10), transparent 32%);
}

.pchat-shell > * {
  position: relative;
  z-index: 1;
}

/* ── 顶部信息栏 ── */
.pchat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(250, 246, 238, 0.88);
  border-bottom: 1px solid rgba(200, 182, 155, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 10;
}

.pchat-header::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(198, 143, 66, 0.36),
    rgba(111, 132, 91, 0.20),
    transparent
  );
}

.pchat-back-btn,
.pchat-clear-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 252, 244, 0.72);
  color: rgba(90, 61, 34, 0.88);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.pchat-back-btn:active,
.pchat-clear-btn:active {
  background: rgba(232, 196, 137, 0.22);
  color: #5a3d22;
}

.pchat-action-menu {
  position: relative;
  flex-shrink: 0;
}

.pchat-action-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 148px;
  padding: 6px;
  border: 1px solid rgba(154, 117, 76, 0.22);
  border-radius: 14px;
  background: rgba(255, 252, 244, 0.96);
  box-shadow: 0 12px 30px rgba(62, 44, 26, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pchat-action-dropdown[hidden] {
  display: none;
}

.pchat-action-dropdown button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(60, 44, 33, 0.86);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.pchat-action-dropdown button:hover:not(:disabled),
.pchat-action-dropdown button:focus-visible:not(:disabled) {
  background: rgba(232, 196, 137, 0.18);
  outline: none;
}

.pchat-action-dropdown button:disabled {
  color: rgba(60, 44, 33, 0.38);
  cursor: default;
}

/* 对话记录：右侧 overlay 侧栏（fixed 挂 body，不占用整页） */
.pchat-history-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  pointer-events: none;
}

.pchat-history-panel:not([hidden]) {
  pointer-events: auto;
}

.pchat-history-panel[hidden] {
  display: none !important;
}

.pchat-history-backdrop {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(42, 30, 20, 0.32);
  opacity: 0;
  transition: opacity 0.24s ease;
  cursor: pointer;
}

.pchat-history-panel.is-open .pchat-history-backdrop {
  opacity: 1;
}

.pchat-history-drawer {
  flex: 0 0 auto;
  width: min(340px, 86vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.pchat-history-panel.is-open .pchat-history-drawer {
  transform: translateX(0);
}

.pchat-history-new-top {
  flex-shrink: 0;
  margin: 12px 14px 0;
  margin-top: max(12px, env(safe-area-inset-top));
  padding: 10px 12px;
  border: 1px dashed rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  background: #fafafa;
  color: rgba(0, 0, 0, 0.82);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.pchat-history-new-top:hover,
.pchat-history-new-top:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}

.pchat-history-search-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 12px 14px 8px;
  padding-top: max(12px, env(safe-area-inset-top));
}

.pchat-history-search-icon {
  position: absolute;
  left: 26px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pchat-history-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 34px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.86);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.pchat-history-search:focus {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.18);
}

.pchat-history-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.pchat-history-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 10px;
}

.pchat-history-group {
  margin-bottom: 2px;
}

.pchat-history-group-label {
  margin: 0;
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.4);
}

.pchat-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pchat-history-item {
  margin: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.pchat-history-item-btn {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.88);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.pchat-history-item-btn:hover,
.pchat-history-item-btn:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}

.pchat-history-item--active .pchat-history-item-btn {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

.pchat-history-item-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pchat-history-item-delete {
  flex-shrink: 0;
  align-self: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(0, 0, 0, 0.32);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pchat-history-item-delete:hover,
.pchat-history-item-delete:focus-visible {
  background: rgba(180, 60, 40, 0.1);
  color: rgba(180, 60, 40, 0.88);
  outline: none;
}

.pchat-history-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.6;
}

.pchat-history-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.pchat-history-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pchat-history-user-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4c4a8, #8fa07a);
  background-size: cover;
  background-position: center;
}

.pchat-history-user-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pchat-history-footer-menu {
  position: relative;
  flex-shrink: 0;
}

.pchat-history-menu-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pchat-history-menu-btn:hover,
.pchat-history-menu-btn:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.pchat-history-menu-dropdown {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 10;
  min-width: 136px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pchat-history-menu-dropdown[hidden] {
  display: none;
}

.pchat-history-menu-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(0, 0, 0, 0.82);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.pchat-history-menu-dropdown button:hover,
.pchat-history-menu-dropdown button:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.pchat-history-menu-dropdown button:disabled {
  color: rgba(0, 0, 0, 0.28);
  cursor: default;
}

body.pchat-history-open {
  overflow: hidden;
}

/* ── 删除对话确认弹窗 ── */
.pchat-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pchat-delete-modal[hidden] {
  display: none !important;
}

.pchat-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(26, 43, 60, 0.38);
  cursor: pointer;
}

.pchat-delete-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 320px);
  padding: 20px 18px 16px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(170, 155, 131, 0.35);
  box-shadow: 0 16px 48px rgba(86, 61, 38, 0.2);
}

.pchat-delete-modal-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(60, 44, 33, 0.92);
}

.pchat-delete-modal-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(90, 61, 34, 0.78);
}

.pchat-delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.pchat-delete-modal-cancel,
.pchat-delete-modal-confirm {
  padding: 9px 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.pchat-delete-modal-cancel {
  border: 1px solid rgba(154, 117, 76, 0.28);
  background: rgba(255, 252, 244, 0.9);
  color: rgba(60, 44, 33, 0.82);
}

.pchat-delete-modal-confirm {
  border: 0;
  background: rgba(180, 60, 40, 0.92);
  color: #fff;
}

.pchat-delete-modal-cancel:active {
  background: rgba(232, 196, 137, 0.18);
}

.pchat-delete-modal-confirm:active {
  background: rgba(150, 50, 32, 0.95);
}

.pchat-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pchat-header-avatar-wrap {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(154, 117, 76, 0.32);
  background: rgba(255, 252, 244, 0.7);
}

.pchat-header-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.pchat-header-text {
  min-width: 0;
}

.pchat-header-name {
  margin: 0;
  font-family: SimSun, "Songti SC", "STSong", serif;
  font-size: 15px;
  font-weight: 600;
  color: #3b3028;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pchat-header-period {
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(78, 62, 47, 0.58);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 核心思想标签条 ── */
.pchat-ideas {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: rgba(250, 246, 238, 0.78);
  border-bottom: 1px solid rgba(200, 182, 155, 0.28);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.pchat-ideas::-webkit-scrollbar {
  display: none;
}

.pchat-idea-tag {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid rgba(154, 117, 76, 0.28);
  background: rgba(255, 252, 244, 0.64);
  font-size: 11px;
  color: rgba(90, 61, 34, 0.86);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pchat-idea-tag:nth-child(3n + 1) {
  border-color: rgba(154, 117, 76, 0.30);
  background: rgba(232, 196, 137, 0.16);
}

.pchat-idea-tag:nth-child(3n + 2) {
  border-color: rgba(111, 132, 91, 0.26);
  background: rgba(126, 143, 104, 0.12);
}

.pchat-idea-tag:nth-child(3n) {
  border-color: rgba(154, 92, 75, 0.22);
  background: rgba(172, 105, 84, 0.10);
}

/* ── 思想画像弹窗 ── */
body.pchat-tp-modal-open {
  overflow: hidden;
}

.pchat-tp-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pchat-tp-modal[hidden] {
  display: none !important;
}

.pchat-tp-modal-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(26, 43, 60, 0.38);
  cursor: pointer;
}

.pchat-tp-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  max-height: min(82vh, 680px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(170, 155, 131, 0.35);
  box-shadow: 0 16px 48px rgba(86, 61, 38, 0.18);
  overflow: hidden;
}

.pchat-tp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(217, 201, 176, 0.35);
  flex-shrink: 0;
}

.pchat-tp-modal-title {
  margin: 0;
  color: #1a2b3c;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 17px;
  font-weight: 600;
}

.pchat-tp-modal-close {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.pchat-tp-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px));
}

.pchat-tp-modal-body .tp-report--snapshot {
  max-width: none;
  margin: 0;
}

.pchat-tp-modal-loading {
  margin: 28px 0;
  text-align: center;
  color: rgba(60, 44, 33, 0.72);
  font-size: 14px;
}

.pchat-tp-modal-fallback h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: rgba(42, 34, 24, 0.95);
}

.pchat-tp-modal-summary,
.pchat-tp-modal-note {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(60, 44, 33, 0.82);
}

.pchat-tp-modal-note {
  font-style: italic;
  color: rgba(74, 58, 36, 0.9);
}

@media (max-width: 480px) {
  .pchat-tp-modal {
    align-items: flex-end;
    padding: 0;
  }

  .pchat-tp-modal-panel {
    width: 100%;
    max-height: min(88vh, 760px);
    border-radius: 18px 18px 0 0;
  }
}

/* ── 消息区 ── */
.pchat-messages {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 117, 76, 0.18) transparent;
  -webkit-overflow-scrolling: touch;
}

.pchat-messages::-webkit-scrollbar {
  width: 3px;
}

.pchat-messages::-webkit-scrollbar-thumb {
  background: rgba(154, 117, 76, 0.22);
  border-radius: 2px;
}

/* ── 单条消息行 ── */
.pchat-msg-wrap {
  display: flex;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  animation: pchat-msg-in 0.28s cubic-bezier(0.2, 0.9, 0.4, 1) both;
}

@keyframes pchat-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pchat-msg-wrap--user {
  align-self: flex-end;
  flex-direction: row-reverse;
  width: auto;
  max-width: 85%;
}

.pchat-msg-wrap--assistant {
  align-self: flex-start;
  width: fit-content;
  max-width: calc(100% - 44px); /* 32px avatar + 8px gap + 4px margin */
}

.pchat-msg-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(154, 117, 76, 0.28);
  margin-top: 2px;
}

/* ── 气泡 ── */
.pchat-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pchat-msg-wrap--user .pchat-bubble {
  flex: 0 1 auto;
}

.pchat-bubble--user {
  background:
    linear-gradient(135deg, rgba(235, 198, 137, 0.34), rgba(218, 178, 114, 0.22));
  border: 1px solid rgba(154, 117, 76, 0.30);
  color: rgba(55, 39, 27, 0.92);
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 18px rgba(118, 82, 43, 0.08);
}

.pchat-bubble--assistant {
  background:
    linear-gradient(135deg, rgba(255, 252, 244, 0.90), rgba(248, 240, 224, 0.82));
  border: 1px solid rgba(154, 117, 76, 0.16);
  color: rgba(55, 39, 27, 0.88);
  border-bottom-left-radius: 4px;
  box-shadow: 0 8px 20px rgba(118, 82, 43, 0.07);
}

.pchat-bubble-text {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pchat-bubble-text p {
  margin: 0 0 0.7em;
}

.pchat-bubble-text p:last-child {
  margin-bottom: 0;
}

.pchat-bubble-text strong {
  color: rgba(73, 48, 27, 0.96);
  font-weight: 600;
}

.pchat-bubble-text em {
  color: rgba(94, 67, 43, 0.88);
  font-style: italic;
}

/* ── 收藏按钮 ── */
.pchat-bubble-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(117, 83, 48, 0.12);
}

.pchat-save-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(117, 83, 48, 0.22);
  border-radius: 100px;
  background: transparent;
  color: rgba(83, 58, 35, 0.68);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.pchat-save-btn:hover {
  color: rgba(73, 48, 27, 0.95);
  border-color: rgba(117, 83, 48, 0.42);
  background: rgba(255, 248, 235, 0.42);
}

.pchat-save-btn--saved {
  color: rgba(102, 66, 26, 0.95) !important;
  border-color: rgba(132, 88, 34, 0.48) !important;
  background: rgba(224, 184, 114, 0.20) !important;
}

.pchat-save-btn--saved svg {
  fill: rgba(132, 88, 34, 0.28);
}

.pchat-save-btn-label,
.pchat-copy-btn-label {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.pchat-bubble--streaming .pchat-bubble-text::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: rgba(142, 102, 54, 0.75);
  animation: pchat-cursor-blink 0.9s step-end infinite;
}

@keyframes pchat-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── 打字动画（默认隐藏，避免 display:flex 覆盖 [hidden]）── */
.pchat-typing {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  margin-left: 40px;
  background:
    linear-gradient(135deg, rgba(255, 252, 244, 0.88), rgba(238, 229, 210, 0.80));
  border: 1px solid rgba(154, 117, 76, 0.18);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
  flex-shrink: 0;
}

.pchat-typing.pchat-typing--visible {
  display: flex;
}

.pchat-typing[hidden] {
  display: none !important;
}

.pchat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(142, 102, 54, 0.56);
  animation: pchat-dot-bounce 1.2s ease-in-out infinite;
}

.pchat-typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.pchat-typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes pchat-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.65);
    opacity: 0.45;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ── 推荐问题 ── */
.pchat-suggestions-wrap {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  padding: 6px 14px 2px;
  overflow: hidden;
  box-sizing: border-box;
}

.pchat-suggestions {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 4px;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.pchat-suggestions::-webkit-scrollbar {
  display: none;
}

.pchat-sq-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(154, 117, 76, 0.28);
  background: rgba(255, 252, 244, 0.64);
  color: rgba(60, 44, 33, 0.82);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.pchat-sq-btn:nth-child(3n + 1) {
  border-color: rgba(154, 117, 76, 0.28);
  background: rgba(232, 196, 137, 0.14);
}

.pchat-sq-btn:nth-child(3n + 2) {
  border-color: rgba(111, 132, 91, 0.24);
  background: rgba(126, 143, 104, 0.11);
}

.pchat-sq-btn:nth-child(3n) {
  border-color: rgba(154, 92, 75, 0.20);
  background: rgba(172, 105, 84, 0.09);
}

.pchat-sq-btn:hover,
.pchat-sq-btn:active {
  background: rgba(232, 196, 137, 0.20);
  border-color: rgba(154, 117, 76, 0.42);
}

/* ── 输入区 ── */
.pchat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(250, 246, 238, 0.9);
  border-top: 1px solid rgba(200, 182, 155, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 20;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.pchat-tts-btn,
.pchat-mic-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(154, 117, 76, 0.28);
  background: rgba(255, 252, 244, 0.72);
  color: rgba(90, 61, 34, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.pchat-tts-btn:hover,
.pchat-mic-btn:hover {
  background: rgba(255, 252, 244, 0.95);
  border-color: rgba(154, 117, 76, 0.42);
}

.pchat-tts-btn:active,
.pchat-mic-btn:active {
  transform: scale(0.92);
}

.pchat-tts-btn--on {
  color: rgba(126, 143, 104, 0.95);
  border-color: rgba(126, 143, 104, 0.42);
  background: linear-gradient(135deg, rgba(126, 143, 104, 0.16), rgba(198, 143, 66, 0.10));
}

.pchat-tts-btn--off {
  opacity: 0.55;
}

.pchat-mic-btn--recording {
  color: rgba(118, 49, 34, 0.95);
  border-color: rgba(168, 73, 54, 0.45);
  background: linear-gradient(135deg, rgba(168, 73, 54, 0.22), rgba(126, 83, 67, 0.14));
  animation: pchat-mic-pulse 1.2s ease-in-out infinite;
}

.pchat-mic-btn:disabled,
.pchat-tts-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  animation: none;
}

@keyframes pchat-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 73, 54, 0.28); }
  50% { box-shadow: 0 0 0 8px rgba(168, 73, 54, 0); }
}

.pchat-msg-wrap--user .pchat-bubble--voice .pchat-bubble-text {
  font-style: italic;
  color: rgba(78, 62, 47, 0.72);
}

.pchat-msg-wrap--assistant .pchat-bubble--speaking {
  outline: 1px solid rgba(126, 143, 104, 0.35);
}

.pchat-input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 12px;
  border-radius: 18px;
  border: 1px solid rgba(154, 117, 76, 0.28);
  background: rgba(255, 252, 244, 0.72);
  color: rgba(55, 39, 27, 0.92);
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
  outline: none;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  scrollbar-width: none;
  transition: border-color 0.2s, background 0.2s;
}

.pchat-input::-webkit-scrollbar {
  display: none;
}

.pchat-input::placeholder {
  color: rgba(78, 62, 47, 0.45);
}

.pchat-input:focus {
  border-color: rgba(154, 117, 76, 0.48);
  background: rgba(255, 252, 244, 0.92);
}

.pchat-send-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, rgba(198, 143, 66, 0.24), rgba(126, 143, 104, 0.16));
  color: rgba(90, 61, 34, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.pchat-send-btn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(198, 143, 66, 0.34), rgba(126, 143, 104, 0.22));
}

.pchat-send-btn:not(:disabled):active {
  transform: scale(0.92);
}

.pchat-send-btn--stop {
  background: linear-gradient(135deg, rgba(168, 73, 54, 0.28), rgba(126, 83, 67, 0.18));
  color: rgba(118, 49, 34, 0.95);
}

.pchat-send-btn--stop:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(168, 73, 54, 0.38), rgba(126, 83, 67, 0.24));
}

.pchat-send-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* ── 收藏 Toast ── */
.pchat-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(12px);
  padding: 8px 18px;
  border-radius: 100px;
  background: rgba(20, 30, 60, 0.92);
  border: 1px solid rgba(232, 196, 137, 0.35);
  color: rgba(255, 236, 180, 0.95);
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.pchat-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 380px) {
  .pchat-bubble {
    font-size: 13px;
  }
  .pchat-header-name {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pchat-msg-wrap {
    animation: none;
  }
  .pchat-typing span {
    animation: none;
    opacity: 0.7;
  }
}

/* —— 独立设置页 settings.html —— */
html.settings-standalone-html,
html.settings-standalone-html body.settings-standalone-body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.settings-standalone-root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.settings-standalone-main {
  flex: 1;
  padding: 12px 0 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.settings-capsule-card .settings-section-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.settings-hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.settings-radio-group {
  margin: 0;
  padding: 0;
  border: none;
}

.settings-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
}

.settings-radio-row:last-of-type {
  margin-bottom: 0;
}

.settings-radio-row input {
  margin-top: 3px;
  flex-shrink: 0;
}

.settings-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(186, 149, 79, 0.35);
}

.settings-actions .settings-reset-btn {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(214, 197, 170, 0.65);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  color: #4a5568;
  background: rgba(255, 253, 247, 0.95);
  cursor: pointer;
}

.settings-actions .settings-reset-btn:active {
  opacity: 0.92;
}

.settings-status {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  min-height: 1.5em;
}

/* ═══════════════════════════════════════════════════════════
   哲人之局
═══════════════════════════════════════════════════════════ */

/* ── 顶部返回按钮 ── */
.board-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 130;
  pointer-events: auto;
}

.board-back-btn {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 90;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.board-back-icon {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* ── 哲人之局作為獨立頁面：不再像內嵌卡片/浮窗 ── */
body.board-page-active .app {
  grid-template-rows: 1fr;
}

body.board-page-active .top-bar {
  display: contents;
}

body.board-page-active .top-bar h1 {
  display: none;
}

body.board-page-active .content {
  font-family: SimSun, "Songti SC", "STSong", serif;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(80, 40, 120, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(40, 60, 100, 0.22) 0%, transparent 50%),
    linear-gradient(170deg, #0c0b1a 0%, #16102a 45%, #0d1520 100%);
}

body.board-page-active .tab-bar {
  display: none !important;
}

body.board-page-active .board-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.board-page-active .board-top-actions .board-back-btn {
  position: static;
  top: auto;
  left: auto;
}

body.unfinished-book-page-active {
  background: #1f1713;
}

body.unfinished-book-page-active::before {
  display: none;
}

body.unfinished-book-page-active .app {
  grid-template-rows: 1fr;
  background: #1f1713;
}

body.unfinished-book-page-active .top-bar {
  display: contents;
}

body.unfinished-book-page-active .top-bar h1 {
  display: none;
}

body.unfinished-book-page-active .content {
  padding: 0;
  overflow: hidden;
  min-height: 0;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 221, 154, 0.22), transparent 22%),
    linear-gradient(180deg, #1f1713 0%, #3a261b 54%, #17110f 100%);
}

body.unfinished-book-page-active .tab-bar {
  display: none !important;
}

body.unfinished-book-page-active .board-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.unfinished-book-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 130;
}

body.unfinished-book-page-active .unfinished-book-top-actions .board-back-btn {
  position: static;
  top: auto;
  left: auto;
}

body.unfinished-book-page-active .unfinished-book-top-actions .board-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(232, 196, 137, 0.28);
  background: rgba(24, 16, 12, 0.55);
  color: rgba(245, 221, 163, 0.92);
}

.page[data-page="unfinished-book"] {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.page[data-page="unfinished-book"].active {
  display: block;
  height: 100%;
  min-height: 100%;
}

body.story-no-name-ship-page-active {
  background: #06111b;
}

body.story-no-name-ship-page-active .app {
  grid-template-rows: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: #06111b;
}

body.story-no-name-ship-page-active .content {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  overflow: visible;
  background: transparent;
}

body.story-no-name-ship-page-active .top-bar,
body.story-no-name-ship-page-active .tab-bar {
  display: none !important;
}

body.trolley-problem-page-active {
  background: #f3f1ea;
}

body.trolley-problem-page-active::before {
  display: none;
}

body.trolley-problem-page-active .app {
  grid-template-rows: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: #f3f1ea;
}

body.trolley-problem-page-active .content {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.trolley-problem-page-active .top-bar,
body.trolley-problem-page-active .tab-bar {
  display: none !important;
}

.page[data-page="trolley-problem"] {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.page[data-page="trolley-problem"].active {
  display: block;
  height: 100%;
  min-height: 100%;
}

body.trolley-problem-chapter-page-active {
  background: #f7f6f2;
}

body.trolley-problem-chapter-page-active::before {
  display: none;
}

body.trolley-problem-chapter-page-active .app {
  grid-template-rows: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: #f7f6f2;
}

body.trolley-problem-chapter-page-active .content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.trolley-problem-chapter-page-active .content > .trolley-chapter {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

body.trolley-problem-chapter-page-active .top-bar,
body.trolley-problem-chapter-page-active .tab-bar {
  display: none !important;
}

.page[data-page="trolley-problem-chapter"] {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.page[data-page="trolley-problem-chapter"].active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* ── 智慧轨迹（我的子页） ── */
body.wisdom-trajectory-page-active {
  background: #f2efe9;
}

body.wisdom-trajectory-page-active::before {
  background-image: url("./素材/背景底图/轨迹页背景.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: none;
}

body.wisdom-trajectory-page-active .app {
  grid-template-rows: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  background: transparent;
}

body.wisdom-trajectory-page-active .top-bar {
  display: contents;
}

body.wisdom-trajectory-page-active .top-bar h1 {
  display: none;
}

/* 外層相對定位並鎖死；內頁 absolute 填滿後自行滾動 */
body.wisdom-trajectory-page-active .content {
  position: relative;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.wisdom-trajectory-page-active .content > .wisdom-track-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

body.wisdom-trajectory-page-active .tab-bar {
  display: none !important;
}

/* ── 阿卡夏之树 ── */
body.akasha-tree-page-active {
  background: #ebe3d4;
}

body.akasha-tree-page-active::before {
  display: none !important;
}

body.akasha-tree-page-active .app,
body.akasha-tree-page-active .app.app--headerless {
  grid-template-rows: 1fr !important;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  background: #ebe3d4;
}

body.akasha-tree-page-active .content {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  background: #ebe3d4;
}

body.akasha-tree-page-active .content > .akasha-page {
  min-height: 100%;
  height: 100%;
}

body.akasha-tree-page-active .tab-bar {
  display: none !important;
}

/* ── 套餐购买（氪金） ── */
body.package-purchase-page-active {
  background: #ebe4d6;
}

body.package-purchase-page-active::before {
  display: none !important;
}

body.package-purchase-page-active .app,
body.package-purchase-page-active .app.app--headerless {
  grid-template-rows: 1fr !important;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  background: #ebe4d6;
}

body.package-purchase-page-active .content {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  background: #ebe4d6;
}

body.package-purchase-page-active .content > .pkg-page {
  min-height: 100%;
  height: 100%;
}

body.package-purchase-page-active .tab-bar {
  display: none !important;
}

/* Vue 全屏页不应被 legacy 胶囊/流星浮层盖住（show-page 时 backdrop 透明会透出下方页面） */
body.vue-fullpage-active #capsule-overlay.active,
body.vue-fullpage-active #capsule-overlay.show-page {
  display: none !important;
  pointer-events: none !important;
}

body.vue-fullpage-active #meteor-layer.active {
  display: none !important;
  pointer-events: none !important;
}

.board-back-btn:active {
  transform: translateY(1px);
}

.board-back-btn:focus-visible {
  outline: 2px solid rgba(220, 180, 100, 0.66);
  outline-offset: 3px;
}

/* ── 页面背景 ── */
.page[data-page="philosopher-board"].active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(80, 40, 120, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(40, 60, 100, 0.22) 0%, transparent 50%),
    linear-gradient(170deg, #0c0b1a 0%, #16102a 45%, #0d1520 100%);
}

/* ── 外壳 ── */
.board-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 430px;
  min-height: 100%;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 68px) 20px 56px;
  font-family: SimSun, "Songti SC", "STSong", serif;
}

.board-shell--result {
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 42px);
  padding-bottom: 36px;
}

/* ── 视图通用：隐藏/显示 + 淡入 ── */
.board-view {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.board-view[hidden] {
  display: none !important;
}

.board-view-visible {
  opacity: 1;
}

/* ── 答题视图：过渡动画 ── */
.board-quiz-exit {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.board-quiz-enter {
  animation: boardQuizIn 0.28s ease forwards;
}

@keyframes boardQuizIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════
   介绍视图
══════════════════════════ */
.board-intro-view {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 22px 0 28px;
}

.board-intro-icon {
  margin: 0 auto 40px;
  width: 230px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 24px rgba(180, 130, 60, 0.35));
}

.board-intro-img {
  width: 230px;
  height: 230px;
  object-fit: contain;
}

.board-intro-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(196, 155, 80, 0.65);
}

.board-intro-title {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(240, 210, 145, 0.96);
  text-shadow: 0 0 32px rgba(200, 155, 70, 0.35);
}

.board-intro-desc {
  margin: 0;
  max-width: 290px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(235, 216, 176, 0.86);
  letter-spacing: 0.03em;
}

.board-intro-desc span {
  display: block;
}

.board-intro-desc span + span {
  margin-top: 12px;
}

.board-intro-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 72px;
  gap: 32px;
}

.board-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 14px 42px;
  border: 1px solid rgba(224, 173, 88, 0.72);
  border-radius: 999px;
  background: linear-gradient(135deg, #c17825 0%, #8f531a 100%);
  color: #fff4d6;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  box-shadow:
    0 8px 28px rgba(160, 100, 20, 0.35),
    inset 0 1px 0 rgba(255, 220, 140, 0.18);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.board-view-result-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 12px 34px;
  border: 1px solid rgba(212, 163, 82, 0.42);
  border-radius: 999px;
  background: rgba(255, 245, 220, 0.08);
  color: #e8c783;
  font-family: SimSun, "Songti SC", "STSong", serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    transform 0.12s ease;
}

.board-view-result-btn:active {
  transform: translateY(1px);
  background: rgba(180, 140, 70, 0.10);
}

.board-view-result-btn:focus-visible {
  outline: 2px solid rgba(180, 140, 70, 0.5);
  outline-offset: 3px;
}

.board-start-btn:active {
  transform: scale(0.97);
  box-shadow: 0 4px 14px rgba(160, 100, 20, 0.28);
}

.board-start-btn:focus-visible {
  outline: 2px solid rgba(220, 175, 80, 0.7);
  outline-offset: 3px;
}

.board-intro-hint {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: rgba(222, 188, 128, 0.72);
  letter-spacing: 0.06em;
}


/* ══════════════════════════
   测试说明视图
══════════════════════════ */
.board-shell--guide {
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 48px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
}

.board-guide-view {
  position: relative;
  align-items: stretch;
  text-align: center;
  gap: 0;
  padding: 0 4px 12px;
}

.board-guide-view::before {
  content: "";
  position: absolute;
  inset: -120px -40px auto;
  height: 280px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 163, 82, 0.14), transparent 62%),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 42%, rgba(255, 255, 255, 0.04) 0 1px, transparent 2px);
}

.board-guide-emblem {
  position: relative;
  width: min(100%, 280px);
  height: 220px;
  margin: 0 auto 10px;
}

.board-guide-emblem__glow {
  position: absolute;
  inset: 12% 4% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 163, 82, 0.24), transparent 68%);
  filter: blur(12px);
}

.board-guide-emblem__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(212, 163, 82, 0.28));
}

.board-guide-eyebrow {
  margin: 0 0 10px;
  font-family: "Times New Roman", Georgia, "Songti SC", serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.38em;
  color: rgba(214, 178, 108, 0.78);
}

.board-guide-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(248, 232, 196, 0.98);
  text-shadow: 0 0 30px rgba(200, 155, 70, 0.22);
}

.board-guide-star {
  color: rgba(230, 188, 102, 0.92);
  font-size: 13px;
  line-height: 1;
}

.board-guide-copy {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
  text-align: left;
}

.page[data-page="philosopher-board"] .board-guide-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(232, 218, 188, 0.88);
  letter-spacing: 0.02em;
}

.board-guide-meta {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  text-align: left;
}

.board-guide-meta li {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0 18px;
}

.board-guide-meta li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 163, 82, 0.22) 12%,
    rgba(212, 163, 82, 0.22) 88%,
    transparent
  );
}

.board-guide-meta li::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 5px;
  background: rgba(212, 163, 82, 0.55);
  transform: translate(-50%, 50%) rotate(45deg);
}

.board-guide-meta li:last-child::after,
.board-guide-meta li:last-child::before {
  display: none;
}

.board-guide-meta-icon {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.board-guide-meta-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-guide-meta-text {
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.72;
  color: rgba(232, 218, 188, 0.9);
}

.board-guide-prelude {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}

.board-guide-prelude-line {
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 163, 82, 0.34) 35%,
    rgba(212, 163, 82, 0.34) 65%,
    transparent
  );
}

.board-guide-prelude-diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(212, 163, 82, 0.62);
  transform: translate(-50%, -50%) rotate(45deg);
}

.board-guide-prelude-text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(232, 218, 188, 0.86);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.board-guide-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding-top: 2px;
}

.board-guide-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 34px;
  border: 1px solid rgba(240, 196, 118, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, #e2a64a 0%, #c8842d 48%, #a8681d 100%);
  color: #fff8ea;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow:
    0 10px 28px rgba(168, 104, 29, 0.38),
    0 0 36px rgba(212, 163, 82, 0.18),
    inset 0 1px 0 rgba(255, 236, 190, 0.35);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.board-guide-btn__spark {
  font-size: 11px;
  color: rgba(255, 244, 214, 0.9);
  text-shadow: 0 0 8px rgba(255, 236, 190, 0.8);
}

.board-guide-btn:active {
  transform: scale(0.98);
}

.board-guide-btn:focus-visible {
  outline: 2px solid rgba(240, 196, 118, 0.55);
  outline-offset: 3px;
}

/* ══════════════════════════
   答题视图
══════════════════════════ */
.board-quiz-view {
  margin-top: -38px;
  margin-bottom: 38px;
  padding: 18px 0;
  gap: 0;
}

.page[data-page="philosopher-board"] .board-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
}

.board-progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(200, 160, 80, 0.15);
  overflow: hidden;
}

.board-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(180, 120, 40, 0.7) 0%, rgba(220, 170, 70, 0.9) 100%);
  transition: width 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

.board-progress-text {
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(228, 190, 116, 0.86);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 覆蓋 .page p { margin: 0 }，否則題幹下邊距不生效 */
.page[data-page="philosopher-board"] .board-q-scene {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(228, 190, 116, 0.88);
}

.page[data-page="philosopher-board"] .board-q-text {
  margin: 0;
  padding-bottom: 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: #f3e2be;
  letter-spacing: 0.04em;
}

.board-options {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page[data-page="philosopher-board"] .board-options {
  padding-top: 24px;
}

.board-option-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 17px 16px;
  border: 1px solid rgba(212, 163, 82, 0.38);
  border-radius: 16px;
  background: rgba(255, 245, 220, 0.09);
  color: #f3ddb5;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.12s ease;
}

.board-option-btn:active {
  transform: scale(0.985);
}

.board-option-btn:hover {
  background: rgba(200, 155, 70, 0.16);
  border-color: rgba(226, 180, 96, 0.58);
}

.board-option-btn:focus-visible {
  outline: 2px solid rgba(200, 155, 70, 0.6);
  outline-offset: 2px;
}

.board-option-btn.board-option-selected {
  background: rgba(188, 118, 32, 0.34);
  border-color: rgba(234, 184, 91, 0.78);
  color: #fff1c7;
}

.board-option-btn:disabled {
  cursor: default;
}

.board-option-label {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(224, 174, 86, 0.58);
  background: rgba(180, 130, 50, 0.22);
  color: #e8b85e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
  margin-top: 1px;
}

.board-option-selected .board-option-label {
  background: rgba(180, 120, 40, 0.50);
  border-color: rgba(220, 170, 70, 0.7);
  color: rgba(240, 210, 140, 1);
}

.board-option-text {
  flex: 1;
}

.board-quiz-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
}

.board-prev-question-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 22px;
  border: 1px solid rgba(212, 163, 82, 0.42);
  border-radius: 999px;
  background: rgba(255, 245, 220, 0.08);
  color: #e8c783;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.12s ease;
}

.board-prev-question-btn:active:not(:disabled) {
  transform: translateY(1px);
  background: rgba(180, 140, 70, 0.10);
}

.board-prev-question-btn:focus-visible {
  outline: 2px solid rgba(180, 140, 70, 0.5);
  outline-offset: 3px;
}

.board-prev-question-btn:disabled {
  cursor: default;
  opacity: 0.36;
}

/* ══════════════════════════
   结果视图
══════════════════════════ */
.board-result-view {
  gap: 0;
  padding: 0;
  font-family: SimSun, "Songti SC", "STSong", serif;
}

.board-result-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0 30px;
  border-bottom: 1px solid rgba(180, 140, 60, 0.14);
  margin-bottom: 34px;
}

.board-history-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(218, 181, 96, 0.36);
  border-radius: 999px;
  background: rgba(12, 22, 34, 0.58);
  color: rgba(255, 226, 150, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.board-history-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-result-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  margin-bottom: 22px;
  border: 1px solid rgba(200, 155, 70, 0.40);
  border-radius: 999px;
  background: rgba(180, 120, 40, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-result-code {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.34em;
  color: rgba(230, 180, 80, 0.96);
  text-shadow: 0 0 16px rgba(200, 140, 40, 0.42);
}

.page[data-page="philosopher-board"] .board-result-path {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(228, 190, 116, 0.86);
}

.board-result-title {
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f5dfaa;
  line-height: 1.4;
}

.page[data-page="philosopher-board"] .board-result-philosopher {
  margin: 0;
  font-size: 12.5px;
  color: rgba(229, 197, 134, 0.84);
  letter-spacing: 0.06em;
}

.board-result-portrait-wrap {
  width: 150px;
  height: 190px;
  margin-top: 22px;
  border: 1px solid rgba(220, 170, 82, 0.42);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 245, 220, 0.08);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 230, 170, 0.16);
}

.board-result-portrait-wrap[hidden] {
  display: none !important;
}

.board-result-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.board-result-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.board-result-desc {
  padding: 4px 0 2px;
  font-size: 14px;
  line-height: 1.9;
  color: #ead2a7;
  letter-spacing: 0.04em;
}

.page[data-page="philosopher-board"] .board-result-desc p {
  margin: 0 0 18px;
}

.page[data-page="philosopher-board"] .board-result-desc p:last-child {
  margin-bottom: 0;
}

.board-result-section {
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: rgba(255, 240, 200, 0.08);
  border: 1px solid rgba(212, 163, 82, 0.30);
}

.board-result-section--blind {
  background: rgba(130, 70, 62, 0.13);
  border-color: rgba(204, 118, 90, 0.30);
}

.board-result-section-label {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(228, 190, 116, 0.88);
}

.board-result-section--blind .board-result-section-label {
  color: rgba(226, 144, 106, 0.88);
}

.page[data-page="philosopher-board"] .board-result-section-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #ead2a7;
  letter-spacing: 0.03em;
}

.board-result-final-q {
  padding: 22px 20px;
  border-radius: 16px;
  background: rgba(180, 120, 40, 0.16);
  border: 1px solid rgba(220, 170, 82, 0.40);
  text-align: center;
}

.page[data-page="philosopher-board"] .board-result-final-q-label {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(228, 190, 116, 0.86);
}

.page[data-page="philosopher-board"] .board-result-final-q-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
  color: #f5dfa9;
  letter-spacing: 0.04em;
  font-style: italic;
}

.board-result-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0 10px;
}

.board-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid rgba(224, 173, 88, 0.72);
  border-radius: 999px;
  background: linear-gradient(135deg, #c17825 0%, #8f531a 100%);
  color: #fff4d6;
  font-family: SimSun, "Songti SC", "STSong", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow:
    0 6px 22px rgba(160, 100, 20, 0.32),
    inset 0 1px 0 rgba(255, 220, 140, 0.16);
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.board-chat-btn:active {
  transform: scale(0.97);
}

.board-chat-btn:focus-visible {
  outline: 2px solid rgba(220, 175, 80, 0.7);
  outline-offset: 3px;
}

.board-retest-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border: 1px solid rgba(212, 163, 82, 0.42);
  border-radius: 999px;
  background: rgba(255, 245, 220, 0.08);
  color: #e8c783;
  font-family: SimSun, "Songti SC", "STSong", serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.board-retest-btn:active {
  background: rgba(180, 140, 70, 0.10);
  color: rgba(210, 175, 110, 0.88);
}

.board-retest-btn:focus-visible {
  outline: 2px solid rgba(180, 140, 70, 0.5);
  outline-offset: 3px;
}

.board-history-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(6, 10, 16, 0);
  pointer-events: none;
  transition: background 0.24s ease;
}

.board-history-backdrop.is-open {
  background: rgba(6, 10, 16, 0.58);
  pointer-events: auto;
}

.board-history-modal {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  z-index: 901;
  max-height: 76vh;
  overflow-y: auto;
  padding: 18px 18px 20px;
  border: 1px solid rgba(218, 181, 96, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(33, 48, 70, 0.98), rgba(13, 22, 34, 0.99));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  color: rgba(255, 244, 218, 0.94);
  transform: translateY(calc(100% + 24px));
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.board-history-modal.is-open {
  transform: translateY(0);
}

.board-history-close {
  float: right;
  padding: 5px 10px;
  border: 1px solid rgba(218, 181, 96, 0.28);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 226, 150, 0.88);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.board-history-title {
  margin: 0 0 6px;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: 20px;
  letter-spacing: 0.12em;
}

.board-history-subtitle,
.board-history-status,
.board-history-empty {
  margin: 0 0 14px;
  color: rgba(255, 239, 204, 0.64);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.board-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}

.board-history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 13px 14px;
  border: 1px solid rgba(218, 181, 96, 0.18);
  border-radius: 14px;
  background: rgba(255, 246, 218, 0.06);
}

.board-history-time {
  grid-column: 1 / -1;
  color: rgba(255, 226, 150, 0.7);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.board-history-result {
  min-width: 0;
  color: rgba(255, 248, 226, 0.96);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.board-history-code {
  align-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(218, 181, 96, 0.18);
  color: rgba(255, 226, 150, 0.95);
  font-size: 11px;
  font-weight: 700;
}

/* ─── 思维画像 · 思考分析结果（移动版） ─── */
body.thought-profile-page-active .top-bar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-bottom: none;
}

body.thought-profile-page-active.mine-subpage-view:not(.main-tab-bar-visible) .app,
body.thought-profile-page-active .app {
  grid-template-rows: 1fr !important;
}

body.thought-profile-page-active .content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 0;
  background-color: #ebe6dc;
  background-image: url("./素材/背景底图/分析页背景.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

body.thought-profile-page-active .page.active[data-page="thought-profile"] {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.thought-profile-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.thought-profile-top-actions .thought-profile-help-btn {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-color: rgba(26, 43, 60, 0.18);
  background: rgba(255, 252, 246, 0.72);
  color: #1a2b3c;
}


.thought-profile-toolbar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 22px 0;
  box-sizing: border-box;
  background: transparent;
}

.thought-profile-page {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 22px calc(108px + env(safe-area-inset-bottom, 0px));
}

.thought-profile-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.thought-profile-back-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.thought-profile-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #1a2b3c;
  cursor: pointer;
}

.thought-profile-export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.thought-profile-menu {
  position: relative;
}

.thought-profile-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  padding: 6px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(197, 160, 89, 0.22);
}

.thought-profile-menu__item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: #1a2b3c;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.thought-profile-menu__item:hover,
.thought-profile-menu__item:focus-visible {
  background: rgba(197, 160, 89, 0.12);
  outline: none;
}

.tp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(26, 43, 60, 0.92);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.thought-profile-export-icon {
  width: 20px;
  height: 20px;
  color: #c5a059;
}

.tp-loading,
.tp-empty,
.tp-report {
  max-width: 420px;
  margin: 0 auto;
}

.tp-loading {
  padding: 48px 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.tp-header {
  position: relative;
  margin-bottom: 16px;
  padding-top: 2px;
}

.tp-badge {
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.tp-badge--preliminary {
  display: inline-block;
  border: 1px solid rgba(197, 160, 89, 0.5);
  background: rgba(255, 248, 230, 0.88);
  color: #8a6d1d;
}

.tp-title {
  margin: 0;
  color: #1a2b3c;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.tp-title-star {
  margin-right: 6px;
  color: #c5a059;
}

.tp-subtitle {
  margin: 10px 0 0;
  padding-right: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
}

.tp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin-top: 12px;
  color: rgba(26, 43, 60, 0.65);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.tp-meta-date + .tp-meta-count::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  margin-right: 12px;
  background: rgba(197, 160, 89, 0.45);
  vertical-align: middle;
}

.tp-meta-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tp-meta-icon {
  width: 14px;
  height: 14px;
  color: #c5a059;
}

.tp-header-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.tp-card,
.tp-habit-card,
.tp-row-card {
  border: 1px solid rgba(197, 160, 89, 0.28);
  border-radius: 14px;
  background: rgba(255, 252, 246, 0.55);
  box-shadow: 0 4px 14px rgba(86, 61, 38, 0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.tp-card {
  position: relative;
  margin-bottom: 12px;
  padding: 16px 16px 14px;
  overflow: hidden;
}

.tp-card--landscape::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(235, 225, 205, 0.2));
}

.tp-card-label {
  margin: 0 0 10px;
  color: #1a2b3c;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 16px;
  font-weight: 600;
}

.tp-summary-text,
.tp-wisdom-text {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.75;
}

.tp-quill-decor {
  position: absolute;
  right: 12px;
  bottom: 10px;
  opacity: 0.65;
}

.tp-quill-decor img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.tp-module {
  margin-bottom: 14px;
}

.tp-module-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.tp-module-title-star {
  color: #c5a059;
  font-size: 12px;
}

.tp-module-title h3 {
  margin: 0;
  color: #1a2b3c;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 16px;
  font-weight: 600;
}

.tp-habit-grid {
  display: grid;
  gap: 8px;
}

.tp-habit-grid--cols-1,
.tp-habit-grid--cols-2,
.tp-habit-grid--cols-3,
.tp-habit-grid--stack {
  grid-template-columns: minmax(0, 1fr);
}

.tp-habit-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 14px 12px;
  min-height: 0;
  box-sizing: border-box;
}

.tp-habit-body {
  flex: 1;
  min-width: 0;
}

.tp-habit-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 0;
  border-radius: 50%;
  background: rgba(197, 160, 89, 0.12);
  color: #b0891f;
}

.tp-habit-svg {
  width: 18px;
  height: 18px;
}

.tp-habit-card h4,
.tp-habit-text {
  margin: 0 0 6px;
  color: #334155;
  font-family: "STSong", "Songti SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

.tp-habit-desc {
  margin: 0;
  color: #64748b;
  font-family: "STSong", "Songti SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

.tp-module-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.tp-row-card {
  overflow: hidden;
}

.tp-row-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 14px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.tp-row-toggle--static {
  cursor: default;
  padding-bottom: 8px;
}

.tp-row-title {
  flex: 1;
  min-width: 0;
  color: #1a2b3c;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 15px;
  font-weight: 600;
}

.tp-row-chevron {
  flex: 0 0 auto;
  color: rgba(26, 43, 60, 0.35);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.tp-row-card.is-expanded .tp-row-chevron {
  transform: rotate(90deg);
}

.tp-section-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #c5a059;
}

.tp-row-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
}

.tp-row-preview--open {
  padding-top: 0;
}

.tp-row-card.is-expanded .tp-row-preview {
  display: none;
}

.tp-row-body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(217, 201, 176, 0.28);
}

.tp-row-text {
  margin: 12px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
}

.tp-chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.95);
  color: #1a2b3c;
  font-size: 11px;
  line-height: 1.4;
}

.tp-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.tp-list-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}

.tp-list-item + .tp-list-item {
  border-top: 1px solid rgba(217, 201, 176, 0.25);
}

.tp-list-bullet {
  flex: 0 0 auto;
  margin-top: 4px;
}

.tp-bullet--diamond {
  width: 6px;
  height: 6px;
  background: #c5a059;
  transform: rotate(45deg);
  border-radius: 1px;
}

.tp-bullet--check {
  width: 13px;
  height: 13px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(197, 160, 89, 0.15);
  position: relative;
}

.tp-bullet--check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 3px;
  height: 6px;
  border: solid #c5a059;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.tp-bullet--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(197, 160, 89, 0.55);
}

.tp-list-desc {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.tp-featured-question {
  margin: 10px 0 6px;
  color: #1a2b3c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.tp-card--continue {
  border-color: rgba(197, 160, 89, 0.45);
  background: linear-gradient(145deg, rgba(255, 252, 246, 0.95), rgba(255, 248, 230, 0.9));
}

.tp-continue-title {
  margin: 0 0 8px;
  color: #1a2b3c;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 16px;
}

.tp-card--continue p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
}

.tp-continue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tp-continue-btn {
  border: 1px solid rgba(26, 43, 60, 0.12);
  border-radius: 999px;
  padding: 7px 14px;
  background: #1a2b3c;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.tp-continue-btn--ghost {
  background: rgba(255, 252, 246, 0.95);
  color: #1a2b3c;
}

.tp-disclaimer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin: 16px 0 8px;
  padding: 0 8px;
  text-align: left;
  color: rgba(100, 116, 139, 0.85);
  font-size: 10px;
  line-height: 1.55;
}

.tp-disclaimer-icon {
  flex: 0 0 auto;
  color: #c5a059;
  font-size: 11px;
}

.tp-footnote {
  margin: 14px 0 0;
  text-align: center;
  color: rgba(26, 43, 60, 0.62);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.tp-snapshot-entry-wrap {
  margin: 0 0 14px;
  text-align: center;
}

.tp-snapshot-entry {
  border: 1px solid rgba(197, 160, 89, 0.45);
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(255, 252, 246, 0.72);
  color: #1a2b3c;
  font-size: 13px;
  cursor: pointer;
}

.tp-snapshot-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tp-snapshot-drawer[hidden] {
  display: none !important;
}

.tp-snapshot-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(26, 43, 60, 0.28);
  cursor: pointer;
}

.tp-snapshot-drawer-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: min(88vh, 720px);
  border-radius: 18px 18px 0 0;
  background: rgba(255, 252, 246, 0.98);
  box-shadow: 0 -8px 28px rgba(86, 61, 38, 0.12);
  display: flex;
  flex-direction: column;
}

.tp-snapshot-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(217, 201, 176, 0.35);
}

.tp-snapshot-drawer-header h3 {
  margin: 0;
  color: #1a2b3c;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 17px;
}

.tp-snapshot-drawer-close {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.tp-snapshot-drawer-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}

.tp-report--snapshot {
  max-width: none;
  margin: 0;
}

.tp-charts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 18px;
}

.tp-chart-card {
  padding: 14px 14px 12px;
  border: 1px solid rgba(197, 160, 89, 0.28);
  border-radius: 16px;
  background: rgba(255, 252, 245, 0.72);
}

.tp-bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.tp-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.tp-bar-label {
  color: #3d3428;
  font-size: 12px;
  line-height: 1.3;
}

.tp-bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(90, 74, 48, 0.1);
}

.tp-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tp-bar-color, #c45c26);
}

.tp-bar-value {
  color: #5e4d38;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tp-chart-note {
  margin: 10px 0 0;
  color: #8a7d6b;
  font-size: 11px;
  line-height: 1.55;
}

.tp-trend-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.tp-trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(197, 160, 89, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #6b5a3e;
  font-size: 12px;
  cursor: pointer;
}

.tp-trend-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tp-chip-color, #8a6d1d);
}

.tp-trend-chip.is-active {
  background: rgba(255, 250, 240, 0.9);
  border-color: var(--tp-chip-color, #c5a059);
  color: #3d3428;
}

.tp-bar-value {
  color: #5e4d38;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tp-chart-note {
  margin: 10px 0 0;
  color: #8a7d6b;
  font-size: 11px;
  line-height: 1.55;
}

.tp-trend-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.tp-trend-chip {
  padding: 4px 10px;
  border: 1px solid rgba(197, 160, 89, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #6b5a3e;
  font-size: 12px;
  cursor: pointer;
}

.tp-trend-chip.is-active {
  background: rgba(197, 160, 89, 0.18);
  color: #5a4618;
}

.tp-line-svg {
  display: block;
  width: 100%;
  height: auto;
}

.tp-chart-axis {
  fill: #8a7d6b;
  font-size: 9px;
}

@media print {
  .thought-profile-toolbar,
  .app-tab-bar,
  .app-header {
    display: none !important;
  }

  body.thought-profile-page-active .content {
    background: #fff;
  }

  .thought-profile-page {
    overflow: visible;
  }
}


/* 说明弹窗 */
.starmap-help-modal,
.board-help-modal,
.unfinished-book-help-modal,
.speculation-hall-help-modal,
.thought-profile-help-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px 16px;
}

/* 避免 display:grid 覆蓋 [hidden]，導致點關閉無效 */
.starmap-help-modal[hidden],
.board-help-modal[hidden],
.unfinished-book-help-modal[hidden],
.speculation-hall-help-modal[hidden],
.thought-profile-help-modal[hidden] {
  display: none !important;
}

.starmap-help-modal__backdrop,
.board-help-modal__backdrop,
.unfinished-book-help-modal__backdrop,
.speculation-hall-help-modal__backdrop,
.thought-profile-help-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 10, 24, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

.starmap-help-modal__panel,
.board-help-modal__panel,
.unfinished-book-help-modal__panel,
.speculation-hall-help-modal__panel,
.thought-profile-help-modal__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: 22px 20px 18px;
  border: 1px solid rgba(232, 196, 137, 0.34);
  border-radius: 16px;
  background: rgba(10, 16, 36, 0.94);
  color: rgba(244, 236, 220, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.starmap-help-modal__close,
.board-help-modal__close,
.unfinished-book-help-modal__close,
.speculation-hall-help-modal__close,
.thought-profile-help-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 221, 163, 0.88);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.starmap-help-modal__title,
.board-help-modal__title,
.unfinished-book-help-modal__title,
.speculation-hall-help-modal__title,
.thought-profile-help-modal__title {
  margin: 0 0 14px;
  color: #f0d9a8;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}

.starmap-help-modal__body p,
.board-help-modal__body p,
.unfinished-book-help-modal__body p,
.speculation-hall-help-modal__body p,
.thought-profile-help-modal__body p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(244, 236, 220, 0.9);
  text-align: justify;
  text-indent: 2em;
}

.starmap-help-modal__footer,
.board-help-modal__footer,
.unfinished-book-help-modal__footer,
.speculation-hall-help-modal__footer,
.thought-profile-help-modal__footer {
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 196, 137, 0.18);
  color: rgba(245, 221, 163, 0.92);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-indent: 0;
  letter-spacing: 0.08em;
}