/* ===== 胖狐狐的家庭日记 · 全局样式 =====
   配色体系：奶油白底 / 白卡片 / 狐狸橘点缀 / 双人主题色（麻麻紫 · 粑粑蓝） */

:root {
  --cream: #F7F6F2;
  --card: #FFFFFF;
  --fox: #E99A55;        /* 狐狸橘 · 品牌点缀，固定不换 */
  --sage: #A8BEA0;       /* 鼠尾草绿 · 成功 */
  --pink: #E8B5B5;       /* 柔和粉 · 收藏 */
  --gold: #EBCB83;       /* 浅金黄 · 奖励 */
  --ink: #37465C;        /* 深灰蓝 · 正文 */
  --ink-soft: #7C8AA0;
  --line: #E3E7EC;       /* 浅灰蓝 · 边框 */
  --mama: #A58FC5;       /* 薰衣草紫 · 麻麻 */
  --baba: #7896B8;       /* 雾霾蓝 · 粑粑 */
  --accent: var(--fox);  /* 当前用户主题色，登录后由 JS 覆写 */
  --accent-soft: rgba(233, 154, 85, .12);
}

body[data-role="mama"] { --accent: var(--mama); --accent-soft: rgba(165, 143, 197, .14); }
body[data-role="baba"] { --accent: var(--baba); --accent-soft: rgba(120, 150, 184, .14); }

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

/* 兜底：任何组件的 display 样式都不允许压过 hidden 属性 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

img.px { image-rendering: pixelated; }

/* 羽化后的图标在小尺寸下对比度会略降，统一补一点 */
.header-logo, .nav-item img, .icon-btn img, .module-tile img {
  filter: contrast(1.18) saturate(1.12);
}

/* ===== 屏幕切换 ===== */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

.center-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 15% 12%, var(--accent-soft), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(233,154,85,.10), transparent 40%),
    var(--cream);
}
.center-screen.active { display: flex; }

/* ===== 欢迎 / 登录页 ===== */
.welcome-art img { width: 168px; height: auto; }
.welcome-art.small img { width: 120px; }

.app-title {
  margin-top: 14px;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--ink);
}
.app-sub { margin-top: 6px; color: var(--ink-soft); font-size: 13px; }
.tiny-hint { margin-top: 26px; color: var(--ink-soft); font-size: 11px; letter-spacing: 1px; }

.btn-col { margin-top: 30px; width: min(320px, 86vw); display: flex; flex-direction: column; gap: 12px; }

/* ===== 按钮 ===== */
.btn {
  border: none; border-radius: 14px;
  padding: 13px 22px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
  font-family: inherit;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px var(--accent-soft); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.btn-block { display: block; width: 100%; margin-top: 10px; }
.narrow-btn { width: min(320px, 86vw); margin: 16px auto 0; }
.back-link { margin-top: 14px; }

.linklike {
  margin-top: 18px; background: none; border: none;
  color: var(--ink-soft); font-size: 13px; cursor: pointer;
  text-decoration: underline dotted;
}
.linklike:hover { color: var(--accent); }

/* ===== 卡片与表单 ===== */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(55, 70, 92, .05);
}
.form-card { text-align: left; }
.card-title { font-size: 18px; margin-bottom: 4px; }
.card-desc { color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }

.page { max-width: 560px; margin: 0 auto; padding: 20px 16px 96px; }
.page.narrow { max-width: 460px; }
.page-title { font-size: 20px; margin: 8px 0 14px; }
.sec-title { font-size: 15px; margin: 16px 0 8px; }
.sec-title:first-child { margin-top: 0; }
.sec-note { font-size: 12px; font-weight: 400; color: var(--ink-soft); }

