/* ============================================================
   时萃日记 · Liquid Glass 设计系统
   玻璃拟态 + 暗色/亮色双主题 + 情绪色板 + Bento + 动效
   ============================================================ */

/* ---------- 设计 token ---------- */
:root {
  /* 品牌（珊瑚橙渐变） */
  --brand: #ff7a45;
  --brand-2: #ffa23e;
  --brand-grad: linear-gradient(135deg, #ffa23e 0%, #ff6a3d 100%);
  --brand-soft: rgba(255, 122, 69, 0.14);

  /* 情绪色板 */
  --mood-happy: #f5a623;
  --mood-calm: #3ec6b8;
  --mood-low: #7c83fd;
  --mood-excite: #ff6b9d;
  --mood-tired: #9aa5b1;

  /* 亮色主题 */
  --bg: #f4f2ef;
  --bg-2: #ece9e4;
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.75);
  --stroke: rgba(20, 20, 30, 0.08);
  --text: #2a2a33;
  --text-2: #6b6b78;
  --text-3: #a2a2ad;
  --shadow: 0 8px 30px rgba(40, 30, 20, 0.08), 0 2px 8px rgba(40, 30, 20, 0.05);
  --shadow-lift: 0 16px 40px rgba(40, 30, 20, 0.14);
  --danger: #e5484d;
  --ok: #30a46c;
  /* 随便看看堆叠卡：实底（不透出下层文字） */
  --deck-card: #fbfaf8;
  --deck-card-border: rgba(20, 15, 30, 0.09);
  --aurora-op: 0.35;
  /* aurora 光斑色（默认珊瑚款：暖橙 + 蓝；其它皮肤随皮肤切换） */
  --aurora-1: rgba(255, 158, 70, 0.85);
  --aurora-2: rgba(96, 140, 255, 0.7);

  /* 打卡热力 5 档（浅→深）。统一用「品牌色 + 递进 alpha」表达深浅：
     H5 与小程序共用同一组 alpha 阶梯（.15/.32/.52/.72/.96），
     深浅过渡一致；且叠加在各自底色上后，明暗主题都会自然过渡。 */
  --heat-1: rgba(255, 122, 69, 0.15);
  --heat-2: rgba(255, 122, 69, 0.32);
  --heat-3: rgba(255, 122, 69, 0.52);
  --heat-4: rgba(255, 122, 69, 0.72);
  --heat-5: rgba(255, 122, 69, 0.96);
}

/* 暗色主题（默认珊瑚款） */
body[data-theme="dark"] {
  --bg: #0f0f14;
  --bg-2: #15151c;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.10);
  --stroke: rgba(255, 255, 255, 0.08);
  --text: #ececf4;
  --text-2: #9a9aa8;
  --text-3: #666672;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 20px 50px rgba(0, 0, 0, 0.6);
  --danger: #ff6b6b;
  --ok: #4cc38a;
  /* 随便看看堆叠卡：暗色实底 */
  --deck-card: #1b1b24;
  --deck-card-border: rgba(255, 255, 255, 0.12);
  --aurora-op: 0.55;
  --aurora-1: rgba(255, 130, 70, 0.5);
  --aurora-2: rgba(80, 120, 255, 0.4);
  /* 打卡日历 5 档 + brand：珊瑚色明暗两套 brand 同为 #ff7a45，本可继承 :root，
     但这里显式写出，保证 6 套皮肤各自都有一份完整定义，便于与小程序端逐块核对 */
  --brand: #ff7a45;
  --heat-1: rgba(255, 122, 69, 0.15);
  --heat-2: rgba(255, 122, 69, 0.32);
  --heat-3: rgba(255, 122, 69, 0.52);
  --heat-4: rgba(255, 122, 69, 0.72);
  --heat-5: rgba(255, 122, 69, 0.96);
}

/* ===== 皮肤：森野青苔 forest ===== */
/* 亮 */
body[data-skin="forest"] {
  --brand: #3f8f57;
  --brand-2: #6cb976;
  --brand-grad: linear-gradient(135deg, #6cb976 0%, #2f7a49 100%);
  --brand-soft: rgba(63, 143, 87, 0.14);
  --bg: #f2f5ef;
  --bg-2: #e6ebe1;
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.72);
  --stroke: rgba(35, 55, 40, 0.1);
  --text: #22302a;
  --text-2: #5c6b60;
  --text-3: #93a095;
  /* 栈叠卡：forest 亮色实底 */
  --deck-card: #f7faf4;
  --deck-card-border: rgba(30, 60, 40, 0.1);
  --aurora-1: rgba(120, 190, 120, 0.6);
  --aurora-2: rgba(90, 160, 130, 0.4);

  /* 打卡热力 5 档：森林绿（同 alpha 阶梯） */
  --heat-1: rgba(63, 143, 87, 0.15);
  --heat-2: rgba(63, 143, 87, 0.32);
  --heat-3: rgba(63, 143, 87, 0.52);
  --heat-4: rgba(63, 143, 87, 0.72);
  --heat-5: rgba(63, 143, 87, 0.96);
}
/* 暗 */
body[data-theme="dark"][data-skin="forest"] {
  --brand: #67c07a;
  --brand-2: #8fd49b;
  --brand-grad: linear-gradient(135deg, #8fd49b 0%, #4ba763 100%);
  --brand-soft: rgba(103, 192, 122, 0.16);
  --bg: #0b120e;
  --bg-2: #121b16;
  --text: #e2ecdf;
  --text-2: #a0b09e;
  --text-3: #7e8f7a;
  /* 栈叠卡：forest 暗色实底 */
  --deck-card: #131c15;
  --deck-card-border: rgba(160, 220, 170, 0.12);
  --aurora-1: rgba(70, 160, 100, 0.4);
  --aurora-2: rgba(90, 150, 110, 0.3);

  /* 打卡热力 5 档：森林绿·暗色（品牌色改用亮绿 #67c07a） */
  --heat-1: rgba(103, 192, 122, 0.15);
  --heat-2: rgba(103, 192, 122, 0.32);
  --heat-3: rgba(103, 192, 122, 0.52);
  --heat-4: rgba(103, 192, 122, 0.72);
  --heat-5: rgba(103, 192, 122, 0.96);
}

/* ===== 皮肤：暮海蓝调 ocean ===== */
/* 亮 */
body[data-skin="ocean"] {
  --brand: #2e7fd6;
  --brand-2: #5aa3e8;
  --brand-grad: linear-gradient(135deg, #5aa3e8 0%, #1f6fc4 100%);
  --brand-soft: rgba(46, 127, 214, 0.13);
  --bg: #f0f4f9;
  --bg-2: #e4ebf3;
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.74);
  --stroke: rgba(25, 55, 90, 0.1);
  --text: #22313f;
  --text-2: #566b7e;
  --text-3: #8ca0b1;
  /* 栈叠卡：ocean 亮色实底 */
  --deck-card: #f6fafd;
  --deck-card-border: rgba(20, 50, 90, 0.1);
  --aurora-1: rgba(80, 160, 240, 0.55);
  --aurora-2: rgba(90, 130, 200, 0.4);

  /* 打卡热力 5 档：暮海蓝（同 alpha 阶梯） */
  --heat-1: rgba(46, 127, 214, 0.15);
  --heat-2: rgba(46, 127, 214, 0.32);
  --heat-3: rgba(46, 127, 214, 0.52);
  --heat-4: rgba(46, 127, 214, 0.72);
  --heat-5: rgba(46, 127, 214, 0.96);
}
/* 暗 */
body[data-theme="dark"][data-skin="ocean"] {
  --brand: #4ba3e8;
  --brand-2: #7cc0f2;
  --brand-grad: linear-gradient(135deg, #7cc0f2 0%, #2f86d6 100%);
  --brand-soft: rgba(75, 163, 232, 0.16);
  --bg: #0a1118;
  --bg-2: #101b28;
  --text: #dde8f2;
  --text-2: #a4b6c6;
  --text-3: #7c93a6;
  /* 栈叠卡：ocean 暗色实底 */
  --deck-card: #101d2e;
  --deck-card-border: rgba(120, 180, 240, 0.13);
  --aurora-1: rgba(50, 130, 220, 0.4);
  --aurora-2: rgba(70, 120, 190, 0.3);

  /* 打卡热力 5 档：暮海蓝·暗色（品牌色改用亮蓝 #4ba3e8） */
  --heat-1: rgba(75, 163, 232, 0.15);
  --heat-2: rgba(75, 163, 232, 0.32);
  --heat-3: rgba(75, 163, 232, 0.52);
  --heat-4: rgba(75, 163, 232, 0.72);
  --heat-5: rgba(75, 163, 232, 0.96);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
  transition: background 0.4s ease, color 0.4s ease;
  /* 底部预留悬浮 TabBar 高度（fixed bottom:14px + 内边距），避免页尾内容被遮挡 */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
/* 字体个性化：圆润 / 衬线 */
body[data-font="round"] {
  font-family: "PingFang SC", "Yuanti SC", "YouYuan", "Segoe UI Rounded", -apple-system, sans-serif;
}
body[data-font="serif"] {
  font-family: "Songti SC", "SimSun", "Noto Serif SC", Georgia, serif;
}
/* 字号个性化：lg 16.5px / xl 18px（覆写基础字号，其余元素多用 em/rem 随动） */
body[data-size="lg"] { font-size: 16.5px; }
body[data-size="xl"] { font-size: 18px; }
body[data-theme="dark"] { color-scheme: dark; }

/* Aurora 极光背景光斑 */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
  opacity: var(--aurora-op);
}
body::before {
  width: 46vmax; height: 46vmax;
  background: radial-gradient(circle, var(--aurora-1), transparent 65%);
  top: -12vmax; right: -14vmax;
}
body::after {
  width: 40vmax; height: 40vmax;
  background: radial-gradient(circle, var(--aurora-2), transparent 65%);
  bottom: -10vmax; left: -12vmax;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* ---------- 玻璃卡片 ---------- */
.card,
.glass {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin: 12px 16px;
}
.card { padding: 20px; }

/* 通用按钮 */
.btn {
  display: block; width: 100%; border: none;
  background: var(--brand-grad);
  color: #fff; border-radius: 999px;
  font-size: 16px; font-weight: 600; padding: 15px 0;
  cursor: pointer; text-align: center;
  box-shadow: 0 6px 18px rgba(255, 110, 61, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* 输入框 */
.input {
  width: 100%; border: 1px solid var(--stroke);
  background: var(--glass-strong);
  border-radius: 16px; padding: 14px 18px; font-size: 15px;
  margin-bottom: 14px; outline: none; color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.input::placeholder { color: var(--text-3); }

.textarea {
  width: 100%; border: none; background: transparent;
  font-size: 16px; line-height: 1.75; min-height: 220px;
  resize: none; outline: none; color: var(--text); font-family: inherit;
}
.textarea::placeholder { color: var(--text-3); }

/* SVG 图标 */
.svg-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svg-ico svg { width: 100%; height: 100%; display: block; }

/* ---------- 设置 / 关于 / 联系 ---------- */
.setting-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); margin-right: 12px; flex-shrink: 0; }
.about-card { text-align: center; padding: 34px 20px 26px; margin: 12px 16px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--shadow); }
.about-logo { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 24px; background: var(--brand-grad); color: #fff; margin: 0 auto 16px; box-shadow: 0 10px 26px rgba(255,110,61,.35); }
.about-name { font-size: 22px; font-weight: 800; }
.about-ver { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.about-desc { font-size: 13px; color: var(--text-2); margin-top: 10px; line-height: 1.6; }
.contact-card { text-align: center; padding: 30px 20px 24px; margin: 12px 16px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--shadow); }
.contact-logo { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; background: var(--brand-grad); color: #fff; margin: 0 auto 14px; box-shadow: 0 10px 26px rgba(255,110,61,.35); }

/* ---------- 品牌标识（时萃日记 logo）----------
   logo 是「透明底 + 深蓝 #28465a / 金 #c8a064」：深蓝在暗色主题（--bg #0f0f14）下
   几乎与背景同色会被吞掉，6 套皮肤（亮/暗 × 3 款）里有一半是暗底。
   所以统一套一层**固定浅色底**（不随主题/皮肤变化的暖白），任何主题下都清晰可辨。
   注意：不要把它放在 --brand-grad 橙色底上（深蓝压橙底对比度不够）。 */
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; overflow: hidden;
  background: #fbfaf9;                        /* 固定暖白，不随主题变化 */
  border: 1px solid rgba(40, 70, 90, .12);
  box-shadow: 0 6px 18px rgba(24, 40, 56, .18);
}
.brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-logo.xs { width: 30px; height: 30px; border-radius: 9px; }
.brand-logo.sm { width: 46px; height: 46px; border-radius: 13px; }
.brand-logo.md { width: 68px; height: 68px; border-radius: 19px; }
.brand-logo.lg { width: 92px; height: 92px; border-radius: 26px; }
/* 各品牌位的摆放 */
.auth-hero .brand-logo { margin: 0 auto 18px; }
.guest-hero .brand-logo { margin-bottom: 16px; }
.about-card .brand-logo { margin: 0 auto 16px; }
.tut-hero .brand-logo { position: absolute; top: 16px; right: 16px; }
.tut-hero h2 { padding-right: 58px; }   /* 给右上角 logo 让位，避免标题撞上去 */
.contact-name { font-size: 18px; font-weight: 800; }
.contact-desc { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.contact-qr { margin: 18px auto 0; width: 200px; height: 200px; padding: 10px; background: #fff; border: 1px solid var(--stroke); border-radius: 16px; box-shadow: var(--shadow); }
.contact-qr img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }
.contact-tip { font-size: 12px; color: var(--text-3); margin-top: 12px; }
.doc-body { padding: 6px 22px 30px; font-size: 14px; line-height: 1.8; color: var(--text); }
.doc-body h3 { font-size: 15px; font-weight: 800; margin: 20px 0 8px; }
.doc-body p { margin: 0 0 10px; color: var(--text-2); }
/* 版本记录：时间轴 */
.cl-timeline { padding: 14px 16px 30px; position: relative; }
.cl-node { display: flex; gap: 14px; position: relative; }
.cl-rail { width: 18px; position: relative; flex-shrink: 0; }
.cl-rail::before {
  content: ''; position: absolute; left: 8px; top: 4px; bottom: -6px;
  width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--brand-soft), var(--stroke));
}
.cl-node:last-child .cl-rail::before { display: none; }
.cl-dot {
  position: relative; z-index: 1; display: block; width: 18px; height: 18px;
  border-radius: 50%; margin-top: 14px;
  background: var(--bg); border: 2px solid var(--stroke);
  box-shadow: 0 0 0 4px var(--bg);
}
.cl-node.current .cl-dot {
  background: var(--brand-grad); border-color: transparent;
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.cl-card {
  flex: 1; min-width: 0; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 13px 15px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.cl-node.current .cl-card { border-color: var(--brand); }
.cl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-ver {
  font-size: 13px; font-weight: 800; letter-spacing: 0.2px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
}
.cl-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-grad); color: #fff;
}
.cl-date { margin-left: auto; font-size: 12px; color: var(--text-3); }
.cl-title { font-size: 15px; font-weight: 700; margin-top: 8px; }
.cl-points { margin: 8px 0 0; padding: 0; list-style: none; }
.cl-points li {
  position: relative; padding-left: 14px; margin-top: 5px;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
}
.cl-points li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); opacity: 0.6;
}

/* ---------- 登录 / 注册 ---------- */
.auth-page { padding: 0 32px; }
.auth-hero { text-align: center; margin: 70px 0 46px; }
.auth-hero .logo {
  width: 76px; height: 76px; margin: 0 auto 18px;
  border-radius: 24px; background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34px; font-weight: 700;
  box-shadow: 0 12px 30px rgba(255, 110, 61, 0.4);
}
.auth-hero .title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; display: block; }
.auth-hero .subtitle { font-size: 13px; color: var(--text-2); margin-top: 10px; display: block; }
.auth-link { text-align: center; margin-top: 18px; color: var(--brand); font-size: 14px; cursor: pointer; }

