@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700;750&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&display=swap");/* 冥想数据卡片：CSS 变量主题自适应，不动全局 styles.css */
.medstats {
  width: 100%;
}
.medstats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.medstats-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.medstats-icon {
  color: var(--theme-accent, var(--ink));
  display: inline-flex;
}
.medstats-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.medstats-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.medstats-hint {
  font-size: 12px;
  color: var(--muted);
}
.medstats-error,
.medstats-loading {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 640px) {
  .medstats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 武侠世界 · 水墨审美 */
/* 性能优先：纯 CSS 动画，GPU 合成，无 JS 逐帧计算 */

.wuxia-map,
.wuxia-realm {
  min-height: 100vh;
  padding: 2rem 1.5rem 4rem;
  background: var(--bg, #f6f3ec);
  color: var(--text, #2c2822);
  font-family: "Noto Serif SC", "Songti SC", serif;
  position: relative;
  transition: opacity 0.3s ease;
}

/* 水墨转场 */
.wuxia-fade {
  opacity: 0;
}

/* 宣纸纹理（静态，无动画） */
.wuxia-map::before,
.wuxia-realm::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 4px 4px;
}

/* === 入场动画：IntersectionObserver 加 .wuxia-inview 触发 === */

/* 内容浮现：只用 opacity + translateY，GPU 合成 */
.wuxia-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.wuxia-reveal.wuxia-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 标题逐字：CSS keyframes， stagger 由 animation-delay 控制 */
.wuxia-split .wuxia-char {
  opacity: 0;
  display: inline-block;
}

.wuxia-split.wuxia-inview .wuxia-char {
  animation: wuxia-char-in 0.5s ease forwards;
}

@keyframes wuxia-char-in {
  from {
    opacity: 0.12;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 布局 === */

/* 竖排标题 */
.wuxia-map-title-vertical,
.wuxia-realm-title-vertical {
  writing-mode: vertical-rl;
  font-size: 2.5rem;
  letter-spacing: 0.5rem;
  margin: 0 auto 1rem;
  font-weight: 700;
  min-height: 12rem;
}

.wuxia-map-subtitle,
.wuxia-realm-sub {
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 0.3rem;
  opacity: 0.6;
  margin-bottom: 2rem;
}

/* 为副标题保留 inview 后的可见性 */
.wuxia-map-subtitle.wuxia-inview,
.wuxia-realm-sub.wuxia-inview {
  opacity: 0.6;
}

/* 江湖图 */
.wuxia-map-img {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 0 auto 2rem;
  border-radius: 4px;
}

/* 印章按钮网格 */
.wuxia-realms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .wuxia-realms-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 印章 */
.wuxia-seal {
  aspect-ratio: 1;
  border: 3px solid var(--accent, #a6533c);
  border-radius: 8px;
  background: transparent;
  color: var(--text, #2c2822);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  /* 入场动画的 transition 与 hover 共存：分开写 */
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    box-shadow 0.2s ease;
}

.wuxia-seal.wuxia-inview {
  opacity: 1;
  transform: translateY(0);
}

.wuxia-seal.wuxia-inview:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(166, 83, 60, 0.2);
}

.wuxia-seal:active {
  transform: scale(0.98);
}

.wuxia-seal.visited {
  border-color: var(--accent, #a6533c);
  background: color-mix(in srgb, var(--accent, #a6533c) 8%, transparent);
}

.wuxia-seal-title {
  font-size: 1.25rem;
  font-weight: 700;
  writing-mode: vertical-rl;
  letter-spacing: 0.2rem;
}

.wuxia-seal-sub {
  font-size: 0.7rem;
  opacity: 0.6;
  letter-spacing: 0.1rem;
}

/* 境详情 */
.wuxia-back {
  background: none;
  border: none;
  color: var(--text, #2c2822);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  margin-bottom: 2rem;
  letter-spacing: 0.2rem;
  display: block;
  padding: 0.6rem 1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
}

/* 回江湖图按钮 inview 后保持可见 */
.wuxia-back.wuxia-inview {
  opacity: 0.7;
}

.wuxia-realm-img {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 0 auto 2rem;
  border-radius: 4px;
}

.wuxia-realm-desc {
  text-align: center;
  font-size: 1.1rem;
  line-height: 2;
  max-width: 500px;
  margin: 0 auto 2rem;
  letter-spacing: 0.1rem;
}

/* 朱砂印章 CTA */
.wuxia-seal-btn {
  display: block;
  margin: 0 auto;
  padding: 0.8rem 2.5rem;
  background: var(--accent, #a6533c);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  letter-spacing: 0.4rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  max-width: 300px;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    box-shadow 0.2s ease;
}

.wuxia-seal-btn:hover {
  box-shadow: 0 4px 16px rgba(166, 83, 60, 0.3);
}

/* 进度 */
.wuxia-progress {
  text-align: center;
  margin-top: 3rem;
  font-size: 0.85rem;
  letter-spacing: 0.3rem;
}

.wuxia-progress.wuxia-inview {
  opacity: 0.5;
}

/* 性能：视口外内容跳过渲染 */
.wuxia-realms-grid,
.wuxia-guide {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}
.wuxia-guide {
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 420px;
}

.wuxia-guide-hero {
  margin-top: 0.5rem;
}

.wuxia-guide-img {
  width: 100%;
  max-width: 380px;
  display: block;
  margin: 0 auto 1rem;
  border-radius: 4px;
}

.wuxia-guide-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.5rem;
  margin-bottom: 0.5rem;
}

.wuxia-guide-note {
  font-size: 0.9rem;
  opacity: 0.65;
  letter-spacing: 0.15rem;
  line-height: 1.8;
}

/* 移动端优化 */
@media (max-width: 620px) {
  .wuxia-map-title-vertical,
  .wuxia-realm-title-vertical {
    font-size: 2rem;
    min-height: 10rem;
  }

  .wuxia-realms-grid {
    gap: 0.75rem;
  }

  .wuxia-seal-title {
    font-size: 1.1rem;
  }
}

/* 减少动态：直接显示，无动画 */
@media (prefers-reduced-motion: reduce) {
  .wuxia-reveal,
  .wuxia-split .wuxia-char {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

:root {
  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  color: var(--ink, #20221e);
  background: var(--paper, #f7f6f2);
  font-synthesis: none;
  font-weight: 400;
  --ink: #20221e;
  --muted: #7b7d75;
  --paper: #f7f6f2;
  --line: #e8e8e1;
  --lime: #d4f36e;
  --card: #fffefa;
  --gap: 12px;
  --pad: 24px;
  --theme-skeleton: #ece7d8;
  --theme-skeleton-highlight: #f7f3e8;
  /* 字重变量（2026-10-28 UI 批次，视频 #21 暗色减字重）：昼间默认，
     深色主题在下方深色块里下调一档（光渗效应：白字黑底显粗） */
  --fw-body: 400;
  --fw-strong: 700;
  /* 全站主出入场曲线（视频 #21：出场缓动 cubic-bezier(.16,1,.3,1)） */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes autofill-start {}
input:-webkit-autofill {
  animation-name: autofill-start;
}
/* 深色主题骨架屏：深底 shimmer */
:root[data-theme="midnight"],
:root[data-theme="neon"],
:root[data-theme="moonphase"],
:root[data-theme="chant"],
:root[data-theme="obsidian"],
:root[data-theme="midnight"],
:root[data-theme="guanzhao-night"] {
  --theme-skeleton: #2b3148;
  --theme-skeleton-highlight: #3d4460;
  /* 暗色字重下调一档（400→360 / 700→660，变量驱动，昼主题不变） */
  --fw-body: 360;
  --fw-strong: 660;
}
* {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  /* App 化稳定（2026-10-26 用户要求）：不让滚动链/回弹把整页带走 */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  /* 购买按钮永不被遮挡：兜底横向溢出，避免播放器面板撑出滚动条 */
  overflow-x: clip;
  overscroll-behavior: none;
  /* 双击空白处不再放大页面（配合 viewport 与 gesturestart 拦截） */
  touch-action: manipulation;
  font-weight: var(--fw-body, 400);
}
strong,
b {
  font-weight: var(--fw-strong, 700);
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.55;
}
button {
  border: 0;
  background: none;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--theme-focus, #779b1c);
  outline-offset: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--theme-focus, #91b13d);
  outline-offset: 1px;
}
button,
a,
input,
summary {
  touch-action: manipulation;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button,
a,
input {
  transition:
    background 0.16s,
    color 0.16s,
    opacity 0.16s;
}
button:hover:not(:disabled) {
  filter: brightness(0.97);
}
.site-shell {
  width: 100%;
  height: 100svh;
  min-height: 740px;
  max-width: 1920px;
  margin: auto;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
}
.site-header {
  height: 68px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--theme-line, #d9dcd2);
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease;
  /* 头像下拉遮挡根治（2026-10-28 实测定位）：主题给 header 常驻 backdrop-filter，
     header 因此成为层叠上下文，但本身 static 无 z-index，在根层叠上下文里只按
     DOM 顺序与 main 的卡片层叠上下文同级竞争——卡片在后 → 整块盖住下拉，
     下拉内部 z-index 400 逃不出 header 的上下文（实测 elementFromPoint 命中卡片）。
     解法：header 明确 position+z-index 抬到内容区之上（仍低于音乐条 60/播放层 90/
     课程条 300/全屏播放 400，原生 dialog 走顶层不受影响）。 */
  position: relative;
  z-index: 50;
}
.site-header.scrolled {
  background: var(--theme-header-bg, rgba(255, 254, 250, 0.85));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.brand {
  display: flex;
  align-items: center;
}
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}
.cat {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
}
.brand > span {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.site-header nav {
  display: flex;
  gap: 39px;
  align-items: center;
  margin-left: 80px;
}
.site-header nav a {
  font-size: 16px;
  position: relative;
  padding: 13px 0 16px;
}
.site-header nav a.active {
  font-weight: 700;
}
.site-header nav a.active:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--theme-accent-ink, #c4e348);
}
.header-contact {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header-contact > span {
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-contact i,
.green-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: var(--theme-focus, #56763c);
  border-radius: 50%;
}
.header-contact i {
  flex-shrink: 0;
}
.header-location-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-contact > .button {
  border-radius: 8px;
  padding: 11px 20px;
  min-width: 102px;
  position: relative;
}
.header-contact > .button:before {
  content: "";
  height: 20px;
  width: 1px;
  background: var(--theme-soft, #c3c4bd);
  position: absolute;
  left: -17px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40px;
  font-size: 14px;
  padding: 11px 22px;
  font-weight: 550;
  white-space: nowrap;
  border-radius: 6px;
}
.button.dark {
  color: var(--theme-on-button, #fffefa);
  background: var(--ink);
}
.button.dark:hover {
  background: var(--theme-soft, #363932);
}
.button.ghost-gold {
  color: var(--theme-accent-ink, #c4e348);
  background: transparent;
  border: 1.5px solid var(--theme-accent-ink, #c4e348);
  border-radius: 24px;
}
.button.ghost-gold:hover {
  background: var(--theme-accent-ink, #c4e348);
  color: var(--theme-on-accent, #22261a);
}
/* 右上角用户头像下拉菜单（5A） */
.user-avatar-menu {
  position: relative;
}
.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--theme-soft, #e5f4c6);
  color: var(--theme-muted, #42502e);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--theme-line, #d9dcd2);
  transition: transform 0.15s ease;
}
.avatar-btn:hover {
  transform: scale(1.05);
}
.avatar-btn.is-member {
  border: 2px solid var(--theme-accent-ink, #c4e348);
}
.avatar-dropdown {
  /* 改 fixed 定位：原 absolute 下拉在管理员态被截断只露一小条（疑似祖先层叠/包含块问题，
     静态 CSS 未定位到确切裁剪者）；header 的 backdrop-filter 会成为 fixed 的包含块，
     top:60px 恰好落在标题栏下方，两端一致可用 */
  position: fixed;
  top: 60px;
  right: 20px;
  min-width: 220px;
  background: var(--theme-surface, #fffefa);
  border: 1px solid var(--theme-line, #d9dcd2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 8px;
  z-index: 400;
}
.user-avatar-menu {
  z-index: 400;
}
.avatar-dropdown-head {
  padding: 12px;
  border-bottom: 1px solid var(--theme-line, #d9dcd2);
  margin-bottom: 8px;
}
.avatar-dropdown-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--theme-ink, #2e2820);
}
.avatar-dropdown-email {
  font-size: 12px;
  color: var(--theme-muted, #74776e);
  margin-top: 2px;
  word-break: break-all;
}
.avatar-dropdown-head .member-badge {
  margin-top: 8px;
  display: inline-block;
}
.avatar-dropdown button[role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--theme-ink, #2e2820);
  cursor: pointer;
  text-align: left;
}
.avatar-dropdown button[role="menuitem"]:hover {
  background: var(--theme-soft, #e5f4c6);
}
.profile-dialog p {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
}
.profile-dialog p span:first-child {
  color: var(--theme-muted, #74776e);
  min-width: 48px;
}
.button.lime {
  background: var(--lime);
  color: var(--theme-on-accent, #22261a);
}
.bento-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1.08fr 1.1fr 0.7fr;
  gap: var(--gap);
}
.bento-row {
  display: grid;
  min-height: 0;
  gap: var(--gap);
}
.top-row {
  grid-template-columns: 2.2fr 1fr 0.9fr;
}
.middle-row {
  grid-template-columns: 2fr 1.05fr 0.95fr;
}
.bottom-row {
  grid-template-columns: 1.5fr 1.05fr 1.25fr;
}
.card {
  border: 1px solid var(--line);
  border-radius: 7px;
  min-width: 0;
  position: relative;
  background: var(--card);
  padding: var(--pad);
  overflow: hidden;
}
.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.4;
}
.hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px;
}
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 2;
}
.hero-headline {
  display: block;
  margin: 14px 0 9px;
  position: relative;
  z-index: 1;
}
.hero-headline-main {
  display: block;
  font-size: clamp(54px, 5.5vw, 88px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -2px;
}
.hero-headline-sub {
  display: block;
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  opacity: 0.92;
  margin-top: 4px;
}
.hero-eyebrow .hero-nickname {
  font-size: 0.85em;
  opacity: 0.75;
  margin-left: 6px;
  letter-spacing: 1px;
}
.hero-card h1 {
  font-size: clamp(45px, 4.45vw, 76px);
  line-height: 1.13;
  letter-spacing: -2.5px;
  white-space: pre-line;
  font-weight: 750;
  position: relative;
  z-index: 1;
  margin: 14px 0 9px;
  max-width: 75%;
}
.hero-card h1:before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.75em;
  width: 3.08em;
  height: 0.26em;
  z-index: -1;
  background: var(--lime);
  transform: rotate(-0.8deg);
}
.hero-copy {
  color: var(--theme-muted, #66685f);
  font-size: 16px;
  line-height: 1.65;
  z-index: 1;
}
/* 夜主题：首屏介绍改用正文色，muted 灰褐在墨夜底上对比不足、几乎不可见（2026-11-03） */
:root[data-theme="guanzhao-night"] .hero-copy {
  color: var(--theme-prose);
}
.hero-course-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  z-index: 1;
  flex-wrap: wrap;
}
.hero-course-badges {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 8px;
  z-index: 1;
  flex-wrap: wrap;
}
.hero-course-badges span {
  background: var(--theme-chip, #eef4f6);
  color: var(--theme-accent, #2a9db8);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 12px;
}
.hero-button {
  border-radius: 30px;
  margin-top: auto;
  min-height: 38px;
  letter-spacing: 1px;
  padding: 9px 22px;
}
.hero-bottom-note {
  position: absolute;
  right: 24px;
  bottom: 25px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--theme-muted, #6d7067);
}
.hero-orbit {
  position: absolute;
  right: 5%;
  top: 28%;
  width: 29%;
  height: 27%;
  transform: rotate(-34deg);
  pointer-events: none;
}
.hero-orbit span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--theme-line, #d9dcd2);
  border-radius: 50%;
}
.hero-orbit .hero-orbit-logo {
  position: absolute;
  width: 28px;
  height: 28px;
  /* Centre on the ellipse at 20 degrees; scales with either radius. */
  left: 96.9846%;
  top: 67.101%;
  transform: translate(-50%, -50%);
}
.hero-side-note {
  position: absolute;
  right: 26px;
  bottom: 24%;
  font-family: Georgia, serif;
  color: var(--theme-muted, #8b8b7f);
  letter-spacing: 2px;
  font-size: 10px;
  line-height: 1.5;
}
.photo-card {
  padding: 0;
  background: var(--theme-image-bg, #d8dbc9);
}
.photo-open {
  display: block;
  width: 100%;
  height: 100%;
  /* 2026-10-26 修复：.card-bg 是定位层、按钮是静态流内元素，
     按绘制顺序背景层会盖住照片（桌面端整卡只剩默认底图渐变）。
     按钮升为定位层并抬到背景之上，照片才画得出来。 */
  position: relative;
  z-index: 1;
}
.photo-open > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 0.6s;
}
.photo-open:hover > img {
  transform: scale(1.035);
}
/* 照片卡的标签/说明/编辑钮要压在照片按钮（z-index:1）之上 */
.photo-label,
.photo-caption,
.photo-edit {
  z-index: 2;
}
.photo-label {
  position: absolute;
  top: 19px;
  left: 20px;
  font-size: 12px;
  letter-spacing: 2px;
  color: white;
  background: #25271ce0;
  padding: 5px 9px;
  pointer-events: none;
}
.photo-caption {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 20px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: linear-gradient(transparent, #171b1399);
  color: #fffefa;
}
.photo-caption h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.photo-caption span {
  font-size: 11px;
}
.photo-caption button {
  pointer-events: auto;
  display: grid;
  place-items: center;
  color: var(--ink);
  width: 39px;
  height: 39px;
  background: var(--theme-surface, #fffefa);
  border-radius: 50%;
}
.photo-edit {
  position: absolute;
  top: 15px;
  right: 12px;
}
.clock-card {
  background: var(--theme-clock, #23261f);
  color: var(--theme-clock-ink, #fbfbf5);
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
}
.clock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.clock-top .eyebrow {
  font-size: 9px;
  color: var(--theme-clock-ink, #dddfd4);
  letter-spacing: 1.7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.weather svg {
  color: var(--lime);
}
.weather small {
  font-size: 10px;
  color: var(--theme-clock-ink, #d0d4c6);
  white-space: normal;
}
.clock-digits {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: -5px;
  font-variant-numeric: tabular-nums;
  font-size: clamp(66px, 6.5vw, 112px);
  line-height: 1;
  margin: auto -5px 10px;
  white-space: nowrap;
}
.clock-digits > span {
  color: var(--lime);
}
.clock-date {
  font-size: 15px;
  display: flex;
  gap: 8px;
  align-items: center;
  letter-spacing: 0.5px;
  margin-bottom: auto;
}
.clock-bottom {
  border-top: 1px solid var(--theme-clock-line, #53564b);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--theme-clock-ink, #d9ddd0);
  font-family: "Space Grotesk", sans-serif;
}
.clock-bottom i {
  width: 8px;
  height: 8px;
  background: var(--theme-clock-accent, #d9f89e);
  border-radius: 50%;
  flex-shrink: 0;
}
.clock-bottom .edit-trigger {
  margin-left: auto;
  letter-spacing: normal;
}
.clock-bottom > span {
  min-width: 0;
}
.section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  flex-shrink: 0;
}
.section-top h2 {
  font-size: 18px;
  letter-spacing: -0.5px;
  font-weight: 650;
}
.section-top > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.5;
}
.text-button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.project-card {
  padding: 17px 22px 11px;
  display: flex;
  flex-direction: column;
}
.project-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.project-title h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px;
  letter-spacing: -1.8px;
  line-height: 1.08;
  font-weight: 700;
}
.project-title > span {
  font-size: 11px;
  background: var(--theme-soft, #e7f6b0);
  border-radius: 8px;
  padding: 5px 10px;
}
.project-summary {
  font-size: 15px;
  color: var(--theme-muted, #74776e);
  margin-top: 4px;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-preview {
  flex: 1;
  min-height: 0;
  background: var(--theme-soft, #f3f4f0);
  border: 5px solid var(--theme-line, #f3f4f0);
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
}
.project-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-preview.has-cover {
  border: 0;
  background: transparent;
}
img.project-cover {
  display: block;
}
.demo-window {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--theme-surface, #fdfefb);
  overflow: hidden;
  font-size: 10px;
  pointer-events: none;
}
.demo-window aside {
  background: var(--theme-soft, #eff0ec);
  width: 21%;
  flex-shrink: 0;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.demo-window aside strong {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  margin-bottom: 3px;
}
.demo-window aside strong svg {
  padding: 3px;
  background: var(--theme-soft, #e1edc7);
  width: 27px;
  height: 27px;
  border-radius: 5px;
  color: var(--theme-muted, #759d39);
}
.demo-window aside > span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  padding: 4px 7px;
  color: var(--theme-muted, #595e53);
}
.demo-window aside > span.active {
  background: var(--theme-surface, #fafbf8);
  border-radius: 3px;
  color: var(--ink, #222);
}
.demo-window aside > span.active svg {
  color: var(--theme-accent-ink, #8baa3b);
}
.demo-main {
  flex: 1;
  min-width: 0;
  padding: 7px 13px;
}
.demo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.demo-toolbar > span {
  border: 1px solid var(--theme-line, #e4e7dc);
  border-radius: 4px;
  flex: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  height: 24px;
  color: var(--theme-muted, #999e91);
  padding: 4px 7px;
  font-size: 8px;
}
.demo-toolbar i {
  height: 24px;
  width: 25px;
  display: grid;
  place-items: center;
  background: var(--lime, #d4ef7a);
  border-radius: 4px;
}
.demo-main h3 {
  font-size: 18px;
  letter-spacing: -0.5px;
  margin-top: 10px;
  font-weight: 650;
}
.demo-main p {
  font-size: 8px;
  color: var(--theme-muted, #868c7b);
  margin: 4px 0 8px;
  white-space: nowrap;
  overflow: hidden;
}
.demo-notes {
  display: flex;
  gap: 9px;
}
.demo-notes > div {
  border: 1px solid var(--theme-line, #eceee6);
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 4px;
  padding: 5px;
  min-width: 0;
  flex: 1;
}
.demo-notes img {
  width: 36%;
  height: 62px;
  object-fit: cover;
  border-radius: 3px;
}
.demo-notes span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.demo-notes strong {
  font-size: 8px;
  font-weight: 600;
}
.demo-notes small {
  font-size: 6px;
  color: var(--theme-muted, #9a9e92);
  overflow: hidden;
  white-space: nowrap;
}
.demo-notes em {
  font-size: 7px;
  font-style: normal;
  color: var(--theme-muted, #919687);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}
.article-card {
  display: flex;
  flex-direction: column;
  padding: 17px 20px 12px;
}
.home-articles {
  /* Fit the latest three entries into the card instead of scrolling past one. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  margin-top: 12px;
  gap: 8px;
  overflow: hidden;
}
.home-article {
  container: article-row / size;
  display: flex;
  gap: 17px;
  align-items: center;
  min-height: 0;
  min-width: 0;
  text-align: left;
}
.home-article > img,
.home-article > .image-fallback {
  width: auto;
  height: 100%;
  max-height: 60px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.home-article > span {
  align-self: stretch;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--theme-line, #edede6);
  padding-bottom: 4px;
  gap: 3px;
}
.home-article > span > * {
  flex-shrink: 0;
}
.home-article:last-child > span {
  border-bottom: 0;
}
.home-article strong {
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-article .article-excerpt {
  font-size: 11px;
  line-height: 1.5;
  color: var(--theme-muted, #78816b);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.home-article.untitled .article-excerpt {
  color: var(--ink);
  -webkit-line-clamp: 2;
  font-size: 13px;
}
@container article-row (min-height: 76px) {
  .home-article > span {
    gap: 4px;
  }
  .home-article strong,
  .home-article.untitled .article-excerpt {
    font-size: 14px;
  }
  .home-article .article-excerpt {
    font-size: 12px;
  }
}
.article-time {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.calendar-card {
  display: flex;
  flex-direction: column;
  padding: 17px 21px 18px;
}
.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calendar-top h2 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1.2;
}
.calendar-top .eyebrow {
  font-size: 9px;
  letter-spacing: 1.6px;
}
.month-controls {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--theme-muted, #767a70);
}
.month-controls button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 30px;
}
.month-controls > span {
  font-size: 12px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(22px, 1fr);
  flex: 1;
  gap: 1px;
  align-items: center;
  text-align: center;
  margin-top: 12px;
  font-family: "DM Sans", sans-serif;
  font-variant-numeric: tabular-nums;
}
.calendar-grid span {
  justify-self: center;
  font-size: 12px;
  width: 31px;
  height: 29px;
  display: grid;
  place-items: center;
}
.calendar-grid .weekday {
  color: var(--theme-muted, #8e9186);
  font-size: 12px;
}
.calendar-grid .today {
  background: var(--lime, #dff69a);
  border-radius: 50%;
  font-weight: 650;
}
.calendar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--theme-muted, #787e6d);
  margin-top: 12px;
  text-align: left;
  min-height: 24px;
}
.calendar-footer i {
  width: 8px;
  height: 8px;
  background: var(--lime);
  border-radius: 50%;
}
.checkin-card {
  padding: 16px 23px;
  display: flex;
  flex-direction: column;
}
.checkin-card > .eyebrow {
  font-size: 8px;
  letter-spacing: 1.7px;
}
.checkin-main {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-top: 9px;
}
.checkin-main h2 {
  font-size: 23px;
  letter-spacing: -0.8px;
  font-weight: 650;
  white-space: nowrap;
}
.checkin-greeting {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.checkin-greeting .cat {
  width: 30px;
  height: 30px;
}
.checkin-greeting > span {
  font-size: 11px;
  color: var(--theme-muted, #7e8177);
}
.checkin-main .button {
  font-size: 12px;
  min-width: 108px;
  min-height: 42px;
  padding: 10px 17px;
}
.checkin-main .button:disabled {
  opacity: 1;
  background: var(--theme-soft, #e8eddd);
  color: var(--theme-muted, #747d65);
}
.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--theme-line, #dcded4);
  padding-top: 12px;
  margin-top: auto;
}
.stats-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  border-right: 1px solid var(--theme-line, #e7e8df);
}
.stats-row > div:last-child {
  border: 0;
}
.stats-row strong {
  font-size: 25px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.stats-row span {
  font-size: 11px;
  color: var(--theme-muted, #7e8175);
}
.collection-card {
  padding: 11px 16px;
  display: flex;
  flex-direction: column;
}
.collection-card .section-top h2 {
  font-size: 14px;
  font-weight: 600;
}
.collection-previews {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  margin: 7px 0 8px;
}
.collection-previews button {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
}
.collection-previews img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.collection-caption {
  font-size: 12px;
  font-weight: 550;
}
.collection-filter {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-top: 8px;
}
.collection-filter i {
  width: 8px;
  height: 8px;
  background: var(--lime);
  border-radius: 50%;
  margin-right: -9px;
}
.collection-filter button {
  font-size: 10px;
  color: var(--theme-muted, #7d8174);
}
.music-card {
  padding: 13px 21px 9px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.music-heading {
  display: flex;
  gap: 18px;
  align-items: center;
}
.music-heading > div {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.music-heading .eyebrow {
  font-size: 8px;
  letter-spacing: 1.5px;
}
.music-heading h2 {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.music-heading > .music-actions {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.music-heading > svg,
.music-heading > div:not(.music-actions) {
  flex-shrink: 0;
}
.player-options {
  position: relative;
  z-index: 5;
}
.player-options summary,
.playlist-open {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  list-style: none;
  cursor: pointer;
  padding: 5px;
  color: var(--theme-muted, #7d8272);
  border-radius: 5px;
}
.player-options[open] summary,
.playlist-open:hover {
  background: var(--theme-soft, #eef3e3);
}
.player-options summary::-webkit-details-marker {
  display: none;
}
.playback-mode {
  color: var(--theme-muted, #7d8272);
  border-radius: 5px;
  cursor: pointer;
}
.playback-mode:focus-visible {
  outline: 2px solid var(--theme-focus, #7e9a36);
  outline-offset: 2px;
}
.playback-mode-compact {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  flex-shrink: 0;
}
.playback-mode-compact:hover {
  background: var(--theme-soft, #eef3e3);
}
.playback-mode-field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--theme-line, #d9ddce);
  background: var(--theme-soft, #f4f5ee);
  font-size: 12px;
}
.playback-mode-field > svg {
  flex-shrink: 0;
}
.playback-mode-field > span {
  color: var(--ink);
}
.playback-mode-field > small {
  margin-left: auto;
  font-size: 10px;
}
.playback-mode-field:hover {
  border-color: var(--theme-focus, #7e9a36);
}
.player-popover {
  position: absolute;
  right: 0;
  top: 36px;
  width: 220px;
  border: 1px solid var(--theme-line, #d9ddce);
  box-shadow: 0 8px 28px #20271d18;
  background: var(--theme-surface, #fffefa);
  padding: 15px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-popover label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.player-popover input {
  flex: 1;
  min-width: 0;
  width: 90px;
  accent-color: var(--theme-focus, #7e9a36);
}
.volume-value {
  min-width: 32px;
  color: var(--theme-muted, #7b846d);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.music-player {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-height: 0;
  margin: 10px 0;
}
.album-cover {
  width: 89px;
  height: 89px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.music-info {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}
.music-info > strong {
  font-size: 14px;
  font-weight: 550;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-info > small {
  font-size: 11px;
  color: var(--theme-muted, #83867c);
  display: block;
  margin-top: 5px;
}
.play-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--theme-on-button, #fffefa);
  border-radius: 50%;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 8px;
}
.play-button svg {
  width: 16px;
  height: 16px;
}
.progress {
  display: block;
  width: 100%;
  appearance: none;
  height: 5px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    var(--lime) 0%,
    var(--lime) var(--progress),
    #eee var(--progress),
    #eee 100%
  );
  cursor: pointer;
  margin: 16px 0 5px;
}
.progress::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  background: var(--theme-focus, #a5c543);
  border-radius: 50%;
  opacity: 0;
}
.progress:hover::-webkit-slider-thumb,
.progress:focus-visible::-webkit-slider-thumb {
  opacity: 1;
}
.progress::-moz-range-thumb {
  width: 9px;
  height: 9px;
  background: var(--theme-soft, #a5c543);
  border: 0;
}
.time-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--theme-muted, #7c8074);
  font-variant-numeric: tabular-nums;
}
.social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--theme-line, #e1e3d8);
  padding-top: 11px;
  gap: 13px;
  font-size: 11px;
}
.social-row > a,
.social-row > button:not(.like-button) {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  border-right: 1px solid var(--theme-line, #dcded5);
}
.social-row > a svg:last-child {
  margin-left: auto;
  margin-right: 11px;
}
.social-row > button svg:last-child {
  margin-left: auto;
  margin-right: 11px;
}
.like-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.like-button.liked {
  color: var(--ink);
}
.audio-error {
  font-size: 10px;
  color: var(--theme-danger, #91573a);
  display: flex;
  justify-content: space-between;
  margin: -6px 0 7px;
}
.audio-error button {
  text-decoration: underline;
}
.site-footer {
  min-height: 29px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: var(--theme-muted, #96998d);
  gap: 15px;
  padding: 6px 0;
  /* hejiac 风格：纯文字直接落在页面背景上，无底栏、无背景色 */
  background: transparent;
}
.site-shell:not(.section-shell) > .site-footer {
  margin-top: 8px;
}
.site-footer > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-footer button {
  font-size: 9px;
}
.site-footer a {
  font-size: 9px;
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer > span {
  white-space: nowrap;
}
.footer-divider {
  margin: 0 8px;
}
.site-footer .inline-edit {
  min-height: 20px;
  padding: 0;
  font-size: 9px;
}
.image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--theme-image-bg, #efeee7);
  min-height: 40px;
  color: var(--theme-muted, #8a8e7e);
  font-size: 10px;
  padding: 10px;
  overflow: hidden;
}
.image-fallback button {
  font-size: 10px;
  text-decoration: underline;
}
.photo-open > .image-fallback {
  height: 100%;
}
.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  flex: 1;
  min-height: 100px;
  padding: 25px;
  color: var(--theme-muted, #969b8a);
  font-size: 13px;
  line-height: 1.8;
}
.dialog {
  border: 1px solid var(--theme-line, #dddcd2);
  padding: 0;
  background: var(--theme-surface, #fffefa);
  color: var(--ink);
  border-radius: 15px;
  width: min(560px, calc(100% - 30px));
  max-height: 88svh;
  max-width: 100%;
  box-shadow: 0 35px 100px #171d2533;
  overflow: hidden;
}
.dialog.wide {
  width: min(960px, calc(100% - 48px));
}
.dialog::backdrop {
  background: var(--theme-surface, #1f261d70);
  backdrop-filter: blur(5px);
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 30px 21px;
  border-bottom: 1px solid var(--line);
  background: var(--theme-surface, #fffefa);
}
.dialog-head .eyebrow {
  font-size: 9px;
  display: block;
  color: var(--theme-muted, #8b917e);
  margin-bottom: 8px;
}
.dialog-head h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.8px;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--theme-line, #e5e7de);
  border-radius: 50%;
}
.dialog-body {
  padding: 27px 30px;
  overflow: auto;
  max-height: calc(88svh - 111px);
  overscroll-behavior: contain;
}
.photo-stage {
  position: relative;
  height: min(52svh, 520px);
  background: var(--theme-image-bg, #efeee7);
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.photo-stage > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-stage > button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme-surface, #fffefae8);
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px #1c231518;
}
.photo-prev {
  left: 13px;
}
.photo-next {
  right: 13px;
}
.photo-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 20px;
}
.photo-meta :is(h1, h3) {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 6px;
}
.photo-meta p {
  font-size: 13px;
  color: var(--theme-muted, #777e6b);
  margin-bottom: 7px;
}
.photo-meta small,
.photo-meta > span {
  font-size: 11px;
  color: var(--theme-muted, #8d9283);
}
.source-line {
  font-size: 10px;
  color: var(--theme-muted, #9a9e91);
  line-height: 1.7;
  word-break: break-word;
}
.photo-viewer > .source-line {
  margin-top: 8px;
}
.photo-thumbnails {
  position: relative;
  display: flex;
  gap: 9px;
  margin-top: 17px;
  overflow: auto;
  padding: 4px;
}
.photo-thumbnails button {
  width: 69px;
  height: 55px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.55;
}
.photo-thumbnails button[aria-pressed="true"] {
  outline: 2px solid var(--theme-focus, #92ad47);
  outline-offset: 2px;
  opacity: 1;
}
.photo-thumbnails img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reading-view {
  max-width: 740px;
  margin: auto;
}
.back-link {
  margin-bottom: 22px;
  color: var(--theme-muted, #818775);
}
.reading-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.reading-toolbar > .back-link {
  display: flex;
  width: fit-content;
  min-height: 32px;
  margin-bottom: 0;
}
.reading-view > .eyebrow {
  display: block;
  color: var(--theme-muted, #7b826f);
  font-size: 10px;
  letter-spacing: 1.8px;
}
.reading-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
  margin-bottom: 25px;
}
.reading-view > time {
  color: var(--theme-muted, #8b9280);
  font-size: 11px;
}
.reading-view > :is(h1, h3) {
  font-size: 30px;
  line-height: 1.35;
  margin: 12px 0 17px;
  letter-spacing: -0.8px;
}
.reading-summary {
  font-size: 16px;
  color: var(--theme-muted, #758161);
  line-height: 1.7;
  border-left: 3px solid var(--lime);
  padding-left: 17px;
  margin-bottom: 24px;
}
.prose {
  font-size: 14px;
  line-height: 1.95;
  color: var(--theme-prose, #545c4a);
  white-space: pre-wrap;
}
.prose p {
  margin-bottom: 20px;
}
.article-reading > .article-time + .prose,
.article-reading > .article-time + .reading-summary {
  margin-top: 22px;
}
.article-reading .prose,
.article-reading .reading-summary {
  overflow-wrap: anywhere;
}
.reading-view > .button {
  margin-top: 14px;
}
.article-list {
  display: flex;
  flex-direction: column;
}
.article-list > button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 25px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.article-list > button:first-child {
  padding-top: 0;
}
.article-list img,
.article-list .image-fallback {
  width: 130px;
  height: 98px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.article-list > button > div {
  flex: 1;
  min-width: 0;
}
.article-list time {
  font-size: 10px;
  color: var(--theme-muted, #98a087);
}
.article-list h3 {
  font-size: 19px;
  margin: 5px 0 9px;
  overflow-wrap: anywhere;
}
.article-list p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--theme-muted, #838c75);
  margin: 0 0 10px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-list .untitled p {
  color: var(--ink);
}
.article-date-fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.article-date-fields legend {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--theme-muted, #717c62);
}
.article-date-fields > div:first-of-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.article-date-fields label {
  min-width: 0;
}
.article-date-fields input {
  min-width: 0;
  width: 100%;
}
.article-date-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.article-date-note .text-button {
  font-size: 11px;
  color: var(--theme-muted, #6d7c50);
}
.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.project-list > button {
  border: 1px solid var(--line);
  padding: 25px;
  border-radius: 8px;
  position: relative;
  text-align: left;
}
.project-list > button > img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  margin-top: 15px;
  border-radius: 5px;
}
.project-index {
  font-family: "Space Grotesk";
  font-size: 12px;
  color: var(--theme-muted, #8b957a);
}
.project-list h3 {
  font-size: 30px;
  margin: 14px 0 10px;
}
.project-list p {
  font-size: 13px;
  color: var(--theme-muted, #7e876e);
  line-height: 1.7;
}
.project-list > button > svg {
  position: absolute;
  top: 23px;
  right: 22px;
}
.collection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  gap: 15px;
}
.filter-tabs {
  display: flex;
  gap: 8px;
}
.filter-tabs button {
  font-size: 12px;
  padding: 8px 15px;
  border-radius: 20px;
  background: var(--theme-soft, #f0f1ea);
}
.filter-tabs button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--theme-on-button, #fffefa);
}
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--theme-line, #d5daca);
  padding: 8px 0;
  color: var(--theme-muted, #909a7d);
}
.search-field input {
  border: 0;
  outline: 0;
  background: none;
  width: 150px;
  font-size: 12px;
}
.collection-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.collection-list article {
  position: relative;
  border: 1px solid var(--theme-line, #e7eade);
  border-radius: 8px;
  overflow: hidden;
}
.collection-list article:hover {
  border-color: var(--theme-accent-line, #a7bb7a);
}
.collection-list article:has(.collection-open:focus-visible) {
  outline: 3px solid var(--theme-focus, #779b1c);
  outline-offset: 4px;
}
.collection-open {
  text-align: left;
  font: inherit;
}
.collection-open:hover:not(:disabled) {
  filter: none;
}
.collection-open::after {
  content: "";
  position: absolute;
  inset: 0;
}
.collection-open:focus-visible {
  outline: none;
}
.collection-detail-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
}
.collection-detail {
  overflow-wrap: anywhere;
}
.collection-detail-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70svh;
  object-fit: contain;
  border-radius: 8px;
  margin: 24px 0;
}
.collection-detail .image-fallback {
  min-height: 220px;
}
.collection-detail-source {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.collection-list article > img {
  width: 100%;
  height: 205px;
  object-fit: cover;
  display: block;
}
.collection-list article > div {
  padding: 21px;
}
.small-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--theme-accent-ink, #72844f);
  background: var(--theme-soft, #f0f5e6);
  padding: 3px 7px;
  border-radius: 3px;
}
.collection-list h3 {
  font-size: 20px;
  margin: 9px 0;
}
.collection-list p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--theme-muted, #7a826e);
  margin-bottom: 8px;
}
.collection-list .text-button {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 15px;
}
.about-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.about-heading > .cat {
  width: 55px;
  height: 55px;
}
.about-content p,
.about-text-field {
  font-size: 14px;
  line-height: 1.9;
  color: var(--theme-muted, #767e68);
  margin-bottom: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.about-text-field {
  display: block;
}
.about-text-field > span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--theme-muted, #858d79);
  margin-bottom: 5px;
}
.about-text-field textarea.inline-edit {
  overflow: hidden;
  padding: 5px 7px;
}
.about-content .about-edit-hint {
  font-size: 11px;
  line-height: 1.7;
}
.about-content .about-intro {
  font-size: 21px;
  color: var(--ink);
  font-weight: 500;
}
.about-content .about-motto {
  font-size: 15px;
  border-left: 3px solid var(--lime);
  padding: 14px 19px;
  margin-top: 30px;
  margin-bottom: 0;
  color: var(--theme-prose, #5a6647);
}
.contact-content p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--theme-muted, #788267);
  margin-bottom: 22px;
}
.contact-content > .text-button {
  display: flex;
  margin-top: 20px;
}
.contact-empty {
  padding: 20px;
  background: var(--theme-soft, #f4f6ec);
  border-radius: 8px;
}
.sources-content {
  font-size: 12px;
  line-height: 1.8;
  color: var(--theme-muted, #7b846d);
}
.sources-content > p {
  margin-bottom: 15px;
}
.sources-content h3 {
  font-size: 16px;
  color: var(--ink);
  margin: 25px 0 15px;
}
.sources-content a {
  text-decoration: underline;
}
.sources-content strong {
  font-weight: 500;
  color: var(--theme-prose, #4e5940);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.auth-form > .cat {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  display: block;
}
.auth-form > p {
  font-size: 13px;
  color: var(--theme-muted, #838c76);
  line-height: 1.8;
}
.auth-form label,
.editor-fields label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--theme-muted, #6d775e);
}
.auth-form input,
.editor-fields input:not([type="file"]):not([type="checkbox"]),
.editor-fields textarea,
.editor-fields select {
  width: 100%;
  border: 1px solid var(--theme-input-line, #dde3d2);
  border-radius: 5px;
  padding: 10px 12px;
  color: var(--ink, #30382a);
  background: var(--theme-field, #fdfef9);
  font-size: 13px;
}
.auth-form small,
.editor-fields small {
  font-size: 10px;
  color: var(--theme-muted, #929c83);
  line-height: 1.6;
}
.form-error {
  font-size: 12px !important;
  color: var(--theme-danger, #a34a37) !important;
  line-height: 1.8;
}
.auth-form > .button {
  align-self: flex-start;
}
/* 登录/注册切换 */
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.auth-tabs button {
  border: 1px solid var(--theme-input-line, #dde3d2);
  background: transparent;
  color: var(--theme-muted, #6d775e);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  cursor: pointer;
}
.auth-tabs button.active {
  background: var(--theme-button, #2f3a26);
  border-color: var(--theme-button, #2f3a26);
  color: var(--theme-on-button, #fcfff6);
}
/* 用户管理弹窗 */
.users-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.users-row {
  border: 1px solid var(--theme-line, #dde3d2);
  border-radius: 9px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.users-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  min-width: 0;
}
.users-info strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.users-info > span {
  color: var(--theme-muted, #6d775e);
  overflow: hidden;
  text-overflow: ellipsis;
}
.users-vip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--theme-muted, #6d775e);
}
.users-vip.active {
  color: var(--theme-accent-ink, #4c6b2f);
  font-weight: 600;
}
.users-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.users-actions button {
  border: 1px solid var(--theme-input-line, #dde3d2);
  background: transparent;
  color: var(--ink, #2f3a26);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.users-actions button:disabled {
  opacity: 0.4;
  cursor: default;
}
.users-actions button:not(:disabled):hover {
  border-color: var(--theme-accent-line, #4c6b2f);
}
.admin-bar {
  position: fixed;
  bottom: max(36px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  margin: 0;
  background: var(--theme-chrome, #262f21);
  color: var(--theme-on-chrome, #fcfff6);
  border: 1px solid var(--theme-chrome-line, #65774c);
  border-radius: 9px;
  box-shadow: 0 4px 18px #1a291129;
  font-size: 11px;
  min-width: 370px;
  max-width: calc(100% - 20px);
}
.admin-bar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 8px 7px 13px;
}
.admin-bar-main > span {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.admin-bar-main > div {
  display: flex;
  gap: 7px;
  align-items: center;
}
.admin-bar button {
  padding: 8px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--theme-on-chrome, #e9f0dc);
  white-space: nowrap;
}
.admin-bar .admin-save {
  background: var(--lime);
  color: var(--theme-on-accent, #2e3a1f);
}
.admin-bar .green-dot {
  background: var(--lime);
  width: 6px;
  height: 6px;
}
.save-error {
  border-top: 1px solid var(--theme-chrome-line, #5f6b4e);
  padding: 10px 14px;
  max-width: 560px;
  color: var(--theme-on-chrome, #f1d8b1);
  line-height: 1.6;
  max-height: 25dvh;
  overflow-y: auto;
}
/* Keep the floating dock interactive in a native dialog's top layer. */
.dialog:has(> .admin-bar)[open] {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 200px);
}
.dialog:has(> .admin-bar) > .dialog-head {
  flex-shrink: 0;
}
.dialog:has(> .admin-bar) > .dialog-body {
  min-height: 0;
  max-height: none;
}
body:has(.admin-bar) .toast {
  bottom: max(100px, calc(env(safe-area-inset-bottom) + 70px));
}
.edit-trigger {
  background: var(--theme-soft, #e5f4c6);
  color: var(--theme-muted, #42502e);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 10px;
  white-space: nowrap;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 1px var(--theme-accent-line, #d0e4ae);
}
.page-edit-btn {
  background: var(--theme-soft, #e5f4c6);
  color: var(--theme-muted, #42502e);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--theme-accent-line, #d0e4ae);
}
.page-edit-btn:hover {
  filter: brightness(0.97);
}
.about-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.community-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.inline-edit {
  font: inherit !important;
  letter-spacing: inherit;
  line-height: inherit;
  resize: none;
  display: block;
  background: var(--theme-field, #f4f9e9);
  border: 1px dashed var(--theme-input-line, #a6bc7f) !important;
  color: inherit;
  padding: 2px 5px;
  max-width: 100%;
  border-radius: 3px;
  min-width: 20px;
  width: 100%;
}
.hero-card textarea.inline-edit[aria-label="编辑首页标题"] {
  font-size: clamp(45px, 4.45vw, 76px) !important;
  line-height: 1.13 !important;
  font-weight: 750 !important;
  letter-spacing: -2.5px;
  max-width: 90%;
  margin: 10px 0 7px;
}
.hero-copy .inline-edit {
  min-height: 25px;
  margin: 2px 0;
}
.hero-top .inline-edit {
  width: 70%;
  font-size: 9px !important;
}
.editing-hint {
  position: absolute;
  top: 50px;
  right: 15px;
  font-size: 9px;
  color: var(--theme-muted, #8b9b70);
}
.editor-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 30px;
}
.editor-layout.profile-only {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: auto;
}
.editor-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-self: start;
  position: sticky;
  top: 0;
}
/* 移动端专用：弹窗顶部单行排序提示，桌面端隐藏 */
.editor-reorder-hint-top {
  display: none;
}
.editor-list > button {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  text-align: left;
  padding: 11px 12px;
  border-radius: 5px;
  line-height: 1.6;
}
.editor-list > button small {
  font-family: "Space Grotesk";
  color: var(--theme-muted, #99a487);
}
.editor-list > button.selected {
  background: var(--theme-soft, #eef6dc);
}
.editor-list .add-entry {
  border: 1px dashed var(--theme-line, #c5d6ab);
  color: var(--theme-muted, #7c905a);
  margin-top: 7px;
  justify-content: center;
}
.editor-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.editor-fields textarea {
  resize: vertical;
  line-height: 1.6;
}
.location-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 7px;
  background: var(--theme-soft, #eff5e4);
  color: var(--theme-muted, #52653b);
}
.location-preview svg {
  flex-shrink: 0;
}
.location-preview > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.location-preview strong {
  font-size: 18px;
  color: var(--ink);
}
.location-preview span {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.location-search > div {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.location-search input {
  flex: 1;
  min-width: 0;
}
.location-search .button {
  padding: 10px 14px;
  flex-shrink: 0;
}
.location-editor small,
.location-note,
.location-coordinates p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--theme-muted, #7b876a);
}
.location-results {
  list-style: none;
  margin: -8px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.location-results li + li {
  border-top: 1px solid var(--line);
}
.location-results button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  overflow-wrap: anywhere;
}
.location-results button:hover,
.location-results button:focus-visible {
  background: var(--theme-soft, #eff5e4);
}
.location-results span {
  font-size: 12px;
  color: var(--theme-muted, #737d65);
}
.location-fields-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.location-coordinates {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 12px;
  color: var(--theme-muted, #6d775e);
}
.location-coordinates summary {
  cursor: pointer;
}
.location-coordinates p {
  margin: 12px 0;
}
.location-coordinates .button {
  margin-top: 14px;
  border: 1px solid var(--line);
}
@media (max-width: 480px) {
  .location-fields-row {
    grid-template-columns: 1fr;
  }
}
.entry-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  font-size: 11px;
  color: var(--theme-muted, #899578);
}
.entry-tools > button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
}
.entry-tools .delete-entry {
  margin-left: auto;
  color: var(--theme-danger, #a06a55);
}
.asset-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--theme-muted, #6d775e);
}
.asset-field > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
.editor-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(360px, 45vh);
  object-fit: contain;
  border-radius: 5px;
  background: var(--theme-image-bg, #f5f5ef);
}
.music-cover-preview {
  display: block;
  width: 150px;
  height: 150px;
}
.editor-fields .upload-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--theme-input-line, #cfdabb);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  background: var(--theme-soft, #f3f7eb);
  position: relative;
  overflow: hidden;
}
.upload-button input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.editor-fields .checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.checkbox-label input {
  accent-color: var(--theme-focus, #8ba84e);
}
.editor-done {
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.toast {
  display: flex;
  align-items: center;
  gap: 13px;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--theme-chrome, #262f21);
  color: var(--theme-on-chrome, #f4f9eb);
  border: 1px solid var(--theme-chrome-line, #5c7442);
  box-shadow: 0 8px 25px #1a2a1a20;
  border-radius: 8px;
  padding: 13px 21px;
  font-size: 12px;
  max-width: calc(100% - 30px);
}
.toast .cat {
  width: 28px;
  height: 28px;
  background: var(--theme-surface, #f9f8f0);
  border-radius: 4px;
}
.skip-link {
  position: fixed;
  top: -60px;
  left: 20px;
  z-index: 30;
  padding: 12px 20px;
  background: var(--lime);
}
.skip-link:focus {
  top: 8px;
}
.loading-page {
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  text-align: center;
}
.loading-page > .cat {
  width: 70px;
  height: 70px;
}
.loading-page > .breath-loader {
  width: 104px;
  height: 104px;
}
.loading-page > .breath-loader img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.toast-breath {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.toast-breath img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.loading-page h1 {
  font-size: 24px;
  font-weight: 500;
}
.loading-page p {
  font-size: 13px;
  color: var(--theme-muted, #929c83);
}
.refresh-indicator {
  position: fixed;
  bottom: 8px;
  right: 20px;
  font-size: 10px;
  color: var(--theme-muted, #79896a);
}
@media (min-width: 1550px) {
  :root {
    --pad: 27px;
  }
  .site-shell {
    padding: 0 32px;
  }
  .site-header {
    height: 68px;
  }
  .hero-card {
    padding: 24px;
  }
  .hero-card h1 {
    font-size: 70px;
  }
  .hero-copy {
    font-size: 17px;
  }
  .clock-digits {
    font-size: 110px;
  }
  .clock-date {
    font-size: 17px;
  }
  .project-title h2 {
    font-size: 43px;
  }
  .project-summary {
    font-size: 16px;
  }
  .demo-window aside {
    gap: 6px;
    padding-top: 9px;
  }
  .demo-main {
    padding: 8px 15px;
  }
  .demo-main h3 {
    font-size: 20px;
    margin-top: 12px;
  }
  .demo-notes img {
    height: 73px;
  }
  .demo-notes strong {
    font-size: 9px;
  }
  .demo-main p {
    font-size: 9px;
  }
  .home-article > img,
  .home-article > .image-fallback {
    max-height: 72px;
  }
  .calendar-grid span {
    font-size: 13px;
    height: 32px;
  }
  .checkin-main h2 {
    font-size: 26px;
  }
  .checkin-greeting > span {
    font-size: 12px;
  }
  .checkin-main .button {
    font-size: 13px;
    min-width: 120px;
  }
  .stats-row {
    padding-top: 16px;
  }
  .stats-row strong {
    font-size: 27px;
  }
  .stats-row span {
    font-size: 12px;
  }
  .album-cover {
    width: 101px;
    height: 93px;
  }
  .music-info > strong {
    font-size: 15px;
  }
  .music-info > small {
    font-size: 12px;
  }
  .music-player {
    gap: 20px;
  }
  .social-row {
    font-size: 12px;
    padding-top: 12px;
  }
  .collection-caption {
    font-size: 13px;
  }
}
@media (max-height: 830px) and (min-width: 1101px) {
  .site-shell {
    min-height: 740px;
  }
  .site-header {
    height: 60px;
  }
  .hero-card h1 {
    font-size: 49px;
  }
  .hero-copy {
    font-size: 13px;
  }
  .hero-card {
    padding-top: 17px;
  }
  .clock-digits {
    font-size: 76px;
  }
  .clock-top .eyebrow {
    font-size: 8px;
  }
  .clock-date {
    font-size: 13px;
  }
  .hero-button {
    min-height: 32px;
    font-size: 12px;
  }
  .project-title {
    margin-top: 8px;
  }
  .project-title h2 {
    font-size: 32px;
  }
  .project-summary {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .demo-main h3 {
    font-size: 15px;
    margin-top: 6px;
  }
  .demo-notes img {
    height: 43px;
  }
  .demo-main p {
    margin-bottom: 4px;
  }
  .calendar-grid {
    margin-top: 6px;
  }
  .calendar-grid span {
    height: 24px;
    font-size: 11px;
  }
  .calendar-top h2 {
    font-size: 20px;
  }
  .calendar-footer {
    margin-top: 6px;
  }
  .checkin-main h2 {
    font-size: 20px;
  }
  .checkin-greeting .cat {
    width: 24px;
    height: 24px;
  }
  .checkin-greeting > span {
    font-size: 10px;
  }
  .stats-row {
    padding-top: 9px;
  }
  .stats-row strong {
    font-size: 23px;
  }
  .album-cover {
    width: 70px;
    height: 70px;
  }
  .music-player {
    gap: 12px;
    margin: 6px 0;
  }
  .music-heading h2 {
    font-size: 12px;
  }
  .music-heading > svg {
    width: 22px;
  }
  .progress {
    margin-top: 10px;
  }
  .social-row {
    padding-top: 7px;
  }
  .play-button {
    width: 33px;
    height: 33px;
  }
  .checkin-card {
    padding: 13px 18px;
  }
  .checkin-main {
    margin-top: 6px;
  }
  .collection-card {
    padding: 10px 13px;
  }
  .collection-filter {
    margin-top: 5px;
  }
  .collection-previews {
    margin-top: 6px;
    margin-bottom: 5px;
  }
}
@media (max-width: 1200px) and (min-width: 1101px) {
  .site-shell {
    padding: 0 20px;
  }
  .site-header nav {
    gap: 24px;
    margin-left: 10px;
  }
  .header-contact {
    gap: 24px;
  }
  .header-contact > span {
    font-size: 10px;
  }
  .card {
    padding: 18px;
  }
  .hero-card h1 {
    font-size: 46px;
  }
  .hero-copy {
    font-size: 13px;
  }
  .hero-bottom-note {
    font-size: 7px;
    right: 15px;
  }
  .hero-side-note {
    right: 17px;
  }
  .clock-card {
    padding: 20px;
  }
  .clock-digits {
    font-size: 79px;
  }
  .clock-top .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .weather {
    font-size: 12px;
  }
  .weather svg {
    width: 18px;
  }
  .home-article {
    gap: 10px;
  }
  .checkin-main {
    gap: 8px;
  }
  .checkin-main h2 {
    font-size: 19px;
  }
  .checkin-main .button {
    padding: 10px;
    min-width: 91px;
    font-size: 10px;
  }
  .checkin-greeting {
    gap: 6px;
  }
  .checkin-greeting > span {
    font-size: 9px;
  }
  .collection-card {
    padding: 12px;
  }
  .music-card {
    padding: 13px;
  }
  .album-cover {
    width: 67px;
    height: 74px;
  }
  .music-player {
    gap: 10px;
  }
  .social-row > a,
  .social-row > button:not(.like-button) {
    gap: 8px;
  }
}
@media (max-width: 1100px) {
  .site-shell {
    height: auto;
    min-height: 100svh;
    padding: 0 22px;
  }
  .site-header {
    height: 80px;
  }
  .brand > span {
    font-size: 35px;
  }
  .site-header nav {
    gap: 22px;
    margin-left: 0;
  }
  .header-contact > span {
    display: none;
  }
  .header-contact > .button:before {
    display: none;
  }
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 14px;
  }
  .bento-row {
    display: contents;
  }
  .card {
    min-height: 280px;
  }
  .hero-card {
    grid-column: span 2;
    height: 350px;
  }
  .hero-card h1 {
    font-size: 66px;
  }
  .hero-copy {
    font-size: 16px;
  }
  .hero-orbit {
    right: 8%;
    width: 25%;
    height: 32%;
  }
  .hero-side-note {
    right: 8%;
  }
  .hero-card .hero-button {
    margin-top: 15px;
  }
  .photo-card {
    height: 310px;
  }
  .clock-card {
    height: 310px;
  }
  .clock-digits {
    font-size: 95px;
  }
  .project-card {
    grid-column: span 2;
    height: 340px;
  }
  .demo-window aside {
    width: 22%;
  }
  .demo-notes img {
    height: 77px;
  }
  .demo-main h3 {
    margin-top: 15px;
  }
  .demo-main p {
    margin-bottom: 13px;
  }
  .article-card,
  .calendar-card {
    height: 320px;
  }
  .checkin-card,
  .collection-card {
    height: 255px;
    min-height: 255px;
  }
  .checkin-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .checkin-main .button {
    align-self: flex-end;
    margin-top: -27px;
  }
  .checkin-greeting > span {
    font-size: 10px;
    max-width: 150px;
  }
  .stats-row {
    margin-top: 18px;
  }
  .collection-card .collection-previews {
    max-height: 146px;
  }
  .music-card {
    grid-column: span 2;
    height: 225px;
    min-height: 225px;
  }
  .music-player {
    max-width: 750px;
    width: 100%;
  }
  .album-cover {
    width: 90px;
    height: 86px;
  }
  .music-info {
    max-width: 560px;
  }
  .social-row {
    justify-content: flex-start;
    gap: 30px;
  }
  .social-row > a,
  .social-row > button:not(.like-button) {
    flex: initial;
    min-width: 160px;
  }
  .site-footer {
    height: 55px;
    font-size: 9px;
  }
  .site-footer > div {
    gap: 12px;
  }
}
@media (max-width: 620px) {
  :root {
    --pad: 21px;
  }
  .site-shell {
    padding: 0 14px;
  }
  .site-header {
    height: auto;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px 8px;
  }
  .brand > span {
    font-size: 24px;
    letter-spacing: 0.5px;
  }
  .site-header nav {
    gap: 22px;
    margin-left: 0;
    width: 100%;
    order: 3;
  }
  .site-header nav a {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 8px 0;
    white-space: nowrap;
  }
  .site-header nav a.active {
    font-weight: 700;
  }
  .header-contact {
    margin-left: auto;
  }
  .header-contact > .button {
    min-width: 80px;
    min-height: 34px;
    font-size: 12px;
    padding: 8px 13px;
  }
  .site-header nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    padding: 0 7px;
  }
  .site-header nav a {
    font-size: 13px;
    padding: 10px 5px 15px;
  }
  .bento-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }
  /* 手机端卡片：更大圆角，更多呼吸感 */
  .card {
    border-radius: 20px;
  }
  /* 手机端卡片重排：Hero 第一，其余按 JS displayOrder（最新讯息第二，用户 11 项拍板），其余按原顺序 */
  .bento-grid > * > * {
    order: 3;
  }
  .bento-grid .hero-card {
    order: 1;
  }
  .card,
  .hero-card,
  .project-card,
  .music-card {
    grid-column: auto;
  }
  .hero-card {
    height: 355px;
    padding: 23px;
  }
  .hero-card h1 {
    font-size: 49px;
    max-width: 95%;
    letter-spacing: -1.8px;
    margin-top: 20px;
  }
  .hero-copy {
    font-size: 13px;
    max-width: 100%;
    margin-top: 5px;
  }
  .hero-card .hero-button {
    margin-top: 23px;
    font-size: 12px;
    min-height: 37px;
  }
  .hero-orbit {
    right: 5%;
    top: 39%;
    width: 25%;
    height: 20%;
    opacity: 0.5;
  }
  .hero-orbit .hero-orbit-logo {
    width: 18px;
    height: 18px;
  }
  .hero-side-note {
    font-size: 7px;
    bottom: 23%;
    right: 22px;
    opacity: 0.7;
  }
  .hero-bottom-note {
    bottom: 23px;
    right: 23px;
    font-size: 7px;
    letter-spacing: 1px;
  }
  .hero-top .eyebrow {
    font-size: 8px;
    letter-spacing: 1.8px;
  }
  .photo-card {
    height: 330px;
  }
  .clock-card {
    height: 280px;
    padding: 24px;
  }
  .clock-digits {
    font-size: 96px;
  }
  .clock-top .eyebrow {
    font-size: 9px;
  }
  .clock-date {
    font-size: 15px;
  }
  .project-card {
    height: 319px;
    padding: 18px 17px 13px;
  }
  .project-card .section-top .eyebrow {
    font-size: 8px;
    letter-spacing: 1.1px;
  }
  .project-title h2 {
    font-size: 35px;
  }
  .project-summary {
    font-size: 13px;
  }
  .demo-window aside {
    width: 24%;
    padding: 5px 2px;
  }
  .demo-window aside strong {
    font-size: 9px;
    gap: 4px;
  }
  .demo-window aside strong svg {
    width: 22px;
    height: 22px;
  }
  .demo-window aside > span {
    font-size: 8px;
    padding: 4px;
    gap: 6px;
  }
  .demo-main {
    padding: 6px 8px;
  }
  .demo-toolbar > span {
    font-size: 7px;
  }
  .demo-main h3 {
    font-size: 15px;
    margin-top: 14px;
  }
  .demo-main p {
    font-size: 6px;
    margin-bottom: 12px;
  }
  .demo-notes {
    gap: 6px;
  }
  .demo-notes > div {
    padding: 4px;
    gap: 5px;
  }
  .demo-notes img {
    height: 55px;
    width: 37%;
  }
  .demo-notes strong {
    font-size: 7px;
  }
  .demo-notes small {
    font-size: 5px;
  }
  .demo-notes em {
    font-size: 6px;
    margin-top: 2px;
  }
  .article-card {
    height: 328px;
    padding: 20px;
  }
  .calendar-card {
    height: 336px;
    padding: 22px;
  }
  .calendar-grid span {
    font-size: 13px;
    height: 32px;
  }
  .calendar-footer {
    font-size: 12px;
  }
  .checkin-card {
    height: 251px;
    padding: 20px;
  }
  .checkin-main {
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
  }
  .checkin-main h2 {
    font-size: 21px;
  }
  .checkin-main .button {
    margin-top: 0;
    align-self: center;
    min-width: 100px;
    padding: 10px 11px;
    font-size: 11px;
  }
  .checkin-greeting {
    gap: 8px;
    margin-top: 11px;
  }
  .checkin-greeting > span {
    font-size: 10px;
    max-width: 135px;
    line-height: 1.7;
  }
  .checkin-greeting .cat {
    width: 27px;
    height: 27px;
  }
  .stats-row {
    margin-top: auto;
    padding-top: 16px;
  }
  .stats-row strong {
    font-size: 26px;
  }
  .collection-card {
    height: 255px;
    padding: 17px 19px;
  }
  .collection-previews {
    margin-top: 13px;
    max-height: 142px;
  }
  .collection-caption {
    font-size: 13px;
  }
  .collection-filter {
    margin-top: 10px;
  }
  .collection-filter button {
    font-size: 11px;
  }
  .music-card {
    height: 239px;
    padding: 19px;
  }
  .music-player {
    gap: 14px;
    margin: 13px 0;
  }
  .album-cover {
    height: 85px;
    width: 77px;
  }
  .music-info > strong {
    font-size: 13px;
  }
  .music-info > small {
    font-size: 10px;
  }
  .play-button {
    width: 35px;
    height: 35px;
  }
  .social-row {
    gap: 13px;
    padding-top: 11px;
  }
  .social-row > a,
  .social-row > button:not(.like-button) {
    min-width: 0;
    flex: 1;
    gap: 9px;
  }
  .social-row > a svg:last-child,
  .social-row > button svg:last-child {
    margin-right: 10px;
  }
  .site-footer {
    height: auto;
    min-height: 91px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 13px;
    padding: 7px 5px;
  }
  .site-footer > div {
    flex-wrap: wrap;
    gap: 16px;
  }
  .dialog.wide,
  .dialog {
    width: calc(100% - 18px);
    max-height: 93svh;
    border-radius: 12px;
  }
  .dialog-head {
    padding: 21px 19px 18px;
  }
  .dialog-head h2 {
    font-size: 21px;
  }
  .dialog-head .eyebrow {
    font-size: 8px;
    letter-spacing: 1.3px;
    max-width: 260px;
  }
  .dialog-body {
    padding: 22px 19px;
    max-height: calc(93svh - 104px);
  }
  .photo-stage {
    height: 42svh;
  }
  .photo-meta :is(h1, h3) {
    font-size: 17px;
  }
  .photo-meta p {
    font-size: 12px;
  }
  .photo-meta small {
    font-size: 10px;
  }
  .article-list > button {
    gap: 13px;
  }
  .article-list img,
  .article-list .image-fallback {
    width: 78px;
    height: 85px;
  }
  .article-list h3 {
    font-size: 15px;
  }
  .article-list p {
    font-size: 11px;
  }
  .article-list > button > svg {
    width: 15px;
    flex-shrink: 0;
  }
  .project-list,
  .collection-list {
    grid-template-columns: 1fr;
  }
  .collection-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-tabs {
    justify-content: space-between;
  }
  .filter-tabs button {
    padding: 8px 18px;
  }
  .search-field input {
    width: 100%;
  }
  .reading-cover {
    height: 190px;
  }
  .reading-view > :is(h1, h3) {
    font-size: 25px;
  }
  .reading-summary {
    font-size: 14px;
  }
  .prose {
    font-size: 13px;
  }
  .admin-bar {
    bottom: max(12px, env(safe-area-inset-bottom));
    min-width: 0;
    width: calc(100% - 22px);
  }
  .admin-bar-main {
    gap: 5px;
    font-size: 10px;
    padding-left: 10px;
  }
  .admin-bar button {
    padding: 8px;
    font-size: 10px;
  }
  .admin-bar-main > div {
    gap: 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-bar-main > div::-webkit-scrollbar {
    display: none;
  }
  .admin-bar-main > div > button {
    flex-shrink: 0;
  }
  .editor-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .editor-list {
    position: static;
    display: flex;
    flex-direction: row;
    overflow: auto;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
  }
  .editor-list > button {
    flex-shrink: 0;
    max-width: 185px;
    padding: 9px;
    font-size: 10px;
  }
  .editor-list > button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .editor-list .add-entry {
    margin-top: 0;
  }
  /* 小屏幕：列表内挤压的排序提示隐藏，改在弹窗顶部显示单行提示 */
  .editor-list .editor-reorder-hint {
    display: none;
  }
  .editor-reorder-hint-top {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 10px;
    opacity: 0.55;
    font-size: 12px;
  }
  .hero-card textarea.inline-edit[aria-label="编辑首页标题"] {
    font-size: 44px !important;
    max-width: 100%;
  }
  .toast {
    width: max-content;
    font-size: 11px;
    padding: 12px 15px;
    bottom: 14px;
    line-height: 1.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Keep the complete desktop composition inside the viewport. */
@media (min-width: 1101px) {
  .site-shell:not(.section-shell) {
    min-height: 0;
  }
  .site-shell:not(.section-shell) > .site-footer {
    height: 24px;
    margin-top: 4px;
  }
  .bento-grid {
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 1.1fr) minmax(0, 0.85fr);
  }
  .bento-row {
    grid-template-rows: minmax(0, 1fr);
  }
  .hero-card h1 {
    font-size: clamp(48px, 4.18vw, 70px);
    line-height: 1.09;
    margin-top: 11px;
    margin-bottom: 8px;
  }
  .hero-copy {
    font-size: 14px;
    line-height: 1.6;
  }
  .hero-card {
    padding-top: 21px;
    padding-bottom: 21px;
  }
  .hero-button {
    min-height: 36px;
    font-size: 13px;
    padding: 8px 21px;
    flex-shrink: 0;
  }
  .checkin-main h2 {
    font-size: 22px;
  }
  .checkin-main {
    margin-top: 7px;
  }
  .checkin-greeting {
    margin-top: 5px;
  }
  .stats-row {
    padding-top: 10px;
  }
  .calendar-grid {
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
  }
  .calendar-grid span {
    height: 27px;
  }
  .calendar-footer {
    margin-top: 9px;
    min-height: 21px;
    flex-shrink: 0;
  }
  .collection-filter {
    margin-top: 6px;
  }
  .music-player {
    margin: 7px 0;
  }
  .album-cover {
    width: 83px;
    height: 80px;
    max-height: 100%;
  }
  .music-card {
    min-height: 0;
    padding-top: 12px;
  }
  .music-heading h2 {
    font-size: 13px;
  }
  .music-info > strong {
    font-size: 13px;
  }
  .social-row {
    padding-top: 8px;
  }
  .social-row .like-button {
    height: 25px;
  }
  .demo-main h3 {
    margin-top: 8px;
  }
  .demo-main p {
    margin-bottom: 7px;
  }
  .demo-notes img {
    height: 53px;
  }
  .demo-notes strong {
    font-size: 8px;
  }
}
@media (min-width: 1550px) {
  .hero-copy {
    font-size: 17px;
  }
  .hero-card h1 {
    font-size: 68px;
    margin-top: 13px;
    margin-bottom: 8px;
  }
  .hero-button {
    min-height: 40px;
    font-size: 15px;
  }
  .checkin-main h2 {
    font-size: 26px;
  }
  .checkin-greeting {
    margin-top: 9px;
  }
  .stats-row {
    padding-top: 15px;
  }
  .album-cover {
    width: 99px;
    height: 93px;
  }
  .music-info > strong {
    font-size: 15px;
  }
  .music-heading h2 {
    font-size: 14px;
  }
  .music-player {
    margin: 9px 0;
  }
  .demo-notes img {
    height: 70px;
  }
  .demo-main h3 {
    margin-top: 12px;
  }
  .demo-main p {
    margin-bottom: 9px;
  }
}
@media (max-width: 620px) {
  .calendar-grid {
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
  }
  .calendar-grid span {
    height: 29px;
  }
  .calendar-footer {
    flex-shrink: 0;
  }
  .hero-card .inline-edit[aria-label="编辑首页标题"] {
    line-height: 1.1 !important;
  }
}
.hero-card h1 {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  overflow-wrap: anywhere;
}
.headline-primary,
.headline-secondary {
  display: block;
}
.headline-primary {
  line-height: 1.05;
}
.headline-secondary {
  font-size: 0.76em;
  line-height: 1.13;
  margin-top: 5px;
  letter-spacing: -1.5px;
}
.hero-copy {
  min-height: 0;
  flex-shrink: 0;
  overflow: visible;
}
.hero-copy p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-title {
  min-width: 0;
}
.project-title h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.project-title > span {
  flex-shrink: 0;
}
.sources-content p {
  overflow-wrap: anywhere;
}
.photo-caption h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brand {
  min-width: 0;
}
.brand > span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  white-space: nowrap;
}
.collection-previews img {
  object-position: center top;
}
.hero-copy {
  width: 82%;
}
.hero-card textarea.inline-edit[aria-label="编辑首页标题"] {
  height: 2.35em;
  min-height: 2.35em;
  font-size: clamp(48px, 4.18vw, 70px) !important;
  line-height: 1.09 !important;
  flex-shrink: 0;
}
.hero-copy .inline-edit {
  height: 1.8em;
  min-height: 1.8em;
}
.site-footer button {
  white-space: nowrap;
  flex-shrink: 0;
}
.site-footer .inline-edit {
  width: 180px;
  line-height: 1.5;
  max-height: 22px;
}
.site-footer > div {
  min-width: 0;
}
@media (max-width: 620px) {
  .hero-copy {
    width: 100%;
  }
  .hero-card textarea.inline-edit[aria-label="编辑首页标题"] {
    font-size: 44px !important;
  }
  .site-footer .inline-edit {
    max-width: 145px;
  }
}
/* The portrait overlaps the upper-left arc of the existing orbit. */
.hero-celestial:not(.has-avatar) {
  display: contents;
}
.hero-celestial.has-avatar {
  position: absolute;
  right: 5%;
  top: 9%;
  width: 30%;
  max-width: 230px;
  aspect-ratio: 1;
  pointer-events: none;
}
.hero-celestial.has-avatar .hero-orbit {
  width: 100%;
  height: 65%;
  right: 0;
  top: 17.5%;
  z-index: 1;
  opacity: 1;
}
.hero-celestial.has-avatar .hero-orbit span {
  border-color: var(--theme-line, #cbd0bc);
}
.hero-celestial.has-avatar .hero-orbit .hero-orbit-logo {
  z-index: 3;
}
.hero-avatar {
  position: absolute;
  inset: 18%;
  transform: translate(-9%, -9%);
  width: 64%;
  height: 64%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--card);
  box-shadow: 0 0 0 1px var(--theme-line, #e0e3d5);
  z-index: 2;
  pointer-events: auto;
  background: var(--theme-soft, #e4e4d4);
}
.hero-avatar img,
.hero-avatar .image-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.hero-avatar .image-fallback {
  display: flex;
  font-size: 8px;
  padding: 6px;
}
.hero-card.has-avatar .hero-side-note {
  right: 8%;
  bottom: 23%;
  width: 24%;
  font-size: 9px;
  letter-spacing: 0.8px;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 1100px) and (min-width: 621px) {
  .hero-celestial.has-avatar {
    right: 8%;
    top: 10%;
    width: 28%;
  }
  .hero-card.has-avatar .hero-side-note {
    right: 8%;
    bottom: 22%;
    width: 28%;
  }
}
@media (max-width: 620px) {
  .hero-celestial.has-avatar {
    width: 88px;
    right: 16px;
    top: 64px;
    bottom: auto;
  }
  .hero-card.has-avatar h1 {
    padding-right: 96px;
  }
  .hero-card.has-avatar .hero-copy {
    padding-right: 0;
  }
  .hero-card.has-avatar .hero-side-note {
    display: none;
  }
  .hero-avatar {
    border-width: 3px;
  }
}
/* Scale headline height with the available card, keeping both intro lines visible. */
@media (min-width: 1101px) {
  .hero-card {
    container-type: size;
  }
  .hero-card h1 {
    font-size: clamp(40px, min(4.18vw, 25cqh), 68px);
  }
  .hero-button {
    margin-top: auto;
  }
}
@media (min-width: 1101px) and (max-height: 830px) {
  .hero-card {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .hero-card h1 {
    margin-top: 8px;
    margin-bottom: 6px;
  }
  .headline-secondary {
    margin-top: 2px;
  }
  .hero-copy {
    font-size: 13px;
    line-height: 1.5;
  }
  .hero-button {
    min-height: 32px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
  }
}

/* Full-page sections share the homepage header and the global audio player. */
#main:focus {
  outline: none;
}
.site-header nav a:hover {
  color: var(--theme-accent-ink, #627630);
}
.site-shell.section-shell {
  height: 100svh;
  min-height: 0;
  max-width: none;
}
.section-shell > .site-header {
  border-bottom: 1px solid var(--theme-line, #ddded5);
}
.section-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar, #c7ccbb) transparent;
  padding: 0 clamp(10px, 2.4vw, 46px) 36px;
  overscroll-behavior-y: contain;
}
.section-heading {
  max-width: 1680px;
  margin: auto;
  padding: 40px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--theme-line, #dcded3);
}
.section-heading .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--theme-muted, #6d735f);
  font-size: 10px;
  letter-spacing: 1.8px;
}
.section-heading .eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--theme-focus, #a9c743);
}
.section-heading h1 {
  margin: 14px 0 13px;
  font-size: clamp(36px, 4vw, 62px);
  letter-spacing: -2px;
  font-weight: 650;
  line-height: 1.15;
}
.section-heading h1 > span {
  color: var(--theme-muted, #b5cd63);
  margin-left: 3px;
}
.section-heading p {
  color: var(--theme-muted, #737969);
  font-size: 14px;
  line-height: 1.7;
}
.section-heading-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.section-number {
  color: var(--theme-number, #e2e5d7);
  font:
    500 clamp(62px, 7vw, 102px)/0.9 "Space Grotesk",
    sans-serif;
  letter-spacing: -7px;
}
.section-count {
  color: var(--theme-muted, #6b745b);
  font-size: 11px;
  letter-spacing: 0.8px;
}
.section-heading-meta .edit-trigger {
  position: static;
}
.section-content {
  max-width: 1680px;
  margin: 30px auto 0;
}
.section-content.section-detail {
  margin-top: clamp(16px, 2vw, 24px);
}
.section-content h1,
.section-content h3,
.section-content p,
.section-content a {
  overflow-wrap: anywhere;
}
.section-content .empty-content {
  min-height: 270px;
}
.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.friend-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--theme-line, #e2e4da);
  border-radius: 13px;
  background: var(--card);
  transition:
    border-color 0.16s,
    background 0.16s;
}
.friend-card:hover,
.friend-card:focus-visible {
  border-color: var(--theme-accent-line, #a8b886);
  background: var(--theme-surface, #fcfdf5);
}
.friend-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 22px;
}
.friend-card-top > svg {
  color: var(--theme-muted, #7c8869);
}
.friend-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}
.friend-avatar.image-fallback > span {
  display: none;
}
.friend-monogram {
  display: grid;
  place-items: center;
  background: var(--theme-soft, #edf1df);
  color: var(--theme-accent-ink, #64734c);
  font-size: 24px;
  font-weight: 550;
}
.friend-card:nth-child(3n + 2) .friend-monogram {
  background: var(--theme-soft, #f4ecd9);
  color: var(--theme-accent-ink, #897347);
}
.friend-card:nth-child(3n) .friend-monogram {
  background: var(--theme-soft, #e7eded);
  color: var(--theme-accent-ink, #577275);
}
.friend-card h2 {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.friend-card p {
  margin-top: 9px;
  margin-bottom: 24px;
  color: var(--theme-muted, #737969);
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-line;
}
.friend-domain {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin-top: auto;
  padding-top: 15px;
  color: var(--theme-muted, #808775);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.friend-domain svg {
  flex-shrink: 0;
}
.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 310px;
  padding: 40px 24px;
  border: 1px dashed var(--theme-line, #d8ddcb);
  border-radius: 13px;
  background: var(--card);
  text-align: center;
}
.friends-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 23px;
  border-radius: 50%;
  background: var(--theme-soft, #edf1df);
  color: var(--theme-muted, #7e9355);
}
.friends-empty h2 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 550;
}
.friends-empty p {
  max-width: 310px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--theme-muted, #808775);
}
.section-content .project-list {
  gap: 26px;
}
.section-content .project-list > button {
  background: var(--card);
  border-radius: 12px;
  padding: 26px;
  overflow: hidden;
}
.section-content .project-list > button:hover {
  border-color: var(--theme-accent-line, #aebd88);
}
.section-content .project-list > button > img,
.section-content .project-list > button > .image-fallback,
.project-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: clamp(200px, 27svh, 330px);
  margin-top: 18px;
  border-radius: 7px;
  background: var(--theme-image-bg, #eaf0d9);
  object-fit: cover;
}
.project-cover-placeholder > span {
  font:
    500 clamp(32px, 5vw, 70px)/1.15 "Space Grotesk",
    sans-serif;
  letter-spacing: -2px;
  padding: 25px;
  text-align: center;
  overflow-wrap: anywhere;
}
.project-cover-placeholder i {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 40px;
  color: var(--theme-accent-ink, #768943);
  font-style: normal;
}
.section-content .project-list > button:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(30px, 5vw, 80px);
  min-height: min(52svh, 530px);
  padding: 24px;
}
.section-content .project-list > button:only-child > img,
.section-content .project-list > button:only-child > .image-fallback,
.section-content
  .project-list
  > button:only-child
  > .project-cover-placeholder {
  grid-area: 1 / 1 / 4 / 2;
  margin: 0;
  height: 100%;
  min-height: 300px;
}
.section-content .project-list > button:only-child > .project-index {
  grid-area: 1 / 2;
  padding-top: 58px;
}
.section-content .project-list > button:only-child > h3 {
  grid-area: 2 / 2;
  font-size: clamp(34px, 4vw, 54px);
  margin: 20px 30px 16px 0;
}
.section-content .project-list > button:only-child > p {
  grid-area: 3 / 2;
  max-width: 360px;
  font-size: 16px;
  padding-right: 20px;
}
.section-content .article-list > button {
  gap: 32px;
  padding: 28px 0;
}
.section-content .article-list > button:first-child {
  padding-top: 0;
}
.section-content .article-list img,
.section-content .article-list .image-fallback {
  width: 210px;
  height: 138px;
  border-radius: 8px;
}
.section-content .article-list h3 {
  font-size: 26px;
  margin: 10px 0;
}
.section-content .article-list p {
  font-size: 14px;
}
.section-content .article-list time {
  font-size: 11px;
  color: var(--theme-muted, #727c62);
}
.section-content .article-list > button > svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  margin-left: auto;
  border: 1px solid var(--theme-line, #dce0d3);
  border-radius: 50%;
  flex-shrink: 0;
}
.section-content .reading-view {
  max-width: 860px;
  padding-bottom: 32px;
}
.section-content .reading-cover {
  height: clamp(240px, 36svh, 400px);
}
.section-content .reading-view :is(h1, h3) {
  font-size: clamp(28px, 3vw, 42px);
}
.section-content .prose {
  font-size: 16px;
  line-height: 2;
}
.section-content .collection-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.section-content .collection-list article {
  background: var(--card);
  border-radius: 10px;
}
.section-content .collection-list article > img,
.section-content .collection-list article > .image-fallback {
  width: 100%;
  height: clamp(220px, 30svh, 340px);
  object-fit: cover;
}
.section-content .collection-list article > div {
  padding: 24px;
}
.section-content .collection-list article:not(:has(> img, > .image-fallback)) {
  border-top: 5px solid var(--theme-line, #c1d683);
  min-height: 280px;
}
.section-content .collection-toolbar {
  margin-bottom: 30px;
}
.section-content .filter-tabs button {
  font-size: 13px;
  padding: 10px 20px;
}
.section-content .search-field {
  padding: 10px 0;
}
.section-content .search-field input {
  width: 200px;
  font-size: 13px;
}
.section-content .photo-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 30px;
}
.section-content .photo-stage {
  height: max(360px, calc(100svh - 350px));
  border-radius: 10px;
  background: var(--theme-image-bg, #e9e9e1);
}
.section-content .photo-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.section-content .photo-meta {
  margin-top: 6px;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 26px;
}
.section-content .photo-meta > span {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  color: var(--theme-muted, #566344);
}
.section-content .photo-meta :is(h1, h3) {
  font-size: 25px;
  margin-bottom: 12px;
}
.section-content .photo-meta p {
  line-height: 1.8;
}
.section-content .photo-details > .source-line {
  margin-top: 15px;
}
.section-content .photo-thumbnails {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 5px;
  margin-top: 20px;
}
.section-content .photo-thumbnails button {
  width: 70px;
  height: 60px;
}
.section-shell > .site-footer {
  height: 44px;
}
.site-footer > .section-player {
  gap: 9px;
  min-width: 0;
  color: var(--theme-muted, #727a65);
  font-size: 11px;
}
.section-player > span {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-player > button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-soft, #e5eacb);
}
@media (max-width: 1100px) {
  .site-shell.section-shell {
    min-height: 0;
  }
  .section-page {
    padding: 0 8px 30px;
  }
  .section-heading {
    padding-top: 32px;
  }
  .section-content .collection-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-content .photo-viewer {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .section-content .photo-stage {
    height: clamp(320px, 51svh, 640px);
  }
  .section-content .photo-meta {
    flex-direction: row;
    justify-content: space-between;
  }
  .section-content .photo-thumbnails {
    margin-top: 14px;
  }
  .section-shell > .site-footer .footer-motto {
    display: none;
  }
}
@media (max-width: 620px) {
  .section-page {
    padding: 0 4px 24px;
  }
  .section-heading {
    padding: 27px 0 23px;
    gap: 14px;
  }
  .section-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .section-heading h1 {
    font-size: 33px;
    letter-spacing: -1.5px;
    margin: 12px 0 10px;
  }
  .section-heading p {
    font-size: 12px;
    max-width: 245px;
  }
  .section-number {
    font-size: 48px;
    letter-spacing: -4px;
  }
  .section-heading-meta {
    gap: 12px;
  }
  .section-count {
    font-size: 9px;
    letter-spacing: 0;
  }
  .section-content {
    margin-top: 23px;
  }
  .section-content .project-list,
  .section-content .collection-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .section-content .project-list > button,
  .section-content .project-list > button:only-child {
    display: flex;
    flex-direction: column;
    padding: 18px;
    gap: 0;
  }
  .section-content .project-list > button:only-child > .project-index {
    padding-top: 0;
  }
  .section-content .project-list > button:only-child > img,
  .section-content .project-list > button:only-child > .image-fallback,
  .section-content
    .project-list
    > button:only-child
    > .project-cover-placeholder {
    height: 240px;
    min-height: 0;
    margin-top: 18px;
  }
  .section-content .project-list > button:only-child > h3 {
    font-size: 32px;
    margin: 22px 0 12px;
  }
  .section-content .project-list > button:only-child > p {
    padding: 0 0 12px;
    font-size: 14px;
  }
  .project-cover-placeholder > span {
    font-size: 44px;
  }
  .section-content .article-list > button {
    gap: 16px;
    align-items: flex-start;
    padding: 22px 0;
  }
  .section-content .article-list img,
  .section-content .article-list .image-fallback {
    width: 92px;
    height: 94px;
  }
  .section-content .article-list h3 {
    font-size: 17px;
    margin: 7px 0;
    line-height: 1.5;
  }
  .section-content .article-list p {
    font-size: 12px;
  }
  .section-content .article-list > button > svg {
    display: none;
  }
  .section-content .collection-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }
  .section-content .filter-tabs {
    gap: 6px;
  }
  .section-content .filter-tabs button {
    font-size: 12px;
    padding: 9px 17px;
  }
  .section-content .search-field input {
    flex: 1;
    min-width: 0;
  }
  .section-content .photo-stage {
    height: 45svh;
    min-height: 240px;
  }
  .section-content .photo-meta :is(h1, h3) {
    font-size: 23px;
  }
  .section-content .photo-meta > span {
    font-size: 13px;
    white-space: nowrap;
  }
  .section-content .prose {
    font-size: 15px;
  }
  .section-shell > .site-footer {
    height: auto;
    min-height: 55px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 9px 4px;
  }
  .section-shell > .site-footer > span {
    margin-right: auto;
  }
  .section-shell > .site-footer > div:last-child {
    width: auto;
    gap: 14px;
  }
  .section-shell > .site-footer .footer-motto {
    display: none;
  }
  .site-footer > .section-player {
    gap: 7px;
  }
  .section-player > span {
    max-width: 90px;
  }
}

/* A wide lead photo anchors a masonry wall of smaller Bento frames. */
.album-gallery[hidden] {
  display: none;
}
.album-wall {
  --album-columns: 4;
  --album-gap: 18px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.album-wall[data-layout="ready"] {
  display: block;
}
.album-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--theme-line, #e2e4da);
  border-radius: 13px;
  background: var(--card);
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}
.album-wall[data-layout="ready"] > .album-tile {
  position: absolute;
}
.album-wall[data-layout="pending"] > .album-tile {
  min-height: 280px;
}
.album-tile:hover:not(:disabled) {
  filter: none;
  border-color: var(--theme-accent-line, #a8b886);
}
.album-tile:focus-visible {
  outline-offset: 3px;
}
.album-tile-image {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: var(--theme-image-bg, #e7e9df);
}
.album-tile-image > img,
.album-tile-image > .image-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album-tile-image > .image-fallback {
  display: flex;
}
.album-tile-image > img {
  transition: transform 0.35s ease;
}
.album-tile:hover .album-tile-image > img,
.album-tile:focus-visible .album-tile-image > img {
  transform: scale(1.025);
}
.album-tile-caption {
  height: 68px;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.album-tile-caption > span {
  min-width: 0;
  flex: 1;
}
.album-tile-caption strong {
  display: block;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-tile-caption small {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  color: var(--theme-muted, #7b826f);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-tile-caption small > span {
  flex-shrink: 0;
}
.album-tile-caption > svg {
  flex-shrink: 0;
  color: var(--theme-muted, #7c8869);
}
.album-featured .album-tile-caption strong {
  font-size: 17px;
}
.album-expand {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--theme-surface, #fffefae8);
  color: var(--theme-muted, #323c29);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.album-tile:hover .album-expand,
.album-tile:focus-visible .album-expand {
  opacity: 1;
}
.album-photo-number {
  position: absolute;
  left: 13px;
  bottom: 13px;
  background: #20251fce;
  color: #fffefa;
  border-radius: 4px;
  padding: 5px 7px;
  font:
    11px/1 "Space Grotesk",
    sans-serif;
  letter-spacing: 1px;
}
.album-detail:focus {
  outline: none;
}
.album-detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 23px;
}
.album-detail-toolbar > button {
  color: var(--theme-muted, #65754a);
}
.album-detail-toolbar > span {
  color: var(--theme-muted, #909682);
  font-size: 10px;
  letter-spacing: 0.7px;
  margin-left: auto;
}
.section-content .album-detail .photo-stage {
  height: max(320px, calc(100svh - 402px));
}
@media (max-width: 1100px) {
  .album-wall {
    --album-columns: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .album-tile-caption {
    height: 60px;
    padding: 10px 12px;
  }
}
@media (max-width: 700px) {
  .album-wall {
    --album-columns: 2;
    --album-gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .album-tile {
    border-radius: 10px;
  }
  .album-tile-caption {
    gap: 6px;
    padding: 10px;
  }
  .album-tile-caption strong {
    font-size: 12px;
  }
  .album-tile-caption small {
    font-size: 9px;
    margin-top: 4px;
  }
  .album-tile-caption > svg {
    width: 14px;
  }
  .album-featured .album-tile-caption {
    padding: 10px 14px;
  }
  .album-featured .album-tile-caption strong {
    font-size: 15px;
  }
  .album-photo-number {
    font-size: 9px;
    left: 10px;
    bottom: 10px;
  }
  .album-detail-toolbar > span {
    display: none;
  }
  .section-content .album-detail .photo-stage {
    height: 45svh;
    min-height: 240px;
  }
}
@media (max-width: 340px) {
  .album-wall {
    --album-columns: 1;
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .album-tile-image > img {
    transition: none;
  }
  .album-tile:hover .album-tile-image > img,
  .album-tile:focus-visible .album-tile-image > img {
    transform: none;
  }
}

/* Four social destinations and an always-visible like total. */
.music-card .social-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
}
.music-card .social-row > .social-link {
  min-width: 0;
  gap: 7px;
  min-height: 30px;
  border: 0;
  font-size: 11px;
  white-space: nowrap;
}
.music-card .social-link > svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}
.music-card .social-row .like-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  height: 30px;
  min-width: 45px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--theme-soft, #f0f2e8);
}
.music-card .social-row .like-button > svg {
  flex-shrink: 0;
  margin: 0;
}
.music-card .like-count {
  font:
    500 11px/1 "Space Grotesk",
    sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.music-card .social-row .like-button.liked {
  background: var(--lime);
}
@media (max-width: 1200px) and (min-width: 1101px), (max-width: 420px) {
  .music-card .social-row {
    gap: 7px;
  }
  .music-card .social-row > .social-link {
    gap: 4px;
    font-size: 10px;
  }
  .music-card .social-link > svg {
    width: 16px;
    height: 16px;
  }
  .music-card .social-row .like-button {
    padding: 0 6px;
    min-width: 40px;
  }
}

@media (max-width: 340px) {
  .music-card .social-row {
    gap: 4px;
  }
  .music-card .social-row > .social-link {
    gap: 3px;
    font-size: 9px;
  }
  .music-card .social-link > svg {
    width: 14px;
    height: 14px;
  }
  .music-card .social-row .like-button {
    min-width: 34px;
    padding: 0 4px;
    gap: 3px;
  }
}

/* The full playlist opens separately from the compact volume control. */
.dialog.playlist-dialog {
  width: min(920px, calc(100% - 48px));
}
.playlist-dialog .dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}
.playlist-dialog .empty-content {
  grid-column: 1 / -1;
  min-height: 230px;
}
.playlist-current {
  position: sticky;
  top: 0;
  min-width: 0;
}
.playlist-current-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}
.playlist-current-status {
  color: var(--theme-accent-ink, #80925f);
  font-size: 10px;
  letter-spacing: 1px;
}
.playlist-current h3 {
  font-size: 22px;
  line-height: 1.45;
  margin: 7px 0;
  overflow-wrap: anywhere;
}
.playlist-current-summary p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--theme-muted, #858d79);
  overflow-wrap: anywhere;
}
.playlist-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0 18px;
}
.playlist-controls > button {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
}
.playlist-controls .play-button {
  width: 44px;
  height: 44px;
  margin: 0;
  align-self: auto;
}
.playlist-current .audio-error {
  margin: 14px 0 0;
  gap: 10px;
}
.playlist-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
  min-width: 0;
}
.playlist-track {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  text-align: left;
}
.playlist-track:hover {
  background: var(--theme-soft, #f4f5ee);
}
.playlist-track[aria-pressed="true"] {
  background: var(--theme-soft, #eff6dd);
  border-color: var(--theme-accent-line, #dbe8bd);
}
.playlist-index {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--theme-muted, #909985);
}
.playlist-track-cover {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 5px;
}
.playlist-track-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.playlist-track-info strong {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.playlist-track-info small {
  font-size: 11px;
  color: var(--theme-muted, #89917d);
  overflow-wrap: anywhere;
}
.playlist-track-status {
  font-size: 10px;
  color: var(--theme-accent-ink, #7a9051);
  white-space: nowrap;
}
@media (max-width: 620px) {
  .music-heading {
    gap: 8px;
  }
  .music-heading > svg {
    width: 20px;
  }
  .music-heading > .music-actions {
    gap: 2px;
  }
  .music-actions .edit-trigger {
    width: 30px;
    padding: 5px;
    justify-content: center;
  }
  .music-actions .edit-trigger > span {
    display: none;
  }
  .dialog.playlist-dialog {
    width: calc(100% - 24px);
  }
  .playlist-dialog .dialog-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 20px 18px;
  }
  .playlist-current {
    position: static;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
  }
  .playlist-current-summary {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .playlist-current-cover {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin: 0;
  }
  .playlist-current h3 {
    font-size: 18px;
    margin: 4px 0;
  }
  .playlist-controls {
    margin: 15px 0 12px;
  }
  .playlist-track {
    grid-template-columns: 18px 38px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 7px;
  }
  .playlist-track-cover {
    width: 38px;
    height: 38px;
  }
  .playlist-track-info strong {
    font-size: 12px;
  }
  .playlist-track-info small {
    font-size: 10px;
  }
}

/* A personal note, kept private in the administrator's inbox. */
.dialog.contact-dialog {
  width: min(620px, calc(100% - 30px));
}
.contact-dialog .dialog-head {
  padding-bottom: 24px;
}
.contact-dialog .dialog-body {
  padding-top: 24px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.contact-intro {
  font-size: 13px;
  line-height: 1.8;
  color: var(--theme-muted, #7b806f);
  margin-bottom: 2px;
}
.contact-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
  font-size: 12px;
  color: var(--theme-muted, #565e4a);
}
.contact-form .optional {
  position: absolute;
  left: 34px;
  top: 1px;
  font-size: 10px;
  color: var(--theme-muted, #939987);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--theme-input-line, #e0e3d8);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--theme-field, #f9faf5);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}
.contact-form textarea {
  resize: vertical;
  min-height: 150px;
  max-height: 360px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--theme-muted, #a0a594);
}
.contact-form input:focus,
.contact-form textarea:focus {
  background: var(--card);
  border-color: var(--theme-input-line, #a5b975);
  outline: 2px solid var(--theme-focus, #d4f36e40);
  outline-offset: 1px;
}
.contact-field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: -11px;
  font-size: 10px;
  color: var(--theme-muted, #939987);
}
.contact-field-meta > span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
.contact-field-meta > span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.contact-form .contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-submit {
  align-self: flex-end;
  min-width: 146px;
  min-height: 42px;
  gap: 22px;
}
.contact-socials {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.contact-socials > span {
  color: var(--theme-muted, #999e8d);
  font-size: 10px;
}
.contact-socials > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-socials a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--theme-line, #e6e9dd);
  border-radius: 6px;
  color: var(--theme-muted, #647151);
  font-size: 10px;
}
.contact-socials a:hover {
  background: var(--theme-soft, #f0f3e6);
}
.contact-success {
  text-align: center;
  padding: 12px 0 20px;
  outline: none;
}
.contact-success-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
}
.contact-success h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 13px;
}
.contact-success p {
  font-size: 13px;
  color: var(--theme-muted, #7e856f);
  line-height: 1.9;
  margin-bottom: 25px;
}
.contact-success .button {
  margin: auto;
}
.inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--theme-muted, #7d866c);
}
.inbox-loading {
  padding: 15px 0;
  font-size: 12px;
  color: var(--theme-muted, #828a72);
}
.inbox-message {
  padding: 22px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.inbox-message.unread {
  border-color: var(--theme-line, #cbd6ad);
  background: var(--theme-soft, #fafcf5);
}
.inbox-message header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.inbox-message h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.inbox-message h3 i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-focus, #a8c444);
  flex-shrink: 0;
}
.inbox-message time {
  font-size: 10px;
  color: var(--theme-muted, #8e957f);
  white-space: nowrap;
}
.inbox-email {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--theme-muted, #74835b);
  overflow-wrap: anywhere;
}
.inbox-message > p {
  margin: 18px 0;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.9;
}
.inbox-message footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 11px;
  color: var(--theme-muted, #839070);
}
.inbox-message footer > span {
  display: flex;
  gap: 16px;
}
.inbox-delete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--theme-danger, #9a8175);
}
.inbox-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  font-size: 12px;
  padding: 10px 0;
}
.inbox-dialog .empty-content svg {
  display: block;
  margin: 0 auto 14px;
}
@media (max-width: 620px) {
  .contact-fields-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }
  .contact-form {
    gap: 18px;
  }
  .contact-form textarea {
    min-height: 130px;
  }
  .contact-submit {
    width: 100%;
    justify-content: center;
  }
  .contact-socials {
    flex-wrap: wrap;
    margin-top: 22px;
  }
  .contact-socials > div {
    margin-left: auto;
  }
  .contact-success h3 {
    font-size: 19px;
  }
  .inbox-message {
    padding: 17px;
  }
  .inbox-message header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

/* VIP 解锁（无服务器版新增） */
.playlist-track.is-locked {
  opacity: 0.85;
}
.playlist-track strong svg {
  vertical-align: -1px;
  opacity: 0.7;
}
.vip-unlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 4px 4px;
  text-align: center;
}
.vip-unlock > svg {
  opacity: 0.6;
}
.vip-unlock p {
  margin: 0;
  opacity: 0.85;
}
.vip-unlock input[type="password"] {
  width: 100%;
  max-width: 280px;
  padding: 10px 14px;
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  font-size: 15px;
  text-align: center;
  letter-spacing: 2px;
}
.vip-unlock-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  background: var(--accent, #6d4fc2);
  color: #fff;
}
.vip-unlock-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.vip-unlock small {
  opacity: 0.6;
}

/* 编辑器 VIP 开关 */
.vip-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  cursor: pointer;
}
.vip-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #6d4fc2);
}

/* 冥想课程：国际疗愈中心官网设计语言
   全 CSS 变量实现，13 套主题自动跟随变色 */
.meditation-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
}
.meditation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.meditation-admin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.meditation-head .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--muted);
  margin-bottom: 6px;
}
.meditation-head h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0;
}
.meditation-cover {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 10px;
}
/* 大卡：封面通栏大图。min-height:0 让网格项不撑高中行，卡片高度与旁边两卡对齐 */
.meditation-large {
  min-width: 0;
  min-height: 0;
}
.meditation-large .meditation-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 与文章/项目卡一致：卡片本身不滚动，由封面弹性区吸收高度差 */
  overflow: hidden;
}
.meditation-large .meditation-coming {
  flex: 1;
  padding: 12px 0;
  gap: 6px;
  min-height: 0;
}
.meditation-large .meditation-cover {
  margin-bottom: 12px;
}
.meditation-large .meditation-cover-img,
.meditation-large .meditation-cover-fallback {
  aspect-ratio: 21 / 9;
  min-height: 120px;
  max-height: 160px;
}
.meditation-large .meditation-intro {
  font-size: 17px;
}
@media (min-width: 1101px) {
  /* 桌面端：封面为弹性区，吸收行高差（仿 .project-preview），卡片不再内部滚动；
     移动端/平板保持原样（aspect-ratio 封面），故此处限定桌面 */
  .meditation-large .meditation-cover {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }
  .meditation-large .meditation-cover-img,
  .meditation-large .meditation-cover-fallback {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
  }
  /* 文字与播放区不压缩，只让封面伸缩 */
  .meditation-large .meditation-head,
  .meditation-large .meditation-intro,
  .meditation-large .meditation-stats,
  .meditation-large .meditation-player {
    flex-shrink: 0;
  }
}
@media (max-height: 830px) and (min-width: 1101px) {
  /* 矮屏桌面：压缩固定区，给封面留出空间（与其他卡片的矮屏压缩同 pattern） */
  .meditation-large .meditation-card {
    padding: 18px 20px 16px;
  }
  .meditation-large .meditation-head {
    margin-bottom: 6px;
  }
  .meditation-large .meditation-head h2 {
    font-size: 20px;
  }
  .meditation-large .meditation-cover {
    margin-bottom: 8px;
  }
  .meditation-large .meditation-intro {
    font-size: 13px;
    margin: 0 0 4px;
  }
  .meditation-large .meditation-stats {
    margin: 0 0 8px;
  }
  .meditation-large .meditation-player {
    padding: 8px 10px;
    gap: 10px;
  }
  .meditation-large .mp-play {
    width: 40px;
    height: 40px;
  }
}
.meditation-cover-img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  display: block;
}
.meditation-cover-fallback {
  aspect-ratio: 16 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-soft);
  color: var(--theme-accent-ink);
}
.meditation-intro {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 6px;
}
.meditation-stats {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
.meditation-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.meditation-actions .button {
  flex: 1;
  min-height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
}
.meditation-coming {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  padding: 28px 0;
}
.meditation-coming p {
  margin: 0;
  font-size: 14px;
}
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--theme-focus);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 11px;
  border-radius: 999px;
  flex: none;
  white-space: nowrap;
}
.badge.free {
  background: var(--theme-soft);
  color: var(--theme-accent-ink);
}
.badge.lock {
  background: var(--theme-soft);
  color: var(--muted);
}
.meditation-groups {
  display: grid;
  gap: 30px;
}
.meditation-group-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.meditation-empty {
  color: var(--muted);
  text-align: center;
  padding: 32px 0;
}
/* 购买弹窗：反色深色卡，深浅主题下都有对比 */
.purchase-dialog {
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  padding: 30px 22px 24px;
  text-align: center;
}
.purchase-dialog h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
}
.purchase-dialog > p {
  color: var(--paper);
  opacity: 0.75;
  font-size: 14px;
  margin: 0 0 16px;
}
/* 会员信息加载态：spinner + 提示文案，不渲染任何购买按钮 */
.purchase-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 0 10px;
}
.purchase-loading > p {
  margin: 0;
  font-size: 14px;
  color: var(--paper);
  opacity: 0.7;
}
.purchase-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--theme-accent-ink);
  animation: purchase-spin 0.8s linear infinite;
}
@keyframes purchase-spin {
  to {
    transform: rotate(360deg);
  }
}
.purchase-benefits {
  list-style: none;
  text-align: left;
  font-size: 14px;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}
.purchase-benefits li {
  padding-left: 2px;
}
.purchase-benefits li::before {
  content: "✓ ";
  color: var(--lime);
  font-weight: 800;
}
/* 会员两档选择 */
.plan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 20px;
}
.plan-option {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--paper);
  padding: 16px 10px 14px;
  display: grid;
  gap: 3px;
  justify-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan-option.selected {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
}
.plan-name {
  font-size: 13px;
  font-weight: 700;
}
.plan-price {
  font-size: 24px;
  font-weight: 800;
}
.plan-term {
  font-size: 12px;
  opacity: 0.65;
}
.plan-tag {
  position: absolute;
  top: -10px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}
.purchase-dialog .purchase-buy {
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  border: 0;
  background: var(--theme-button);
  color: var(--theme-on-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  cursor: pointer;
}
.purchase-dialog .purchase-buy:hover {
  filter: brightness(1.06);
}
/* 收款码 */
.purchase-dialog .purchase-plan-line {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  opacity: 1;
}
/* 价值口径 + 保价承诺（定价行动 2026-10-29）：小字次级信息，不抢付款主流程 */
.purchase-dialog .purchase-value-note {
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0 0 8px;
  opacity: 0.72;
}
/* 新手购买步骤指引：注册→购买→付款→等开通→听课 */
.purchase-steps {
  display: flex;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  gap: 2px;
}
.purchase-steps li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--theme-muted);
  text-align: center;
  position: relative;
}
.purchase-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 1px;
  background: var(--theme-line);
}
.purchase-steps .step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--theme-soft);
  border: 1px solid var(--theme-line);
  z-index: 1;
}
.purchase-steps li.active {
  color: var(--theme-ink);
  font-weight: 700;
}
.purchase-steps li.active .step-num {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: var(--theme-on-accent);
}
.purchase-steps li.done .step-num {
  background: var(--theme-accent-soft);
  border-color: var(--theme-accent-soft);
  color: var(--theme-accent);
}
.purchase-qrcode {
  width: 200px;
  height: auto;
  display: block;
  margin: 4px auto 16px;
  border-radius: 12px;
  /* 二维码必须浅底才能被扫码识别，功能需求，非主题色 */
  background: #fff;
  padding: 10px;
}
.purchase-pay-tip {
  font-size: 13px;
  line-height: 1.9;
  margin: 0 0 18px;
  color: var(--paper);
  opacity: 0.8;
}
.purchase-back {
  border-radius: 999px;
  min-height: 44px;
  padding: 0 26px;
  font-weight: 600;
  cursor: pointer;
}
.purchase-login {
  font-size: 13px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--paper);
  opacity: 0.8;
}
.purchase-login .link-button {
  color: var(--paper);
  opacity: 1;
}
.purchase-login-note {
  font-size: 12px;
  margin: 8px 0 0;
  color: var(--paper);
  opacity: 0.65;
}

/* 播放统计弹窗 */
.playstats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.playstats-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.playstats-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--theme-soft);
  color: var(--theme-accent-ink);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.playstats-info {
  flex: 1;
  min-width: 0;
}
.playstats-info strong {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playstats-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--theme-soft);
  margin-top: 6px;
  overflow: hidden;
}
.playstats-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--theme-button);
}
.playstats-count {
  font-size: 13px;
  color: var(--muted);
  flex: none;
}

/* 冥想课程播放条：弹窗底部 sticky，封面+标题+进度条+播放键 */
.meditation-player-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}
.mpb-cover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: none;
}
.mpb-info {
  min-width: 0;
  flex: none;
  max-width: 140px;
}
.mpb-info strong {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpb-info small {
  color: var(--muted);
  font-size: 12px;
}
.mpb-progress {
  flex: 1;
  min-width: 0;
}
.mpb-progress .progress {
  width: 100%;
}
.mpb-progress .time-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.mpb-play {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
}
/* 睡眠定时器按钮（倒计时显示在图标旁） */
.player-options summary.sleep-toggle {
  width: auto;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.player-options summary.sleep-toggle.sleep-on {
  color: var(--theme-ink, #2f3a2a);
  background: var(--theme-soft, #eef3e3);
}
.sleep-popover button {
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
}
.sleep-popover button:hover {
  background: var(--theme-soft, #eef3e3);
}
/* 倍速按钮 */
.rate-button {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 5px 7px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--theme-muted, #7d8272);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rate-button:hover {
  background: var(--theme-soft, #eef3e3);
}

/* PC 端：点击右侧圆钮后，从右侧滑出竖版迷你播放器（A方案） */
@media (min-width: 721px) {
  body .music-bottombar {
    left: auto;
    right: 20px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(28px) scale(0.96);
    width: 264px;
    /* 购买按钮永不被遮挡：面板展开态限宽，避免横向溢出 */
    max-width: calc(100vw - 40px);
    /* 短视口时限高可滚，避免上下溢出、底部按钮点不中 */
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    border-radius: 18px;
    border: 1px solid var(--line, #e8e8e1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.34s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
      opacity 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  }
  body .music-bottombar.mbb-entered {
    transform: translateY(-50%) translateX(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  body .music-bottombar .mbb-main {
    flex-direction: column;
    height: auto;
    max-width: none;
    padding: 18px 16px 14px;
    gap: 10px;
  }
  .music-bottombar .mbb-cover {
    width: 120px;
    height: 120px;
    border-radius: 12px;
  }
  .music-bottombar .mbb-info {
    width: 100%;
    text-align: center;
  }
  .music-bottombar .mbb-info strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .music-bottombar .mbb-controls {
    justify-content: center;
  }
  .music-bottombar .mbb-progress-wrap {
    width: 100%;
  }
  .music-bottombar .mbb-tools {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .music-bottombar .mbb-progress-line {
    display: none;
  }
}
/* ============ 悬浮背景音乐播放器 ============ */
.floating-player {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
}
.fp-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--theme-clock, #23261f);
  color: var(--lime, #d9f89e);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.fp-fab:hover {
  transform: scale(1.06);
}
.floating-player.is-playing .fp-fab {
  animation: fp-breathe 2.6s ease-in-out infinite;
}
@keyframes fp-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.09);
  }
}
.fp-panel {
  width: 300px;
  background: var(--theme-surface, #fffefa);
  color: var(--ink);
  border-radius: 18px;
  padding: 14px 16px 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.fp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.fp-title {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 8px;
  flex-shrink: 0;
}
.fp-close:hover {
  background: var(--theme-soft, #eef3e3);
}
.fp-upload {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 8px;
  flex-shrink: 0;
}
.fp-upload:hover {
  background: var(--theme-soft, #eef3e3);
}
.fp-progress {
  width: 100%;
}
.fp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.fp-btn {
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: none;
  padding: 6px;
  border-radius: 10px;
}
.fp-btn:hover {
  background: var(--theme-soft, #eef3e3);
}
.fp-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--theme-surface, #fffefa);
  padding: 0;
}
.fp-play:hover {
  background: var(--ink);
  opacity: 0.85;
}
.fp-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============ 冥想卡内嵌播放器 ============ */
.meditation-player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  background: var(--theme-soft, #eef3e3);
  border-radius: 18px;
  padding: 10px 12px;
}
.mp-play {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--theme-surface, #fffefa);
}
.mp-body {
  flex: 1;
  min-width: 0;
}
.mp-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
/* 试听记忆提示：背景音乐播放中，4 号卡显示"继续试听"态 */
.mp-resume-hint {
  font-size: 11px;
  color: var(--text-tertiary, #8a8a8a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: -2px 0 4px;
}
.mp-progress {
  width: 100%;
}
.mp-body .time-label {
  margin-top: 2px;
}
.mp-courses {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============ 悬浮播放器手机端适配 ============ */
@media (max-width: 620px) {
  .floating-player {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .fp-fab {
    width: 44px;
    height: 44px;
    margin-left: auto;
  }
  .fp-panel {
    width: 100%;
  }
  .meditation-player {
    gap: 10px;
    padding: 8px 10px;
  }
  .mp-play {
    width: 42px;
    height: 42px;
  }
}

/* 会员社区 */
.community-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.community-hero {
  background: var(--card, #fffefa);
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 22px;
  padding: 26px 26px 22px;
}
.community-hero h1 {
  font-size: 26px;
  margin: 6px 0 8px;
  letter-spacing: 0.5px;
}
.community-hero > p {
  color: var(--muted);
  margin: 0 0 4px;
  font-size: 14px;
}
.community-guide {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--theme-soft, #f2f5e9);
  align-items: flex-start;
}
.community-guide svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--theme-accent-ink, #5a7a2a);
}
.community-guide ul {
  margin: 8px 0 12px;
  padding-left: 20px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 3D 村庄漫游：独立单人版 iframe */
.village-frame-wrap {
  margin-top: 8px;
}
.village-frame {
  width: 100%;
  height: min(78vh, 780px);
  min-height: 480px;
  border: 0;
  border-radius: 18px;
  display: block;
  background: #1a2b12;
}
.village-frame-tip {
  margin: 10px 4px 0;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .village-frame {
    height: 72vh;
    min-height: 420px;
    border-radius: 14px;
  }
}
.community-composer {
  display: flex;
  gap: 12px;
  background: var(--card, #fffefa);
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 22px;
  padding: 18px;
}
.community-composer-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.community-composer textarea {
  width: 100%;
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  background: var(--bg, #fdfcf8);
  color: var(--ink);
}
.community-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.community-composer-foot span {
  font-size: 12px;
  color: var(--muted);
}
.community-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--theme-accent, #d9f89e);
  color: var(--theme-accent-ink, #3a4a1a);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
}
.community-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.community-memo {
  background: var(--card, #fffefa);
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 22px;
  padding: 18px;
}
.community-memo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.community-memo-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.community-memo-meta strong {
  font-size: 14px;
}
.community-memo-meta span {
  font-size: 12px;
  color: var(--muted);
}
.community-memo-body {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.community-memo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.community-reactions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.community-emoji {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line, #e8e4d8);
  background: transparent;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}
.community-emoji i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.community-emoji.reacted {
  background: var(--theme-soft, #eef3e3);
  border-color: var(--theme-accent, #d9f89e);
}
.community-emoji:hover {
  background: var(--theme-soft, #eef3e3);
}
.community-reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 4px;
}
.community-reply-toggle svg.open {
  transform: rotate(180deg);
}
.community-icon-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.community-icon-btn:hover {
  background: var(--theme-soft, #eef3e3);
  color: var(--danger, #c0392b);
}
.community-icon-btn.small {
  padding: 4px;
}
.community-replies {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line, #e8e4d8);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.community-reply {
  display: flex;
  gap: 10px;
}
.community-reply .community-avatar {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.community-reply-body {
  flex: 1;
  min-width: 0;
  background: var(--bg, #f7f5ec);
  border-radius: 14px;
  padding: 10px 12px;
}
.community-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.community-reply-head strong {
  font-size: 13px;
}
.community-reply-head span {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
}
.community-reply-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.community-reply-box {
  display: flex;
  gap: 8px;
}
.community-reply-box input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg, #fdfcf8);
  color: var(--ink);
}
.community-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 20px 0;
  margin: 0;
}
.community-more {
  align-self: center;
  margin-top: 4px;
}
.community-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.community-tabs button {
  border: 1px solid var(--line, #e8e4d8);
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}
.community-tabs button.active {
  background: var(--ink);
  color: var(--bg, #fff);
  border-color: var(--ink);
}
.community-review-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.community-review-item {
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 16px;
  padding: 14px;
}
.community-review-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.community-review-item p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.community-review-actions {
  display: flex;
  gap: 8px;
}
.community-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 4px;
}
.community-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 16px;
  padding: 12px 14px;
}
.community-switch {
  margin-left: auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: var(--line, #e0dccf);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.community-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.community-switch.on {
  background: var(--theme-accent, #a8c256);
}
.community-switch.on i {
  left: 23px;
}
@media (max-width: 620px) {
  .community-page {
    padding: 4px 2px 32px;
  }
  .community-hero {
    padding: 20px 18px 16px;
  }
  .community-hero h1 {
    font-size: 22px;
  }
  .community-composer,
  .community-memo {
    padding: 14px;
    border-radius: 18px;
  }
}
/* 首页社区卡片：高度跟随 bottom-row 网格行，与旁边两卡等高 */
.community-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  border: none;
}
/* ============ 主页卡片背景图（后台「卡片背景」可替换，勿写死 URL） ============ */
/* 背景层：CardBg 组件渲染，图片 URL 由 cardBgSrc() 决定（后台配置 > 内置默认图） */
.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
/* 暖白柔光：保证深色文字在背景图上可读（也兜底管理员以后上传的深色图） */
.card-bg-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 247, 0.55),
    rgba(255, 253, 247, 0.35)
  );
}
/* 有背景图的卡片：把内容浮到背景之上（背景不挡文字和按钮） */
/* hero-celestial 需保持 absolute 定位（头像在右侧），不参与此规则 */
.hero-card > :not(.card-bg):not(.hero-celestial):not(.hero-bottom-note):not(.hero-orbit):not(.hero-side-note):not(.hero-avatar),
.clock-card > :not(.card-bg),
.article-card > :not(.card-bg),
.project-card > :not(.card-bg),
.checkin-card > :not(.card-bg),
.collection-card > :not(.card-bg),
.meditation-card > :not(.card-bg) {
  position: relative;
  z-index: 1;
}
.community-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.community-card:hover .community-card-bg {
  transform: scale(1.05);
}
.community-card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 22px;
  background: linear-gradient(to top, rgba(20, 25, 18, 0.75), transparent);
  color: #fff;
}
.community-card-content .eyebrow {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  letter-spacing: 3px;
}
.community-card-content h2 {
  margin: 6px 0;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
}
.community-card-content p {
  margin: 0 0 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.community-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 999px;
}
/* 整页：冥想课程 / 师资介绍 */
.meditation-page .meditation-groups,
.teacher-page > p {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.meditation-page .section-heading,
.teacher-page .section-heading {
  max-width: 860px;
}
/* 管理员登录提醒 */
.admin-bar .login-alert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid var(--theme-chrome-line, #65774c);
  color: var(--theme-on-chrome, #e9f0dc);
  opacity: 0.85;
  white-space: nowrap;
}
.admin-bar .login-alert:hover {
  opacity: 1;
}
.admin-bar .login-alert.warn {
  background: #f5c542;
  border-color: #f5c542;
  color: #3a2c00;
  opacity: 1;
  font-weight: 700;
}
.login-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(420px, 70vw);
}
.login-log-warn {
  background: #fdf3d7;
  border: 1px solid #e8c547;
  color: #7a5b00;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.login-log-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.login-log-label {
  font-size: 11px;
  color: var(--theme-muted, #96998d);
  letter-spacing: 2px;
}

/* 睡眠定时 + 倍速按钮 */
.sleep-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sleep-wrap > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sleep-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 112px;
  background: var(--card, #fffefa);
  color: var(--ink, #20221e);
  border: 1px solid var(--line, #e8e8e1);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.sleep-popover button {
  border: 0;
  background: none;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  color: inherit;
  cursor: pointer;
  min-height: 36px;
}
.sleep-popover button:hover,
.sleep-popover button:focus-visible {
  background: var(--paper, #f7f6f2);
}
.sleep-remain {
  font-size: 10px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
.fp-btn.is-active {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  border-radius: 999px;
}
.rate-text {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: center;
  line-height: 1;
}
@media (max-width: 480px) {
  .sleep-popover {
    min-width: 120px;
  }
  .sleep-popover button {
    min-height: 44px;
    font-size: 14px;
  }
}
/* 冥想课程整页：副标题与顶部冥想统计（今日冥想/本周累计，PC 与移动端一致展示） */
.meditation-page-sub {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}
.meditation-page-stats {
  margin: 4px 0 20px;
}

/* ============ 冥想课程整页视觉重做（/courses） ============
   设计语言：柔和渐变呼吸感、圆润卡片、克制留白；
   全部走主题变量，深浅主题自适应；仅 transform/opacity 动画，不阻塞渲染 */

/* 1. Hero 标题区：渐变呼吸卡片 */
.meditation-page .section-heading {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  padding: clamp(30px, 4.5vw, 56px) clamp(26px, 4vw, 52px);
  border: 1px solid var(--theme-line, #e6e7de);
  border-radius: 28px;
  background:
    radial-gradient(130% 150% at 88% 8%, var(--theme-soft, #edf3da) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(110% 130% at 8% 95%, var(--theme-soft, #f5f1e2) 0%, rgba(255, 255, 255, 0) 52%),
    var(--card, #fffefa);
  animation: medFadeUp 0.6s ease both;
}
/* 呼吸光晕 */
.meditation-page .section-heading::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--theme-soft, #e2ebc2) 0%, rgba(255, 255, 255, 0) 68%);
  animation: medBreathe 7s ease-in-out infinite;
  pointer-events: none;
}
.meditation-page .section-heading > div {
  position: relative;
  z-index: 1;
}
.meditation-page .section-heading button {
  position: relative;
  z-index: 1;
}
.meditation-page .section-heading .eyebrow {
  color: var(--theme-accent-ink, #7a9051);
  font-weight: 700;
}
.meditation-page .section-heading h2 {
  margin: 12px 0 10px;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 750;
  letter-spacing: -1.5px;
  line-height: 1.12;
}
.meditation-page .meditation-page-sub {
  font-size: 15px;
  max-width: 46em;
}
@keyframes medBreathe {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(1.12); opacity: 0.95; }
}
@keyframes medFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* 2. 统计卡：柔光渐变 + 图标圆章 + 数字突出 */
.meditation-page-stats {
  margin: 22px 0 10px;
  animation: medFadeUp 0.6s ease 0.08s both;
}
.meditation-page-stats .medstats-grid {
  gap: 14px;
}
.meditation-page-stats .medstats-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--theme-line, #e6e7de);
  border-radius: 20px;
  padding: 20px 18px 18px;
  background: linear-gradient(165deg, var(--card, #fffefa) 30%, var(--theme-soft, #f2f4e8) 130%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.meditation-page-stats .medstats-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(70, 80, 45, 0.1);
}
.meditation-page-stats .medstats-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--theme-soft, #edf3da);
  color: var(--theme-accent-ink, #6d8a2f);
  margin-bottom: 4px;
}
.meditation-page-stats .medstats-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.meditation-page-stats .medstats-value {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* 3. 课程分组标题：短横线点缀 */
.meditation-page .meditation-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--theme-muted, #6d735f);
}
.meditation-page .meditation-group-title::before {
  content: "";
  width: 24px;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--theme-focus, #a9c743);
}

/* 4. 曲目行：卡片化 + 悬停浮起 + 播放中高亮 */
.meditation-page .playlist-list {
  gap: 10px;
}
.meditation-page .playlist-track {
  background: var(--card, #fffefa);
  border: 1px solid var(--theme-line, #e9e9e2);
  border-radius: 16px;
  padding: 13px 18px 13px 14px;
  grid-template-columns: 30px 52px minmax(0, 1fr) auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.meditation-page .playlist-track:hover {
  transform: translateY(-2px);
  border-color: var(--theme-accent-line, #d9e8b8);
  box-shadow: 0 12px 26px rgba(70, 80, 45, 0.09);
  background: var(--card, #fffefa);
}
.meditation-page .playlist-track-cover {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(60, 65, 40, 0.12);
}
.meditation-page .playlist-index {
  font-size: 12px;
  font-weight: 600;
}
.meditation-page .playlist-track-info strong {
  font-size: 15px;
}
/* 播放中：柔光描边 + 呼吸圆点 */
.meditation-page .playlist-track.is-playing {
  border-color: var(--theme-focus, #a9c743);
  background: linear-gradient(165deg, var(--theme-soft, #eff5da) 0%, var(--card, #fffefa) 90%);
  box-shadow: 0 10px 26px rgba(110, 140, 45, 0.14);
}
.meditation-page .playlist-track.is-playing .playlist-index {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--theme-accent-ink, #6d8a2f);
  font-weight: 800;
}
.meditation-page .playlist-track.is-playing .playlist-index::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--theme-focus, #a9c743);
  animation: medPulse 1.6s ease-in-out infinite;
}
@keyframes medPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.45; }
}

/* 5. 徽标：试听用主题柔色，会员用描边 */
.meditation-page .badge.free {
  background: var(--theme-soft, #edf3da);
  color: var(--theme-accent-ink, #5c7a24);
  font-weight: 800;
}
.meditation-page .badge.lock {
  background: transparent;
  border: 1px solid var(--theme-line, #dfdfd7);
  color: var(--theme-muted, #8b8b7f);
}

/* 6. 分组入场微动画 */
.meditation-page .meditation-group {
  animation: medFadeUp 0.55s ease both;
}
.meditation-page .meditation-group:nth-child(2) { animation-delay: 0.07s; }
.meditation-page .meditation-group:nth-child(3) { animation-delay: 0.14s; }
.meditation-page .meditation-group:nth-child(4) { animation-delay: 0.21s; }

/* 7. 底部播放条：更圆润柔和 */
.meditation-page .meditation-player-bar {
  border-radius: 20px;
  padding: 14px 18px;
  border-color: var(--theme-accent-line, #d9e8b8);
  box-shadow: 0 14px 34px rgba(70, 80, 45, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .meditation-page .section-heading,
  .meditation-page .section-heading::before,
  .meditation-page-stats,
  .meditation-page .meditation-group,
  .meditation-page .playlist-track.is-playing .playlist-index::before {
    animation: none;
  }
  .meditation-page .playlist-track,
  .meditation-page-stats .medstats-card {
    transition: none;
  }
}

/* 页脚透明根因修复：已废弃的 SiteFooter 组件残留了一套 .site-footer{background:var(--card);border-top:...} 规则，
   与透明页脚规则同优先级但位置更靠后，导致底栏色差。此处用更高优先级彻底覆盖。 */
.site-shell > footer.site-footer {
  background: transparent;
  border-top: none;
  margin-top: 8px;
  padding: 6px 0;
}
@media (min-width: 1101px) {
  .site-shell:not(.section-shell) > footer.site-footer {
    height: 24px;
    margin-top: 4px;
  }
}
/* 登录框"记住我" */
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted, #7b7d75);
  cursor: pointer;
  user-select: none;
}
.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink, #20221e);
  cursor: pointer;
}

/* ============ 主页一屏完整显示（桌面端）============
   根因：.bento-row 的网格项（各卡片及 .meditation-large 包裹层）缺少
   min-height:0/min-width:0，内容最小尺寸会把 fr 行/列撑大，导致整页
   出现滚动条。此处允许网格项收缩，fr 行高严格生效，整页锁定一屏、
   上下左右都不滚动。卡片内部已有弹性区（封面/预览/列表）吸收差值，
   4号卡的 overflow:hidden 修复不受影响。 */
@media (min-width: 1101px) {
  .bento-row > * {
    min-height: 0;
    min-width: 0;
  }
}
/* 中等高度桌面（831–950px）：轻微压缩 hero 与打卡卡的固定内容，
   避免文字被裁剪；830px 以下沿用已有的矮屏压缩规则（区间不重叠） */
@media (min-width: 1101px) and (min-height: 831px) and (max-height: 950px) {
  .hero-card { padding: 18px 22px; }
  .hero-card h1 { font-size: clamp(38px, min(4vw, 22cqh), 60px); }
  .hero-copy { font-size: 14px; line-height: 1.55; }
  .hero-course-actions { margin-top: 12px; }
  .checkin-card { padding: 12px 18px; }
  .checkin-main .button { min-height: 36px; padding: 8px 14px; }
  .stats-row { padding-top: 9px; }
  .stats-row strong { font-size: 22px; }
}

/* ============ 底部通栏音乐播放条（网易云风格） ============ */
/* 底栏显示时页面底部留出空间，避免遮挡页脚 */
body.has-music-bar {
  padding-bottom: 76px;
}
body.has-music-bar .site-footer {
  margin-bottom: 0;
}
.music-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--card, #fffefa) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line, #e8e8e1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
}
.mbb-main {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 16px;
}
.mbb-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--theme-soft, #f3f4f0);
}
.mbb-info {
  min-width: 0;
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mbb-info strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mbb-info small {
  font-size: 12px;
  color: var(--theme-muted, #74776e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mbb-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mbb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 6px;
}
.mbb-btn:hover {
  background: var(--theme-soft, #f3f4f0);
}
.mbb-btn.is-active {
  color: var(--theme-accent, #8baa3b);
  background: var(--theme-soft, #f3f4f0);
}
.mbb-play {
  width: 44px;
  height: 44px;
  background: var(--ink, #20221e);
  color: var(--paper, #f7f6f2);
}
.mbb-play:hover {
  background: var(--ink, #20221e);
  opacity: 0.88;
}
.mbb-progress-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mbb-progress {
  flex: 1 1 auto;
  min-width: 0;
}
.mbb-time {
  font-size: 12px;
  color: var(--theme-muted, #74776e);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mbb-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.mbb-tools .sleep-wrap {
  position: relative;
  display: inline-flex;
}
/* 迷你条展开热区：封面+标题可点开展开全屏播放器 */
.mbb-expand-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.mbb-expand-hit .mbb-info {
  width: auto;
}
/* —— 全屏播放器（移动端迷你条点开展开） —— */
.mfp-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, #000 45%, transparent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mfp-overlay.mfp-entered {
  opacity: 1;
}
.mfp-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--card, #fffefa);
  border-radius: 20px 20px 0 0;
  padding: 8px 20px 28px;
  transform: translateY(40px);
  transition: transform 0.34s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.2);
}
.mfp-overlay.mfp-entered .mfp-sheet {
  transform: translateY(0);
}
.mfp-top {
  display: flex;
  align-items: center;
  padding: 8px 0 4px;
  position: sticky;
  top: 0;
  background: var(--card, #fffefa);
  z-index: 5;
  pointer-events: auto;
}
.mfp-collapse { pointer-events: auto; position: relative; z-index: 6; }
.mfp-collapse {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--theme-soft, #f3f4f0);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mfp-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--theme-muted, #74776e);
}
.mfp-spacer {
  width: 44px;
}
.mfp-cover-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
.mfp-cover {
  width: 220px;
  height: 220px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.mfp-cover.is-playing {
  border-radius: 50%;
  animation: mbb-spin 8s linear infinite;
}
.mfp-info {
  text-align: center;
  padding: 4px 0 12px;
}
.mfp-info strong {
  display: block;
  font-size: 19px;
  margin-bottom: 4px;
}
.mfp-info small {
  font-size: 13px;
  color: var(--theme-muted, #74776e);
}
.mfp-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  color: #a33;
}
.mfp-error button {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 12px;
  cursor: pointer;
}
.mfp-progress {
  padding: 4px 0 8px;
}
.mfp-time {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--theme-muted, #74776e);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.mfp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 12px 0 16px;
}
.mfp-btn {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.mfp-btn.mfp-play {
  width: 68px;
  height: 68px;
  background: var(--ink, #20221e);
  color: var(--paper, #f7f6f2);
}
.mfp-tools {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.mfp-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--theme-soft, #f3f4f0);
  color: inherit;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
}
.mfp-tool .rate-text {
  font-size: 13px;
}
/* PC 端也允许展开全屏（从右侧迷你播放器点开展开） */
@media (min-width: 721px) {
  .mfp-sheet {
    border-radius: 20px;
    margin-bottom: 4dvh;
  }
  .mfp-overlay {
    align-items: center;
  }
}
/* 底栏播放失败提示：之前移动端失败无任何反馈 */
.mbb-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 12px;
  color: #a33;
  background: color-mix(in srgb, #c00 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #c00 15%, transparent);
}
.mbb-error button {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
/* 移动端细进度条：桌面端隐藏 */
.mbb-progress-line {
  display: none;
}
/* 关闭后回到小悬浮钮 */
/* 音乐悬浮钮：PC 右侧垂直中间 44px 圆钮（A方案） */
.mbb-fab {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--theme-accent-ink, #c4e348);
  background: var(--theme-fab-bg, rgba(255, 254, 250, 0.75));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mbb-fab:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
/* PC 端 fab 只显示图标，不显示文字 */
.mbb-fab .mbb-fab-text {
  display: none;
}
/* 移动端：右下角小圆钮 */
@media (max-width: 720px) {
  .mbb-fab {
    right: 16px;
    top: auto;
    bottom: 16px;
    transform: none;
  }
  .mbb-fab:hover {
    transform: scale(1.06);
  }
}
/* 无音乐时管理员上传入口：虚线边框提示可点击 */
.mbb-fab-empty {
  border-style: dashed;
  border-width: 1.5px;
}
/* 睡眠定时弹出菜单在底栏上方展开 */
.music-bottombar .sleep-popover {
  bottom: calc(100% + 8px);
  top: auto;
}
/* 移动端精简：封面+歌名+播放/暂停+顶部细进度条 */
@media (max-width: 720px) {
  body.has-music-bar {
    padding-bottom: 64px;
  }
  .mbb-main {
    height: 60px;
    gap: 10px;
    padding: 6px 12px;
  }
  .mbb-cover {
    width: 40px;
    height: 40px;
  }
  .mbb-info {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .mbb-progress-wrap,
  .mbb-tools .sleep-wrap,
  .mbb-tools .rate-text {
    display: none;
  }
  .mbb-tools .mbb-btn:not(.mbb-close) {
    display: none;
  }
  .mbb-progress-line {
    display: block;
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    margin: 0;
    padding: 0;
  }
  .mbb-progress-line::-webkit-slider-runnable-track {
    height: 3px;
    background: linear-gradient(
      to right,
      var(--theme-accent, #8baa3b) var(--progress, 0%),
      var(--line, #e8e8e1) var(--progress, 0%)
    );
  }
  .mbb-progress-line::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
  }
  .mbb-progress-line::-moz-range-track {
    height: 3px;
    background: var(--line, #e8e8e1);
  }
  .mbb-progress-line::-moz-range-progress {
    height: 3px;
    background: var(--theme-accent, #8baa3b);
  }
  .mbb-progress-line::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mbb-fab:hover {
    transform: none;
  }
}

/* ============ 主页卡片拖拽排序（管理员编辑模式，PC 端） ============ */
/* 包装层：平时透明，只做定位与拖拽状态容器，不影响 bento 布局 */
.home-card-drag {
  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
}
.home-card-drag > *:not(.card-drag-handle) {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
/* 正在拖的卡片：半透明 + 阴影 */
.home-card-drag.is-dragging {
  opacity: 0.4;
}
.home-card-drag.is-dragging > *:not(.card-drag-handle) {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
/* 拖拽目标位置：高亮边框 */
.home-card-drag.is-drop-target {
  outline: 2px dashed var(--theme-accent, #2a9db8);
  outline-offset: -2px;
  border-radius: 7px;
}
/* 拖拽手柄：左上角小圆钮 */
.card-drag-handle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}
.card-drag-handle:hover {
  color: var(--theme-accent, #2a9db8);
  border-color: var(--theme-accent, #2a9db8);
  opacity: 1;
}
.card-drag-handle:active {
  cursor: grabbing;
}

/* ============ 主页卡片点选交换（管理员编辑模式，移动端） ============ */
/* 选中态：鎏金描边 + 柔光阴影，提示“已选中，再点另一张卡交换位置” */
.home-card-drag.is-swap-selected {
  outline: 2px solid var(--theme-accent, #b08d4a);
  outline-offset: 2px;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(176, 141, 74, 0.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ============ 冥想播放器工具按钮（睡眠定时/倍速） ============ */
/* 首页 4 号卡 MeditationCard 与课程页 MeditationPlayerBar 共用，与音乐底栏统一 */
.mp-tools,
.mpb-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mp-tool-btn,
.mpb-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mp-tool-btn:hover,
.mpb-tool-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.mp-tool-btn.is-active,
.mpb-tool-btn.is-active {
  color: var(--theme-accent-ink, #2a9db8);
  border-color: var(--theme-accent-ink, #2a9db8);
  background: var(--theme-soft);
}
/* 睡眠定时弹出菜单在冥想卡片内向上展开 */
.mp-tools .sleep-wrap,
.mpb-tools .sleep-wrap {
  position: relative;
}
.mp-tools .sleep-popover,
.mpb-tools .sleep-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mp-tools .sleep-popover button,
.mpb-tools .sleep-popover button {
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.mp-tools .sleep-popover button:hover,
.mpb-tools .sleep-popover button:hover {
  background: var(--theme-soft);
}
.mp-tools .sleep-remain,
.mpb-tools .sleep-remain {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mp-tools .rate-text,
.mpb-tools .rate-text {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .mp-tools,
  .mpb-tools {
    gap: 4px;
  }
  .mp-tool-btn,
  .mpb-tool-btn {
    min-width: 30px;
    height: 30px;
  }
}

/* ============ 移动端卡片懒挂载占位 ============ */
/* 仅移动端非编辑模式启用；卡片进入视口前 500px 即挂载，占位极少被看到 */
.lazy-mount-ph {
  min-height: 160px;
}

/* ============ 冥想课程落地页 · 深色冥想风（Calm / Headspace / 潮汐） ============ */
/* 课程页独占深色背景：去掉 section-page 的内边距，让渐变铺满 */
main.section-courses {
  padding: 0;
}
.course-landing {
  position: relative;
  color: #f3efe7;
  min-height: 72vh;
  overflow: clip;
  background:
    radial-gradient(1100px 520px at 88% -80px, rgba(139, 109, 249, 0.26), transparent 62%),
    radial-gradient(860px 480px at 6% 30%, rgba(64, 110, 246, 0.15), transparent 60%),
    radial-gradient(760px 720px at 50% 112%, rgba(244, 114, 182, 0.10), transparent 60%),
    linear-gradient(180deg, #101230 0%, #171941 42%, #221847 100%);
}
/* —— Hero —— */
.course-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 28px 68px;
  background: linear-gradient(155deg, #0c0d2a 0%, #1b1949 48%, #3a1c63 100%);
}
.course-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(1px 1px at 28% 66%, rgba(255, 255, 255, 0.6), transparent 62%),
    radial-gradient(1.3px 1.3px at 44% 14%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(1px 1px at 58% 40%, rgba(255, 255, 255, 0.5), transparent 62%),
    radial-gradient(1.8px 1.8px at 71% 78%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(1px 1px at 83% 30%, rgba(255, 255, 255, 0.65), transparent 62%),
    radial-gradient(1.4px 1.4px at 92% 58%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(1px 1px at 8% 82%, rgba(255, 255, 255, 0.55), transparent 62%),
    radial-gradient(1.2px 1.2px at 36% 88%, rgba(255, 255, 255, 0.6), transparent 62%),
    radial-gradient(1px 1px at 64% 8%, rgba(255, 255, 255, 0.6), transparent 62%),
    radial-gradient(1.5px 1.5px at 22% 46%, rgba(255, 255, 255, 0.5), transparent 62%),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, 0.55), transparent 62%);
}
.course-moon {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  top: -70px;
  right: 7%;
  pointer-events: none;
  background: radial-gradient(circle at 36% 34%, #fffaf0 0%, #f7e3ae 42%, rgba(247, 227, 174, 0.28) 62%, transparent 72%);
  filter: blur(1px);
  opacity: 0.92;
  animation: course-moon-glow 9s ease-in-out infinite alternate;
}
@keyframes course-moon-glow {
  from { opacity: 0.82; }
  to { opacity: 1; }
}
.course-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.course-orb-a {
  width: 440px;
  height: 440px;
  left: -130px;
  top: -130px;
  background: radial-gradient(circle, rgba(124, 93, 250, 0.5), transparent 70%);
  animation: course-drift 24s ease-in-out infinite alternate;
}
.course-orb-b {
  width: 380px;
  height: 380px;
  right: -110px;
  bottom: -150px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.32), transparent 70%);
  animation: course-drift 30s ease-in-out infinite alternate-reverse;
}
@keyframes course-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(46px, 34px, 0); }
}
.course-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 54px;
  align-items: center;
}
.course-hero-cover {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 24px 70px rgba(10, 6, 30, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 90px rgba(139, 109, 249, 0.28);
}
.course-cover-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.course-cover-fallback {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7aef5;
  background: radial-gradient(circle at 50% 38%, #2c2666, #171941 78%);
}
.course-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.34em;
  color: #b7aef5;
  font-weight: 600;
}
.course-hero-copy h1 {
  margin: 14px 0 10px;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.18;
  color: #ffffff;
  letter-spacing: 0.01em;
}
.course-tagline {
  margin: 0;
  color: #cfc9e8;
  font-size: 17px;
  line-height: 1.7;
}
.course-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 4px;
}
.course-stat {
  font-size: 13px;
  color: #d9d4ec;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.course-stat.highlight {
  color: #f5d78e;
  border-color: rgba(245, 215, 142, 0.45);
  background: rgba(245, 215, 142, 0.10);
}
.course-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 20px;
}
.course-price {
  font-size: 36px;
  font-weight: 700;
  color: #f5d78e;
  letter-spacing: 0.02em;
}
.course-price-note {
  font-size: 14px;
  color: #a9a3c8;
}
.course-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.course-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.course-btn:active {
  transform: scale(0.97);
}
.course-btn-primary {
  color: #3a2a12;
  background: linear-gradient(135deg, #f7e0a0 0%, #f0b45c 100%);
  box-shadow: 0 10px 30px rgba(240, 180, 92, 0.35);
}
.course-btn-primary:hover {
  box-shadow: 0 12px 36px rgba(240, 180, 92, 0.5);
  transform: translateY(-1px);
}
.course-btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.course-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}
.course-btn-small {
  padding: 9px 18px;
  font-size: 14px;
}
/* —— 通用区块 —— */
.course-section {
  max-width: 1060px;
  margin: 0 auto;
  padding: 44px 28px 6px;
}
.course-section > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 22px;
  color: #ffffff;
  letter-spacing: 0.04em;
}
.course-section > h2::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a78bfa, #f472b6);
  flex: none;
}
.course-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.course-section-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 22px;
  color: #ffffff;
  letter-spacing: 0.04em;
}
.course-section-head h2::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a78bfa, #f472b6);
  flex: none;
}
.course-section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.course-count {
  font-size: 13px;
  color: #a9a3c8;
}
/* 毛玻璃卡片（主题变量驱动，深浅主题自适应） */
.course-glass {
  background: var(--theme-glass, rgba(255, 255, 255, 0.055));
  border: 1px solid var(--theme-glass-border, rgba(255, 255, 255, 0.13));
  border-radius: 20px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 44px rgba(8, 6, 24, 0.38);
}
/* —— 课程介绍 —— */
.course-intro {
  padding: 28px 30px;
}
.course-intro p {
  margin: 0 0 14px;
  color: #d9d4ec;
  line-height: 1.95;
  font-size: 15.5px;
}
.course-intro p:last-child {
  margin-bottom: 0;
}
/* —— 课程大纲（复用 MeditationCourseList，深色覆盖） —— */
.course-landing .meditation-groups {
  display: grid;
  gap: 26px;
}
.course-landing .meditation-group-title {
  color: #ece7fb;
  font-size: 16px;
  margin: 0 0 12px;
  letter-spacing: 0.06em;
}
.course-landing .playlist-list {
  display: grid;
  gap: 10px;
}
.course-landing .playlist-track {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  color: #f3efe7;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.course-landing .playlist-track:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
.course-landing .playlist-track.is-playing {
  border-color: rgba(245, 215, 142, 0.55);
  background: rgba(245, 215, 142, 0.08);
}
.course-landing .playlist-index {
  color: #8f88b8;
}
.course-landing .playlist-track-info strong {
  color: #ffffff;
}
.course-landing .playlist-track-info small {
  color: #b3abd6;
}
.course-landing .playlist-duration {
  font-size: 12.5px;
  color: #8f88b8;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.course-landing .badge.free {
  background: rgba(212, 243, 110, 0.13);
  color: #d9f99d;
  border: 1px solid rgba(212, 243, 110, 0.38);
}
.course-landing .badge.lock {
  background: rgba(255, 255, 255, 0.07);
  color: #cfc9e8;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.course-landing .meditation-empty {
  color: #a9a3c8;
}
/* 冥想播放条深色 */
.course-landing .meditation-player-bar {
  background: rgba(22, 20, 52, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  color: #f3efe7;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(8, 6, 24, 0.5);
}
.course-landing .mpb-info strong {
  color: #ffffff;
}
.course-landing .mpb-info small {
  color: #b3abd6;
}
.course-landing .time-label {
  color: #a9a3c8;
}
.course-landing .mpb-play {
  background: linear-gradient(135deg, #f7e0a0, #f0b45c);
  color: #3a2a12;
}
.course-landing .mpb-tool-btn {
  color: #d9d4ec;
  border-color: rgba(255, 255, 255, 0.2);
}
/* 修习数据深色 */
.course-landing .medstats-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.course-landing .medstats-label {
  color: #b3abd6;
}
.course-landing .medstats-value {
  color: #ffffff;
}
.course-landing .medstats-hint,
.course-landing .medstats-loading,
.course-landing .medstats-error {
  color: #a9a3c8;
}
.course-landing .medstats-icon {
  color: #f5d78e;
}
/* —— 学员评价 —— */
.course-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.course-review {
  margin: 0;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-review-star {
  color: #f5d78e;
}
.course-review blockquote {
  margin: 0;
  color: #d9d4ec;
  line-height: 1.85;
  font-size: 14.5px;
  flex: 1;
}
.course-review figcaption {
  color: #a9a3c8;
  font-size: 13px;
}
/* —— 购买区 —— */
.course-purchase {
  margin: 10px 0 64px;
  padding: 40px 36px;
  text-align: center;
  border-color: rgba(245, 215, 142, 0.32);
  background:
    linear-gradient(180deg, rgba(245, 215, 142, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.045);
}
.course-purchase h2 {
  margin: 12px 0 6px;
  font-size: 26px;
  color: #ffffff;
}
.course-benefits {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.course-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d9d4ec;
  font-size: 15px;
}
.course-benefits svg {
  color: #d9f99d;
  flex: none;
}
.course-landing .plan-options {
  justify-content: center;
  margin-bottom: 24px;
}
.course-landing .plan-option {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f3efe7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.course-landing .plan-option:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.course-landing .plan-option.selected {
  border-color: #f5d78e;
  background: rgba(245, 215, 142, 0.10);
  box-shadow: 0 0 24px rgba(245, 215, 142, 0.18);
}
.course-landing .plan-name {
  color: #ffffff;
}
.course-landing .plan-price {
  color: #f5d78e;
}
.course-landing .plan-term {
  color: #a9a3c8;
}
.course-landing .plan-tag {
  background: linear-gradient(135deg, #f7e0a0, #f0b45c);
  color: #3a2a12;
}
.course-buy {
  margin-top: 4px;
  font-size: 16px;
  padding: 14px 34px;
}
.course-vip-unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 14px;
  color: #a9a3c8;
}
.course-vip-unlock input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 9px 16px;
  color: #fff;
  width: 200px;
  outline: none;
}
.course-vip-unlock input::placeholder {
  color: #7d779e;
}
.course-vip-unlock input:focus {
  border-color: #a78bfa;
}
.course-unlocked-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: #d9f99d;
  font-size: 14.5px;
}
.course-unlocked-note svg {
  flex: none;
}
/* 管理员编辑按钮（深色适配） */
.course-landing .page-edit-btn {
  color: #cfc9e8;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  margin-top: 18px;
}
.course-landing .page-edit-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.course-section-head .page-edit-btn {
  margin-top: 0;
}
/* 4 号卡：整卡可点 */
.meditation-card.meditation-clickable {
  cursor: pointer;
}
.meditation-card.meditation-clickable:hover {
  transform: translateY(-2px);
}
.meditation-cover {
  position: relative;
}
.meditation-trial-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--theme-on-accent, #2c4416);
  background: linear-gradient(135deg, var(--theme-button, #e4f99b), var(--theme-button-hover, #d4f36e));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* —— 移动端 —— */
@media (max-width: 760px) {
  .course-hero {
    padding: 54px 20px 46px;
  }
  .course-hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .course-hero-cover {
    width: 200px;
    margin: 0 auto;
  }
  .course-eyebrow {
    letter-spacing: 0.26em;
  }
  .course-stats,
  .course-ctas,
  .course-price-row {
    justify-content: center;
  }
  .course-price-row {
    align-items: center;
  }
  .course-btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 140px;
  }
  .course-moon {
    width: 130px;
    height: 130px;
    top: -46px;
    right: 4%;
  }
  .course-section {
    padding: 30px 18px 4px;
  }
  .course-reviews {
    grid-template-columns: 1fr;
  }
  .course-purchase {
    padding: 30px 22px;
    margin-bottom: 48px;
  }
  .course-landing .plan-options {
    flex-direction: column;
    align-items: stretch;
  }
  .course-landing .plan-option {
    width: 100%;
  }
  .course-vip-unlock input {
    width: 100%;
    max-width: 260px;
  }
}

/* ============ 课程页 · 移动端 App 化 + PC 双栏（2026-10-08） ============ */

/* —— 紧凑标题栏：移动端滚动时 Hero 收起 —— */
.course-compact {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: rgba(15, 17, 44, 0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(-110%);
  transition: transform 0.32s ease;
  pointer-events: none;
}
.course-compact.show {
  transform: translateY(0);
  pointer-events: auto;
}
.course-compact-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-compact .course-compact-btn {
  flex: none;
  padding: 10px 20px;
  font-size: 14px;
  min-height: 44px;
}
@media (max-width: 760px) {
  .course-compact {
    display: flex;
  }
}

/* —— PC 双栏：左大纲 + 右正在播放 —— */
@media (min-width: 761px) {
  .course-main {
    max-width: 1060px;
    margin: 0 auto;
    padding: 44px 28px 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 30px;
    align-items: start;
  }
  .course-main > .course-section {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .course-side {
    position: sticky;
    top: 24px;
  }
  .course-hero {
    padding: 88px 28px 80px;
  }
  .course-hero-inner {
    max-width: 1120px;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 64px;
  }
  /* 评价卡悬停微动效 */
  .course-review {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }
  .course-review:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 215, 142, 0.38);
    box-shadow: 0 22px 55px rgba(8, 6, 24, 0.5);
  }
}
@media (max-width: 760px) {
  .course-side {
    display: none;
  }
}

/* —— 购买区居中 —— */
.course-purchase {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* —— 正在播放卡（PC 右栏） —— */
.course-now {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.course-now-cover {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(8, 6, 24, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}
.course-now-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.course-now-eq {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(10, 8, 28, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.course-now-eq i {
  width: 3px;
  border-radius: 2px;
  background: var(--lime, #f5d78e);
  transform-origin: bottom;
  animation: course-eq 1.1s ease-in-out infinite;
}
.course-now-eq i:nth-child(1) {
  height: 55%;
}
.course-now-eq i:nth-child(2) {
  height: 100%;
  animation-delay: 0.28s;
}
.course-now-eq i:nth-child(3) {
  height: 38%;
  animation-delay: 0.55s;
}
@keyframes course-eq {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}
.course-now-meta {
  text-align: center;
}
.course-now-meta strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
}
.course-now-meta small {
  color: #a9a3c8;
  font-size: 13px;
}
.course-now-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.course-now-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d9d4ec;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}
.course-now-controls button:hover:not(:disabled) {
  color: #ffffff;
  transform: scale(1.08);
}
.course-now-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}
.course-now-controls .course-now-play {
  width: 66px;
  height: 66px;
  min-width: 66px;
  min-height: 66px;
  background: linear-gradient(135deg, #f7e0a0, #f0b45c);
  color: #3a2a12;
  box-shadow: 0 10px 28px rgba(240, 180, 92, 0.42);
}
.course-now-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.course-now-tool,
.course-fp-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 48px;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #d9d4ec;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.course-now-tool:hover,
.course-fp-tool:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.course-now-tool.is-active,
.course-fp-tool.is-active {
  border-color: #f5d78e;
  color: #f5d78e;
  background: rgba(245, 215, 142, 0.1);
}
/* 睡眠菜单在课程页内向上展开（深色） */
.course-now-tools .sleep-wrap,
.course-fp-tools .sleep-wrap {
  position: relative;
}
.course-now-tools .sleep-popover,
.course-fp-tools .sleep-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 136px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(28, 26, 62, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.course-now-tools .sleep-popover button,
.course-fp-tools .sleep-popover button {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #e8e4f7;
  font-size: 14px;
  cursor: pointer;
}
.course-now-tools .sleep-popover button:hover,
.course-fp-tools .sleep-popover button:hover {
  background: rgba(255, 255, 255, 0.09);
}
.course-now-tools .sleep-remain,
.course-fp-tools .sleep-remain {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.course-now-tools .rate-text,
.course-fp-tools .rate-text {
  font-variant-numeric: tabular-nums;
}

/* —— 移动端迷你播放条 —— */
.course-minibar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  display: none;
  align-items: center;
  gap: 12px;
  width: auto;
  padding: 10px 10px 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(22, 20, 54, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 44px rgba(5, 4, 20, 0.55);
  color: #f3efe7;
  cursor: pointer;
  text-align: left;
}
.course-minibar-cover {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
}
.course-minibar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.course-minibar-info strong {
  font-size: 14.5px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-minibar-info small {
  font-size: 12px;
  color: #a9a3c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-minibar-play {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7e0a0, #f0b45c);
  color: #3a2a12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(240, 180, 92, 0.4);
}

/* —— 移动端全屏播放器 —— */
.course-fp {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 30px
    calc(30px + env(safe-area-inset-bottom, 0px));
  color: #f3efe7;
}
.course-fp-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 480px at 50% -60px, rgba(139, 109, 249, 0.38), transparent 65%),
    radial-gradient(700px 500px at 50% 115%, rgba(244, 114, 182, 0.16), transparent 60%),
    linear-gradient(180deg, #12133a 0%, #1d1a4e 55%, #2b1a52 100%);
}
.course-fp-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #e8e4f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.course-fp-cover {
  position: relative;
  z-index: 1;
  width: min(68vw, 300px);
}
.course-fp-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow:
    0 30px 80px rgba(5, 3, 20, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 90px rgba(139, 109, 249, 0.3);
}
.course-fp-meta {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 100%;
}
.course-fp-meta strong {
  display: block;
  font-size: 22px;
  color: #ffffff;
  line-height: 1.4;
}
.course-fp-meta small {
  font-size: 14px;
  color: #a9a3c8;
}
.course-fp-progress {
  position: relative;
  z-index: 1;
  width: 100%;
}
.course-fp .time-label {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #a9a3c8;
  font-size: 13px;
}
.course-fp-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 30px;
}
.course-fp-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d9d4ec;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}
.course-fp-controls button:active {
  transform: scale(0.92);
}
.course-fp-controls .course-fp-play {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  background: linear-gradient(135deg, #f7e0a0, #f0b45c);
  color: #3a2a12;
  box-shadow: 0 16px 44px rgba(240, 180, 92, 0.45);
}
.course-fp-tools {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.course-fp-tool {
  min-height: 48px;
  font-size: 14px;
}

/* —— 移动端：迷你条/全屏仅手机显示；冥想播放时隐藏全局音乐底栏 —— */
@media (max-width: 760px) {
  body.course-med-playing .music-bottombar,
  body.course-med-playing .mbb-fab {
    transform: translateY(130%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  body.course-med-playing:not(.has-music-bar) {
    padding-bottom: 92px;
  }
  .course-minibar {
    display: flex;
  }
  .course-fp {
    display: flex;
  }
  /* 课时行：大触控区 */
  .course-landing .playlist-track {
    min-height: 62px;
  }
  .course-landing .playlist-track-info strong {
    font-size: 15.5px;
  }
  .course-landing .playlist-list {
    gap: 12px;
  }
  /* 移动端字号与按钮 */
  .course-landing .course-section-head h2 {
    font-size: 20px;
  }
  .course-landing .course-intro p {
    font-size: 16px;
  }
  .course-landing .course-btn {
    min-height: 48px;
    font-size: 16px;
  }
  .course-landing .plan-option {
    min-height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-compact,
  .course-now-eq i,
  .course-review {
    transition: none;
    animation: none;
  }
}

/* ============ 课程页 · 典雅风（宣纸 · 墨 · 鎏金）2026-10-08 ============ */
/* 整页浅色：本块在文件末尾，以更高特异度覆盖前面的深色冥想风 */

/* —— 纸底 —— */
.course-landing {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(1000px 480px at 50% -120px, rgba(168, 132, 62, 0.10), transparent 60%),
    radial-gradient(820px 620px at 50% 115%, rgba(156, 91, 60, 0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120, 100, 70, 0.022) 0 1px, transparent 1px 4px);
}
.course-landing h1,
.course-landing h2,
.course-landing h3 {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}

/* —— Hero：居中 —— */
.course-landing .course-hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--card) 100%);
  border-bottom: 4px double var(--theme-accent-line, #d8cba6);
  padding: 72px 28px 64px;
}
.course-landing .course-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
}
.course-landing .course-eyebrow {
  color: var(--theme-accent-ink, #9c5b3c);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  font-weight: 600;
}
.course-landing .course-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.course-hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 2px;
}
.course-hero-rule::before,
.course-hero-rule::after {
  content: "";
  width: 84px;
  height: 1px;
}
.course-hero-rule::before {
  background: linear-gradient(90deg, transparent, var(--theme-accent-line, #b08d4a));
}
.course-hero-rule::after {
  background: linear-gradient(90deg, var(--theme-accent-line, #b08d4a), transparent);
}
.course-hero-rule i {
  width: 7px;
  height: 7px;
  background: var(--lime, #b08d4a);
  transform: rotate(45deg);
  flex: none;
}
.course-landing .course-tagline {
  margin: 14px 0 0;
  max-width: 34em;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.9;
  letter-spacing: 0.06em;
}
/* —— 紧凑内容头（改版）：去价格 hero，标题+信息一次看完 —— */
.course-landing .course-hero-compact {
  padding: 40px 20px 24px;
  border-bottom-width: 2px;
}
.course-landing .course-hero-compact h1 {
  font-size: clamp(26px, 4vw, 34px);
  margin-top: 10px;
}
.course-landing .course-hero-compact .course-tagline {
  margin-top: 8px;
  font-size: 14px;
}
.course-landing .course-hero-compact .course-stats {
  margin-top: 14px;
}
/* —— 会员瘦横幅：非会员可见，点开 paywall —— */
.course-member-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--card), var(--paper));
  border: 1px solid var(--theme-accent-line, #e5d3a3);
}
.course-member-strip-txt {
  flex: 1;
  min-width: 0;
}
.course-member-strip-txt strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
.course-member-strip-txt small {
  font-size: 12px;
  color: var(--muted);
}
.course-member-strip-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* —— 系列切换 tabs（改版）：独立成行，不压分隔线 —— */
.course-series-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 16px 16px 4px;
}
.course-series-tab {
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--theme-line, rgba(0, 0, 0, 0.14));
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.course-series-tab.is-active {
  border-color: var(--theme-accent-line, #b98a2f);
  background: var(--theme-accent-line, #b98a2f);
  color: var(--theme-on-accent, #fff);
}
/* —— 课程介绍折叠 —— */
.course-intro-fold {
  padding: 0;
  overflow: hidden;
}
.course-intro-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.course-intro-fold summary::-webkit-details-marker {
  display: none;
}
.course-intro-fold summary h2 {
  margin: 0;
  font-size: 17px;
}
.course-intro-fold summary svg {
  transition: transform 0.25s ease;
  color: var(--theme-muted, #74776e);
}
.course-intro-fold[open] summary svg {
  transform: rotate(180deg);
}
.course-intro-fold .course-intro {
  padding: 0 20px 18px;
}
.course-landing .course-tagline:empty {
  display: none;
}
/* 画框式封面 */
.course-landing .course-hero-cover {
  width: min(300px, 68vw);
  margin: 28px auto 0;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--theme-accent-line, #b08d4a);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(120, 95, 50, 0.20);
  overflow: visible;
}
.course-landing .course-cover-img {
  border-radius: 3px;
}
.course-landing .course-cover-fallback {
  color: var(--theme-accent-line, #a8843e);
  background: radial-gradient(circle at 50% 38%, var(--card), var(--paper) 78%);
  border-radius: 3px;
}
.course-landing .course-stats {
  justify-content: center;
  margin: 24px 0 0;
}
.course-landing .course-stat {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
}
.course-landing .course-stat.highlight {
  color: var(--theme-accent-ink, #9c5b3c);
  border-color: var(--theme-accent-line, #b08d4a);
  background: var(--theme-soft, #faf3e2);
}
.course-landing .course-price-row {
  justify-content: center;
  margin-top: 22px;
}
.course-landing .course-price {
  color: var(--theme-accent-ink, #9c5b3c);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 44px;
}
.course-landing .course-price-note {
  color: var(--muted);
}
.course-landing .course-ctas {
  justify-content: center;
  margin-top: 26px;
}
.course-landing .course-btn-primary {
  background: var(--theme-button, #2b2620);
  color: var(--theme-on-button, #f3e9d2);
  border: 1px solid var(--theme-accent-line, #a8843e);
  box-shadow: 0 10px 26px rgba(43, 38, 32, 0.22);
}
.course-landing .course-btn-primary:hover {
  background: var(--theme-button-hover, #3a332a);
  box-shadow: 0 12px 30px rgba(43, 38, 32, 0.28);
  transform: translateY(-1px);
}
.course-landing .course-btn-ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--theme-accent-line, #c9b98f);
}
.course-landing .course-btn-ghost:hover {
  background: rgba(168, 132, 62, 0.08);
}
/* 移动端紧凑标题栏 */
.course-landing .course-compact {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.course-landing .course-compact-title {
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing: 0.12em;
}

/* —— 区块 —— */
.course-landing .course-section {
  padding: 54px 28px 8px;
}
.course-landing .course-section > h2,
.course-landing .course-section-head h2 {
  justify-content: center;
  text-align: center;
  color: var(--ink);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
}
.course-landing .course-section > h2::before,
.course-landing .course-section-head h2::before {
  content: "";
  width: 52px;
  height: 1px;
  border-radius: 0;
  background: var(--theme-accent-line, #c9b98f);
  flex: none;
}
.course-landing .course-section > h2::after,
.course-landing .course-section-head h2::after {
  content: "";
  width: 52px;
  height: 1px;
  background: var(--theme-accent-line, #c9b98f);
  flex: none;
}
.course-landing .course-section-head {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.course-landing .course-count {
  color: var(--muted);
}
/* —— 语义搜索（2026-10-29）：胶囊搜索框 + 结果行，沿用纸卡片语言 —— */
.course-search {
  padding: 28px 28px 0;
}
.course-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 6px 6px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(120, 95, 50, 0.08);
}
.course-search-icon {
  color: var(--theme-accent-ink, #9c5b3c);
  flex: none;
}
.course-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.course-search-input::placeholder {
  color: var(--muted);
}
.course-search-input::-webkit-search-cancel-button {
  display: none;
}
.course-search-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.course-search-clear:hover {
  color: var(--ink);
}
.course-search-btn {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
}
.course-search-btn:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}
.course-search-note {
  max-width: 720px;
  margin: 12px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.course-landing .course-search-results {
  padding-top: 40px;
}
.course-search-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.course-search-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.course-search-hit-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.course-search-hit-txt small {
  color: var(--theme-accent-ink, #9c5b3c);
  font-size: 12.5px;
  letter-spacing: 0.08em;
}
.course-search-hit-txt strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.course-search-empty {
  text-align: center;
}
@media (max-width: 620px) {
  .course-search {
    padding: 20px 16px 0;
  }
  .course-search-box {
    padding-left: 14px;
    gap: 8px;
  }
  .course-search-input {
    font-size: 16px; /* 防 iOS 聚焦自动缩放 */
  }
  .course-search-btn {
    padding: 10px 16px;
  }
  .course-search-hit {
    padding: 14px 16px;
  }
}
/* 纸卡片：去毛玻璃 */
.course-landing .course-glass {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(120, 95, 50, 0.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .course-intro p {
  color: var(--muted);
}

/* —— 课时列表：书卷式 —— */
.course-landing .meditation-group-title {
  color: var(--ink);
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.course-landing .meditation-group-title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  background: var(--theme-accent-line, #a8843e);
  flex: none;
}
.course-landing .playlist-track {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .playlist-track:hover {
  background: var(--theme-soft, #faf6ec);
  border-color: var(--theme-accent-line, #cbb87f);
}
.course-landing .playlist-track.is-playing {
  border-color: var(--theme-accent-line, #a8843e);
  background: var(--theme-soft, #faf3e2);
  box-shadow: 0 6px 18px rgba(168, 132, 62, 0.16);
}
.course-landing .playlist-index {
  color: var(--theme-accent-line, #a8843e);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  min-width: 2.2em;
}
.course-landing .playlist-track-info strong {
  color: var(--ink);
}
.course-landing .playlist-track-info small {
  color: var(--muted);
}
.course-landing .playlist-duration {
  color: var(--muted);
}
.course-landing .badge.free {
  background: rgba(156, 91, 60, 0.08);
  color: var(--theme-accent-ink, #9c5b3c);
  border: 1px solid rgba(156, 91, 60, 0.35);
}
.course-landing .badge.lock {
  background: rgba(43, 38, 32, 0.05);
  color: var(--muted);
  border: 1px solid var(--theme-accent-line, #d8cba6);
}
.course-landing .meditation-empty {
  color: var(--muted);
}
.course-landing .meditation-player-bar {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 14px 40px rgba(120, 95, 50, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .mpb-info strong {
  color: var(--ink);
}
.course-landing .mpb-info small {
  color: var(--muted);
}
.course-landing .time-label {
  color: var(--muted);
}
.course-landing .mpb-play {
  background: var(--theme-button, #2b2620);
  color: var(--theme-on-button, #f3e9d2);
}
.course-landing .mpb-tool-btn {
  color: var(--muted);
  border-color: var(--theme-accent-line, #d8cba6);
}

/* —— 修习数据 —— */
.course-landing .medstats-card {
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .medstats-label {
  color: var(--muted);
}
.course-landing .medstats-value {
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}
.course-landing .medstats-hint,
.course-landing .medstats-loading,
.course-landing .medstats-error {
  color: var(--muted);
}
.course-landing .medstats-icon {
  color: var(--theme-accent-line, #a8843e);
}

/* —— 学员评价：引用式 —— */
.course-landing .course-review-star {
  color: var(--theme-accent-line, #a8843e);
}
.course-landing .course-review blockquote {
  color: var(--muted);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 15.5px;
}
.course-landing .course-review blockquote::before {
  content: "\201C";
  display: block;
  font-size: 46px;
  line-height: 1;
  color: var(--theme-accent-line, #c9b98f);
  margin-bottom: 2px;
}
.course-landing .course-review figcaption {
  color: var(--muted);
}

/* —— 购买区 —— */
.course-landing .course-purchase {
  background: var(--card);
  border: 1px solid var(--theme-accent-line, #d8cba6);
  box-shadow: 0 20px 50px rgba(120, 95, 50, 0.14);
}
.course-landing .course-purchase h2 {
  color: var(--ink);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
.course-landing .course-benefits li {
  color: var(--muted);
}
.course-landing .course-benefits svg {
  color: var(--theme-accent-line, #a8843e);
}
.course-landing .plan-option {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .plan-option:hover {
  border-color: var(--theme-accent-line, #a8843e);
}
.course-landing .plan-option.selected {
  border-color: var(--theme-accent-line, #a8843e);
  background: var(--theme-soft, #faf3e2);
  box-shadow: 0 8px 24px rgba(168, 132, 62, 0.18);
}
.course-landing .plan-name {
  color: var(--ink);
}
.course-landing .plan-price {
  color: var(--theme-accent-ink, #9c5b3c);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}
.course-landing .plan-term {
  color: var(--muted);
}
.course-landing .plan-tag {
  background: var(--theme-button, #2b2620);
  color: var(--theme-on-button, #f3e9d2);
}
.course-landing .course-buy {
  font-size: 16px;
  padding: 15px 38px;
}
.course-landing .course-vip-unlock {
  color: var(--muted);
}
.course-landing .course-vip-unlock input {
  background: var(--theme-field, #ffffff);
  border: 1px solid var(--theme-accent-line, #d8cba6);
  color: var(--ink);
}
.course-landing .course-vip-unlock input::placeholder {
  color: var(--muted);
}
.course-landing .course-vip-unlock input:focus {
  border-color: var(--theme-accent-line, #a8843e);
}
.course-landing .course-unlocked-note {
  color: #7d8a3c;
}
.course-landing .page-edit-btn {
  color: var(--muted);
  border: 1px solid var(--theme-accent-line, #d8cba6);
  background: var(--card);
}
.course-landing .page-edit-btn:hover {
  background: var(--card);
  color: var(--ink);
}

/* —— 正在播放卡（PC 右栏） —— */
.course-landing .course-now-cover {
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(120, 95, 50, 0.20), 0 0 0 1px var(--line);
}
.course-landing .course-now-eq {
  background: rgba(43, 38, 32, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .course-now-eq i {
  background: var(--theme-accent-line, #a8843e);
}
.course-landing .course-now-meta strong {
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing: 0.06em;
}
.course-landing .course-now-meta small {
  color: var(--muted);
}
.course-landing .course-now-controls button {
  color: var(--muted);
}
.course-landing .course-now-controls button:hover:not(:disabled) {
  color: var(--ink);
}
.course-landing .course-now-controls .course-now-play {
  background: var(--theme-button, #2b2620);
  color: var(--theme-on-button, #f3e9d2);
  box-shadow: 0 10px 26px rgba(43, 38, 32, 0.28);
}
.course-landing .course-now-tool,
.course-landing .course-fp-tool {
  border: 1px solid var(--theme-accent-line, #d8cba6);
  background: var(--card);
  color: var(--muted);
}
.course-landing .course-now-tool:hover,
.course-landing .course-fp-tool:hover {
  border-color: var(--theme-accent-line, #a8843e);
  color: var(--ink);
}
.course-landing .course-now-tool.is-active,
.course-landing .course-fp-tool.is-active {
  border-color: var(--theme-accent-line, #a8843e);
  color: var(--theme-accent-ink, #8a6a2f);
  background: var(--theme-soft, #faf3e2);
}
.course-landing .course-now-tools .sleep-popover,
.course-landing .course-fp-tools .sleep-popover {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(120, 95, 50, 0.20);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .course-now-tools .sleep-popover button,
.course-landing .course-fp-tools .sleep-popover button {
  color: var(--ink);
}
.course-landing .course-now-tools .sleep-popover button:hover,
.course-landing .course-fp-tools .sleep-popover button:hover {
  background: rgba(168, 132, 62, 0.10);
}

/* —— 移动端迷你条 —— */
.course-landing .course-minibar {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(120, 95, 50, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .course-minibar-info strong {
  color: var(--ink);
}
.course-landing .course-minibar-info small {
  color: var(--muted);
}
.course-landing .course-minibar-play {
  background: var(--theme-button, #2b2620);
  color: var(--theme-on-button, #f3e9d2);
  box-shadow: 0 6px 18px rgba(43, 38, 32, 0.30);
}

/* —— 移动端全屏播放器 —— */
.course-landing .course-fp {
  color: var(--ink);
}
.course-landing .course-fp-bg {
  background:
    radial-gradient(700px 380px at 50% -60px, rgba(168, 132, 62, 0.14), transparent 65%),
    linear-gradient(180deg, var(--paper) 0%, var(--card) 100%);
}
.course-landing .course-fp-close {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.course-landing .course-fp-img {
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(120, 95, 50, 0.28), 0 0 0 1px var(--line);
}
.course-landing .course-fp-meta strong {
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing: 0.08em;
}
.course-landing .course-fp-meta small {
  color: var(--muted);
}
.course-landing .course-fp .time-label {
  color: var(--muted);
}
.course-landing .course-fp-controls button {
  color: var(--muted);
}
.course-landing .course-fp-controls .course-fp-play {
  background: var(--theme-button, #2b2620);
  color: var(--theme-on-button, #f3e9d2);
  box-shadow: 0 16px 44px rgba(43, 38, 32, 0.30);
}

/* —— 典雅风移动端微调 —— */
@media (max-width: 760px) {
  .course-landing .course-hero {
    padding: 52px 20px 44px;
  }
  .course-landing .course-hero-cover {
    width: min(220px, 62vw);
  }
  .course-landing .course-hero h1 {
    font-size: clamp(28px, 8vw, 34px);
  }
  .course-landing .course-section {
    padding: 40px 18px 6px;
  }
  .course-landing .course-section > h2,
  .course-landing .course-section-head h2 {
    font-size: 19px;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
  .course-landing .course-section > h2::before,
  .course-landing .course-section-head h2::before,
  .course-landing .course-section > h2::after,
  .course-landing .course-section-head h2::after {
    width: 34px;
  }
  .course-landing .course-price {
    font-size: 38px;
  }
}


/* —— 观照·昼像素零变化兜底（2026-10-23）：仅昼主题写回原值，夜主题走变量 —— */
:root[data-theme="guanzhao"] .course-landing { background-color: #f6f1e6; }
:root[data-theme="guanzhao"] .course-landing .course-hero { background: linear-gradient(180deg, #f8f3e8 0%, #f2ebdb 100%); }
:root[data-theme="guanzhao"] .course-landing .course-glass { background: #fffdf7; }
:root[data-theme="guanzhao"] .course-landing .course-tagline,
:root[data-theme="guanzhao"] .course-landing .course-stat { color: #6b6257; }
:root[data-theme="guanzhao"] .course-landing .course-intro p,
:root[data-theme="guanzhao"] .course-landing .course-review blockquote,
:root[data-theme="guanzhao"] .course-landing .course-benefits li,
:root[data-theme="guanzhao"] .course-landing .course-now-controls button,
:root[data-theme="guanzhao"] .course-landing .course-fp-controls button,
:root[data-theme="guanzhao"] .course-landing .course-now-tool,
:root[data-theme="guanzhao"] .course-landing .course-fp-tool,
:root[data-theme="guanzhao"] .course-landing .course-fp-close,
:root[data-theme="guanzhao"] .course-landing .page-edit-btn { color: #5c554a; }
:root[data-theme="guanzhao"] .course-landing .course-compact { background: rgba(246, 241, 230, 0.94); }
:root[data-theme="guanzhao"] .course-landing .meditation-player-bar,
:root[data-theme="guanzhao"] .course-landing .course-minibar { background: rgba(255, 253, 247, 0.96); }
:root[data-theme="guanzhao"] .course-landing .course-fp-close { background: rgba(255, 253, 247, 0.85); }
:root[data-theme="guanzhao"] .course-landing .page-edit-btn { background: rgba(255, 253, 247, 0.7); }
/* ============ 4号卡冥想迷你播放器 · 移动端排版修复（2026-10-08） ============
   只影响 ≤480px 下首页冥想卡的 .meditation-player，PC 端与其他页面不动 */
@media (max-width: 480px) {
  .meditation-card .meditation-player {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  /* 换行垫片：把工具行强制挤到第二行 */
  .meditation-card .meditation-player::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 3;
  }
  /* 第一行：播放按钮 + 标题区 */
  .meditation-card .mp-play {
    order: 1;
    flex: 0 0 auto;
  }
  .meditation-card .mp-body {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
  }
  .meditation-card .mp-title {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 1.4;
  }
  .meditation-card .mp-progress {
    width: 100%;
  }
  /* 时间：0:00 / 9:46，缩小字号，不换行 */
  .meditation-card .meditation-player .time-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0.72;
  }
  .meditation-card .meditation-player .time-sep {
    opacity: 0.6;
  }
  /* 第二行：睡眠 + 倍速 + 查看课程 */
  .meditation-card .mp-tools {
    order: 4;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .meditation-card .mp-courses {
    order: 5;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    font-size: 13px;
  }
}

/* —— 访客欢迎弹窗 —— */
.dialog.welcome-popup {
  width: min(480px, calc(100% - 32px));
  border: 1px solid #c9a22755;
  background:
    radial-gradient(ellipse at 100% 0%, #c9a2271f, transparent 55%),
    var(--theme-surface, #fffefa);
}
.welcome-popup-body {
  padding: 28px 30px 30px;
  text-align: center;
}
.welcome-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8a6d1c;
  background: #c9a22722;
  border: 1px solid #c9a22755;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.welcome-popup-body h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.welcome-popup-body h3 em {
  font-style: normal;
  color: #8a6d1c;
  border-bottom: 2px solid #c9a22788;
}
.welcome-popup-perks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.welcome-popup-perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  background: var(--theme-surface-2, #f6f3e8);
  border: 1px solid var(--theme-line, #e8e4d4);
  border-radius: 10px;
  padding: 10px 14px;
}
.welcome-popup-perks svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: #8a6d1c;
}
.welcome-popup-note {
  font-size: 12px;
  color: var(--theme-muted, #8b917e);
  margin: 0 0 18px;
}
.welcome-popup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.welcome-popup-actions .button {
  flex: 1 1 auto;
  min-width: 140px;
  justify-content: center;
}

/* —— 体验会员到期提醒细条 —— */
.trial-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  background: #c9a2271f;
  border-bottom: 1px solid #c9a22755;
  color: #6d5615;
  font-size: 13px;
  padding: 8px 16px;
}
.trial-nudge svg {
  flex-shrink: 0;
}
.trial-nudge a {
  font-weight: 700;
  color: #8a6d1c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trial-nudge button {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #c9a22755;
  color: #8a6d1c;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

/* —— 会员徽标（用户工具栏） —— */
.member-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #8a6d1c;
  background: #c9a22722;
  border: 1px solid #c9a22755;
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 8px;
  white-space: nowrap;
}

/* —— 9 号卡：会员社区（富内容版） —— */
.community-card-rich .community-card-content p {
  margin-bottom: 10px;
}
.community-card-preview {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.community-card-preview li {
  background: color-mix(in srgb, var(--theme-surface) 55%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}
.community-card-preview q {
  quotes: "\201C" "\201D";
}
.community-card-preview li span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--theme-muted, var(--muted));
}
.community-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.community-card-cta.primary {
  background: #c9a227;
  color: #1d1a10;
  font-weight: 800;
}
.community-card-ghost {
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
}
@media (max-width: 640px) {
  .welcome-popup-body {
    padding: 22px 20px 24px;
  }
  .welcome-popup-body h3 {
    font-size: 19px;
  }
  .trial-nudge {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ============ App 级体验层（PWA/60fps 动效/骨架屏/手势）2026-10-09 ============
   动效纪律：只用 transform + opacity（compositor 动画，不触发布局重排）；
   will-change 只出现在动画中的元素上；全局 prefers-reduced-motion 已在文件
   前部统一关闭所有 animation/transition（约 3440 行），以下动效自动被覆盖。 */

/* —— 弹窗入场：缩放 + 淡入 —— */
.dialog[open] {
  animation: dialog-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.dialog[open]::backdrop {
  animation: dialog-fade 0.2s ease-out;
}
@keyframes dialog-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dialog-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* —— 子路由页面切换：淡入上浮（ContentPage 按 route.key 重挂载，切换时重播） —— */
.section-page {
  animation: view-enter 0.28s ease-out;
}
@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* —— 卡片 hover/按压：细腻 scale + 阴影（仅有 hover 能力的设备，避免触屏粘滞） —— */
@media (hover: hover) {
  .card {
    transition:
      transform 0.2s ease-out,
      box-shadow 0.2s ease-out;
  }
  .card:hover {
    transform: scale(1.012);
    box-shadow: 0 14px 34px rgba(74, 68, 48, 0.13);
  }
  .card:active {
    transform: scale(0.995);
    transition-duration: 0.1s;
  }
}

/* —— 按钮点击：缩放反馈 —— */
.button,
.course-btn,
.icon-button,
.text-button,
.community-icon-btn {
  transition: transform 0.12s ease-out;
}
.button:active,
.course-btn:active,
.icon-button:active,
.text-button:active,
.community-icon-btn:active {
  transform: scale(0.97);
}

/* —— 列表滚动：iOS momentum 惯性滚动 —— */
.dialog-body,
.community-list,
.playlist-list,
.course-reviews,
.section-page,
.inbox-list {
  -webkit-overflow-scrolling: touch;
}

/* —— 下拉刷新提示（手势模块动态创建 .ptr-hint） —— */
.ptr-hint {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 50%;
  transform: translate(-50%, -44px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--card, #fffefa);
  border: 1px solid var(--line, #e8e4d8);
  box-shadow: 0 8px 24px rgba(74, 68, 48, 0.12);
  font-size: 13px;
  color: var(--muted, #7b7d75);
  opacity: 0;
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
  pointer-events: none;
  z-index: 200;
}
.ptr-hint.show {
  opacity: 1;
}
.ptr-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c9a22755;
  border-top-color: #c9a227;
  animation: ptr-spin 0.8s linear infinite;
  opacity: 0;
  transition: opacity 0.2s;
}
.ptr-hint.refreshing .ptr-spinner {
  opacity: 1;
}
@keyframes ptr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* —— 骨架屏：米色 shimmer —— */
.sk-page {
  min-height: 100svh;
  padding: 18px clamp(10px, 2.4vw, 30px) 24px;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 12px);
}
.sk-page .bento-grid {
  flex: 1;
}
.sk-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (min-width: 1101px) {
  .sk-card {
    min-height: 170px;
  }
}
.sk-block {
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    var(--theme-skeleton, #ece7d8) 35%,
    var(--theme-skeleton-highlight, #f7f3e8) 50%,
    var(--theme-skeleton, #ece7d8) 65%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s linear infinite;
}
@keyframes sk-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* 课程页骨架 */
.sk-course {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}
.sk-course-hero {
  text-align: center;
  padding: 44px 16px 10px;
}
.sk-course-hero .sk-block {
  border-radius: 10px;
}
.sk-course-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 40px;
}
.sk-lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line, #e8e4d8);
  border-radius: 9px;
  background: var(--card, #fffefa);
}
/* 社区骨架：与 .community-memo 同尺寸 */
.sk-memo {
  margin-bottom: 14px;
}

/* —— 下拉刷新时压住浏览器原生刷新（移动端由手势接管） —— */
body {
  overscroll-behavior-y: contain;
}

/* ===== 音乐播放器 A方案：PC 右侧滑出面板 ===== */
@media (min-width: 721px) {
  .music-bottombar {
    position: fixed;
    right: 76px;
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 280px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 70;
    background: var(--theme-surface, #fffefa);
    border: 1px solid var(--theme-line, #d9dcd2);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.35s ease;
  }
  /* 展开时：弹簧滑入（mbb-entered 由挂载后 rAF 添加） */
  .music-bottombar.mbb-entered {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
  }
  .music-bottombar .mbb-main {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 14px;
    height: auto;
  }
  .music-bottombar .mbb-cover {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 12px;
  }
  /* 播放时封面旋转 */
  .music-bottombar.is-playing .mbb-cover {
    animation: mbb-spin 8s linear infinite;
    border-radius: 50%;
  }
  @keyframes mbb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  /* 曲名截断补修（2026-10-29 晚验收）：原横排布局里封面 120px 与 .mbb-info
     （width:100% + flex-shrink:0）并排塞进 280px 面板，info 盒溢出被面板边缘
     直切（strong 自身盒够宽、不生成省略号，只露「快乐成长（」半截）。
     改竖排：封面在上、文本区占满整行宽度，曲名两行内完整显示。 */
  .music-bottombar .mbb-expand-hit {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .music-bottombar .mbb-info {
    text-align: center;
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }
  .music-bottombar .mbb-info strong {
    font-size: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .music-bottombar .mbb-info small {
    font-size: 13px;
    color: var(--theme-muted, #74776e);
  }
  .music-bottombar .mbb-progress-wrap {
    width: 100%;
  }
  .music-bottombar .mbb-controls {
    justify-content: center;
    gap: 16px;
  }
  .music-bottombar .mbb-tools {
    justify-content: center;
    flex-wrap: wrap;
  }
  /* 隐藏移动端专用细进度条 */
  .music-bottombar .mbb-progress-line {
    display: none;
  }
}
/* 移动端：底部上滑面板（保持现有行为） */
@media (max-width: 720px) {
  .music-bottombar {
    animation: mbb-slide-up 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  }
  @keyframes mbb-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}
/* fab 封面：圆形，播放时旋转 */
.mbb-fab .mbb-fab-cover {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.mbb-fab.is-playing .mbb-fab-cover {
  animation: mbb-spin 8s linear infinite;
}
/* 减弱动效偏好：关闭弹簧动画 */
@media (prefers-reduced-motion: reduce) {
  .music-bottombar,
  .mbb-fab {
    transition: none;
    animation: none;
  }
  .music-bottombar.is-playing .mbb-cover {
    animation: none;
  }
}
/* —— 管理工具栏收起/展开 —— */
.admin-bar-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--theme-surface, #fffefa);
  color: var(--theme-ink, #20221e);
  border: 1px solid var(--theme-line, #d9dcd2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.admin-bar-fab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  padding: 0 4px;
}
.admin-bar-collapse {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--theme-muted, #74776e);
  background: transparent;
  border: 1px solid var(--theme-line, #d9dcd2);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-bar-collapse:hover {
  background: var(--theme-soft, #eef3e3);
}

/* 课时列表徽章（编辑器）：试听/VIP 状态一目了然 */
.track-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.track-badge-trial {
  color: var(--theme-accent-text, #7a5c14);
  background: var(--theme-accent-soft, #f5e9c8);
  border: 1px solid var(--theme-accent-line, #e3cf9a);
}
.track-badge-vip {
  color: var(--theme-vip-text, #8a6d1b);
  background: var(--theme-vip-soft, #fbf3d9);
  border: 1px solid var(--theme-gold, #c9a227);
}

/* —— 师资介绍：大气版 —— */
.teacher-photo-wrap {
  margin: 8px 0 24px;
  display: flex;
  justify-content: flex-start;
}
.teacher-photo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* 鎏金细环 */
  border: 2px solid var(--theme-gold, #c9a86a);
  padding: 4px;
  background: var(--theme-bg, #fff);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.about-section .about-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 12px;
}
.about-section .about-intro {
  font-size: 15px;
  line-height: 2;
  color: var(--theme-muted, #7d8272);
  letter-spacing: 0.5px;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--theme-border, rgba(0,0,0,0.08));
}

/* 登录弹窗 V5 轻微浮动，更生动 */
@keyframes cat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.auth-form > .cat {
  animation: cat-float 3s ease-in-out infinite;
}

/* ============ 冥想课程三级路由：发现页 → 系列主页 → 单节课 ============ */

/* —— 面包屑 —— */
.course-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  font-size: 14px;
  color: var(--muted);
}
.course-crumb button {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.course-crumb button:hover {
  color: var(--ink);
  text-decoration: underline;
}
.course-crumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* —— 发现页：继续学习 —— */
.course-continue {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 16px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
}
.course-continue-cover {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex: none;
  overflow: hidden;
}
.course-continue-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.course-continue-txt small {
  font-size: 12px;
  color: var(--accent, var(--gold, #b98a2f));
  font-weight: 600;
}
.course-continue-txt strong {
  font-size: 15px;
  color: var(--ink);
}
.course-continue-txt span {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-continue > svg {
  color: var(--muted);
  flex: none;
}

/* —— 发现页：系列陈列网格 —— */
.course-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
@media (max-width: 640px) {
  .course-series-grid {
    grid-template-columns: 1fr;
  }
}
.course-series-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.course-series-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.course-series-card-cover {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  flex: none;
  overflow: hidden;
  background: var(--card, var(--bg-soft));
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-free-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  /* 弱化为主题色淡片：不再用实心金抢主行动的注意力（主按钮纪律） */
  background: var(--theme-soft, #faf3e2);
  color: var(--theme-accent-ink, #9c5b3c);
  border: 1px solid var(--theme-accent-line, #d8cba6);
}
.course-series-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.course-series-card-meta strong {
  font-size: 16px;
  color: var(--ink);
}
.course-series-card-meta small {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-series-card-count {
  font-size: 12px;
  color: var(--muted);
}
.course-series-card-arrow {
  color: var(--muted);
  flex: none;
}

/* —— 系列主页：大封面头 —— */
.course-series-hero {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 8px 4px 20px;
}
@media (max-width: 640px) {
  .course-series-hero {
    flex-direction: column;
    gap: 16px;
  }
}
.course-series-hero-cover {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  flex: none;
  overflow: hidden;
  background: var(--card, var(--bg-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
@media (max-width: 640px) {
  .course-series-hero-cover {
    width: 100%;
    height: 200px;
  }
}
.course-series-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-series-hero-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-series-hero-meta h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.course-series-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
/* 免费开始入口下的风险消除小字（Duolingo 纪律：疑虑先拆，字退后） */
.course-risk-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* —— 系列/课时切换器 —— */
.course-series-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.course-series-switch > span {
  display: block;
}
.course-series-switch button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
}
.course-series-switch button:last-child {
  text-align: right;
  align-items: flex-end;
}
.course-series-switch small {
  font-size: 12px;
  color: var(--muted);
}
.course-series-switch strong {
  font-size: 14px;
  color: var(--ink);
}

/* —— 单节课：沉浸播放 —— */
.course-lesson-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 12px 4px 24px;
  text-align: center;
}
.course-lesson-cover {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--card, var(--bg-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
@media (max-width: 640px) {
  .course-lesson-cover {
    width: 200px;
    height: 200px;
  }
}
.course-lesson-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-lesson-eq {
  position: absolute;
  right: 12px;
  bottom: 12px;
}
.course-lesson-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.course-lesson-meta h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.course-lesson-controls {
  display: flex;
  align-items: center;
  gap: 28px;
}
.course-lesson-controls button {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}
.course-lesson-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}
.course-lesson-play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, var(--gold, #b98a2f));
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.course-lesson-unlock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
}
.course-lesson-progress {
  width: 100%;
  max-width: 420px;
}
.course-lesson-tools {
  display: flex;
  gap: 16px;
}

/* ============ 公告看板卡（5号）+ 社区卡（9号）背景图升级 ============ */
.announce-card, .community-card-rich {
  position: relative;
  overflow: hidden;
}
.announce-card-bg, .community-card-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
:root[data-theme="guanzhao"] .announce-card-bg,
:root[data-theme="guanzhao"] .community-card-bg-img {
  opacity: 0.55;
}
/* 深色主题下调低透明度保证文字可读 */
[data-theme="dark"] .announce-card-bg,
[data-theme="dark"] .community-card-bg-img {
  opacity: 0.18;
}
.announce-card .section-top,
.announce-card .announce-list,
.community-card-rich .community-card-content {
  position: relative;
  z-index: 1;
}
/* 公告看板：标题区加毛玻璃 */
.announce-card .section-top {
  background: color-mix(in srgb, var(--theme-surface) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 12px;
  margin: -4px -4px 8px;
}
.announce-card .announce-list .home-article {
  background: color-mix(in srgb, var(--theme-surface) 65%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
/* 社区卡：内容区加毛玻璃保证可读（与 5 号公告卡同款处理） */
.community-card-rich .community-card-content {
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
  margin: auto -8px -8px;
  padding: 14px 16px;
  color: var(--ink);
}
/* 富内容版：标题/说明改用主题色（旧版写死白色是深色底时代的残留） */
.community-card-rich .community-card-content .eyebrow {
  color: var(--theme-muted, var(--muted));
}
.community-card-rich .community-card-content h2 {
  color: var(--ink);
}
.community-card-rich .community-card-content > p {
  color: var(--theme-muted, var(--muted));
}

/* ============ 主题切换 View Transitions ============ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}
::view-transition-old(root) {
  animation-name: theme-fade-out;
}
::view-transition-new(root) {
  animation-name: theme-fade-in;
}
@keyframes theme-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes theme-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 8号卡：修行进度（正念游戏化 v1） */
.cultivation-card { cursor: pointer; }
.cultivation-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.cultivation-realm { display: flex; align-items: center; gap: 12px; }
.cultivation-garden { font-size: 40px; line-height: 1; }
.cultivation-realm strong { font-size: 22px; display: block; }
.cultivation-realm small { color: var(--muted); font-size: 12px; }
.cultivation-streak { margin-left: auto; text-align: right; }
.cultivation-streak strong { font-size: 24px; color: var(--accent); display: block; }
.cultivation-streak small { color: var(--muted); font-size: 12px; }
.cultivation-progress { display: flex; flex-direction: column; gap: 6px; }
.cultivation-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cultivation-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); transition: width 0.6s ease; }
.cultivation-progress small { color: var(--muted); font-size: 12px; }
.cultivation-stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.cultivation-login, .cultivation-loading { text-align: center; padding: 24px 12px; color: var(--muted); }
.cultivation-sub { font-size: 12px; margin-top: 4px; }

/* 修行详情页 */
.cultivation-page { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 20px; }
.cultivation-hero { text-align: center; padding: 32px 20px; border-radius: 16px; background: var(--card); }
.cultivation-hero .garden-big { font-size: 72px; }
.cultivation-hero h1 { font-size: 32px; margin: 12px 0 4px; }
.cultivation-hero p { color: var(--muted); }
.cultivation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cultivation-stat { background: var(--card); border-radius: 12px; padding: 16px; text-align: center; }
.cultivation-stat strong { font-size: 24px; display: block; }
.cultivation-stat small { color: var(--muted); font-size: 12px; }
.cultivation-achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.achievement { background: var(--card); border-radius: 12px; padding: 16px; text-align: center; opacity: 0.45; }
.achievement.unlocked { opacity: 1; border: 1px solid var(--accent); }
.achievement .ach-icon { font-size: 32px; }
.achievement strong { display: block; margin: 8px 0 4px; font-size: 14px; }
.achievement small { color: var(--muted); font-size: 12px; }


/* ============================================================
 * 每页独立版式（2026-10-11）：5个导航页面视觉差异化
 * 全部使用主题 CSS 变量，不写死颜色
 * ============================================================ */

/* —— 修行页：游戏化进度风 —— */
main.section-cultivation {
  background:
    radial-gradient(900px 420px at 50% -60px, color-mix(in srgb, var(--accent, #b98a2f) 12%, transparent), transparent 65%),
    transparent;
}
main.section-cultivation .cultivation-page {
  max-width: 760px;
}
main.section-cultivation .cultivation-hero {
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent, #b98a2f) 10%, transparent);
  position: relative;
  overflow: hidden;
}
main.section-cultivation .cultivation-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 200px at 50% 0%, color-mix(in srgb, var(--accent, #b98a2f) 14%, transparent), transparent 70%);
  pointer-events: none;
}
main.section-cultivation .cultivation-stat {
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
main.section-cultivation .cultivation-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* —— 社区页：温暖社交风 —— */
main.section-community {
  background:
    radial-gradient(800px 380px at 50% -40px, color-mix(in srgb, var(--lime, #d4f36e) 14%, transparent), transparent 65%),
    transparent;
}
main.section-community .community-hero {
  border-radius: 28px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--ink) 6%, transparent);
}
main.section-community .community-hero h1 {
  font-size: 30px;
  letter-spacing: 1px;
}
main.section-community .community-memo {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 5%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
main.section-community .community-memo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 9%, transparent);
}
main.section-community .community-avatar {
  border-radius: 50%;
  font-size: 20px;
}

/* —— 关于页：杂志故事风 —— */
main.section-about .about-section {
  max-width: 780px;
  margin: 0 auto;
}
main.section-about .about-head {
  padding: 48px 0 32px;
  text-align: left;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 32px;
}
main.section-about .about-section .about-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1.25;
  margin: 12px 0 16px;
}
main.section-about .brand-eyebrow {
  letter-spacing: 6px;
  font-size: 12px;
}
main.section-about .about-section .about-intro {
  font-size: 17px;
  line-height: 2.2;
  padding-bottom: 28px;
  margin-bottom: 28px;
}
main.section-about .about-section .about-intro::first-letter {
  font-size: 2.4em;
  font-weight: 700;
  float: left;
  line-height: 1;
  margin: 4px 10px 0 0;
  color: var(--accent, var(--gold, #b98a2f));
}
main.section-about .about-service {
  border-left: 3px solid var(--accent, var(--gold, #b98a2f));
  padding-left: 18px;
  margin-bottom: 24px;
}
main.section-about .about-contact {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 8px;
}
/* 师资部分：复用 about-section 杂志风，自然继承上方样式 */

/* —— 课程页：沉浸课程风（已有深色背景，此处强化） —— */
main.section-courses .course-hero-compact {
  padding-top: 88px;
}
main.section-courses .course-eyebrow {
  letter-spacing: 5px;
}

/* —— 移动端适配 —— */
@media (max-width: 1100px) {
  main.section-about .about-head {
    padding: 32px 0 24px;
  }
  main.section-about .about-section .about-title {
    letter-spacing: 2px;
  }
  main.section-community .community-hero h1 {
    font-size: 24px;
  }
  main.section-community .community-memo {
    border-radius: 20px;
  }
}

/* —— 上传中心 —— */
.upload-center {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.upload-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.upload-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.upload-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.upload-tab-icon {
  font-size: 16px;
}
.upload-tab-body {
  min-height: 300px;
}
.upload-loading {
  text-align: center;
  padding: 40px;
  color: var(--muted);
}
.upload-image-pane {
  text-align: center;
  padding: 40px 20px;
}
.upload-hint {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
}
.upload-hint-sub {
  font-size: 13px;
  color: var(--muted);
}

/* —— 修行卡：灵性视角 —— */
.cultivation-preview {
  text-align: center;
  padding: 24px 16px;
  cursor: pointer;
}
.cultivation-seed-glow {
  display: inline-block;
  position: relative;
  margin-bottom: 12px;
}
.cultivation-seed-glow .seed {
  font-size: 48px;
  display: inline-block;
  animation: seedGlow 3s ease-in-out infinite;
}
@keyframes seedGlow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.9)); }
}
.cultivation-preview-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 4px;
}
.cultivation-preview-sub {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.cultivation-preview-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* 内在之光：呼吸动画 */
.cultivation-light {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}
.light-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 215, 0, 0.3) 50%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.light-core {
  font-size: 24px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: twinkle 2s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.cultivation-realm-info strong {
  display: block;
  font-size: 20px;
  color: var(--ink);
}
.cultivation-realm-info small {
  font-size: 12px;
  color: var(--muted);
}

/* 心灵花园动画 */
.cultivation-garden-animated {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.garden-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.garden-emoji {
  font-size: 36px;
  display: inline-block;
}
.stage-seed .garden-emoji { animation: seedGlow 3s ease-in-out infinite; }
.stage-sprout .garden-emoji { animation: sproutGrow 2s ease-out; }
.stage-grow .garden-emoji { animation: growSway 4s ease-in-out infinite; }
.stage-bloom .garden-emoji { animation: bloom 3s ease-in-out infinite; }
@keyframes sproutGrow {
  from { transform: scale(0.5) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes growSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes bloom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(255, 182, 193, 0.8)); }
}
.garden-stage small {
  font-size: 11px;
  color: var(--muted);
}
.garden-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

/* —— 修行页面：心灵花园可视化 —— */
.garden-visual {
  margin: 24px 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.garden-sky {
  background: linear-gradient(180deg, #fef9e7 0%, #fef3c7 50%, #fde68a 100%);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.garden-ground {
  background: linear-gradient(180deg, #86a860 0%, #6b8f4e 100%);
  padding: 16px;
  min-height: 60px;
}
.garden-stats-inline {
  display: flex;
  justify-content: center;
  gap: 24px;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.garden-plant {
  display: inline-block;
}
.garden-plant span {
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.plant-seed span { animation: seedGlow 3s ease-in-out infinite; }
.plant-sprout span { animation: sproutGrow 2s ease-out, growSway 4s ease-in-out 2s infinite; }
.plant-tree span { animation: growSway 5s ease-in-out infinite; }
.plant-bloom span { animation: bloom 3s ease-in-out infinite; }

.garden-preview .garden-sky {
  border-radius: 16px;
  min-height: 160px;
}
.garden-seed-glow {
  font-size: 64px;
  animation: seedGlow 3s ease-in-out infinite;
}

.light-orb-large {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.95) 0%, rgba(255, 215, 0, 0.4) 50%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: breathe 4s ease-in-out infinite;
}
.light-core-large {
  font-size: 36px;
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
  animation: twinkle 2s ease-in-out infinite;
}
.realm-path {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 3px;
  margin: 8px 0;
}

/* —— 图片丝滑淡入 —— */
.img-fade {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.img-fade.loaded {
  opacity: 1;
}

/* Hero 精修：山水日出背景 + 大标题压图 */
.hero-card .card-bg {
  opacity: 0.85;
}
.hero-card .card-bg-veil::after {
  background: linear-gradient(
    180deg,
    rgba(246, 243, 236, 0.72),
    rgba(246, 243, 236, 0.42) 50%,
    rgba(246, 243, 236, 0.62)
  );
}
:root[data-theme="guanzhao-night"] .hero-card .card-bg-veil::after {
  background: linear-gradient(
    180deg,
    rgba(26, 23, 18, 0.76),
    rgba(26, 23, 18, 0.48) 50%,
    rgba(26, 23, 18, 0.66)
  );
}
.hero-card h1 {
  font-size: clamp(52px, 5.2vw, 88px);
  text-shadow: 0 2px 24px rgba(246, 243, 236, 0.9);
}

/* —— 稀疏卡片视觉密度补强 —— */
/* 5号公告卡：列表撑满剩余空间 */
.announce-card {
  display: flex;
  flex-direction: column;
}
.announce-card .announce-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 稀疏态（0–1 条）：单条居中成一张小海报，不再沉底留空 */
.announce-card .announce-list.announce-sparse {
  justify-content: center;
}
/* 稀疏态下条目本身撑满列表高度（home-article 是 size 容器，高度不随内容，
   不撑满时背景只剩一条、文字溢出），毛玻璃底衬托整块内容居中成海报 */
.announce-card .announce-list.announce-sparse .home-article {
  flex: 1;
}
/* 6号资源卡：空态加视觉锚点 */
.project-card {
  display: flex;
  flex-direction: column;
}
/* 8号修行卡：预览内容垂直居中 */
.cultivation-card {
  display: flex;
  flex-direction: column;
}
.cultivation-card .cultivation-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}

/* —— 5/6号卡：稀疏内容的禅意处理 —— */
/* 公告卡：单条公告放大展示 */
.announce-card .announce-list .article-excerpt {
  font-size: 17px;
  line-height: 1.8;
  padding: 16px 0;
}
.announce-card .announce-list .article-excerpt:first-child {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 20px;
}
/* 资源卡：加禅意装饰 */
.project-card::before {
  content: "☸";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 120px;
  opacity: 0.06;
  pointer-events: none;
}
.project-card {
  position: relative;
  overflow: hidden;
}

/* —— 移动端底部播放条：跟观照主题对齐 —— */
@media (max-width: 720px) {
  .mbb-main .mbb-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--theme-button, #2C2822);
    color: var(--theme-on-button, #F6F3EC);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(44, 40, 34, 0.25);
  }
  .mbb-main .mbb-play:active {
    transform: scale(0.94);
  }
  .mbb-main {
    background: var(--theme-chrome, #FDFBF7);
    border-top: 1px solid var(--theme-chrome-line, #E8E2D4);
    border-radius: 16px 16px 0 0;
  }
  .mbb-main .mbb-title {
    color: var(--ink);
    font-weight: 600;
  }
  .mbb-main .mbb-artist {
    color: var(--theme-muted);
  }
  /* 右下角浮动按钮也跟主题 */
  .mbb-fab {
    border-color: var(--theme-accent-line, #C9A96A);
    background: var(--card);
    color: var(--theme-accent-ink, #A6533C);
  }
}

/* —— 修行页访客版：五重境界 —— */
.cultivation-visitor-realms {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 60px;
  text-align: center;
}
.cultivation-visitor-realms h2 {
  font-size: 28px;
  margin-bottom: 8px;
}
.cultivation-visitor-sub {
  color: var(--theme-muted);
  margin-bottom: 28px;
}
.realm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.realm-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 16px;
  transition: transform 0.2s ease;
}
.realm-card:hover {
  transform: translateY(-4px);
}
.realm-card .realm-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
}
.realm-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.realm-card p {
  font-size: 14px;
  color: var(--theme-muted);
  line-height: 1.6;
}
.cultivation-visitor-cta {
  background: var(--theme-surface);
  border-radius: 16px;
  padding: 28px;
}
.cultivation-visitor-cta p {
  color: var(--theme-muted);
  margin-bottom: 16px;
}

/* —— 3号时钟卡：观照主题质感 —— */
:root[data-theme="guanzhao"] .clock-card {
  background: linear-gradient(160deg, #EFE8D8, #E4D9BE);
  position: relative;
  overflow: hidden;
}
:root[data-theme="guanzhao"] .clock-card::before {
  content: "☀";
  position: absolute;
  top: -20px;
  right: -10px;
  font-size: 120px;
  opacity: 0.08;
  pointer-events: none;
}
:root[data-theme="guanzhao-night"] .clock-card {
  background: linear-gradient(160deg, #2A251C, #1E1A14);
  position: relative;
  overflow: hidden;
}
:root[data-theme="guanzhao-night"] .clock-card::before {
  content: "☾";
  position: absolute;
  top: -20px;
  right: -10px;
  font-size: 120px;
  opacity: 0.1;
  pointer-events: none;
}
/* 水印随地点当地昼夜切换（与天气图标同口径：当地 6–18 点为昼，data-is-daytime 由 ClockCard 按地点时区算出）：
   昼主题在当地夜里换月亮、夜主题在当地白天换太阳；符号与透明度沿用两套主题的原设计成对取值，大小/位置不变。
   data 属性缺失时（旧缓存 JS）不匹配，回退到上方按主题的默认符号。 */
:root[data-theme="guanzhao"] .clock-card[data-is-daytime="false"]::before {
  content: "☾";
  opacity: 0.1;
}
:root[data-theme="guanzhao-night"] .clock-card[data-is-daytime="true"]::before {
  content: "☀";
  opacity: 0.08;
}
.clock-card .clock-digits {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   苹果风全面优化 + 卡片动态
   设计语言：iOS 26 / Apple HIG
   ═══════════════════════════════════════════ */

/* —— 1. 字体：苹果系统字体栈优先 —— */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:root[data-theme="guanzhao"] h1,
:root[data-theme="guanzhao-night"] h1 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* —— 2. 卡片：苹果式圆角+ layered 阴影 —— */
.card {
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(44, 40, 34, 0.04),
    0 8px 24px rgba(44, 40, 34, 0.06);
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}
/* 卡片悬停：轻微上浮（桌面端） */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 2px 4px rgba(44, 40, 34, 0.05),
      0 16px 40px rgba(44, 40, 34, 0.10);
  }
}
/* 卡片内图片悬停缩放 */
.card .card-bg img,
.card img.card-img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
  .card:hover .card-bg img {
    transform: scale(1.03);
  }
}

/* —— 3. 卡片入场： stagger fade-up —— */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.bento-grid .card {
  animation: card-enter 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.bento-grid .card:nth-child(1) { animation-delay: 0.05s; }
.bento-grid .card:nth-child(2) { animation-delay: 0.10s; }
.bento-grid .card:nth-child(3) { animation-delay: 0.15s; }
.bento-grid .card:nth-child(4) { animation-delay: 0.20s; }
.bento-grid .card:nth-child(5) { animation-delay: 0.25s; }
.bento-grid .card:nth-child(6) { animation-delay: 0.30s; }
.bento-grid .card:nth-child(7) { animation-delay: 0.35s; }
.bento-grid .card:nth-child(8) { animation-delay: 0.40s; }
.bento-grid .card:nth-child(9) { animation-delay: 0.45s; }

/* —— 4. 按钮：苹果式按压缩放 —— */
.button, button:not(.card) {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.button:active {
  transform: scale(0.96);
}

/* —— 5. 毛玻璃：导航栏+浮动元素 —— */
.site-header {
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
}

/* —— 6. 背景图卡片：文字可读性 veil —— */
.card .card-bg-veil::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--paper) 68%, transparent),
    color-mix(in srgb, var(--paper) 35%, transparent) 50%,
    color-mix(in srgb, var(--paper) 55%, transparent)
  );
}

/* 悬浮音乐钮已由 header 按钮替代，全端隐藏 */
.mbb-fab {
  display: none !important;
}

/* 移动端首屏：Hero 压扁，保证一屏完整显示两张卡 */
@media (max-width: 620px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bento-grid .hero-card {
    min-height: 0;
    height: auto;
    padding: 16px 16px 14px;
  }
  .hero-headline {
    margin: 8px 0 6px;
  }
  .hero-headline-main {
    font-size: clamp(32px, 9vw, 42px);
  }
  .hero-headline-sub {
    font-size: clamp(18px, 5vw, 24px);
    margin-top: 2px;
  }
  .hero-copy {
    display: none;
  }
  .hero-card .hero-button {
    margin-top: 10px;
    padding: 8px 18px;
    font-size: 13px;
  }
  .hero-card .hero-avatar,
  .hero-card .hero-celestial {
    width: 64px;
    height: 64px;
  }
}

/* 手绘植物轻摆动画 */
.plant-handdrawn img {
  animation: plant-sway 4s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes plant-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* 4号卡课程下拉框：强制深色，iOS 也生效 */
.meditation-card select {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.meditation-card select option {
  color: #2c2822;
}

/* 移动端：冥想卡压紧，封面图缩小 */
@media (max-width: 620px) {
  .meditation-card {
    padding: 14px 14px 12px;
  }
  .meditation-large .meditation-cover,
  .meditation-large .meditation-cover-img,
  .meditation-large .meditation-cover-fallback {
    display: none;
  }
  .meditation-head {
    margin-bottom: 6px;
  }
  .meditation-head h2 {
    font-size: 19px;
  }
  .meditation-card .meditation-desc {
    font-size: 13px;
    margin: 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 移动端：首屏精确两卡（Hero + 正念冥想），第三张卡完全落在首屏之外，页面清爽不探头 */
/* 原理：两卡用视口直接定高。2026-10-20 真机实测（390x844）：header 高 91px、卡间距 12px，
   故卡高 = (844 - 91 - 12) / 2 = 50svh - 54px（多减 2px 留余量，防亚像素 rounding 探头）。
   第二张卡是正念冥想（.meditation-large）：App.tsx displayOrder 已按用户要求把
   冥想固定到移动端第 2 位。
   .site-shell 移动端改 height:auto，让 footer 顺排在内容之后——fixed 高度下超出的卡片
   会与 footer 重叠。
   2026-10-20 教训：不定高容器 + flex basis:0/min-height:0 会使卡片坍塌成一条，
   故用显式高度而不用 flex 弹性；svh 不支持时 vh 兜底（同一公式），再老的浏览器
   回退自然高度（只探头、不坍塌）。 */
@media (max-width: 620px) {
  /* 只动首页壳（:not(.section-shell)），课程落地页等 section 页保持原样 */
  .site-shell:not(.section-shell) {
    height: auto;
    min-height: 100svh;
  }
  .bento-grid .hero-card,
  .bento-grid .meditation-large {
    height: calc(50vh - 54px);
    height: calc(50svh - 54px);
    min-height: 300px;
  }
  /* 冥想卡内容（选择器+封面+简介+播放器）超出定高时，卡内可纵向滚动，
     替代 overflow:hidden 一刀切（2026-10-23：播放器/"查看课程"被裁掉够不着）。
     overscroll-behavior 防止滚动链把页面一起带走。桌面端保持原样。 */
  .bento-grid .meditation-large .meditation-card {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ================================================================
   首页 v2（2026-10-25 用户拍板方向，2026-10-26 转正为默认首页）
   气质取自 new-blog「烛火中的安静」：中央视觉 + 品牌原话 + 减法排版。
   规则收在 .home-v2 下（site-shell 首页常驻该 class）；
   颜色一律走主题变量，切换主题时随之变色。
   ================================================================ */
.hero2-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero2-card .hero-bottom-note {
  text-align: center;
}
.hero2-center {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 10px 16px;
  position: relative;
  z-index: 1;
}
.hero2-visual {
  position: relative;
  width: min(232px, 58vw);
  aspect-ratio: 0.94;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hero2-glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--theme-accent-ink, #b98f4e) 30%, transparent) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.hero2-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow:
    0 16px 30px rgba(74, 56, 24, 0.18),
    0 0 0 1px
      color-mix(in srgb, var(--theme-accent-ink, #b98f4e) 38%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  animation: hero2-float 7s ease-in-out infinite alternate;
}
@keyframes hero2-float {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero2-img {
    animation: none;
  }
}
.hero2-headline {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 16px 0 8px;
  color: var(--ink);
}
.hero2-line {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 14.5px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  margin: 0 0 8px;
  color: var(--theme-accent-ink, #a5834f);
}
.hero2-copy {
  max-width: 302px;
  margin: 0 auto;
  /* 旧半屏 Hero 时代的移动端规则把 .hero-copy 整体 display:none，
     v2 首屏是整屏落地页，介绍必须回来（特异度压过那条旧规则） */
  display: block;
  font-size: 13.5px;
}
.hero2-cta {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero2-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero2-primary:active {
  transform: scale(0.97);
}
.hero2-primary .btn-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.hero2-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--ink);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero2-ghost:active {
  transform: scale(0.97);
}
/* 烛火之旅文字入口（2026-10-27）：CTA 下方一行低调链接，进 /journey 落地页；
   居中列内自然增高，不改卡片高度与既有布局 */
.hero2-journey {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--theme-accent-ink, #a5834f);
  text-decoration: none;
  border-bottom: 1px solid
    color-mix(in srgb, var(--theme-accent-ink, #a5834f) 45%, transparent);
  padding-bottom: 2px;
  transition: opacity 0.3s;
}
.hero2-journey:hover {
  opacity: 0.72;
}

/* —— v2 冥想卡：封面成幅、播放器双层嵌套（double-bezel）、进度条可见 —— */
.home-v2 .meditation-cover {
  position: relative;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px rgba(60, 45, 20, 0.08),
    0 8px 20px rgba(60, 45, 20, 0.08);
}
.home-v2 .meditation-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 58%,
    rgba(34, 27, 14, 0.16)
  );
  pointer-events: none;
}
.home-v2 .meditation-series-select {
  border-radius: 12px !important;
  border-color: color-mix(
    in srgb,
    var(--theme-accent-ink, #a5834f) 45%,
    transparent
  ) !important;
}
.home-v2 .meditation-player {
  background: color-mix(in srgb, var(--theme-soft, #efe7d7) 68%, transparent);
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px
      color-mix(in srgb, var(--theme-accent-ink, #a5834f) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 22px rgba(60, 45, 20, 0.07);
  padding: 12px;
  gap: 12px;
}
.home-v2 .mp-play {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-ink, #b98f4e) 82%, #ffffff),
    var(--theme-accent-ink, #b98f4e)
  );
  color: #fffdf6;
  box-shadow:
    0 6px 14px
      color-mix(in srgb, var(--theme-accent-ink, #b98f4e) 42%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.home-v2 .mp-play:active {
  transform: scale(0.94);
}
.home-v2 .mp-progress {
  height: 5px;
  background: linear-gradient(
    to right,
    var(--theme-accent-ink, #b98f4e) 0%,
    var(--theme-accent-ink, #b98f4e) var(--progress, 0%),
    color-mix(in srgb, var(--ink) 13%, transparent) var(--progress, 0%),
    color-mix(in srgb, var(--ink) 13%, transparent) 100%
  );
}
.home-v2 .mp-progress::-webkit-slider-thumb {
  opacity: 1;
  width: 12px;
  height: 12px;
  background: var(--theme-accent-ink, #b98f4e);
  box-shadow: 0 1px 4px rgba(40, 30, 10, 0.3);
}
.home-v2 .mp-progress::-moz-range-thumb {
  background: var(--theme-accent-ink, #b98f4e);
}
.home-v2 .mp-title {
  font-size: 14px;
}

/* —— v2 移动端重排：首屏=落地页整屏，其后卡片自然高度顺排 —— */
@media (max-width: 620px) {
  .home-v2 .bento-grid .hero2-card {
    height: calc(100vh - 126px);
    height: calc(100svh - 126px);
    min-height: 540px;
  }
  .home-v2 .bento-grid .meditation-large {
    height: auto;
    min-height: 0;
  }
  .home-v2 .bento-grid .meditation-large .meditation-card {
    overflow: visible;
    height: auto;
  }
  .home-v2 .meditation-large .meditation-cover-img,
  .home-v2 .meditation-large .meditation-cover-fallback {
    aspect-ratio: 16 / 8.5;
    min-height: 150px;
    max-height: none;
  }
  .home-v2 .hero2-visual {
    width: min(240px, 60vw);
  }
}

/* —— 照片卡图片兜底（2026-10-26 实测）——
   桌面端 SafeImage 的淡入 loaded 态偶发不触发，img 尺寸/src 都对却恒透明、
   整卡空白。照片卡是首屏图，不靠淡入状态吃饭：直接恒显，淡入动画让位给可靠性。 */
.home-v2 .photo-open > img {
  opacity: 1;
}

/* —— v2 PC 端落地页化（2026-10-26 用户看完 PC 截图后要求）——
   旧 bento 是定高三行：Hero 被塞进窄格（图被裁、介绍和按钮被挤出格外），
   中行卡片也被定高裁切。v2 桌面改为：Hero 全宽落地带 + 其余行自然高度、
   页面滚动。仅作用于首页 .home-v2，section 页与移动端不受影响。 */
@media (min-width: 1101px) {
  .home-v2.site-shell {
    height: auto;
    min-height: 100svh;
  }
  .home-v2 .bento-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: none;
  }
  .home-v2 .bento-row {
    display: flex;
    gap: 22px;
    min-height: 0;
  }
  .home-v2 .bento-row > * {
    flex: 1 1 0;
    min-width: 0;
  }
  /* 第一行：Hero（默认顺序第一张）全宽，其余两卡并排落在下方一行 */
  .home-v2 .top-row {
    flex-wrap: wrap;
  }
  .home-v2 .top-row > :first-child {
    flex: 1 1 100%;
  }
  .home-v2 .top-row > :not(:first-child) {
    height: 320px;
  }
  .home-v2 .hero2-card {
    height: calc(100vh - 170px);
    height: calc(100svh - 170px);
    min-height: 600px;
    max-height: 840px;
    width: 100%;
  }
  .home-v2 .hero2-visual {
    width: 288px;
  }
  .home-v2 .hero2-headline {
    font-size: 42px;
  }
  .home-v2 .hero2-line {
    font-size: 16px;
  }
  /* 桌面照片卡是矮宽带，竖幅照片按中心裁会切掉脸：裁切窗口上移保住面部 */
  .home-v2 .photo-open > img {
    object-position: 50% 22%;
  }
  /* 编辑模式的拖拽包裹层：高度透传给内层卡片 */
  .home-v2 .home-card-drag {
    display: flex;
  }
  .home-v2 .home-card-drag > * {
    flex: 1;
    min-width: 0;
  }
}

/* —— /courses 发现页 PC 端布局（2026-10-26 用户报「电脑端显得怪」）——
   病灶：继续学习条与会员横幅近通栏（96%+），主体系列区却只有 1060 栏内的
   横向小卡，层级倒置；标题区居中悬空、与内容栏不对齐。以下只动 ≥1101px，
   移动端保持原样。 */
@media (min-width: 1101px) {
  /* 标题区：与内容栏同宽左对齐，收紧纵向留白，不再居中悬空。
     左边缘与 .course-section 的内容边（1060 栏 + 28 内距）像素级对齐：
     hero 自身不留左右距，内距交给 inner 的 28px。 */
  .course-discovery .course-hero-compact {
    padding: 38px 0 26px;
  }
  .course-discovery .course-hero-inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 28px;
    align-items: flex-start;
    text-align: left;
  }
  .course-discovery .course-hero-compact h1 {
    margin-top: 8px;
  }
  .course-discovery .course-hero-compact .course-tagline {
    margin-top: 6px;
  }
  /* 继续学习 + 会员横幅：收进与系列网格相同的栏宽（1060 栏含 28 内距 → 内容 1004） */
  .course-discovery .course-continue,
  .course-discovery .course-member-strip {
    width: min(1004px, calc(100% - 56px));
    margin-left: auto;
    margin-right: auto;
  }
  .course-discovery .course-member-strip {
    margin-top: 16px;
  }
  /* 系列卡：横向小卡改竖版大卡，封面成幅。
     auto-fit（非 fill）：系列少时空轨道塌陷、卡片自动长宽，不留一张卡的空位。 */
  .course-discovery .course-series-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
  }
  .course-discovery .course-series-card {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .course-discovery .course-series-card-cover {
    width: 100%;
    height: 200px;
    border-radius: 0;
  }
  .course-discovery .course-series-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .course-discovery .course-series-card-meta {
    padding: 18px 20px 20px;
    gap: 6px;
  }
  .course-discovery .course-series-card-meta strong {
    font-size: 18px;
  }
  .course-discovery .course-series-card-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px;
    border-radius: 50%;
    background: var(--theme-glass, rgba(255, 255, 255, 0.75));
    color: var(--ink);
  }
  /* 页尾留白收口 */
  .course-discovery .course-section {
    padding-bottom: 64px;
  }
}

/* —— /courses 发现页手机端微调（2026-10-26，≤620px）——
   390 实测三处：①会员横幅价格被挤到拆词换行（年会/员）②标题区留白偏空
   ③页尾没给悬浮播放条留安全垫，最后一张卡贴着播放条。 */
@media (max-width: 620px) {
  /* 标题区收紧一点 */
  .course-discovery .course-hero-compact {
    padding: 30px 20px 20px;
  }
  /* 会员横幅改上下排：文案整行放，按钮整行大点按区，不再拆词 */
  .course-discovery .course-member-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .course-discovery .course-member-strip-btn {
    align-self: stretch;
    text-align: center;
  }
  /* 系列卡统一最低高度：没简介的系列也不显得矮一截 */
  .course-discovery .course-series-card {
    min-height: 112px;
  }
  /* 页尾给悬浮播放条留安全垫 */
  .course-discovery {
    padding-bottom: 88px;
  }
}

/* —— 三条 bug 修复配套样式（2026-10-26 用户拍板）—— */
/* 6 号卡：付费查看 + 次级 VIP 密码入口纵排；无链接资源占位 */
.resource-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.resource-vip-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 2px 0;
}
.resource-pending {
  color: var(--muted);
  flex: none;
}
/* 悬浮音乐条点击穿透（10-16 [高] 方案）：条带本体不拦点击，
   只让真正的控件接管，底下的页面按钮（如 6 号卡付费查看）点得到。 */
.music-bottombar {
  pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.music-bottombar .mbb-progress-line,
.music-bottombar .mbb-expand-hit,
.music-bottombar .mbb-controls,
.music-bottombar .mbb-progress-wrap,
.music-bottombar .mbb-tools,
.music-bottombar .mbb-error,
.music-bottombar .sleep-popover {
  pointer-events: auto;
}

/* ============ 学苑心跳卡（6 号卡，2026-10-26 替换资源分享站） ============ */
/* 自然生态语言：呼吸光晕 / 溪流线 / 芦苇荡 / 露珠涟漪 / 叶脉；全用主题变量，日夜自适配 */
.pulse-card { overflow: hidden; position: relative; }
.pulse-halo {
  position: absolute; width: 230px; height: 230px; border-radius: 50%;
  left: -58px; top: -64px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--lime) 32%, transparent) 0%, color-mix(in srgb, var(--lime) 12%, transparent) 42%, transparent 68%);
  animation: pulseBreathe 6s ease-in-out infinite alternate;
}
@keyframes pulseBreathe {
  from { transform: scale(.94); opacity: .55; }
  to { transform: scale(1.07); opacity: .85; }
}
.pulse-vein { position: absolute; right: 0; top: 26px; width: 104px; height: 132px; pointer-events: none; opacity: .8; }
.pulse-vein path { stroke: color-mix(in srgb, var(--muted) 26%, transparent); stroke-width: 1.3; fill: color-mix(in srgb, var(--muted) 7%, transparent); }
.pulse-vein path:first-child { fill: none; }
.pulse-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.pulse-top { display: flex; align-items: center; justify-content: space-between; }
.pulse-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--theme-accent-ink, #A6533C); }
.pulse-eyebrow svg path { stroke: var(--muted); stroke-width: 1.8; }
.pulse-live { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 2px; color: var(--muted); }
.pulse-dew { position: relative; width: 10px; height: 10px; flex: none; }
.pulse-drop {
  position: absolute; inset: 1px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px color-mix(in srgb, var(--lime) 80%, transparent);
}
.pulse-rip {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--lime) 85%, transparent);
  animation: pulseRipple 3.2s ease-out infinite;
}
@keyframes pulseRipple {
  0% { transform: scale(.6); opacity: .8; }
  70% { transform: scale(2.3); opacity: 0; }
  100% { transform: scale(2.3); opacity: 0; }
}
.pulse-hero { margin-top: 10px; display: flex; align-items: baseline; gap: 9px; }
.pulse-hero b {
  font-size: 44px; font-weight: 600; letter-spacing: 1px; line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 24px color-mix(in srgb, var(--lime) 38%, transparent);
}
.pulse-hero span { font-size: 13px; letter-spacing: 3px; color: var(--muted); }
.pulse-label { font-size: 12.5px; color: var(--muted); margin-top: 5px; letter-spacing: 1.5px; }
.pulse-wave { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; flex: 1 1 auto; }
.pulse-wave svg { width: 132px; height: 48px; flex: none; }
.pulse-wave svg path {
  stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100;
  animation: pulseStream 7s ease-in-out infinite;
}
@keyframes pulseStream {
  0% { stroke-dashoffset: 100; opacity: 1; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  78% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: .15; }
  93% { stroke-dashoffset: 100; opacity: .15; }
  100% { stroke-dashoffset: 100; opacity: 1; }
}
.pulse-stop-a { stop-color: var(--muted); }
.pulse-stop-b { stop-color: var(--lime); }
.pulse-reeds { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.pulse-reeds i {
  flex: 1; border-radius: 99px 99px 3px 3px; opacity: .9;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 45%, var(--muted)), color-mix(in srgb, var(--muted) 75%, var(--ink)));
  transform-origin: bottom;
  animation: pulseReedSway 3s ease-in-out infinite alternate;
}
@keyframes pulseReedSway {
  from { transform: scaleY(.86); }
  to { transform: scaleY(1.05); }
}
.pulse-stats { display: flex; gap: 10px; margin-top: 8px; }
.pulse-stat {
  flex: 1; border-radius: 16px; padding: 9px 12px;
  background: color-mix(in srgb, var(--lime) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 26%, transparent);
}
.pulse-stat b { font-size: 19px; font-weight: 600; color: var(--ink); }
.pulse-stat b small { font-size: 11px; color: var(--muted); margin-left: 3px; font-weight: 400; }
.pulse-stat span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; letter-spacing: 2px; }
.pulse-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.pulse-card.pulse-clickable { cursor: pointer; }
.pulse-feed {
  /* 微明度分层试点（2026-10-28，视频 #21）：去掉 1px 分隔线，改整幅 surface 色阶带
     （主题墨色 4% 叠在卡面上，明度差约 2–3%），全幅贴底顺带收紧卡下部留白（G③）。
     只在心跳卡试点，效果待用户看图拍板后再议推广。 */
  margin: auto calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: 12px var(--pad) calc(var(--pad) - 4px);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 12.5px; color: var(--theme-prose, var(--muted));
  display: flex; gap: 8px; align-items: center;
}
.pulse-leaf {
  width: 7px; height: 7px; flex: none; background: var(--lime);
  border-radius: 0 99px 0 99px; transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .pulse-halo, .pulse-rip, .pulse-wave svg path, .pulse-reeds i { animation: none; }
  .pulse-wave svg path { stroke-dashoffset: 0; }
}

/* ============ 公告板宠物：小黑猫（2026-10-26，按罗小黑神韵自绘） ============ */
/* 坐在公告卡右上角沿上：头在卡外、尾巴垂在卡面；z 高于标题栏，不再被挡 */
.announce-card { overflow: visible; }
.announce-card .section-top { position: relative; z-index: 7; }
.announce-card .announce-list:not(.announce-sparse) .home-article:first-child { padding-right: 76px; }
/* 特异度须压过 .article-card > :not(.card-bg) 的 position:relative 浮层规则 */
.announce-card > .announce-pet {
  position: absolute; top: -46px; right: 12px; z-index: 8;
  width: 92px; height: 83px; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.announce-pet svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(0 3px 7px rgba(44, 40, 34, .30)) drop-shadow(0 0 5px rgba(201, 169, 106, .38));
}
.xhei-fur { fill: #2B2721; stroke: #2B2721; stroke-width: 2.6; stroke-linejoin: round; }
.xhei-pupil { fill: #171410; }
.xhei-glare { fill: #FFFDF6; }
.xhei-tail { transform-box: fill-box; transform-origin: 0% 0%; animation: xheiTailSway 3.8s ease-in-out infinite alternate; }
.xhei-tail path { fill: none; stroke: #2B2721; stroke-width: 5; stroke-linecap: round; }
@keyframes xheiTailSway { from { transform: rotate(-4deg); } to { transform: rotate(6deg); } }
.announce-pet.mood-sleepy .xhei-tail { animation-duration: 7s; }
.xhei-body { transform-box: fill-box; transform-origin: 50% 100%; animation: xheiBreath 3.8s ease-in-out infinite alternate; }
@keyframes xheiBreath { from { transform: scale(1, 1); } to { transform: scale(1.012, 1.022); } }
.xhei-eyes-open { animation: xheiBlinkOpen 5.6s infinite; }
.xhei-eyes-blink { opacity: 0; animation: xheiBlinkShut 5.6s infinite; }
.xhei-eyes-blink path, .xhei-eyes-line path { fill: none; stroke: #101410; stroke-width: 2; stroke-linecap: round; }
@keyframes xheiBlinkOpen { 0%, 93.5%, 100% { opacity: 1; } 95%, 97% { opacity: 0; } }
@keyframes xheiBlinkShut { 0%, 93.5%, 100% { opacity: 0; } 95%, 97% { opacity: 1; } }
.xhei-face-line { fill: #6E675C; stroke: none; }
.xhei-face-curve { fill: none; stroke: #6E675C; stroke-width: 1.3; stroke-linecap: round; }
.apet-bubble {
  position: absolute; right: 80%; bottom: 46%; z-index: 9;
  width: max-content; max-width: 228px; text-align: left;
  background: var(--card); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--lime) 65%, transparent);
  border-radius: 14px; padding: 9px 13px;
  font-size: 13px; line-height: 1.6; letter-spacing: .5px;
  box-shadow: 0 10px 26px rgba(44, 40, 34, .16);
  animation: apetBubbleIn .28s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}
.apet-bubble::after {
  content: ""; position: absolute; right: -5px; bottom: 14px;
  width: 10px; height: 10px; background: var(--card);
  border-right: 1px solid color-mix(in srgb, var(--lime) 65%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--lime) 65%, transparent);
  transform: rotate(-45deg);
}
@keyframes apetBubbleIn { from { transform: scale(.7) translateY(6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.apet-zzz {
  position: absolute; top: -10px; right: 2px; z-index: 9;
  font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 700;
  color: var(--muted); pointer-events: none;
  animation: apetZzz 2.8s ease-in-out infinite;
}
@keyframes apetZzz { 0% { transform: translateY(2px) rotate(-6deg); opacity: .35; } 50% { transform: translateY(-4px) rotate(8deg); opacity: 1; } 100% { transform: translateY(2px) rotate(-6deg); opacity: .35; } }
.apet-hint { position: absolute; top: -5px; right: -3px; width: 18px; height: 18px; z-index: 9; pointer-events: none; }
.apet-hint-dot {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 2px solid #fff; background: var(--theme-accent-ink, #A6533C);
  box-shadow: 0 1px 4px rgba(44, 40, 34, .35);
}
.apet-hint-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.4px solid var(--lime);
  animation: apetHintPulse 2.4s ease-out infinite;
}
@keyframes apetHintPulse { 0% { transform: scale(.55); opacity: .9; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
/* 移动端：猫缩小，气泡改向卡内下方展开，不再压到上一张卡 */
@media (max-width: 620px) {
  .announce-card > .announce-pet { width: 66px; height: 60px; top: -32px; right: 10px; }
  .apet-bubble { bottom: auto; top: 88%; right: 24%; max-width: 196px; }
  .apet-bubble::after {
    right: 18px; bottom: auto; top: -5px;
    transform: rotate(135deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xhei-tail, .xhei-body, .xhei-eyes-open, .xhei-eyes-blink, .apet-zzz, .apet-hint-ring { animation: none; }
  .xhei-eyes-blink { opacity: 0; }
}

/* ================================================================
   2026-10-28 UI 落地批次（视频 #20 热区 / #21 大厂细节）
   ================================================================ */

/* —— A 热区补偿：视觉大小不变，透明伪元素把点击面撑到 ≥40px（视频 #20） —— */
.avatar-btn,
.daynight-header-btn,
.header-icon-btn,
.icon-button,
.mbb-btn,
.rate-button,
.edit-trigger {
  position: relative;
}
.avatar-btn::after,
.daynight-header-btn::after,
.header-icon-btn::after,
.icon-button::after,
.mbb-btn::after,
.rate-button::after,
.edit-trigger::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}
.avatar-btn::after { inset: -4px; }        /* 36 → 44 */
.daynight-header-btn::after { inset: -6px; } /* 32 → 44 */
.header-icon-btn::after { inset: -6px; }     /* 32 → 44 */
.icon-button::after { inset: -5px; }         /* 34 → 44（含各弹窗关闭 ×） */
.mbb-btn::after { inset: -4px; }             /* 36 → 44 */
.rate-button::after { inset: -5px; }         /* 34×30 → 44×40 */
.edit-trigger::after { inset: -8px; }        /* 编辑态小钮 → 约 40 */
.photo-caption button::after {
  content: "";
  position: absolute;
  inset: -3px;                               /* 39 → 45 */
  border-radius: inherit;
}
.photo-caption button { position: relative; }
/* 照片卡标题区与箭头同目的地：整块可点（.photo-caption 本体 pointer-events:none） */
.photo-caption-hit {
  pointer-events: auto;
  cursor: pointer;
}
/* 播放器工具钮与睡眠菜单项：高度补到 40 */
.mfp-tool { min-height: 40px; }
.sleep-popover button { min-height: 40px; }

/* —— C 数字等宽：计时/统计/价格/会员天数统一 tabular-nums（视频 #21） —— */
.pulse-hero b,
.pulse-stat b,
.playstats-count,
.playstats-dialog .theme-intro,
.member-badge,
.time-label,
.course-stat,
.playlist-duration {
  font-variant-numeric: tabular-nums;
}

/* —— F 长文防孤字：段落末行不落单字（视频 #21） —— */
.about-intro,
.community-memo-body,
.home-article p {
  text-wrap: pretty;
}

/* —— 头像下拉入场：统一出场曲线 + 轻微上浮（F） —— */
@keyframes avatar-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.avatar-dropdown {
  animation: avatar-dropdown-in 0.28s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

/* —— G② 全屏播放器展开态收尾 —— */
/* 全屏播放器打开时藏起迷你条本体：此条保留（2026-10-29 会诊定稿特意叮嘱只删一条）——
   删了它，迷你条会透过 45% 半透明遮罩露出来。
   原第二条「.mfp-open .mfp-overlay { visibility: visible }」已删除：遮罩自 2026-10-29
   起经 createPortal 挂到 body、不再是底条后代，该反显规则自然失效，留着只会误导。 */
.music-bottombar.mfp-open {
  visibility: hidden;
}
/* 曲名完整显示：允许换行不断词截断 */
.mfp-info strong {
  overflow-wrap: anywhere;
  padding-inline: 8px;
}
@media (max-width: 620px) {
  /* 面板四边留安全边距，不再贴屏幕边缘（圆角整体化） */
  .mfp-sheet {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    border-radius: 20px;
  }
}
/* 唤醒学苑品牌区样式：国际疗愈中心风（粗黑体、大留白、暖白+大地色系）。
   全用主题变量，深浅主题自动适配。parent 需在入口 import "./brand.css"。 */

.brand-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--muted);
  margin: 0 0 16px;
  font-weight: 600;
}

/* ---- Hero ---- */
.brand-hero {
  text-align: center;
  padding: 72px 24px 64px;
  max-width: 960px;
  margin: 0 auto;
}
.brand-title {
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 1px;
  margin: 0 0 20px;
  color: var(--ink);
}
.brand-sub {
  max-width: 600px;
  margin: 0 auto 36px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--muted);
}
.brand-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.brand-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 34px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.brand-cta.primary {
  background: var(--ink);
  color: var(--paper);
}
.brand-cta.ghost {
  background: transparent;
  color: var(--ink);
}
.brand-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}
.brand-pillar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
}
.brand-pillar-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  margin-bottom: 16px;
}
.brand-pillar h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 10px;
}
.brand-pillar p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}

/* ---- 关于 ---- */
.about-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 24px;
}
.about-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 900;
  margin: 0 0 18px;
}
.about-intro {
  font-size: 16px;
  line-height: 2;
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 40px;
}
.about-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.about-service {
  display: flex;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}
.about-service-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}
.about-service h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
}
.about-service p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.about-contact {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.about-contact h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
}
.about-contact p {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0;
}

/* ---- 页脚 ---- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding: 48px 24px 0;
  background: var(--card);
}
.site-footer-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
}
.site-footer-brand strong {
  font-size: 20px;
  font-weight: 900;
}
.site-footer-brand p {
  color: var(--muted);
  font-size: 14px;
  margin: 10px 0 0;
}
.site-footer-links strong,
.site-footer-contact strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
}
.site-footer-links button {
  display: block;
  background: none;
  border: none;
  padding: 6px 0;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
.site-footer-contact p {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0;
}
.site-footer-bottom {
  max-width: 960px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 18px 0 24px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ---- 手机端单列 ---- */
@media (max-width: 640px) {
  .brand-hero {
    padding: 52px 20px 48px;
  }
  .brand-ctas {
    margin-bottom: 44px;
  }
  .brand-cta {
    min-height: 48px;
    width: 100%;
    justify-content: center;
  }
  .brand-pillars,
  .about-services,
  .site-footer-grid {
    grid-template-columns: 1fr;
  }
}
/* The original palette lives in styles.css. These tokens also reach the
   reading pages, dialogs, editor fields and player without changing layout. */
:root[data-theme="midnight"] {
  --ink: #eeedf5;
  --muted: #a8aec2;
  --paper: #12151f;
  --card: #1d2230;
  --line: #343b50;
  --lime: #c0b5ef;
  --theme-muted: #a8aec2;
  --theme-prose: #c9ccdc;
  --theme-surface: #222838;
  --theme-soft: #2b3147;
  --theme-field: #191f2d;
  --theme-image-bg: #272d3e;
  --theme-line: #343b50;
  --theme-input-line: #4c5572;
  --theme-accent-line: #8881b7;
  --theme-focus: #c8bef8;
  --theme-accent-ink: #c5baee;
  --theme-on-accent: #282239;
  --theme-button: #c0b5ef;
  --theme-button-hover: #d0c6fa;
  --theme-on-button: #282239;
  --theme-chrome: #262d40;
  --theme-chrome-line: #525979;
  --theme-on-chrome: #eeebff;
  --theme-clock: #24283c;
  --theme-clock-ink: #efebfa;
  --theme-clock-accent: #c5baf3;
  --theme-clock-line: #53536d;
  --theme-danger: #f0adb2;
  --theme-number: #383e56;
  --theme-scrollbar: #5c617e;
  --theme-track: #3b4156;
}
/* 晨雾：疗愈系，暖雾白底 + 杏色微光，松弛呼吸。 */
:root[data-theme="mist"] {
  --ink: #4a4640;
  --muted: #8a7f72;
  --paper: #f7f3ee;
  --card: #ffffff;
  --line: #e5dccf;
  --lime: #dfa06f;
  --theme-muted: #8a7f72;
  --theme-prose: #5c554b;
  --theme-surface: #f0eae0;
  --theme-soft: #eae2d4;
  --theme-field: #ffffff;
  --theme-image-bg: #efe8da;
  --theme-line: #e5dccf;
  --theme-input-line: #cdbfa8;
  --theme-accent-line: #dfa06f;
  --theme-focus: #dfa06f;
  --theme-accent-ink: #bd7c46;
  --theme-on-accent: #4a4640;
  --theme-button: #cd7f47;
  --theme-button-hover: #d98f57;
  --theme-on-button: #ffffff;
  --theme-chrome: #f7f3ee;
  --theme-chrome-line: #e5dccf;
  --theme-on-chrome: #4a4640;
  --theme-clock: #4e4a44;
  --theme-clock-ink: #f7f1e6;
  --theme-clock-accent: #e8b07e;
  --theme-clock-line: #6b655b;
  --theme-danger: #b0573f;
  --theme-number: #dcd2c0;
  --theme-scrollbar: #cdbfa8;
  --theme-track: #eae2d4;
}

/* 奶油：疗愈系，奶油白 + 焦糖，慵懒午后。 */

/* 霓虹：游戏系深色，深空底 + 霓虹青 + 品红点缀。 */

/* 秘境：RPG 游戏风，羊皮纸 + 森林绿 + 鎏金。 */

/* 海屿：自然系，雾蓝白 + 海水青 + 珊瑚点缀。 */

/* 秋野：自然系，麦穗白 + 枫叶红 + 暖阳金。 */

/* 禅石：正念系，宣纸白 + 墨黑 + 朱砂点睛。 */
:root[data-theme="zenstone"] {
  --ink: #2b2b28;
  --muted: #7a766c;
  --paper: #f4f2ed;
  --card: #fbfaf6;
  --line: #ddd8cc;
  --lime: #6b6b64;
  --theme-muted: #7a766c;
  --theme-prose: #43433e;
  --theme-surface: #eae8e0;
  --theme-soft: #e2dfd4;
  --theme-field: #fbfaf6;
  --theme-image-bg: #e5e2d6;
  --theme-line: #ddd8cc;
  --theme-input-line: #bdb8a8;
  --theme-accent-line: #6b6b64;
  --theme-focus: #b54434;
  --theme-accent-ink: #4a4a44;
  --theme-on-accent: #f4f2ed;
  --theme-button: #2b2b28;
  --theme-button-hover: #3d3d38;
  --theme-on-button: #f4f2ed;
  --theme-chrome: #f4f2ed;
  --theme-chrome-line: #ddd8cc;
  --theme-on-chrome: #2b2b28;
  --theme-clock: #2b2b28;
  --theme-clock-ink: #f4f2ed;
  --theme-clock-accent: #b54434;
  --theme-clock-line: #4a4a44;
  --theme-danger: #b54434;
  --theme-number: #d4cfc0;
  --theme-scrollbar: #bdb8a8;
  --theme-track: #e2dfd4;
}

/* 月相：正念系深色，夜空蓝 + 月光银。 */

/* 瑜伽·晨光：疗愈系，晨曦暖白 + 陶土，生机。 */

/* 呼吸：疗愈系，空气白 + 雾蓝，轻盈。 */

/* 梵音：疗愈系（深色），深暖夜 + 烛金，仪式感。 */

/* 荷花：疗愈系，莲白 + 豆沙，清净（知性 muted 路线，非卡通）。 */

/* 大地：疗愈系，大地白 + 赭石，厚重。 */




/* 柠檬黄：柠檬气泡水，明亮轻快。 */

/* 薰衣草：梦幻淡紫，浪漫优雅。 */

/* 摩卡：醇厚咖啡棕，复古温暖。 */

/* 松林：深色，深林绿，沉稳神秘。 */

/* 曜石：深色，纯黑极简，克制高级。 */

/* 极光：深色，深空极光青+紫，梦幻。 */

/* 酒红：深色，复古酒红，优雅醇香。 */

/* 观照·昼：一盏暖灯，一张宣纸。暖宣纸底 + 墨棕字 + 鎏金行动点 + 朱砂强调 */
:root[data-theme="guanzhao"] {
  --ink: #2C2822;
  --muted: #8A8177;
  --paper: #F6F3EC;
  --card: #FDFBF7;
  --line: #E8E2D4;
  --lime: #C9A96A;
  --theme-muted: #8A8177;
  --theme-prose: #4A4438;
  --theme-surface: #EFE8D8;
  --theme-soft: #F1EBDB;
  --theme-field: #FDFBF7;
  --theme-image-bg: #EDE6D2;
  --theme-line: #E8E2D4;
  --theme-input-line: #D8CCB0;
  --theme-accent-line: #C9A96A;
  --theme-focus: #D4B87E;
  --theme-accent-ink: #A6533C;
  --theme-on-accent: #FFFFFF;
  --theme-button: #2C2822;
  --theme-button-hover: #4A4438;
  --theme-on-button: #F6F3EC;
  --theme-chrome: #FDFBF7;
  --theme-chrome-line: #E8E2D4;
  --theme-on-chrome: #2C2822;
  --theme-clock: #EFE8D8;
  --theme-clock-ink: #2C2822;
  --theme-clock-accent: #A6533C;
  --theme-clock-line: #D8CCB0;
  --theme-danger: #B6533C;
  --theme-number: #E8E2D4;
  --theme-scrollbar: #D8CCB0;
  --theme-track: #F1EBDB;
}
/* 观照·夜：烛光禅堂。墨夜底 + 月光纸色字 + 烛金点缀 */
:root[data-theme="guanzhao-night"] {
  --ink: #EDE6D6;
  --muted: #9A9184;
  --paper: #1A1712;
  --card: #242019;
  --line: #3A342A;
  --lime: #D4A853;
  --theme-muted: #9A9184;
  --theme-prose: #D8CDB4;
  --theme-surface: #2A251C;
  --theme-surface-2: #2A251C;
  --theme-soft: #2E2820;
  --theme-field: #1E1A14;
  --theme-image-bg: #2A251C;
  --theme-line: #3A342A;
  --theme-input-line: #4A4234;
  --theme-accent-line: #D4A853;
  --theme-focus: #E0BC6E;
  --theme-accent-ink: #D4A853;
  --theme-on-accent: #1A1712;
  --theme-button: #D4A853;
  --theme-button-hover: #E0BC6E;
  --theme-on-button: #1A1712;
  --theme-chrome: #242019;
  --theme-chrome-line: #3A342A;
  --theme-on-chrome: #EDE6D6;
  --theme-clock: #242019;
  --theme-clock-ink: #EDE6D6;
  --theme-clock-accent: #D4A853;
  --theme-clock-line: #3A342A;
  --theme-danger: #E08A7A;
  --theme-number: #3A342A;
  --theme-scrollbar: #4A4234;
  --theme-track: #2A251C;
}


:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"], [data-theme="guanzhao"], [data-theme="guanzhao-night"]) {
  color: var(--ink);
  background: var(--paper);
  accent-color: var(--theme-focus);
  scrollbar-color: var(--theme-scrollbar) transparent;
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) body {
  background-attachment: fixed;
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) ::selection {
  background: var(--lime);
  color: var(--theme-on-accent);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .button.dark,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .play-button,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"])
  .filter-tabs
  button[aria-pressed="true"] {
  background: var(--theme-button);
  color: var(--theme-on-button);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .button.dark:hover {
  background: var(--theme-button-hover);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .button.lime,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .calendar-grid .today,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .like-button.liked,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .contact-success-icon,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .demo-toolbar i,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .skip-link {
  color: var(--theme-on-accent);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .clock-digits > span,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .weather svg {
  color: var(--theme-clock-accent);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .clock-date {
  color: var(--theme-clock-ink);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .progress {
  background: linear-gradient(
    to right,
    var(--lime) 0%,
    var(--lime) var(--progress),
    var(--theme-track) var(--progress),
    var(--theme-track) 100%
  );
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"])
  .contact-form
  input:focus,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"])
  .contact-form
  textarea:focus {
  outline-color: var(--theme-focus);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .photo-caption button,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .photo-stage > button,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .album-expand {
  color: var(--ink);
  border: 1px solid var(--line);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .player-popover {
  box-shadow: 0 10px 32px #080a141f;
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .friend-card,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .album-tile,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"])
  .collection-list
  article,
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .project-list > button {
  border-color: var(--line);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"])
  .section-content
  .collection-list
  article:not(:has(> img, > .image-fallback)) {
  border-top-color: var(--lime);
}
:root:is([data-theme="blush"], [data-theme="midnight"], [data-theme="mist"], [data-theme="zenstone"]) .inbox-message.unread {
  background: var(--theme-soft);
  border-color: var(--theme-accent-line);
}

/* Midnight: layered ink, lavender controls and quiet constellations. */
:root[data-theme="midnight"] body {
  background-image:
    radial-gradient(circle at 30% 20%, #d4d4ff18 0.7px, transparent 1px),
    radial-gradient(ellipse at 80% 0%, #40375d38, transparent 48%),
    radial-gradient(ellipse at 0% 85%, #2a465233, transparent 43%);
  background-size:
    33px 33px,
    auto,
    auto;
}
:root[data-theme="midnight"] .card {
  border-radius: 10px;
  border-color: #41475c;
  border-top-color: #626780;
  background-image: linear-gradient(135deg, #ffffff04, transparent 60%);
  box-shadow:
    0 10px 24px #05071238,
    inset 0 1px 0 #dde0ff0d,
    inset 0 -1px 0 #0609154d;
}
:root[data-theme="midnight"] .hero-card {
  background:
    linear-gradient(#bfbaff06 1px, transparent 1px),
    linear-gradient(90deg, #bfbaff06 1px, transparent 1px),
    radial-gradient(circle at 85% 22%, #63508226, transparent 45%),
    linear-gradient(135deg, #252b3d, #1e2432);
  background-size:
    26px 26px,
    26px 26px,
    auto,
    auto;
}
:root[data-theme="midnight"] .brand > span {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  letter-spacing: -2px;
}
:root[data-theme="midnight"] .eyebrow,
:root[data-theme="midnight"] .clock-zone,
:root[data-theme="midnight"] .section-number {
  font-family: "SFMono-Regular", Consolas, monospace;
}
:root[data-theme="midnight"] .hero-card h1 {
  font-weight: 550;
  letter-spacing: -1.5px;
}
:root[data-theme="midnight"] .hero-card h1::before {
  background: #8170ad;
  opacity: 0.6;
  height: 0.16em;
  top: 0.85em;
  border-radius: 8px;
}
:root[data-theme="midnight"] .hero-orbit span {
  border-color: #8b80ae;
  border-style: solid;
  opacity: 0.7;
  box-shadow: 0 0 0 7px #c9c0ed07;
}
:root[data-theme="midnight"] .hero-orbit i {
  background: #d8c9f5;
  box-shadow: 0 0 15px #d8c9f591;
}
:root[data-theme="midnight"] .hero-avatar {
  box-shadow:
    0 0 0 1px #817698,
    0 0 35px #a38dca20;
  border-color: #2a2c3c;
}
:root[data-theme="midnight"] .hero-side-note {
  color: #b1a6cb;
}
:root[data-theme="midnight"] .hero-celestial.has-avatar::after {
  content: "✧";
  position: absolute;
  right: -1%;
  top: 7%;
  font-size: 26px;
  line-height: 1;
  color: #dfd2f8;
  text-shadow: 0 0 10px #aa87d594;
  pointer-events: none;
}
:root[data-theme="midnight"]
  .hero-celestial:not(.has-avatar)
  .hero-orbit::before {
  content: "";
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    #9d90bd,
    #5d557a 24%,
    #28283c 64%,
    #1a1f2d 82%
  );
  box-shadow:
    inset -9px -7px 18px #070d2480,
    0 0 25px #bdb0e818;
}
:root[data-theme="midnight"] .hero-celestial:not(.has-avatar) .hero-orbit span {
  z-index: 1;
  border-bottom-color: #c4b5e0;
}
:root[data-theme="midnight"] .cat {
  filter: drop-shadow(0 0 2px #ddd2f68a);
}
:root[data-theme="midnight"] .site-header nav a.active {
  color: #d4c9f6;
}
:root[data-theme="midnight"] .site-header nav a.active::after {
  width: 20px;
  height: 3px;
  border-radius: 5px;
  box-shadow: 0 0 8px #c0b5ef80;
}
:root[data-theme="midnight"] .button {
  border-radius: 6px;
}
:root[data-theme="midnight"] .button.dark,
:root[data-theme="midnight"] .play-button {
  background: linear-gradient(155deg, #d0c7ec, #a899ce);
  box-shadow:
    inset 0 1px 0 #eee7ff7a,
    0 3px 0 #090d205e;
}
:root[data-theme="midnight"] .button.lime {
  background: #292e42;
  color: #d9cef2;
  border: 1px solid #7b7098;
  box-shadow: inset 0 1px 0 #cec2ee12;
}
:root[data-theme="midnight"] .photo-card {
  border-color: #53516c;
}
:root[data-theme="midnight"] .photo-label {
  background: #1c2036d9;
  border: 1px solid #aea2d64d;
  border-radius: 7px;
}
:root[data-theme="midnight"] .photo-caption {
  background: linear-gradient(transparent, #13162bd9);
}
:root[data-theme="midnight"] .clock-card {
  background:
    radial-gradient(circle at 87% 18%, #ede4ff 0 1px, transparent 2px),
    radial-gradient(circle at 73% 32%, #cfbee6 0 1px, transparent 2px),
    radial-gradient(circle at 95% 47%, #cfbee6 0 1px, transparent 2px),
    radial-gradient(ellipse at 95% 0%, #72608966, transparent 62%),
    linear-gradient(140deg, #302e47, #202538);
  border-color: #514b68;
  border-top-color: #8d80a8;
}
:root[data-theme="midnight"] .clock-digits {
  font-family: "Space Grotesk", sans-serif;
  text-shadow: 0 0 28px #d1bfea12;
  font-weight: 400;
}
:root[data-theme="midnight"] .calendar-grid .today {
  border-radius: 6px;
  background: #39334f;
  color: #ded2fd;
  box-shadow:
    inset 0 0 0 1px #a294c8,
    0 0 18px #bcaff218;
}
:root[data-theme="midnight"] .project-title > span,
:root[data-theme="midnight"] .small-tag {
  color: #cfbfef;
  background: #353049;
}
:root[data-theme="midnight"] .checkin-card {
  background:
    repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px),
    linear-gradient(130deg, #232b37, #1d2530);
}
:root[data-theme="midnight"] .stats-row strong {
  color: #d2c6ee;
}
:root[data-theme="midnight"] .collection-card {
  background: linear-gradient(145deg, #222637, #202331);
}
:root[data-theme="midnight"] .music-card {
  background: linear-gradient(130deg, #29283c, #212535);
}
:root[data-theme="midnight"] .friend-card,
:root[data-theme="midnight"] .album-tile,
:root[data-theme="midnight"] .section-content .project-list > button,
:root[data-theme="midnight"] .section-content .collection-list article {
  background: linear-gradient(135deg, #24293a, #1d2230);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 #d1c3ed0d,
    0 8px 20px #06091729;
}
:root[data-theme="midnight"] .friend-card:hover,
:root[data-theme="midnight"] .album-tile:hover,
:root[data-theme="midnight"] .section-content .project-list > button:hover {
  border-color: #81759d;
}
:root[data-theme="midnight"] .friend-card:nth-child(3n + 2) .friend-monogram {
  background: #313744;
  color: #b9cad0;
}
:root[data-theme="midnight"] .friend-card:nth-child(3n) .friend-monogram {
  background: #3b303d;
  color: #d0b3c6;
}
:root[data-theme="midnight"] .reading-cover {
  box-shadow: 0 8px 32px #00000029;
}
:root[data-theme="midnight"] .dialog {
  border-radius: 12px;
  border-color: #77718d;
  box-shadow:
    0 30px 100px #03050bad,
    inset 0 1px 0 #ded8f21a;
}
:root[data-theme="midnight"] .dialog::backdrop {
  background: #070b17a6;
}
:root[data-theme="midnight"] .dialog-head {
  background: linear-gradient(120deg, #292d40, #242938);
}
:root[data-theme="midnight"] .admin-bar {
  border-radius: 12px;
  box-shadow: 0 5px 22px #00000030;
}
:root[data-theme="midnight"] .playlist-track[aria-pressed="true"] {
  background: #353049;
}
:root[data-theme="midnight"] .section-player > button {
  color: #d0c2f4;
}
/* Mist: dawn apricot wash over warm fog. */
:root[data-theme="mist"] body {
  background-image: radial-gradient(ellipse at 50% 0%, #dfa06f1f, transparent 55%);
  background-attachment: fixed;
}
:root[data-theme="mist"] .hero-card h1::before {
  background: #dfa06f;
  opacity: 0.32;
}
:root[data-theme="mist"] .site-header nav a.active {
  color: #bd7c46;
}
:root[data-theme="mist"] .site-header nav a.active::after {
  background: #dfa06f;
}

/* Cream: baked caramel glow, lazy afternoon. */

/* Neon: arcade night, cyan grid and magenta sparks. */

/* Adventure: old map, forest green and gilt edges. */
  background-image:
    linear-gradient(#2d6a4f08 1px, transparent 1px),
    linear-gradient(90deg, #2d6a4f08 1px, transparent 1px),
    radial-gradient(ellipse at 100% 0%, #c9a22714, transparent 50%);
  background-size: 34px 34px, 34px 34px, auto;
  background-attachment: fixed;
}
  border-top-color: #c9a227;
}
  background: #c9a227;
  opacity: 0.45;
}
  color: #245741;
}
  background: #2d6a4f;
}

/* Ocean: tide lines, sea mist. */
  background-image: linear-gradient(175deg, #2a9db80f 0%, transparent 32%);
  background-attachment: fixed;
}
  background: #2a9db8;
  opacity: 0.3;
}
  color: #1e7e99;
}
  background: #2a9db8;
}

/* Autumn: harvest light, warm gold corners. */
  background-image: radial-gradient(ellipse at 12% 100%, #d9a4411f, transparent 52%);
  background-attachment: fixed;
}
  background: #c0563f;
  opacity: 0.32;
}
  color: #a6442e;
}
  background: #c0563f;
}

/* Zenstone: ink on rice paper, one cinnabar seal. */
:root[data-theme="zenstone"] body {
  background-image: linear-gradient(180deg, #2b2b2806, transparent 26%);
  background-attachment: fixed;
}
:root[data-theme="zenstone"] .card {
  border-radius: 4px;
}
:root[data-theme="zenstone"] .hero-card h1::before {
  background: #b54434;
  opacity: 0.55;
  height: 0.12em;
}
:root[data-theme="zenstone"] .site-header nav a.active {
  color: #2b2b28;
}
:root[data-theme="zenstone"] .site-header nav a.active::after {
  background: #b54434;
}

/* Moonphase: quiet night sky, soft moonlight halo. */
  background-image:
    radial-gradient(circle at 78% 12%, #9db4d41c 0.7px, transparent 1px),
    radial-gradient(ellipse at 80% 0%, #9db4d422, transparent 42%),
    radial-gradient(ellipse at 5% 90%, #3a4a6b26, transparent 45%);
  background-size: 34px 34px, auto, auto;
  background-attachment: fixed;
}
  border-color: #333c5c;
  box-shadow: 0 10px 26px #06080f59, inset 0 1px 0 #9db4d40d;
}
  background: #9db4d4;
  opacity: 0.4;
}
  color: #b8c8e4;
}
  background: #9db4d4;
}

/* Yoga-dawn: sunrise warmth over morning practice. */
  background-image: radial-gradient(ellipse at 50% 0%, #d9714b22, transparent 55%);
  background-attachment: fixed;
}
  background: #d9714b;
  opacity: 0.32;
}
  color: #b85a36;
}
  background: #d9714b;
}

/* Lotus: quiet purity, muted scholarly calm (not cartoon). */
  background-image: radial-gradient(ellipse at 50% 0%, #c08a9418, transparent 55%);
  background-attachment: fixed;
}
  background: #c08a94;
  opacity: 0.3;
}
  color: #a96e78;
}
  background: #c08a94;
}

/* Earth: grounded, thick ochre warmth. */
  background-image: radial-gradient(ellipse at 50% 100%, #a87b2f1e, transparent 55%);
  background-attachment: fixed;
}
  box-shadow: 0 10px 26px #a87b2f14;
}
  background: #a87b2f;
  opacity: 0.32;
}
  color: #8f6524;
}
  background: #a87b2f;
}




/* Lemon: bright zest, sparkling clarity. */

/* Lavender: dreamy dusk, soft violet air. */
  background-image: radial-gradient(ellipse at 50% 0%, #8b6cc914, transparent 52%);
  background-attachment: fixed;
}
  box-shadow: 0 10px 26px #8b6cc912;
}
  background: #8b6cc9;
  opacity: 0.32;
}
  color: #6e54a8;
}
  background: #8b6cc9;
}

/* Mocha: warm cafe, roasted comfort. */
  background-image: radial-gradient(ellipse at 50% 0%, #7d573812, transparent 52%);
  background-attachment: fixed;
}
  box-shadow: 0 10px 26px #7d573810;
}
  background: #7d5738;
  opacity: 0.3;
}
  color: #65452c;
}
  background: #7d5738;
}

/* Pine: deep forest night, quiet pines. */
  background-image:
    radial-gradient(circle at 22% 12%, #5ba87a10 0.7px, transparent 1px),
    radial-gradient(ellipse at 85% 90%, #1e3a2a45, transparent 50%);
  background-size: 36px 36px, auto;
  background-attachment: fixed;
}
  border-color: #33493b;
  box-shadow: 0 10px 24px #050d0938;
}
  background: #5ba87a;
  opacity: 0.5;
}
  color: #8fd0a6;
}
  background: #5ba87a;
}

/* Obsidian: pure minimal, nothing extra. */

/* Aurora: night sky ribbons, teal and violet light. */

/* Wine: cellar warmth, vintage glow. */
  background-image: radial-gradient(ellipse at 50% 0%, #c25e7a16, transparent 50%);
  background-attachment: fixed;
}
  border-color: #4a3038;
  box-shadow: 0 10px 24px #0d060840;
}
  background: #c25e7a;
  opacity: 0.5;
}
  color: #db93a8;
}
  background: #c25e7a;
}

/* Theme selection is deliberately the same control in all three themes. */
.admin-bar .admin-theme {
  border-right: 1px solid #ffffff24;
  border-radius: 0;
  padding-right: 14px;
}
.dialog.theme-dialog {
  width: min(960px, calc(100% - 36px));
}
.theme-intro {
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 16px;
}
.theme-category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.theme-category-tabs button {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.theme-category-tabs button.active {
  background: var(--theme-button);
  border-color: var(--theme-button);
  color: var(--theme-on-button);
}
.theme-category-subtitle {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 18px;
}
.theme-follow-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  color: var(--muted);
}
.theme-option-follow .theme-thumbnail {
  background: var(--theme-soft);
}
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 10px 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  text-align: left;
  background: var(--card);
  transition:
    border-color 160ms,
    box-shadow 160ms;
}
.theme-option:hover,
.theme-option[aria-pressed="true"] {
  border-color: var(--theme-focus, #809e44);
  box-shadow: 0 0 0 1px var(--theme-focus, #809e44);
}
.theme-option-name {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 17px 5px 0;
  width: 100%;
}
.theme-option-name strong {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}
.theme-option-name > svg {
  color: var(--theme-accent-ink, #668039);
  flex-shrink: 0;
}
.theme-option-subtitle {
  font-size: 12px;
  line-height: 1.7;
  margin: 9px 5px 5px;
}
.theme-option-detail {
  margin: 0 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
.theme-thumbnail {
  --preview-paper: #f5f5ef;
  --preview-card: #fffefa;
  --preview-ink: #33392a;
  --preview-accent: #cee87b;
  --preview-soft: #eaf0d8;
  --preview-clock: #2e3627;
  --preview-clock-ink: #f4f7eb;
  --preview-line: #d7ddca;
  position: relative;
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: 11px;
  padding: 13px;
  overflow: hidden;
  background: var(--preview-paper);
  color: var(--preview-ink);
  border: 1px solid var(--preview-line);
}
[data-theme-option="blush"] .theme-thumbnail {
  --preview-paper: #fff8f5;
  --preview-card: #fffdfb;
  --preview-ink: #8d5673;
  --preview-accent: #9fe2ce;
  --preview-soft: #a4cdf5;
  --preview-clock: #ffe9a7;
  --preview-clock-ink: #8d5673;
  --preview-line: #b67894;
  border: 2px solid #b67894;
  border-radius: 5px;
  background:
    linear-gradient(#e8c5d744 1px, transparent 1px),
    linear-gradient(90deg, #e8c5d744 1px, transparent 1px), #fff8f5;
  background-size: 14px 14px;
}
[data-theme-option="midnight"] .theme-thumbnail {
  --preview-paper: #151a26;
  --preview-card: #272c3e;
  --preview-ink: #e3dbf0;
  --preview-accent: #c0b5ef;
  --preview-soft: #595471;
  --preview-clock: #37304b;
  --preview-clock-ink: #e3dbf0;
  --preview-line: #3f435a;
  background: radial-gradient(at 100% 0, #413653, transparent 70%), #151a26;
}
[data-theme-option="mist"] .theme-thumbnail {
  --preview-paper: #f7f3ee;
  --preview-card: #ffffff;
  --preview-ink: #4a4640;
  --preview-accent: #dfa06f;
  --preview-soft: #eae2d4;
  --preview-clock: #4e4a44;
  --preview-clock-ink: #f7f1e6;
  --preview-line: #e5dccf;
  background: radial-gradient(at 50% 0, #dfa06f2e, transparent 62%), #f7f3ee;
}
[data-theme-option="adventure"] .theme-thumbnail {
  --preview-paper: #f3efe4;
  --preview-card: #fbf8ef;
  --preview-ink: #2e3b2f;
  --preview-accent: #2d6a4f;
  --preview-soft: #e2dcc4;
  --preview-clock: #2e3b2f;
  --preview-clock-ink: #f3efe4;
  --preview-line: #d8cfb4;
  background:
    linear-gradient(#2d6a4f0d 1px, transparent 1px),
    linear-gradient(90deg, #2d6a4f0d 1px, transparent 1px),
    radial-gradient(at 100% 0, #c9a22726, transparent 55%), #f3efe4;
  background-size: 16px 16px, 16px 16px, auto;
}
[data-theme-option="ocean"] .theme-thumbnail {
  --preview-paper: #f2f7f9;
  --preview-card: #ffffff;
  --preview-ink: #1e3a4c;
  --preview-accent: #2a9db8;
  --preview-soft: #dce9ef;
  --preview-clock: #1e3a4c;
  --preview-clock-ink: #eaf4f8;
  --preview-line: #d4e4ea;
  background: linear-gradient(165deg, #2a9db814 0%, transparent 45%), #f2f7f9;
}
[data-theme-option="autumn"] .theme-thumbnail {
  --preview-paper: #faf5ec;
  --preview-card: #fffdf7;
  --preview-ink: #4a3428;
  --preview-accent: #c0563f;
  --preview-soft: #ece0c6;
  --preview-clock: #4a3428;
  --preview-clock-ink: #faf0dc;
  --preview-line: #e8d9be;
  background: radial-gradient(at 15% 100%, #d9a4412e, transparent 55%), #faf5ec;
}
[data-theme-option="zenstone"] .theme-thumbnail {
  --preview-paper: #f4f2ed;
  --preview-card: #fbfaf6;
  --preview-ink: #2b2b28;
  --preview-accent: #b54434;
  --preview-soft: #e2dfd4;
  --preview-clock: #2b2b28;
  --preview-clock-ink: #f4f2ed;
  --preview-line: #ddd8cc;
  background: linear-gradient(180deg, #2b2b2808, transparent 30%), #f4f2ed;
}
[data-theme-option="moonphase"] .theme-thumbnail {
  --preview-paper: #141824;
  --preview-card: #1c2230;
  --preview-ink: #e4e7f0;
  --preview-accent: #9db4d4;
  --preview-soft: #283048;
  --preview-clock: #0e1220;
  --preview-clock-ink: #e4e7f0;
  --preview-line: #2e3650;
  background: radial-gradient(circle at 80% 12%, #9db4d433 0 26px, transparent 27px), #141824;
}
[data-theme-option="yoga-dawn"] .theme-thumbnail {
  --preview-paper: #fdf6ee;
  --preview-card: #ffffff;
  --preview-ink: #4a3b2e;
  --preview-accent: #d9714b;
  --preview-soft: #f2e4d0;
  --preview-clock: #4e3e30;
  --preview-clock-ink: #fdf1e3;
  --preview-line: #eaddc9;
  background: radial-gradient(at 50% 0, #d9714b30, transparent 60%), #fdf6ee;
}
[data-theme-option="lotus"] .theme-thumbnail {
  --preview-paper: #fdf8f5;
  --preview-card: #ffffff;
  --preview-ink: #4e3a3e;
  --preview-accent: #c08a94;
  --preview-soft: #f2e2e6;
  --preview-clock: #4a363b;
  --preview-clock-ink: #fbeff2;
  --preview-line: #ebdde0;
  background: #fdf8f5;
}
[data-theme-option="earth"] .theme-thumbnail {
  --preview-paper: #f5f0e6;
  --preview-card: #ffffff;
  --preview-ink: #3e3428;
  --preview-accent: #a87b2f;
  --preview-soft: #e6d9bd;
  --preview-clock: #423826;
  --preview-clock-ink: #f7f0df;
  --preview-line: #e2d7bf;
  background: radial-gradient(at 50% 100%, #a87b2f24, transparent 58%), #f5f0e6;
}
[data-theme-option="lavender"] .theme-thumbnail {
  --preview-paper: #f7f4fc;
  --preview-card: #ffffff;
  --preview-ink: #3d3454;
  --preview-accent: #8b6cc9;
  --preview-soft: #e2daf2;
  --preview-clock: #3d3454;
  --preview-clock-ink: #ede8fa;
  --preview-line: #dcd4ec;
  background: radial-gradient(at 15% 100%, #8b6cc92e, transparent 55%), #f7f4fc;
}
[data-theme-option="mocha"] .theme-thumbnail {
  --preview-paper: #f7f3ee;
  --preview-card: #fffdf9;
  --preview-ink: #3e2f24;
  --preview-accent: #7d5738;
  --preview-soft: #e4d6c0;
  --preview-clock: #3e2f24;
  --preview-clock-ink: #f2e8d8;
  --preview-line: #e2d6c6;
  background: radial-gradient(at 15% 100%, #7d57382e, transparent 55%), #f7f3ee;
}
[data-theme-option="pine"] .theme-thumbnail {
  --preview-paper: #14211b;
  --preview-card: #1b2c23;
  --preview-ink: #e4ede6;
  --preview-accent: #5ba87a;
  --preview-soft: #24382c;
  --preview-clock: #1e2f25;
  --preview-clock-ink: #e4ede6;
  --preview-line: #2c4034;
  background: radial-gradient(at 15% 100%, #5ba87a2e, transparent 55%), #14211b;
}
[data-theme-option="wine"] .theme-thumbnail {
  --preview-paper: #1f1418;
  --preview-card: #2a1c22;
  --preview-ink: #f0e4e6;
  --preview-accent: #c25e7a;
  --preview-soft: #38242c;
  --preview-clock: #2c1e24;
  --preview-clock-ink: #f0e4e6;
  --preview-line: #402a32;
  background: radial-gradient(at 15% 100%, #c25e7a2e, transparent 55%), #1f1418;
}

.theme-thumb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 15px;
  letter-spacing: -0.6px;
}
[data-theme-option="blush"] .theme-thumb-header strong {
  font-family: "DM Sans", "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 750;
}
.theme-thumb-header > span {
  letter-spacing: 3px;
}
.theme-thumb-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 63px 43px;
  gap: 5px;
}
.theme-thumb-grid > div {
  min-width: 0;
  border: 1px solid var(--preview-line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--preview-card);
}
[data-theme-option="blush"] .theme-thumb-grid > div {
  border-radius: 4px;
  border-top: 5px solid #9fe2ce;
  box-shadow: 2px 2px 0 #ffaed0;
}
[data-theme-option="blush"] .theme-thumb-grid > .theme-thumb-photo,
[data-theme-option="blush"] .theme-thumb-grid > .theme-thumb-clock {
  border-top-color: #ffaed0;
}
[data-theme-option="blush"] .theme-thumb-star {
  display: none;
}
[data-theme-option="midnight"] .theme-thumb-grid > div {
  border-radius: 3px;
  border-top-color: #6f6682;
  box-shadow: inset 0 -2px 0 #121520;
}
.theme-thumb-hero {
  padding: 8px;
}
.theme-thumb-hero svg {
  display: block;
  color: var(--preview-ink);
}
.theme-thumb-hero span {
  display: block;
  height: 3px;
  margin-top: 5px;
  width: 80%;
  background: var(--preview-accent);
}
.theme-thumb-hero span + span {
  width: 50%;
  opacity: 0.5;
}
.theme-thumb-grid > .theme-thumb-photo {
  position: relative;
  background: linear-gradient(
    155deg,
    var(--preview-soft) 0 47%,
    var(--preview-card) 48% 54%,
    var(--preview-accent) 55%
  );
}
.theme-thumb-photo > i {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 9px;
  right: 9px;
  border-radius: 50%;
  background: var(--preview-card);
}
.theme-thumb-grid > .theme-thumb-clock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--preview-clock);
  color: var(--preview-clock-ink);
  font-size: 16px;
  font-family: Georgia, serif;
  text-align: center;
  letter-spacing: -0.7px;
}
.theme-thumb-clock small {
  font-size: 3px;
  letter-spacing: 0.5px;
  margin-top: 5px;
}
[data-theme-option="blush"] .theme-thumb-clock {
  font-family: "DM Sans", "PingFang SC", sans-serif;
  font-weight: 650;
}
.theme-thumb-notes {
  padding: 7px;
}
.theme-thumb-notes i {
  display: block;
  height: 4px;
  margin: 3px 0;
  background: var(--preview-soft);
  border-radius: 4px;
}
.theme-thumb-notes i:nth-child(2) {
  width: 80%;
}
.theme-thumb-calendar {
  padding: 9px 4px;
  text-align: center;
  font-size: 3px;
  letter-spacing: 1px;
}
.theme-thumb-calendar small {
  display: block;
  font-size: 12px;
  color: var(--preview-ink);
}
.theme-thumb-grid > .theme-thumb-music {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  background: var(--preview-soft);
  font-size: 21px;
}
.theme-thumb-music span {
  width: 40%;
  height: 4px;
  border-radius: 4px;
  background: var(--preview-ink);
  opacity: 0.3;
}
.theme-thumb-star {
  position: absolute;
  right: 17px;
  top: 18px;
  display: none;
  font-size: 24px;
  color: var(--preview-accent);
}
[data-theme-option="blush"] .theme-thumb-star,
[data-theme-option="midnight"] .theme-thumb-star,
[data-theme-option="mist"] .theme-thumb-star,
[data-theme-option="adventure"] .theme-thumb-star,
[data-theme-option="ocean"] .theme-thumb-star,
[data-theme-option="autumn"] .theme-thumb-star,
[data-theme-option="zenstone"] .theme-thumb-star,
[data-theme-option="moonphase"] .theme-thumb-star,
[data-theme-option="yoga-dawn"] .theme-thumb-star,
[data-theme-option="lotus"] .theme-thumb-star,
[data-theme-option="earth"] .theme-thumb-star,
[data-theme-option="lavender"] .theme-thumb-star,
[data-theme-option="mocha"] .theme-thumb-star,
[data-theme-option="pine"] .theme-thumb-star,
[data-theme-option="wine"] .theme-thumb-star {
  display: block;
}
.theme-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 20px;
}
.theme-dialog-footer > p {
  max-width: 500px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
@media (max-width: 760px) {
  .theme-options {
    gap: 10px;
  }
  .theme-thumbnail {
    aspect-ratio: auto;
    min-height: 156px;
    padding: 10px;
  }
  .theme-option-subtitle {
    font-size: 11px;
  }
  .theme-thumb-grid {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 48px 37px;
  }
  .theme-thumb-grid > .theme-thumb-photo,
  .theme-thumb-grid > .theme-thumb-calendar {
    display: none;
  }
  .theme-dialog-footer {
    gap: 14px;
  }
}
@media (max-width: 620px) {
  .admin-bar-main {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 8px;
  }
  .admin-bar-main > span,
  .admin-bar-main > div {
    justify-content: center;
  }
  .admin-bar .admin-theme {
    padding-right: 10px;
  }
  .dialog.theme-dialog {
    width: calc(100% - 20px);
  }
  .theme-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .theme-option {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 13px;
    padding: 10px;
    align-items: start;
  }
  .theme-thumbnail {
    grid-row: 1 / 4;
    height: 122px;
    min-height: 0;
    padding: 8px;
  }
  .theme-thumb-header {
    margin-bottom: 7px;
    font-size: 12px;
  }
  .theme-thumb-grid {
    grid-template-rows: 43px 28px;
    gap: 4px;
  }
  .theme-thumb-hero {
    padding: 5px;
  }
  .theme-thumb-hero svg {
    width: 17px;
    height: 17px;
  }
  .theme-thumb-hero span {
    margin-top: 3px;
  }
  .theme-thumb-notes {
    padding: 3px 5px;
  }
  .theme-thumb-star {
    top: 10px;
    right: 10px;
    font-size: 20px;
  }
  .theme-option-name {
    padding: 7px 0 0;
    gap: 6px;
  }
  .theme-option-name strong {
    font-size: 14px;
  }
  .theme-option-name > svg {
    width: 14px;
  }
  .theme-option-subtitle,
  .theme-option-detail {
    margin: 0;
    font-size: 10px;
  }
  .theme-dialog-footer {
    flex-direction: column;
    align-items: stretch;
    margin-top: 18px;
    padding-top: 16px;
  }
  .theme-dialog-footer .button {
    width: 100%;
  }
  :root[data-theme="blush"] .card {
    border-radius: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-option {
    transition: none;
  }
}

.theme-option[data-theme-option="blush"] .theme-thumb-star {
  display: none;
}
@media (max-width: 380px) {
  .theme-option-name {
    gap: 5px;
  }
  .theme-option-name strong {
    font-size: 14px;
    white-space: nowrap;
  }
  .theme-option-name > svg:first-child {
    display: none;
  }
}

/* 主题切换 0.6s 全站色彩过渡：useSiteTheme 在换主题时临时挂载此类，650ms 后摘掉。
   只过渡颜色类属性（paint 层，不触发布局），不污染组件原有 hover/动画节奏。 */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease !important;
}

/* 观照主题：标题用宋体，禅意文人气 */
:root[data-theme="guanzhao"] h1,
:root[data-theme="guanzhao"] h2,
:root[data-theme="guanzhao"] h3,
:root[data-theme="guanzhao-night"] h1,
:root[data-theme="guanzhao-night"] h2,
:root[data-theme="guanzhao-night"] h3 {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing: 0.02em;
}
/* Cartoon pink: illustrated cards using the application's shared geometry. */
:root[data-theme="blush"] {
  --ink: #5b2946;
  --muted: #8b4d70;
  --paper: #fff6ee;
  --card: #fffcfa;
  --line: #e7a9c9;
  /* Shared accents (quotes, status dots, selections) belong to this theme. */
  --lime: #ed86b0;
  --retro-stroke: #b85b89;
  --retro-shadow: #ed9fc4;
  --retro-pink: #ffafd0;
  --retro-mint: #9fe2ce;
  --retro-blue: #a4cdf5;
  --retro-yellow: #ffe17e;
  --window-bar-height: 44px;
  --cartoon-font: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --theme-muted: #8b4d70;
  --theme-prose: #75405d;
  --theme-surface: #fffdfb;
  --theme-soft: #fbe1ed;
  --theme-field: #fffefd;
  --theme-image-bg: #f4e7ec;
  --theme-line: #dea0c0;
  --theme-input-line: #c57fa6;
  --theme-accent-line: #b85b89;
  --theme-focus: #963c6b;
  --theme-accent-ink: #a14676;
  --theme-on-accent: #62344d;
  --theme-button: #ffafd0;
  --theme-button-hover: #ffc7df;
  --theme-on-button: #5b2946;
  --theme-chrome: #fffaf5;
  --theme-chrome-line: #b85b89;
  --theme-on-chrome: #5b2946;
  --theme-clock: #fff5d3;
  --theme-clock-ink: #7e3c65;
  --theme-clock-accent: #b85b89;
  --theme-clock-line: #dec194;
  --theme-danger: #aa355e;
  --theme-number: #eaa3c8;
  --theme-scrollbar: #c980a9;
  --theme-track: #f1d0e5;
}
:root[data-theme="blush"] body {
  background:
    linear-gradient(#c58caa1f 1px, transparent 1px),
    linear-gradient(90deg, #c58caa1f 1px, transparent 1px),
    linear-gradient(165deg, #cef1e7 0%, #ffedf5 42%, #fff2c8 100%);
  background-size:
    38px 38px,
    38px 38px,
    100% 100%;
  background-attachment: fixed;
}
:root[data-theme="blush"] .site-shell {
  --gap: 16px;
}
:root[data-theme="blush"] .site-header {
  border-bottom: 2px solid var(--retro-stroke);
  margin-bottom: 14px;
}
:root[data-theme="blush"] .brand > span {
  font-family: var(--cartoon-font);
  font-weight: 750;
  letter-spacing: -1px;
  color: #aa3e79;
  text-shadow: 2px 2px 0 #fff;
}
:root[data-theme="blush"] .brand i {
  color: #e878ae;
}
:root[data-theme="blush"] .cat {
  image-rendering: auto;
}
:root[data-theme="blush"] .site-header nav {
  gap: 22px;
}
:root[data-theme="blush"] .site-header nav a {
  padding: 7px 11px;
  border: 1.5px solid transparent;
  font-size: 14px;
}
:root[data-theme="blush"] .site-header nav a.active {
  border-color: var(--retro-stroke);
  background: var(--retro-pink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 #e68fb9;
}
:root[data-theme="blush"] .site-header nav a.active::after {
  display: none;
}
:root[data-theme="blush"] .card {
  --window-pad: 18px;
  padding: var(--window-pad);
  border: 2px solid var(--retro-stroke);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 4px 5px 0 var(--retro-shadow);
}
:root[data-theme="blush"] .hero-top,
:root[data-theme="blush"] .card > .section-top,
:root[data-theme="blush"] .clock-top,
:root[data-theme="blush"] .calendar-top,
:root[data-theme="blush"] .checkin-card > .eyebrow,
:root[data-theme="blush"] .music-heading {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: calc(100% + var(--window-pad) * 2);
  height: var(--window-bar-height);
  min-height: var(--window-bar-height);
  margin: calc(-1 * var(--window-pad)) calc(-1 * var(--window-pad)) 12px;
  padding: 0 14px;
  background: var(--retro-mint);
  border-bottom: 2px solid var(--retro-stroke);
  flex-shrink: 0;
}
:root[data-theme="blush"] .hero-top::after {
  content: "";
  width: 43px;
  height: 12px;
  flex-shrink: 0;
  background:
    radial-gradient(
      circle at 6px 6px,
      #ffe17e 0 4px,
      #b85b89 4px 5.5px,
      transparent 6px
    ),
    radial-gradient(
      circle at 21px 6px,
      #ceeb92 0 4px,
      #b85b89 4px 5.5px,
      transparent 6px
    ),
    radial-gradient(
      circle at 36px 6px,
      #ffafd0 0 4px,
      #b85b89 4px 5.5px,
      transparent 6px
    );
}
:root[data-theme="blush"] .eyebrow {
  font-family: var(--cartoon-font);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: 1px;
}
:root[data-theme="blush"] .hero-card {
  background:
    linear-gradient(#d6b7cf0f 1px, transparent 1px),
    linear-gradient(90deg, #d6b7cf0f 1px, transparent 1px), #fffdfa;
  background-size: 22px 22px;
}
:root[data-theme="blush"] .hero-card h1 {
  font-size: clamp(40px, 3.8vw, 64px);
  font-weight: 750;
  letter-spacing: -1.5px;
  line-height: 1.16;
  margin-top: 2px;
  max-width: 76%;
}
:root[data-theme="blush"] .hero-card h1::before {
  background: #ffe9ab;
  height: 0.24em;
  top: 0.76em;
  transform: rotate(-2deg);
  border: 1px solid #f7d991;
}
:root[data-theme="blush"] .hero-copy {
  font-size: 14px;
  max-width: 78%;
}
:root[data-theme="blush"] .hero-celestial:not(.has-avatar) .hero-orbit {
  width: 28%;
  height: auto;
  aspect-ratio: 180 / 190;
  top: 21%;
  right: 1.5%;
  transform: rotate(4deg);
  background: url("/assets/themes/desktop-cat.svg") center / contain no-repeat;
}
:root[data-theme="blush"] .hero-celestial .hero-orbit span,
:root[data-theme="blush"] .hero-celestial .hero-orbit i,
:root[data-theme="blush"] .hero-side-note {
  display: none;
}
:root[data-theme="blush"] .hero-celestial.has-avatar {
  top: 20%;
}
:root[data-theme="blush"] .hero-celestial.has-avatar::before {
  content: "";
  position: absolute;
  right: -7%;
  bottom: -4%;
  width: 47%;
  aspect-ratio: 180 / 190;
  background: url("/assets/themes/desktop-cat.svg") center / contain no-repeat;
  transform: rotate(-9deg);
  z-index: 3;
}
:root[data-theme="blush"] .hero-avatar {
  border-radius: 14px;
  border: 3px solid #fff8ed;
  box-shadow:
    0 0 0 2px var(--retro-stroke),
    5px 6px 0 var(--retro-pink);
  transform: rotate(6deg);
}
:root[data-theme="blush"] .hero-avatar img,
:root[data-theme="blush"] .hero-avatar .image-fallback {
  border-radius: 0;
}
:root[data-theme="blush"] .hero-celestial.has-avatar::after {
  content: "♥";
  color: #b77797;
  background: #ffe17e;
  border: 2px solid var(--retro-stroke);
  border-radius: 6px;
  position: absolute;
  right: 9%;
  top: 5%;
  padding: 3px 6px;
  font-size: 18px;
  transform: rotate(12deg);
  z-index: 3;
}
:root[data-theme="blush"] .hero-bottom-note {
  font-family: var(--cartoon-font);
  font-size: 9px;
  letter-spacing: 0.5px;
}
:root[data-theme="blush"] .button,
:root[data-theme="blush"] .play-button {
  border: 2px solid var(--retro-stroke);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--retro-shadow);
  font-weight: 650;
}
:root[data-theme="blush"] .button.dark,
:root[data-theme="blush"] .play-button {
  background: var(--retro-pink);
  color: var(--ink);
}
:root[data-theme="blush"] .button.lime {
  background: var(--retro-yellow);
  color: var(--ink);
}
:root[data-theme="blush"] .button:hover {
  filter: none;
  background: #fae0ed;
}
:root[data-theme="blush"] .button:active,
:root[data-theme="blush"] .play-button:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--retro-shadow);
}
:root[data-theme="blush"] .hero-button {
  min-height: 34px;
  padding: 6px 16px;
}
:root[data-theme="blush"] .header-contact > .button:before {
  display: none;
}
:root[data-theme="blush"] .photo-card {
  padding: var(--window-bar-height) 0 0;
}
:root[data-theme="blush"] .photo-open {
  overflow: hidden;
  border-radius: 0 0 9px 9px;
  isolation: isolate;
}
:root[data-theme="blush"] .photo-open:hover {
  filter: none;
}
:root[data-theme="blush"] .photo-card::before {
  content: "PHOTO.JPG";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--window-bar-height);
  padding: 0 14px;
  background: var(--retro-blue);
  border-bottom: 2px solid var(--retro-stroke);
  font: 650 11px var(--cartoon-font);
  letter-spacing: 1px;
}
:root[data-theme="blush"] .photo-label {
  display: none;
}
:root[data-theme="blush"] .photo-caption {
  background: linear-gradient(transparent, #3f293eab);
}
:root[data-theme="blush"] .photo-caption button {
  border: 2px solid var(--retro-stroke);
  border-radius: 6px;
  background: #fff6e2;
}
:root[data-theme="blush"] .photo-edit {
  top: calc(var(--window-bar-height) + 7px);
}
:root[data-theme="blush"] .clock-card {
  background: #fff5d3;
}
:root[data-theme="blush"] .clock-top {
  background: #ffb9d6;
}
:root[data-theme="blush"] .clock-digits {
  font-family: var(--cartoon-font);
  font-size: clamp(64px, 6.4vw, 100px);
  letter-spacing: -3px;
  font-weight: 650;
  text-shadow: none;
}
:root[data-theme="blush"] .clock-top .eyebrow {
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.4px;
}
:root[data-theme="blush"] .clock-bottom {
  border-top: 1px dashed var(--retro-stroke);
}
:root[data-theme="blush"] .project-card > .section-top {
  background: #d3ec99;
}
:root[data-theme="blush"] .project-title {
  margin-top: 0;
}
:root[data-theme="blush"] .project-title h2 {
  font-family: var(--cartoon-font);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.5px;
}
:root[data-theme="blush"] .project-title > span,
:root[data-theme="blush"] .small-tag {
  border: 1px solid #c69bad;
  border-radius: 3px;
  background: #fff0bd;
  color: var(--ink);
}
:root[data-theme="blush"] .project-preview {
  border: 2px solid #cba7b9;
  border-radius: 4px;
}
:root[data-theme="blush"] .project-summary {
  font-size: 13px;
  margin-bottom: 9px;
}
:root[data-theme="blush"] .article-card > .section-top {
  background: var(--retro-pink);
}
:root[data-theme="blush"] .home-articles {
  margin-top: 0;
}
:root[data-theme="blush"] .section-top h2 {
  font-size: 15px;
  letter-spacing: 0;
}
:root[data-theme="blush"] .home-article img {
  border: 1px solid #c69bb0;
  border-radius: 4px;
}
:root[data-theme="blush"] .home-article time {
  font-family: var(--cartoon-font);
}
:root[data-theme="blush"] .calendar-top {
  background: var(--retro-blue);
  margin-bottom: 8px;
}
:root[data-theme="blush"] .calendar-top > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
:root[data-theme="blush"] .calendar-top h2 {
  font-size: 18px;
  line-height: 1.15;
}
:root[data-theme="blush"] .calendar-top .eyebrow {
  font-size: 9px;
  line-height: 1.2;
}
:root[data-theme="blush"] .calendar-grid .today {
  border-radius: 4px;
  background: #ffafd0;
  border: 1px solid #b85b89;
  color: var(--ink);
  box-shadow: 2px 2px 0 #edd0dc;
}
:root[data-theme="blush"] .calendar-footer {
  border-top: 1px dashed #d9b9c9;
  padding-top: 8px;
}
:root[data-theme="blush"] .checkin-card {
  background: #fff5d4;
}
:root[data-theme="blush"] .checkin-card > .eyebrow {
  justify-content: space-between;
  background: #fff0bd;
  color: #9a5e7a;
  font-size: 10px;
}
:root[data-theme="blush"] .checkin-card > .eyebrow::after {
  content: "";
  width: 42px;
  height: 17px;
  background: url("/assets/themes/paw-trail.svg") center / contain no-repeat;
  opacity: 0.7;
}
:root[data-theme="blush"] .checkin-main {
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin: 10px 0 14px;
}
:root[data-theme="blush"] .checkin-main > div {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 62px;
  padding-left: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:root[data-theme="blush"] .checkin-main h2 {
  font-size: 22px;
  line-height: 1.3;
  white-space: normal;
}
:root[data-theme="blush"] .checkin-greeting {
  margin-top: 6px;
}
:root[data-theme="blush"] .checkin-greeting .cat {
  position: absolute;
  left: 0;
  top: 50%;
  width: 60px;
  height: 60px;
  padding: 7px;
  background: #fffaf6;
  border: 2px solid #d98ab0;
  border-radius: 18px;
  box-shadow: 3px 3px 0 #efb4cb;
  transform: translateY(-50%) rotate(-7deg);
}
:root[data-theme="blush"] .checkin-greeting > span {
  font-size: 12px;
  line-height: 1.6;
  max-width: none;
}
:root[data-theme="blush"] .checkin-main .button {
  flex-shrink: 0;
  min-width: 106px;
  padding: 10px 14px;
  margin-top: 0;
  align-self: center;
}
:root[data-theme="blush"] .stats-row {
  flex-shrink: 0;
  gap: 10px;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
:root[data-theme="blush"] .stats-row > div {
  min-width: 0;
  padding: 9px 12px;
  gap: 4px;
  border: 1px solid #e0a4bf;
  border-radius: 9px;
  background: #ffe2ed;
}
:root[data-theme="blush"] .stats-row > div:nth-child(2) {
  background: #e8f2ce;
  border-color: #c6d998;
}
:root[data-theme="blush"] .stats-row > div:nth-child(3) {
  background: #e1edff;
  border-color: #aecbed;
}
:root[data-theme="blush"] .stats-row strong {
  font-family: var(--cartoon-font);
  font-size: 27px;
  font-weight: 700;
  color: #a7477c;
}
:root[data-theme="blush"] .collection-card > .section-top {
  background: #ceb7f6;
}
:root[data-theme="blush"] .collection-previews {
  margin-top: 0;
}
:root[data-theme="blush"] .collection-previews button {
  border: 2px solid #b991a8;
  border-radius: 4px;
  padding: 3px;
  background: #fff5d3;
  box-shadow: 2px 2px 0 #edd0de;
}
:root[data-theme="blush"] .collection-caption {
  font-size: 11px;
}
:root[data-theme="blush"] .music-card {
  container: music / inline-size;
}
:root[data-theme="blush"] .music-heading {
  background: #a5e8d0;
  /* Round the header fill without clipping the volume popover. */
  border-radius: 10px 10px 0 0;
  margin-bottom: 10px;
  gap: 10px;
}
:root[data-theme="blush"] .music-heading > div:not(.music-actions) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
:root[data-theme="blush"] .music-heading > svg {
  width: 20px;
}
:root[data-theme="blush"] .music-heading strong {
  font-size: 12px;
}
:root[data-theme="blush"] .music-heading .eyebrow {
  font-size: 9px;
}
@container music (max-width: 360px) {
  :root[data-theme="blush"] .music-heading {
    gap: 6px;
    padding-inline: 8px;
  }
  :root[data-theme="blush"] .music-heading > svg {
    width: 18px;
  }
  :root[data-theme="blush"] .music-heading > div:not(.music-actions) {
    gap: 6px;
  }
  :root[data-theme="blush"] .music-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  :root[data-theme="blush"] .music-heading h2 {
    font-size: 12px;
  }
  :root[data-theme="blush"] .music-heading > .music-actions {
    gap: 2px;
  }
  :root[data-theme="blush"] .music-actions .edit-trigger,
  :root[data-theme="blush"] .music-actions .playback-mode-compact,
  :root[data-theme="blush"] .music-actions .player-options summary,
  :root[data-theme="blush"] .music-actions .playlist-open {
    width: 26px;
    padding-inline: 4px;
    justify-content: center;
  }
  :root[data-theme="blush"] .music-actions .edit-trigger > span {
    display: none;
  }
}
:root[data-theme="blush"] .album-cover {
  border: 2px solid #c49eb3;
  border-radius: 4px;
}
:root[data-theme="blush"] .play-button {
  background: #ffafd0;
}
:root[data-theme="blush"] .social-row {
  border-top: 1px dashed #d093b5;
}
:root[data-theme="blush"] .progress {
  border: 1px solid #c9a2b8;
  border-radius: 1px;
  background: linear-gradient(
    to right,
    #dc9cba var(--progress),
    #f5e5ee var(--progress)
  );
}
:root[data-theme="blush"] .site-footer {
  border-top: 2px solid var(--retro-stroke);
  margin-top: 15px;
}
:root[data-theme="blush"] .friend-card,
:root[data-theme="blush"] .album-tile,
:root[data-theme="blush"] .section-content .project-list > button,
:root[data-theme="blush"] .section-content .collection-list article {
  background: #fffdfb;
  border: 2px solid var(--retro-stroke);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--retro-shadow);
}
:root[data-theme="blush"]
  .section-content
  .collection-list
  article:not(:has(> img, > .image-fallback)) {
  border-top-color: var(--retro-stroke);
}
:root[data-theme="blush"] .friend-avatar {
  border: 2px solid #bc8ba4;
  border-radius: 7px;
  background: #ffe0ed;
}
:root[data-theme="blush"] .friend-card:nth-child(3n + 2) .friend-monogram {
  background: #e8e0f4;
  color: #7e628e;
}
:root[data-theme="blush"] .friend-card:nth-child(3n) .friend-monogram {
  background: #cfece5;
  color: #577f76;
}
:root[data-theme="blush"] .section-heading {
  border-bottom: 2px solid #c799b0;
}
:root[data-theme="blush"] .section-number {
  font-family: var(--cartoon-font);
  text-shadow: 2px 2px 0 #fff;
}
:root[data-theme="blush"] .reading-cover {
  border: 2px solid #ba8ba5;
  border-radius: 8px;
  box-shadow: 5px 5px 0 #eeacd0;
}
:root[data-theme="blush"] .reading-detail {
  background: #fffdf9;
}
:root[data-theme="blush"] .filter-tabs button[aria-pressed="true"] {
  background: #ffb5d3;
  border: 1px solid #b85b89;
  box-shadow: 2px 2px 0 #eac0d3;
  border-radius: 4px;
}
:root[data-theme="blush"] .photo-stage {
  border: 2px solid #bd8ca7;
  border-radius: 8px;
  background: #fffaf4;
}
:root[data-theme="blush"] .photo-stage > button,
:root[data-theme="blush"] .album-expand {
  border: 2px solid #b85b89;
  border-radius: 5px;
  background: #fff4dd;
  box-shadow: 2px 2px 0 #e9bed2;
}
:root[data-theme="blush"] .photo-thumb[aria-current="true"] {
  outline-color: #b85b89;
}
:root[data-theme="blush"] .album-photo-number {
  background: #5b2946ce;
}
:root[data-theme="blush"] .dialog {
  border: 2px solid var(--retro-stroke);
  border-radius: 12px;
  background: #fffcfa;
  box-shadow:
    8px 8px 0 #dca7c199,
    0 25px 70px #65425b26;
}
:root[data-theme="blush"] .dialog-head {
  background: #ffbad6;
  border-bottom: 2px solid var(--retro-stroke);
}
:root[data-theme="blush"] .dialog-head h2 {
  font-size: 23px;
}
:root[data-theme="blush"] .dialog::backdrop {
  background: #66567138;
  backdrop-filter: blur(3px);
}
:root[data-theme="blush"] .dialog-head .icon-button {
  border: 2px solid #b85b89;
  border-radius: 5px;
  background: #ffe17e;
  box-shadow: 2px 2px 0 #e4aac5;
}
:root[data-theme="blush"] .editor-fields input,
:root[data-theme="blush"] .editor-fields textarea,
:root[data-theme="blush"] .editor-fields select,
:root[data-theme="blush"] .contact-form input,
:root[data-theme="blush"] .contact-form textarea {
  border-radius: 4px;
  box-shadow: inset 2px 2px 0 #f3e1eb;
}
:root[data-theme="blush"] .edit-trigger,
:root[data-theme="blush"] .upload-button {
  background: #ffe0ed;
  color: var(--ink);
  border: 1px solid #b96c95;
  border-radius: 4px;
}
:root[data-theme="blush"] .admin-bar {
  border: 2px solid var(--retro-stroke);
  border-radius: 5px;
  background: #fff7db;
  box-shadow: 4px 4px 0 #e69abc;
}
:root[data-theme="blush"] .admin-bar .admin-save {
  background: #ffafd0;
  border: 1px solid #b85b89;
  border-radius: 3px;
  box-shadow: 2px 2px 0 #e38cb6;
}
:root[data-theme="blush"] .admin-bar .admin-theme {
  border-color: #d3aec1;
}
:root[data-theme="blush"] .player-popover {
  border: 2px solid var(--retro-stroke);
  border-radius: 8px;
  box-shadow: 4px 4px 0 #e5b9ce;
}
:root[data-theme="blush"] .toast {
  border: 2px solid var(--retro-stroke);
  border-radius: 6px;
  background: #fff2bd;
  box-shadow: 3px 3px 0 #e5b9ce;
}
:root[data-theme="blush"] .playlist-track[aria-pressed="true"] {
  border: 1px solid #c190a9;
  border-radius: 5px;
  background: #ffdfec;
}
:root[data-theme="blush"] .playlist-current-cover {
  border: 2px solid #ba86a0;
  border-radius: 7px;
  box-shadow: 5px 5px 0 #eb96bf;
}
@media (min-width: 1101px) {
  :root[data-theme="blush"] .site-shell:not(.section-shell) {
    min-height: 0;
  }
  :root[data-theme="blush"] .site-shell:not(.section-shell) > .site-footer {
    height: 24px;
    margin-top: 8px;
  }
  :root[data-theme="blush"] .bento-grid {
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 1.1fr) minmax(0, 0.85fr);
  }
  :root[data-theme="blush"] .bento-row {
    grid-template-rows: minmax(0, 1fr);
  }
  :root[data-theme="blush"] .hero-card {
    --hero-body-inset: clamp(16px, 1.6vw, 24px);
  }
  :root[data-theme="blush"] .hero-card h1 {
    font-size: clamp(32px, min(3.8vw, 20cqh), 64px);
    max-width: 64%;
    margin-left: var(--hero-body-inset);
  }
  :root[data-theme="blush"]
    .hero-card
    textarea.inline-edit[aria-label="编辑首页标题"] {
    font-size: clamp(28px, min(3.4vw, 17cqh), 54px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px;
    max-width: 64%;
    margin: 0 0 4px var(--hero-body-inset);
  }
  :root[data-theme="blush"] .hero-copy .inline-edit {
    margin: 1px 0;
  }
  :root[data-theme="blush"] .hero-copy {
    max-width: 64%;
    margin-left: var(--hero-body-inset);
  }
  :root[data-theme="blush"] .hero-button {
    margin-left: var(--hero-body-inset);
  }
  :root[data-theme="blush"] .hero-celestial.has-avatar {
    top: calc(var(--window-bar-height) + 12px);
    right: 9%;
    width: 32%;
    max-width: min(220px, 80cqh);
  }
  :root[data-theme="blush"] .hero-avatar {
    inset: 10%;
    width: 80%;
    height: 80%;
  }
  :root[data-theme="blush"] .hero-celestial.has-avatar::before {
    width: 37%;
    right: -3%;
    bottom: -2%;
  }
  :root[data-theme="blush"] .hero-celestial.has-avatar::after {
    top: 2%;
    right: 1%;
    font-size: 16px;
  }
  :root[data-theme="blush"] .hero-bottom-note {
    left: calc(var(--window-pad) + var(--hero-body-inset) + 130px);
    right: auto;
    bottom: 23px;
  }
  :root[data-theme="blush"] .checkin-card > .eyebrow {
    margin-bottom: 8px;
  }
  :root[data-theme="blush"] .checkin-main {
    margin: 6px 0 10px;
  }
  :root[data-theme="blush"] .checkin-main > div {
    min-height: 54px;
    padding-left: 66px;
  }
  :root[data-theme="blush"] .checkin-greeting .cat {
    width: 54px;
    height: 54px;
  }
  :root[data-theme="blush"] .stats-row > div {
    padding: 6px 8px;
    gap: 3px;
  }
  :root[data-theme="blush"] .stats-row strong {
    font-size: 24px;
  }
}
/* Fit the same nine cards in shorter desktop windows, including browser chrome. */
@media (min-width: 1101px) and (max-height: 850px) {
  :root[data-theme="blush"] .site-shell:not(.section-shell) {
    --gap: 12px;
    --window-bar-height: 36px;
  }
  :root[data-theme="blush"] .site-shell:not(.section-shell) .site-header {
    height: 56px;
    margin-bottom: 10px;
  }
  :root[data-theme="blush"] .card {
    --window-pad: 12px;
  }
  :root[data-theme="blush"] .hero-top,
  :root[data-theme="blush"] .card > .section-top,
  :root[data-theme="blush"] .clock-top,
  :root[data-theme="blush"] .calendar-top,
  :root[data-theme="blush"] .checkin-card > .eyebrow,
  :root[data-theme="blush"] .music-heading {
    margin-bottom: 8px;
  }
  :root[data-theme="blush"] .hero-card h1 {
    margin: 0 0 4px var(--hero-body-inset);
    line-height: 1.1;
  }
  :root[data-theme="blush"] .hero-copy {
    font-size: 12px;
    line-height: 1.45;
  }
  :root[data-theme="blush"] .hero-button {
    min-height: 28px;
    padding: 4px 12px;
    font-size: 11px;
  }
  :root[data-theme="blush"] .hero-bottom-note {
    left: calc(var(--window-pad) + var(--hero-body-inset) + 112px);
    bottom: 18px;
    font-size: 8px;
  }
  :root[data-theme="blush"] .clock-digits {
    font-size: clamp(60px, min(6.4vw, 10svh), 85px);
    margin-bottom: 7px;
  }
  :root[data-theme="blush"] .clock-bottom {
    padding-top: 8px;
    margin-top: 8px;
  }
  :root[data-theme="blush"] .project-title h2 {
    font-size: 28px;
  }
  :root[data-theme="blush"] .project-summary {
    font-size: 12px;
    margin-bottom: 5px;
  }
  :root[data-theme="blush"] .home-article {
    gap: 12px;
  }
  :root[data-theme="blush"] .calendar-grid {
    margin-top: 0;
  }
  :root[data-theme="blush"] .calendar-grid span {
    height: min(24px, 100%);
    font-size: 11px;
  }
  :root[data-theme="blush"] .calendar-footer {
    margin-top: 5px;
    padding-top: 5px;
    min-height: 18px;
    font-size: 10px;
  }
  :root[data-theme="blush"] .checkin-main {
    margin: 2px 0 6px;
    gap: 10px;
  }
  :root[data-theme="blush"] .checkin-main > div {
    min-height: 46px;
    padding-left: 58px;
  }
  :root[data-theme="blush"] .checkin-main h2 {
    font-size: 19px;
  }
  :root[data-theme="blush"] .checkin-greeting {
    margin-top: 4px;
  }
  :root[data-theme="blush"] .checkin-greeting .cat {
    width: 46px;
    height: 46px;
    padding: 4px;
    border-radius: 13px;
  }
  :root[data-theme="blush"] .checkin-greeting > span {
    font-size: 10px;
  }
  :root[data-theme="blush"] .checkin-main .button {
    min-height: 34px;
    min-width: 94px;
    padding: 7px 10px;
    font-size: 11px;
  }
  :root[data-theme="blush"] .stats-row > div {
    padding: 4px 8px;
    gap: 2px;
  }
  :root[data-theme="blush"] .stats-row strong {
    font-size: 22px;
  }
  :root[data-theme="blush"] .stats-row span {
    font-size: 10px;
  }
  :root[data-theme="blush"] .music-player {
    margin: 4px 0 6px;
    gap: 12px;
  }
  :root[data-theme="blush"] .album-cover {
    width: 58px;
    height: 58px;
  }
  :root[data-theme="blush"] .music-info > strong {
    font-size: 12px;
  }
  :root[data-theme="blush"] .music-info > small {
    font-size: 10px;
    margin-top: 3px;
  }
  :root[data-theme="blush"] .progress {
    margin-top: 7px;
  }
  :root[data-theme="blush"] .social-row {
    padding-top: 6px;
  }
}
@media (min-width: 1400px) {
  :root[data-theme="blush"] .hero-celestial.has-avatar {
    right: 14%;
  }
}
@media (min-width: 1400px) and (max-height: 850px) {
  :root[data-theme="blush"] .hero-card h1 {
    font-size: clamp(32px, min(3.8vw, 22cqh), 64px);
  }
  :root[data-theme="blush"] .hero-copy {
    font-size: 13px;
  }
}
@media (max-width: 1100px) {
  :root[data-theme="blush"] .site-header nav {
    gap: 8px;
  }
  :root[data-theme="blush"] .hero-card h1 {
    font-size: 48px;
  }
  :root[data-theme="blush"] .clock-digits {
    font-size: clamp(64px, 9vw, 96px);
  }
  :root[data-theme="blush"] .checkin-card {
    height: auto;
    min-height: 255px;
  }
  :root[data-theme="blush"] .checkin-main {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 10px 0;
  }
  :root[data-theme="blush"] .checkin-main > div {
    flex: none;
    min-height: 54px;
    padding-left: 64px;
  }
  :root[data-theme="blush"] .checkin-main h2 {
    font-size: 19px;
  }
  :root[data-theme="blush"] .checkin-greeting .cat {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    padding: 5px;
  }
  :root[data-theme="blush"] .checkin-greeting > span {
    font-size: 11px;
  }
  :root[data-theme="blush"] .checkin-main .button {
    align-self: stretch;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
  }
  :root[data-theme="blush"] .stats-row {
    gap: 7px;
  }
  :root[data-theme="blush"] .stats-row > div {
    padding: 8px;
  }
  :root[data-theme="blush"] .stats-row strong {
    font-size: 23px;
  }
  :root[data-theme="blush"] .stats-row span {
    font-size: 10px;
  }
}
@media (max-width: 620px) {
  :root[data-theme="blush"] .card {
    --window-pad: 16px;
    border-radius: 9px;
  }
  :root[data-theme="blush"] .site-header {
    margin-bottom: 8px;
  }
  :root[data-theme="blush"] .site-header nav {
    gap: 2px;
    padding: 0;
  }
  :root[data-theme="blush"] .site-header nav a {
    padding: 6px 4px;
    font-size: 13px;
    flex: 1;
    white-space: nowrap;
    text-align: center;
  }
  :root[data-theme="blush"] .hero-card h1 {
    font-size: clamp(34px, 10.8vw, 42px);
    max-width: 100%;
  }
  :root[data-theme="blush"] .hero-copy {
    font-size: 12px;
    max-width: 100%;
  }
  :root[data-theme="blush"] .hero-celestial.has-avatar {
    top: auto;
    bottom: 38px;
    right: 23px;
    width: 110px;
  }
  :root[data-theme="blush"] .clock-card {
    padding-bottom: 18px;
  }
  :root[data-theme="blush"] .clock-digits {
    font-size: clamp(64px, 21vw, 92px);
  }
  :root[data-theme="blush"] .hero-bottom-note {
    font-size: 10px;
    right: 16px;
  }
  :root[data-theme="blush"] .dialog {
    border-radius: 10px;
  }
  :root[data-theme="blush"] .checkin-main h2 {
    font-size: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="blush"] .button:active,
  :root[data-theme="blush"] .play-button:active {
    translate: none;
  }
}