.input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 10px;
  outline: none;
}
.input:focus { border-color: var(--accent); background: #fff; }

.code-input { text-align: center; font-size: 22px; letter-spacing: 12px; font-weight: 700; }

.err {
  color: #D06A5A; font-size: 13px;
  background: rgba(208, 106, 90, .08);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}

/* ===== 配对码横幅 ===== */
.code-banner {
  background: rgba(235, 203, 131, .22);
  border: 1.5px dashed var(--gold);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 18px;
}
.code-banner b { font-size: 18px; letter-spacing: 3px; color: var(--ink); }

/* ===== 身份卡 ===== */
.pick-title { font-size: 19px; margin: 6px 0 16px; }
.idcard-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.idcard-row.compact { justify-content: flex-start; }

.idcard {
  width: 148px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: var(--card);
  padding: 16px 12px 14px;
  cursor: pointer;
  text-align: center;
  transition: transform .08s ease, box-shadow .15s ease;
}
.idcard:active { transform: scale(.96); }
.idcard img { width: 74px; height: auto; }
.idcard .id-name { font-size: 16px; font-weight: 700; margin-top: 8px; }
.idcard .id-city { font-size: 12px; color: var(--ink-soft); }
.idcard .id-free { font-size: 11px; color: var(--sage); margin-top: 2px; }
.idcard.taken { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.idcard.mama { border-color: var(--mama); background: linear-gradient(180deg, rgba(165,143,197,.10), var(--card) 62%); }
.idcard.baba { border-color: var(--baba); background: linear-gradient(180deg, rgba(120,150,184,.10), var(--card) 62%); }
.idcard.selected { box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 16px rgba(55,70,92,.12); }
.idcard-row.compact .idcard { width: 128px; padding: 12px 8px 10px; }
.idcard-row.compact .idcard img { width: 56px; }

/* ===== 密保问答行 ===== */
.qa-row {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #FCFBF9;
}
.qa-row .qa-num { font-size: 12px; color: var(--fox); font-weight: 700; }
.qa-row .input { margin-bottom: 6px; background: #fff; }

/* ===== 主应用：顶栏 / 底栏 ===== */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: rgba(247, 246, 242, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--line);
}
.header-left { display: flex; align-items: center; gap: 8px; }
.header-logo { width: 30px; height: 30px; }
.header-title { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.header-right { display: flex; align-items: center; gap: 10px; }

.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px; font-weight: 600;
}
.icon-btn { background: none; border: none; cursor: pointer; padding: 4px; }
.icon-btn img { width: 20px; height: 20px; opacity: .7; }
.icon-btn:hover img { opacity: 1; }

.view-root { max-width: 560px; margin: 0 auto; padding: 18px 16px 110px; }

.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 100%);
  display: flex;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-top: 1.5px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 20;
}
.nav-item {
  flex: 1;
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; color: var(--ink-soft);
  cursor: pointer; padding: 4px 0;
  font-family: inherit;
}
.nav-item img { width: 24px; height: 24px; opacity: .65; }
.nav-item.active { color: var(--accent); font-weight: 700; }
.nav-item.active img { opacity: 1; filter: drop-shadow(0 0 4px var(--accent-soft)); }

/* ===== 首页视图 ===== */
.home-hero {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--accent-soft), var(--card) 70%);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.home-hero img { width: 86px; height: auto; }
.home-hero .hi { font-size: 17px; font-weight: 700; }
.home-hero .sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

/* 模块宫格：固定两行（上行5个/下行4个），尺寸随设备自适应 */
.module-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 9px;
  margin-top: 16px;
}
.module-tile {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 2px 10px;
  text-align: center;
  cursor: pointer;
  font-size: 11.5px;
}
.module-tile img { width: 32px; height: 32px; }
.module-tile .mt-name { margin-top: 5px; display: block; }
.module-tile:hover { border-color: var(--accent); }
/* 上行：5 等分；下行：4 等分（更宽） */
.module-tile:nth-child(-n+5) { grid-column: span 4; }
.module-tile:nth-child(n+6) { grid-column: span 5; }

/* ===== 占位（建设中模块） ===== */
.placeholder {
  text-align: center;
  padding: 40px 16px 24px;
}
.placeholder img { width: 130px; opacity: .9; }
.placeholder h3 { margin-top: 14px; font-size: 17px; }
.placeholder p { color: var(--ink-soft); font-size: 13px; margin-top: 6px; }

/* ===== 日志预览 ===== */
.log-list { font-size: 12.5px; }
.log-item {
  display: flex; gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px dashed var(--line);
}
.log-item:last-child { border-bottom: none; }
.log-time { color: var(--ink-soft); white-space: nowrap; font-size: 11.5px; line-height: 1.9; }
.log-actor { font-weight: 700; white-space: nowrap; }
.log-actor.mama { color: var(--mama); }
.log-actor.baba { color: var(--baba); }
.log-text { flex: 1; }

/* ===== 通用区块 ===== */
.section-title { font-size: 15px; font-weight: 700; margin: 18px 0 8px; display: flex; align-items: center; gap: 6px; }
.section-title::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--fox); }

.kv-row { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--ink-soft); }

.danger-btn {
  margin-top: 20px; width: 100%;
  background: none; border: 1.5px solid rgba(208,106,90,.4);
  color: #D06A5A; border-radius: 12px; padding: 10px;
  font-size: 13px; cursor: pointer; font-family: inherit;
}