/* ---------- 首页 Hero ---------- */
.hero { padding: 22px 22px 6px; display: flex; justify-content: space-between; align-items: flex-start; }
.hero .greeting { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.hero .date { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.hero-right { display: flex; align-items: center; gap: 10px; }
.hero-icon-btn {
  width: 40px; height: 40px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--text-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow); transition: transform 0.15s;
}
.hero-icon-btn:active { transform: scale(0.92); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(255, 110, 61, 0.35);
}
/* 首页头像：底栏改版后「我的」不再是 tab，改由点头像进入（与小程序的「首页头像 → 设置/我的」一致） */
.avatar-link { cursor: pointer; transition: transform 0.15s cubic-bezier(.34, 1.56, .64, 1); }
.avatar-link:active { transform: scale(0.94); }

/* ---------- 快速记录 Composer（Bento 主卡） ---------- */
/* 一言（首页编辑框上方）：glass 风格弱化条，左侧品牌色竖条作视觉锚点，不抢编辑框 */
.quote {
  display: flex; flex-direction: column;
  margin: 10px 16px 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--brand);
  box-shadow: var(--shadow);
}
.quote-text { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.quote-from { align-self: flex-end; margin-top: 4px; font-size: 12px; color: var(--text-3); }

.composer {
  margin: 16px 16px 8px;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  transition: box-shadow 0.3s ease;
}
.composer:focus-within { box-shadow: var(--shadow-lift); }
.composer-input {
  width: 100%; border: none; background: transparent; resize: none;
  font-size: 16px; line-height: 1.65; outline: none; color: var(--text);
  font-family: inherit; min-height: 54px;
}
.composer-input::placeholder { color: var(--text-3); }
/* 语音「按住说话」胶囊（首页工具行右侧 + 编辑页共用，与「发布/保存」成对） */
.quick-mic-btn, .rec-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 108px; height: 40px; padding: 0 16px; box-sizing: border-box;
  border: none; cursor: pointer; border-radius: 999px;
  background: var(--brand-grad); color: #fff;
  font-size: 14px; font-weight: 700; box-shadow: 0 5px 16px rgba(255, 110, 61, 0.32);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
  white-space: nowrap;
}
.quick-mic-btn:active, .rec-btn:active { transform: scale(0.95); }
.quick-mic-btn.rec, .rec-btn.recording {
  background: var(--danger-grad, linear-gradient(135deg, #e5484d, #d32f2f));
  animation: recPulse 1.2s infinite;
  box-shadow: 0 6px 20px rgba(229, 72, 77, 0.45);
}
.quick-mic-txt { line-height: 1; }
/* 快速记录工具布局（全局）：图标行 + 底部两端对齐行（日期靠左、语音/发布靠右，不溢出） */
.composer-icns { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.composer-icns .tool-btn { flex-shrink: 0; }
.composer-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.composer-date-wrap { position: relative; flex: 0 1 auto; min-width: 0; height: 36px; }
.composer-date-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  z-index: 2; min-width: 0;
}
.composer-date-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 1px solid var(--stroke); background: var(--glass-strong); color: var(--text-2);
  border-radius: 12px; font-size: 13px; white-space: nowrap; box-sizing: border-box;
  pointer-events: none;
}
.composer-date-txt { line-height: 1; }
.composer-main { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.tool-btn {
  position: relative; border: none; background: transparent; color: var(--text-2);
  border-radius: 12px; width: 40px; height: 38px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.tool-btn:active { transform: scale(0.9); }
.tool-btn.on { background: var(--brand-soft); color: var(--brand); }
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-btn .badge {
  position: absolute; top: -3px; right: -3px; background: var(--danger); color: #fff;
  border-radius: 999px; font-size: 10px; min-width: 16px; height: 16px;
  line-height: 16px; padding: 0 3px; text-align: center; font-weight: 700;
}
.tool-spacer { flex: 1; }
.compose-send {
  border: none; background: var(--brand-grad); color: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 700;
  padding: 10px 24px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
  box-shadow: 0 5px 14px rgba(255, 110, 61, 0.35);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.compose-send:active { transform: scale(0.96); }
.compose-send:disabled { opacity: 0.55; box-shadow: none; }

/* 面板（心情/天气/标签 picker） */
.picker {
  margin-top: 10px; padding: 12px; background: var(--glass-strong);
  border: 1px solid var(--stroke); border-radius: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  animation: fadeUp 0.2s ease;
}
.chip {
  font-size: 13px; color: var(--text-2); background: var(--glass-strong);
  border: 1px solid var(--stroke); padding: 5px 14px; border-radius: 999px;
  cursor: pointer; transition: all 0.15s;
}
.chip:active { transform: scale(0.94); }
.chip.active { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255, 110, 61, 0.3); }
.chip.empty-hint { color: var(--text-3); cursor: default; border-style: dashed; }
.tag-add-row { width: 100%; margin-top: 4px; display: flex; gap: 8px; align-items: stretch; }
.tag-add-row .tag-input { flex: 1; min-width: 0; }
.tag-add-btn {
  flex-shrink: 0; border: none; border-radius: 10px; padding: 0 14px;
  background: var(--brand-grad); color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: transform 0.12s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(255, 110, 61, 0.25);
}
.tag-add-btn:active { transform: scale(0.94); }
.tag-add-hint { font-size: 11px; color: var(--text-3); margin-top: 5px; }

/* 标签输入联想提示 */
.tag-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bg); border: 1px solid var(--stroke); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 6px;
  animation: fadeUp 0.15s ease;
}
.tag-suggest-item {
  font-size: 12.5px; color: var(--brand); background: var(--brand-soft);
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: transform 0.12s;
}
.tag-suggest-item:active { transform: scale(0.94); }

/* ---------- 心情表情选择器 ---------- */
/* 5 个心情固定一行：容器不换行，按钮等分宽度（窄屏自动收窄，表情圈用 clamp） */
.picker.mood-picker { justify-content: space-between; gap: 2px; flex-wrap: nowrap; padding: 10px 6px; }
/* 编辑页容器同时带 .chips（其 flex-wrap:wrap 会覆盖单类选择器），故用双类提高特异性 */
.chips.mood-chips { display: flex; flex-wrap: nowrap; gap: 2px; justify-content: space-between; }
.mood-btn {
  flex: 1 1 0; min-width: 0; width: auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mood-face {
  width: clamp(34px, 9.2vw, 42px); height: clamp(34px, 9.2vw, 42px); border-radius: 50%;
  background: var(--glass-strong); border: 1.5px solid var(--stroke);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(17px, 4.8vw, 22px); line-height: 1; transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.mood-lb { font-size: clamp(10px, 2.6vw, 11px); color: var(--text-3); transition: color 0.15s; white-space: nowrap; }
.mood-btn:active .mood-face { transform: scale(0.9); }
.mood-btn.on .mood-face { background: var(--mc); border-color: var(--mc); transform: scale(1.06); }
.mood-btn.on .mood-lb { color: var(--mc); font-weight: 600; }
.tool-emoji { font-size: 19px; line-height: 1; }

/* 位置行 */
.loc-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 9px 12px; background: var(--glass-strong);
  border: 1px solid var(--stroke); border-radius: 14px;
  animation: fadeUp 0.2s ease;
}
.loc-pin { color: var(--brand); display: flex; flex-shrink: 0; }
.loc-input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 14px; outline: none; color: var(--text); }
.loc-input::placeholder { color: var(--text-3); }
.loc-coord { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.loc-del {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 14px; line-height: 20px;
  text-align: center; cursor: pointer;
}

/* 图片网格 */
.img-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.img-grid img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; cursor: pointer; border: 1px solid var(--stroke); }
.img-wrap { position: relative; }
.img-wrap .img-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  background: var(--danger); color: #fff; border-radius: 50%; font-size: 14px;
  line-height: 20px; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 已选标签 */
.diary-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13px; color: var(--brand); cursor: pointer; transition: background .2s; padding: 2px 6px; border-radius: 6px; }
.tag:hover { background: var(--brand-soft); }
.tag.sel { color: var(--brand); cursor: pointer; opacity: 0.9; }

/* ---------- 今日时间线 ---------- */
.tl-head { padding: 20px 22px 8px; display: flex; align-items: baseline; justify-content: space-between; }
.tl-head .title { font-size: 16px; font-weight: 700; }
.tl-head .count { font-size: 12px; color: var(--text-3); }
.section-title { padding: 12px 22px 0; font-size: 13px; color: var(--text-2); font-weight: 600; }
.section-title .svg-ico { vertical-align: -3px; margin-right: 4px; color: var(--brand); }

/* 时间线分组标题增强（v0494） */
.tl-week { font-size: 11px; color: var(--text-3); background: var(--glass-strong); border: 1px solid var(--stroke); border-radius: 999px; padding: 1px 7px; }
.tl-today { font-size: 11px; font-weight: 700; color: #fff; background: var(--brand-grad); border-radius: 999px; padding: 1px 8px; box-shadow: 0 2px 6px rgba(255, 110, 61, 0.3); }
.tl-count { font-size: 12px; color: var(--text-3); font-weight: 500; }

/* 日记卡片（情绪色条） */
.d-card {
  position: relative; margin: 10px 16px; padding: 16px 18px 16px 20px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 18px; box-shadow: var(--shadow);
  cursor: pointer; overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.d-card:active { transform: scale(0.985); }
.d-card .moodbar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 0 2px 2px 0;
}
/* 置顶徽标：卡片右上角小图钉 */
.d-card .pin-badge {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand);
}
/* 批量模式下选择框：左上角圆角方块，勾选后品牌色填充 */
.d-card .check-badge {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--text-3); color: transparent;
  background: var(--bg); transition: all .15s;
}
.d-card .check-badge.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.d-card.select-mode { cursor: pointer; }
.d-card.select-mode.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.d-card .mood-chip { border: none; color: #fff; font-weight: 600; }

.diary-item { margin: 10px 16px; }
.diary-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.diary-time { font-size: 13px; color: var(--brand); font-weight: 700; }
.diary-content { font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.img-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.img-row img { width: 78px; height: 78px; object-fit: cover; border-radius: 12px; cursor: pointer; border: 1px solid var(--stroke); }

/* ---------- 日记封面（该天有图 → 首图作封面，参考 Daily You） ---------- */
.d-card.has-cover { padding: 0 0 14px; }
.d-card.has-cover .moodbar { display: none; }
.d-card-body { padding: 0; }
.d-card.has-cover .d-card-body { padding: 13px 18px 0 20px; }

.diary-cover {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: var(--bg-2); overflow: hidden; cursor: zoom-in;
}
.diary-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 48%, rgba(0,0,0,0.58) 100%);
}
.cover-top, .cover-bottom {
  position: absolute; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.cover-top { top: 10px; justify-content: space-between; }
.cover-bottom { bottom: 10px; flex-wrap: wrap; }
.cover-date { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.cover-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,0.42); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 8px; border-radius: 999px;
}
.cover-loc, .cover-time {
  font-size: 12px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.diary-excerpt {
  font-size: 14px; line-height: 1.7; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.img-strip { display: flex; gap: 6px; margin-top: 10px; }
.img-strip img {
  width: 46px; height: 46px; object-fit: cover; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--stroke);
}
.img-strip .img-more {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 8px;
  background: var(--glass-strong); color: var(--text-2); font-size: 12px; font-weight: 700;
}

/* ---------- 视频 ---------- */
.diary-cover video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.vid-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vid-row video { width: 100%; max-height: 240px; border-radius: 12px; background: #000; border: 1px solid var(--stroke); display: block; }
.vid-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.vid-wrap { position: relative; width: 100%; }
.vid-wrap video { width: 100%; max-height: 240px; border-radius: 14px; background: #000; border: 1px solid var(--stroke); display: block; }
.vid-wrap .img-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  background: var(--danger); color: #fff; border-radius: 50%; font-size: 14px;
  line-height: 20px; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.empty { text-align: center; margin: 60px 0; color: var(--text-3); }
.empty .icon { font-size: 46px; display: block; margin-bottom: 14px; }

/* ============================================================
   「插画陪伴」风格（2026-10-10 落地）
   角色「小萃」只出现在 首页头部 / 空状态 / 完成反馈 三处；
   圆润形状 + 柔和背景 + 明亮有限色板；减少动效时全部关闭。
   ============================================================ */
:root{
  --pc-sun:#ffd37a;      /* 暖黄（点缀） */
  --pc-mint:#5fc79a;     /* 薄荷（完成态） */
  --pc-wash:#fff7ef;     /* 插画底：柔和暖白 */
  --pc-line:#ffe3cc;     /* 插画卡描边 */
}
/* 角色：沙漏精灵（SVG 由 Mascot 组件渲染） */
.mascot{ display:block; flex:none; transform-origin:50% 80%;
  animation: pcFloat 4.6s cubic-bezier(.2,0,0,1) infinite; }
@keyframes pcFloat{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-4px) rotate(-1.2deg) } }
.m-eye{ transform-box:fill-box; transform-origin:center; animation: pcBlink 5.4s infinite; }
@keyframes pcBlink{ 0%,90%,100%{ transform:scaleY(1) } 93%{ transform:scaleY(.12) } 96%{ transform:scaleY(1) } }
.m-spark{ animation: pcSpark 2.4s ease-in-out infinite; }
@keyframes pcSpark{ 0%,100%{ opacity:.35; transform:scale(.9) } 50%{ opacity:1; transform:scale(1.06) } }
/* 首页头部：角色与问候同行 */
.hero .hello-row{ display:flex; align-items:center; gap:9px; }
.hero .hello-row .greeting{ margin:0; }
/* 首页柔和光晕：只补背景，不改布局 */
.hero{ background:
  radial-gradient(420px 200px at 90% 0%, rgba(255,206,160,.34) 0%, rgba(255,206,160,0) 62%),
  radial-gradient(320px 180px at 2% 22%, rgba(255,224,196,.28) 0%, rgba(255,224,196,0) 58%); }
/* 空状态：角色 + 低门槛文案（不再有主按钮） */
.empty .mascot{ margin:0 auto 14px; }
.empty-title{ display:block; font-size:17px; font-weight:800; color:var(--text); margin-bottom:6px; }
.empty-sub{ display:block; font-size:13.5px; color:var(--text-2); line-height:1.6; }
/* ❌ 空状态的主按钮样式已移除（2026-10-11）：原来那个「＋ 写日记」按钮会和底栏凹槽里的 ➕
   挤在一起，按用户要求去掉，写日记统一走底栏 ➕（与小程序端一致） */
/* 完成反馈：记录成功后的短庆祝（0.4s 弹起、右上角可跳过、不阻断下一步） */
.celebrate{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  background:rgba(58,47,42,.34); animation:pcFade .22s ease; }
@keyframes pcFade{ from{ opacity:0 } to{ opacity:1 } }
.celebrate-card{ position:relative; width:min(86vw,320px); background:#fff; border-radius:26px;
  padding:26px 22px 24px; text-align:center; box-shadow:var(--shadow-lift);
  animation:pcPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes pcPop{ from{ transform:translateY(14px) scale(.96); opacity:0 } to{ transform:none; opacity:1 } }
.celebrate-skip{ position:absolute; top:10px; right:14px; font-size:13px; color:var(--text-3);
  padding:6px 8px; cursor:pointer; }
.celebrate-title{ font-size:18px; font-weight:800; margin-top:8px; }
.celebrate-sub{ font-size:13.5px; color:var(--text-2); margin-top:6px; line-height:1.6; }
@media (prefers-reduced-motion: reduce){
  .mascot, .m-eye, .m-spark{ animation:none !important; }
  .celebrate, .celebrate-card{ animation:none !important; }
}

/* ---------- 编辑页 ---------- */
.edit-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 12px 12px 8px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--stroke);
}
.edit-topbar .date { font-size: 13px; color: var(--text-2); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.back-btn {
  border: none; background: transparent; color: var(--text);
  font-size: 28px; line-height: 1; cursor: pointer; padding: 0 8px;
  display: flex; align-items: center;
}
.icon-btn {
  border: none; background: var(--glass-strong); color: var(--danger);
  border-radius: 12px; width: 36px; height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--stroke);
}
.edit-topbar .save-btn {
  border: none; background: var(--brand-grad); color: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 700;
  padding: 9px 26px; cursor: pointer;
  box-shadow: 0 5px 14px rgba(255, 110, 61, 0.35);
}
.edit-topbar .save-btn:disabled { opacity: 0.55; box-shadow: none; }

.title-input {
  width: 100%; border: none; font-size: 22px; font-weight: 700;
  padding: 18px 22px 6px; outline: none; background: transparent; color: var(--text);
}
.title-input::placeholder { color: var(--text-3); }
.word-count { text-align: right; font-size: 12px; color: var(--text-3); padding: 0 22px 12px; }

