:root {
  --bg: #f1e3cd;            /* 洛可可奶粉墙 */
  --bg-2: #e8d4ba;
  --panel: #fbf3e3;         /* 象牙白 */
  --panel-soft: #f3e6cf;
  --ink: #3d2a17;
  --ink-soft: #7a6244;
  --line: #d8c19a;
  --gold: #b8860b;
  --gold-2: #d4af37;
  --gold-3: #c9a227;
  --rose: #c47a87;          /* 玫瑰粉 */
  --rose-2: #d49aa5;
  --shadow: 0 8px 26px rgba(61, 42, 23, 0.16);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", "STKaiti", "KaiTi",
           "Songti SC", "STSong", "SimSun", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  background: var(--bg);
}

/* 整张工作台背景：天使油画（横图 16:9，与宽屏工作台比例一致 → cover 完全铺满、不留白边、不裁切核心画面） */
.bg-photo {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: url("angel-bg.jpg") center center / cover no-repeat;
}
/* 极轻薄柔光罩：仅做四周微弱统一，正中保持油画本色清晰 */
.bg-scrim {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgba(251,243,227,0) 55%,
      rgba(241,227,205,.18) 100%);
}

.app { display: flex; min-height: 100vh; }

/* ---------- 侧边栏（奶白描金，仿宫廷墙板） ---------- */
.sidebar {
  width: 240px; flex: 0 0 240px;
  /* 底层：竖长条天使/玫瑰壁画；上层：奶白径向柔光罩保证菜单文字清晰 */
  background:
    linear-gradient(180deg, rgba(251,243,227,.50) 0%, rgba(251,243,227,.36) 35%, rgba(241,227,205,.28) 100%),
    url("sidebar-bg.jpg") center top / cover no-repeat;
  border-right: 3px solid transparent;
  border-image: linear-gradient(var(--gold-2), var(--gold)) 1;
  display: flex; flex-direction: column;
  padding: 26px 18px;
  position: sticky; top: 0; height: 100vh;
  box-shadow: 6px 0 22px rgba(61,42,23,.18);
}
.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.brand-logo {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fbe6a6, var(--gold-2) 46%, var(--gold) 100%);
  display: grid; place-items: center;
  box-shadow:
    0 0 0 2px #fff9,
    0 0 0 4px var(--gold-2),
    0 0 0 5px #fff5,
    var(--shadow);
}
.brand-logo svg { width: 30px; height: 30px; display: block;
  filter: drop-shadow(0 1px 1px rgba(120,30,45,.35)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title {
  font-weight: 700; font-size: 19px; letter-spacing: 4px;
  color: #6b4326;
}
.brand-sub { font-size: 11px; color: var(--ink-soft); letter-spacing: 5px; margin-top: 3px; }

.nav { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; border: 1px solid transparent; border-radius: 4px;
  background: rgba(255,250,238,.55); cursor: pointer; color: var(--ink);
  font-size: 15px; text-align: left; transition: .2s; font-family: var(--serif);
  backdrop-filter: blur(2px);
}
.nav-item:hover {
  border-color: var(--gold-2); color: #6b3a4a;
  background: linear-gradient(90deg, rgba(255,250,238,.85), rgba(251,232,212,.78));
}
.nav-item.active {
  background: linear-gradient(180deg, #fff7e2, var(--panel-soft));
  color: #6b3a4a; border-color: var(--gold-2);
  box-shadow: 0 0 0 1px var(--gold-3), inset 0 0 0 1px #fff8; font-weight: 700;
}
/* 描金手绘 SVG 图标（欧式宫廷风） */
.nav-ico { width: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); }
.nav-ico svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  /* 描金描边的轻微阴影，让图标像浮在奶白墙上的烫金饰物 */
  filter: drop-shadow(0 1px 0.6px rgba(180,132,11,.55)) drop-shadow(0 1.5px 2px rgba(120,84,8,.35));
}
.nav-ico svg text { fill: currentColor; stroke: none; font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
.nav-item.active .nav-ico { color: #b8860b; }
.nav-item.active .nav-ico svg { filter: drop-shadow(0 1px 1px rgba(184,134,11,.85)) drop-shadow(0 2px 3px rgba(120,84,8,.5)); }
.nav-item:hover .nav-ico { color: #a8781f; }
.nav-item:hover .nav-ico svg { filter: drop-shadow(0 1px 1px rgba(168,120,31,.8)) drop-shadow(0 2px 3px rgba(120,84,8,.45)); }

.sidebar-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ghost-btn {
  background: rgba(255,250,238,.55); border: 1px solid var(--gold-3); color: var(--ink-soft);
  padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;
  font-family: var(--serif); transition: .15s;
  backdrop-filter: blur(2px);
}
.ghost-btn:hover { background: rgba(201,162,39,.12); color: var(--ink); border-color: var(--gold-2); }
.ghost-btn.active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #fff8; border-color: var(--gold); font-weight: 700; box-shadow: 0 1px 3px rgba(120,84,8,.4); }

/* ---------- 主区 ---------- */
.main { flex: 1; padding: 34px 44px; max-width: 1180px; }
.view { display: none; animation: fade .3s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }

.view-head { margin-bottom: 24px; position: relative; }
.view-head h1 {
  font-size: 30px; margin: 0 0 6px; color: var(--ink);
  letter-spacing: 2px; font-weight: 700; text-shadow: 0 1px 0 #fff8;
}
.view-head h1::after {
  content: ""; display: block; width: 260px; height: 24px; margin-top: 6px;
  background: url("divider.svg") no-repeat left center;
}
.view-desc { color: var(--ink-soft); margin: 0; font-size: 14.5px; font-style: italic; }
.part-label {
  margin: 20px 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-size: 17px; color: var(--ink); letter-spacing: 1px; font-weight: 700;
}
.date-pick { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* ---------- 通用控件 ---------- */
.inp {
  border: 1px solid var(--gold-3); border-radius: 4px; background: #fffdf6;
  color: var(--ink); padding: 9px 12px; font-size: 14px; outline: none;
  font-family: var(--serif); transition: .15s;
}
.inp:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(196,122,135,.18); }
.grow { flex: 1; }
.primary-btn {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--ink); border: 1px solid var(--gold); cursor: pointer;
  padding: 9px 18px; border-radius: 4px; font-size: 14px;
  font-family: var(--serif); letter-spacing: 1px; transition: .15s; font-weight: 700;
}
.primary-btn:hover { filter: brightness(1.06); box-shadow: var(--shadow); }
.card {
  background: var(--panel); border: 13px solid transparent;
  border-image: url("frame.svg") 30 round;
  border-radius: 3px; padding: 20px 22px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 14px; font-size: 16px; color: var(--ink); letter-spacing: .5px; font-weight: 700; }

/* ---------- 年历 ---------- */
/* 年历工具栏 / 提示 / 图例 */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  background: rgba(255,250,238,.66); backdrop-filter: blur(2px);
  border: 1px solid var(--gold-3); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.cal-info { display: flex; align-items: baseline; gap: 10px; }
.cal-info-label { font-size: 13px; letter-spacing: 1px; color: var(--ink-soft); }
.cal-info-value { font-size: 15px; font-weight: 700; color: #6b3a4a; font-family: var(--serif); }
.cal-interval { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.interval-inp { width: 52px !important; padding: 3px 6px; font-size: 13px; text-align: center; }
.cal-actions { display: flex; gap: 8px; }
.cal-pick-hint {
  margin: 0 0 12px; padding: 9px 14px; font-style: italic; font-size: 13.5px;
  color: #6b3a4a; background: rgba(201,162,39,.12);
  border-left: 3px solid var(--gold); border-radius: 3px;
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-soft); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 15px; height: 15px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); display: inline-block; }
.legend-swatch.today { background: linear-gradient(180deg, var(--rose-2), var(--rose)); }
.legend-swatch.checkin { background: rgba(160,156,148,.20); }
.legend-swatch.task { background: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
.legend-swatch.start { background: #c9c3ba; box-shadow: 0 0 0 2px var(--gold); }
.legend-swatch.holi { background: rgba(196,122,135,.30); color: var(--rose); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }

/* 年历：生理期按钮（标记经期） */
.period-btn { border-color: #f0b8c8; color: #b03a5e; }
.period-btn:hover { background: rgba(226,109,146,.12); border-color: #e26d92; color: #8a2a44; }

.calendar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.month {
  background: var(--panel); border: 11px solid transparent;
  border-image: url("frame.svg") 30 round;
  border-radius: 3px; padding: 14px 16px; box-shadow: var(--shadow);
}
.month-title { font-weight: 700; margin-bottom: 10px; font-size: 16px; text-align: center; color: var(--ink); letter-spacing: 2px; }
  .year-sep { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; margin: 22px 0 8px; padding: 12px 16px; background: linear-gradient(90deg, rgba(255,157,92,.20), rgba(255,157,92,.03)); border-left: 4px solid #ff9d5c; border-radius: 10px; }
  .year-sep-title { font-size: 20px; font-weight: 800; color: #e8743b; letter-spacing: 3px; }
  .year-sep-note { font-size: 12px; color: #9a8a78; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wk { text-align: center; font-size: 11px; color: var(--gold); padding: 2px 0; font-weight: 700; }
.day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 34px;
  text-align: center; font-size: 12.5px; padding: 4px 0; border-radius: 4px;
  cursor: pointer; transition: .12s; color: var(--ink); border: 1px solid transparent;
}
.day-num { line-height: 1.1; }
.day-holi { font-size: 8.5px; line-height: 1.05; color: var(--rose); font-weight: 700; letter-spacing: .3px; white-space: nowrap; pointer-events: none; }
.day:hover { background: var(--panel-soft); }
.day.blank { cursor: default; }
.day.today { background: linear-gradient(180deg, var(--rose-2), var(--rose)); color: #fff8; font-weight: 700; }
.day.has-task { box-shadow: inset 0 -3px 0 var(--gold); }
.day.weekend { color: var(--ink-soft); }
/* 法定节假日：淡玫瑰底 + 下方 * 标记 */
.day.holi { background: rgba(196,122,135,.14); color: #6b3a4a; }
.day.holi:hover { background: rgba(196,122,135,.24); }

/* 100 天打卡区间：淡灰底色（无边框） */
.day.checkin {
  background: rgba(160,156,148,.20);
  color: #6b6358;
}
.day.checkin:hover { background: rgba(160,156,148,.32); }
/* 区间内的「今天」仍保留玫瑰金高亮 */
.day.checkin.today {
  background: linear-gradient(180deg, var(--rose-2), var(--rose));
  color: #fff; font-weight: 700;
}
/* 打卡起始日：以金色 ◇ 标识，无边框 */
.day.checkin-start {
  font-weight: 700; color: #5a4a2a;
}
.day.checkin-start::after { content: "◇"; font-size: 9px; margin-left: 2px; color: var(--gold); vertical-align: super; }

/* ---------- 姨妈期（经期）标记：用「顶部粉色条」独立呈现，与 100 天打卡灰底（整格）、任务金底条（底部）互不覆盖 ---------- */
.day.period-start {
  color: #8a2a44; font-weight: 700;
  box-shadow: inset 0 5px 0 #ff5d86;
}
.day.period-start:hover { box-shadow: inset 0 5px 0 #ff3d6e; }
.day.period-day {
  color: #8a2a44;
  box-shadow: inset 0 4px 0 #ff9fb6;
}
.day.period-day:hover { box-shadow: inset 0 4px 0 #ff7fa6; }
/* 预计经期：虚线边框（不含底色，避免盖住打卡灰底）+ 顶部淡粉虚线提示 */
.day.period-pred {
  border: 1px dashed #e26d92; color: #b03a5e; font-weight: 700;
}
.day.period-pred-day {
  border: 1px dashed rgba(226,109,146,.5); color: #b03a5e;
}
/* 提醒日：金色描边高亮（不含底色，避免盖住打卡灰底） */
.day.period-remind {
  border: 1px solid var(--gold); color: #6b4e12;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.35);
}
/* 今天始终保留玫瑰金高亮（避免被经期样式覆盖） */
.day.today.period-start, .day.today.period-day,
.day.today.period-pred, .day.today.period-pred-day,
.day.today.period-remind {
  background: linear-gradient(180deg, var(--rose-2), var(--rose)); color: #fff;
}
/* 标记中：已选开始日（等待结束日），脉冲高亮提示 */
.day.period-draft-start {
  color: #8a2a44; font-weight: 700;
  box-shadow: inset 0 5px 0 #ff5d86, 0 0 0 2px #ff5d86;
  animation: periodPulse 1.1s ease-in-out infinite;
}
@keyframes periodPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.day-period { font-size: 8px; line-height: 1; pointer-events: none; margin-top: 1px; }
.day-period.pred { color: #e26d92; }
.day-period.remind { color: #b8860b; font-weight: 700; }
.day-period.draft { color: #ff3d6e; font-weight: 700; }
/* 图例色块 */
.legend-swatch.period { background: #fff; box-shadow: inset 0 5px 0 #ff5d86; }
.legend-swatch.period-pred { background: rgba(255,150,180,.14); border: 1px dashed #e26d92; }
.legend-swatch.period-remind { background: rgba(201,162,39,.18); border: 1px solid var(--gold); }
/* 标记经期按钮高亮 */
.period-btn.active { background: linear-gradient(180deg, #ffd9e0, #ffb3c4); color: #8a2a44; border-color: #e26d92; }
/* 标记经期提示（沿用 cal-pick-hint 但换色） */
.cal-pick-hint.period-hint { color: #8a2a44; background: rgba(226,109,146,.12); border-left-color: #e26d92; }
/* 提醒横幅 */
.cal-period-alert {
  margin: 0 0 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  color: #8a2a44; background: linear-gradient(180deg, #ffe3ea, #ffd0dd);
  border-left: 3px solid #e26d92; border-radius: 3px;
}

/* ---------- 个人分析 ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.stat-card {
  background: var(--panel); border: 11px solid transparent;
  border-image: url("frame.svg") 30 round;
  border-radius: 3px; padding: 16px 18px; box-shadow: var(--shadow); text-align: center;
}
.stat-num { font-size: 28px; font-weight: 800; color: var(--rose); }
.stat-label { font-size: 13px; color: var(--ink-soft); margin-top: 4px; letter-spacing: .5px; }
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-box { width: 100%; }

/* ---------- 资源库 ---------- */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.res-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.res-card {
  background: var(--panel); border: 11px solid transparent;
  border-image: url("frame.svg") 30 round;
  border-radius: 3px; padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.res-card .res-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.res-name { font-weight: 700; font-size: 16px; word-break: break-word; color: var(--ink); }
.res-link { color: var(--rose); font-size: 13px; text-decoration: none; word-break: break-all; }
.res-link:hover { text-decoration: underline; }
.res-note { color: var(--ink-soft); font-size: 13.5px; font-style: italic; }
.res-cat {
  font-size: 11px; background: linear-gradient(180deg, var(--rose-2), var(--rose));
  color: #fff8; padding: 2px 10px; border-radius: 20px; white-space: nowrap; font-weight: 700;
}
.res-actions { display: flex; gap: 8px; margin-top: 4px; }
.res-actions button { font-size: 12px; border: none; background: transparent; cursor: pointer; color: var(--ink-soft); font-family: var(--serif); }
.res-actions .edit:hover { color: var(--rose); }
.res-actions .del:hover { color: #8a2a3e; }
.res-empty { color: var(--ink-soft); padding: 30px; text-align: center; grid-column: 1/-1; font-style: italic; }

/* ---------- 弹窗 ---------- */
.modal-mask, .hundred-pop {
  position: fixed; inset: 0; background: rgba(61,42,23,.45);
  display: grid; place-items: center; z-index: 50;
}
/* 关键修复：让 hidden 属性真正生效（覆盖上面 display:grid 的覆盖） */
.modal-mask[hidden], .hundred-pop[hidden] { display: none; }
.modal {
  background: var(--panel); border: 14px solid transparent;
  border-image: url("frame.svg") 30 round;
  border-radius: 3px; padding: 26px; width: 440px; max-width: 92vw;
  box-shadow: 0 24px 70px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 12px;
}
.modal h3 { margin: 0 0 6px; color: var(--ink); letter-spacing: 1px; font-weight: 700; }
.modal label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.modal textarea { resize: vertical; font-family: var(--serif); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.modal-text { font-family: var(--serif); font-size: 14px; color: var(--ink); line-height: 1.6; margin: 6px 0 4px; }
.modal-sub { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 4px 0 14px; line-height: 1.5; }
/* 经期设置：间隔天数行（输入框 + 填入建议值按钮） */
.set-row { display: flex; align-items: flex-end; gap: 10px; }
.set-row label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink); font-family: var(--serif); }
.set-row .inp { font-size: 14px; padding: 7px 9px; }
.set-row .tiny { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.modal-hint { font-size: 12px; color: var(--gold); margin: -4px 0 8px; line-height: 1.5; }

/* ---------- 经期设置：默认周期（手动添加） ---------- */
.set-block { margin: 14px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line); }
.set-title { font-size: 13.5px; font-weight: 700; color: var(--ink); font-family: var(--serif); margin-bottom: 6px; }
.period-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-add .inp { font-size: 13px; padding: 6px 8px; }
.period-add .dash { color: var(--ink-soft); font-size: 14px; }
.period-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; }
.period-list .period-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 13px; font-family: var(--serif); color: var(--ink); }
.period-list .period-item.empty { justify-content: center; color: var(--ink-soft); font-style: italic; border-style: dashed; background: transparent; }
.period-list .period-range { letter-spacing: .3px; }
.ghost-btn.tiny.danger { color: #b03a5e; border-color: rgba(226,109,146,.55); }
.ghost-btn.tiny.danger:hover { background: rgba(226,109,146,.12); border-color: #e26d92; }

/* ---------- 日计划 ---------- */
.add-row { display: flex; gap: 10px; margin-bottom: 14px; }
.progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.progress-wrap.big { margin: 18px 0; }
.progress-bar { flex: 1; height: 12px; background: var(--panel-soft); border: 1px solid var(--gold-3); border-radius: 20px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-2), var(--rose-2), var(--rose)); transition: .3s; }
.progress-text { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.todo-item {
  display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--line); border-left: 4px solid var(--rose);
  border-radius: 4px; padding: 12px 14px; box-shadow: var(--shadow);
}
.todo-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rose);
  cursor: pointer; flex: 0 0 auto; display: grid; place-items: center; transition: .15s; color: #fff8;
}
.todo-check.done { background: var(--rose); border-color: var(--rose); }
.todo-text { flex: 1; font-size: 15px; word-break: break-word; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--ink-soft); font-style: italic; }
.todo-del { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 16px; }
.todo-del:hover { color: #8a2a3e; }
.todo-empty { color: var(--ink-soft); text-align: center; padding: 28px; font-style: italic; }

/* 日计划：任务打卡块 + 三栏（习惯打卡 / 时间轴 / 对比图） */
.daily-block { margin-bottom: 22px; }
.daily-block-head, .col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.daily-block-title, .col-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.col-ico { width: 20px; height: 20px; color: var(--rose); flex: 0 0 auto; }
.daily-cols { display: grid; grid-template-columns: 1fr 1.1fr 1.3fr; gap: 18px; align-items: stretch; }
.daily-col { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.col-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; }

/* 左栏：习惯打卡 */
.habit-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.habit-sub:last-child { border-bottom: none; }
.habit-label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); }
.habit-ico { width: 22px; height: 22px; color: var(--rose); display: inline-flex; }
.habit-ico svg { width: 100%; height: 100%; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 20px; transition: .2s; cursor: pointer; }
.switch-track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.switch input:checked + .switch-track { background: linear-gradient(90deg, var(--gold-2), var(--rose)); border-color: var(--rose); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }
.switch.sm { width: 38px; height: 22px; flex: 0 0 auto; }
.switch.sm .switch-track::before { width: 16px; height: 16px; left: 2px; top: 2px; }
.switch.sm input:checked + .switch-track::before { transform: translateX(16px); }
.water-cups { display: flex; gap: 4px; flex-wrap: wrap; }
.cup { width: 18px; height: 22px; color: var(--gold-3); cursor: pointer; transition: .12s; }
.cup svg { width: 100%; height: 100%; }
.cup.full { color: #4aa3d6; }
.cup.full svg path:first-child { fill: rgba(74,163,214,.28); }
.cup:hover { transform: translateY(-2px); }
.sleep-moons { display: flex; gap: 4px; flex-wrap: wrap; }
.moon { width: 18px; height: 18px; color: var(--gold-3); cursor: pointer; transition: .12s; }
.moon svg { width: 100%; height: 100%; }
.moon.full { color: #9b7ec9; }
.moon.full svg path { fill: rgba(155,126,201,.30); }
.moon:hover { transform: translateY(-2px); }

/* 心情：8 个笑脸 */
.mood-faces { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.mood-face { width: 22px; height: 22px; color: var(--gold-3); cursor: pointer; transition: transform .12s, color .12s, background .12s; border-radius: 50%; }
.mood-face svg { width: 100%; height: 100%; display: block; }
.mood-face:hover { transform: translateY(-2px) scale(1.08); }
.mood-face.on { color: var(--rose); background: rgba(196,122,135,.15); transform: scale(1.12); }

/* 跟练：从资源库选取内容 */
.habit-sub-col { flex-direction: column; align-items: stretch; gap: 4px; }
.habit-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.habit-workout-actions { display: flex; align-items: center; gap: 10px; }
.workout-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.workout-empty { font-size: 12px; color: var(--ink-soft); font-style: italic; padding: 2px 0; }
.workout-item { display: flex; align-items: center; gap: 8px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.workout-name { flex: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workout-link { color: var(--rose); text-decoration: none; font-weight: 700; flex: 0 0 auto; }
.workout-link:hover { text-decoration: underline; }
.workout-del { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 13px; flex: 0 0 auto; padding: 0 2px; }
.workout-del:hover { color: #d96f6f; }
.workout-pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin: 4px 0 2px; }
.pick-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: .12s; background: var(--panel-soft); }
.pick-item:hover { border-color: var(--gold-3); }
.pick-item.on { border-color: var(--rose); background: rgba(196,122,135,.12); }
/* 自定义习惯 */
.custom-add-row { margin: 8px 0 4px; }
.custom-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.custom-empty { font-size: 12px; color: var(--ink-soft); font-style: italic; padding: 2px 0; }
.custom-item { display: flex; align-items: center; gap: 8px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.custom-check { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--rose); color: #fff; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.custom-check.done { background: var(--rose); }
.custom-name { flex: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-item.done .custom-name { text-decoration: line-through; color: var(--ink-soft); font-style: italic; }
.custom-del { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 13px; flex: 0 0 auto; padding: 0 2px; }
.custom-del:hover { color: #d96f6f; }
.pick-check { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--gold-3); display: grid; place-items: center; color: #fff; font-size: 12px; }
.pick-item.on .pick-check { background: var(--rose); border-color: var(--rose); }
.pick-name { flex: 1; font-size: 14px; color: var(--ink); }
.pick-cat { font-size: 11px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 2px 8px; flex: 0 0 auto; }
.pick-url { font-size: 11px; color: var(--ink-soft); flex: 0 0 auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 中栏：时间轴 */
.tl-add { display: flex; gap: 8px; margin-bottom: 16px; }
.tl-add .tl-time { width: 96px; flex: 0 0 auto; }
.tl-time { font-size: 12px; color: var(--gold); font-weight: 700; width: 48px; flex: 0 0 auto; }
/* 时间轴主体：左侧刻度轴 + 右侧三段输入框，并排 */
.tl-axis-row { display: flex; gap: 18px; align-items: stretch; margin-bottom: 14px; }
.timeline { position: relative; display: flex; flex: 0 0 auto; min-height: 480px; }
/* 24 小时刻度尺：24 个空心圆点，第 8、16 个为实心棕色点（将轴分为三段） */
.tl-scale { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 auto; width: 14px; padding: 2px 0; }
.tl-tick { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--line); flex: 0 0 auto; }
.tl-tick.solid { background: #c19a6b; border-color: #c19a6b; }
.tl-schedule { padding-top: 14px; border-top: 1px dashed var(--line); }
.tl-items { display: flex; flex-direction: column; }
.tl-item { position: relative; padding: 10px 0; }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--rose); cursor: pointer; transition: .15s; flex: 0 0 auto; }
.tl-dot:hover { box-shadow: 0 0 0 3px rgba(196,122,135,.25); }
.tl-dot.done { background: var(--rose); }
.tl-body { display: flex; align-items: center; gap: 10px; }
.tl-text { flex: 1; font-size: 14.5px; color: var(--ink); }
.tl-item.done .tl-text { text-decoration: line-through; color: var(--ink-soft); font-style: italic; }
.tl-del { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 14px; }
.tl-del:hover { color: #8a2a3e; }
.tl-empty { color: var(--ink-soft); text-align: center; padding: 28px 0; font-style: italic; font-size: 13.5px; }

/* 时间轴三段时段备忘：放在刻度轴右侧（棕色实点分成三段），纵向与三段对齐 */
.seg-notes { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 480px; }
.seg-note { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.seg-label { display: flex; align-items: center; gap: 7px; font-family: var(--serif); font-size: 13px; color: var(--ink-soft); letter-spacing: .5px; }
.seg-dot { width: 9px; height: 9px; border-radius: 50%; background: #c19a6b; border: 1px solid #c19a6b; flex: 0 0 auto; }
.seg-input { flex: 1; width: 100%; border: 1px solid var(--line); background: var(--panel-soft); border-radius: 4px; padding: 9px 11px; font-family: var(--serif); font-size: 16.5px; color: var(--ink); resize: none; min-height: 38px; line-height: 1.5; }
.seg-input:focus { outline: none; border-color: var(--gold); }

/* 右栏：对比图（双栏笔记 / 图表留白 + 照片） */
.compare { flex: 1; display: flex; flex-direction: column; min-height: 300px; }
.cmp-half { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.compare-divider { height: 0; border-top: 1px dashed var(--gold-3); margin: 10px 0; }
.cmp-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1; min-height: 0; }
.cmp-add { border: 1px dashed var(--line); background: var(--panel-soft); color: var(--ink-soft); border-radius: 4px; padding: 6px 12px; font-family: var(--serif); font-size: 12.5px; cursor: pointer; transition: .15s; }
.cmp-add:hover { border-color: var(--gold); color: var(--ink); }
.cmp-img { flex: 0 0 auto; max-width: 100%; max-height: 260px; height: auto; width: auto; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(90,58,30,.15); object-fit: cover; }
.cmp-acts { display: flex; gap: 6px; }
.cmp-acts button { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: var(--serif); transition: .15s; }
.cmp-acts button:hover { border-color: var(--gold); color: var(--ink); }
.cmp-note { flex: 0 0 auto; width: 100%; height: 84px; border: 1px solid var(--line); background: var(--panel-soft); border-radius: 4px; padding: 10px 12px; font-family: var(--serif); font-size: 13.5px; color: var(--ink); resize: none; line-height: 1.5; }
.cmp-note:focus { outline: none; border-color: var(--gold); }

/* 日计划对比图下方：今日完成打卡按钮 */
.daily-done-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.dd-status {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-family: var(--serif);
  line-height: 1.4;
}
.daily-done-btn.done {
  background: #2e7d4f;
  border-color: #2e7d4f;
  color: #fff;
}
.wb-toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(60,40,22,.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 13px;
  font-family: var(--serif);
  opacity: 0;
  pointer-events: none;
  transition: .25s;
  z-index: 9999;
  max-width: 80vw;
  text-align: center;
}
.wb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 每个页面顶部/底部：保存键 */
.view-save-bar {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}
.view-save-bar.view-save-bottom {
  padding: 8px 0 22px;
  border-top: 1px dashed var(--line);
  margin-top: 10px;
}
.view-save-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 1px solid rgba(184, 134, 11, .55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #fff8e8 0%, #fbe7b8 55%, #f0d08a 100%);
  color: #7a4f12;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--serif);
  letter-spacing: .6px;
  padding: 9px 30px 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 8px rgba(184, 134, 11, .25),
    0 1px 2px rgba(120, 80, 10, .12);
  transition: transform .15s ease, box-shadow .22s ease, border-color .22s ease, background .25s ease, color .25s ease;
}
.view-save-btn .vsb-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.view-save-btn .vsb-ico svg { display: block; filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .8)); }
.view-save-btn .vsb-ico-check { display: none; }
.view-save-btn .vsb-txt { line-height: 1.4; }
.view-save-btn:hover {
  transform: translateY(-1.5px);
  border-color: rgba(184, 134, 11, .8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #fffcf0 0%, #fdeecb 55%, #f4d99a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 6px 16px rgba(184, 134, 11, .38),
    0 2px 4px rgba(120, 80, 10, .15);
}
.view-save-btn:active { transform: translateY(0) scale(.96); }
.view-save-btn.saved {
  border-color: rgba(60, 140, 90, .55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #f4fbf6 0%, #e2f3e8 100%);
  color: #2e7d3a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 8px rgba(80, 150, 100, .3),
    0 1px 2px rgba(40, 110, 70, .12);
}
.view-save-btn.saved .vsb-ico-save { display: none; }
.view-save-btn.saved .vsb-ico-check { display: inline-flex; animation: vsb-pop .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes vsb-pop {
  0% { transform: scale(0) rotate(-35deg); opacity: 0; }
  60% { transform: scale(1.28) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 对比图底部：数据对比（复用 .metric-* 行样式） */
.day-metrics { flex: 0 0 auto; }
.day-metrics-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.day-metrics-title { font-size: 14.5px; font-weight: 700; color: var(--gold); letter-spacing: 1.5px; }
.day-metrics .week-panel-sub { margin: 0 0 10px; font-size: 12px; }
.primary-btn.mini { padding: 5px 12px; font-size: 12.5px; border-radius: 999px; }

/* ---------- 资源库：变美金字塔 ---------- */
.pyramid-block {
  margin: 14px 0 22px;
  padding: 14px 16px 16px;
  background: rgba(255, 252, 244, .88);
  border: 1px solid rgba(200, 165, 90, .35);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(140, 110, 50, .08);
}
.pyramid-head { margin-bottom: 10px; }
.pyramid-title-block { font-size: 15px; font-weight: 700; color: var(--gold); letter-spacing: 1px; margin-bottom: 4px; }
.pyramid-desc { font-size: 12px; color: var(--ink-soft); font-family: var(--serif); line-height: 1.5; }
.pyramid-svg-wrap { max-width: 520px; margin: 0 auto; }
.pyramid-svg { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .pyramid-svg-wrap { max-width: 360px; }
}

/* ---------- 周计划 ---------- */
.week-range { font-size: 14px; font-weight: 700; color: var(--rose); letter-spacing: 1px; }

/* ---------- 资源库：艾森豪威尔矩阵（象限格式） ---------- */
.eisen-block {
  margin: 16px 0 22px;
  padding: 14px 16px 16px;
  background: rgba(255, 252, 244, .88);
  border: 1px solid rgba(200, 165, 90, .35);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(140, 110, 50, .08);
}
.eisen-head { margin-bottom: 12px; }
.eisen-title-block { font-size: 15px; font-weight: 700; color: var(--gold); letter-spacing: 1px; margin-bottom: 4px; }
.eisen-desc { font-size: 12px; color: var(--ink-soft); font-family: var(--serif); line-height: 1.5; }

/* 象限坐标系：纯十字 + 轴标签 + 四角象限文字（两行等高、两列等宽，十字居正中） */
.eisen-quadrant {
  position: relative;
  max-width: 560px;
  margin: 6px auto 4px;
  padding: 36px 60px;
}
.eisen-axis {
  position: absolute;
  font-size: 14.5px;
  font-weight: 600;
  color: #4a3520;
  font-family: var(--serif);
  white-space: nowrap;
  letter-spacing: 1px;
}
.eisen-axis.axis-top    { top: 6px;    left: 50%; transform: translateX(-50%); }
.eisen-axis.axis-bottom { bottom: 6px; left: 50%; transform: translateX(-50%); }
.eisen-axis.axis-left   { left: 6px;   top: 50%;  transform: translateY(-50%); }
.eisen-axis.axis-right  { right: 6px;  top: 50%;  transform: translateY(-50%); }
.eisen-grid-q {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 1 / 1; /* 正方形：十字交叉点落在正中心 */
}
.eisen-cell-q {
  position: relative;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
.eisen-cell-q.tl { border-right: 1px solid #b9a376; border-bottom: 1px solid #b9a376; }
.eisen-cell-q.tr { border-bottom: 1px solid #b9a376; }
.eisen-cell-q.bl { border-right: 1px solid #b9a376; }
.eisen-corner {
  font-size: 13px;
  color: #c2b691;
  font-family: var(--serif);
  white-space: nowrap;
  letter-spacing: .8px;
  align-self: flex-start;
}
.eisen-cell-q.tr .eisen-corner { align-self: flex-end; }
.eisen-cell-q.br .eisen-corner { align-self: flex-end; }

/* 输入区（每个象限都有） */
.eisen-input-area { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; flex: 1; }
.eisen-input-area .eisen-add { display: flex; gap: 6px; }
.eisen-input-area .inp { flex: 1; font-size: 10px; padding: 6px 10px; border-radius: 9px; min-width: 0; }
.eisen-input-area .eisen-add-btn {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid #5b9bd5;
  background: #5b9bd5;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
}
.eisen-input-area .eisen-add-btn:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(91, 155, 213, .35); }
.eisen-input-area .eisen-add-btn:active { transform: scale(.96); }
.eisen-input-area .eisen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; }
.eisen-input-area .eisen-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid rgba(91, 155, 213, .28);
  border-radius: 7px;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.eisen-input-area .eisen-item:hover { background: #f5fbff; }
.eisen-input-area .eisen-check {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.3px solid rgba(91, 155, 213, .55);
  color: #fff;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .15s;
}
.eisen-input-area .eisen-item.done { opacity: .62; }
.eisen-input-area .eisen-item.done .eisen-check { background: #5b9bd5; border-color: #5b9bd5; }
.eisen-input-area .eisen-item.done .eisen-txt { text-decoration: line-through; color: #8a8f96; }
.eisen-input-area .eisen-txt { flex: 1; line-height: 1.3; word-break: break-all; }
.eisen-input-area .eisen-del {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #aab8c8;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: .55;
  transition: opacity .15s ease, color .15s ease;
}
.eisen-input-area .eisen-del:hover { color: #d05a5a; opacity: 1; }
.eisen-input-area .eisen-empty { font-size: 12px; color: #c0b8a0; padding: 2px; font-family: var(--serif); list-style: none; }

@media (max-width: 640px) {
  .eisen-quadrant { padding: 30px 46px; }
  .eisen-cell-q { padding: 10px; }
  .eisen-corner { font-size: 12px; }
  .eisen-axis { font-size: 13px; }
}
/* 双向跳转按钮：日计划 ↔ 周计划（洛可可玫瑰金胶囊按钮） */
.jump-btn {
  margin-left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--serif); font-size: 13.5px; font-weight: 700; letter-spacing: 1px;
  color: #fff; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 3px 10px rgba(196,122,135,.32);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.jump-btn .jb-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.jump-btn.to-weekly { background: linear-gradient(135deg, var(--rose) 0%, var(--rose-2) 45%, var(--gold) 100%); }
.jump-btn.to-daily { background: linear-gradient(135deg, var(--gold) 0%, var(--rose-2) 55%, var(--rose) 100%); }
.jump-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(196,122,135,.5);
  filter: saturate(1.06) brightness(1.04);
}
.jump-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(196,122,135,.4); }
.week-top { display: flex; gap: 18px; margin: 18px 0 22px; flex-wrap: wrap; }
.week-panel { flex: 1 1 320px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; box-shadow: var(--shadow); }
.week-panel-title { font-family: var(--serif); font-size: 17px; color: var(--ink); margin: 0 0 4px; }
.week-panel-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.focus-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink-soft); border-radius: 999px; padding: 5px 13px; font-family: var(--serif); font-size: 12.5px; cursor: pointer; transition: .15s; }
.chip:hover { border-color: var(--rose); color: var(--ink); }
.focus-inputs { display: flex; flex-direction: column; gap: 9px; }
.focus-inp { width: 100%; }
.focus-row { display: flex; align-items: center; gap: 8px; }
.focus-row .focus-inp { flex: 1; width: auto; }
.focus-del { flex: 0 0 auto; width: 28px; height: 28px; line-height: 26px; text-align: center; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink-soft); cursor: pointer; font-size: 13px; transition: .15s; }
.focus-del:hover { color: #fff; background: var(--rose); border-color: var(--rose); }
.focus-add { margin-top: 10px; }
.reward-status { min-height: 20px; font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 12px; line-height: 1.5; font-family: var(--serif); }
.reward-status.reached { color: #2e7d4f; font-weight: 700; }
.week-reward-panel .inp { width: 100%; resize: vertical; }
.week-reward-panel .primary-btn { margin-top: 4px; }
.checks-title { margin: 4px 0 12px; }
.week-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.week-check {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  background: var(--panel-soft); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 12px 10px; cursor: default; transition: .15s; min-height: 188px; position: relative;
  font-family: var(--serif); color: var(--ink-soft);
}
.week-check:hover { border-color: var(--rose); box-shadow: var(--shadow); }
.wc-toggle {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; border-radius: 7px; padding: 6px 4px; transition: .15s; min-height: 64px;
}
.wc-toggle:hover { background: rgba(196,122,135,.1); }
.week-check .wc-day { font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.week-check .wc-date { font-size: 12px; color: var(--gold); }
.week-check .wc-mark { font-size: 26px; line-height: 1; margin-top: 4px; color: transparent; }
.week-check.done { background: linear-gradient(180deg, #e9f7ee, #d6f0df); border-color: #5bbd7e; color: #2e7d4f; }
.week-check.target-day { box-shadow: 0 0 0 3px var(--rose); border-color: var(--rose); }
.week-check.target-day::after { content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.week-check.done .wc-mark { color: #2e9d57; }
.week-check.rest { grid-column: 2; background: var(--panel); border-style: dashed; }
.week-check .wc-rest { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.week-check .wc-jump {
  position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; line-height: 20px;
  text-align: center; font-size: 15px; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 50%; background: var(--panel); transition: .15s; cursor: pointer; z-index: 2;
}
.week-check .wc-jump:hover { color: #fff; background: var(--rose); border-color: var(--rose); }
.week-check.done .wc-jump { color: #2e7d4f; border-color: #9bd3b0; }
.week-check.done .wc-jump:hover { color: #fff; background: var(--rose); border-color: var(--rose); }
.wc-note {
  width: 100%; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 6px; padding: 11px 12px; font-family: var(--serif); font-size: 15px; line-height: 1.6;
  min-height: 78px; resize: vertical; transition: .15s;
}
.wc-note:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 2px rgba(196,122,135,.2); }

/* 区块三：数据对比 */
.cmp-block { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.cmp-photos { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.cmp-photo-slot { flex: 1 1 0; min-width: 0; }
.cmp-photo-cap { font-size: 12.5px; color: var(--gold); font-weight: 700; margin-bottom: 6px; letter-spacing: .5px; }
.wk-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; border: 1px dashed var(--line); border-radius: 8px; padding: 12px; background: var(--panel); }
.metric-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.metric-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.metric-name { flex: 0 0 130px; width: 130px; }
.metric-nums { display: flex; gap: 10px; flex: 1; }
.metric-lab { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-soft); flex: 1; }
.metric-lab input { width: 100%; }
.metric-delta { flex: 0 0 100px; text-align: center; font-weight: 700; font-size: 17px; font-family: var(--serif); }
.metric-delta.up { color: #c0392b; }    /* 上升 · 红 */
.metric-delta.down { color: #2f9e6f; }  /* 下降 · 绿 */
.metric-delta.neutral { color: var(--ink-soft); }
.metric-del { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 16px; flex: 0 0 auto; }
.metric-del:hover { color: #8a2a3e; }
@media (max-width: 640px) {
  .metric-row { flex-wrap: wrap; }
  .metric-name { flex: 1 1 100%; width: 100%; }
  .metric-delta { flex: 0 0 auto; margin-left: auto; }
}

/* ---------- 100天总结 ---------- */
.hundred-setup { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 6px; }
.hundred-setup label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.hundred-board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 9px; }
.hundred-cell {
  aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--gold-3);
  background: var(--panel); cursor: pointer; display: grid; place-items: center;
  font-size: 12px; position: relative; transition: .12s; padding: 2px;
  box-shadow: inset 0 0 0 1px #fff8;
}
.hundred-cell:hover { border-color: var(--rose); transform: translateY(-2px); box-shadow: var(--shadow); }
.hundred-cell.filled { background: linear-gradient(180deg, var(--rose-2), var(--rose)); color: #fff8; font-weight: 700; border-color: var(--gold); }
.hundred-cell .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); position: absolute; top: 5px; right: 5px; }
.hundred-cell .label { font-size: 11px; }
.rating { display: flex; gap: 6px; font-size: 22px; }
.rating span { cursor: pointer; opacity: .3; color: var(--gold); }
.rating span.on { opacity: 1; color: var(--gold); }

@media (max-width: 920px) {
  .calendar-grid, .stat-cards, .chart-row, .res-list { grid-template-columns: 1fr; }
  .daily-cols { grid-template-columns: 1fr; }
  .week-checks { grid-template-columns: repeat(2, 1fr); }
  .week-check.rest { grid-column: auto; }
  .main { padding: 22px; }
  .sidebar { width: 200px; flex-basis: 200px; }
}

/* ===================== 个人数据面板 ===================== */
.body-panel { display: flex; gap: 26px; align-items: flex-start; }
/* 全身照：移至基础身体数据上方，作为顶部居中块 */
.photo-pane { width: 100%; max-width: 460px; margin: 0 auto 24px; }
.photo-box {
  position: relative; width: 100%;
  background: var(--panel-soft); border: 11px solid transparent;
  border-image: url("frame.svg") 30 round; border-radius: 3px;
  overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow); cursor: pointer;
}
.photo-box.drag { border-color: var(--rose); }
#bodyPhoto { max-width: 100%; max-height: 100%; display: none; object-fit: contain; }
.measure-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.photo-empty { text-align: center; color: var(--ink-soft); padding: 18px; min-height: 320px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.photo-empty-ico { font-size: 36px; margin-bottom: 8px; }
.photo-empty p { margin: 6px 0 4px; font-size: 14px; }
.photo-tip { font-size: 11px; font-style: italic; }
.photo-actions { display: flex; gap: 8px; margin-top: 12px; }
.measure-hint {
  margin-top: 12px; font-size: 12.5px; font-style: italic; color: #6b3a4a;
  background: rgba(201,162,39,.12); border-left: 3px solid var(--gold);
  padding: 9px 13px; border-radius: 3px; line-height: 1.5;
}

/* 明星 / 网红参考照（个人分析左侧） */
.star-pane { flex: 0 0 300px; position: sticky; top: 20px; align-self: flex-start; }
.star-head { font-size: 14px; font-weight: 700; color: var(--ink-soft); letter-spacing: .5px; margin-bottom: 10px; }
.star-pane .photo-box { cursor: default; }
#starPhoto { width: 100%; max-height: 320px; object-fit: contain; display: none; }
.star-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.star-empty { font-size: 12.5px; color: var(--ink-soft); font-style: italic; line-height: 1.5; }
.star-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.star-item:hover { border-color: var(--rose); }
.star-item.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,162,39,.25); }
.star-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex: 0 0 42px; background: var(--panel-soft); }
.star-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.star-del { border: none; background: transparent; color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.star-del:hover { color: #8a2a3e; }

#frontPhoto, #side45Photo, #sidePhoto { width: 100%; max-height: 200px; object-fit: contain; display: none; }
/* 右侧数据 */
.data-pane { flex: 1; min-width: 0; }
.block {
  background: var(--panel); border: 11px solid transparent;
  border-image: url("frame.svg") 30 round; border-radius: 3px;
  padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.block-title {
  margin: 0 0 14px; font-size: 17px; color: var(--ink); letter-spacing: 1px; font-weight: 700;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.block-note { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: -6px 0 12px; line-height: 1.5; }
.field { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.field.col { flex-direction: column; align-items: flex-start; gap: 8px; }
.field > label { flex: 0 0 130px; font-size: 14px; color: var(--ink); }
.field > label small { color: var(--ink-soft); font-size: 11px; }
.ctl { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.inp.num { width: 120px; }
.unit { font-size: 12px; color: var(--ink-soft); }
.readonly { font-weight: 700; color: var(--rose); font-size: 16px; min-width: 56px; display: inline-block; }
.sf-eval { font-size: 12px; font-weight: 700; margin-left: 6px; }
.sf-eval.sf-good { color: #2bb673; }
.sf-eval.sf-small { color: #e0a13a; }
.sf-eval.sf-big { color: #e36b6b; }
.bmi-tag { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; line-height: 1.6; margin-left: 4px; }
.bmi-tag.thin { color: #fff; background: linear-gradient(180deg,#8fb6e6,#6f9bd6); }
.bmi-tag.normal { color: #2f6b3a; background: #d8efd9; }
.bmi-tag.fat { color: #fff; background: linear-gradient(180deg,#e89a9a,#d96f6f); }
/* 分段单选 */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  border: 1px solid var(--gold-3); background: rgba(255,250,238,.6); color: var(--ink);
  padding: 7px 14px; border-radius: 20px; cursor: pointer; font-family: var(--serif);
  font-size: 13.5px; transition: .15s;
}
.seg button:hover { border-color: var(--rose); }
.seg button.active {
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #fff8;
  border-color: var(--gold); font-weight: 700;
}
.seg-break { flex-basis: 100%; height: 0; }
/* 多选 */
.chk-group { display: flex; gap: 10px 18px; flex-wrap: wrap; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.chk input { accent-color: var(--rose); width: 15px; height: 15px; }

/* 区块八：问题分析（沿用区块六/七「侧面分析指标」卡片模板） */
.prob-group { margin-top: 18px; }
.prob-cat {
  margin: 4px 0 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--gold-3);
  font-family: var(--serif); font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: .5px;
}
.prob-group + .prob-group { margin-top: 26px; }
.ff-results.ff-metrics .ff-results-sub { font-size: 11.5px; }

/* 每项严重程度分段选择（沿用 .seg 视觉，独立类避免与全局单选逻辑冲突） */
.sevctl { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sevctl button {
  border: 1px solid var(--gold-3); background: rgba(255,250,238,.6); color: var(--ink);
  padding: 6px 13px; border-radius: 20px; cursor: pointer; font-family: var(--serif);
  font-size: 13px; transition: .15s;
}
.sevctl button:hover { border-color: var(--rose); }
.sevctl button.active[data-v="轻"] { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; font-weight: 700; }
.sevctl button.active[data-v="中"] { background: #fff8e1; color: #b8860b; border-color: #e6c200; font-weight: 700; }
.sevctl button.active[data-v="重"] { background: #fdecea; color: #c0392b; border-color: #f1aeb5; font-weight: 700; }

/* 待办优先级预览 */
.prob-priority {
  margin-top: 18px; padding: 14px 16px; border: 1px solid var(--gold-3);
  border-radius: 8px; background: var(--panel-soft);
}
.pp-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: .5px; }
.pp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pp-item {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 7px 10px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line);
}
.pp-rank { font-family: monospace; font-weight: 700; color: var(--gold); min-width: 22px; }
.pp-name { font-weight: 600; color: var(--ink); }
.pp-badge {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; color: #fff;
}
.pp-badge.sev-轻 { background: #43a047; }
.pp-badge.sev-中 { background: #e0a800; }
.pp-badge.sev-重 { background: #d64541; }
.pp-layer { color: var(--ink-soft); font-size: 12px; }
.pp-q { margin-left: auto; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.pp-item.sev-重 { border-color: #f1aeb5; }

/* 待办优先级面板：每个问题手动选择放入哪个象限 */
.qqctl { display: inline-flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.qqctl button {
  border: 1px solid var(--gold-3); background: rgba(255,250,238,.6); color: var(--ink);
  padding: 4px 10px; border-radius: 16px; cursor: pointer; font-family: var(--serif);
  font-size: 12px; transition: .15s;
}
.qqctl button:hover { border-color: var(--rose); }
.qqctl button.active[data-q="q1"] { background: #fdecea; color: #c0392b; border-color: #f1aeb5; font-weight: 700; }
.qqctl button.active[data-q="q2"] { background: #fff8e1; color: #b8860b; border-color: #e6c200; font-weight: 700; }
.qqctl button.active[data-q="q3"] { background: #e8f0fb; color: #2c5fb3; border-color: #aac4ec; font-weight: 700; }
.qqctl button.active[data-q="q4"] { background: #f1f1f1; color: #666; border-color: #ccc; font-weight: 700; }

/* 生成按钮区 */
.prob-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.prob-gen-hint { font-size: 12.5px; color: var(--ink-soft); }

/* 变美金字塔联动高亮 */
text.pyr-active { fill: #c0392b; font-weight: 700; }

/* ---------- 一日三餐：营养跟踪 ---------- */
.meals-block { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.meals-goal { margin-left: auto; }
.meals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.meal-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.meal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.meal-name { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.meal-sub { font-size: 12px; color: var(--gold); font-weight: 700; overflow-wrap: anywhere; }
.meal-photo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; border: 1px dashed var(--line); border-radius: 6px; background: var(--panel-soft); overflow: hidden; }
.meal-add { border: none; background: transparent; color: var(--ink-soft); font-family: var(--serif); font-size: 13px; cursor: pointer; padding: 6px 12px; }
.meal-add:hover { color: var(--ink); }
.meal-img { width: 100%; height: 110px; object-fit: cover; display: block; }
.meal-acts { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 5px; }
.meal-acts button { border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--ink-soft); border-radius: 4px; padding: 3px 8px; font-size: 11.5px; cursor: pointer; font-family: var(--serif); }
.meal-acts button:hover { border-color: var(--gold); color: var(--ink); }
.meal-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meal-inputs label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--ink-soft); font-family: var(--serif); }
.meal-inputs .inp { font-size: 14px; padding: 6px 8px; width: 100%; min-width: 0; }
/* 拍照识别 / 从库选 */
.meal-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meal-recognize, .meal-pick { font-size: 12.5px; padding: 5px 10px; border-radius: 5px; border: 1px solid var(--gold-3); background: var(--gold-1); color: var(--gold-7); cursor: pointer; font-family: var(--serif); }
.meal-recognize:hover, .meal-pick:hover { background: var(--gold-2); }
.meal-recog-status { font-size: 12px; color: var(--rose); font-family: var(--serif); }
.meal-recog { margin-top: 2px; padding: 10px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 6px; }
.meal-recog[hidden] { display: none; }
.recog-head { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; font-family: var(--serif); }
.recog-hint { font-size: 12px; color: var(--ink-soft); margin: 4px 0; }
.recog-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.recog-chip { font-size: 12.5px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--gold-3); background: var(--gold-1); color: var(--ink); cursor: pointer; font-family: var(--serif); transition: background .15s; }
.recog-chip:hover { background: var(--gold-2); }
.recog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.recog-tag { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--panel); color: var(--ink-soft); border: 1px solid var(--line); }
.recog-search { display: flex; flex-direction: column; gap: 8px; }
.recog-search .inp { font-size: 13px; padding: 7px 9px; width: 100%; min-width: 0; }
.recog-list { display: flex; flex-wrap: wrap; gap: 7px; max-height: 180px; overflow-y: auto; }
.meals-summary { margin-top: 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--gold-3); border-radius: 6px; }
.meals-summary .ms-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.meals-summary .ms-total { font-size: 16px; font-weight: 700; color: var(--ink); }
.meals-summary .ms-item { font-size: 13px; color: var(--ink-soft); }
.meals-summary .ms-item b { color: var(--rose); font-size: 15px; }
.macro-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 10px 0 4px; background: var(--line); }
.macro-bar span { display: block; height: 100%; }
.macro-p { background: #d98aa0; }
.macro-c { background: #e0b15a; }
.macro-f { background: #8fb8c9; }
.macro-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); }
.macro-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.meals-eval { margin-top: 12px; }
.meals-eval .eval-title { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.eval-verdict { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.eval-verdict.good { background: #e6f4ea; color: #2e7d4f; }
.eval-verdict.warn { background: #fdeede; color: #b9722a; }
.eval-verdict.info { background: #eef1f6; color: #5a6b86; }
.advice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.advice-list li { position: relative; padding: 9px 12px 9px 30px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 5px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.advice-list li::before { content: "💡"; position: absolute; left: 9px; top: 9px; font-size: 13px; }
.advice-list li.good { border-left-color: #5aa978; }
.advice-list li.warn { border-left-color: var(--rose); }
/* 肤色色块 */
.skin-group { display: flex; gap: 10px; flex-wrap: wrap; }
.skin-sw {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 6px;
  padding: 6px; cursor: pointer; font-family: var(--serif);
}
.skin-sw .skin-color { width: 42px; height: 28px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); }
.skin-sw span:last-child { font-size: 12px; color: var(--ink-soft); }
.skin-sw.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-3); }
/* 按钮尺寸 */
.ghost-btn.sm { padding: 5px 10px; font-size: 12px; }
.primary-btn.big { padding: 11px 26px; font-size: 15px; }
/* 底部 */
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.footer-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.save-toast { margin-top: 10px; color: #2bb673; font-weight: 700; }

/* ---------- 区块六：正面分析 ---------- */
.ff-photo-wrap { display: flex; flex-direction: column; }
.ff-stage { width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 11px solid transparent; border-image: url("frame.svg") 30 round; border-radius: 3px; background: var(--panel-soft); }
.ff-box { cursor: default; border: none; padding: 0; overflow: hidden; }
.ff-box img { width: 100%; height: auto; display: block; object-fit: contain; }
#ffCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; background: transparent; }
#ffCanvas:active { cursor: grabbing; }
.ff-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ff-zoom-label { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.ff-zoom-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.ff-zoom-btn:hover { border-color: var(--rose); }
.ff-zoom input[type=range] { flex: 1; min-width: 120px; max-width: 320px; accent-color: var(--rose); }
.ff-zoom-val { font-size: 13px; font-weight: 700; color: var(--rose); min-width: 46px; text-align: center; }
.ff-box.drag { border-color: var(--rose); }
.ff-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ff-hint { font-size: 12.5px; font-style: italic; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.5; }
.ff-results { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); padding: 16px 16px 10px; }
.ff-results-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ff-results-title { font-size: 15px; font-weight: 800; color: var(--rose); letter-spacing: .5px; }
.ff-results-sub { font-size: 11.5px; color: var(--ink-soft); }
.ff-results .field { padding: 6px 0; }
.five-inputs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.five-inputs .inp { width: 100%; min-width: 0; }


@media (max-width: 920px) {
  .body-panel { flex-direction: column; }
  .photo-pane { position: static; flex-basis: auto; width: 100%; max-width: 340px; margin: 0 auto; }
  .star-pane { position: static; flex-basis: auto; width: 100%; max-width: 340px; margin: 0 auto 18px; }
  .five-inputs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 区块六扩展：可视化 / 细查 ---------- */
.ff-tools { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.ff-tools .ghost-btn.sm.active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #fff8; border-color: var(--gold); font-weight: 700; }
.ff-tool-status { font-size: 12px; color: #6b3a4a; font-weight: 700; }
.ff-legend { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft); align-items: center; }
.ff-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.ff-legend .lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ff-legend .lg-sep { width: 1px; height: 14px; background: var(--line); }

/* ===================== 100 天总结 ===================== */
.hundred-setup { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hundred-setup label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.hundred-tip { font-size: 12px; color: var(--ink-soft); font-style: italic; align-self: center; }
.hundred-source { flex-basis: 100%; font-size: 12.5px; color: var(--rose); font-weight: 600; margin-top: 2px; }

/* 区块容器：覆盖旧的 10 列网格 */
.hundred-board { display: flex; flex-direction: column; gap: 18px; max-width: 940px; }
/* 100 天总结区块 + 顶部横幅套用「日计划」.daily-block 模板 + 浅色外框（同 .daily-col） */
.h-block {
  margin-bottom: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.h-block-body { padding-top: 4px; }
.muted { color: var(--ink-soft); font-style: italic; font-size: 13px; }
.link-btn { border: none; background: transparent; color: var(--rose); cursor: pointer; font-size: 12.5px; font-family: var(--serif); text-decoration: underline; padding: 0 4px; }
.link-btn.danger { color: #b06a55; }

/* 区块一：庆祝横幅（现复用 .daily-block 模板，无独立背景/奖章；统计卡样式见下） */
.banner-stats { position: relative; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.bstat { background: rgba(255,250,238,.7); border: 1px solid var(--gold-3); border-radius: 12px; padding: 12px 22px; min-width: 120px; }
.bnum { display: block; font-size: 30px; font-weight: 800; color: var(--rose); line-height: 1; }
.blab { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; letter-spacing: .5px; }

/* 区块二：身体数据变化 */
.body-grid { display: flex; flex-direction: column; gap: 8px; }
.body-row { display: grid; grid-template-columns: 150px 1fr 110px 28px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--panel-soft); }
.body-del { width: 24px; height: 24px; border: none; border-radius: 50%; background: #f3e3e6; color: #c0392b; font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s; justify-self: center; }
.body-del:hover { background: #eccdd3; }
.body-name { font-size: 14px; color: var(--ink); font-weight: 600; }
.body-name i { font-style: normal; font-size: 11px; color: var(--ink-soft); }
.body-vals { display: flex; align-items: center; gap: 8px; }
.body-vals .arrow { color: var(--gold); font-weight: 700; }
.body-vals .inp.mini { width: 74px; flex: 0 0 auto; text-align: center; }
.body-val-ro { width: 74px; flex: 0 0 auto; text-align: center; padding: 6px 0; font-size: 13px; font-weight: 700; color: var(--rose); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.inp.mini { width: 100%; padding: 6px 9px; font-size: 13px; }
.body-delta { text-align: right; font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.body-delta.up { color: #c0392b; }
.body-delta.down { color: #2e8b57; }
.body-derived { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: rgba(201,162,39,.10); border: 1px dashed var(--gold-3); }
.der-row { display: flex; align-items: baseline; gap: 10px; font-size: 14px; padding: 3px 0; }
.der-name { font-weight: 700; color: var(--ink); width: 70px; }
.der-val { color: var(--rose); font-weight: 700; }
.der-row .body-delta { font-size: 13px; }
.body-hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); font-style: italic; line-height: 1.5; }
.body-add-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.body-add-row .inp { flex: 1 1 160px; }
.body-add-row .inp.mini { flex: 0 0 90px; }

/* 区块三：对比图 + 滑块 */
.cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp-side { text-align: center; }
.cmp-label { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .5px; margin-bottom: 6px; }
.cmp-imgbox { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; background: var(--panel); min-height: 200px; display: flex; align-items: center; justify-content: center; }
.cmp-img { max-width: 100%; max-height: 280px; border-radius: 6px; }
.cmp-ph { color: var(--ink-soft); font-style: italic; font-size: 13px; }
.cmp-upload { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #fff8; background: linear-gradient(180deg, var(--rose-2), var(--rose)); border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.cmp-upload:hover { filter: brightness(1.05); }
.slider-wrap { margin-top: 18px; }
.slider-compare { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 3 / 4; max-height: 420px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-soft); user-select: none; }
.sc-after, .sc-before img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sc-after { position: absolute; inset: 0; }
.sc-before { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; border-right: 2px solid #fff; }
.sc-before img { position: absolute; top: 0; left: 0; height: 100%; width: auto; }
.sc-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3; margin: 0; }
.sc-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.3); transform: translateX(-50%); pointer-events: none; z-index: 2; }
.sc-handle::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--rose); display: grid; place-items: center; font-size: 14px; box-shadow: var(--shadow); }
.slider-hint { text-align: center; font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; font-style: italic; }
.cmp-note-label { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.cmp-note2 { width: 100%; min-height: 60px; resize: vertical; font-family: var(--serif); }

/* 区块五：打卡日历 */
.cal-summary { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 12px; }
.cal-summary b { color: var(--rose); font-size: 16px; }
.cal-week { margin-bottom: 14px; }
.cal-wlabel { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: 1px; margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px; }
.cal-range { font-size: 11px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 5px; border: 1px solid var(--gold-3); background: var(--panel); color: var(--ink-soft); font-size: 11px; cursor: pointer; transition: .12s; }
.cal-cell:hover { border-color: var(--rose); transform: translateY(-2px); box-shadow: var(--shadow); }
.cal-num { font-size: 11px; line-height: 1; }
.cal-mark { font-size: 15px; line-height: 1; color: transparent; font-weight: 700; }
.cal-cell.filled { background: linear-gradient(180deg, #e9f7ee, #d6f0df); border-color: #5bbd7e; color: #2e7d4f; }
.cal-cell.filled:hover { border-color: #5bbd7e; }
.cal-cell.filled .cal-num { color: #2e7d4f; font-weight: 700; }
.cal-cell.filled .cal-mark { color: #2e9d57; }

/* 区块六：周重点汇总 */
.focus-sum { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); padding: 10px 14px; margin-bottom: 10px; cursor: pointer; }
.fs-head { display: flex; align-items: center; gap: 10px; }
.fs-name { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.fs-badge { font-size: 11.5px; border-radius: 999px; padding: 3px 10px; font-weight: 700; }
.fs-badge.done { background: rgba(46,139,87,.16); color: #2e8b57; }
.fs-badge.prog { background: rgba(201,162,39,.16); color: #9a7b1e; }
.fs-count { font-size: 12px; color: var(--ink-soft); }
.fs-detail { margin: 8px 0 2px; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); display: none; }
.focus-sum.open .fs-detail { display: block; }
.fs-detail .ok { color: #2e8b57; font-weight: 700; }
.fs-detail .no { color: #b06a55; font-weight: 700; }

/* 区块七：反思记录 */
.refl-item { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; background: var(--panel-soft); padding: 10px 14px; margin-bottom: 10px; }
.refl-top { display: flex; align-items: center; gap: 10px; }
.refl-date { font-size: 12.5px; color: var(--gold); font-weight: 700; }
.refl-rate { color: var(--gold); letter-spacing: 1px; }
.refl-acts { margin-left: auto; display: flex; gap: 4px; }
.refl-text { margin: 6px 0 0; font-size: 14px; color: var(--ink); line-height: 1.6; white-space: pre-wrap; }

/* 区块八：奖励确认 */
.reward-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); padding: 10px 14px; margin-bottom: 10px; }
.reward-emoji { font-size: 20px; }
.reward-name { flex: 1; font-size: 14.5px; color: var(--ink); font-weight: 600; }
.reward-btn { border: 1px solid var(--gold-3); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 16px; font-size: 13px; cursor: pointer; font-family: var(--serif); transition: .15s; }
.reward-btn:hover { border-color: var(--rose); }
.reward-btn.on { background: rgba(46,139,87,.14); color: #2e8b57; border-color: #2e8b57; }
.reward-item.claimed { opacity: .85; }
.reward-item.claimed .reward-name { text-decoration: line-through; color: var(--ink-soft); }
.reward-del { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer; transition: .15s; }
.reward-del:hover { color: #fff; background: var(--rose); border-color: var(--rose); }
.reward-list { margin-bottom: 14px; }
.reward-add-row { display: flex; gap: 10px; }
.reward-add-row .inp { flex: 1; }

/* 区块九：导出分享 */
.export-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.export-hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); font-style: italic; line-height: 1.5; }

/* 区块十：下一阶段建议 */
.suggest-list { margin: 0; padding-left: 20px; }
.suggest-list li { font-size: 14px; color: var(--ink); line-height: 1.7; margin-bottom: 6px; }

/* 区块十一：开启下一个 100 天 */
.next-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }

/* 打印（导出 PDF）：只打印 100 天总结看板 */
@media print {
  .sidebar, .view-head, .hundred-setup, .nav, .sidebar-foot { display: none !important; }
  .view { display: none !important; }
  #view-hundred { display: block !important; }
  .h-block { break-inside: avoid; box-shadow: none; }
}
.ff-legend .lg-note { font-style: italic; }

/* ===================== 情绪治愈盲盒 ===================== */
.emo-reminder {
  margin: 6px 0 18px; padding: 14px 18px; border-radius: 14px;
  background: rgba(201,162,39,.12); border: 1px dashed var(--gold-3); color: #6b4326; font-size: 14.5px;
}
.emo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.emo-top-tip { color: var(--ink-soft); font-size: 13.5px; }

.blind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 6px; max-width: 760px; margin-left: auto; margin-right: auto; }
.blind-box {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 14px 16px; cursor: pointer; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(180deg, #fffdf8, #fbf2e2);
  box-shadow: 0 8px 20px rgba(61,42,23,.10); transition: transform .2s, box-shadow .2s;
}
.blind-box:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(61,42,23,.16); }
.blind-box.is-full { opacity: .72; }
.blind-label {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px;
  background: var(--c); color: #5a3a12; font-weight: 800; font-size: 14px; letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(61,42,23,.18); border: 1px solid rgba(255,255,255,.5);
}
.blind-label svg { width: 19px; height: 19px; flex: 0 0 auto; }
.blind-label-txt { line-height: 1; }
.blind-shape { position: relative; width: 92px; height: 88px; }
.blind-base {
  position: absolute; left: 6px; right: 6px; bottom: 0; height: 62px; border-radius: 12px;
  background: var(--c);
  box-shadow: inset 0 -10px 14px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35), 0 6px 12px rgba(61,42,23,.18);
}
.blind-base::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.blind-face { position: absolute; left: 0; right: 0; top: 26px; height: 56px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.blind-face svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 3px rgba(61,42,23,.25)); }
.blind-lid {
  position: absolute; left: 0; right: 0; top: 16px; height: 26px; border-radius: 11px 11px 7px 7px;
  background: linear-gradient(180deg, #fff8ef, var(--c));
  box-shadow: 0 3px 7px rgba(61,42,23,.22), inset 0 1px 0 #fff;
  transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.34,1.4,.5,1), opacity .5s; z-index: 3;
}
.blind-box.opening .blind-lid { transform: translateY(-30px) rotate(-12deg) scaleX(.94); opacity: .9; }
/* 开盒时小猫探头：静态脸淡出，探头猫从盒口弹起 */
.blind-peek {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: center;
  z-index: 5; pointer-events: none; opacity: 0; transform: translateY(46px) scale(.5);
}
.blind-peek svg { width: 42px; height: 42px; filter: drop-shadow(0 3px 4px rgba(61,42,23,.3)); }
.blind-box.opening .blind-face { opacity: 0; transition: opacity .2s; }
.blind-box.opening .blind-peek { animation: catPeek .58s cubic-bezier(.34,1.56,.5,1) forwards; }
@keyframes catPeek {
  0%   { opacity: 0; transform: translateY(46px) scale(.5); }
  30%  { opacity: 1; transform: translateY(2px) scale(1.06); }
  62%  { opacity: 1; transform: translateY(-6px) scale(1.0); }
  82%  { opacity: 1; transform: translateY(1px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.blind-ribbon { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 30px; height: 20px; z-index: 4; }
.blind-ribbon::before, .blind-ribbon::after {
  content: ""; position: absolute; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(255,255,255,.75); border: 2px solid var(--c);
}
.blind-ribbon::before { left: 0; } .blind-ribbon::after { right: 0; }
.blind-count { font-size: 12px; color: var(--ink-soft); }
.blind-box.is-full .blind-count { color: #b06a3a; }

/* 治愈话语卡片 */
.emotion-modal-mask[hidden] { display: none !important; }
.emotion-modal { width: auto; max-width: 94vw; }
.emo-card {
  position: relative; width: min(420px, 92vw); padding: 30px 28px 22px; border-radius: 24px;
  background: #fffdf9; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(61,42,23,.25); text-align: center; overflow: hidden;
}
.emo-card-glow { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% -10%, var(--c), transparent 62%); opacity: .26; pointer-events: none; }
.emo-card-close {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(61,42,23,.06); color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer; z-index: 3;
}
.emo-card-close:hover { background: rgba(61,42,23,.12); color: var(--ink); }
.emo-card-emoji { display: flex; justify-content: center; margin-bottom: 4px; }
.emo-card-emoji svg { width: 56px; height: 56px; filter: drop-shadow(0 3px 5px rgba(61,42,23,.28)); }
/* emoji 模式下的表情容器适配：与小猫 SVG 同等居中、不拉伸 */
.blind-face > span, .emo-card-emoji > span, .blind-peek > span,
.emo-ico-prev > span, .blind-label > span { line-height: 1; flex: 0 0 auto; }
.blind-face > span { font-size: 30px; }
.emo-card-label { font-weight: 800; color: #6b4326; margin: 6px 0 16px; letter-spacing: 3px; font-size: 16px; }
.phrase-text {
  font-family: "STKaiti","KaiTi","Kaiti SC","PingFang SC","Microsoft YaHei", cursive;
  font-size: 23px; line-height: 1.75; color: #5a4632; margin: 0 0 18px; position: relative;
}
.emo-card-actions { display: flex; gap: 10px; justify-content: center; }
.emo-card-foot { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }
.emo-rec-date { font-size: 13px; color: var(--ink-soft); letter-spacing: 2px; margin-bottom: 4px; }

.emo-toast {
  position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%) translateY(12px);
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #fff8; padding: 11px 20px; border-radius: 24px;
  box-shadow: var(--shadow); font-size: 14px; opacity: 0; transition: .25s; z-index: 300; pointer-events: none; max-width: 86vw; text-align: center;
}
.emo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 情绪与话语管理弹窗 */
.emo-set { width: min(580px, 94vw); max-height: 86vh; overflow: auto; padding: 22px 24px; }
.emo-set-head { display: flex; justify-content: space-between; align-items: center; }
.emo-set-head h3 { margin: 0; font-size: 18px; color: var(--ink); letter-spacing: 1px; }
.emo-set-sub { color: var(--ink-soft); font-size: 13px; margin: 6px 0 14px; }
.emo-set-list { display: flex; flex-direction: column; gap: 14px; }
.emo-set-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel-soft); }
.emo-set-item-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-left: 4px solid var(--c); padding-left: 10px; }
.emo-ico-prev { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(61,42,23,.15); }
.emo-ico-prev svg { width: 24px; height: 24px; }
.emo-icon-sel { width: 110px; }
.emo-label-inp { flex: 1; min-width: 120px; }
.emo-color { width: 40px; height: 34px; border: none; background: none; cursor: pointer; padding: 0; }
.emo-set-del { margin-left: auto; }
.emo-phrases { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.emo-phrase-row { display: flex; gap: 6px; align-items: center; }
.emo-phrase-inp { flex: 1; }
.emo-phrase-del, .emo-phrase-add, .emo-set-del {
  border: 1px solid var(--gold-3); background: rgba(255,250,238,.6); color: var(--ink-soft);
  border-radius: 6px; cursor: pointer; padding: 6px 10px; font-size: 13px; font-family: var(--serif);
}
.emo-phrase-del:hover, .emo-phrase-add:hover, .emo-set-del:hover { background: rgba(201,162,39,.14); color: var(--ink); }
.emo-set-del { border-color: #d9a3a3; }
.emo-set-add { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 14px; }
.emo-add-title { font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.emo-add-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.emo-set-add textarea { width: 100%; margin-bottom: 10px; }

/* 碎碎念 */
.suisui-block { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line); }
.suisui-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.suisui-title { font-size: 18px; font-weight: 800; color: #6b4326; letter-spacing: 2px; }
.suisui-sub { font-size: 12.5px; color: var(--ink-soft); }
.suisui-input-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.suisui-textarea { flex: 1; resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.6; }
.suisui-input-row .primary-btn { align-self: flex-end; white-space: nowrap; }
.suisui-list { display: flex; flex-direction: column; gap: 10px; }
.suisui-empty { color: var(--ink-soft); font-size: 13.5px; text-align: center; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.suisui-item {
  position: relative; padding: 12px 40px 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #fffdf8, #fbf2e2); border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(61,42,23,.08);
}
.suisui-date { font-size: 12px; color: #b06a3a; letter-spacing: 1px; margin-bottom: 4px; font-weight: 700; }
.suisui-text { font-size: 14.5px; line-height: 1.7; color: #5a4632; white-space: pre-wrap; word-break: break-word; }
.suisui-del {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: none; border-radius: 50%;
  background: rgba(61,42,23,.06); color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer;
}
.suisui-del:hover { background: rgba(209,107,107,.16); color: #c0392b; }

/* 年历情绪彩点 */
.month-grid .day { position: relative; }
.emo-dot { position: absolute; right: 5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px #fff8; }

/* 情绪盲盒网格响应式：窄屏 2 列，超窄屏 1 列 */
@media (max-width: 720px) {
  .blind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
}
@media (max-width: 460px) {
  .blind-grid { grid-template-columns: 1fr; max-width: 260px; }
}
  .meal-detail { margin-top: 8px; }
  .meal-detail[hidden] { display: none; }
  .md-title { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; font-family: var(--serif); }
  .md-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: var(--serif); }
  .md-table th, .md-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
  .md-table th { color: var(--ink-soft); font-weight: 700; background: var(--panel-soft); }
  .md-table tbody .md-name { color: var(--ink); }
  .md-table .md-w { color: var(--ink-soft); white-space: nowrap; }
  .md-table .md-k { color: var(--rose); font-weight: 700; white-space: nowrap; text-align: right; }
  .md-table tfoot td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--gold-3); border-bottom: none; }
  .md-table tfoot .md-k { color: var(--rose); }

  /* ===== 运动 & 体型管理（力量/有氧/热量看板） ===== */
  .fit-block { }
  .fit-profile { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; background:var(--panel-soft); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-family:var(--serif); }
  .fit-profile .fp-label { font-weight:700; color:var(--ink); }
  .fit-profile label { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-soft); }
  .fit-profile .inp { width:64px; padding:3px 6px; }
  .fit-profile select.inp { width:auto; }
  .fit-dash-cards { display:flex; gap:10px; margin-bottom:10px; }
  .dash-card { flex:1; background:var(--panel-soft); border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; font-family:var(--serif); }
  .dash-card .dc-t { display:block; font-size:12px; color:var(--ink-soft); }
  .dash-card .dc-val { display:block; font-size:22px; font-weight:800; color:var(--ink); line-height:1.2; }
  .dash-card .dc-val.neg { color:var(--rose); }
  .dash-card .dc-val.pos { color:var(--gold-3); }
  .dash-card .dc-u { font-size:11px; color:var(--ink-soft); }
  .fit-dash-advice { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; font-family:var(--serif); font-size:12.5px; }
  .ad-line { color:var(--ink-soft); }
  .ad-line.good { color:#3f9d6b; }
  .ad-line.warn { color:#c8743a; }
  .ad-line.info { color:var(--ink-soft); }
  .fit-section { margin-top:14px; }
  .fit-sec-head { display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-weight:700; color:var(--ink); margin-bottom:8px; }
  .fit-add-btn { font:600 12px/1 var(--serif); color:var(--rose); background:#fff; border:1px solid var(--rose); border-radius:14px; padding:5px 12px; cursor:pointer; }
  .fit-add-btn:hover { background:var(--rose); color:#fff; }
  .fit-empty { color:var(--ink-soft); font-family:var(--serif); font-size:12.5px; padding:6px 2px; }
  .strength-card { border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-bottom:10px; background:var(--panel-soft); }
  .sc-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .sc-split { font:600 13px var(--serif); padding:3px 6px; border-radius:8px; border:1px solid var(--line); background:#fff; }
  .sc-vol, .sc-burn { font-size:12px; color:var(--ink-soft); font-family:var(--serif); }
  .sc-burn { color:var(--rose); }
  .sc-del { margin-left:auto; border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:14px; }
  .ex-list { display:flex; flex-direction:column; gap:6px; }
  .ex-row { display:grid; grid-template-columns:1fr 52px 52px 64px 70px 40px 26px; gap:6px; align-items:center; font-family:var(--serif); }
  .ex-name { width:100%; }
  .ex-num { display:inline-flex; align-items:center; gap:2px; font-size:11px; color:var(--ink-soft); }
  .ex-num .inp { width:42px; padding:3px 4px; }
  .ex-vol { font-size:12px; color:var(--ink-soft); text-align:right; }
  .ex-done { display:inline-flex; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--ink-soft); cursor:pointer; }
  .ex-del { border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:13px; }
  .ex-hint { grid-column:1 / -1; font-size:11px; color:var(--ink-soft); }
  .ex-hint .ex-tip { color:var(--gold-3); margin-left:6px; }
  .ex-add { margin-top:6px; font:600 12px/1 var(--serif); color:var(--ink-soft); background:none; border:1px dashed var(--line); border-radius:8px; padding:4px 10px; cursor:pointer; }
  .cardio-card { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-bottom:8px; background:var(--panel-soft); font-family:var(--serif); }
  .ca-type { font:600 13px var(--serif); padding:3px 6px; border-radius:8px; border:1px solid var(--line); background:#fff; }
  .ca-dur { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--ink-soft); }
  .ca-dur .inp { width:54px; padding:3px 4px; }
  .ca-kcal { margin-left:auto; font-size:12.5px; color:var(--rose); }
  .ca-del { border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:13px; }