:root {
  --bg: #f4f8f5;
  --card: #ffffff;
  --ink: #1c2b27;
  --ink-2: #4e5d57;
  --muted: #6f7d76;
  --line: #e6ece7;
  --work: #2f9e8a;
  --work-soft: #e6f5f1;
  --life: #58a94c;
  --life-soft: #edf7e8;
  --warm: #f08a3c;
  --warm-soft: #fdf1e5;
  --ring-track: rgba(0, 0, 0, .07);
  --radius: 18px;
  --shadow: 0 1px 2px rgba(28, 43, 39, .04), 0 8px 24px rgba(28, 43, 39, .05);
}

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

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; font-size: 15px; color: var(--ink); }

/* ================= 登录 ================= */

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 22px calc(32px + env(safe-area-inset-bottom));
  background:
    radial-gradient(1100px 480px at 12% -10%, #dcf2e7 0%, rgba(220, 242, 231, 0) 62%),
    radial-gradient(900px 420px at 100% 6%, #fdf1e2 0%, rgba(253, 241, 226, 0) 58%),
    var(--bg);
}

.login-inner { width: 100%; max-width: 390px; }

.brand { text-align: center; margin-bottom: 30px; }

.brand-mark {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, #2f9e8a, #45b89e 62%, #7fd0b3);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(47, 158, 138, .28);
}

.brand h1 { font-size: 25px; letter-spacing: .5px; font-weight: 700; }
.brand p { margin-top: 7px; color: var(--muted); font-size: 13.5px; }

.login-form {
  background: var(--card);
  border-radius: 22px;
  padding: 20px 18px 18px;
  box-shadow: var(--shadow);
  margin-top: 16px;
}

.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; font-weight: 500; }

.field input, .field select, .code-row input, .pantry-form input, .pantry-form select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);  border-radius: 12px;
  background: #fafbfc;
  outline: none;
  transition: border-color .16s, background .16s;
}

.field input:focus, .field select:focus, .code-row input:focus,
.pantry-form input:focus, .pantry-form select:focus {
  border-color: #a9dccd;
  background: #fff;
}

.field-error { color: #e5484d; font-size: 12px; margin-top: 6px; }

.code-row { display: flex; gap: 10px; margin-bottom: 18px; }
.code-row input { flex: 1; }

.btn-code {
  flex: 0 0 auto;
  min-width: 104px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid #dfe2ea;
  color: var(--work);
  font-size: 13.5px;
  font-weight: 600;
  background: #fff;
}
.btn-code:disabled { color: var(--muted); border-color: var(--line); }

.btn-primary {
  width: 100%;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2f9e8a, #3cb493);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 8px 20px rgba(47, 158, 138, .26);
  transition: transform .12s, opacity .16s;
}
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .6; box-shadow: none; }

/* 危险操作按钮：确认弹层与抽屉里的注销入口 */
.btn-danger {
  width: 100%;
  height: 48px;
  border-radius: 13px;
  background: #d92d20;
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  transition: transform .12s, opacity .16s;
}
.btn-danger:active { transform: scale(.985); }
.btn-danger:disabled { opacity: .6; }
.btn-ghost.danger { color: #d92d20; border-color: #f3c6c4; }

.login-tip { text-align: center; color: var(--muted); font-size: 12px; margin-top: 12px; }

.login-seg { margin-bottom: 9px; }
.account-seg { margin-bottom: 14px; }

.link-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  padding: 4px 0;
}
.link-btn:active { color: var(--ink-2); }

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #e7efe9;
  border-radius: 13px;
}
.segmented .seg {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  transition: background .18s, color .18s, box-shadow .18s;
}
.segmented .seg.on {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .1);
}
.segmented.small .seg { height: 34px; font-size: 13.5px; }

/* ================= 主框架 ================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
  max-width: 560px;
  margin: 0 auto;
  background: rgba(244, 248, 245, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.topbar-date { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.topbar-title { font-size: 24px; font-weight: 700; letter-spacing: .4px; margin-top: 2px; }

.avatar-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}

.loading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, transparent, var(--work), transparent);
  background-size: 40% 100%;
  animation: slide 1s linear infinite;
}

/* 数据加载失败错误条 */
.load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% - 32px);
  max-width: 528px;
  margin: 0 auto 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fdecea;
  color: #b3261e;
  font-size: 13px;
}
.load-error button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border-radius: 9px;
  background: #b3261e;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