.tpl-bar { display: flex; align-items: center; gap: 10px; padding: 4px 20px 8px; }
.tpl-label { font-size: 12.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.tpl-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tpl-chips::-webkit-scrollbar { display: none; }
.tpl-chip {
  border: 1px solid var(--stroke); background: var(--glass-strong);
  color: var(--text-2); font-size: 12.5px; font-weight: 600; padding: 6px 14px;
  border-radius: 999px; white-space: nowrap; cursor: pointer; flex-shrink: 0;
  transition: all 0.15s ease;
}
.tpl-chip:active { transform: scale(0.96); border-color: var(--brand); color: var(--brand); }

.edit-field {
  margin: 10px 16px; padding: 14px 18px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 18px; box-shadow: var(--shadow);
}
.edit-field-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 12px; font-weight: 600; }
.edit-field-label .svg-ico { color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===== 编辑页「元信息」单卡紧凑（合并心情/天气/位置/标签/媒体） ===== */
.meta-card {
  margin: 10px 16px; padding: 14px 18px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 18px; box-shadow: var(--shadow);
}
.meta-sec { padding: 8px 0; }
.meta-sec + .meta-sec { border-top: 1px dashed var(--stroke); }
.meta-row { display: flex; align-items: flex-start; gap: 12px; }
.meta-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); font-weight: 600; flex-shrink: 0; padding-top: 8px; white-space: nowrap; }
.meta-label .svg-ico { color: var(--brand); }
.meta-row .chips { flex: 1; min-width: 0; }
.meta-mood { display: flex; flex-wrap: wrap; gap: 2px; }
.meta-upload {
  border: 1.5px dashed var(--brand); background: var(--brand-soft);
  color: var(--brand); border-radius: 12px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.meta-upload:active { background: rgba(255, 122, 69, 0.22); }
.meta-upload:disabled { opacity: .5; cursor: wait; }
.meta-clear { flex-shrink: 0; padding-top: 10px; font-size: 12.5px; color: var(--text-3); cursor: pointer; }
.meta-clear:active { color: var(--danger); }
.meta-tag-wrap .chips { gap: 8px; }
.meta-media { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meta-media .meta-label { padding-top: 0; }
.aud-list { margin-top: 10px; gap: 8px; display: flex; flex-direction: column; }
.meta-card .img-grid { margin-top: 10px; }
.meta-card .vid-grid { margin-top: 10px; }

/* 旧 field 兼容 */
.field { padding: 14px 20px; border-top: 1px solid var(--stroke); }
.field-label { font-size: 13px; color: var(--text-2); margin-bottom: 12px; display: block; font-weight: 600; }
.tag-input {
  width: 100%; border: 1px solid var(--stroke); border-radius: 12px;
  padding: 11px 16px; font-size: 15px; outline: none; color: var(--text);
  background: var(--glass-strong);
}
.tag-input:focus { border-color: var(--brand); }
.upload-btn {
  border: 1.5px dashed var(--brand); background: var(--brand-soft);
  color: var(--brand); border-radius: 14px; padding: 13px 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; text-align: center;
  transition: background 0.15s;
}
.upload-btn:active { background: rgba(255, 122, 69, 0.22); }

.date-field { padding: 10px 20px 0; }
.date-input {
  border: 1px solid var(--stroke); background: var(--glass-strong); color: var(--text);
  border-radius: 12px; padding: 10px 16px; font-size: 15px; outline: none; width: 100%;
}
.date-input:focus { border-color: var(--brand); }

/* ---------- 底栏：浮动圆角「药丸」+ 中格凹槽 + 嵌进去的 ➕ ----------
   与小程序的 custom-tab-bar **同规格**（常量两端逐值一致）：
     栏高 62 / ➕ 直径 58（圆心落在栏顶）/ 左右留白 12 / 离底 10 / 凹槽半径 37。
   凹槽用 mask 在栏顶正中挖一个圆 —— 真透明，内容滚到底栏下面能正确透出来
   （用「页面底色圆片」假装凹槽的话，遇到滚上来的卡片就露馅了）。
   ⚠️ 这里刻意改成**实色底**（var(--deck-card)，6 套主题都定义了的不透明卡片色）
     而不是原来的玻璃 + backdrop-filter：
     mask 与 backdrop-filter 挂在同一元素上会把模糊吃掉；顺带也和小程序端一致。 */
.tabbar {
  position: fixed; bottom: 10px; left: 12px; right: 12px;
  margin: 0 auto; max-width: 528px;
  height: 62px;
  display: flex; align-items: center;
  z-index: 50;
}
/* 底：单独一层，专门挂凹槽 mask。
   ⚠️ 绝不能把 mask 挂在 .tabbar 上 —— mask 会连同**后代一起**裁掉，
      而 ➕ 是 .tabbar 的子节点、正好落在凹槽里，会被整个挖掉（只剩一圈虚影，实测踩过）。
   ⚠️ 底是绝对定位 → 会盖在普通流内容之上，所以下面各槽位都要 position:relative + z-index 提层。 */
.tb-bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--deck-card);
  border-radius: 31px;
  box-shadow: var(--shadow-lift);
  -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 37px, #000 38px);
  mask-image: radial-gradient(circle at 50% 0, transparent 37px, #000 38px);
}
.tabbar .tb-side { position: relative; z-index: 1; flex: 1; height: 100%; display: flex; }
/* 中格：固定宽（= 凹槽直径 74）→ 与栏顶凹槽圆心、➕ 的 left:50% 三者严格对齐。
   ⚠️ 若改成 flex:1 让中格跟着均分，tab 少一个时中格就不在 50% 了。 */
.tabbar .tb-center { position: relative; z-index: 1; flex: none; width: 74px; height: 100%; pointer-events: none; }
.tabbar .tab {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; color: var(--text-3);
  transition: color 0.2s;
}
.tabbar .tab span { font-size: 11px; font-weight: 600; }
.tabbar .tab .svg-ico { color: inherit; }
.tabbar .tab.active { color: var(--brand); }
.tabbar .tab.active span { color: var(--brand); }

/* ---------- 底栏 ➕：嵌在中格凹槽里 ----------
   位置：绝对定位在底栏正中（left:50% + translateX(-50%)），圆心**落在栏顶**上
   （bottom: calc(100% - 29px)，半径 29）→ 上半个在栏外、下半个嵌进栏里，
   配合栏顶的 mask 凹槽，就是「加号嵌进菜单栏」的效果。
   ⚠️ 展开时**不**让圆钮原地撑成面板 —— 圆钮一旦离开，凹槽会露出一个空洞。
   展开只是转 45°（像 ✕），面板由独立的 .nf-panel 从上方弹出（两端同一种出场）。 */
.newfab {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 29px);
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-grad);
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  /* 只留品牌投影。❌ 不要再加「底色光环」（box-shadow 0 0 0 6px var(--bg)）：
     底色环和凹槽露出的底色是同一个颜色，会把凹槽的弧线糊成一层厚缝，
     看起来像「贴了个环」而不是「栏被挖了个口」（实测对比过，去掉才像参考图）。 */
  box-shadow: 0 10px 24px rgba(255, 108, 60, 0.4);
  transition: transform 0.16s ease;
}
/* 按压反馈：往下「陷」一点，配合凸起观感 */
.newfab:active { transform: translateX(-50%) translateY(2px) scale(0.96); }
.newfab.open { transform: translateX(-50%) rotate(45deg) scale(0.94); }
.newfab.open:active { transform: translateX(-50%) rotate(45deg) scale(0.94); }

/* ➕ 图形 */
.nf-plus {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* 面板：独立浮在底栏之上（不复用 .newfab 的形变，见上面的说明） */
.nf-panel {
  position: fixed;
  left: 50%;
  bottom: 86px; /* 栏高 62 + 离底 10 + 间隙 14 */
  transform: translateX(-50%);
  width: var(--nf-w, 336px);
  height: 236px;
  padding: 16px 16px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--deck-card);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
  z-index: 51;
  animation: nfPop 0.24s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes nfPop {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.nf-head { display: flex; align-items: center; margin-bottom: 12px; }
.nf-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.nf-close {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.nf-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nf-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 10px 13px; border-radius: 15px; border: 1px solid var(--stroke);
  cursor: pointer; text-align: left;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s;
}
.nf-cell:active { transform: scale(0.96); }
.nf-ico { font-size: 19px; line-height: 1; }
.nf-label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.nf-hint { font-size: 10.5px; line-height: 1.35; color: var(--text-3); }
@media (hover: hover) {
  .nf-cell:hover { background: var(--brand-soft); border-color: transparent; }
}

/* 遮罩：点空白收起面板。z-index 低于底栏 → 底栏仍清晰可点 */
.newfab-scrim {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(22, 18, 26, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.newfab-scrim.show { opacity: 1; pointer-events: auto; }

/* ---------- 批量管理底部栏 ---------- */
.batch-bar {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 500px;
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 18px; box-shadow: var(--shadow-lift);
  padding: 10px 14px; z-index: 60;
  animation: rise .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.batch-bar .batch-info { flex: 1; font-size: 14px; font-weight: 700; }
.batch-bar .batch-btn {
  border: none; border-radius: 12px; padding: 9px 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.batch-bar .batch-btn.ghost { background: var(--bg-2); color: var(--text-2); }
.batch-bar .batch-btn.danger { background: #e5484d; color: #fff; }
.batch-bar .batch-btn.danger:disabled { opacity: .4; cursor: not-allowed; }
.batch-bar .batch-btn:active { transform: scale(.94); }

/* ---------- 日历 ---------- */
.month-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px; }.month-nav .title { font-size: 18px; font-weight: 800; }
.month-nav .arrow { font-size: 26px; color: var(--brand); padding: 0 12px; cursor: pointer; }
.week-row { display: flex; padding: 0 12px; }
.week-row span { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); padding: 8px 0; }
.cal-grid { display: flex; flex-wrap: wrap; padding: 0 12px; }
.cal-cell { width: 14.28%; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border-radius: 14px; overflow: hidden; }
.cal-cell .num { font-size: 15px; }
.cal-cell.today .num { color: #fff; background: var(--brand-grad); border-radius: 50%; width: 34px; height: 34px; line-height: 34px; text-align: center; box-shadow: 0 4px 12px rgba(255, 110, 61, 0.35); }
.cal-cell .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 3px; }
.cal-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 有封面时日期挪到左上角，心情表情独占右下角，形成对角构图 */
.cal-cell .num.on-img { position: absolute; left: 4px; top: 3px; text-align: left; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; background: none; border-radius: 0; width: auto; height: auto; box-shadow: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5); }
.cal-cell.today .num.on-img { left: 4px; top: 3px; transform: none; width: auto; height: auto; line-height: 1; padding: 2px 5px; border-radius: 7px; background: var(--brand-grad); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); text-shadow: none; }
/* 日历心情角标：右下角 */
.cal-cell .cal-mood { position: absolute; right: 2px; bottom: 2px; font-size: 13px; line-height: 1; pointer-events: none; }
.cal-cell .cal-mood.on-img { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.55); }

/* 日历补记直达（v0494） */
.cal-backfill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px 16px 6px; padding: 12px 16px;
  border: 1px dashed var(--brand); border-radius: 12px;
  background: transparent; color: var(--brand); font-size: 14px; font-weight: 600; cursor: pointer;
}
.cal-backfill:active { transform: scale(0.98); background: var(--glass); }

/* ---------- 我的页 ---------- */
/* ===== 游客模式（未登录） ===== */
.guest-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 28px 20px; }
.guest-logo { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.guest-title { font-size: 26px; font-weight: 900; margin: 0 0 8px; }
.guest-sub { font-size: 14px; color: var(--text-3); margin: 0 0 26px; line-height: 1.6; }
.guest-login-btn { width: 100%; max-width: 300px; padding: 14px; font-size: 16px; font-weight: 700; border-radius: 14px; }
.guest-register { margin-top: 14px; color: var(--brand); font-size: 14px; font-weight: 600; cursor: pointer; }
.guest-tip { margin-top: 10px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.guest-strip { display: flex; align-items: center; gap: 12px; margin: 6px 18px 14px; padding: 14px 16px; border-radius: 16px; background: var(--brand-grad); color: #fff; box-shadow: var(--shadow); }
.guest-strip-txt { flex: 1; min-width: 0; }
.guest-strip-t { font-size: 15px; font-weight: 800; }
.guest-strip-s { font-size: 12px; opacity: .92; margin-top: 1px; }
.guest-strip-btn { flex-shrink: 0; padding: 8px 18px; border: none; border-radius: 20px; background: #fff; color: var(--brand); font-size: 14px; font-weight: 800; cursor: pointer; }

.profile { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.profile .big-avatar {
  width: 56px; height: 56px; border-radius: 18px; background: var(--brand-grad);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(255, 110, 61, 0.35);
  overflow: hidden; flex-shrink: 0;
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; flex-shrink: 0; }
.profile .nickname { font-size: 18px; font-weight: 800; display: block; }
.profile .username { font-size: 13px; color: var(--text-3); }
.profile-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-main .nickname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-main .username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-points { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 7px; cursor: pointer; }
.profile-points .pp-num { font-size: 24px; font-weight: 800; color: var(--brand); line-height: 1; }
.profile-points .pp-label { font-size: 12px; color: var(--text-3); }
.action-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--stroke); font-size: 15px; cursor: pointer; }
.action-row:last-child { border-bottom: none; }
.action-row .danger { color: var(--danger); }
.action-row .arrow { color: var(--text-3); font-size: 18px; }
.avatar-upload-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.avatar-preview { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; overflow: hidden; }
.avatar-preview .avatar-img { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border-radius: 50%; display: block; }

/* ---------- 开关 ---------- */
.switch { width: 48px; height: 28px; border-radius: 999px; background: var(--stroke); position: relative; display: inline-block; transition: background 0.2s; cursor: pointer; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.switch.on { background: var(--brand-grad); }
.switch.on .knob { transform: translateX(20px); }

/* ---------- 搜索 / 页头 ---------- */
.header-right { display: flex; align-items: center; gap: 12px; }
.search-pill {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 7px 16px; font-size: 13px;
  color: var(--text-2); cursor: pointer; backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 6px;
}
.page-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 4px; }
.page-title { font-size: 21px; font-weight: 800; flex: 1; }
.manage-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 7px 13px; font-size: 13px;
  color: var(--text-2); cursor: pointer; box-shadow: var(--shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: all .18s;
}
.manage-btn.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 8px; }
.search-input {
  flex: 1; border: 1px solid var(--stroke); background: var(--glass-strong);
  border-radius: 999px; padding: 11px 18px; font-size: 15px; outline: none; color: var(--text);
}
.search-input:focus { border-color: var(--brand); }
.search-go {
  border: none; background: var(--brand-grad); color: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 700; padding: 11px 20px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 110, 61, 0.3);
}

/* 搜索历史（v0494） */
.hist-panel { margin: 2px 12px 8px; }
.hist-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.hist-title { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.hist-clear { margin-left: auto; border: none; background: transparent; color: var(--text-3); font-size: 12px; cursor: pointer; padding: 2px 6px; }
.hist-clear:active { color: var(--danger); }
.hist-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 2px 0; }
.hist-chip {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--text-2); background: var(--glass-strong);
  border: 1px solid var(--stroke); border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.hist-chip:active { transform: scale(0.96); }

/* 高级筛选面板（搜索页） */
.filter-panel {
  margin: 4px 12px 10px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.filter-row { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 12.5px; font-weight: 600; color: var(--text-3); flex: 0 0 34px; }
.filter-select, .filter-date {
  border: 1px solid var(--stroke); background: var(--bg); color: var(--text);
  border-radius: 10px; padding: 7px 10px; font-size: 13px; outline: none; min-width: 0;
}
.filter-select:focus, .filter-date:focus { border-color: var(--brand); }
.filter-sep { font-size: 12px; color: var(--text-3); }
.filter-row .chip { font-size: 12.5px; padding: 5px 10px; }

/* ---------- 标签管理 ---------- */
.add-tag-row { display: flex; gap: 10px; padding: 16px 20px 4px; }
.add-tag-row .tag-input { flex: 1; }
.mini-btn {
  border: none; background: var(--brand-grad); color: #fff;
  border-radius: 12px; padding: 0 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tag-tree-card { padding: 14px 18px; }
.tag-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.tag-row.child { padding-left: 24px; }
.tag-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.tag-dot.sub { background: var(--brand-2); }
.tag-name { font-size: 15px; flex: 1; }
.tag-count { font-size: 12px; color: var(--text-3); }
.mini-del { border: none; background: transparent; color: var(--danger); font-size: 13px; cursor: pointer; padding: 4px 8px; }
.mini-edit { border: none; background: transparent; color: var(--brand); font-size: 13px; cursor: pointer; padding: 4px 8px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(20, 20, 28, 0.9); color: #fff; padding: 11px 22px;
  border-radius: 999px; font-size: 14px; z-index: 999;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: fadeUp 0.25s ease;
}

/* ---------- 加载提示 ---------- */
.load-tip { text-align: center; color: var(--text-3); font-size: 13px; padding: 16px 0; }

/* 日记标题/日期 */
.diary-date { font-size: 13px; color: var(--brand); font-weight: 700; }
.diary-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }

/* ---------- 动效 keyframes ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 页面切换动效 */
.page-enter { animation: fadeUp 0.3s ease; }

/* 底部安全区留白 */
.tab-pad { height: 90px; }

/* ---------- Markdown 渲染 / 编辑器工具栏 ---------- */
.md-body { line-height: 1.7; word-break: break-word; }
.md-body p { margin: 0 0 8px; }
.md-body h1, .md-body h2, .md-body h3 { margin: 12px 0 6px; font-weight: 700; line-height: 1.35; }
.md-body h1 { font-size: 20px; }
.md-body h2 { font-size: 18px; }
.md-body h3 { font-size: 16px; }
.md-body ul, .md-body ol { margin: 0 0 8px; padding-left: 22px; }
.md-body li { margin: 2px 0; }
.md-body blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--brand); background: var(--brand-soft); color: var(--text-2); border-radius: 6px; }
.md-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--brand-soft); color: var(--brand); padding: 1px 6px; border-radius: 4px; }
.md-body pre { background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 10px; padding: 12px; overflow-x: auto; margin: 8px 0; }
.md-body pre code { background: transparent; color: var(--text); padding: 0; }
.md-body a { color: var(--brand); text-decoration: underline; }
.md-body hr { border: none; border-top: 1px dashed var(--stroke); margin: 12px 0; }
.md-body del { color: var(--text-3); }
.md-body img { max-width: 100%; border-radius: 10px; }

