/* 样式-style.css · 契约 C6（设计 token 与样式分区）
 * 分区顺序：token → 基础/排版 → 布局/导航 → 按钮/卡片/空状态 → 弹层/toast
 *          → 动效 → 响应式 → 无障碍 → 打印 → A4/A5 预留空分区
 * 约束：token 与《开发计划》9.1 逐行一致；本文件不写 A4/A5 视图业务样式（仅预留分区）。
 */

/* ============ 9.1 配色 token（双节主题）· 逐行照抄，禁止改动 ============ */
:root{
  --c-midnight:#101A33;   /* 夜空底 */
  --c-moon:#F6E7B4;       /* 月光金 */
  --c-moon-glow:#FFD97D;  /* 月晕 */
  --c-lantern:#C0392B;    /* 灯笼红 */
  --c-gold:#D4A24C;       /* 描边金 */
  --c-paper:#FBF6EC;      /* 卡片米白 */
  --c-ink:#2B2B2B;        /* 正文 */
  --c-ink-2:#6B6355;      /* 次要文字 */
  --c-line:#E6DCC8;       /* 分隔线 */
  --c-ok:#3E8E5A; --c-warn:#D9822B; --c-err:#C0392B;
}

/* ===== 视觉 v3 追加 token（夜色底 / 毛玻璃 / 描金 / 插画资源）· 追加区，不动上方 9.1 ===== */
:root{
  /* 夜色底四段（全视图统一底色） */
  --v3-night-1:#091124;
  --v3-night-2:#13233F;
  --v3-night-3:#0B1628;
  --v3-night-4:#060C18;
  /* 毛玻璃：半透明纸感渐变（不做 background-color 打底，保玻璃通透） */
  --v3-glass:linear-gradient(158deg, rgba(255,252,245,.90) 0%, rgba(246,238,222,.80) 44%, rgba(231,220,197,.74) 100%);
  --v3-glass-soft:linear-gradient(158deg, rgba(255,252,245,.74) 0%, rgba(238,228,208,.58) 100%);
  --v3-glass-solid:linear-gradient(158deg, rgba(255,253,248,.96) 0%, rgba(243,234,216,.92) 100%);
  --v3-glass-dark:linear-gradient(160deg, rgba(246,231,180,.18) 0%, rgba(212,162,76,.08) 52%, rgba(246,231,180,.05) 100%);
  --v3-sheen:linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 62%);
  --v3-sheen-dark:linear-gradient(180deg, rgba(255,241,205,.30), rgba(255,241,205,.09) 34%, rgba(255,241,205,.02) 60%, rgba(255,241,205,0));
  --v3-blur:26px;
  --v3-blur-strong:30px;
  --v3-sat:saturate(175%);
  --v3-hi:inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(120,90,40,.12);
  --v3-shadow:0 20px 48px rgba(3,8,20,.55), 0 2px 10px rgba(3,8,20,.35);
  --v3-gold-line:rgba(212,162,76,.58);
  --v3-gold-line-strong:rgba(230,186,104,.82);
  --v3-moon-1:rgba(246,231,180,.95);
  --v3-moon-2:rgba(246,231,180,.72);
  --v3-moon-3:rgba(246,231,180,.50);
  --v3-serif:"STKaiti","KaiTi","Kaiti SC","Songti SC","SimSun","Noto Serif SC",serif;
  /* 中国风纹样（内联 SVG data-uri；仅转义 %3C %3E %23） */
  /* 祥云纹（260×130 平铺，金色 .13 —— 只做隐约纸纹，不抢内容） */
  --svg-cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='130' viewBox='0 0 260 130'%3E%3Cg fill='none' stroke='%23D4A24C' stroke-opacity='.13' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 108c-14 0-25-10-25-22s11-22 25-22c5-16 20-27 38-27 21 0 38 14 42 33 4-2 9-4 15-4 17 0 29 11 29 26s-12 26-29 26z'/%3E%3Cpath d='M46 86c0-7 6-13 13-13M88 60c7 0 13 6 13 13'/%3E%3Cpath d='M150 44c8-7 20-6 26 1 6 7 4 17-4 21-7 4-15 0-16-7-1-5 3-9 8-9 4 0 7 3 7 7'/%3E%3Cpath d='M196 112c-9 0-16-6-16-14s7-14 16-14c3-9 12-15 22-15 11 0 21 7 24 18 2-1 5-2 8-2 10 0 18 7 18 16 0 9-8 16-18 16z'/%3E%3Cpath d='M210 98c0-5 4-9 9-9M240 86c5 0 9 4 9 9'/%3E%3C/g%3E%3C/svg%3E");
  /* 回纹带（32×10 平铺，金色 .55） */
  --svg-fret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cg fill='none' stroke='%23D4A24C' stroke-opacity='.55' stroke-width='1.15' stroke-linecap='square'%3E%3Cpath d='M2 9V1h8v5H5V4h2.5'/%3E%3Cpath d='M18 9V1h8v5h-5V4h2.5'/%3E%3C/g%3E%3C/svg%3E");
  /* 如意云角（72×72，卡片四角，金色 .50） */
  --svg-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23D4A24C' stroke-opacity='.5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 36C6 19 19 6 36 6c8 0 15 3 21 9'/%3E%3Cpath d='M6 20c0-7 6-13 14-13'/%3E%3Cpath d='M36 6c7 0 13 6 13 13'/%3E%3Cpath d='M21 16c5-4 12-2 15 3 3 6 0 12-5 14-4 2-9 0-10-4-1-3 1-6 4-6'/%3E%3Cpath d='M6 28c4-2 8-2 11 0'/%3E%3Ccircle cx='46' cy='22' r='1.6' fill='%23D4A24C' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  /* 月云线描（176×96，空状态插画，赭金 .50） */
  --svg-moonline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='96' viewBox='0 0 176 96'%3E%3Cg fill='none' stroke='%23B98A34' stroke-opacity='.5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M126 14a26 26 0 1 0 24 42 21 21 0 0 1-24-42z'/%3E%3Cpath d='M34 78c0-11 9-20 20-20 3-12 14-21 27-21 13 0 25 8 28 20 3-1 6-2 10-2 13 0 23 10 23 22 0 11-9 20-20 20z'/%3E%3Cpath d='M58 62c0-6 5-11 11-11M84 49c6 0 11 5 11 11'/%3E%3C/g%3E%3Cg fill='%23B98A34' fill-opacity='.5'%3E%3Ccircle cx='120' cy='28' r='2'/%3E%3Ccircle cx='137' cy='45' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  /* 导航四图标（24×24 描金线描） */
  --ico-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='none' stroke='%23E2B75E' stroke-opacity='.92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg fill='%23E2B75E' fill-opacity='.85'%3E%3Ccircle cx='16.8' cy='4.8' r='1.1'/%3E%3Ccircle cx='20' cy='8.6' r='.7'/%3E%3Ccircle cx='19' cy='2.9' r='.6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-members:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23E2B75E' stroke-opacity='.92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.6 20.6v-1.7a3.6 3.6 0 0 0-3.6-3.6H6.6A3.6 3.6 0 0 0 3 18.9v1.7'/%3E%3Ccircle cx='9.3' cy='7.4' r='3.6'/%3E%3Cpath d='M21 20.6v-1.7a3.6 3.6 0 0 0-2.7-3.5'/%3E%3Cpath d='M15.4 4a3.6 3.6 0 0 1 0 6.9'/%3E%3C/g%3E%3C/svg%3E");
  --ico-draw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23E2B75E' stroke-opacity='.92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.3 8.7h9.4'/%3E%3Cpath d='M8 8.7l1 10.4a1.8 1.8 0 0 0 1.8 1.6h2.4a1.8 1.8 0 0 0 1.8-1.6l1-10.4'/%3E%3Cpath d='M10.2 8.7V5.3M12 8.7V3.4M13.8 8.7V6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-memoir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23E2B75E' stroke-opacity='.92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.2A2.4 2.4 0 0 1 7 16.8h12.6'/%3E%3Cpath d='M7 3.2h12.6v17.6H7a2.4 2.4 0 0 1-2.4-2.4V5.6A2.4 2.4 0 0 1 7 3.2z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================ 基础重置 ============================ */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  overflow-x:hidden;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--v3-moon-1);
  background-color:var(--v3-night-1);
  /* 月夜宣纸：月晕 + 金辉 + 朱红氤氲 + 青蓝夜雾（全视图统一底色，body.is-home 不再另起一套） */
  background-image:
    radial-gradient(ellipse 90% 42% at 50% -10%, rgba(255,217,125,.24), rgba(255,217,125,0) 62%),
    radial-gradient(ellipse 52% 36% at 92% 6%, rgba(212,162,76,.18), rgba(212,162,76,0) 60%),
    radial-gradient(ellipse 64% 42% at 3% 97%, rgba(192,57,43,.18), rgba(192,57,43,0) 62%),
    radial-gradient(ellipse 58% 40% at 90% 90%, rgba(47,92,138,.24), rgba(47,92,138,0) 60%),
    linear-gradient(180deg, var(--v3-night-1) 0%, var(--v3-night-2) 38%, var(--v3-night-3) 72%, var(--v3-night-4) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* 首页：月色更盛一档（与内容页同一基底，仅加强月晕） */
body.is-home{
  color:var(--v3-moon-1);
  background-image:
    radial-gradient(ellipse 96% 48% at 50% -12%, rgba(255,217,125,.32), rgba(255,217,125,0) 64%),
    radial-gradient(ellipse 52% 36% at 92% 6%, rgba(212,162,76,.20), rgba(212,162,76,0) 60%),
    radial-gradient(ellipse 64% 42% at 3% 97%, rgba(192,57,43,.18), rgba(192,57,43,0) 62%),
    radial-gradient(ellipse 58% 40% at 90% 90%, rgba(47,92,138,.24), rgba(47,92,138,0) 60%),
    linear-gradient(180deg, var(--v3-night-1) 0%, var(--v3-night-2) 38%, var(--v3-night-3) 72%, var(--v3-night-4) 100%);
  background-attachment:fixed;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

button{ font-family:inherit; }

/* ==================== 9.2 字体与层级 ==================== */
/* 视图标题：书法衬线 + 月色 + 描金短饰线（中国风识别点） */
.page-title{
  margin:0 0 18px;
  font-size:32px;
  line-height:1.3;
  font-weight:700;
  font-family:var(--v3-serif);
  letter-spacing:.05em;
  color:var(--c-moon);
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 26px rgba(255,217,125,.20);
}
.page-title::after{
  content:"";
  display:block;
  width:76px;
  height:3px;
  margin-top:10px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--c-gold) 0%, rgba(212,162,76,.18) 70%, rgba(212,162,76,0) 100%);
}