@keyframes slide {
  0% { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px calc(96px + env(safe-area-inset-bottom));
}

/* ================= Hero ================= */

.hero {
  border-radius: 22px;
  padding: 18px 18px 16px;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  right: -60px; top: -90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.hero-work { background: linear-gradient(135deg, #2f9e8a, #3cb8a2); box-shadow: 0 12px 26px rgba(47, 158, 138, .24); }
.hero-life { background: linear-gradient(135deg, #58a94c, #79c263); box-shadow: 0 12px 26px rgba(88, 169, 76, .22); }

.hero-head { display: flex; align-items: center; justify-content: space-between; }
.hero-kicker { font-size: 12.5px; opacity: .82; font-weight: 500; }
.hero-count { font-size: 32px; font-weight: 700; line-height: 1.15; margin-top: 2px; letter-spacing: .5px; }
.hero-count .slash { opacity: .5; margin: 0 3px; font-weight: 400; }

.ring {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(rgba(255, 255, 255, .95) 0deg, rgba(255, 255, 255, .22) 0deg);
}
.ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(20, 24, 40, .18);
}
.ring span {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}

.hero-remain { font-size: 13.5px; opacity: .92; margin-top: 8px; }

.bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .26);
  margin-top: 12px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #fff;
  transition: width .3s ease;
}

/* ================= 添加栏 ================= */

.addbar {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
}
.addbar input {
  flex: 1;
  height: 48px;
  padding: 0 15px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  outline: none;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.addbar input:focus { border-color: #a9dccd; }
.addbar input::placeholder { color: #aab0ba; }
.addbar button {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transition: transform .12s, opacity .16s;
}
.addbar button:active { transform: scale(.94); }
.addbar button:disabled { opacity: .45; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.shake { animation: shake .28s ease; border-color: #f3b0b2 !important; }

/* ================= 任务列表 ================= */

.task-list { display: flex; flex-direction: column; gap: 9px; }

.task {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 15px;
  padding: 14px 14px;
  box-shadow: 0 1px 2px rgba(28, 43, 39, .035);
  border: 1px solid var(--line);
  transition: opacity .2s, transform .12s;
}
.task:active { transform: scale(.995); }

.check {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.8px solid #d2d6de;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background .18s, border-color .18s, color .18s;
  position: relative;
}
.check svg { width: 15px; height: 15px; }
/* 圆点视觉保持 24px，点按区扩到 36×44；只往左/上/下扩，避免压到右侧删除按钮 */
.check::after { content: ""; position: absolute; top: -10px; bottom: -10px; left: -10px; right: -2px; }

.task.done .check {
  background: var(--life);
  border-color: var(--life);
  color: #fff;
}
#work-list .task.done .check { background: var(--work); border-color: var(--work); }

.task-title {
  flex: 1;
  font-size: 15px;
  color: var(--ink);
  word-break: break-word;
  transition: color .18s;
}
.task.done .task-title { color: #b3b8c1; text-decoration: line-through; }

.task-del {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4c8d0;
  transition: color .16s, background .16s;
  position: relative;
}
.task-del svg { width: 15px; height: 15px; }
/* 视觉保持 28px，点按区扩到 40×44，与勾选圆点不重叠 */
.task-del::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: -4px; right: -8px; }
.task-del:hover { color: #e5484d; background: #fdeeee; }

/* ================= 滑动手势 ================= */
/* 任务右滑勾选、左滑删除；记账流水左滑删除（借 Yuvomi / Todoist 的做法） */
.task, .entry { position: relative; }
.task.sw-done { background: #eef7f3; border-color: #cfe8df; }
.task.sw-del, .entry.sw-del { background: #fdeeee; border-color: #f3d2d2; }
.sw-out { transition: transform .18s ease, opacity .18s ease !important; transform: translateX(-100%) !important; opacity: 0; }

.empty {
  text-align: center;
  color: #a7acb6;
  font-size: 13px;
  padding: 26px 18px;
  background: rgba(255, 255, 255, .6);
  border: 1px dashed #e2e5eb;
  border-radius: 15px;
  line-height: 1.7;
}

/* ================= 卡片 ================= */

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(28, 43, 39, .035);
  border: 1px solid var(--line);
}
.card h2 { font-size: 15.5px; font-weight: 650; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.65; margin-bottom: 12px; }



/* 身体数据卡 */
.cta h2 { font-size: 16px; margin-bottom: 8px; }
.cta .hint { margin-bottom: 14px; }

.profile-head { display: flex; align-items: flex-start; justify-content: space-between; }
.target-kcal { font-size: 34px; font-weight: 700; letter-spacing: .5px; color: var(--warm); line-height: 1.2; }
.target-kcal span { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 5px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 10px; }
.chip {
  font-size: 12px;
  color: var(--ink-2);
  background: #f5f6f8;
  border-radius: 8px;
  padding: 4px 9px;
}

.btn-mini {
  height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  position: relative;
}
/* 上下各扩 4px，点按区 44px；只纵向扩，避免撑出容器的横向滚动 */
.btn-mini::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; right: 0; }
.btn-mini.ghost { background: #f2f3f6; color: var(--ink-2); }

/* 摄入 */
.intake-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.intake-head span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.intake-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.intake-cell { background: #f8f9fb; border-radius: 11px; padding: 10px 11px; }
.intake-cell span { display: block; font-size: 11.5px; color: var(--muted); }
.intake-cell b { display: block; font-size: 16px; font-weight: 650; margin-top: 3px; }
.bar-warm { background: #f1f2f5; height: 8px; }
.bar-warm i { background: linear-gradient(90deg, #ffb08f, var(--warm)); }

/* 三餐 */
.meal-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.meal-card {
  background: var(--card);
  border-radius: 16px;
  padding: 14px 15px;
  box-shadow: 0 1px 2px rgba(28, 43, 39, .035);
  border: 1px solid var(--line);
}
.meal-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.meal-card-head b { font-size: 14.5px; font-weight: 650; }
.meal-card-head em { font-style: normal; font-size: 12.5px; color: var(--warm); font-weight: 600; }
.meal-tools { display: flex; gap: 6px; margin-left: auto; }
.meal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.meal-dot.breakfast { background: #f6b93b; }
.meal-dot.lunch { background: #f08a3c; }
.meal-dot.dinner { background: #5b8def; }
.meal-empty { color: #b0b5be; font-size: 13px; }

.meal-record { padding: 10px 0; border-top: 1px solid var(--line); }
.meal-record:first-of-type { border-top: none; padding-top: 0; }
.meal-record-head { display: flex; align-items: center; gap: 8px; }
.meal-record-head b { font-size: 13.5px; font-weight: 600; }
.meal-record-head span { font-size: 12px; color: var(--muted); }
.meal-record-head .task-del { margin-left: auto; }
.meal-items { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.65; }
.meal-advice { font-size: 12px; color: #8f99a8; margin-top: 5px; background: #f7f8fa; border-radius: 8px; padding: 6px 9px; }
.meal-photo {
  height: 120px;
  margin-top: 9px;
  border-radius: 11px;
  background: #f2f3f6 center/cover no-repeat;
  cursor: zoom-in;
}
.meal-photo-btn {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: #f2f3f6;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
}
.photo-full {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 12px;
  background: #f2f3f6;
  margin-bottom: 12px;
}

/* 动作按钮 */
.action-row { display: flex; flex-direction: column; gap: 9px; }
.btn-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 13px 15px;
  border-radius: 13px;
  background: linear-gradient(135deg, #fdf1e5, #fef9f3);
  border: 1px solid #f7ddc2;
  transition: transform .12s, opacity .16s;
}
.btn-action:nth-child(2) { background: linear-gradient(135deg, #edf7e8, #f7fcf4); border-color: #d5ecc8; }
.btn-action:nth-child(3) { background: linear-gradient(135deg, #e6f5f1, #f2faf7); border-color: #cfe9e0; }
.btn-action:active { transform: scale(.99); }
.btn-action b { font-size: 14px; font-weight: 650; }
.btn-action span { font-size: 12px; color: var(--muted); }
.btn-action.busy { opacity: .7; }

/* ================= 我的 ================= */

.user-card { display: flex; align-items: center; gap: 14px; }
.avatar-lg {
  width: 54px; height: 54px;
  border-radius: 18px;
  background: linear-gradient(145deg, #2f9e8a, #45b89e);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-name { font-size: 16px; font-weight: 650; }
.user-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.grid-3 .field, .grid-2 .field { margin-bottom: 12px; }
.grid-3 input, .grid-2 select { padding: 0 10px; font-size: 14px; }

.pantry-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-bottom: 12px;
}
.pantry-form input, .pantry-form select { height: 40px; font-size: 13px; border-radius: 10px; padding: 0 10px; }
.pantry-form #pantry-name { grid-column: 1; grid-row: 1; }
.pantry-form .btn-mini { grid-column: 2; grid-row: 1; height: 40px; padding: 0 16px; }
.pantry-form #pantry-cat { grid-column: 1 / -1; grid-row: 2; }

.pantry-list { display: flex; flex-direction: column; gap: 7px; }
.pantry-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f8f9fb;
}
.pantry-item div { flex: 1; display: flex; flex-direction: column; }
.pantry-item b { font-size: 13.5px; font-weight: 600; }
.pantry-item span { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.btn-ghost {
  width: 100%;
  height: 46px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
}
.version { text-align: center; color: #b6bac2; font-size: 11.5px; margin-top: 14px; }
.icp { display: block; text-align: center; color: #b6bac2; font-size: 11.5px; margin-top: 12px; text-decoration: none; }
.icp:hover { color: #8a8f99; }
.version .icp { display: inline; margin: 0; }

/* ================= 底部导航 ================= */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 560px;
  display: flex;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid rgba(0, 0, 0, .05);
  z-index: 30;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0 5px;
  color: #a5aab4;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  transition: color .18s;
}
.tab svg { width: 23px; height: 23px; }
.tab.on { color: var(--ink); }
.tab.on[data-tab="work"] { color: var(--work); }
.tab.on[data-tab="life"] { color: var(--life); }

/* ================= 弹层 ================= */

.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(17, 20, 28, .42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.sheet-mask.on { opacity: 1; }

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22, .68, .35, 1);
  -webkit-overflow-scrolling: touch;
}
.sheet-mask.on .sheet { transform: translateY(0); }
.sheet:focus { outline: none; }

.sheet-handle { width: 38px; height: 4px; border-radius: 99px; background: #e3e5ea; margin: 2px auto 14px; }
.sheet-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.sheet-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.6; }

.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  position: sticky;
  bottom: 0;
  padding: 10px 0 2px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .85), #fff 32%);
}
.sheet-actions .btn-ghost { flex: 0 0 34%; }
.sheet-actions .btn-primary { flex: 1; }

.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-meal { border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.plan-meal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.plan-meal-head b { font-size: 14px; font-weight: 650; }
.plan-meal-head span { font-size: 12px; color: var(--warm); font-weight: 600; white-space: nowrap; }

.plan-meal ul, .plan-items { display: flex; flex-direction: column; gap: 6px; }
.plan-meal li, .plan-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.plan-meal li em, .plan-items li em { font-style: normal; color: var(--muted); font-size: 12px; }
.plan-meal li span:last-child, .plan-items li span:last-child { color: var(--muted); white-space: nowrap; font-size: 12.5px; }
.plan-tip { font-size: 12px; color: #8d97a6; margin-top: 8px; background: #f7f8fa; border-radius: 8px; padding: 6px 9px; }

.pick-list { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.pick-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f8f9fb;
  font-size: 13.5px;
}
.pick-list input { width: 18px; height: 18px; accent-color: var(--work); }
.pick-list span { flex: 1; }
.pick-list em { font-style: normal; font-size: 11.5px; color: var(--muted); }

.photo-preview {
  display: block;
  width: 100%;
  height: 170px;
  border-radius: 14px;
  background: #f1f2f5 center/cover no-repeat;
  margin-bottom: 12px;
  object-fit: cover;
}

.skeleton-list { display: flex; flex-direction: column; gap: 8px; }
.skeleton-list i {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f2f3f6 25%, #e9ebf0 37%, #f2f3f6 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s infinite;
}
.skeleton-list i:nth-child(2) { width: 72%; }
.skeleton-list i:nth-child(3) { width: 55%; }
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ================= Toast ================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  z-index: 90;
  max-width: 84vw;
  padding: 11px 17px;
  border-radius: 13px;
  background: rgba(22, 24, 29, .92);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 561px) {
  body { background: #eaf1ec; }
  #main-view { background: var(--bg); max-width: 560px; margin: 0 auto; min-height: 100vh; box-shadow: 0 0 60px rgba(16, 24, 40, .06); }
}

/* ================= 管理页 ================= */

.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
  transition: transform .12s;
}
.link-card:active { transform: scale(.995); }
.link-card-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.link-card-main b { font-size: 14.5px; font-weight: 650; }
.link-card-main span { font-size: 12.5px; color: var(--muted); }
.link-card svg { width: 18px; height: 18px; color: #c2c7d0; flex: 0 0 18px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0 12px;
}
.back-link svg { width: 16px; height: 16px; }

.admin-current {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3px;
  margin: 4px 0 6px;
}

.filter-row { display: flex; gap: 7px; margin-bottom: 8px; }
.chip-btn {
  height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  background: #f3f4f7;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: background .16s, color .16s;
}
.chip-btn.on { background: var(--ink); color: #fff; font-weight: 600; }

.model-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
}

.model-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f8f9fb;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}
.model-row.selected { background: #e9f6f0; border-color: #bfe4d5; }
.model-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--work); flex: 0 0 17px; }

.model-main { flex: 1; min-width: 0; }
.model-main b { display: block; font-size: 13.5px; font-weight: 600; }
.model-main span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.model-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.model-tags i {
  font-style: normal;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #e9edf5;
  color: #5b6577;
}
.model-tags i.vision { background: #e7f8f1; color: #0b8a63; }
.model-tags i.warn { background: #fff1eb; color: #c2410c; }

.model-credits {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11.5px;
  color: var(--warm);
  font-weight: 600;
  white-space: nowrap;
  margin-top: 2px;
}
.model-credits.free { color: var(--life); }

/* ================= 管理后台独立页 ================= */

.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 6px;
}
.kv-row span { font-size: 13px; color: var(--muted); }
.kv-row b { font-size: 14px; font-weight: 650; text-align: right; word-break: break-all; }

.admin-body { background: var(--bg); }
.admin-shell {
  max-width: 620px;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
}
.admin-top { padding-bottom: 14px; }
.admin-top h1 { font-size: 26px; font-weight: 700; letter-spacing: .3px; margin-top: 6px; }
.admin-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.admin-gate-btn {
  display: block;
  text-align: center;
  line-height: 48px;
  text-decoration: none;
  margin-top: 14px;
}
.admin-body .model-list { max-height: none; }

/* ---- 后台：标题 / 标签 / 列表 ---- */
.admin-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-title-row h1 { margin-top: 6px; }

.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #e7efe9;
  border-radius: 13px;
  margin-bottom: 14px;
}
.admin-tab {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.admin-tab.on { background: #fff; color: var(--ink); font-weight: 650; box-shadow: 0 1px 4px rgba(16,24,40,.1); }

.perm-list { display: flex; flex-direction: column; gap: 10px; }
.perm-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f8f9fb;
}
.perm-list b { font-size: 13.5px; font-weight: 650; }
.perm-list code {
  font-size: 11px;
  color: #5b6577;
  background: #e9edf5;
  padding: 2px 6px;
  border-radius: 5px;
}
.perm-list span { width: 100%; font-size: 12px; color: var(--muted); }

.perm-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.perm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f8f9fb;
}
.perm-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--work); flex: 0 0 17px; }
.perm-check span { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.perm-check em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }

.check-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin: 4px 0 14px; }
.check-line input { width: 17px; height: 17px; accent-color: var(--work); }

.btn-row { display: flex; gap: 10px; }
.btn-row .btn-ghost { flex: 0 0 38%; height: 48px; }
.btn-row .btn-primary { flex: 1; }

.admin-list { display: flex; flex-direction: column; gap: 9px; }
.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f8f9fb;
}
.row-main { flex: 1; min-width: 0; }
.row-main b { font-size: 13.5px; font-weight: 650; display: block; }
.row-main b em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.row-tags i {
  font-style: normal;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #e9edf5;
  color: #5b6577;
}
.row-tags i.muted { background: transparent; color: #aab0ba; padding: 2px 0; }
.row-tags i.off { background: #fdecec; color: #c2410c; }
.row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.btn-mini.danger { background: #fdeaea; color: #d92d20; }
.row-main .off { font-style: normal; font-size: 10.5px; color: #c2410c; background: #fdecec; padding: 1px 5px; border-radius: 5px; }

/* ---- 后台概览 ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 9px;
  margin-top: 10px;
}
.stat-item {
  background: #f8f9fb;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.stat-item b { display: block; font-size: 20px; font-weight: 700; letter-spacing: .3px; }
.stat-item span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ---- 后台照片 ---- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.photo-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 11px;
  overflow: hidden;
  background: #f2f3f6 center/cover no-repeat;
  cursor: zoom-in;
}
.photo-cell span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 7px 5px;
  font-size: 10.5px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(12, 16, 24, .82);
}
.photo-viewer img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.photo-viewer button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

/* ================= 记账 ================= */

:root { --in: #0d9668; --over: #e5484d; }

.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.month-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
}

.month-label { font-size: 16px; font-weight: 700; }

.ledger-overview { text-align: center; }

.ledger-balance-label { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }

.ledger-balance {
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -.5px;
  margin-bottom: 14px;
}

.ledger-balance.neg { color: var(--over); }

.ledger-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.ledger-io-cell {
  background: var(--bg);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
}

.ledger-io-cell span { display: block; font-size: 12px; color: var(--muted); }
.ledger-io-cell b { font-size: 16.5px; font-weight: 700; }
.amt-in { color: var(--in); }
.amt-out { color: var(--ink); }

.ledger-budget { text-align: left; margin-bottom: 4px; }

.ledger-budget-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.ledger-budget-head em { font-style: normal; font-weight: 650; color: var(--ink-2); }
.ledger-budget-head b { font-weight: 650; color: var(--ink-2); }
.ledger-budget-head b.over { color: var(--over); }

.ledger-budget .bar { height: 8px; background: var(--ring-track); }
.ledger-budget .bar i { background: var(--work); }
.ledger-budget .bar i.over { background: var(--over); }

.ledger-budget-btn {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  position: relative;
}
/* 文字按钮只有一行高，点按区补到 44px，不吃布局 */
.ledger-budget-btn::after { content: ""; position: absolute; top: -13px; bottom: -13px; left: -24px; right: -24px; }

.ledger-add { margin: 16px 0 4px; }

.ledger-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 2px 10px;
}

.ledger-sub h2 { font-size: 15.5px; font-weight: 650; }

.ledger-tools { display: flex; gap: 8px; }

.ledger-daily { margin: 4px 0 10px; }

.day-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 52px;
  padding: 0 2px;
}

.day-bar {
  flex: 1;
  min-width: 3px;
  background: var(--work);
  border-radius: 3px 3px 0 0;
  opacity: .85;
}

.day-bar.zero { background: var(--line); }

.day-bars-hint { margin-top: 4px; text-align: center; font-size: 11.5px; }

.entry-list { display: flex; flex-direction: column; gap: 8px; }

.import-steps {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.import-steps p { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }

.entry-day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin: 6px 2px -2px;
}

.entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.entry-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.entry-cat { font-weight: 650; flex-shrink: 0; }
.entry-note {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.entry-amt { font-variant-numeric: tabular-nums; font-weight: 700; }
.entry.in .entry-amt { color: var(--in); }

/* 记账凭证：弹层里的选择区 + 流水右侧的缩略图 */
.entry-photo-row { display: flex; align-items: center; gap: 10px; }
.entry-photo-preview {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--bg) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}
.entry-thumb {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  background: var(--bg) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}
.entry-thumb:active { opacity: .7; }

.entry-del {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  position: relative;
}
/* 视觉保持 26px，点按区扩到 39×44 */
.entry-del::after { content: ""; position: absolute; top: -9px; bottom: -9px; left: -5px; right: -8px; }

.entry-del:active { background: #fdeaea; color: var(--over); }

.ledger-empty { text-align: center; padding: 26px 0 10px; }

/* 流水分页：加载更多 */
.ledger-more { margin: 4px 0 14px; height: 44px; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cat-manage { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 40vh; overflow-y: auto; }

.cat-manage li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}

.cat-del { font-size: 12.5px; color: var(--muted); }
.cat-del:active { color: var(--over); }

.cat-add { display: flex; gap: 8px; margin-bottom: 4px; }

.cat-add input {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--bg);
  padding: 0 14px;
  outline: none;
}

.cat-add .btn-mini { height: 44px; padding: 0 18px; }

/* ================= 头像与资料编辑 ================= */

.avatar-edit {
  padding: 0;
  border: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.avatar-edit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background .15s ease;
}

.avatar-edit:hover::after { background: rgba(0, 0, 0, .18); }

.avatar-edit img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--bg);
  object-fit: cover;
  flex-shrink: 0;
  display: none;
}

.row-avatar.has { display: block; }

/* ================= 注册页随机账号骰子 ================= */

.account-row { display: flex; gap: 8px; align-items: stretch; }
.account-row input { flex: 1; min-width: 0; }

.dice-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 20px;
  line-height: 1;
  transition: transform .12s ease;
}

.dice-btn:active { transform: scale(.9) rotate(-14deg); }

/* ================= AI 聊天 ================= */

.page-chat {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 132px);
  padding-bottom: 8px !important;
  overflow: hidden;
}

.chat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px;
}

.chat-top-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 17px;
  color: var(--ink-2);
  flex-shrink: 0;
}

.chat-top-main { flex: 1; min-width: 0; text-align: left; padding: 0; }
.chat-top-main p { font-size: 14.5px; font-weight: 700; }
.chat-top-main span { font-size: 11.5px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-top-main .chat-peer-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }

.chat-top-avatar { padding: 0; line-height: 0; flex-shrink: 0; }

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 12px;
}

.chat-msg { display: flex; align-items: flex-start; gap: 8px; }
/* row-reverse 后主轴起点在右侧，flex-start 才是视觉上靠右 */
.chat-msg.me { justify-content: flex-start; flex-direction: row-reverse; }
.chat-msg.ai { justify-content: flex-start; }

.chat-msg-avatar { padding: 0; line-height: 0; flex-shrink: 0; }
.chat-msg-body { display: flex; flex-direction: column; gap: 4px; max-width: 84%; min-width: 0; }
.chat-msg.me .chat-msg-body { align-items: flex-end; }
.chat-nick { font-size: 11.5px; color: var(--muted); padding: 0 2px; }
.chat-time {
  align-self: center;
  font-size: 11px;
  color: var(--muted);
  background: rgba(17, 20, 28, .05);
  padding: 2px 9px;
  border-radius: 99px;
}

.chat-bubble {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-msg .chat-bubble { max-width: 100%; }

.chat-msg.me .chat-bubble { background: var(--work); color: #fff; border-bottom-right-radius: 5px; }
.chat-msg.ai .chat-bubble { background: var(--card); box-shadow: var(--shadow); border-bottom-left-radius: 5px; }

.chat-empty { text-align: center; padding: 18px 0; }

.chat-input {
  display: flex;
  gap: 8px;
  padding-top: 6px;
}

.chat-input input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 0 16px;
  outline: none;
  background: var(--card);
}

.chat-input input:focus { border-color: #a9dccd; }

.chat-input button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--work);
  color: #fff;
  font-size: 19px;
  flex-shrink: 0;
}

.chat-input button:disabled { opacity: .5; }

.session-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; margin-bottom: 10px; }

.session-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.session-main { min-width: 0; flex: 1; }
.session-main b { font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-main span { font-size: 11.5px; color: var(--muted); }

/* 好友列表 */
#friend-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#friend-list .muted { font-size: 11.5px; color: var(--muted); font-style: normal; }
.friend-actions { display: flex; gap: 6px; flex-shrink: 0; }
#friend-requests .row-item { margin-bottom: 8px; }

/* ================= 管理后台：下钻 / 详情 / 筛选 ================= */

.stat-item.link { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.stat-item.link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-item.link:active { transform: scale(.97); }

.detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.detail-head h2 { margin-bottom: 0; }

.detail-meta { margin-bottom: 12px; }
.detail-meta b { color: var(--ink); }

.detail-sub { font-size: 13.5px; font-weight: 650; color: var(--ink-2); margin: 14px 0 8px; }

.detail-list { display: flex; flex-direction: column; gap: 6px; }

.detail-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13.5px;
  min-width: 0;
}

.detail-list li em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); flex-shrink: 0; }

.detail-tag {
  flex-shrink: 0;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f2f3f6;
  color: var(--ink-2);
  font-weight: 600;
}

.detail-tag.w { background: var(--work-soft); color: var(--work); }
.detail-tag.l { background: var(--life-soft); color: var(--life); }

.detail-thumb {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-color: #e9eaee;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.photo-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--ink-2);
}

.photo-filter select {
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--bg);
  padding: 0 10px;
  outline: none;
  min-width: 140px;
}

/* 今日摄入：体重变化预估 */
.intake-forecast {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 10px;
}

/* 任务历史查看 */
.day-nav { margin-bottom: 10px; }
#day-next:disabled { opacity: .35; }

/* 任务日期日历弹层 */
.month-label-btn {
  padding: 4px 14px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  position: relative;
}
/* 日期胶囊视觉不变，点按区补到 41×n，避免夹在两个 40px 圆钮中间不好点 */
.month-label-btn::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: -6px; right: -6px; }

.month-label-btn::after { content: ' ▾'; font-size: 11px; color: var(--muted); }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.cal-grid i { display: block; }

.cal-day {
  position: relative;
  height: 38px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  color: var(--ink);
}

.cal-day.has::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--life);
}

.cal-day.sel { background: var(--work); color: #fff; font-weight: 650; }
.cal-day.sel.has::after { background: #fff; }
.cal-day.off { opacity: .3; }

/* 未读红点 */
.tab { position: relative; }

.tab-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  margin-right: -34px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-style: normal;
  box-shadow: 0 0 0 2px var(--card);
}

.unread-dot {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
}

/* ================= 个人主页（社交化） ================= */

.me-card { padding: 0; overflow: hidden; }

.me-cover {
  height: 96px;
  background: linear-gradient(120deg, #2f9e8a 0%, #3cb493 55%, #7fd0b3 100%);
  position: relative;
}

.me-cover-deco {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140px 60px at 85% 10%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(120px 80px at 15% 90%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 70%);
}

/* 头像压在封面上，昵称整行排在头像下面：
   一是长昵称有整行宽度，二是文字不会压在绿色渐变上（原来半行字落在封面里，深浅不一） */
.me-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 16px;
  margin-top: -28px;
  position: relative;
}

.me-avatar {
  border: 3px solid var(--card);
  box-shadow: var(--shadow);
}

.me-meta { max-width: 100%; min-width: 0; padding-top: 9px; }
/* 昵称/账号过长时单行省略，避免把资料卡撑成好几行 */
.me-meta .user-name { font-size: 19px; font-weight: 750; margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-meta .user-sub { font-size: 12px; color: var(--muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 操作按钮单独一行、与昵称左对齐：昵称能占满整行，长名字不再被挤成「截图…」 */
.me-actions { display: flex; justify-content: flex-start; gap: 8px; padding: 12px 16px 0; }

.me-bio {
  padding: 12px 16px 0;
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.65;
  word-break: break-word;
}
/* 简介为空时只是提示文字，不能再套用列表空状态那块虚线卡片（会看着像可点输入框） */
.me-bio.empty {
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 0;
  padding: 12px 16px 0;
  text-align: left;
}

.me-stats {
  display: flex;
  padding: 12px 16px 16px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.me-stat {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--line);
}

.me-stat:last-child { border-right: none; }
.me-stat b { display: block; font-size: 17px; font-weight: 750; }
.me-stat span { font-size: 11.5px; color: var(--muted); }

/* ================= 坚持强度 ================= */
.habit-card { padding: 14px 16px 15px; }

.habit-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

.habit-label { margin: 0 0 3px; font-size: 12.5px; color: var(--muted); }

.habit-score { display: flex; align-items: baseline; gap: 3px; margin: 0; font-size: 12px; color: var(--muted); }
.habit-score b {
  font-size: 30px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.8px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.habit-facts { text-align: right; }
.habit-facts p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.habit-facts .habit-sub { margin-top: 3px; font-size: 12px; color: var(--muted); }

/* 近 28 天热力条：有记录实心，没记录留白 */
.habit-heat { display: flex; gap: 4px; margin-top: 13px; }
.habit-heat i { flex: 1; height: 20px; border-radius: 5px; background: #eef0f4; transition: background .2s; }
.habit-heat i.on { background: var(--work); }
.habit-heat i.today { box-shadow: 0 0 0 2px rgba(47, 158, 138, .22); }

.habit-tip { margin: 11px 0 0; font-size: 12px; line-height: 1.65; color: var(--muted); }

.moments-card { padding: 14px 16px; }
.moments-card .segmented { margin-bottom: 12px; }

.moment {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.moment:last-child { border-bottom: none; }

.moment-avatar {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--work-soft);
  flex-shrink: 0;
  object-fit: cover;
}

.moment-main { flex: 1; min-width: 0; position: relative; }
.moment-main > b { font-size: 14px; font-weight: 650; }
.moment-main .muted { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.moment-time { display: block; font-size: 11px; color: var(--muted); margin: 1px 0 6px; }
.moment-content { font-size: 14.5px; line-height: 1.65; word-break: break-word; white-space: pre-wrap; }
.moment-main .cat-del { position: absolute; top: 0; right: 0; }

.moment-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.moment-photo {
  aspect-ratio: 1;
  border-radius: 10px;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.moment-pick { display: flex; gap: 8px; margin: 6px 0 14px; flex-wrap: wrap; }

.moment-add-photo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1.5px dashed var(--line);
  background: var(--bg);
  font-size: 22px;
  color: var(--muted);
}

.moment-pick-item {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
}

.moment-pick-item i {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}

.moment-content textarea { }

/* 会话列表预览 */
.session-preview {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 2px 0;
}

/* 好友行未读徽标 */
.friend-unread {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
}

.sheet-body textarea {
  width: 100%;
  min-height: 96px;
  border: none;
  border-radius: 12px;
  background: var(--bg);
  padding: 10px 12px;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}

/* ================= 设置抽屉 ================= */

.drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(16, 20, 30, .38);
  z-index: 90;
  opacity: 0;
  transition: opacity .22s ease;
}

.drawer-mask.on { opacity: 1; }

.drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(84vw, 330px);
  background: var(--card);
  box-shadow: -12px 0 40px rgba(16, 24, 40, .16);
  border-radius: 22px 0 0 22px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .24s ease;
}

.drawer-mask.on .drawer { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}

.drawer-head b { font-size: 17px; font-weight: 750; }

.drawer-close {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
}

.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  text-align: left;
}

.drawer-ico { font-size: 20px; }
.drawer-text { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.drawer-text small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; }

.drawer-label {
  font-size: 12.5px;
  color: var(--muted);
  margin: 16px 0 8px;
  font-weight: 650;
}

.drawer-logout { margin-top: 22px; width: 100%; height: 44px; }

#font-seg { margin: 0 0 4px; }

/* 编辑资料弹层：头像行 */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.profile-avatar-box {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, #2f9e8a, #45b89e);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-avatar-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}