.md-toolbar { display: flex; align-items: center; gap: 6px; padding: 4px 16px; overflow-x: auto; }
.md-btn { flex-shrink: 0; min-width: 30px; height: 30px; padding: 0 8px; border: none; border-radius: 8px; background: var(--brand-soft); color: var(--text-2); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.md-btn:active { transform: scale(0.92); }
.md-btn.on { background: var(--brand); color: #fff; }
.md-toggle { font-size: 12px; font-weight: 600; }

.md-preview { min-height: 220px; font-size: 16px; padding: 4px 2px; color: var(--text); }
.md-preview .empty { color: var(--text-3); }

/* ---------- 发现页（画廊/那年今日/随便看看/标签云） ---------- */
/* 导航：可左右滑动；右侧有更多内容时显示渐变遮罩 + 可点击的 › 按钮 */
.disc-nav-wrap { position: relative; display: flex; align-items: center; }
.disc-tabs { display: flex; gap: 8px; padding: 4px 18px 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.disc-tabs::-webkit-scrollbar { display: none; }
.disc-tab { flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 12px; background: var(--glass); border: 1px solid var(--stroke); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s, background .2s; }
.disc-tab:active { transform: scale(.95); }
.disc-tab.fill { flex: 1 1 0; padding: 0 10px; }
.disc-tab.active { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: var(--shadow); }
/* 右侧提示按钮（渐隐遮罩 + 可点击滚动） */
.disc-nav-more {
  position: sticky; right: 0; flex: 0 0 auto;
  width: 34px; height: 34px; margin-right: 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-size: 14px; cursor: pointer;
  box-shadow: var(--shadow);
  animation: navMorePulse 2.2s infinite;
  z-index: 3;
}
.disc-nav-more:active { transform: scale(.9); }
@keyframes navMorePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,69,.35); }
  50% { box-shadow: 0 0 0 6px rgba(255,122,69,0); }
}
@media (min-width: 640px) { .disc-nav-more { display: none; } }

/* 画廊：改由 JS 按「最短列优先」分进 N 个列容器（见 app.js 的 galColumns）。
   原来用 CSS `columns:2`：它是列优先排版（前一半全在第 1 列），既和小程序端的瀑布流不一致，
   改列数时也只能瞬间重排、做不出「每一项连续移动到新位置」。现改为 N 个等宽列 + flex。 */
.masonry { display: flex; align-items: flex-start; gap: 10px; padding: 0 18px; touch-action: pan-y; }
.gal-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.masonry-item { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-2); cursor: pointer; }
.masonry-item img { width: 100%; display: block; }
.masonry-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.55)); }

/* 语义缩放的档位条：手机主要靠双指捏合，这里给出当前档位 + 桌面端的按钮入口 */
.gal-bar { display: flex; align-items: center; gap: 10px; padding: 4px 18px 12px; }
.gal-tip { font-size: 12px; color: var(--text-light); }
.gal-cur { font-size: 12px; font-weight: 700; color: var(--brand); margin-left: auto; }
.gal-btns { display: flex; gap: 6px; }
.gal-btn { width: 28px; height: 28px; line-height: 1; font-size: 16px; border-radius: 50%; border: 1px solid var(--border); background: var(--deck-card); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.gal-btn:not(.off):active { background: var(--brand-soft); }
.gal-btn.off { opacity: .35; cursor: default; }

.dice-btn { display: block; width: calc(100% - 36px); margin: 16px 18px 0; }

/* ---------- 那年今日：上=我的往年记录，下=历史上的今天 ---------- */
.otd-sec { padding: 0 18px; margin-bottom: 22px; }
.otd-sec-head {
  display: flex; align-items: center; gap: 7px;
  margin: 2px 0 10px; padding-left: 2px;
  color: var(--text-2);
}
.otd-sec-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.otd-sec-count {
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: var(--glass); border: 1px solid var(--stroke);
  padding: 1px 8px; border-radius: 999px;
}
.otd-sec-date { font-size: 11px; color: var(--text-3); margin-left: auto; }

/* 节日标签 */
.otd-festival { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.otd-fest-chip {
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: var(--glass); border: 1px solid var(--stroke);
  padding: 3px 10px; border-radius: 999px;
}

/* 加载 / 空态 / 错误 */
.otd-loading { padding: 22px 0; text-align: center; font-size: 13px; color: var(--text-3); }
.otd-mini-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 26px 16px; border-radius: 18px;
  background: var(--glass); border: 1px dashed var(--stroke);
  color: var(--text-3); font-size: 13px; text-align: center; line-height: 1.7;
}
.otd-mini-empty .icon { font-size: 26px; opacity: .8; }
.otd-retry {
  margin-top: 2px; width: auto; flex: none;
  padding: 6px 18px; border-radius: 999px; cursor: pointer;
  background: var(--brand-grad); color: #fff; border: none;
  font-size: 12px; font-weight: 600; box-shadow: var(--shadow);
}
.otd-retry:active { transform: scale(.95); }

/* 世纪分组 */
.otd-era { margin-bottom: 6px; }
.otd-era-label {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  letter-spacing: 1px; margin: 10px 0 6px; padding-left: 2px;
  position: relative;
}
.otd-era:first-child .otd-era-label { margin-top: 0; }
.otd-ev {
  display: flex; align-items: baseline; gap: 9px;
  padding: 8px 12px; margin-bottom: 6px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--stroke);
}
.otd-ev-year {
  flex: 0 0 auto; min-width: 42px;
  font-size: 12px; font-weight: 800;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.otd-ev-title { flex: 1; font-size: 13px; color: var(--text); line-height: 1.6; }
.otd-ev-link {
  flex: 0 0 auto; font-size: 11px; color: var(--text-3);
  text-decoration: none; border-bottom: 1px dotted var(--text-3);
}
.otd-src { margin: 10px 2px 4px; font-size: 11px; color: var(--text-3); text-align: center; opacity: .8; }

/* ---------- 标签云（3D） ---------- */
.cloud-stats { display: flex; gap: 8px; margin: 4px 18px 12px; }
.stat-pill {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}
.stat-pill b { display: block; font-size: 18px; font-weight: 800; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-pill span { font-size: 11px; color: var(--text-2); }

.cloud-stage {
  position: relative; height: 400px; margin: 0 18px;
  border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,158,70,.16), transparent 60%),
    radial-gradient(ellipse at 85% 100%, rgba(96,140,255,.12), transparent 55%),
    var(--bg-2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
@media (max-width: 480px) { .cloud-stage { height: 360px; } }
.cloud-stage canvas.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cloud-inner { position: absolute; inset: 0; }
.cloud-footnote { margin: 12px 18px 0; font-size: 12px; color: var(--text-3); line-height: 1.8; text-align: center; }
.cloud-footnote b { color: var(--brand); font-weight: 700; }
.cloud-fold-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--text-2);
  transition: all .2s;
}
.cloud-fold-toggle:active { transform: scale(.9); }
.cloud-caret { font-size: 15px; line-height: 1; color: var(--brand); font-weight: 700; }
.cloud-hint-body { margin-top: 8px; color: var(--text-3); font-size: 12px; line-height: 1.8; }
.tag-item {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-weight: 700; cursor: pointer; will-change: transform, opacity;
  font-family: inherit; transform-origin: center;
}
.tag-item .cnt { font-weight: 400; opacity: .45; margin-left: 2px; font-size: .7em; }

/* ---------- 随便看看：左右滑动随笔流 ---------- */
.rnd-head { display: flex; align-items: center; padding: 2px 22px 10px; }
.rnd-title { font-size: 13px; color: var(--text-2); font-weight: 600; }
.rnd-count { font-size: 12px; color: var(--text-3); margin-left: auto; }
/* 随便看看：堆叠式轮播 —— 一叠卡错位叠放，上层破碎飞出，下层补位 */
.rnd-viewport {
  position: relative; height: clamp(430px, 62vh, 560px);
  overflow: hidden; padding: 6px 0 12px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.rnd-viewport:active { cursor: grabbing; }
.rnd-viewport img { -webkit-user-drag: none; user-drag: none; user-select: none; }
.stack-deck { position: absolute; inset: 0; }
/* 卡锚点：居中，transform 由 JS 按环向距离驱动缩放/位移/旋转 */
.dwrap {
  position: absolute; left: 50%; top: 50%;
  width: calc(100% - 44px);
  transform: translate(-50%, -50%);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
  will-change: transform, opacity; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dwrap .d-card {
  margin: 0;
  background: var(--deck-card);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--deck-card-border);
  box-shadow: var(--shadow);
}
.dwrap .rnd-date { text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 8px; }
/* 下层卡：隐藏日期，减少视觉噪音；文字全不透明由实底保证不叠影 */
.dwrap:not(.is-top) .rnd-date { opacity: 0; }
.stack-deck.dragging .dwrap { transition: none; }
.rnd-hint { text-align: center; font-size: 11px; color: var(--text-3); margin-top: 8px; }
/* 一轮翻完后的换批提示：淡入 + 轻微上浮，不打断翻阅 */
.rnd-hint-cycle { color: var(--brand); animation: rndHintIn .3s ease; }
@keyframes rndHintIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 破碎特效层：全屏 fixed 可点透 */
.fx-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.fx-layer .fx-shard {
  position: absolute; overflow: hidden; will-change: transform, opacity;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fx-layer .fx-px { position: absolute; border-radius: 2px; }
.fx-layer .fx-spark { position: absolute; border-radius: 50%; box-shadow: 0 0 8px currentColor; }

/* 循环提示（左右都可） */
.rnd-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 2px; }
.rnd-nav .nav-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--stroke);
  background: var(--glass-strong); color: var(--text-2); display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; cursor: pointer;
}
.rnd-nav .nav-btn:active { transform: scale(.92); }

/* ---------- 地图视图 ---------- */
.map-head { display: flex; align-items: center; padding: 6px 20px 0; }
.map-stat { font-size: 12px; color: var(--text-3); margin-left: auto; }
.map-box { position: relative; margin: 10px 16px 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.map-box #amap-box { width: 100%; height: 42vh; min-height: 260px; }
.map-reset {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--stroke);
  background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer;
}
.map-fallback {
  margin: 10px 16px 0; padding: 26px 20px; text-align: center;
  background: var(--glass); border: 1px dashed var(--stroke);
  border-radius: 18px; color: var(--text-2);
}
.map-fb-icon { font-size: 34px; margin-bottom: 8px; }
.map-fb-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.map-fb-desc { font-size: 12.5px; line-height: 1.7; }
.map-fb-desc code { background: var(--bg-2); padding: 1px 5px; border-radius: 5px; font-size: 12px; }

/* 自定义 marker：气泡=篇数，下方标签=地点名，气泡颜色=最近一篇的心情色 */
.map-pin { display: flex; flex-direction: column; align-items: center; width: 40px; cursor: pointer; }
.map-pin .pin-bubble {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
  border: 2.5px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.32);
  transition: transform 0.18s ease;
}
.map-pin.on .pin-bubble { transform: scale(1.28); }
.map-pin .pin-label {
  margin-top: 3px; max-width: 84px; padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.94); color: #333;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
body[data-theme="dark"] .map-pin .pin-label { background: rgba(28,28,36,0.94); color: #eee; }

.map-place-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 8px; }
.map-pin-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.map-place-head .map-place-name { font-size: 15px; font-weight: 800; }
.map-place-count { font-size: 12px; color: var(--brand); font-weight: 700; }
.map-place-date { font-size: 12px; color: var(--text-3); margin-left: auto; }

.map-place {
  display: flex; align-items: center; gap: 12px; margin: 8px 16px; padding: 12px 16px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 16px; box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.18s ease;
}
.map-place:active { transform: scale(0.985); }
.map-place-bubble {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800;
  border: 2.5px solid var(--glass-strong); box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.map-place-info { flex: 1; min-width: 0; }
.map-place-info .map-place-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-place-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.map-diary {
  display: flex; align-items: center; gap: 12px; margin: 8px 16px; padding: 10px 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 16px; box-shadow: var(--shadow); cursor: pointer;
}
.map-diary:active { transform: scale(0.985); }
.map-diary-cover { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--stroke); }
.map-diary-main { flex: 1; min-width: 0; }
.map-diary-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.map-diary-meta .chip.mood-chip { border: none; color: #fff; font-weight: 600; font-size: 11px; padding: 1px 8px; }
.map-diary-meta .photo-chip { font-size: 11px; padding: 1px 8px; }
.map-diary-title { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-diary-ex { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tip { text-align: center; font-size: 12px; color: var(--text-3); padding: 18px 24px 0; line-height: 1.7; }

/* ---------- Vditor 所见即所得编辑器 ---------- */
.vditor-wrap { padding: 0 18px; }
.vditor-host { border: 1px solid var(--stroke); border-radius: 14px; background: var(--bg-2); width: 100%; min-height: 260px; display: block; }
.vditor-host .vditor { border: none; border-radius: 14px; background: var(--bg-2); min-height: 260px; }
.vditor-host .vditor-toolbar { border-bottom: 1px solid var(--stroke); background: var(--bg-2); padding: 4px 5px; min-height: 38px; }
.vditor-host .vditor-content { background: var(--bg); min-height: 220px; }
.vditor-host .vditor-ir { min-height: 220px; padding: 8px 4px; color: var(--text); }

/* ===== 移动端编辑器工具栏：吸底 + 横向滑动（符合手机拇指操作习惯）=====
   宽屏保持工具栏在编辑区上方；窄屏（手机竖屏）时：
   ① 内容区移到上方、工具栏吸在可视区底部（键盘弹出时贴在键盘上方）
   ② 排版顺序用 flex order 反转，不破 Vditor DOM
   ③ 横向可滚动、按钮加大触区，避免挤爆一行 */
@media (max-width: 900px) {
  .vditor-host .vditor { display: flex; flex-direction: column; }
  .vditor-host .vditor-content { order: -1; }
  .vditor-host .vditor-toolbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    order: 2;
    border-bottom: none;
    border-top: 1px solid var(--stroke);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-2);
    padding: 4px 6px;
    min-height: 44px;
    scrollbar-width: thin;
  }
  .vditor-host .vditor-toolbar .vditor-toolbar__item {
    min-width: 40px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .vditor-host .vditor-toolbar .vditor-icon { width: 22px; height: 22px; }
  .vditor-host .vditor-toolbar .vd-hbtn { font-size: 13px; }
  .vditor-host .vditor-toolbar .vditor-toolbar__divider { margin: 0 2px; }
}
/* 工具栏图标颜色：显式跟随主题 token，杜绝深色图标+深色背景撞色 */
.vditor-host .vditor-toolbar .vditor-icon { color: var(--text-2) !important; }
.vditor-host .vditor-toolbar .vditor-icon:hover,
.vditor-host .vditor-toolbar .vditor-icon--current { color: var(--brand) !important; }
.vditor-host .vditor-toolbar .vditor-icon svg { fill: currentColor !important; }
.vditor-host .vditor-toolbar .vditor-toolbar__divider { border-left: 1px solid var(--stroke) !important; }
.vditor-host .vditor-hint,
.vditor-host .vditor-tooltipped { color: var(--text-2); }
.vditor-host .vditor-ir pre,
.vditor-host .vditor-content pre { color: var(--text); }

/* ===== Vditor 主题变量重定义：强制跟随本应用亮暗主题，避免撞色 ===== */
.vditor-host .vditor {
  --textarea-text-color: var(--text);
  --textarea-background-color: var(--bg);
  --toolbar-icon-color: var(--text-2);
  --toolbar-icon-hover-color: var(--brand);
  --toolbar-background-color: var(--bg-2);
  --border-color: var(--stroke);
  --panel-background-color: var(--bg-2);
  --panel-shadow: var(--shadow);
  --second-color: var(--text-3);
  --blockquote-color: var(--text-2);
  --heading-border-color: var(--stroke);
  --ir-heading-color: var(--text);
  --ir-title-color: var(--text-3);
  --ir-link-color: var(--brand);
}

/* 兜底：Vditor 图标 sprite 未加载时，按钮降级为文字标签，避免「能点但看不见」 */
.vditor-host.vditor-no-sprite .vditor-toolbar__item > svg { display: none !important; }
.vditor-host.vditor-no-sprite .vditor-toolbar__item::after {
  content: attr(aria-label);
  font-size: 11px;
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
  padding: 0 2px;
}
.vditor-host.vditor-no-sprite .vditor-toolbar {
  overflow-x: auto;
  flex-wrap: nowrap;
}

/* Vditor 自定义标题按钮（H1/H2/H3） */
.vditor-host .vditor-toolbar .vd-hbtn {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-2);
}
.vditor-host .vditor-toolbar .vditor-toolbar__item:hover .vd-hbtn,
.vditor-host .vditor-toolbar .vditor-toolbar__item--current .vd-hbtn { color: var(--brand); }

/* ---------- 底部弹层（导出 / 兑换码） ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .18s ease; }
/* 「我的」页邀请/编辑资料弹窗：居中显示 */
.overlay.center-pop { align-items: center; padding: 24px 16px; }
.overlay.center-pop .sheet { border-radius: 20px; max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: dSheetIn .22s cubic-bezier(.22,1,.36,1); box-shadow: 0 20px 60px rgba(0,0,0,.32); }
.sheet { width: 100%; max-width: 560px; background: var(--bg); border-radius: 22px 22px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,0.2); animation: slideUp .22s ease; }
.sheet-head { display: flex; align-items: center; margin-bottom: 12px; }
.sheet-title { font-size: 16px; font-weight: 800; flex: 1; }
.sheet-x { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer; }
.sheet-opt { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--stroke); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.sheet-opt:last-child { border-bottom: none; }
.sheet-opt.on { color: var(--brand); }
.sheet-opt .sub { font-size: 12px; color: var(--text-3); font-weight: 400; }