/* 区块标题：同为书法衬线，宣纸卡内回落墨色 */
.section-title{
  font-family:var(--v3-serif);
  letter-spacing:.04em;
}

/* 话题卡正文：关键，长辈在手机/平板上要一眼看清 */
.topic-card-text{
  margin:0;
  font-size:28px;
  line-height:1.5;
  font-weight:600;
}

/* 故事正文：长文阅读舒适 */
.story-text{
  margin:0;
  font-size:18px;
  line-height:1.8;
}

.muted{ color:var(--c-ink-2); }

/* ==================== 布局 ==================== */
.app-shell{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.app-header{
  position:relative;
  z-index:2;
  padding:24px 16px 10px;
  text-align:center;
}

.app-brand{
  margin:0;
  font-size:26px;
  line-height:1.3;
  font-weight:700;
  font-family:var(--v3-serif);
  letter-spacing:.14em;
  color:var(--c-moon);
  text-shadow:0 0 26px rgba(255,217,125,.32), 0 2px 8px rgba(0,0,0,.55);
}

.app-main{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  width:100%;
  max-width:1024px;
  margin:0 auto;
  padding:16px 16px 104px;
}

/* 视图容器：仅激活视图可见 + 切换动效 */
.view{ display:none; }
.view.is-active{
  display:block;
  animation:view-in 220ms ease-out both;
}

/* 桌面双栏工具类（≥1024 生效，供回忆录等使用） */
.grid-2col{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

/* ==================== 导航（夜色毛玻璃 + 描金四图标） ==================== */
.app-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  gap:4px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(11,18,36,.62), rgba(7,12,26,.86));
  border-top:1px solid var(--v3-gold-line);
  box-shadow:0 -16px 40px rgba(2,5,14,.55), inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter:var(--v3-sat) blur(22px);
  backdrop-filter:var(--v3-sat) blur(22px);
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  flex:1 1 0;
  min-height:46px;
  min-width:44px;
  padding:7px 6px;
  font-size:14px;
  line-height:1.2;
  color:var(--v3-moon-2);
  background:transparent;
  border:none;
  border-radius:14px;
  cursor:pointer;
  transition:background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.nav-item::before{
  content:"";
  width:24px;
  height:24px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.82;
  transition:opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.3,1.15);
}
.nav-item[data-nav="home"]::before{ background-image:var(--ico-home); }
.nav-item[data-nav="members"]::before{ background-image:var(--ico-members); }
.nav-item[data-nav="draw"]::before{ background-image:var(--ico-draw); }
.nav-item[data-nav="memoir"]::before{ background-image:var(--ico-memoir); }

.nav-item.is-active{
  color:var(--c-moon-glow);
  font-weight:600;
  background:linear-gradient(180deg, rgba(246,231,180,.16), rgba(212,162,76,.08));
  box-shadow:inset 0 0 0 1px rgba(230,186,104,.35);
}
.nav-item.is-active::before{
  opacity:1;
  transform:translate3d(0,-1px,0) scale3d(1.06,1.06,1);
}

/* ==================== 按钮（16px，最小点击区 44×44；描金 + 渐变 + 内高光） ==================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  min-width:44px;
  padding:10px 20px;
  font-size:16px;
  line-height:1.2;
  color:var(--c-ink);
  background-color:var(--c-paper);
  background-image:linear-gradient(180deg, #FFFDF8 0%, #F4EAD8 100%);
  border:1px solid var(--v3-gold-line);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 8px 20px rgba(3,8,20,.30);
  cursor:pointer;
  transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:active{ transform:translateY(1px); }
.btn:focus-visible{
  outline:3px solid var(--c-moon-glow);
  outline-offset:2px;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn-primary{
  color:#FFF7E8;
  background-color:var(--c-lantern);
  background-image:linear-gradient(180deg, #D9503A 0%, #AD2A1B 100%);
  border-color:rgba(255,214,150,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px rgba(155,32,22,.45);
  text-shadow:0 1px 2px rgba(80,10,5,.45);
}
.btn-ok{
  color:#F2FFF6;
  background-color:var(--c-ok);
  background-image:linear-gradient(180deg, #47A167 0%, #2F7748 100%);
  border-color:rgba(190,255,215,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px rgba(24,80,46,.4);
}
.btn-danger{
  color:#FFF5F3;
  background-color:var(--c-err);
  background-image:linear-gradient(180deg, #CE4634 0%, #992418 100%);
  border-color:rgba(255,190,175,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px rgba(120,25,15,.42);
}
/* 幽灵按钮：夜色底用月色字 + 金边；进入浅色容器后回落墨色 */
.btn-ghost{
  color:var(--c-moon);
  background-color:transparent;
  background-image:none;
  border:1px solid var(--v3-gold-line);
  box-shadow:none;
}
.card .btn-ghost,
.empty-state .btn-ghost,
.dialog-card .btn-ghost{
  color:var(--c-ink-2);
  border-color:var(--c-line);
}

/* ==================== 卡片（宣纸毛玻璃：半透明渐变 + 强模糊 + 内高光 + 描金边） ==================== */
.card{
  position:relative;
  padding:22px;
  color:var(--c-ink);
  background-color:transparent;
  /* 第一层为顶部高光（纸面反光），第二层为半透明宣纸；两层皆在内容之下，不遮挡文字 */
  background-image:var(--v3-sheen), var(--v3-glass);
  border:1.5px solid var(--v3-gold-line);
  border-radius:20px;
  box-shadow:var(--v3-hi), var(--v3-shadow);
  -webkit-backdrop-filter:var(--v3-sat) blur(var(--v3-blur));
  backdrop-filter:var(--v3-sat) blur(var(--v3-blur));
}
/* 顶部回纹带（中国风识别点） */
.card::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:6px;
  height:10px;
  background-image:var(--svg-fret);
  background-repeat:repeat-x;
  background-size:32px 10px;
  opacity:.75;
  pointer-events:none;
}

.topic-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  /* 四角如意云 + 顶部高光 + 宣纸玻璃（多层背景均在内容之下） */
  background-color:transparent;
  background-image:var(--svg-corner), var(--svg-corner), var(--v3-sheen), var(--v3-glass-solid);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:top 12px left 12px, bottom 12px right 12px, top, center;
  background-size:58px 58px, 58px 58px, cover, cover;
  border-width:2px;
  border-color:var(--v3-gold-line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 26px 60px rgba(3,8,20,.62);
  -webkit-backdrop-filter:var(--v3-sat) blur(var(--v3-blur-strong));
  backdrop-filter:var(--v3-sat) blur(var(--v3-blur-strong));
}

/* ==================== 空状态（引导文案 + 行动按钮 + 月云线描插画） ==================== */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:40px 24px 44px;
  text-align:center;
  color:var(--c-ink-2);
  background-color:transparent;
  background-image:var(--v3-sheen), var(--v3-glass-soft);
  border:1.5px dashed var(--v3-gold-line);
  border-radius:20px;
  box-shadow:var(--v3-hi);
  -webkit-backdrop-filter:var(--v3-sat) blur(var(--v3-blur));
  backdrop-filter:var(--v3-sat) blur(var(--v3-blur));
}
.empty-state::before{
  content:"";
  display:block;
  width:176px;
  height:96px;
  margin-bottom:-4px;
  background-image:var(--svg-moonline);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.9;
}