/* ===== 弹层 ===== */
.modal-mask {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(55, 70, 92, .35);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-mask[hidden] { display: none; }
.modal { width: min(420px, 92vw); max-height: 76vh; overflow-y: auto; }
.modal-title { font-size: 16px; margin-bottom: 10px; }
.modal-body { font-size: 14px; color: var(--ink); }
.notice-item { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 13.5px; }
.notice-img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 14px; border: 2px solid var(--pink); margin-bottom: 8px; }
.modal-btns { display: flex; gap: 10px; margin-top: 14px; }
.modal-btns .btn { flex: 1; margin-top: 0; }

/* ===== 提示条 ===== */
.toast[hidden] { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 13.5px;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  max-width: 86vw; text-align: center;
}

/* ===== 建设中占位的返回键 ===== */
.placeholder .btn-back { margin-top: 20px; }

/* ===== B 月历模块 ===== */
.b-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.b-month { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.btn-tiny {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: var(--ink); cursor: pointer; font-family: inherit;
}
.btn-tiny:hover { border-color: var(--accent); color: var(--accent); }

.reel {
  display: flex; gap: 7px;
  overflow-x: auto;
  padding: 8px 2px 12px;
  scrollbar-width: thin;
}
.reel::-webkit-scrollbar { height: 5px; }
.reel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.day-card {
  position: relative;
  flex: 0 0 17.8%;
  min-width: 64px;
  max-width: 118px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 20px 4px 8px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform .1s ease, border-color .15s ease;
}
.day-card:active { transform: scale(.96); }
.day-card.sel { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 6px 14px rgba(55,70,92,.10); }

.dc-date { font-size: 21px; font-weight: 700; line-height: 1.15; }
.day-card.today .dc-date { color: var(--fox); }
.day-card.today::after {
  content: "今天"; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: #fff; background: var(--fox); border-radius: 6px; padding: 0 5px; letter-spacing: 1px;
}
.dc-sub { font-size: 11px; color: var(--ink-soft); }
.dc-sub.wend { color: var(--fox); }
.dc-lunar { font-size: 10px; color: var(--ink-soft); margin-top: 1px; }
.dc-count { font-size: 9.5px; color: var(--ink-soft); margin-top: 2px; }

.dc-btns { display: flex; gap: 5px; align-items: center; margin-top: 6px; }
/* 双快捷键：左=丽水(麻麻紫) 右=杭州(粑粑蓝)，点哪颗亮哪颗 */
.mq-pair { flex: 1; display: flex; height: 18px; border-radius: 999px; overflow: hidden; max-width: 52px; margin: 0 auto; }
.mq-h {
  flex: 1; border: none; padding: 0;
  font-size: 9.5px; line-height: 18px; color: #fff;
  cursor: pointer; font-family: inherit;
  opacity: .48;
  transition: opacity .15s ease;
}
.mq-h.mama { background: var(--mama); border-radius: 999px 0 0 999px; }
.mq-h.baba { background: var(--baba); border-radius: 0 999px 999px 0; }
.mq-h:hover { opacity: .75; }
.mq-h.lit { opacity: 1; text-shadow: 0 0 4px rgba(255,255,255,.7); }
.mq-star {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 10px; line-height: 1; cursor: pointer; padding: 0; opacity: .6; flex: none;
}
.mq-star:hover { opacity: 1; }
.mq-star.on { opacity: 1; border-color: #8A92BE; background: linear-gradient(135deg, var(--baba), var(--mama)); box-shadow: 0 0 6px rgba(138,146,190,.6); }

/* 赴约角标 */
.dc-badge {
  position: absolute; top: -7px; right: -4px;
  font-size: 9px; color: #fff;
  border-radius: 7px; padding: 1px 6px;
  box-shadow: 0 2px 6px rgba(55,70,92,.25);
  z-index: 2; letter-spacing: 1px;
}
.dc-badge.bg-mama { background: var(--mama); }
.dc-badge.bg-baba { background: var(--baba); }
.dc-badge.bg-special { background: linear-gradient(135deg, var(--baba), var(--mama)); }

/* 呼吸灯：设置可调（--breath-dur / --glow 由 JS 从设置写入） */
/* 呼吸灯：静态亮环打底 + ::after 光环脉冲（缩放+光晕，不与选中位移冲突）
   设置可调：--breath-dur 周期 / --glow 光晕强度 */
.day-card.lit-mama { --litc: var(--mama); --lits: 165, 143, 197; }
.day-card.lit-baba { --litc: var(--baba); --lits: 120, 150, 184; }
.day-card.lit-special { --litc: #8A92BE; --lits: 138, 146, 190; }
.day-card.lit { box-shadow: 0 0 0 2px var(--litc); }
.day-card.lit::after {
  content: ''; position: absolute; inset: -4px; border-radius: 17px;
  border: 3px solid var(--litc); pointer-events: none; opacity: .45;
}
body:not(.no-breath) .day-card.lit::after {
  animation: breathRing var(--breath-dur, 2.4s) ease-in-out infinite;
}
body.no-breath .day-card.lit::after { opacity: .85; }
@keyframes breathRing {
  0%, 100% {
    opacity: .25; transform: scale(1);
    box-shadow: 0 0 4px 1px rgb(var(--lits) / calc(.25 * var(--glow, 1)));
  }
  50% {
    opacity: 1; transform: scale(1.08);
    box-shadow: 0 0 calc(22px * var(--glow, 1)) calc(7px * var(--glow, 1)) rgb(var(--lits) / calc(.85 * var(--glow, 1)));
  }
}
.day-card.lit-special::before {
  content: ''; position: absolute; inset: -2.5px; border-radius: 16px;
  background: linear-gradient(135deg, var(--baba), var(--mama));
  z-index: -1;
}

/* 当日详情 */
.b-dayhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin: 14px 0 10px; gap: 10px; flex-wrap: wrap;
}
.b-date { font-size: 18px; font-weight: 700; }
.tag-today { font-size: 11px; color: #fff; background: var(--fox); border-radius: 7px; padding: 1px 8px; vertical-align: 3px; margin-left: 4px; }
.b-lunar { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.b-meetup { text-align: right; }
.chip { font-size: 12.5px; border-radius: 999px; padding: 5px 12px; display: inline-block; }
.chip.dim { color: var(--ink-soft); background: var(--card); border: 1.5px dashed var(--line); }
.chip.litc-mama { color: #fff; background: var(--mama); }
.chip.litc-baba { color: #fff; background: var(--baba); }
.chip.litc-special { color: #fff; background: linear-gradient(135deg, var(--baba), var(--mama)); }

.b-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
.b-sec { padding: 14px 16px; }
.b-sec-head { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.empty { color: var(--ink-soft); font-size: 12.5px; text-align: center; padding: 10px 0 6px; }

.ev-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.ev-row:last-child { border-bottom: none; }
.ev-time { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.ev-main { flex: 1; min-width: 0; }
.ev-title { font-size: 14px; font-weight: 600; }
.ev-note { font-size: 11.5px; color: var(--ink-soft); margin-left: 6px; font-weight: 400; }
.ev-meta { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.owner-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.owner-dot.mama { background: var(--mama); }
.owner-dot.baba { background: var(--baba); }

.mini-btn {
  background: none; border: none; color: var(--ink-soft);
  font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 8px;
}
.mini-btn:hover { color: #D06A5A; background: rgba(208,106,90,.08); }

.todo-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 1px dashed var(--line); }
.todo-row:last-child { border-bottom: none; }
.todo-check {
  width: 20px; height: 20px; border-radius: 7px;
  border: 1.5px solid var(--line); background: var(--card);
  cursor: pointer; padding: 0; flex: none;
}
.todo-check.checked { background: var(--sage); border-color: var(--sage); }
.todo-check.checked::after { content: '✓'; color: #fff; font-size: 12px; display: block; line-height: 18px; }
.todo-text { flex: 1; font-size: 14px; }
.todo-row.done .todo-text { color: var(--ink-soft); text-decoration: line-through; }
.b-pool { margin-top: 14px; }

/* 出差/经期角标（卡片左上角） */
.dc-marks { position: absolute; top: 2px; left: 4px; font-size: 9px; line-height: 1.2; letter-spacing: -1px; }
.dc-mark.ghost { opacity: .4; filter: saturate(.6); }

/* 出差 + 经期区块 */
.b-extra { margin-bottom: 14px; }
.b-sec-head.sub { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mens-status { font-size: 13.5px; font-weight: 700; color: #C0687A; margin: 4px 0; }
.mens-forecast { font-size: 12px; color: var(--ink-soft); margin-top: 5px; line-height: 1.7; }
.b-extra .linklike { margin-top: 4px; font-size: 11.5px; }
.f-label { display: block; font-size: 12px; color: var(--ink-soft); margin: 4px 0 -4px 2px; }

/* 经期历史记录列表 */
.mens-history { max-height: 200px; overflow-y: auto; }
.mens-h-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; padding: 6px 2px;
  border-bottom: 1px dashed var(--line);
  color: var(--ink);
}
.mens-h-row:last-child { border-bottom: none; }
.mens-h-row.skip { color: var(--ink-soft); font-style: italic; }
.mens-h-row.more { color: var(--ink-soft); justify-content: center; font-size: 11.5px; }
.mens-h-row > span { display: inline-flex; gap: 2px; }

/* 管理弹窗列表 */
.mens-manage { max-height: 46vh; overflow-y: auto; }
.mens-manage-sum {
  font-size: 11.5px; color: var(--ink-soft); text-align: center;
  background: var(--accent-soft); border-radius: 10px; padding: 6px; margin-bottom: 6px;
}

/* ===== G 打卡模块 ===== */
.c-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.c-sec-title { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 700; margin: 14px 0 8px; }
.c-sec-title::before { content: none; }

.c-habit { padding: 12px 14px; margin-bottom: 10px; }
.c-habit.done { border-color: var(--sage); }
.ch-top { display: flex; justify-content: space-between; align-items: center; }
.ch-name { font-size: 15px; font-weight: 700; }
.ch-streak { font-size: 12px; color: #D97B4A; font-weight: 700; }
.ch-week { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ch-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--cream); overflow: hidden; border: 1px solid var(--line); }
.ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), #8FB489); border-radius: 999px; transition: width .3s ease; }
.ch-wk { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }

.ch-days { display: flex; gap: 4px; flex-wrap: wrap; }
.day-cell {
  width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-soft);
  background: var(--cream); border: 1px solid var(--line);
}
.day-cell.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.day-cell.today { border-color: var(--fox); border-width: 2px; }
.day-cell[data-backfill] { cursor: pointer; color: var(--fox); }
.day-cell[data-backfill]:hover { background: var(--accent-soft); }
.ch-note { font-size: 12px; color: var(--ink-soft); margin-top: 6px; background: var(--cream); border-radius: 8px; padding: 5px 9px; }
.ch-ops { display: flex; gap: 8px; margin-top: 9px; align-items: center; flex-wrap: wrap; }
.btn-tiny.go { background: var(--sage); border-color: var(--sage); color: #fff; font-weight: 700; }
.btn-tiny.ok { border-color: var(--sage); color: #6E8F67; background: rgba(168,190,160,.15); }

/* 热力墙 */
.heat-title { font-size: 12px; color: var(--ink-soft); margin: 8px 0 6px; }
.heat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.heat-cell {
  aspect-ratio: 1; border-radius: 6px;
  background: var(--cream); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px;
}
.heat-cell.on { background: var(--sage); border-color: var(--sage); }
.heat-cell.mute { visibility: hidden; }
.heat-cell.fut { opacity: .4; }

/* 补签卡 & 贴纸 */
.c-makeup, .c-stickers { margin-top: 12px; }
.mk-row { display: flex; justify-content: space-between; font-size: 13px; }
.st-row { font-size: 13px; padding: 4px 0; }
.st-item { display: inline-block; margin-right: 6px; font-size: 18px; filter: grayscale(1); opacity: .3; }
.st-item.got { filter: none; opacity: 1; }

/* 新习惯 emoji 选择 */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom:  6px; }
.emoji-chip {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 17px; cursor: pointer; padding: 0;
}
.emoji-chip.on { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.1); }

/* 清单管理行 */
.mg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px; border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.mg-row:last-child { border-bottom: none; }
.mg-icon { font-size: 17px; }
.mg-name { flex: 1; font-weight: 600; }
.mg-cnt { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.mg-ops { display: inline-flex; gap: 2px; }
.mg-ops .mini-btn { padding: 4px 7px; }
.mg-ops .mini-btn:disabled { opacity: .3; cursor: default; }

/* ===== H 周回顾 / J 日志 ===== */
.w-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.w-box { margin-bottom: 14px; }
.w-box.big { background: linear-gradient(160deg, rgba(235,203,131,.14), var(--card) 55%); }
.w-range { font-size: 15px; font-weight: 800; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.w-fox { font-size: 20px; }
.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-col { border-radius: 14px; padding: 10px 12px; }
.w-col.mama { background: rgba(165,143,197,.10); }
.w-col.baba { background: rgba(120,150,184,.10); }
.w-name { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.w-col.mama .w-name { color: var(--mama); }
.w-col.baba .w-name { color: var(--baba); }
.w-item { font-size: 12.5px; color: var(--ink); padding: 2.5px 0; }
.w-item b { font-size: 15px; }
.w-sub { font-size: 11px; color: var(--ink-soft); }
.w-row { margin-top: 10px; text-align: center; font-size: 13px; color: var(--ink); background: var(--cream); border-radius: 10px; padding: 7px; }
.w-top { margin-top: 10px; }
.w-top-title { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.w-msg { font-size: 13px; padding: 6px 8px; border-left: 3px solid var(--pink); background: rgba(232,181,181,.10); border-radius: 0 10px 10px 0; margin-bottom: 5px; }
.w-msg i { font-style: normal; color: #C0687A; font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.w-box .todo-row { cursor: pointer; }

.lv-bar .input { margin-bottom: 8px; }
.lv-count { font-size: 11.5px; color: var(--ink-soft); text-align: right; }
.lv-list { padding: 10px 14px; }
.lv-day {
  font-size: 12px; font-weight: 800; color: var(--ink);
  background: var(--accent-soft); display: inline-block; border-radius: 8px;
  padding: 1px 9px; margin: 10px 0 2px;
}
.lv-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.lv-row:last-child { border-bottom: none; }
.lv-time { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.lv-text { flex: 1; font-size: 12.5px; min-width: 0; word-break: break-word; }

/* ===== I 设置模块 ===== */
.s-box { margin-bottom: 14px; }
.s-colors { display: flex; gap: 12px; margin: 8px 0 10px; }
.s-color {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--cream); border-radius: 12px; padding: 9px 12px;
  font-size: 13.5px; font-weight: 700;
}
.s-color i { font-style: normal; font-size: 10.5px; color: var(--ink-soft); margin-left: auto; font-weight: 400; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(55,70,92,.3); }
.swatch.mama { background: var(--mama); }
.swatch.baba { background: var(--baba); }
.s-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.7; }
.s-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.s-k { width: 62px; font-size: 13px; color: var(--ink-soft); flex: none; }
.s-row .input { flex: 1; margin-bottom: 0; background: var(--cream); }
.s-v { font-size: 12px; color: var(--ink); width: 38px; text-align: right; flex: none; }
.s-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.s-preview { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.s-preview .s-note { margin: 0; }
.pv-dot {
  padding: 4px 12px; border-radius: 999px; font-size: 12px; color: #fff;
  border: 2.5px solid var(--litc);
  box-shadow: 0 0 calc(10px * var(--glow, 1)) calc(3px * var(--glow, 1)) rgb(var(--lits) / calc(.6 * var(--glow, 1)));
}
.pv-dot.lit-mama { --litc: var(--mama); --lits: 165, 143, 197; }
.pv-dot.lit-baba { --litc: var(--baba); --lits: 120, 150, 184; }
body:not(.no-breath) .pv-dot { animation: breathPill var(--breath-dur, 2.4s) ease-in-out infinite; }
body.no-breath .pv-dot { animation: none; }
@keyframes breathPill {
  0%, 100% { transform: scale(1); box-shadow: 0 0 4px 1px rgb(var(--lits) / calc(.3 * var(--glow, 1))); }
  50% { transform: scale(1.08); box-shadow: 0 0 calc(20px * var(--glow, 1)) calc(6px * var(--glow, 1)) rgb(var(--lits) / calc(.85 * var(--glow, 1))); }
}

/* 开关 */
.switch {
  width: 46px; height: 26px; border-radius: 999px; border: none;
  background: var(--line); position: relative; cursor: pointer; padding: 0;
  transition: background .2s ease;
}
.switch i {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .2s ease;
}
.switch.on { background: var(--sage); }
.switch.on i { left: 23px; }

/* ===== C 手账模块 ===== */
.d-sec-head { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 700; margin: 14px 0 8px; }
.d-sec-head .btn-tiny.go { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.d-entry { padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.d-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.d-date { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.d-mood { font-size: 17px; }
.d-text { font-size: 13.5px; color: var(--ink); line-height: 1.7; word-break: break-word; }
.d-full { font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.wishbox .sec-note { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.wish-addrow { display: flex; gap: 8px; margin-bottom: 8px; }
.wish-addrow .input { margin-bottom: 0; flex: 1; background: var(--cream); }
.wish-addrow .btn-tiny { flex: none; border-radius: 12px; padding: 4px 14px; }
.wish-done { font-style: normal; font-size: 11.5px; color: #C7A44A; white-space: nowrap; }
.wishbox.ta { background: linear-gradient(160deg, rgba(235,203,131,.14), var(--card) 60%); }

/* ===== D 小树洞模块 ===== */
.th-pick { text-align: center; padding: 20px 16px; }
.th-q { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.th-btns { display: flex; gap: 12px; justify-content: center; }
.th-big {
  flex: 1; max-width: 170px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-radius: 18px; border: 2px solid var(--line);
  background: var(--card); cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 800; color: var(--ink);
  padding: 14px 10px;
  transition: transform .1s ease, box-shadow .15s ease;
}
.th-big:active { transform: scale(.95); }
.th-big img { width: 84px; height: auto; }
.th-big.happy { border-color: var(--gold); background: linear-gradient(180deg, rgba(235,203,131,.16), var(--card) 65%); }
.th-big.happy:hover { box-shadow: 0 6px 16px rgba(235,203,131,.35); }
.th-big.sad { border-color: var(--pink); background: linear-gradient(180deg, rgba(232,181,181,.16), var(--card) 65%); }
.th-big.sad:hover { box-shadow: 0 6px 16px rgba(232,181,181,.4); }

.th-entry { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px; }
.th-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; flex: none; border: 1.5px solid var(--line); }
.th-entry.happy .th-thumb { border-color: var(--gold); }
.th-entry.sad .th-thumb { border-color: var(--pink); }
.th-main { flex: 1; min-width: 0; }
.th-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.th-tag { font-size: 10.5px; border-radius: 999px; padding: 1px 8px; color: #fff; }
.th-tag.happy { background: #C7A44A; }
.th-tag.sad { background: #C4888F; }
.th-time { font-size: 10.5px; color: var(--ink-soft); margin-left: auto; }
.th-text { font-size: 13.5px; margin-top: 3px; word-break: break-word; }

/* 应援/安抚弹窗 */
.th-pop { text-align: center; }
.th-pop img {
  width: 200px; height: 200px; object-fit: cover;
  border-radius: 20px; border: 3px solid var(--line);
  animation: thBounce .5s ease;
}
.th-pop.happy img { border-color: var(--gold); }
.th-pop.sad img { border-color: var(--pink); }
.th-line { font-size: 15.5px; font-weight: 800; margin-top: 12px; line-height: 1.7; }
.th-pop.happy .th-line { color: #A8842F; }
.th-pop.sad .th-line { color: #B36F79; }
@keyframes thBounce {
  0% { transform: scale(.6) rotate(-6deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* 桌面端：详情两栏 */
@media (min-width: 900px) {
  .b-cols { grid-template-columns: 1.15fr 1fr; }
  .b-pool { grid-column: 1 / -1; margin-top: 0; }
  .b-cols .card, .b-pool { margin-bottom: 0; }
}
@media (min-width: 900px) {
  .view-root, .page { max-width: 960px; }
  .page.narrow { max-width: 560px; }
  .module-grid { gap: 16px; }
  .module-tile { padding: 18px 4px 16px; font-size: 14px; border-radius: 18px; }
  .module-tile img { width: 44px; height: 44px; }
  .module-tile { padding: 14px 6px; }
  .home-hero img { width: 100px; }
  .bottom-nav {
    width: min(680px, 92vw);
    border: 1.5px solid var(--line);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 28px rgba(55, 70, 92, .10);
  }
  .nav-item img { width: 26px; height: 26px; }
  .nav-item { font-size: 12px; }
  .welcome-art img { width: 200px; }
  .idcard { width: 180px; }
  .idcard img { width: 92px; }
  .form-card { padding: 24px; }
  .placeholder img { width: 160px; }
  .modal { width: min(480px, 90vw); }
}

/* ===== E 留言模块 ===== */
.m-head { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.m-head .btn-tiny { margin-left: auto; }
.m-count { font-size: 12px; color: var(--ink-soft); font-weight: 400; }

.m-timeline { display: flex; flex-direction: column; gap: 4px; min-height: 200px; max-height: calc(100vh - 330px); overflow-y: auto; padding: 6px 2px; }
.m-row { display: flex; align-items: flex-end; gap: 6px; }
.m-row.mine { flex-direction: row-reverse; }
.m-bubble { max-width: 76%; border-radius: 16px; padding: 9px 12px 6px; }
.m-bubble.theirs { background: var(--card); border: 1.5px solid var(--line); border-top-left-radius: 6px; }
.m-bubble.mine { background: var(--accent-soft); border: 1.5px solid var(--accent); border-top-right-radius: 6px; }
.m-text { font-size: 14.5px; word-break: break-word; white-space: pre-wrap; }
.m-meta { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.m-who { font-weight: 700; }
.m-who.mama { color: var(--mama); }
.m-who.baba { color: var(--baba); }
.m-read { font-size: 10px; }
.m-read.ok { color: var(--sage); }

.m-heart {
  background: none; border: none; cursor: pointer;
  font-size: 15px; color: #E06C8C; padding: 4px 5px;
  filter: grayscale(1); opacity: .55;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.m-heart.on { filter: none; opacity: 1; transform: scale(1.15); }
.m-heart i { font-style: normal; font-size: 11px; margin-left: 1px; }
.m-heartdots { display: flex; gap: 4px; margin: -2px 0 2px; align-items: center; }
.m-heartdots.mine { justify-content: flex-end; }
.m-heartdots.theirs { justify-content: flex-start; }

.m-composer { display: flex; gap: 8px; margin-top: 10px; position: sticky; bottom: 8px; background: var(--cream); padding: 8px 0 2px; }
.m-composer .input { margin-bottom: 0; flex: 1; background: var(--card); }
.m-send { margin-top: 0; flex: none; padding: 10px 18px; }

/* 导航未读角标 */
.nav-item { position: relative; }
.nav-badge {
  position: absolute; top: -2px; right: calc(50% - 22px);
  background: #D06A5A; color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  min-width: 17px; height: 17px; line-height: 17px;
  padding: 0 4px; text-align: center;
  box-shadow: 0 0 0 2px var(--cream);
}

/* ===== F 清单模块 ===== */
.l-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; margin-bottom: 10px; }

.l-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.l-tabs::-webkit-scrollbar { display: none; }
.l-tab {
  flex: none;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; color: var(--ink); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.l-tab i { font-style: normal; background: var(--accent-soft); color: var(--ink); border-radius: 999px; font-size: 10.5px; padding: 0 6px; }
.l-tab.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.l-tab.add { border-style: dashed; color: var(--ink-soft); }

.l-box { margin-bottom: 14px; }
.l-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; flex-wrap: wrap; }
.l-title { font-size: 15px; font-weight: 700; }

.li-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.li-row:last-child { border-bottom: none; }
.li-row.done .li-text { color: var(--ink-soft); text-decoration: line-through; }
.li-row.pinned { background: linear-gradient(90deg, rgba(235,203,131,.12), transparent 70%); border-radius: 10px; padding-left: 6px; }
.li-main { flex: 1; min-width: 0; }
.li-text { font-size: 14.5px; word-break: break-word; }
.li-note { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.li-meta { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.l-addrow { display: flex; gap: 8px; margin-top: 10px; }
.l-addrow .input { margin-bottom: 0; flex: 1; background: var(--cream); }
.l-addrow .btn-tiny { flex: none; border-radius: 12px; padding: 4px 14px; }
.arc-icon { font-size: 16px; }
.li-row.arc { padding: 9px 2px; }

/* 积分与奖励 */
.l-points { margin-top: 2px; }
.pts-row { display: flex; gap: 10px; margin-bottom: 10px; }
.pts { flex: 1; text-align: center; border-radius: 12px; padding: 8px; font-size: 12.5px; color: var(--ink-soft); }
.pts.me { background: var(--accent-soft); }
.pts.ta { background: rgba(165,143,197,.10); }
.pts b { display: block; font-size: 20px; color: var(--ink); }
.reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reward-grid .empty { grid-column: 1 / -1; }
.reward-card {
  position: relative;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 6px 8px; text-align: center;
  background: linear-gradient(180deg, rgba(235,203,131,.10), var(--card) 60%);
}
.rw-name { font-size: 12.5px; font-weight: 700; line-height: 1.35; word-break: break-word; }
.rw-cost { font-size: 11px; color: #C7A44A; margin: 3px 0 6px; }
.reward-card .btn-tiny { padding: 3px 10px; }
.reward-card .btn-tiny.ok { border-color: #C7A44A; color: #A8842F; background: rgba(235,203,131,.18); }
.reward-card .btn-tiny:disabled { opacity: .45; cursor: not-allowed; }
.reward-card .mini-btn { position: absolute; top: 0; right: 0; font-size: 10px; padding: 2px 5px; }

/* 今晚看什么 */
.roll-name {
  font-size: 20px; font-weight: 800; text-align: center;
  padding: 18px 8px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(120,150,184,.10), rgba(165,143,197,.14));
  min-height: 64px; display: flex; align-items: center; justify-content: center;
  word-break: break-word;
}
.roll-sub { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* 金星特效 */
.gold-star-overlay { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.gold-star-overlay span { position: absolute; bottom: -40px; animation: starFly 1.7s ease-out forwards; }
@keyframes starFly {
  0% { transform: translateY(0) scale(.5) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-95vh) scale(1.15) rotate(220deg); opacity: 0; }
}