/* ===== 图片编辑器（裁剪/旋转，v0504） ===== */
.crop-mask { align-items: center; padding: 18px 12px; z-index: 260; background: rgba(8,8,12,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.crop-panel { width: 100%; max-width: 440px; background: var(--bg-2, #fff); color: var(--text, #1c1c1e); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: dSheetIn .22s cubic-bezier(.22,1,.36,1); }
.crop-head { display: flex; align-items: center; padding: 14px 16px 10px; }
.crop-title { font-size: 15px; font-weight: 800; }
.crop-stage { flex: none; margin: 0 12px; border-radius: 12px; overflow: hidden; background: #0d0d12; position: relative; touch-action: none; }
.crop-stage canvas { display: block; width: 100%; height: min(46vh, 380px); touch-action: none; user-select: none; -webkit-user-select: none; }
.crop-tools { display: flex; justify-content: center; gap: 26px; padding: 12px 16px 6px; }
.crop-tool { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--stroke, rgba(0,0,0,.06)); color: var(--text, #1c1c1e); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.crop-tool:disabled { opacity: .4; }
.crop-tool:active { transform: scale(.9); }
.crop-ratios { display: flex; justify-content: center; gap: 8px; padding: 8px 16px 4px; flex-wrap: wrap; }
.crop-ratio { padding: 6px 16px; border-radius: 16px; font-size: 13px; font-weight: 600; background: var(--stroke, rgba(0,0,0,.06)); color: var(--text-2, #888); cursor: pointer; }
.crop-ratio.on { background: var(--brand, #5b8def); color: #fff; }
.crop-foot { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.crop-foot .btn-ghost { flex: none; width: auto; padding: 10px 20px; }
.crop-foot .btn { width: auto; flex: 1; padding: 10px 22px; }  /* v0505：预览态主按钮撑满，防 .btn 100% 压扁兄弟 */
.crop-tool-text { align-self: center; font-size: 12px; color: var(--text-2, #888); }
.sheet-field { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.sheet-field label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.sheet-field input { flex: 1; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text); font-size: 14px; }
.sheet-field input[type="date"] { color-scheme: light; }
body[data-theme="dark"] .sheet-field input[type="date"] { color-scheme: dark; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-field textarea {
  flex: 1; width: 100%; min-height: 96px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--stroke); background: var(--bg-2);
  color: var(--text); font-size: 14px; line-height: 1.55; resize: vertical;
  font-family: inherit; box-sizing: border-box;
}
.sheet-field textarea::placeholder { color: var(--text-3); }
/* 意见反馈：bug/建议 切换 */
.fb-type { display: flex; gap: 8px; margin: 6px 0 4px; }
.fb-type-btn {
  flex: 1; height: 40px; border-radius: 12px; border: 1px solid var(--stroke);
  background: var(--bg-2); color: var(--text); font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fb-type-btn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
/* 意见反馈：居中弹窗 + 附件上传 */
.fb-sheet { max-width: 420px; }
.fb-add-btn { border: 1px dashed var(--stroke) !important; color: var(--text-2) !important; }
.fb-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fb-file { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--stroke); }
.fb-file img, .fb-file video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-file-vtag { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 18px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.fb-file-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sheet-actions .btn { flex: 1; }
.sheet-actions .btn-ghost { background: var(--bg-2); color: var(--text-2); }
.sheet-tip { font-size: 12px; color: var(--text-3); line-height: 1.6; margin-top: 10px; }
.sheet-err { font-size: 12.5px; color: var(--danger); margin-top: 10px; }
.priv-hint { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 4px; background: var(--brand-soft); padding: 10px 12px; border-radius: 12px; }
.priv-lock { color: var(--text); }
.priv-lock .svg-ico { color: var(--brand); }
.priv-lock-wrap { display: flex; justify-content: center; padding: 60px 20px; }
.priv-lock-box { width: 100%; max-width: 300px; text-align: center; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 22px; padding: 32px 24px; box-shadow: var(--shadow); }
.priv-lock-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; background: var(--brand-soft); color: var(--brand); margin: 0 auto 14px; }
.priv-lock-title { font-size: 17px; font-weight: 800; }
.priv-lock-desc { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.priv-pin-input { margin-top: 18px; width: 100%; height: 46px; text-align: center; font-size: 20px; letter-spacing: 8px; border-radius: 12px; border: 1px solid var(--brand); background: var(--bg-2); color: var(--text); }
.priv-unlock-btn { margin-top: 16px; width: 100%; }
.priv-lock-back { margin-top: 14px; font-size: 13px; color: var(--text-3); cursor: pointer; }
.priv-lock-forgot { margin-top: 14px; font-size: 13px; color: var(--brand); text-decoration: underline; cursor: pointer; }
.priv-clear-link { color: var(--brand); text-decoration: underline; cursor: pointer; }
.priv-banner { margin: 12px 16px 4px; padding: 9px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.priv-export-verify { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--bg-2); }
.priv-export-verify .sheet-field { margin: 8px 0 4px; }
.dim { color: var(--text-3); }
.priv-toggle-row { display: flex; align-items: center; gap: 10px; margin: 4px 20px 10px; padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer; transition: border-color .2s; }
.priv-toggle-row .priv-toggle-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bg-2); color: var(--text-3); flex-shrink: 0; }
.priv-toggle-row.on .priv-toggle-icon { background: var(--brand-soft); color: var(--brand); }
.priv-toggle-txt { font-size: 14px; font-weight: 700; }
.priv-toggle-sub { font-size: 12px; color: var(--text-3); }
.priv-toggle-row .switch { margin-left: auto; }

/* 编辑页底部：隐私 + 置顶 一行两列 */
.edit-tog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px; margin-bottom: 12px; }
.edit-tog { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer; transition: border-color .2s, background .2s; min-width: 0; }
.edit-tog.on { border-color: var(--brand); background: var(--brand-soft); }
.edit-tog .priv-toggle-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--bg-2); color: var(--text-3); flex-shrink: 0; }
.edit-tog.on .priv-toggle-icon { background: var(--brand); color: #fff; }
.edit-tog-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.edit-tog .priv-toggle-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-tog .switch { width: 40px; height: 24px; flex-shrink: 0; }
.edit-tog .switch .knob { width: 18px; height: 18px; }
.edit-tog .switch.on .knob { transform: translateX(16px); }

/* 地点选择弹层 */
.loc-srv-row {
  display: flex; align-items: center; gap: 10px; color: var(--brand);
  font-size: 14.5px; font-weight: 700; padding: 13px 14px; margin-bottom: 2px;
  background: var(--brand-soft); border-radius: 14px; cursor: pointer;
  transition: transform 0.12s;
}
.loc-srv-row:active { transform: scale(0.98); }
.loc-srv-txt { animation: fadeUp 0.15s ease; }
.loc-res-list { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 2px; }
.loc-res {
  padding: 11px 6px; border-bottom: 1px solid var(--stroke); cursor: pointer;
  transition: background 0.12s;
}
.loc-res:active { background: var(--brand-soft); }
.loc-res:last-child { border-bottom: none; }
.loc-res-name {
  display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text);
}
.loc-res-name svg { color: var(--brand); flex-shrink: 0; }
.loc-res-addr { font-size: 12px; color: var(--text-3); margin: 2px 0 0 19px; line-height: 1.45; }
.loc-empty { font-size: 13px; color: var(--text-3); padding: 14px 6px; text-align: center; }
.loc-sheet-div { height: 1px; background: var(--stroke); margin: 12px 0 8px; }
.loc-section-t {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-3); margin: 0 0 4px;
}
.loc-clear { color: var(--danger); cursor: pointer; padding: 2px 4px; }
.loc-name { font-size: 14px; color: var(--text); }

/* ---------- 积分明细页 ---------- */
.points-hero { margin: 6px 18px 4px; padding: 26px 22px; border-radius: 20px; background: var(--brand-grad); color: #fff; box-shadow: var(--shadow); }
.points-hero .big { font-size: 40px; font-weight: 900; line-height: 1; }
.points-hero .lbl { font-size: 13px; opacity: 0.9; margin-top: 8px; }
.points-redeem-btn { width: auto; flex: none; margin-top: 14px; padding: 8px 18px; font-size: 13px; border-radius: 999px; background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.ledger-list { margin: 12px 0 0; }
.ledger-item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--stroke); }
.ledger-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--glass); color: var(--text); }
.ledger-info { flex: 1; min-width: 0; }
.ledger-info .t { font-size: 14px; font-weight: 700; }
.ledger-info .d { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ledger-amount { font-size: 16px; font-weight: 800; }
.ledger-amount.pos { color: var(--brand); }
.ledger-amount.neg { color: var(--text-2); }

/* ---------- 积分页：连续打卡 + 规则（v0498） ---------- */
.streak-card { margin: 12px 18px 0; padding: 16px 18px; }
.streak-row { display: flex; align-items: center; text-align: center; }
.streak-cell { flex: 1; }
.streak-cell .num { font-size: 30px; font-weight: 900; line-height: 1; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.streak-cell .lbl { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 6px; }
.streak-div { width: 1px; height: 30px; background: var(--stroke); }
.streak-hint { text-align: center; font-size: 12px; color: var(--text-2); margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--stroke); }
.rules-box { margin: 12px 18px 0; background: var(--glass); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.rules-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; }
.rules-head b { font-size: 15px; }
.rules-arrow { color: var(--text-3); font-size: 15px; }
.rules-body { padding: 0 18px 14px; }
.rules-sec { font-size: 12.5px; color: var(--brand); font-weight: 700; margin: 10px 0 6px; }
.rules-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.rules-item .ri-ico { font-size: 18px; line-height: 1.3; }
.rules-item .ri-t { font-size: 13.5px; font-weight: 600; }
.rules-item .ri-d { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ---------- 统计页 ---------- */
.stats-hero { margin: 6px 18px 4px; padding: 22px 22px; border-radius: 20px; background: var(--brand-grad); color: #fff; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; }
.stats-hero .streak-flame { font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)); }
.stats-hero .streak-info { flex: 1; }
.stats-hero .streak-line { font-size: 16px; }
.stats-hero .streak-line b { font-size: 34px; font-weight: 900; }
.stats-hero .streak-tip { font-size: 12.5px; opacity: 0.92; margin-top: 4px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 16px; }
.stat-card { background: var(--glass); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--glass-border); border-radius: 18px; padding: 18px 16px; box-shadow: var(--shadow); text-align: center; }
.stat-card .stat-num { font-size: 30px; font-weight: 900; line-height: 1.1; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }

.stats-media { display: flex; align-items: stretch; padding: 16px 6px; }
.stats-media .media-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats-media .m-emoji { font-size: 24px; line-height: 1; }
.stats-media .m-num { font-size: 18px; font-weight: 800; margin-top: 4px; }
.stats-media .m-label { font-size: 11.5px; color: var(--text-3); }

.stats-extra { padding: 6px 20px; }
.stats-extra .extra-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--stroke); }
.stats-extra .extra-row:last-child { border-bottom: none; }
.stats-extra .extra-row .k { font-size: 14px; color: var(--text-2); }
.stats-extra .extra-row .v { font-size: 14px; font-weight: 700; }

.stats-heat, .stats-mood { padding: 18px 18px 16px; }
.stats-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 15px; font-weight: 800; }
.range-switch { display: flex; gap: 4px; background: var(--bg-2); border-radius: 999px; padding: 3px; }
.range-switch button { border: none; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; }
.range-switch button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
body[data-theme="dark"] .range-switch button.on { background: var(--glass-strong); }

/* ---------- 打卡日历（热力图） ---------- */
.heatmap { display: flex; flex-direction: column; gap: 10px; }
.heat-month { display: flex; align-items: center; gap: 8px; }
.heat-month-head { font-size: 11px; font-weight: 700; color: var(--text-2); width: 48px; flex-shrink: 0; text-align: right; }
.heat-days { display: grid; grid-template-columns: repeat(auto-fill, 13px); gap: 3px; flex: 1; }

/* 单格：lvl0 = 未打卡（底色）；lvl1~lvl5 = 五档，由浅到深（变量随皮肤/明暗走） */
.heat-cell { width: 13px; height: 13px; border-radius: 3.5px; background: var(--bg-2); flex-shrink: 0; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.heat-cell.lvl0 { background: var(--bg-2); }
.heat-cell.lvl1 { background: var(--heat-1); }
.heat-cell.lvl2 { background: var(--heat-2); }
.heat-cell.lvl3 { background: var(--heat-3); }
.heat-cell.lvl4 { background: var(--heat-4); }
.heat-cell.lvl5 { background: var(--heat-5); }
/* 今天：内描边——不撑大格子，也不会溢出到相邻格 */
.heat-cell.today { box-shadow: inset 0 0 0 1.5px var(--brand); }
/* 已选中（详情弹层打开中）：外描边 + 微放大，明确「正在看这一天」 */
.heat-cell.sel { outline: 2px solid var(--brand); outline-offset: 1px; transform: scale(1.18); z-index: 1; }
@media (hover: hover) { .heat-cell:hover { transform: scale(1.18); box-shadow: 0 0 0 1px var(--brand); } }

/* 图例：五个色阶各自标注该档区间，把「深浅代表什么」说清楚 */
.heat-legend { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--stroke); }
.hl-top { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.hl-top .hl-dim { color: var(--text-3); }
.hl-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; margin-top: 9px; }
.hl-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.hl-step i { width: 100%; height: 12px; border-radius: 4px; display: block; }
.hl-step i.lvl1 { background: var(--heat-1); }
.hl-step i.lvl2 { background: var(--heat-2); }
.hl-step i.lvl3 { background: var(--heat-3); }
.hl-step i.lvl4 { background: var(--heat-4); }
.hl-step i.lvl5 { background: var(--heat-5); }
.hl-step span { font-size: 10px; color: var(--text-3); white-space: nowrap; }
/* 图例尾注：一句话讲清合并算法（多记一篇 ≈ 多写 200 字） */
.hl-note { font-size: 10px; color: var(--text-3); line-height: 1.5; margin-top: 8px; }

/* ---------- 某天详情弹层 ---------- */
.day-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.day-stat { background: var(--bg-2); border-radius: 12px; padding: 12px 4px; text-align: center; }
.day-stat .ds-num { font-size: 19px; font-weight: 800; line-height: 1.15; }
.day-stat .ds-lb { font-size: 11px; color: var(--text-3); margin-top: 3px; display: block; }
.day-list { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.day-item { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--stroke); cursor: pointer; }
.day-item:last-child { border-bottom: none; }
.day-item .di-main { flex: 1; min-width: 0; }
.day-item .di-t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 无标题日记：这一行放的是正文摘要而非标题，视觉上弱化以示区别 */
.day-item .di-t.excerpt { font-weight: 500; color: var(--text-2); }
.day-item .di-m { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.day-item .di-go { font-size: 12px; color: var(--brand); font-weight: 700; flex-shrink: 0; }

.mood-chart { width: 100%; height: 120px; display: block; }
.mood-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-3); }

/* ---------- 预制模板管理 ---------- */
.head-add {
  border: none; background: var(--brand-grad); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(255, 110, 61, 0.3);
}
.tpl-list { margin: 12px 0 0; padding-bottom: 20px; }
.tpl-item { margin: 0 16px 12px; padding: 14px 16px; background: var(--glass); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--shadow); }
.tpl-item-head { display: flex; align-items: center; gap: 10px; }
.tpl-item-icon { font-size: 20px; line-height: 1; }
.tpl-item-name { font-size: 15px; font-weight: 800; flex: 1; }
.tpl-badge { font-size: 10px; color: var(--text-3); background: var(--bg-2); padding: 2px 8px; border-radius: 999px; }
.tpl-item-actions { display: flex; gap: 6px; }
.tpl-act { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--bg-2); cursor: pointer; opacity: 0.8; }
.tpl-act:active { transform: scale(0.92); }
.tpl-item-preview { margin-top: 10px; font-size: 13px; color: var(--text-2); line-height: 1.7; border-top: 1px dashed var(--stroke); padding-top: 10px; overflow: hidden; max-height: 96px; }
.tpl-item-preview h1, .tpl-item-preview h2, .tpl-item-preview h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 4px 0 2px; }
.tpl-item-preview h1::before, .tpl-item-preview h2::before, .tpl-item-preview h3::before { content: "# "; color: var(--brand); }
.tpl-item-preview ul, .tpl-item-preview ol { padding-left: 20px; margin: 2px 0; }
.tpl-item-preview li { list-style-position: outside; }
.tpl-item-preview p { margin: 2px 0; }
.tpl-item-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.tpl-count { font-size: 11px; color: var(--text-3); }
.tpl-sheet { padding: 20px; }
.tpl-form-field { margin-bottom: 12px; }
.tpl-form-field label { display: block; font-size: 13px; color: var(--text-2); font-weight: 600; margin-bottom: 6px; }
.sheet-input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text); font-size: 15px; outline: none; }
.sheet-input:focus { border-color: var(--brand); }
.sheet-textarea { width: 100%; min-height: 200px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text); font-size: 14px; line-height: 1.7; outline: none; resize: vertical; font-family: inherit; }
.sheet-textarea:focus { border-color: var(--brand); }
.tpl-form-tip { text-align: right; font-size: 11px; color: var(--text-3); margin: -4px 0 10px; }