.empty-title{
  margin:0;
  font-size:20px;
  font-weight:600;
  color:var(--c-ink);
}

.empty-text{
  margin:0;
  max-width:42ch;
  font-size:16px;
  line-height:1.7;
}

/* ==================== 弹层（confirm：夜色遮罩 + 宣纸毛玻璃卡） ==================== */
.dialog-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(6,10,22,.62);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  backdrop-filter:blur(6px) saturate(120%);
}

.dialog-card{
  position:relative;
  width:100%;
  max-width:420px;
  padding:26px 24px 22px;
  color:var(--c-ink);
  background-color:transparent;
  background-image:var(--v3-sheen), var(--v3-glass-solid);
  border:2px solid var(--v3-gold-line-strong);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter:var(--v3-sat) blur(var(--v3-blur-strong));
  backdrop-filter:var(--v3-sat) blur(var(--v3-blur-strong));
}
.dialog-card::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:7px;
  height:10px;
  background-image:var(--svg-fret);
  background-repeat:repeat-x;
  background-size:32px 10px;
  opacity:.7;
  pointer-events:none;
}

.dialog-title{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.4;
}

.dialog-message{
  margin:0 0 20px;
  font-size:16px;
  line-height:1.6;
  color:var(--c-ink-2);
  white-space:pre-wrap;
  word-break:break-word;
}

.dialog-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
}

/* ==================== toast（success / error / info / warn） ==================== */
.dialog-toast-wrap{
  position:fixed;
  left:50%;
  bottom:88px;
  z-index:1100;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:max-content;
  max-width:min(92vw, 420px);
  transform:translateX(-50%);
  pointer-events:none;
}

.toast{
  padding:12px 18px;
  font-size:15px;
  line-height:1.5;
  color:#FFF9EC;
  word-break:break-word;
  background:rgba(26,21,14,.88);
  border:1px solid rgba(230,186,104,.45);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:var(--v3-sat) blur(12px);
  backdrop-filter:var(--v3-sat) blur(12px);
  opacity:0;
  transform:translateY(12px);
  transition:opacity 220ms ease, transform 220ms ease;
  pointer-events:auto;
  cursor:pointer;
}

.toast.toast-in{ opacity:1; transform:translateY(0); }
.toast.toast-out{ opacity:0; transform:translateY(12px); }

.toast-success{ background:var(--c-ok); }
.toast-error{ background:var(--c-err); }
.toast-info{ background:var(--c-midnight); }
.toast-warn{ background:var(--c-warn); }

/* ==================== 首页双节氛围（容器 + 基础类名；动效由 A5 填充） ==================== */
.festive-decor{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity 600ms ease;
}
body.is-home .festive-decor{ opacity:1; }

/* 首页双节氛围：随签筒/月亮等元素一并交给「月夜长卷」插画承载，
 * 故固定装饰层内的孤立月亮与灯笼不再显示（避免与画卷中的月亮/灯笼重复、避免压住正文）。
 * 保留 DOM（home.js 仍挂载 .festive-moon/.festive-lantern），仅隐藏外观。 */
.festive-decor .festive-moon,
.festive-decor .festive-lantern{
  display:none;
}