/* ---------- 皮肤外观弹层 ---------- */
.skin-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 4px 0 8px; }
.skin-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--stroke); cursor: pointer; transition: border-color .15s, background .15s; }
.skin-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.skin-swatch { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; border: 1px solid rgba(128,128,128,.22); position: relative; overflow: hidden; }
.skin-swatch::before { content: ""; position: absolute; inset: 0; opacity: var(--aurora-op); }
.skin-swatch::after { content: ""; position: absolute; left: 6px; bottom: 6px; height: 12px; border-radius: 4px; width: 26px; }
.skin-swatch.sw-coral { background: linear-gradient(135deg, #fff2e8, #ffe3d0); }
.skin-swatch.sw-coral::before { background: radial-gradient(circle at 80% 15%, rgba(255,158,70,.5), transparent 65%); }
.skin-swatch.sw-coral::after { background: linear-gradient(135deg, #ffa23e, #ff6a3d); }
.skin-swatch.sw-forest { background: linear-gradient(135deg, #eef3e9, #dde8d4); }
.skin-swatch.sw-forest::before { background: radial-gradient(circle at 80% 15%, rgba(120,190,120,.5), transparent 65%); }
.skin-swatch.sw-forest::after { background: linear-gradient(135deg, #6cb976, #2f7a49); }
.skin-swatch.sw-ocean { background: linear-gradient(135deg, #e8f1f9, #d8e6f3); }
.skin-swatch.sw-ocean::before { background: radial-gradient(circle at 80% 15%, rgba(80,160,240,.5), transparent 65%); }
.skin-swatch.sw-ocean::after { background: linear-gradient(135deg, #5aa3e8, #1f6fc4); }
.skin-meta { flex: 1; min-width: 0; }
.skin-name { font-size: 14.5px; font-weight: 700; }
.skin-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.skin-check { color: var(--brand); font-weight: 800; font-size: 18px; }

/* ---------- 字号与字体 ---------- */
.font-sec { padding: 6px 0 10px; }
.font-label { font-size: 13px; color: var(--text-2); font-weight: 700; margin: 10px 0 8px; }
.font-label:first-child { margin-top: 0; }
.font-row { display: flex; flex-wrap: wrap; gap: 8px; }
.font-chip { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--stroke); font-size: 13.5px; color: var(--text-2); cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .12s; user-select: none; }
.font-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.font-chip:active { transform: scale(.94); }
.font-demo { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px dashed var(--stroke); line-height: 1.7; color: var(--text); transition: font-family .2s, font-size .2s; }

/* ---------- 纪念日 ---------- */
.mem-section { margin-bottom: 6px; }
.mem-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 20px 10px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; }
.mem-card:active { transform: scale(.98); }
.mem-card.today { border-color: var(--brand); background: var(--brand-soft); }
.mem-emoji { font-size: 26px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border-radius: 12px; flex-shrink: 0; }
.mem-card.today .mem-emoji { background: #fff; }
.mem-main { flex: 1; min-width: 0; }
.mem-title { font-size: 15.5px; font-weight: 700; }
.mem-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.mem-right { text-align: right; flex-shrink: 0; }
.mem-diff { font-size: 13px; font-weight: 800; color: var(--brand); display: block; }
.mem-diff.today { color: var(--brand); }
.mem-diff.passed { color: var(--text-3); }
.mem-date { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 3px; }
.page-add-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.seg { display: flex; gap: 8px; }
.seg-item { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; border: 1.5px solid var(--stroke); font-size: 13.5px; color: var(--text-2); cursor: pointer; transition: all .15s; }
.seg-item.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.mem-date-row { display: flex; gap: 10px; }
.mem-date-row select { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text); font-size: 15px; padding: 0 10px; }
.mem-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.mem-cat { padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--stroke); font-size: 13px; color: var(--text-2); cursor: pointer; transition: all .15s; }
.mem-cat.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.sheet-danger { margin-top: 14px; text-align: center; color: #ff5a5f; font-size: 14px; font-weight: 700; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,90,95,.35); cursor: pointer; }
.sheet-danger:hover { background: rgba(255,90,95,.08); }

/* ---------- 菜单栏配置 ---------- */
.menu-tip { font-size: 12px; color: var(--text-3); padding: 4px 16px 8px; }
.menu-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.menu-row:active { background: var(--brand-soft); }
.menu-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.menu-label { flex: 1; font-size: 14.5px; font-weight: 600; }

/* ---------- 新手教程 ---------- */
.tut-hero { margin: 12px 20px 16px; padding: 22px 18px; border-radius: 20px; background: var(--brand-grad); color: #fff; position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(255, 110, 61, 0.28); }
.tut-hero h2 { margin: 0 0 6px; font-size: 20px; }
.tut-hero p { margin: 0; font-size: 13.5px; opacity: .92; line-height: 1.6; }
.tut-hero .tut-dismiss { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.6); color: var(--brand); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, transform .12s; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.tut-hero .tut-dismiss:hover { background: #fff; transform: scale(1.03); }
.tut-section { margin: 16px 20px 0; }
.tut-section-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.tut-step { display: flex; gap: 10px; padding: 11px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.tut-step .tut-num { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tut-step b { color: var(--text); }
.tut-tip { font-size: 12.5px; color: var(--text-3); padding: 6px 18px 0; line-height: 1.7; }

/* ============================================================
   UI 质感升级 · 简洁不简单（ui-design-system 方法论 2026-09-04）
   ============================================================ */

/* ——— 按钮系统：层级 + 按压 + 悬停 ——— */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 65%);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.btn:active::after { opacity: 1; transition: opacity 0s; }

/* ——— TabBar：弹性滑动指示（简洁） ——— */
.tabbar { backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); }
.tabbar .tab { transition: color .2s, background .2s, transform .15s cubic-bezier(.34,1.56,.64,1); }
.tabbar .tab:active { transform: scale(.92); }
.tabbar .tab.active { transform: translateY(-1px); }

/* ——— 卡片 hover：轻盈浮起（桌面端） ——— */
@media (hover: hover) {
  .card, .composer { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
  .card:active { transform: scale(.985); }
  .composer:hover, .card:hover { box-shadow: var(--shadow-lift); }
}

/* ——— 页面切换：轻量交错入场 ——— */
.page-enter { animation: fadeUp .32s cubic-bezier(.22,1,.36,1); }
.view-stagger > * { animation: fadeUp .32s cubic-bezier(.22,1,.36,1) backwards; }
.view-stagger > *:nth-child(2) { animation-delay: .04s; }
.view-stagger > *:nth-child(3) { animation-delay: .08s; }
.view-stagger > *:nth-child(4) { animation-delay: .12s; }
.view-stagger > *:nth-child(5) { animation-delay: .16s; }
.view-stagger > *:nth-child(6) { animation-delay: .20s; }

/* ---------- 全站弹层统一「形变」特效（与底栏 ➕ 同一套语言） ----------
   任意 .overlay 出现时，app.js 的 morph 引擎会算出「起点胶囊」并写成 --mc-* CSS 变量，
   这里只负责把起点播成终点：内容**不缩放**，只是被 clip-path 逐步显影（=融化感），
   圆角从胶囊的半圆过渡到弹层自身的圆角 —— 和 ➕ 的「宽高圆角同过渡 + overflow 显影」是同一套。
   ⚠️ 必须写在 480px 媒体查询之前：style.css 里第 2011 行的 @media 至今未闭合，
      其后所有规则（含 dSheetIn 关键帧）只在窄屏生效，放后面桌面端就整段失效。
   进场不写 fill-mode：动画结束后必须回到「无 clip-path」状态，
   否则 inset(0 0 0 0) 会一直把弹层的 box-shadow 裁掉。 */
/* ⚠️ 节奏按「弹层尺寸」自适应（v2026091809 重调 —— 之前所有弹层共用一套常数，两头不讨好）：
   同一个固定参数，在 390×573 的纪念日弹层上是「前段几乎没动、后段猛撑」（顿感 + 不自然），
   在 300×220 的小弹层上却是「一眨眼就完」（干脆、没体验感）——
   因为两者的 **行程比（弹层对角线 ÷ 起点胶囊对角线）差了近 3 倍**（9.5 vs 3.3）。
   解法（app.js 的 morphApply 里算，这里只消费）：
   ① 起点胶囊按**弹层对角线**取比例 → 行程比恒定（≈5.5），所有弹层的主观跨度一致；
   ② 时长 `--mc-dur` 随尺寸略增（0.44~0.60s），大弹层走得久一点才不显得猛；
   ③ **只有小弹层**加「先冒胶囊再撑开」的中间帧（.morph-seed）；
      ⚠️ 大弹层绝不能加中间帧 —— CSS 的 timing-function 是**逐区间**生效的，
      中间帧会让曲线在区间交界处速度归零再起步（= 硬生生停一下），
      位移越大的弹层这个停顿越刺眼，这就是「顿感」的真正来源。 */
@keyframes morphGrow {
  from {
    clip-path: inset(var(--mc-t, 0px) var(--mc-r, 0px) var(--mc-b, 0px) var(--mc-l, 0px) round var(--mc-r0, 26px));
    opacity: .3;
  }
  to {
    clip-path: inset(0px 0px 0px 0px round var(--mc-r1, 22px));
    opacity: 1;
  }
}
/* 小弹层专用两段式：先冒出一颗胶囊（0→22%），再撑开成弹层。
   ⚠️ 两个区间都**显式写** animation-timing-function：默认的 ease 会让区间 2 从速度 0 起步
   （= 可感知的停顿）；区间 2 这里用「起步带初速」的曲线（起点斜率 ≈0.5），
   既有「先冒出来」的层次，又不会在交界处卡一下。 */
@keyframes morphGrowSeed {
  0% {
    clip-path: inset(var(--mc-t, 0px) var(--mc-r, 0px) var(--mc-b, 0px) var(--mc-l, 0px) round var(--mc-r0, 26px));
    opacity: .3;
    animation-timing-function: cubic-bezier(0.34, 0.8, 0.5, 1);
  }
  22% {
    clip-path: inset(calc(var(--mc-t, 0px) * .74) calc(var(--mc-r, 0px) * .74) calc(var(--mc-b, 0px) * .74) calc(var(--mc-l, 0px) * .74) round calc(var(--mc-r0, 26px) * 1.08));
    opacity: 1;
    animation-timing-function: cubic-bezier(0.36, 0.5, 0.3, 1);
  }
  to {
    clip-path: inset(0px 0px 0px 0px round var(--mc-r1, 22px));
    opacity: 1;
  }
}
/* 退场：收回成那颗胶囊再整颗淡掉。⚠️ 同样不加中间帧（理由同上：中间帧 = 停顿），
   单段连续曲线收得比两段式顺。 */
@keyframes morphShrink {
  from { clip-path: inset(0px 0px 0px 0px round var(--mc-r1, 22px)); opacity: 1; }
  to   { clip-path: inset(var(--mc-t, 0px) var(--mc-r, 0px) var(--mc-b, 0px) var(--mc-l, 0px) round var(--mc-r0, 26px)); opacity: 0; }
}
@keyframes morphFadeOut { from { opacity: 1; } to { opacity: 0; } }
/* 弹层自己只做背景 fadeIn：.overlay 常是 .view-stagger 的直接子元素，会被「页面交错入场」
   的 fadeUp(backwards) 整个从 opacity 0 淡入 —— 形变的「形状显影」会被这层淡入吃掉，
   前半段几乎看不见弹层。声明放在 .view-stagger 之后即可覆盖回 fadeIn。 */
.overlay { animation: fadeIn .24s ease; }
/* 时长由 JS 按弹层尺寸算好写进 --mc-dur（见 app.js morphApply） */
.overlay .morph-in { animation: morphGrow var(--mc-dur, .52s) cubic-bezier(.5, 0, .2, 1); }
.overlay .morph-in.morph-seed { animation-name: morphGrowSeed; }
/* 大弹层（占屏 >58%，如纪念日添加/编辑表单）：**不走形变**，改成「从下方浮起 + 淡入」。
   理由：大表单从一颗小胶囊撑开，怎么调都是「从一个点炸开一大片」，不符合直觉；
   上滑浮起才是移动端大表单的标准打开方式（iOS sheet 同款）。
   位移刻意只给 24px（原来 slideUp 是 40px，太"甩"）+ 轻微放大，收尾长尾减速（.32,.72,0,1）
   —— 快起慢收比匀速上滑自然得多。⚠️ 不写 fill-mode：结束后必须回到无 transform，
   否则弹层里的 position:fixed 子元素的包含块会被 transform 影响。 */
/* ⚠️ 类名写两遍是为了把特异性提到 (0,2,0)：下面还有 `.sheet { animation: slideUp .28s }`
   这条 (0,1,0) 的规则，同优先级下位置靠后者会赢，写的单类名会被它盖掉播回 slideUp。 */
.morph-slide.morph-slide { animation: sheetRise .38s cubic-bezier(.32, .72, 0, 1); }
@keyframes sheetRise {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to { opacity: 1; transform: none; }
}
/* 退场层：弹层被 v-if 移除后，引擎克隆一份在这里反向播完再删（全程 pointer-events:none）。
   只有「父节点仍在文档里」才播 —— 说明是用户主动关闭，而不是整页切走，避免切页时闪残影。 */
.morph-exit-layer { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.morph-exit-layer .overlay { animation: morphFadeOut .34s ease forwards; }
.morph-exit-layer .morph-in { animation: morphShrink .34s cubic-bezier(.4, 0, .2, 1) forwards; }
/* ⚠️ 克隆体会连 .morph-seed 一起克隆下来，而「两段式进场」那条规则
   `.overlay .morph-in.morph-seed` 特异性是 (0,3,0)，比上面的 `.morph-exit-layer .morph-in`
   (0,2,0) 高 → 退场会**把进场又播一遍**。这里把特异性补齐到 (0,3,0) 且写在后面。 */
.morph-exit-layer .morph-in.morph-seed { animation-name: morphShrink; }

/* ——— 弹层遮罩暗化 + 玻璃 ——— */
.overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet { animation: slideUp .28s cubic-bezier(.22,1,.36,1); }

/* ——— 列表 / 情感标签：柔和过渡 ——— */
.list-item, .tl-item, .cal-cell, .emoji-pill { transition: transform .18s ease, box-shadow .22s ease; }
.list-item:active, .cal-cell:active, .emoji-pill:active { transform: scale(.95); }

/* ——— 滚动条：纤细且融入主题 ——— */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-soft); }
::-webkit-scrollbar-track { background: transparent; }

/* ——— 加载 / 刷新：呼吸脉冲 ——— */
.skeleton { background: linear-gradient(90deg, var(--bg-2) 25%, var(--glass) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ——— 通用骨架屏布局（基于 .skeleton 组合） ——— */
.sk-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin: 10px 12px; background: var(--glass-strong); border: 1px solid var(--stroke); border-radius: 16px; }
.sk-line { height: 14px; }
.sk-line.w70 { width: 70%; } .sk-line.w55 { width: 55%; } .sk-line.w90 { width: 90%; }
.sk-media { height: 120px; width: 100%; border-radius: 12px; }
.sk-row { display: flex; gap: 8px; align-items: center; }
.sk-chip { width: 56px; height: 16px; border-radius: 8px; }
/* 日历骨架 */
.sk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 12px; }
.sk-cell { aspect-ratio: 1; height: 46px; border-radius: 10px; }
/* 随便看看大卡骨架 */
.sk-deck { width: calc(100% - 48px); height: 400px; margin: 12px 24px; border-radius: 18px; }
/* 历史 AI 主题行 */
.sk-th { display: block; height: 46px; margin: 8px 12px; border-radius: 12px; }
/* 骨架容器进场微动 */
.sk-wrap { animation: skIn .25s ease; }
@keyframes skIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ——— 数字跳动（积分等） ——— */
.num-pop { animation: numPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes numPop { from { transform: scale(1.18); } to { transform: scale(1); } }

/* ——— 按钮开关 knob 惯性 ——— */
.switch .knob { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.switch.on .knob { transform: translateX(20px); }

/* ============================================================
   B 阶段：日内合并时间线（同日多条）+ 全局看图 Lightbox
   ============================================================ */

/* ——— 日内时间轴：左竖线 + 时间节点，同日多条日记串成线 ——— */
.tl-inline { position: relative; margin: 6px 16px 0; }
.tl-inline::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--brand-soft), var(--stroke) 60%, transparent);
}
.tl-item { position: relative; padding: 6px 0 0 22px; }
.tl-item::before {
  content: ""; position: absolute; left: -1px; top: 22px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand); border: 2.5px solid var(--glass-strong);
  box-shadow: 0 0 0 3px var(--brand-soft);
  box-sizing: border-box;
}
.tl-item .tl-time {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  margin: 4px 0 2px -14px; letter-spacing: .4px;
}
.tl-item .tl-time::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--stroke), transparent);
}
.tl-item .d-card { margin: 8px 0 10px; }
.tl-item .d-card:active { transform: scale(0.985); }

/* 单条（无轴线）时保持原样 */
.tl-solo .d-card { margin-top: 10px; }

/* ——— Lightbox 全屏看图：暗遮罩 + 毛玻璃 + 左右滑动 ——— */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(8, 8, 12, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: lbIn .24s cubic-bezier(.22,1,.36,1);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.lb-img {
  max-width: 94vw; max-height: 82vh; border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  object-fit: contain; user-select: none; -webkit-user-drag: none;
  animation: lbZoom .3s cubic-bezier(.22,1,.36,1);
}
@keyframes lbZoom { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lb-cap {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
  font-size: 13px; color: rgba(255,255,255,.82); pointer-events: none;
}
.lb-count {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 54px;
  font-size: 12px; color: rgba(255,255,255,.65); letter-spacing: .5px;
}
.lb-close {
  position: absolute; top: 8px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
}
.lb-close:active { transform: scale(.9); background: rgba(255,255,255,.2); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s; cursor: pointer;
}
.lb-nav:active { transform: translateY(-50%) scale(.9); background: rgba(255,255,255,.2); }
.lb-nav.prev { left: 14px; }
.lb-nav.next { right: 14px; }
.lb-flag {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #fff; padding: 6px 12px; border-radius: 99px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px); cursor: pointer;
}
@media (max-width: 480px) {
  .lb-nav { width: 38px; height: 38px; font-size: 22px; }
  .lb-close { width: 36px; height: 36px; font-size: 20px; }
  /* 窄屏：图标组均匀铺满整行，底部日期靠左、语音/发布靠右两端对齐（收紧保证发布不溢出） */
  .composer-icns .tool-btn { flex: 1 1 0; min-width: 0; }
  .composer-foot { gap: 8px; }
  .quick-mic-btn, .rec-btn { min-width: 96px; padding: 0 12px; }
  .compose-send { padding: 10px 18px; }

/* ——— 编辑页预览弹层：底部 sheet + 可滚动正文 ——— */
.preview-sheet {
  width: 100%; max-width: 640px; max-height: 84vh;
  background: var(--bg); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
  animation: slideUp .28s cubic-bezier(.22,1,.36,1);
}
.preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; flex-shrink: 0;
}
.preview-title { font-size: 16px; font-weight: 800; }
.preview-body { overflow-y: auto; padding: 4px 18px calc(18px + env(safe-area-inset-bottom)); }
.pv-title { font-size: 22px; font-weight: 800; line-height: 1.35; margin-bottom: 8px; }
.pv-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; }
.pv-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.pv-imgs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; cursor: zoom-in; border: 1px solid var(--stroke); }
.pv-vids { display: grid; gap: 10px; margin-top: 14px; }
.pv-vids video { width: 100%; border-radius: 10px; background: #000; }
.preview-body .md-body img { max-height: 60vh; object-fit: contain; }
@media (min-width: 640px) {
  .preview-sheet { border-radius: 22px; margin: 4vh auto; }
}

/* ===== AI 月/年总结 ===== */
.ai-range { display: flex; gap: 8px; margin: 4px 0 12px; }
.ai-range button {
  flex: 1; padding: 9px 0; border-radius: 12px; border: 1px solid var(--stroke);
  background: var(--glass-strong); color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .18s;
}
.ai-range button.on { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(255,110,61,.28); }
.ai-custom { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; }
.ai-custom input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text); font-size: 13px; }
.ai-custom span { color: var(--text-3); font-size: 12px; }
.ai-tip { font-size: 12px; color: var(--text-3); margin: 2px 0 10px; }
/* AI 模型状态行（AI 月总结页顶部） */
.ai-model-row {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 16px 12px; padding: 11px 14px;
  background: var(--glass); border: 1px solid var(--stroke);
  border-radius: 14px; cursor: pointer; font-size: 13px;
}
.ai-model-row:active { background: var(--brand-soft); }
.ai-model-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.ai-model-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(48,164,108,.18); }
.ai-model-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; overflow: hidden; }
.ai-model-text b { color: var(--text); }
.ai-model-text i { font-style: normal; font-size: 12px; opacity: .85; }
.ai-model-more { color: var(--brand); font-weight: 700; font-size: 13px; }
.ai-cfg-btn { font-size: 13px; }

/* —— AI 模型配置页 —— */
.ai-cfg-ctx { padding: 0 16px 90px; }
.ai-cfg-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ai-cfg-field { display: flex; flex-direction: column; gap: 5px; }
.ai-cfg-field label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.ai-cfg-field input {
  width: 100%; height: 44px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--stroke); background: var(--glass);
  color: var(--text); font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.ai-cfg-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-cfg-presets { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
.ai-cfg-preset {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--stroke);
  background: var(--glass); color: var(--text-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ai-cfg-preset:active { background: var(--brand-soft); color: var(--brand); }
.ai-cfg-preset.on { background: var(--brand-grad); color: #fff; border-color: transparent; }
.ai-cfg-status { font-size: 12.5px; line-height: 1.6; padding: 10px 12px; border-radius: 12px; }
.ai-cfg-status.ok { background: rgba(48,164,108,.1); color: var(--ok); }
.ai-cfg-status.err { background: rgba(229,72,77,.08); color: #e5484d; }
.ai-cfg-btns { display: flex; gap: 10px; margin-top: 4px; }
.ai-cfg-btns .btn { flex: 1; }
.ai-cfg-tut-link {
  margin-top: 14px; padding: 13px 16px; border-radius: 14px;
  background: var(--glass); border: 1px dashed var(--stroke);
  color: var(--text-2); font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.ai-cfg-tut-link:active { background: var(--brand-soft); }
.ai-cfg-tut-link .arrow { margin-left: auto; color: var(--brand); font-weight: 700; }
.ai-cfg-note { margin-top: 14px; font-size: 12px; color: var(--text-3); line-height: 1.7; }

/* —— AI 模型教程页 —— */
.ai-tut-page { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; }
.ai-tut-inner { padding: 60px 18px 40px; max-width: 560px; margin: 0 auto; }
.ai-tut-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ai-tut-head .page-title { font-size: 17px; font-weight: 800; }
.ai-tut-cover {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-radius: 14px; background: var(--brand-grad); color: #fff;
  margin-bottom: 18px; box-shadow: 0 8px 24px rgba(255,110,61,.3);
}
.ai-tut-cover .bk { font-size: 30px; }
.ai-tut-cover .tx { font-size: 12.5px; line-height: 1.6; opacity: .96; }
.ai-tut-step {
  display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--stroke);
}
.ai-tut-step:last-child { border-bottom: none; }
.ai-tut-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand); font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 2px;
}
.ai-tut-step h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.ai-tut-step p { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.ai-tut-code {
  background: var(--bg-2); border-radius: 10px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--text); margin: 8px 0; overflow-x: auto; white-space: pre;
  border: 1px solid var(--stroke);
}
.ai-tut-warn { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(229,72,77,.07); color: #d9534f; font-size: 12.5px; line-height: 1.7; }
.ai-tut-warn b { font-weight: 800; }
.ai-gen {
  width: 100%; padding: 13px 0; border: none; border-radius: 14px;
  background: var(--brand-grad); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,110,61,.3); transition: transform .12s, opacity .2s;
}
.ai-gen:active { transform: scale(.97); }
.ai-gen:disabled { opacity: .6; }
.ai-error { color: #e5484d; font-size: 13px; margin-top: 10px; background: rgba(229,72,77,.08); padding: 10px 12px; border-radius: 10px; }
.ai-result { margin-top: 14px; padding: 16px; }
.ai-result-head { display: flex; align-items: center; margin-bottom: 10px; }
.ai-result-title { font-size: 15px; font-weight: 800; }
.ai-result-cost { margin-left: auto; font-size: 12px; color: var(--text-3); }
.ai-body { font-size: 14px; line-height: 1.75; }
.ai-result-actions { display: flex; gap: 10px; margin-top: 14px; }
.ai-result-actions .btn { flex: 1; }
.ai-edit-ta {
  width: 100%; box-sizing: border-box; min-height: 220px;
  padding: 12px 14px; resize: vertical;
  border-radius: 14px; border: 1.5px solid var(--stroke);
  background: var(--bg-2); color: var(--text);
  font-size: 14.5px; line-height: 1.7; font-family: inherit;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.ai-edit-ta:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.btn-danger {
  background: transparent; color: #e5484d;
  border: 1.5px solid rgba(229,72,77,.35);
  box-shadow: none;
}
.btn-danger:active { transform: scale(.97); }
.ai-hist { margin-top: 6px; }
/* AI 主题墙折叠头（v0494） */
.ai-hist-caret { user-select: none; }
.ai-hist-n { font-size: 11px; color: var(--brand); background: var(--brand-soft); padding: 1px 7px; border-radius: 999px; }
.ai-hist-caret-ico { font-size: 13px; color: var(--text-3); }
.ai-hist-del {
  margin-left: 6px; flex-shrink: 0; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent;
  color: var(--text-3); font-size: 12px; cursor: pointer;
  transition: background .2s, color .2s;
}
.ai-hist-del:active { background: rgba(229,72,77,.12); color: #e5484d; }
.ai-dialog { margin-top: 12px; padding: 16px; }
.dlg-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.dlg-item { padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.dlg-item.user { background: var(--brand-soft); align-self: flex-end; max-width: 86%; }
.dlg-item.assistant { background: var(--bg-2); align-self: flex-start; max-width: 100%; }
.dlg-input { display: flex; gap: 8px; align-items: stretch; width: 100%; }
.dlg-input textarea {
  flex: 1 1 auto; min-width: 0; width: 100%; min-height: 84px; max-height: 168px;
  padding: 12px 14px; resize: none; overflow-y: auto;
  border-radius: 14px; border: 1.5px solid var(--stroke);
  background: var(--bg-2); color: var(--text);
  font-size: 15.5px; line-height: 1.55; font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
}
.dlg-input textarea::placeholder { color: var(--text-3); }
.dlg-input textarea:focus {
  outline: none; border-color: var(--brand);
  background: var(--glass-strong);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.dlg-input .btn { flex-shrink: 0; width: auto; height: 48px; padding: 0 18px; border-radius: 14px; font-size: 15px; align-self: flex-end; }
.ai-hist-item { display: flex; align-items: center; gap: 8px; padding: 13px 14px; margin-bottom: 6px; cursor: pointer; }
.ai-hist-item:active { background: var(--brand-soft); }
.ai-hist-label { font-size: 14px; font-weight: 600; }

/* ===== AI 总结主题墙 + 命名（v0471） ===== */
.ai-title-input { margin: 0 0 10px; }
.ai-title-input input {
  width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px;
  border-radius: 12px; border: 1.5px solid var(--stroke);
  background: var(--bg-2); color: var(--text); font-size: 14px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.ai-title-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-rename-input {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px;
  border-radius: 8px; border: 1.5px solid var(--brand);
  background: var(--bg-2); color: var(--text); font-size: 14px; font-weight: 600;
  outline: none;
}
.ai-result-title { font-size: 15px; font-weight: 800; cursor: pointer; }
.ai-result-rename {
  margin-left: 8px; flex-shrink: 0; font-size: 11px; color: var(--brand);
  background: var(--brand-soft); padding: 2px 8px; border-radius: 20px; cursor: pointer;
}
.ai-result-sub { margin-left: 8px; font-size: 12px; color: var(--text-3); flex-shrink: 0; }
.ai-theme {
  padding: 14px 15px; margin-bottom: 10px; cursor: pointer;
  border-left: 3px solid var(--brand);
}
.ai-theme:active { background: var(--brand-soft); }
.ai-theme-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-theme-label { font-size: 14.5px; font-weight: 800; flex: 1 1 auto; min-width: 0; }
.ai-theme-chips { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ai-theme-range { font-size: 11px; color: var(--text-3); background: var(--bg-2); padding: 2px 8px; border-radius: 20px; }
.ai-theme-n { font-size: 11px; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 20px; }
.ai-theme-preview {
  margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-theme-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ai-theme-foot .ai-hist-time { font-size: 11px; color: var(--text-3); }

/* ===== 语音转文字（阶段D v0457） ===== */
.rec-bar {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 12px;
  padding: 0 2px; flex-wrap: wrap;
}
/* 编辑页「按住说话」：基础样式已由顶部 .quick-mic-btn, .rec-btn 合并规则统一（height:40px），此处仅覆盖录音态 */
.rec-btn.recording {
  background: var(--danger, #e5484d); color: #fff;
  animation: recPulse 1.2s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(229, 72, 77, 0.45);
}
.rec-btn.busy { opacity: .75; cursor: wait; }
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .45); }
  50% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); }
}
.rec-hint { font-size: 12.5px; color: var(--text-3); }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: recBlink 1s infinite; }
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.rec-sec { font-variant-numeric: tabular-nums; font-size: 13px; }
.rec-busy { font-size: 13px; }
.rec-live {
  width: 100%; margin-top: 6px; padding: 8px 12px; border-radius: 10px;
  background: var(--brand-soft, rgba(245, 166, 35, .12)); border-left: 3px solid var(--brand);
  font-size: 13.5px; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  animation: recFadeIn .3s ease;
}
@keyframes recFadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* 语音附件展示（时间线/编辑页） */
.aud-row, .aud-grid { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.aud-grid { flex-direction: row; flex-wrap: wrap; }
.aud-wrap, .aud-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; }
.aud-grid .aud-wrap { width: auto; flex: 1 1 45%; min-width: 180px; background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 12px; padding: 8px 10px; box-sizing: border-box; }
.aud-grid .img-del { top: 6px; right: 6px; }
.aud-item audio, .aud-wrap audio { width: 100%; height: 36px; }
.aud-item { flex-direction: column; align-items: flex-start; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 12px; margin-bottom: 6px; box-sizing: border-box; }
.aud-txt { font-size: 13px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pv-auds { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pv-auds audio { width: 100%; height: 40px; }

/* ============ 文件附件（file 类型，可下载） ============ */
.file-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.file-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.file-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 10px;
  color: var(--brand); text-decoration: none; font-size: 13.5px;
  min-width: 0; flex: 1;
}
.file-item svg { flex: 0 0 auto; color: var(--brand); }
.file-item .file-name { flex: 1 1 auto; min-width: 0; }
.file-item.quick { position: relative; }
.file-item .img-del {
  flex: 0 0 auto; width: 20px; height: 20px; margin-left: 6px;
  background: var(--danger); color: #fff; border-radius: 50%; font-size: 14px;
  line-height: 20px; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-files { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ============ 时间线样式切换（data-tl） ============
   compact=紧凑（缩小卡片间距/内边距，密度更高）
   minimal=极简（弱化卡片盒子，突出文字，减少杂色）
   仅作用于时间线视图（.tl-inline/.tl-item/.tl-solo），不影响首页/搜索等卡片 */
body[data-tl="compact"] .tl-inline { margin: 2px 12px 0; }
body[data-tl="compact"] .tl-item { padding: 2px 0 0 18px; }
body[data-tl="compact"] .tl-item .d-card { margin: 6px 0 6px; }
body[data-tl="compact"] .tl-item .tl-time { margin: 3px 0 0 -12px; font-size: 11.5px; }
body[data-tl="compact"] .tl-solo .d-card { margin: 8px 12px 4px; }
body[data-tl="compact"] .d-card { padding: 12px 14px 12px 16px; border-radius: 14px; margin: 8px 12px; box-shadow: none; }
body[data-tl="compact"] .d-card .diary-title { font-size: 15px; }
body[data-tl="compact"] .d-card .diary-content,
body[data-tl="compact"] .d-card .diary-excerpt { font-size: 14px; line-height: 1.5; }
body[data-tl="compact"] .section-title { padding-top: 10px; font-size: 12.5px; }

body[data-tl="minimal"] .tl-inline { margin: 4px 20px 0; }
body[data-tl="minimal"] .tl-item { padding: 0 0 0 20px; }
body[data-tl="minimal"] .tl-item .d-card {
  margin: 6px 0 10px; padding: 12px 14px;
  background: transparent; border: none; border-radius: 0;
  box-shadow: none; border-left: 2px solid var(--brand-soft);
}
body[data-tl="minimal"] .tl-item .d-card .diary-title { font-size: 15px; }
body[data-tl="minimal"] .tl-item .d-card .diary-content,
body[data-tl="minimal"] .tl-item .d-card .diary-excerpt { font-size: 14px; color: var(--text-2); line-height: 1.6; }
body[data-tl="minimal"] .tl-solo .d-card {
  margin: 6px 20px; padding: 12px 16px;
  background: transparent; border: none; border-radius: 0; box-shadow: none; border-left: 2px solid var(--brand-soft);
}
body[data-tl="minimal"] .section-title { padding: 10px 24px 0; }

/* ——— 全局只读日记详情弹层（详情先看、编辑按钮才编） ——— */
.ov-h { overflow: hidden; }
.detail-mask {
  position: fixed; inset: 0; z-index: 980;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px 14px;
}
.detail-sheet {
  width: 100%; max-width: 500px; max-height: min(86vh, 720px);
  background: var(--bg-2, #fff); color: var(--text, #1c1c1e);
  border-radius: 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
  animation: dSheetIn .24s cubic-bezier(.22,1,.36,1);
}
@keyframes dSheetIn { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.detail-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 18px 18px 10px;
}
.detail-hd-left { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.detail-date { font-size: 15px; font-weight: 800; letter-spacing: .2px; color: var(--text, #1c1c1e); }
.detail-hd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.detail-hd-chips .chip { font-size: 12px; padding: 3px 9px; }
.detail-close {
  width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 50%;
  background: var(--stroke, rgba(0,0,0,.06)); color: var(--text-2, #888);
  display: flex; align-items: center; justify-content: center;
}
.detail-close:active { transform: scale(.9); }
.detail-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 18px 16px;
}
.detail-loading { padding: 26px 0; text-align: center; color: var(--text-2, #888); font-size: 14px; }
.detail-title {
  font-size: 20px; font-weight: 800; line-height: 1.4;
  margin: 8px 0 12px; color: var(--text, #1c1c1e); letter-spacing: .2px;
}
.detail-body { font-size: 15px; line-height: 1.75; color: var(--text, #1d1d1f); }
.detail-body p { margin: 0 0 10px; }
.detail-sec { margin: 16px 0 4px; }
.detail-sec-title {
  display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  color: var(--text-3, #888); text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 8px;
}
.detail-imgs, .detail-vids { display: flex; flex-direction: column; gap: 10px; }
.detail-imgs img, .detail-vids video { width: 100%; border-radius: 12px; cursor: zoom-in; object-fit: contain; max-height: 64vh; background: var(--bg-2, #000); }
.detail-auds { display: flex; flex-direction: column; gap: 8px; }
.detail-auds audio { width: 100%; }
.detail-auds .aud-item { background: var(--glass-strong, rgba(0,0,0,.05)); border: 1px solid var(--stroke, rgba(0,0,0,.06)); border-radius: 12px; padding: 9px 10px; }
.detail-auds .aud-txt { font-size: 13px; color: var(--text-2, #666); margin-top: 5px; line-height: 1.6; }
.detail-fls { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-fls .file-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 20px; font-size: 13px;
  background: var(--glass-strong, rgba(0,0,0,.06)); color: var(--text, #1a1a1c); text-decoration: none;
  border: 1px solid var(--stroke, rgba(0,0,0,.06));
}
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.detail-tags .tag {
  font-size: 12px; padding: 3px 9px; border-radius: 8px; cursor: pointer;
  background: var(--brand-soft, rgba(64,120,255,.14)); color: var(--brand, #3d7bff);
}
.detail-foot {
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--stroke, rgba(128,128,128,.14));
}
.detail-edit {
  width: 100%; height: 46px; border: none; border-radius: 14px;
  background: var(--brand-grad, linear-gradient(135deg,#4a7dff,#2f5bff));
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.detail-edit:active { filter: brightness(.94); transform: scale(.99); }
.priv-chip { color: #c9822a; background: rgba(255,170,0,.18); }
/* 纪念日详情查看（先看后编） */
.mem-view-overlay { z-index: 985; }
.detail-sheet.mem-view { width: 92%; max-width: 380px; padding: 0; }
.mem-head { align-items: center; gap: 12px; padding: 16px 16px 8px; }
.mem-head .detail-close { align-self: flex-start; margin-top: 0; }
.mem-view-emoji.big {
  width: 54px; height: 54px; flex: none; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; line-height: 1;
  background: var(--glass-strong, rgba(0,0,0,.06)); border: 1px solid var(--stroke, rgba(0,0,0,.06));
}
.mem-view-hd { flex: 1; min-width: 0; }
.mem-view-title { font-size: 19px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; color: var(--text, #1c1c1e); }
.mem-view-cat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--text-2, #666); }
.mem-view-cat .tag { font-size: 11px; padding: 3px 9px; border-radius: 7px; background: var(--brand-soft, rgba(64,120,255,.14)); color: var(--brand, #3d7bff); font-weight: 600; }
.mem-view-cat .chip { font-size: 11px; padding: 3px 8px; }
/* 计数 + 备注统一卡片风格 */
.mem-view-body { padding: 4px 16px 4px; }
.mem-view-count {
  background: var(--glass-strong, rgba(0,0,0,.05)); border: 1px solid var(--stroke, rgba(0,0,0,.06));
  border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; text-align: center;
}
.mem-view-diff { font-size: 24px; font-weight: 800; letter-spacing: .3px; }
.mem-view-diff.today { color: var(--danger, #e5484d); }
.mem-view-diff.upcoming { color: var(--brand, #3d7bff); }
.mem-view-diff.passed { color: var(--text-2, #888); }
.mem-view-date { font-size: 13px; color: var(--text-2, #888); margin-top: 7px; letter-spacing: .1px; }
.mem-view-note {
  background: var(--glass-strong, rgba(0,0,0,.05)); border: 1px solid var(--stroke, rgba(0,0,0,.06));
  border-radius: 14px; padding: 12px 16px;
}
.mem-view-note-label { font-size: 11px; color: var(--text-3, #999); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.mem-view-note-txt { font-size: 14px; line-height: 1.6; color: var(--text, #1d1d1f); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.mem-foot { display: flex; gap: 10px; }
.mem-foot .detail-edit { flex: 1; width: auto; }
.mem-foot .btn-ghost.mem-del { flex: none; width: auto; min-width: 0; padding: 0 22px; background: var(--glass-strong, rgba(0,0,0,.06)); color: var(--danger, #e5484d); box-shadow: none; white-space: nowrap; margin-top: 0; }
/* AI 润色（v0491）：居中预览弹层，原文/润色后对比 */
.polish-sheet { max-width: 440px; }
.ai-polish-btn { color: var(--brand, #1f87ff) !important; }
.ai-polish-btn:disabled { opacity: .5; }
.polish-sec {
  background: var(--glass-strong, rgba(0,0,0,.05));
  border: 1px solid var(--stroke, rgba(0,0,0,.06));
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
}
.polish-sec.fresh { border-color: var(--brand-soft, rgba(31,135,255,.35)); }
.polish-tag {
  font-size: 11px; font-weight: 700; color: var(--text-3, #999);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
.polish-body {
  font-size: 14px; line-height: 1.75; color: var(--text, #1d1d1f);
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto;
}
.polish-divider { text-align: center; font-size: 12px; color: var(--text-3, #999); margin: 2px 0 12px; letter-spacing: 1px; }
.polish-warn {
  margin: 10px 0 4px; padding: 9px 12px; border-radius: 10px;
  background: rgba(245, 166, 35, .14); color: #b8860b; font-size: 13px; line-height: 1.5;
}
.polish-foot { display: flex; gap: 10px; margin-top: 4px; }
.polish-foot .btn { flex: 1; width: auto; }
.polish-foot .btn-ghost.mem-del { flex: none; width: auto; padding: 0 22px; background: var(--glass-strong, rgba(0,0,0,.06)); color: var(--text-2, #666); box-shadow: none; white-space: nowrap; }
@media (min-width: 640px) {
  .detail-mask { padding: 32px 20px; }
  .detail-sheet { max-width: 560px; max-height: 82vh; }
}

/* ===== AI 主题墙分组 + 搜索（v0495） ===== */
/* 搜索框 */
.ai-search { margin-top: 14px; padding: 14px; }
.ai-search-row { display: flex; gap: 8px; }
.ai-search-row input {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px;
  border-radius: 12px; border: 1.5px solid var(--stroke);
  background: var(--bg-2); color: var(--text); font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ai-search-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-search-btn {
  flex-shrink: 0; height: 42px; padding: 0 16px; border: none; border-radius: 12px;
  background: var(--brand-grad); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ai-search-btn:disabled { opacity: .6; }
.ai-search-res { margin-top: 12px; border-top: 1px solid var(--stroke); padding-top: 10px; }
.ai-search-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.ai-search-clear { color: var(--brand); font-weight: 700; cursor: pointer; }
.ai-search-empty { font-size: 13px; color: var(--text-3); padding: 10px 0; text-align: center; }
.ai-search-item {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px; margin-bottom: 6px;
  border-radius: 12px; background: var(--bg-2); cursor: pointer; font-size: 13.5px;
}
.ai-search-item:active { background: var(--brand-soft); }
.ai-search-tag {
  flex-shrink: 0; font-size: 11px; color: var(--brand); background: var(--brand-soft);
  padding: 2px 7px; border-radius: 999px;
}
.ai-search-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.ai-search-time { flex-shrink: 0; font-size: 11px; color: var(--text-3); }

/* 分组文件夹 */
.ai-grp-list { margin-top: 6px; }
.ai-grp { padding: 0; overflow: hidden; margin-bottom: 8px; }
.ai-grp-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px; cursor: pointer; user-select: none; }
.ai-grp-head:active { background: var(--brand-soft); }
.ai-grp-caret { flex-shrink: 0; font-size: 12px; color: var(--text-3); }
.ai-grp-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--text); }
.ai-grp-n { flex-shrink: 0; font-size: 11px; color: var(--brand); background: var(--brand-soft); padding: 1px 7px; border-radius: 999px; }
.ai-grp-tools { flex-shrink: 0; display: flex; gap: 4px; margin-left: 4px; }
.ai-grp-tool {
  width: 26px; height: 26px; border: none; border-radius: 8px; background: var(--bg-2);
  color: var(--text-2); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ai-grp-tool:active { background: var(--brand-soft); color: var(--brand); }
.ai-grp-del:active { background: rgba(229,72,77,.12); color: #e5484d; }
.ai-grp-body { padding: 0 12px 12px 12px; }
.ai-grp-empty { font-size: 12.5px; color: var(--text-3); padding: 10px; text-align: center; border: 1px dashed var(--stroke); border-radius: 12px; }
.ai-grp-mode {
  margin-left: 6px; flex-shrink: 0; font-size: 11px; color: var(--brand);
  background: var(--brand-soft); padding: 3px 9px; border: none; border-radius: 20px; cursor: pointer;
}
.ai-grp-mode:active { background: var(--brand); color: #fff; }

/* 新建分组 */
.ai-grp-new { display: flex; gap: 8px; margin: 8px 0 4px; }
.ai-grp-new input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
  border-radius: 12px; border: 1.5px dashed var(--stroke);
  background: var(--bg-2); color: var(--text); font-size: 13px; outline: none;
}
.ai-grp-new input:focus { border-color: var(--brand); }
.ai-grp-addbtn {
  flex-shrink: 0; height: 40px; padding: 0 14px; border: none; border-radius: 12px;
  background: var(--bg-2); color: var(--brand); font-size: 13px; font-weight: 700; cursor: pointer;
}
.ai-grp-addbtn:disabled { opacity: .6; }

/* 未分组区 */
.ai-ungrp { margin-top: 4px; }
.ai-ungrp-tip { font-size: 12px; color: var(--text-3); text-align: center; padding: 10px; }

/* 移动主题到分组弹层 */
.sheet-center { position: relative; }
.ai-move-list { display: flex; flex-direction: column; }
.ai-move-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 4px; border-bottom: 1px solid var(--stroke); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.ai-move-opt:last-child { border-bottom: none; }
.ai-move-opt:active { color: var(--brand); }
.ai-move-n { font-size: 12px; color: var(--text-3); font-weight: 400; }
.ai-move-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 14px 0; }

/* ===== 邀请好友（v0497） ===== */
.invite-box {
  background: var(--bg-2); border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 12px;
}
.invite-box .invite-label { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.invite-box .invite-code {
  font-size: 24px; font-weight: 800; letter-spacing: 3px; color: var(--brand); font-family: var(--font-mono, monospace);
}
.leave-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--stroke); }
.leave-item:last-child { border-bottom: none; }
.leave-item .avatar-mini {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex: none;
}
.leave-item .leave-info .t { font-size: 14px; font-weight: 600; }
.leave-item .leave-info .d { font-size: 12px; color: var(--text-3); }


/* ============================================================
   v2026100101：标签页联动（API 密钥管理页 #/api-keys）
   ============================================================ */
.ak-intro { padding: 18px 20px; }
.ak-intro-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.ak-intro-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); line-height: 1.9; }
.ak-step {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ak-intro-tip { margin-top: 10px; font-size: 12px; color: var(--text-3); line-height: 1.7; }
/* 说明里的起始页地址：点开就是 0520 起始页（新标签打开，不打断当前页） */
.ak-link { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ak-gen { display: flex; gap: 10px; align-items: center; }
.ak-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--stroke);
  background: var(--bg-2); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.ak-input::placeholder { color: var(--text-3); }
.ak-gen-btn {
  flex: none; border: none; cursor: pointer; height: 40px; padding: 0 16px;
  border-radius: 999px; background: var(--brand-grad); color: #fff;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(255, 110, 61, 0.3);
  transition: transform 0.15s ease, opacity 0.2s;
}
.ak-gen-btn:active { transform: scale(0.97); }
.ak-gen-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.ak-list-head { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.ak-count {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700; line-height: 17px;
}
.ak-empty { padding: 22px 0; text-align: center; font-size: 13px; color: var(--text-3); }

.ak-item { padding: 14px 0; border-bottom: 1px solid var(--stroke); }
.ak-item:last-child { border-bottom: none; padding-bottom: 2px; }
.ak-item.off { opacity: 0.62; }

.ak-row1 { display: flex; align-items: center; gap: 8px; }
.ak-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ak-dot.off { background: var(--text-3); }
.ak-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-badge {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(48, 164, 108, 0.14); color: var(--ok);
}
.ak-badge.off { background: var(--stroke); color: var(--text-3); }

.ak-key {
  margin-top: 9px; padding: 9px 11px; border-radius: 10px;
  background: var(--bg-2); border: 1px dashed var(--stroke);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--text-2); line-height: 1.55;
  word-break: break-all; cursor: pointer; user-select: all;
}
.ak-key:active { background: var(--glass-strong); }
.ak-meta { margin-top: 7px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }

.ak-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.ak-mini {
  border: 1px solid var(--stroke); background: var(--brand-soft); color: var(--brand);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: transform 0.15s ease, opacity 0.2s;
}
.ak-mini.ghost { background: var(--bg-2); color: var(--text-2); }
.ak-mini.danger { background: rgba(229, 72, 77, 0.12); color: var(--danger); border-color: rgba(229, 72, 77, 0.24); }
.ak-mini:active { transform: scale(0.96); }
.ak-mini:disabled { opacity: 0.5; cursor: not-allowed; }
.ak-rename { flex: 1; min-width: 0; height: 34px; }