/* ==================== 9.3 动效 keyframes ==================== */
/* 月亮升起（首页入场）：translateY(40px)→0，opacity 0→1，1200ms ease-out */
@keyframes moon-rise{
  from{ opacity:0; transform:translateY(40px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 灯笼摇曳：rotate(-3deg)↔(3deg)，4000ms ease-in-out 无限循环 */
@keyframes lantern-sway{
  0%, 100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}

/* 抽签筒摇动：rotate(-8deg)↔(8deg) × 3 次，共 400ms */
@keyframes tumbler-shake{
  0%{ transform:rotate(0deg); }
  16.7%{ transform:rotate(-8deg); }
  33.3%{ transform:rotate(8deg); }
  50%{ transform:rotate(-8deg); }
  66.7%{ transform:rotate(8deg); }
  83.3%{ transform:rotate(-8deg); }
  100%{ transform:rotate(0deg); }
}

/* 题面切换：只让「由谁讲」与题面文字轻移淡入，卡片外壳与按钮完全不动
 * （抽题时不再整卡重建/翻转，避免「点一下整块刷新」的观感） */
@keyframes card-text-swap{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 视图切换：opacity + translateY(8px)，220ms */
@keyframes view-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 动效工具类（供 A4/A5 引用） */
.anim-moon-rise{ animation:moon-rise 1200ms ease-out both; }
.anim-lantern{ animation:lantern-sway 4000ms ease-in-out infinite; }
.anim-tumbler{ animation:tumbler-shake 400ms ease-in-out; }
.view-draw-card.is-swap .view-draw-card-who{
  animation:card-text-swap 220ms cubic-bezier(.2,.8,.2,1);
}
.view-draw-card.is-swap .topic-card-text{
  animation:card-text-swap 260ms cubic-bezier(.2,.8,.2,1);
}

/* ==================== 9.4 三端差异化布局 ==================== */
/* 说明：真正的三端结构差异规则位于本文件末尾「9.6 三端差异化（终局覆盖）」——
 *       因为 A4/A5 视图分区在同文件中位于此处之后，同优先级下后者胜出，
 *       故本分区只保留与视图无关的通用基线，视图级差异一律放末尾。 */
@media (min-width:1024px){
  .grid-2col{ grid-template-columns:repeat(2, 1fr); }
}

/* ==================== 无障碍：尊重减少动效偏好 ==================== */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==================== 9.5 打印样式（导出 PDF）· 逐行 ==================== */
@media print{
  /* 隐藏导航/按钮/动效装饰 */
  .no-print{ display:none !important; }
  /* 回忆录专属：加封面 + 分页 */
  .print-cover{ display:block; page-break-after:always; }
  .story-card{ page-break-inside:avoid; }      /* 故事不跨页断开 */
  .photo-wall{ page-break-inside:avoid; }
  body{ background:#fff; color:#000; }
  @page{ size:A4; margin:18mm 16mm; }
}

/* 打印封面占位（非打印态不显示；9.5 要求打印时 display:block） */
.print-cover{ display:none; }

/* ===== A4 视图样式分区（仅 A4 可写）===== */
/* 说明：仅承载 A4 视图专属类（.view-members-* / .view-draw-*），
 *       复用 A3 基础类（.card/.btn/.empty-state/.topic-card/.anim-* 等），不重写基础类。
 *       类名前缀归属：家人设置=view-members-；抽题盒子=view-draw-。 */

/* ---------- 家人设置视图（F1） ---------- */
.view-members-toolbar{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-bottom:12px;
}

.view-members-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:20px;
}

.view-members-card{
  display:flex;
  align-items:center;
  gap:16px;
}

.view-members-avatar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  font-size:22px;
  font-weight:700;
  line-height:1;
  color:#fff;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(16,26,51,.16);
}

.view-members-info{
  flex:1 1 auto;
  min-width:0;
}

.view-members-relation{
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  word-break:break-word;
}

.view-members-name{
  font-size:15px;
  color:var(--c-ink-2);
  word-break:break-word;
}

.view-members-actions{
  flex:0 0 auto;
  display:flex;
  gap:8px;
}

.view-members-form{
  margin-top:4px;
}

.view-members-form-title{
  margin:0 0 16px;
  font-size:20px;
  font-weight:600;
}

.view-members-field{
  margin-bottom:16px;
}

.view-members-label{
  display:block;
  margin-bottom:8px;
  font-size:15px;
  color:var(--c-ink-2);
}

.view-members-input{
  display:block;
  width:100%;
  min-height:44px;
  padding:10px 14px;
  font-family:inherit;
  font-size:16px;
  color:var(--c-ink);
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:12px;
}
.view-members-input:focus-visible{
  outline:3px solid var(--c-moon-glow);
  outline-offset:2px;
}

.view-members-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.view-members-swatch{
  width:44px;
  height:44px;
  padding:0;
  border:2px solid transparent;
  border-radius:50%;
  cursor:pointer;
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.view-members-swatch.is-selected{
  border-color:var(--c-gold);
  box-shadow:0 0 0 3px rgba(212,162,76,.35);
}
.view-members-swatch:focus-visible{
  outline:3px solid var(--c-moon-glow);
  outline-offset:2px;
}

.view-members-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- 抽题盒子视图（F2/F3/F4） ---------- */
.view-draw-speaker{
  margin:0 0 16px;
  font-size:17px;
  font-weight:600;
  color:var(--c-ink-2);
  word-break:break-word;
}

/* 话题卡内「由「X」讲这一题」：描金药丸标明归属（此时顶栏已推进为「下一次轮到」） */
.view-draw-card-who{
  align-self:flex-start;
  margin:0 0 14px;
  padding:5px 14px;
  font-size:14px;
  line-height:1.5;
  color:#7A5A2E;
  background:rgba(212,162,76,.16);
  border:1px solid rgba(212,162,76,.52);
  border-radius:999px;
}

/* 抽签筒舞台（视觉主体，纯装饰：月晕 + 玉兔 + 签筒 + 金桂） */
.view-draw-stage{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:342px;
  padding:24px 0 40px;   /* 底部留出「抽题提示」药丸的位置 */
}
/* 月晕光轮（衬在签筒之后） */
.view-draw-stage::before{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:-8px;
  width:min(460px, 118%);
  aspect-ratio:1 / 1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%, rgba(255,217,125,.26) 0%, rgba(255,217,125,.10) 42%, rgba(255,217,125,0) 68%);
  pointer-events:none;
}
/* 玉兔望月（左下点缀；透明背景插画，直接叠在夜色上） */
.view-draw-stage::after{
  content:"";
  position:absolute;
  z-index:1;
  left:-14px;
  bottom:-14px;
  width:172px;
  height:172px;
  background-image:url('/family-memory-box/static/素材-assets/玉兔-rabbit-moon.svg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.95;
  pointer-events:none;
}

/* 抽题提示（道具下方一行小字：说明这一抽在做什么） */
.view-draw-prop-hint{
  position:absolute;
  left:50%;
  bottom:-6px;
  z-index:3;
  width:max-content;
  max-width:min(92%, 420px);
  margin:0;
  padding:5px 16px;
  font-size:14px;
  line-height:1.5;
  text-align:center;
  color:var(--v3-moon-1);
  background-color:rgba(246,231,180,.08);
  border:1px solid var(--v3-gold-line);
  border-radius:999px;
  transform:translateX(-50%);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.view-draw-prop-hint-stage::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  vertical-align:middle;
  background-color:var(--fest-a, #D4A24C);
  border-radius:50%;
}

/* 抽签筒：插画级 SVG（竹节 + 描金回纹 + 朱红签头 + 红绸流苏 + 地面金辉）
 * 节日专属道具由 样式-主题-theme.css 的 [data-festival] 规则覆盖 background-image */
.view-draw-tumbler{
  position:relative;
  z-index:2;
  width:236px;
  height:292px;
  background-image:url('/family-memory-box/static/素材-assets/抽签筒-tumbler.svg');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  border:none;
  border-radius:0;
  box-shadow:none;
  transform-origin:50% 92%;
}
/* 地面金辉（主题层已绑定 tumbler-glow 动画：抽签时随之呼吸） */
.view-draw-tumbler::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:224px;
  height:46px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,217,125,.42) 0%, rgba(255,217,125,.12) 46%, rgba(255,217,125,0) 72%);
  pointer-events:none;
}
/* 金桂一枝（右侧点缀，随签筒轻晃） */
.view-draw-tumbler::after{
  content:"";
  position:absolute;
  right:-64px;
  bottom:-8px;
  width:158px;
  height:158px;
  background-image:url('/family-memory-box/static/素材-assets/金桂-osmanthus.svg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.92;
  pointer-events:none;
}

/* 可转盘面层（仅国庆转盘用）：与外层同尺寸、同缩放规则（center bottom / contain），
 * 因此与底座图逐像素对齐；旋转轴取盘面圆心在容器中的位置（按 220×260 画布 + contain 缩放推出，
 * 三端容器宽高比一致，统一 50% 53%）。其余节日该层无背景，等价于零成本的空元素。 */
.view-draw-prop-disc{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  transform-origin:50% 53%;
  pointer-events:none;
}

.view-draw-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

/* 分类签（夜色玻璃小签；选中态转描金） */
.view-draw-chip{
  width:auto;
  padding:8px 18px;
  font-size:15px;
  border-radius:999px;
  color:var(--v3-moon-1);
  background-color:rgba(246,231,180,.07);
  background-image:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid var(--v3-gold-line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.view-draw-chip.is-selected{
  color:#3A1A0C;
  font-weight:600;
  background-color:var(--c-moon);
  background-image:linear-gradient(180deg, #FFEFC0 0%, #E8C275 100%);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 8px 20px rgba(255,217,125,.26), inset 0 1px 0 rgba(255,255,255,.7);
}
.view-draw-chip-add{
  border-style:dashed;
}

.view-draw-action{
  width:100%;
  padding:14px 24px;
  font-size:18px;
}

.view-draw-cardslot{
  margin-top:20px;
}

.view-draw-card{
  transform-origin:50% 80%;
}

/* 未抽题引导卡（宽屏双栏时占住右栏，避免版面失衡） */
.view-draw-hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:260px;
  text-align:center;
}
.view-draw-hint-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  margin:0;
  font-family:var(--v3-serif);
  font-size:28px;
  color:#6B4A14;
  background-image:linear-gradient(180deg, #FFEFC0 0%, #E2B75E 100%);
  border:2px solid rgba(255,255,255,.6);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(120,85,20,.28), inset 0 1px 0 rgba(255,255,255,.8);
}
.view-draw-hint-title{
  margin:4px 0 0;
  font-family:var(--v3-serif);
  font-size:20px;
  font-weight:600;
  color:var(--c-ink);
}
.view-draw-hint-text{
  margin:0;
  max-width:26ch;
  font-size:15px;
  line-height:1.7;
  color:var(--c-ink-2);
}

.view-draw-card-actions{
  display:flex;
  gap:12px;
}

/* 追问链折叠条（F15 呈现端） */
.view-draw-followups{
  margin-top:4px;
}

.view-draw-followups-toggle{
  min-height:44px;
  padding:8px 14px;
  font-family:inherit;
  font-size:15px;
  color:var(--c-ink-2);
  background:transparent;
  border:1px dashed var(--c-line);
  border-radius:12px;
  cursor:pointer;
}
.view-draw-followups-toggle:focus-visible{
  outline:3px solid var(--c-moon-glow);
  outline-offset:2px;
}

.view-draw-followups-list{
  display:none;
  margin-top:8px;
}

.view-draw-followups-list.is-open{
  display:block;
}

.view-draw-followup{
  position:relative;
  margin:0 0 6px;
  padding-left:14px;
  font-size:16px;
  line-height:1.6;
  color:var(--c-ink-2);
  word-break:break-word;
}
.view-draw-followup::before{
  content:"·";
  position:absolute;
  left:0;
  color:var(--c-gold);
  font-weight:700;
}

/* F4 自定义话题面板 */
.view-draw-custom{
  margin-top:20px;
}

.view-draw-custom-title{
  margin:0 0 16px;
  font-size:20px;
  font-weight:600;
}

.view-draw-custom-form{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.view-draw-select,
.view-draw-input{
  min-height:44px;
  padding:10px 14px;
  font-family:inherit;
  font-size:16px;
  color:var(--c-ink);
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:12px;
}
.view-draw-select{ flex:0 0 auto; min-width:140px; }
.view-draw-input{ flex:1 1 200px; min-width:0; }
.view-draw-select:focus-visible,
.view-draw-input:focus-visible{
  outline:3px solid var(--c-moon-glow);
  outline-offset:2px;
}

.view-draw-custom-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.view-draw-custom-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:12px;
}

.view-draw-custom-item-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.view-draw-custom-item-text{
  font-size:16px;
  line-height:1.5;
  word-break:break-word;
}

.view-draw-tag{
  align-self:flex-start;
  padding:2px 10px;
  font-size:13px;
  color:var(--c-lantern);
  background:rgba(192,57,43,.08);
  border-radius:999px;
}

/* ---------- A4 移动端适配（<640px；补充 A3 全宽按钮的例外规则） ---------- */
@media (max-width:639px){
  .view-members-card{ flex-wrap:wrap; }
  .view-members-actions{ flex:1 1 100%; }
  .view-members-actions .btn{ flex:1 1 0; width:auto; }
  .view-members-form-actions{ flex-direction:column; }

  .view-draw-chip{ width:auto; }
  .view-draw-select,
  .view-draw-input{ flex:1 1 100%; }
  .view-draw-custom-item{ flex-wrap:wrap; }
  .view-draw-custom-item .btn{ flex:0 0 auto; width:auto; }
  .view-draw-card-actions{ flex-direction:column; }
}

/* ---------- A4：讲故事视图（view-story） ---------- */

/* 上下文回显 */
.view-story-context{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 20px;
  padding:18px 20px;
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:16px;
}
.view-story-context-label{
  font-size:13px;
  color:var(--c-ink-2);
}
.view-story-topic{
  margin:0;
  font-size:22px;
  font-weight:600;
  line-height:1.4;
  color:var(--c-ink);
}
.view-story-speaker{
  font-size:15px;
  color:var(--c-ink-2);
}

/* 语音工具条 */
.view-story-voice{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.view-story-voice-btn{
  width:auto;
}
.view-story-voice-hint{
  font-size:13px;
  color:var(--c-ink-2);
}

/* 表单 */
.view-story-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.view-story-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.view-story-label{
  font-size:15px;
  font-weight:600;
  color:var(--c-ink-2);
}
.view-story-hint{
  font-size:13px;
  line-height:1.6;
  color:var(--c-ink-2);
}

/* 自建输入外观（textarea / 追问 / 日期 / 说明） */
.view-story-textarea,
.view-story-followup-input,
.view-story-date,
.view-story-caption{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  font-family:inherit;
  font-size:16px;
  line-height:1.6;
  color:var(--c-ink);
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:12px;
  resize:vertical;
  -webkit-appearance:none;
  appearance:none;
}
.view-story-textarea:focus,
.view-story-followup-input:focus,
.view-story-date:focus,
.view-story-caption:focus{
  outline:none;
  border-color:var(--c-gold);
  box-shadow:0 0 0 3px rgba(212,162,76,.25);
}
.view-story-textarea{
  min-height:200px;
  font-size:18px;
  line-height:1.8;
  resize:vertical;
}
.view-story-date{
  resize:none;
}
.view-story-caption{
  resize:none;
}

/* 追问链折叠 */
.view-story-followups{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.view-story-followup{
  border-radius:12px;
}
.view-story-followup-toggle{
  width:100%;
  min-height:44px;
  padding:10px 14px;
  font-family:inherit;
  font-size:16px;
  line-height:1.5;
  text-align:left;
  color:var(--c-ink);
  background:var(--c-paper);
  border:1px dashed var(--c-line);
  border-radius:12px;
  cursor:pointer;
}
.view-story-followup-toggle:focus{
  outline:none;
  border-color:var(--c-gold);
  box-shadow:0 0 0 3px rgba(212,162,76,.25);
}
.view-story-followup.is-open .view-story-followup-toggle{
  border-style:solid;
  border-color:var(--c-gold);
}
.view-story-followup-body{
  display:none;
  padding-top:12px;
}
.view-story-followup.is-open .view-story-followup-body{
  display:block;
}

/* 照片区 */
.view-story-photos{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.view-story-photos-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.view-story-photos-grid:empty{
  display:none;
}
.view-story-photo-item{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:calc(33.333% - 8px);
  box-sizing:border-box;
  padding:8px;
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:12px;
}
.view-story-photo-img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:8px;
  background:#fff;
}
.view-story-photo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.view-story-photo-caption{
  flex:1;
  min-width:0;
  font-size:13px;
  color:var(--c-ink-2);
  word-break:break-word;
}
.view-story-photo-item .btn{
  width:auto;
}
.view-story-photos-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.view-story-file{
  display:none;
}
.view-story-photo-add{
  width:auto;
}

/* 底部操作 */
.view-story-actions{
  display:flex;
  gap:12px;
}
.view-story-save{
  width:100%;
  padding:14px 24px;
  font-size:18px;
}

@media (max-width:639px){
  .view-story-photo-item{ width:calc(50% - 6px); }
}

/* ===== A5 视图样式分区（仅 A5 可写）===== */
/* 说明：本分区仅做「纯追加」，不改动上方任何既有规则。
 *       承载 A5 专属类：.view-memoir-*（回忆录三视图 / 照片墙 / 编辑删除入口）、
 *       .view-home-*（首页双节视觉 / 统计卡 / 倒计时 / 时间胶囊）、
 *       .exporting（长图截图态）、.printing（打印态）、.photo-wall（瀑布流）。
 *       复用 A3 基础类（.card/.btn/.empty-state/.page-title/.story-text/.muted 等），不重写基础类。 */

/* ============================================================
 * 一、首页（F14 双节视觉 / 统计卡；F17 倒计时与到期提醒）
 * ============================================================ */

/* 顶部 hero：月夜画卷（插画底 + 暗化渐隐 + 金桂 + 朱印）+ 标题 + 引导语 + 倒计时 */
.view-home-hero{
  position:relative;
  margin:6px 0 18px;
  padding:36px 20px 32px;
  text-align:center;
  overflow:hidden;
  border-radius:22px;
  /* 描边随当日节日主色（无节日时回落金色） */
  border:1.5px solid var(--fest-a, var(--v3-gold-line));
  background-color:#101E38;
  background-image:url('/family-memory-box/static/素材-assets/月夜长卷-moon-night-scroll.svg');
  background-repeat:no-repeat;
  background-position:center 30%;
  background-size:cover;
  box-shadow:var(--v3-hi), 0 26px 60px rgba(3,8,20,.6);
}
/* 暗化 + 底部渐隐：保证月色文字可读 */
.view-home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,11,24,.40) 0%, rgba(6,11,24,.55) 46%, rgba(9,15,30,.92) 100%);
  pointer-events:none;
}
/* 左下金桂一枝 */
.view-home-hero::after{
  content:"";
  position:absolute;
  left:-6px;
  bottom:-14px;
  width:186px;
  height:186px;
  background-image:url('/family-memory-box/static/素材-assets/金桂-osmanthus.svg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.80;
  pointer-events:none;
}
.view-home-hero > *{ position:relative; z-index:1; }
/* 首页入场：画卷如月升起（原「月亮升起」动效由画卷本体承担） */
body.is-home .view-home-hero{
  animation:moon-rise 1000ms ease-out both;
}
/* 节日徽标（今日 · 中秋节）：图形取自当日节日纹样遮罩，整体随 --fest-a 变色 */
.view-home-festival{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:6px 16px 6px 12px;
  border:1px solid var(--fest-a, var(--v3-gold-line));
  border-radius:999px;
  background-color:rgba(12,20,38,.42);
  background-image:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(3,8,20,.4);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.view-home-festival-ico{
  width:22px;
  height:22px;
  background-color:var(--fest-a, #D4A24C);
  -webkit-mask-image:var(--fest-motif, var(--mask-cloud));
  mask-image:var(--fest-motif, var(--mask-cloud));
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.view-home-festival-text{
  font-family:var(--v3-serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--c-moon);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

.view-home-title{
  color:var(--c-moon);
  text-shadow:0 2px 20px rgba(0,0,0,.6), 0 0 34px rgba(255,217,125,.35);
}
.view-home-title::after{ margin-left:auto; margin-right:auto; }
.view-home-lead{
  margin:0 auto 14px;
  max-width:34ch;
  font-size:16px;
  line-height:1.7;
  color:rgba(246,231,180,.86);
}
.view-home-countdown{
  display:inline-block;
  margin:0;
  padding:8px 18px;
  font-size:15px;
  font-weight:600;
  color:var(--fest-a, var(--c-moon-glow));
  background:rgba(246,231,180,.10);
  border:1px solid var(--fest-a, var(--v3-gold-line));
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* 朱文印章（挂在倒计时右侧：竖排「回忆」，楷体 + 描边；随 hero 高度自适应） */
.view-home-countdown::after{
  content:"回忆";
  position:absolute;
  left:100%;
  bottom:-8px;
  margin-left:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:66px;
  padding:4px;
  font-family:var(--v3-serif);
  font-size:17px;
  letter-spacing:.14em;
  line-height:1;
  writing-mode:vertical-rl;
  text-orientation:upright;
  color:#FFF4E4;
  background:linear-gradient(180deg, #C8412F 0%, #93231A 100%);
  border:2px solid rgba(255,241,222,.55);
  border-radius:6px;
  box-shadow:0 10px 24px rgba(120,25,15,.5), inset 0 0 0 2px rgba(255,255,255,.14);
  transform:rotate(7deg);
  pointer-events:none;
}

/* 三统计卡：夜色玻璃 + 描金 + 内高光 */
.view-home-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:0 0 20px;
}
.view-home-stat{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:18px 8px 16px;
  background-color:rgba(246,231,180,.05);
  /* 第一层为顶部反光高光（玻璃感来源），第二层为暖金暗玻璃 */
  background-image:var(--v3-sheen-dark), var(--v3-glass-dark);
  border:1px solid var(--v3-gold-line);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,241,205,.06), 0 16px 34px rgba(3,8,20,.45);
  -webkit-backdrop-filter:var(--v3-sat) blur(16px);
  backdrop-filter:var(--v3-sat) blur(16px);
}
.view-home-stat-num{
  font-family:var(--v3-serif);
  font-size:30px;
  line-height:1.2;
  font-weight:700;
  color:var(--c-moon-glow);
  text-shadow:0 0 20px rgba(255,217,125,.5);
  overflow-wrap:anywhere;
}
.view-home-stat-label{
  font-size:13px;
  color:rgba(246,231,180,.72);
}

/* 主按钮 */
.view-home-actions{
  display:flex;
  justify-content:center;
  margin-bottom:28px;
}
.view-home-start{
  min-width:220px;
  font-size:18px;
  box-shadow:0 8px 24px rgba(192,57,43,.35);
}

/* 时间胶囊区 */
.view-home-capsules{
  margin-top:8px;
}
.view-home-section-title{
  margin:0 0 12px;
  font-size:20px;
  color:var(--c-moon);
}
/* 深底次要文字（替代 .muted，避免暗底低对比） */
.view-home-dim{
  margin:6px 0;
  font-size:14px;
  line-height:1.7;
  color:rgba(246,231,180,.68);
  overflow-wrap:anywhere;
}
.view-home-capsule{
  margin-bottom:14px;
  padding:20px;
  background-color:rgba(246,231,180,.05);
  background-image:var(--v3-sheen-dark), var(--v3-glass-dark);
  border:1px solid var(--v3-gold-line);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 16px 34px rgba(3,8,20,.42);
  -webkit-backdrop-filter:var(--v3-sat) blur(18px);
  backdrop-filter:var(--v3-sat) blur(18px);
}
.view-home-capsule-title{
  margin:0 0 8px;
  font-size:18px;
  color:var(--c-moon);
  overflow-wrap:anywhere;
}
.view-home-capsule-author{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.view-home-capsule-dot{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(246,231,180,.25);
}
.view-home-capsule-author-name{
  font-size:14px;
  color:rgba(246,231,180,.85);
}
.view-home-capsule-content{
  margin:0;
  color:var(--c-moon);
  overflow-wrap:anywhere;
}
.view-home-capsule-action{
  margin-top:10px;
}
.view-home-capsule-locked{
  margin:8px 0 0;
  font-size:14px;
  color:rgba(246,231,180,.6);
}

/* 创建胶囊：入口按钮 + 内联表单（F17 创建入口）
 * 暗底（body.is-home）下的玻璃拟态表单；底色/边框/文字一律取现有 token
 * （月金 --c-moon / 夜空 --c-midnight / 危险色 --c-err），不引入新色值。 */
.view-home-capsule-add{
  display:inline-block;
  margin:4px 0 16px;
  color:var(--c-moon);
  border:1px solid var(--v3-gold-line);
}
.view-home-capsule-form{
  margin-bottom:16px;
  padding:20px;
  background-color:rgba(246,231,180,.05);
  background-image:var(--v3-sheen-dark), var(--v3-glass-dark);
  border:1px solid var(--v3-gold-line);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 16px 34px rgba(3,8,20,.42);
  -webkit-backdrop-filter:var(--v3-sat) blur(18px);
  backdrop-filter:var(--v3-sat) blur(18px);
}
/* 字段：label 在上、控件在下，纵向堆叠 */
.view-home-capsule-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.view-home-capsule-field > span{
  font-size:14px;
  color:rgba(246,231,180,.72);
}
/* 输入控件：整行铺满，暗底 + 月光字，圆角/焦点态沿用表单 token */
.view-home-capsule-input,
.view-home-capsule-textarea,
.view-home-capsule-select{
  display:block;
  width:100%;
  min-height:44px;
  padding:10px 14px;
  font-family:inherit;
  font-size:16px;
  color:var(--c-moon);
  background:var(--c-midnight);
  border:1px solid rgba(212,162,76,.45);
  border-radius:12px;
}
.view-home-capsule-textarea{
  resize:vertical;
}
.view-home-capsule-input:focus-visible,
.view-home-capsule-textarea:focus-visible,
.view-home-capsule-select:focus-visible{
  outline:3px solid var(--c-moon-glow);
  outline-offset:2px;
}
/* 按钮行：右对齐；窄屏允许换行，避免横向溢出 */
.view-home-capsule-form-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px;
  margin-top:4px;
}
/* 内联错误文案：使用危险色 token */
.view-home-capsule-error{
  margin:0 0 12px;
  font-size:14px;
  color:var(--c-err);
}

/* 两侧灯笼定位（容器 .festive-decor 在视图之外，body.is-home 时显示） */
.festive-decor .view-home-lantern-l{
  left:8%;
  transform-origin:top center;
}
.festive-decor .view-home-lantern-r{
  right:8%;
  transform-origin:top center;
}

/* ============================================================
 * 一之二、节日日历 / 手机上看（首页两张信息卡）
 * 与统计卡、胶囊卡同一套「夜色玻璃」配方，保证首页基调统一。
 * ============================================================ */
.view-home-panel{
  margin-top:16px;
  padding:20px;
  background-color:rgba(246,231,180,.05);
  background-image:var(--v3-sheen-dark), var(--v3-glass-dark);
  border:1px solid var(--v3-gold-line);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 16px 34px rgba(3,8,20,.42);
  -webkit-backdrop-filter:var(--v3-sat) blur(18px);
  backdrop-filter:var(--v3-sat) blur(18px);
}
.view-home-panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.view-home-panel-title{
  margin:0;
  font-family:var(--v3-serif);
  font-size:20px;
  letter-spacing:.04em;
  color:var(--c-moon);
}
.view-home-panel-meta{
  flex:0 0 auto;
  font-size:13px;
  color:var(--v3-moon-3);
}

/* ---------- 节日日历 ---------- */
.view-home-cal-now{
  margin:0 0 12px;
  padding:8px 14px;
  font-size:14px;
  color:var(--c-moon-glow);
  background:rgba(246,231,180,.08);
  border-left:3px solid var(--fest-a, var(--c-gold));
  border-radius:0 10px 10px 0;
}
.view-home-cal-list,
.view-home-cal-months{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.view-home-cal-month + .view-home-cal-month{ margin-top:10px; }
.view-home-cal-month-title{
  margin:6px 0 4px;
  font-family:var(--v3-serif);
  font-size:15px;
  letter-spacing:.1em;
  color:var(--v3-moon-3);
}
.view-home-cal-row{
  /* 整行是可点的切换按钮：重置按钮默认外观，保留 flex 排布 */
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:40px;
  padding:4px 10px;
  font:inherit;
  text-align:left;
  color:inherit;
  background:transparent;
  border:1px solid transparent;
  border-radius:12px;
  cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.view-home-cal-row:focus-visible{
  outline:3px solid var(--fest-a, var(--c-moon-glow));
  outline-offset:1px;
}
.view-home-cal-row:active{ transform:translateY(1px); }
@media (hover:hover) and (pointer:fine){
  .view-home-cal-row:hover{
    background:rgba(246,231,180,.07);
    border-color:rgba(212,162,76,.34);
  }
  .view-home-cal-row:hover .view-home-cal-go{ opacity:1; }
}
.view-home-cal-ico{
  flex:0 0 auto;
  width:20px;
  height:20px;
  background-color:var(--fest-a, #D4A24C);
  -webkit-mask-image:var(--fest-motif, var(--mask-cloud));
  mask-image:var(--fest-motif, var(--mask-cloud));
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.view-home-cal-date{
  flex:0 0 auto;
  min-width:44px;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--v3-moon-3);
}
.view-home-cal-name{
  flex:1 1 auto;
  min-width:0;
  font-size:16px;
  color:var(--v3-moon-1);
  overflow-wrap:anywhere;
}
.view-home-cal-when{
  flex:0 0 auto;
  font-size:13px;
  color:var(--v3-moon-2);
}
.view-home-cal-row.is-past{ opacity:.5; }
.view-home-cal-row.is-today{
  background:rgba(246,231,180,.10);
  border-color:var(--fest-a, var(--c-gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.view-home-cal-row.is-today .view-home-cal-name{ font-weight:600; }
.view-home-cal-row.is-today .view-home-cal-when{ color:var(--fest-a, var(--c-moon-glow)); }
/* 预览中的那一行：描金实边 + 主色文字，与「今天」区分（今天用的是淡金底） */
.view-home-cal-row.is-preview{
  background:linear-gradient(90deg, rgba(246,231,180,.14), rgba(246,231,180,.04));
  border-color:var(--fest-a, var(--c-gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px rgba(3,8,20,.35);
}
.view-home-cal-row.is-preview .view-home-cal-name{
  font-weight:600;
  color:var(--fest-a, var(--c-moon));
}
/* 行尾「切换 / 预览中」提示：默认半透明，悬停或选中时清晰 */
.view-home-cal-go{
  flex:0 0 auto;
  padding:2px 9px;
  font-size:12px;
  color:var(--fest-a, var(--c-moon-glow));
  background:rgba(246,231,180,.10);
  border:1px solid rgba(212,162,76,.34);
  border-radius:999px;
  opacity:.62;
  transition:opacity 160ms ease;
}
.view-home-cal-row.is-preview .view-home-cal-go{
  opacity:1;
  font-weight:600;
  background:rgba(246,231,180,.20);
  border-color:var(--fest-a, var(--c-gold));
}
/* 预览提示条：明确「手动预览 ≠ 今天真的过节」+ 一键回到自动 */
.view-home-cal-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 12px;
  padding:8px 14px;
  background:rgba(246,231,180,.10);
  border-left:3px solid var(--fest-a, var(--c-gold));
  border-radius:0 12px 12px 0;
}
.view-home-cal-bar-text{
  flex:1 1 200px;
  min-width:0;
  font-size:14px;
  line-height:1.6;
  color:var(--c-moon);
}
.view-home-cal-reset{ width:auto; }
.view-home-cal-toggle{
  width:auto;
  margin-top:12px;
}

/* ---------- 手机上看（地址 + 二维码 + 连接信息） ---------- */
.view-home-access-body{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.view-home-access-info{ flex:1 1 auto; min-width:0; }
.view-home-access-label{
  margin:0 0 4px;
  font-size:13px;
  color:var(--v3-moon-3);
}
.view-home-access-url{
  margin:0 0 10px;
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:15px;
  line-height:1.5;
  color:var(--c-moon-glow);
  word-break:break-all;
  -webkit-user-select:all;
  user-select:all;
}
.view-home-access-warn{
  margin:0 0 10px;
  padding:8px 12px;
  font-size:13px;
  line-height:1.6;
  color:#FFD9A0;
  background:rgba(217,130,43,.16);
  border-left:3px solid var(--c-warn);
  border-radius:0 10px 10px 0;
}
.view-home-access-stats{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.7;
  color:var(--v3-moon-2);
  overflow-wrap:anywhere;
}
.view-home-access-copy{ width:auto; }
.view-home-access-qrbox{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.view-home-access-qr{
  width:132px;
  height:132px;
  padding:8px;
  background:#fff;
  border:1px solid var(--v3-gold-line);
  border-radius:14px;
  box-shadow:0 10px 26px rgba(3,8,20,.45);
}
.view-home-access-qrhint{
  margin:0;
  max-width:18ch;
  font-size:12px;
  line-height:1.6;
  text-align:center;
  color:var(--v3-moon-3);
}
.view-home-access-note{
  margin:14px 0 0;
  padding-top:12px;
  font-size:13px;
  line-height:1.7;
  color:var(--v3-moon-2);
  border-top:1px dashed rgba(212,162,76,.30);
}

/* ============================================================
 * 二、回忆录（F7 三视图 / 照片墙 / 编辑删除入口）
 * ============================================================ */

/* 视图切换 tabs */
.view-memoir-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.view-memoir-tab{
  flex:1 1 0;
  min-height:44px;
  padding:10px 12px;
  font-size:16px;
  color:var(--c-ink-2);
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:12px;
  cursor:pointer;
  transition:background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.view-memoir-tab:focus-visible{
  outline:3px solid var(--c-moon-glow);
  outline-offset:2px;
}
.view-memoir-tab.is-active{
  color:#fff;
  font-weight:600;
  background:var(--c-lantern);
  border-color:transparent;
}

/* 导出 / 导入工具栏 */
.view-memoir-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.view-memoir-toolbar .btn{
  width:auto;
  flex:1 1 auto;
}
.view-memoir-file{
  display:none;
}

/* 内容宿主 + 视图内状态块 */
.view-memoir-content{
  margin-bottom:24px;
}
.view-memoir-loading{
  padding:32px 0;
  text-align:center;
}
.view-memoir-error,
.view-memoir-empty{
  margin-bottom:24px;
}
.view-memoir-empty-hint{
  margin:12px 0;
  text-align:center;
}

/* 分组通用 */
.view-memoir-group,
.view-memoir-tl-group{
  margin-bottom:24px;
}
.view-memoir-group-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.view-memoir-group-title{
  margin:0;
  font-size:20px;
  overflow-wrap:anywhere;
}
.view-memoir-group-meta{
  margin:0;
  font-size:13px;
}
.view-memoir-avatar{
  flex:0 0 auto;
  width:14px;
  height:14px;
  border-radius:50%;
}
.view-memoir-group-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 时间轴年份标题 */
.view-memoir-tl-year{
  display:inline-block;
  margin:0 0 6px;
  padding:4px 14px;
  font-size:18px;
  font-weight:700;
  color:#fff;
  background:var(--c-lantern);
  border-radius:999px;
}

/* 故事卡 */
.view-memoir-story{
  overflow-wrap:anywhere;
}
.view-memoir-story-empty{
  padding:12px;
}
.view-memoir-story-topic{
  margin:0 0 6px;
  font-size:18px;
  font-weight:600;
  color:var(--c-lantern);
  overflow-wrap:anywhere;
}
.view-memoir-story-speaker{
  margin:0 0 10px;
  font-size:14px;
  color:var(--c-ink-2);
}
.view-memoir-story-content{
  overflow-wrap:anywhere;
}
/* 追问链：左侧金色标记 */
.view-memoir-story-followups{
  margin:12px 0 0;
  padding:12px 14px;
  background:rgba(212,162,76,.10);
  border-left:3px solid var(--c-gold);
  border-radius:0 12px 12px 0;
}
.view-memoir-story-followup + .view-memoir-story-followup{
  margin-top:10px;
}
.view-memoir-story-q{
  margin:0 0 4px;
  font-size:15px;
  font-weight:600;
  color:var(--c-ink);
  overflow-wrap:anywhere;
}
.view-memoir-story-a{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:var(--c-ink-2);
  overflow-wrap:anywhere;
}
.view-memoir-story-date{
  margin:10px 0 0;
  font-size:13px;
}
/* 故事内照片缩略图 */
.view-memoir-story-photos{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.view-memoir-thumb{
  width:88px;
  height:88px;
  object-fit:cover;
  border:1px solid var(--c-line);
  border-radius:10px;
}
/* 操作行（编辑 / 删除） */
.view-memoir-story-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.view-memoir-story-actions .btn{
  width:auto;
}

/* 照片墙：CSS columns 瀑布流 */
.view-memoir-photowall{
  margin-top:8px;
}
.view-memoir-section-title{
  margin:0 0 12px;
  font-size:20px;
}
.photo-wall{
  column-count:2;
  column-gap:12px;
}
.view-memoir-photo-item{
  margin:0 0 12px;
  break-inside:avoid;
}
.view-memoir-photo-img{
  width:100%;
  border:1px solid var(--c-line);
  border-radius:12px;
}
.view-memoir-photo-caption{
  margin:6px 0 0;
  font-size:13px;
  color:var(--c-ink-2);
  overflow-wrap:anywhere;
}

/* 长图截图态（F16）：columns 与 html2canvas 不兼容，截图期间临时切 grid 三列 */
.exporting .photo-wall{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  column-count:auto;
}
.exporting .view-memoir-photo-item{
  margin:0;
}
/* 截图态同步隐藏 no-print 元素（视图 tabs / 导出工具栏 / 卡片编辑删除入口）：
 * .no-print 的 display:none 只在 @media print 生效，而 html2canvas 走屏幕媒体，
 * 若不在截图态显式隐藏，长图里会混入「导出备份 / 仅文字备份 / 导入备份 / 编辑 / 删除」等界面控件。 */
.exporting .no-print{
  display:none !important;
}

/* ============================================================
 * 三、打印封面（F8 导出 PDF；非打印态隐藏，打印态居中整页）
 * ============================================================ */
.view-memoir-cover{
  display:none;
}
@media print{
  .print-cover.view-memoir-cover{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:78vh;
    text-align:center;
    color:#000;
  }
  .view-memoir-cover-moon{
    width:120px;
    height:120px;
    margin-bottom:28px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #F6E7B4, #FFD97D);
  }
  .view-memoir-cover-title{
    margin:0 0 12px;
    font-size:34px;
    font-weight:700;
  }
  .view-memoir-cover-family{
    margin:0 0 6px;
    font-size:18px;
    color:#444;
  }
  .view-memoir-cover-date{
    margin:0;
    font-size:14px;
    color:#666;
  }
}

/* ============================================================
 * 四、响应式（重点 390×844 手机端，禁止横向滚动）
 * ============================================================ */
@media (min-width:1024px){
  /* 回忆录桌面双栏：分组内故事两列排布，照片墙三列 */
  .view-memoir-group-body{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    align-items:start;
  }
  .photo-wall{
    column-count:3;
  }
}
@media (max-width:639px){
  /* 首页统计卡紧凑排布，主按钮占满整行，避免溢出 */
  .view-home-stats{
    gap:8px;
  }
  .view-home-stat{
    padding:12px 6px;
  }
  .view-home-stat-num{
    font-size:22px;
  }
  .view-home-start{
    min-width:0;
    width:100%;
  }
  /* 照片墙双列 */
  .photo-wall{
    column-count:2;
  }
  /* 创建表单：窄屏收紧内边距，入口与按钮行铺满，避免横向溢出 */
  .view-home-capsule-form{
    padding:14px;
  }
  .view-home-capsule-add{
    display:block;
    width:100%;
  }
  .view-home-capsule-form-actions .btn{
    flex:1 1 0;
    min-width:0;
  }
}

/* ==================== 9.6 三端差异化（终局覆盖，必须位于文件末尾） ==================== */
/* 为什么放末尾：A4/A5 视图分区定义在本文件的中部，同优先级选择器下「后定义者胜」，
 * 因此三端结构差异只有写在文件最后才不会被视图分区覆盖。
 * 三端结构：
 *   PC  ≥1024   顶部右侧悬浮胶囊导航 + 抽题双栏工作台 + 家人/回忆录/胶囊多列 + 大字号
 *   平板 640–1023 底部居中悬浮胶囊导航 + 760 内容 + 回忆录/照片墙双列
 *   手机 <640   底部通栏四图标导航 + 单列 + 全宽按钮 + 话题卡占屏 60%
 */

/* ---------- PC ≥1024 ---------- */
@media (min-width:1024px){
  /* 导航：底栏 → 右上角悬浮胶囊 */
  .app-nav{
    top:20px;
    right:34px;
    bottom:auto;
    left:auto;
    width:auto;
    padding:6px;
    gap:6px;
    border:1px solid var(--v3-gold-line);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(11,18,36,.74), rgba(7,12,26,.88));
    box-shadow:0 18px 44px rgba(2,5,14,.58), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .nav-item{
    flex:0 0 auto;
    flex-direction:row;
    gap:8px;
    min-height:44px;
    padding:8px 18px;
    font-size:15px;
    border-radius:999px;
  }
  .nav-item::before{ width:22px; height:22px; }

  /* 页头与主内容同宽左对齐（避让右上导航胶囊）；width:100% 必需：
   * .app-shell 是 column flex，仅 margin:0 auto 会让 header 收缩为内容宽而非同宽。 */
  .app-header{
    width:100%;
    max-width:1140px;
    margin:0 auto;
    padding:40px 32px 10px;
    text-align:left;
  }
  .app-brand{ font-size:32px; }

  .app-main{
    max-width:1140px;
    padding:22px 32px 72px;
  }
  .page-title{ font-size:36px; }
  .page-title::after{ width:96px; }
  .topic-card-text{ font-size:34px; }
  .topic-card{ min-height:380px; }

  /* 抽题：左「签筒 / 分类 / 抽题」，右「话题卡」双栏工作台 */
  #view-draw.is-active{
    display:grid;
    grid-template-columns:340px minmax(0, 1fr);
    column-gap:30px;
    align-items:start;
  }
  #view-draw .page-title{ grid-column:1 / -1; grid-row:1; }
  #view-draw .view-draw-speaker{ grid-column:1 / -1; grid-row:2; }
  #view-draw .view-draw-stage{ grid-column:1; grid-row:3; min-height:392px; }
  #view-draw .view-draw-chips{ grid-column:1; grid-row:4; }
  #view-draw .view-draw-action{ grid-column:1; grid-row:5; }
  #view-draw .view-draw-custom{ grid-column:1 / -1; grid-row:6; }
  #view-draw .view-draw-cardslot{ grid-column:2; grid-row:3 / span 4; margin-top:0; }
  #view-draw .view-draw-card{ min-height:420px; }
  .view-draw-tumbler{ width:252px; height:312px; }

  /* 家人：两列卡片 + 表单收窄 */
  .view-members-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
  .view-members-form{ max-width:680px; margin-top:8px; }

  /* 回忆录：故事两列 + 照片墙三列 + 工具条左对齐 + 缩略图放大 */
  .view-memoir-group-body{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; }
  .photo-wall{ column-count:3; }
  .view-memoir-toolbar{ justify-content:flex-start; }
  .view-memoir-toolbar .btn{ flex:0 0 auto; }
  .view-memoir-thumb{ width:104px; height:104px; }

  /* 首页：画卷更高 + 时间胶囊两列（背景位置偏上，保证满月完整入画） */
  .view-home-hero{ padding:56px 40px 48px; background-position:center 12%; }
  .view-home-capsules{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    align-items:start;
  }
  .view-home-section-title,
  .view-home-dim,
  .view-home-capsule-form{ grid-column:1 / -1; }
  .view-home-capsule-add{ grid-column:1 / -1; justify-self:start; }
  .view-home-capsules .view-home-capsule{ margin-bottom:0; }

  /* 节日日历：PC 双列排布（全年 27 个节日不用滚很长）；手机上看：左信息右二维码 */
  .view-home-cal-list,
  .view-home-cal-months{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2px 28px; }
  .view-home-cal-month + .view-home-cal-month{ margin-top:0; }
  .view-home-cal-toggle{ justify-self:start; }
  .view-home-access-body{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:32px; }
  .view-home-access-qr{ width:148px; height:148px; }
}

/* ---------- 平板 640–1023 ---------- */
@media (min-width:640px) and (max-width:1023px){
  .app-main{ max-width:760px; padding:20px 24px 124px; }
  .card{ padding:24px; }

  /* 导航：底部居中悬浮胶囊（与手机通栏底栏形成结构差异） */
  .app-nav{
    left:50%;
    right:auto;
    bottom:18px;
    width:min(580px, calc(100% - 48px));
    transform:translateX(-50%);
    padding:6px;
    gap:6px;
    border:1px solid var(--v3-gold-line);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(11,18,36,.72), rgba(7,12,26,.88));
    box-shadow:0 18px 44px rgba(2,5,14,.55), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .nav-item{
    flex-direction:row;
    gap:8px;
    padding:8px 14px;
    font-size:15px;
    border-radius:999px;
  }

  .page-title{ font-size:34px; }
  .topic-card{ min-height:46vh; }
  .topic-card-text{ font-size:30px; }
  .view-draw-stage{ min-height:384px; }
  .view-draw-tumbler{ width:250px; height:310px; }
  .view-draw-stage::after{ width:186px; height:186px; }
  .view-home-hero{ padding:44px 32px 38px; }
  .photo-wall{ column-count:2; }
  .view-memoir-thumb{ width:80px; height:80px; }

  /* 节日日历：平板同样双列，避免过长 */
  .view-home-cal-list,
  .view-home-cal-months{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2px 20px; }
  .view-home-cal-month + .view-home-cal-month{ margin-top:0; }
  .view-home-access-body{ flex-direction:row; align-items:flex-start; gap:24px; }
}

/* ---------- 手机 <640（重点 390px） ---------- */
@media (max-width:639px){
  .app-main{ padding:12px 12px 108px; }
  .page-title{ font-size:26px; }
  .btn{ width:100%; }
  .topic-card{ min-height:60vh; }
  .topic-card-text{ font-size:28px; }
  .dialog-actions{ flex-direction:column-reverse; }

  /* 导航：贴底通栏（图标在上、文字在下） */
  .app-nav{
    border-radius:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    gap:0;
  }
  .nav-item{ font-size:12px; padding:6px 2px; border-radius:12px; }
  .nav-item::before{ width:22px; height:22px; }
  .nav-item.is-active{ box-shadow:none; }

  /* 抽签筒舞台：手机竖屏紧凑排布，玉兔/金桂收小避免压住签筒 */
  .view-draw-stage{ min-height:300px; padding:16px 0 18px; }
  .view-draw-tumbler{ width:196px; height:244px; }
  .view-draw-tumbler::after{ right:-46px; bottom:-6px; width:118px; height:118px; }
  .view-draw-stage::after{ left:-20px; bottom:-16px; width:126px; height:126px; opacity:.82; }

  /* 首页：画卷压低、金桂收小移出正文区、印章收小 */
  .view-home-hero{ padding:30px 16px 26px; border-radius:18px; }
  /* 节日标题较长（如「万圣节 · 说说那些年的故事」）时 26px 会折出孤字，手机端收到 23px */
  .view-home-title{ font-size:23px; }
  .view-home-hero::before{
    background:linear-gradient(180deg, rgba(6,11,24,.58) 0%, rgba(6,11,24,.70) 44%, rgba(9,15,30,.95) 100%);
  }
  .view-home-hero::after{ left:-26px; bottom:-26px; width:104px; height:104px; opacity:.45; }
  .view-home-countdown::after{
    width:32px;
    height:52px;
    font-size:14px;
    margin-left:10px;
    bottom:-6px;
  }
  .view-home-stat-num{ font-size:24px; }

  /* 回忆录：照片墙双列、缩略图收小 */
  .photo-wall{ column-count:2; }
  .view-memoir-thumb{ width:72px; height:72px; }

  /* 节日日历 / 手机上看：手机单列，二维码居中且不撑宽 */
  .view-home-panel{ padding:16px; }
  .view-home-cal-row{ padding:4px 6px; }
  .view-home-cal-date{ min-width:40px; }
  .view-home-cal-name{ font-size:15px; }
  .view-home-access-body{ flex-direction:column; }
  .view-home-access-qrbox{ align-self:center; }
  .view-home-access-url{ font-size:14px; }
}