/* ============================================================
   个人工作台 · Claymorphism 暖紫黏土风设计系统
   - 暖紫 / 蜜桃 / 薄荷 / 琥珀 调色
   - 双层柔影营造「黏土凸起」质感
   - 大圆角、软交互
   ============================================================ */

:root {
  /* 背景：柔和渐变（薰衣草 → 蜜桃 → 雾蓝） */
  --bg-grad: linear-gradient(135deg, #f1e9ff 0%, #ffeef2 52%, #e9f1ff 100%);
  --surface: #fbf8ff;
  --surface-2: #f1e9fb;
  --surface-3: #e9dcfa;

  --text: #3a2f4f;
  --text-soft: #8c7fa6;
  --text-faint: #b3a8c9;

  --border: #e8ddf6;

  /* 主题强调色 */
  --accent: #9b6dff;       /* 主紫 */
  --accent-deep: #7b4de0;
  --accent-2: #ff9eb5;     /* 蜜桃粉 */
  --accent-3: #6fdcc4;     /* 薄荷 */
  --accent-4: #ffce7a;     /* 琥珀 */
  --accent-5: #7aa7ff;     /* 雾蓝 */

  --danger: #ef5d7a;
  --success: #34b98a;
  --warn: #f0a23b;

  /* 黏土柔影：亮面 + 暗面 */
  --shadow-dark: rgba(150, 110, 230, 0.20);
  --shadow-light: rgba(255, 255, 255, 0.95);
  --clay: 9px 9px 20px var(--shadow-dark), -9px -9px 20px var(--shadow-light);
  --clay-sm: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light);
  --clay-inset: inset 5px 5px 11px var(--shadow-dark), inset -5px -5px 11px var(--shadow-light);
  --clay-press: inset 4px 4px 9px var(--shadow-dark), inset -4px -4px 9px var(--shadow-light);

  --radius: 26px;
  --radius-sm: 16px;
  --radius-xs: 11px;
  --radius-pill: 999px;

  --font-display: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --font-body: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}

[data-theme='dark'] {
  --bg-grad: linear-gradient(135deg, #1b1430 0%, #251a3c 58%, #14233a 100%);
  --surface: #221a38;
  --surface-2: #2c2348;
  --surface-3: #352a57;

  --text: #ece7ff;
  --text-soft: #a99fc7;
  --text-faint: #6f6491;

  --border: #362c55;

  --accent: #b18cff;
  --accent-deep: #9b6dff;
  --accent-2: #ff9eb5;
  --accent-3: #6fdcc4;
  --accent-4: #ffce7a;
  --accent-5: #7aa7ff;

  --danger: #ff7088;
  --success: #45c79a;
  --warn: #ffb45c;

  --shadow-dark: rgba(0, 0, 0, 0.50);
  --shadow-light: rgba(140, 105, 200, 0.10);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  background: var(--bg-grad);
  background-attachment: fixed;
  background-size: 240% 240%;
  animation: bgshift 24s ease-in-out infinite;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color 0.3s ease;
}
@keyframes bgshift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; }

/* ============ 布局 ============ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 196px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  background: var(--bg-grad) fixed;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 14px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
}
.brand .logo {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 17px;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: var(--clay-sm);
}

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; padding-right: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text-soft);
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-item .ico { font-size: 16px; width: 18px; text-align: center; }
.nav-item:hover { color: var(--text); background: var(--surface); box-shadow: var(--clay-sm); transform: translateX(2px); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: var(--clay-sm);
}
.nav-item.active .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

.sidebar-foot {
  margin-top: auto;
  font-size: 11px;
  color: var(--text-faint);
  padding: 10px 10px 2px;
  text-align: center;
  line-height: 1.5;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--clay-sm);
  position: sticky;
  top: 0;
  z-index: 20;
}

.search {
  width: 250px;
  padding: 11px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  box-shadow: var(--clay-inset);
  outline: none;
  transition: box-shadow 0.2s;
}
.search:focus { box-shadow: var(--clay-inset), 0 0 0 2px var(--accent); }

.view { padding: 18px 24px 50px; }

/* ============ 卡片 / 网格 ============ */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--clay);
  padding: 14px 16px;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s;
}
.card.hover:hover { transform: translateY(-3px); box-shadow: 10px 10px 22px var(--shadow-dark), -9px -9px 20px var(--shadow-light); }

.grid { display: grid; gap: 11px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.section-title { font-size: 15px; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; gap: 10px; }
.muted { color: var(--text-soft); }
.empty { color: var(--text-soft); text-align: center; padding: 28px 16px; font-size: 13px; }

/* ============ 统计数字 ============ */
.stat {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--clay);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.stat .num { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat .label { color: var(--text-soft); font-size: 12.5px; margin-top: 5px; font-weight: 600; }
.stat .emoji {
  position: absolute; top: 12px; right: 14px;
  font-size: 22px; opacity: 0.85;
}
.stat.tint-1 { background: linear-gradient(145deg, var(--surface), #f3ecff); }
.stat.tint-2 { background: linear-gradient(145deg, var(--surface), #ffeef3); }
.stat.tint-3 { background: linear-gradient(145deg, var(--surface), #e9faf4); }
.stat.tint-4 { background: linear-gradient(145deg, var(--surface), #fff6e6); }

/* ============ 进度条 ============ */
.progress {
  height: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: var(--clay-inset);
}
.progress > span {
  display: block; height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.progress.mint > span { background: linear-gradient(90deg, var(--accent-3), var(--accent-5)); }
.progress.amber > span { background: linear-gradient(90deg, var(--accent-4), var(--accent-2)); }

/* ============ 按钮 / 表单 ============ */
.btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: var(--clay-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 7px 7px 16px var(--shadow-dark), -5px -5px 14px var(--shadow-light); }
.btn:active { transform: translateY(1px); box-shadow: var(--clay-press); }
.btn.ghost { background: var(--surface); color: var(--text); box-shadow: var(--clay-sm); }
.btn.ghost:active { box-shadow: var(--clay-press); }
.btn.danger { background: linear-gradient(145deg, var(--danger), #d83f5f); }
.btn.sm { padding: 8px 14px; font-size: 13px; }

input[type='text'], input[type='date'], input[type='number'], textarea, select {
  padding: 11px 15px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  box-shadow: var(--clay-inset);
  outline: none;
  transition: box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus { box-shadow: var(--clay-inset), 0 0 0 2px var(--accent); }
textarea { width: 100%; min-height: 96px; resize: vertical; line-height: 1.6; }

.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* ============ 筛选 chip ============ */
.filters { display: flex; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; }
.chip {
  border: none;
  background: var(--surface);
  color: var(--text-soft);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--clay-sm);
  transition: all 0.18s;
}
.chip:hover { transform: translateY(-1px); color: var(--text); }
.chip.active { color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); box-shadow: var(--clay-sm); }

/* ============ 任务 ============ */
.task {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--clay-sm);
  margin-bottom: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.task:hover { transform: translateY(-2px); }
.task.done .task-title { text-decoration: line-through; color: var(--text-faint); }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 700; font-size: 15px; }
.task-meta { font-size: 12px; color: var(--text-soft); margin-top: 7px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tag {
  font-size: 11px;
  background: var(--surface-3);
  color: var(--accent-deep);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.priority { font-size: 11px; padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 700; }
.priority.high { background: #ffe1e8; color: var(--danger); }
.priority.mid { background: #fff0db; color: var(--warn); }
.priority.low { background: var(--surface-2); color: var(--text-soft); }
[data-theme='dark'] .priority.high { background: #4a2630; }
[data-theme='dark'] .priority.mid { background: #4a3a22; }

.check {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: var(--clay-inset);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: all 0.2s;
}
.check:checked { background: linear-gradient(145deg, var(--accent), var(--accent-deep)); box-shadow: var(--clay-sm); }
.check:checked::after {
  content: '✓'; color: #fff; font-size: 15px; font-weight: 800;
  position: absolute; inset: 0; display: grid; place-items: center;
}
.task-actions { display: flex; gap: 4px; }
.icon-btn {
  border: none; background: transparent; color: var(--text-soft);
  cursor: pointer; font-size: 15px; padding: 6px 8px; border-radius: 10px;
  transition: all 0.15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ============ 倒计时徽标 ============ */
.countdown {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: linear-gradient(145deg, var(--accent-4), var(--accent-2));
  color: #fff; box-shadow: var(--clay-sm);
}

/* ============ 番茄钟 ============ */
.pomodoro { text-align: center; }
.pomodoro .ring { font-family: var(--font-display); font-size: 46px; font-weight: 800; margin: 6px 0 4px; }
.pomodoro .dots { display: flex; gap: 7px; justify-content: center; margin: 10px 0; }
.pomodoro .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); box-shadow: var(--clay-inset); display: block; }
.pomodoro .dots i.on { background: linear-gradient(145deg, var(--accent), var(--accent-deep)); box-shadow: var(--clay-sm); }

/* ============ 笔记 ============ */
.note {
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  background: var(--surface);
  box-shadow: var(--clay-sm);
  margin-bottom: 12px;
  transition: transform 0.2s;
}
.note:hover { transform: translateY(-2px); }
.note.pinned { box-shadow: var(--clay-sm), 0 0 0 2px var(--accent); }
.note-title { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.note-body { font-size: 13.5px; color: var(--text-soft); margin-top: 8px; max-height: 160px; overflow: hidden; line-height: 1.7; }
.note-body h1, .note-body h2, .note-body h3 { margin: 8px 0; color: var(--text); }
.note-body code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.note-body pre { background: var(--surface-2); padding: 12px; border-radius: 10px; overflow: auto; }
.note-body ul { padding-left: 20px; }
.note-body a { color: var(--accent-deep); }

/* ============ 习惯 ============ */
.habit {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--clay-sm); margin-bottom: 12px;
  transition: transform 0.2s;
}
.habit:hover { transform: translateY(-2px); }
/* 习惯页右侧栏：上「打卡概览」下「习惯多米诺链」 */
.habits-right { display: flex; flex-direction: column; gap: 12px; }
.habit .h-ico {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 24px;
  box-shadow: var(--clay-sm);
}
.habit .h-main { flex: 1; min-width: 0; }
.habit .h-name { font-weight: 700; font-size: 15px; }
.habit .h-streak { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.habit .h-check {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  border: none; cursor: pointer; font-size: 18px; color: var(--text-soft);
  background: var(--surface-2); box-shadow: var(--clay-inset);
  transition: all 0.2s;
}
.habit .h-check.done { background: linear-gradient(145deg, var(--accent-3), var(--accent-5)); color: #fff; box-shadow: var(--clay-sm); }

.week-dots { display: flex; gap: 6px; }
.week-dots i {
  width: 18px; height: 18px; border-radius: 7px;
  background: var(--surface-2); box-shadow: var(--clay-inset);
  display: block;
}
.week-dots i.on { background: linear-gradient(145deg, var(--accent), var(--accent-deep)); box-shadow: var(--clay-sm); }

/* ============ 心情 ============ */
.mood-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.mood-face {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; font-size: 26px;
  background: var(--surface); box-shadow: var(--clay-sm);
  cursor: pointer; transition: all 0.18s; border: 2px solid transparent;
}
.mood-face:hover { transform: translateY(-2px); }
.mood-face.sel { border-color: var(--accent); box-shadow: var(--clay-sm); }

/* ============ 仪表盘天气/时钟（左右两区 · 协调布局） ============ */
.weather-zones { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: stretch; }
.weather-zone-left { display: flex; flex-direction: column; padding: 4px 0; }
.weather-zone-right { display: flex; flex-direction: column; padding: 4px 0; border-left: 1px dashed var(--border); padding-left: 20px; }
.weather-box { display: flex; align-items: center; }
.weather { display: flex; align-items: center; gap: 14px; }
.weather .w-ico { font-size: 40px; filter: drop-shadow(0 5px 8px rgba(0,0,0,.12)); }
.weather .w-temp { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1; }
.weather .w-meta { color: var(--text-soft); font-size: 12.5px; margin-top: 4px; }
.clock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap: 8px; flex: 1; }
.clock {
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--clay-sm);
  padding: 8px 10px; text-align: center; min-width: 70px;
  transition: transform .15s, box-shadow .15s;
}
.clock:hover { transform: translateY(-1px); box-shadow: var(--clay); }
.clock .c-time { font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1; display: block; letter-spacing: -.3px; }
  .clock .c-zone { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; display: block; }
  .clock .c-ico { font-size: 20px; line-height: 1; display: block; margin-top: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
  .clock .c-weather { font-size: 11px; color: var(--text-soft); margin-top: 3px; display: block; line-height: 1.4; }
/* 昼夜微光已合并到 c-ico 的 drop-shadow */
/* 昼夜渐进进度条：蓝夜→金日→蓝夜 */
.clock .c-progress {
  position: relative; width: 100%; height: 5px; margin-top: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2c3e6e 0%, #5470b3 22%, #ffd97a 50%, #87ceeb 78%, #2c3e6e 100%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.18);
}
.clock .c-progress .c-mark {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: white; border: 1.5px solid var(--text-soft);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), 0 2px 4px rgba(0,0,0,.25);
  transition: left .6s ease;
}
.city-sel { flex: 0 0 auto; }
@media (max-width: 720px) { .weather-zones { grid-template-columns: 1fr; } .weather-zone-right { border-left: 0; padding-left: 0; border-top: 1px dashed var(--border); padding-top: 14px; } }


/* ============ 资讯 ============ */
.news-layout { display: grid; grid-template-columns: 210px 1fr; gap: 20px; }
.news-channels { display: flex; flex-direction: column; gap: 8px; }
.news-ch {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--clay-sm);
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-soft);
  border: 2px solid transparent; transition: all 0.18s;
}
.news-ch:hover { transform: translateX(2px); color: var(--text); }
.news-ch.active { color: var(--text); border-color: var(--accent); }
.news-ch .nc-emoji { font-size: 18px; }
.news-item {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--clay-sm); margin-bottom: 12px;
  transition: transform 0.2s; cursor: pointer;
}
.news-item:hover { transform: translateY(-2px); }
.news-item .ni-ch { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--accent-deep); height: fit-content; }
.news-item .ni-title { font-weight: 700; font-size: 15px; line-height: 1.45; }
.news-item .ni-meta { font-size: 12px; color: var(--text-soft); margin-top: 7px; display: flex; gap: 12px; flex-wrap: wrap; }
.sentiment { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.sentiment.bull { background: #e3f7ee; color: var(--success); }
.sentiment.bear { background: #fde8ec; color: var(--danger); }
.sentiment.neutral { background: var(--surface-2); color: var(--text-soft); }

/* ============ 项目 / 作品集 ============ */
.proj-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--clay);
  padding: 20px; transition: transform 0.25s, box-shadow 0.25s;
}
.proj-card:hover { transform: translateY(-4px); }
.proj-card .p-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.proj-card .p-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; box-shadow: var(--clay-sm); }
.proj-card .p-name { font-weight: 800; font-size: 16px; }
.proj-card .p-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--accent-deep); }
.proj-todo { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 6px 0; color: var(--text-soft); }
.proj-todo .ck { width: 18px; height: 18px; border-radius: 6px; background: var(--surface-2); box-shadow: var(--clay-inset); flex-shrink: 0; display: grid; place-items: center; font-size: 12px; color: #fff; }
.proj-todo .ck.on { background: linear-gradient(145deg, var(--accent-3), var(--accent-5)); }

.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 16px; }
.port-item {
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--clay-sm);
  background: var(--surface); transition: transform 0.25s; cursor: pointer;
}
.port-item:hover { transform: translateY(-4px); }
.port-item .p-thumb { height: 110px; display: grid; place-items: center; font-size: 40px; }
.port-item .p-cap { padding: 12px 14px; font-weight: 700; font-size: 13.5px; }
.port-item .p-desc { padding: 0 14px 14px; font-size: 12px; color: var(--text-soft); line-height: 1.5; }

/* ============ 时间轴 ============ */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px; background: var(--surface-3); border-radius: var(--radius-pill); }
.tl-item { position: relative; margin-bottom: 20px; }
.tl-item::before {
  content: ''; position: absolute; left: -24px; top: 5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: var(--clay-sm); border: 3px solid var(--surface);
}
.tl-date { font-size: 12px; color: var(--accent-deep); font-weight: 700; }
.tl-title { font-weight: 700; margin-top: 3px; }
.tl-desc { font-size: 13px; color: var(--text-soft); margin-top: 4px; line-height: 1.6; }

/* ============ 图表 ============ */
.chart { height: 120px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .bar { transition: height 0.5s cubic-bezier(0.22,1,0.36,1), y 0.5s; border-radius: 6px; }
.chart text { font-family: var(--font-body); fill: var(--text-soft); font-size: 11px; }

/* ============ 提示 / 角标 ============ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--accent-deep);
}
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-3); display: inline-block; }

/* ============ 响应式 ============ */
@media (max-width: 1080px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sidebar { width: 72px; padding: 18px 10px; }
  .brand .txt, .nav-item span.txt, .sidebar-foot { display: none; }
  .brand { justify-content: center; padding: 6px 0 18px; }
  .nav-item { justify-content: center; padding: 13px 0; }
  .nav-item .ico { font-size: 20px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .task-layout { grid-template-columns: 1fr; }
  .news-layout { grid-template-columns: 1fr; }
  .search { width: 150px; }
  .view { padding: 20px 16px 50px; }
  .topbar { padding: 16px; }
}

/* ============ 日历 ============ */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  padding: 6px;
  font-size: 12px;
  position: relative;
  background: var(--surface);
  box-shadow: var(--clay-sm);
  color: var(--text);
}
.cal-cell.muted { color: var(--text-faint); opacity: 0.55; box-shadow: none; background: transparent; }
.cal-cell.has .dot {
  position: absolute; bottom: 6px; left: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
}
.cal-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar.clickable .cal-cell { cursor: pointer; }
.calendar.clickable .cal-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(155,109,255,.18); }
.cal-cell.sel { outline: 2px solid var(--accent-2); outline-offset: -2px; background: rgba(155,109,255,.14); }
.cal-head { font-size: 12px; color: var(--text-soft); text-align: center; padding-bottom: 4px; font-weight: 600; }

/* ============ 创新实验室 ============ */
.life-bars { display: flex; gap: 3px; overflow-x: auto; align-items: flex-end; height: 80px; padding: 6px 2px 8px; }
.life-bar { position: relative; width: 7px; min-width: 7px; height: 60px; background: var(--surface-2); border-radius: 6px 6px 4px 4px; display: flex; align-items: flex-end; overflow: hidden; transition: transform .15s; }
.life-bar:hover { transform: translateY(-3px); }
.life-bar .life-fill { width: 100%; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-radius: 6px 6px 4px 4px; }
.life-bar.now .life-fill { background: linear-gradient(180deg, var(--accent-4), var(--accent-2)); }
.life-bar.future .life-fill { background: transparent; }
.life-cap { color: var(--text); }

.insight { background: linear-gradient(135deg, rgba(155,109,255,.12), rgba(111,220,196,.12)); border-radius: 16px; padding: 16px 18px; font-size: 14.5px; line-height: 1.85; font-weight: 500; box-shadow: var(--clay-inset); }

.focus-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--clay-sm); margin-bottom: 12px; }
.fi-rank { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); }
.fi-title { font-weight: 600; }

.brain-hit { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--clay-sm); margin-bottom: 8px; font-size: 13.5px; }
.intent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--clay-sm); margin-bottom: 8px; }
.intent > span:first-child { flex: none; }

.narrative { background: linear-gradient(135deg, rgba(255,158,181,.14), rgba(122,167,255,.14)); border-radius: 16px; padding: 18px; font-size: 15px; line-height: 1.95; font-weight: 600; box-shadow: var(--clay-inset); }

.capsule { border-radius: 16px; padding: 14px 16px; background: var(--surface); box-shadow: var(--clay-sm); margin-bottom: 12px; transition: transform .2s, box-shadow .2s; border: 1px solid transparent; }
.capsule:hover { transform: translateY(-2px); box-shadow: 8px 8px 18px var(--shadow-dark), -7px -7px 16px var(--shadow-light); }
.capsule.locked { opacity: .92; border-color: var(--border); }
.capsule.open { background: linear-gradient(135deg, rgba(255,206,122,.20), rgba(255,158,181,.16)); border-color: rgba(255,206,122,.4); }
.cap-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.cap-ico { font-size: 18px; }
.cap-msg { margin-top: 10px; padding: 12px 14px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 10px; font-size: 14px; line-height: 1.8; box-shadow: var(--clay-inset); }

.garden { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; padding: 18px; border-radius: 16px; background: radial-gradient(circle at 30% 20%, rgba(111,220,196,.18), rgba(155,109,255,.12) 70%); min-height: 130px; box-shadow: var(--clay-inset); }
.plant { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--clay-sm); transition: transform .25s; }
.plant:hover { transform: translateY(-3px); }
.plant-emoji { line-height: 1; transition: transform .3s; }
.plant:hover .plant-emoji { transform: scale(1.14) translateY(-2px); }
.plant-name { font-size: 11.5px; color: var(--text-soft); max-width: 72px; text-align: center; font-weight: 600; }

.heatmap { display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-flow: column; gap: 5px; }
.heat { aspect-ratio: 1 / 1; border-radius: 5px; background: var(--surface-2); }
.heat.h1 { background: rgba(155,109,255,.35); }
.heat.h2 { background: rgba(155,109,255,.6); }
.heat.h3 { background: rgba(155,109,255,.82); }
.heat.h4 { background: linear-gradient(145deg, var(--accent), var(--accent-deep)); }
.heat-legend { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); }
.heat-legend .heat { width: 14px; height: 14px; }
.heat-source { margin-top: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--text-soft); background: var(--surface-2); border-radius: 10px; line-height: 1.5; }
.heat-source b { color: var(--accent-deep); }

/* 习惯页：右栏「今日习惯节奏」合并卡 */
.habits-grid { align-items: stretch; }
.rhythm-card { display: flex; flex-direction: column; gap: 16px; }
.rhythm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rs-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px 8px;
  background: var(--surface-2); border-radius: 16px; box-shadow: var(--clay-inset); transition: transform .18s, box-shadow .18s; }
.rs-cell:hover { transform: translateY(-2px); box-shadow: var(--clay-sm); }
.rs-emoji { font-size: 24px; line-height: 1; }
.rs-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--accent-deep); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-label { font-size: 12.5px; color: var(--text-soft); letter-spacing: .2px; }
.rs-progress { height: 9px; border-radius: 99px; background: var(--surface-2); box-shadow: var(--clay-inset); overflow: hidden; }
.rs-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-3), var(--accent-5)); transition: width .5s ease; }
@media (max-width: 720px) { .growth-stage { grid-template-columns: 1fr; } .rhythm-stats { grid-template-columns: repeat(2, 1fr); } }
.domino-chain { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.domino { width: 58px; height: 88px; border-radius: 16px; background: var(--surface); box-shadow: var(--clay-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: all .3s; }
.domino.up { background: linear-gradient(145deg, var(--accent-3), var(--accent-5)); color: #fff; box-shadow: var(--clay); }
.domino.down { opacity: .55; transform: translateY(12px) rotate(4deg); filter: grayscale(.4); }
.d-top { font-size: 28px; line-height: 1; }
.d-name { font-size: 11.5px; line-height: 1.2; }

.anti { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--clay-sm); margin-bottom: 8px; font-size: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ============================================================
   微信小程序显示模式（手机壳 + 状态栏 + 导航栏 + 底部 TabBar）
   ============================================================ */
.phone {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-grad);
  overflow: hidden;
  position: relative;
}

/* 状态栏（模拟 iOS） */
.status-bar {
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.status-bar .sb-icons { display: flex; gap: 7px; font-size: 13px; }

/* 小程序风格导航栏 */
.navbar {
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.nav-left {
  width: 36px;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
.nav-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.nav-capsule {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  box-shadow: var(--clay-inset);
  font-size: 13px;
  color: var(--text-soft);
}
.cap-more { letter-spacing: 1px; }

/* 页面级搜索条 */
.search-slot { padding: 8px 16px 4px; flex-shrink: 0; }
.phone .search { width: 100%; }

/* 内容滚动区 */
.screen { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.view { padding: 12px 14px 32px; }

/* 底部 TabBar */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(150, 110, 230, .10);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.tab .ico { font-size: 21px; line-height: 1; transition: transform .2s; }
.tab.active { color: var(--accent); }
.tab.active .ico { transform: translateY(-1px) scale(1.06); }

/* 发现页 */
.disc-hero {
  text-align: center;
  padding: 14px 12px 22px;
}
.disc-hero-emoji { font-size: 44px; }
.disc-hero-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin-top: 4px; }
.disc-hero-sub { font-size: 13px; color: var(--text-soft); line-height: 1.7; margin-top: 6px; }
.disc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.disc-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--clay);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(0.22,1,0.36,1), box-shadow .2s;
}
.disc-card:hover { transform: translateY(-3px); box-shadow: 12px 12px 26px var(--shadow-dark), -10px -10px 24px var(--shadow-light); }
.disc-card .ico { font-size: 30px; }
.disc-card .name { font-weight: 700; font-size: 15px; }
.disc-card .desc { font-size: 12px; color: var(--text-soft); line-height: 1.5; }

/* 手机壳内的布局：内容优先，避免被挤成狭小半栏 */
.phone .grid.cols-2,
.phone .grid.cols-3 { grid-template-columns: 1fr; }                       /* 多数卡片单列堆叠 */
.phone .grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }   /* 统计数字保持 2×2 */
.phone .grid.compact { grid-template-columns: repeat(2, 1fr); gap: 12px; }  /* 成对小卡（目标 / 年度之书） */
.phone .grid { gap: 12px; }
.phone .card { padding: 14px; border-radius: 20px; }
.phone .chart svg { width: 100%; height: auto; }
/* 统一紧凑间距：覆盖页面内联的 14/18px 间隙，全部收为 10px */
.phone .view > * { margin-top: 10px !important; }
.phone .view > *:first-child { margin-top: 0 !important; }
.phone .section-title { margin-bottom: 10px; font-size: 15px; }
.phone .navbar { height: 44px; padding: 0 10px; }
.phone .navbar .nav-icon { width: 34px; height: 34px; }
.phone .weather-zones { grid-template-columns: 1fr; }
.phone .weather-zone-right { border-left: 0; padding-left: 0; border-top: 1px dashed var(--border); padding-top: 14px; }

.phone .clock .c-weather { font-size: 10px; }

/* 资讯频道：手机上改为顶部横向滑动，不再占整列把新闻挤下去 */
.phone .news-layout { grid-template-columns: 1fr; }
.phone .news-channels { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.phone .news-ch { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; }
.phone .clock-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
.phone .life-bars { height: 72px; }
.phone .life-bar { height: 54px; width: 6px; min-width: 6px; }



/* 笔记 / 通用 tabs 间距 */
.tabs { display: flex; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }

/* 桌面端：仅「手机模式」下把页面渲染成一台手机 */
@media (min-width: 600px) {
  body.mode-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
  }
  .phone {
    height: min(900px, 94vh);
    border-radius: 46px;
    box-shadow:
      0 32px 90px rgba(80, 50, 140, .40),
      0 0 0 12px #1b1430,
      0 0 0 14px #2c2348;
  }
  .status-bar { border-radius: 46px 46px 0 0; }
}

/* ============================================================
   Web 侧边栏 / 抽屉 / 折叠 / iPhone 月历（v2.6）
   ============================================================ */

/* 侧边栏折叠（图标栏） */
.sidebar.collapsed { width: 72px; padding: 14px 8px; }
.sidebar.collapsed .brand { justify-content: center; padding: 6px 0 18px; }
.sidebar.collapsed .brand .txt,
.sidebar.collapsed .nav-item span.txt,
.sidebar.collapsed .sidebar-foot,
.sidebar.collapsed .nav-group-title { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 13px 0; }
.sidebar.collapsed .nav-item .ico { font-size: 20px; }

.nav-group { margin-bottom: 2px; }
.nav-group-title { font-size: 10px; font-weight: 700; color: var(--text-faint); padding: 8px 11px 3px; letter-spacing: .4px; }

/* 顶部栏右侧集群 + 图标按钮 */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-search { padding: 0; }
.nav-icon {
  border: none; background: var(--surface-2); color: var(--text);
  width: 38px; height: 38px; border-radius: 12px; font-size: 17px;
  cursor: pointer; box-shadow: var(--clay-sm); display: grid; place-items: center;
  transition: transform .15s, box-shadow .15s;
}
.nav-icon:hover { transform: translateY(-1px); box-shadow: 7px 7px 16px var(--shadow-dark), -5px -5px 14px var(--shadow-light); }
.nav-icon:active { box-shadow: var(--clay-press); }

/* 移动端抽屉式侧边栏 */
.sidebar.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 60;
  transform: translateX(-100%); transition: transform .26s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 24px 60px rgba(60, 30, 110, .35); overflow-y: auto;
}
.sidebar.drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(24, 14, 46, .42);
  opacity: 0; visibility: hidden; transition: opacity .26s ease; z-index: 55;
}
.drawer-backdrop.show { opacity: 1; visibility: visible; }

/* Web 内容区 */
.web-view { max-width: 1080px; }

/* iPhone 风格月历 */
.cal-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.cal-nav {
  border: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer;
  box-shadow: var(--clay-sm); display: grid; place-items: center; transition: transform .15s;
}
.cal-nav:hover { transform: translateY(-1px); }
.calendar.ios { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar.ios .cal-h { text-align: center; font-size: 12px; color: var(--text-soft); font-weight: 600; padding: 4px 0 8px; }
.calendar.ios .cal-cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; cursor: pointer; position: relative; background: transparent; box-shadow: none; padding: 0;
}
.calendar.ios .cal-cell.empty { cursor: default; }
.calendar.ios .cal-cell.today,
.calendar.ios .cal-cell.sel { outline: none; }
.calendar.ios .d-num {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; font-weight: 600; transition: all .15s;
}
.calendar.ios .cal-cell:hover .d-num { background: var(--surface-2); }
.calendar.ios .cal-cell.today .d-num { color: var(--danger); font-weight: 800; }
.calendar.ios .cal-cell.sel .d-num { background: linear-gradient(145deg, var(--accent), var(--accent-deep)); color: #fff; box-shadow: var(--clay-sm); }
.calendar.ios .d-dot { position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.progress.sm { height: 8px; }

/* ============================================================
   ➕ 新建触发器（替代常驻表单，点击展开输入）
   ============================================================ */
.compose-trigger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; min-height: 132px;
  border: 2px dashed rgba(155, 109, 255, .40); border-radius: 18px;
  background: transparent; color: var(--accent-deep); cursor: pointer;
  transition: all .18s ease;
}
.compose-trigger:hover { background: rgba(155, 109, 255, .08); transform: translateY(-2px); }
.compose-trigger:active { transform: translateY(0); }
.compose-trigger .ct-ico {
  width: 38px; height: 38px;
  background-color: var(--accent-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  font-size: 0; line-height: 0; color: transparent;
}
.compose-trigger .ct-txt { font-size: 14px; font-weight: 700; letter-spacing: .02em; }

/* 移动端：hero 一句话换行到下方，compose 卡片高度收紧 */
@media (max-width: 560px) {

  .compose-trigger { min-height: 104px; }
}

/* ============================================================
   动态与美化增强（v2.8）
   ============================================================ */
/* 视图入场：内容像被轻轻托起 */
.view > * { animation: fadeUp .42s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* 统计卡轻微呼吸，更灵动 */
.stat { transition: transform .25s, box-shadow .25s; }

/* ============================================================
   模态弹窗
   ============================================================ */
.modal-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(40,28,70,.38); backdrop-filter: blur(3px); animation: fadeIn .25s ease; }
.modal-card { position: relative; width: 100%; max-width: 460px; max-height: 86vh; overflow: auto; background: var(--surface); border-radius: 22px; box-shadow: 12px 12px 30px rgba(80,50,140,.28), -8px -8px 22px rgba(255,255,255,.9); padding: 22px; animation: popIn .3s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.modal-card textarea { min-height: 92px; resize: vertical; }

/* ============================================================
   时间胶囊：互动卡片
   ============================================================ */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 6px; }
.cap-item { background: var(--surface); border-radius: 16px; box-shadow: var(--clay-sm); padding: 16px 12px; text-align: center; cursor: pointer; transition: transform .25s, box-shadow .25s; border: 1px solid transparent; }
.cap-item:hover { transform: translateY(-4px); box-shadow: 8px 8px 18px var(--shadow-dark), -7px -7px 16px var(--shadow-light); }
.cap-item.locked { border-color: var(--border); }
.cap-item.locked .cap-bubble { animation: capPulse 2.4s ease-in-out infinite; }
.cap-item.open { background: linear-gradient(135deg, rgba(255,206,122,.18), rgba(255,158,181,.14)); border-color: rgba(255,206,122,.4); }
.cap-bubble { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.cap-bubble.big { font-size: 46px; }
.cap-title { font-size: 14px; font-weight: 700; }
.cap-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 4px; }
.cap-detail { background: var(--surface); border-radius: 16px; padding: 18px; box-shadow: var(--clay-inset); }
.cap-detail.open { background: linear-gradient(135deg, rgba(255,206,122,.16), rgba(255,158,181,.12)); }
@keyframes capPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ============================================================
   数字花园：多盆花
   ============================================================ */
.pot { width: 118px; background: var(--surface); border-radius: 18px; box-shadow: var(--clay-sm); padding: 14px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; transition: transform .25s, box-shadow .25s; }
.pot:hover { transform: translateY(-5px); box-shadow: 8px 8px 18px var(--shadow-dark), -7px -7px 16px var(--shadow-light); }
.pot-canopy { font-size: 40px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(155,109,255,.25)); transition: transform .4s; }
.pot.bloom .pot-canopy { animation: sway 3.6s ease-in-out infinite; }
.pot:hover .pot-canopy { transform: scale(1.12) rotate(-2deg); }
.pot-vessel { width: 70px; height: 42px; margin-top: 2px; background: linear-gradient(145deg, #c08a57, #8c663f); border-radius: 10px 10px 20px 20px; position: relative; box-shadow: inset 0 5px 9px rgba(0,0,0,.2); }
.pot-vessel::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 82px; height: 14px; background: #5b4632; border-radius: 8px; }
.pot-name { font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 6px; }
.pot-count { font-size: 11px; color: var(--text-soft); }
.pot.bloom::after { content: '🌸'; position: absolute; top: 6px; right: 10px; font-size: 16px; animation: floatpetal 3s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes floatpetal { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(14deg); } }

/* ============================================================
   圆角方形 ➕ 新建按钮（统一风格）
   ============================================================ */
.sq-add {
  position: relative;
  border: none; cursor: pointer; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 12px;
  font-size: 0; line-height: 0; color: transparent;   /* 隐藏 emoji 文本，改用 SVG 加号，避免字形偏移 */
  background: var(--surface-2); box-shadow: var(--clay-inset);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .15s, box-shadow .18s, background .18s;
}
.sq-add::before {
  content: "";
  width: 46%; height: 46%;
  background-color: var(--text-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color .18s;
}
.sq-add:hover { transform: translateY(-1px); background: var(--surface); box-shadow: var(--clay-sm); }
.sq-add:hover::before { background-color: var(--accent-deep); }
.sq-add:active { transform: translateY(1px); box-shadow: var(--clay-press); }
/* 行内 ➕：紧贴 section-title 文字之后 */
.section-title .sq-add { width: 26px; height: 26px; border-radius: 9px; }
.section-title .sq-add::before { width: 44%; height: 44%; }
.section-title .sq-add:hover { transform: translateY(-1px) scale(1.06); }

/* ============================================================
   金币气泡（金币奖励时短暂浮现）v2.13
   ============================================================ */
.coin-toast {
  position: fixed; top: 80px; left: 50%; z-index: 200;
  transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(145deg, #ffe082, #ffb74d);
  color: #5d3b00; font-weight: 800; font-size: 14px;
  box-shadow: 0 8px 22px rgba(255,170,60,.35), 0 0 0 3px rgba(255,255,255,.6);
  animation: coinPop 1.6s cubic-bezier(.2,.7,.3,1) both;
  pointer-events: none;
}
@keyframes coinPop {
  0%   { opacity: 0; transform: translate(-50%, 14px) scale(.85); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  30%  { transform: translate(-50%, 0) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(.96); }
}

/* ============================================================
   资讯列表：默认折叠，点击展开（v2.13）
   ============================================================ */
.news-item { flex-direction: column; cursor: pointer; }
.news-item .ni-row { display: flex; align-items: flex-start; gap: 10px; }
.news-item .ni-main { flex: 1; min-width: 0; }
.news-item .ni-chevron { font-size: 12px; color: var(--text-soft); transition: transform .2s; flex-shrink: 0; margin-top: 2px; }
.news-item.expanded .ni-chevron { transform: rotate(180deg); }
.news-item .ni-body { display: none; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.news-item.expanded { background: var(--surface-2); border-left: 3px solid var(--accent); box-shadow: var(--clay); }
.news-item.expanded .ni-body { display: block; }
.news-item .ni-lead { font-size: 13.5px; line-height: 1.75; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.news-item .ni-para { font-size: 13px; line-height: 1.8; color: var(--text-soft); margin: 0 0 6px; }
.news-item .ni-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.news-item .ni-foot .sentiment { margin: 0; }
.news-shuffle {
  border: 1.5px solid var(--border); cursor: pointer;
  padding: 7px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--accent-deep); background: var(--surface); box-shadow: var(--clay-sm);
  display: inline-flex; align-items: center; gap: 5px;
  transition: transform .15s, box-shadow .15s;
}
.news-shuffle:hover { transform: translateY(-2px); box-shadow: var(--clay); }
.news-shuffle:active { transform: translateY(1px); box-shadow: var(--clay-press); }
.news-shuffle.spinning .shuffle-ico { animation: spin .6s ease; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============================================================
   任务页：日历 + 番茄钟 左列，任务清单右列等高
   ============================================================ */
.task-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.task-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.task-list-card { min-width: 0; }
.pomo-durs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; }
.pomo-dur { padding: 6px 12px; font-size: 12px; }

/* ============================================================
   首页每日一句话（古诗词 + 出处）
   ============================================================ */


/* ============================================================
   心流日历（周 × 日 网格）
   ============================================================ */
.flowcal { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; }
.flowcal-labels { display: grid; grid-template-rows: repeat(7, 22px); gap: 5px; font-size: 10px; color: var(--text-soft); }
.flowcal-labels span { display: flex; align-items: center; }
.flowcal-grid { grid-template-columns: none; grid-template-rows: repeat(7, 22px); grid-auto-flow: column; grid-auto-columns: 1fr; flex: 1; }
.flowcal-grid .heat { aspect-ratio: auto; width: 100%; border-radius: 5px; }
.flowcal-grid .heat.empty { background: transparent; box-shadow: none; }

/* ============ 专注养成 · 大树 ============ */
.growth-stage { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; padding: 8px 4px 4px; }
.growth-tree { width: 100%; height: 150px; display: block; filter: drop-shadow(0 4px 8px rgba(60,90,60,.18)); }
.growth-tree .bloom { transform-origin: center; animation: bloom-pulse 2.4s ease-in-out infinite; }
.growth-meta { display: flex; flex-direction: column; gap: 8px; }
.growth-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: #2f6b46; }
.growth-bar { height: 10px; border-radius: 6px; background: var(--surface-2); box-shadow: var(--clay-inset); overflow: hidden; }
.growth-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #6dc97a, #3aa05a); border-radius: 6px; transition: width .3s; }
.growth-stats { font-size: 13px; color: var(--text-soft); }
.growth-stats b { color: #2f6b46; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bloom-on { color: #c34a8a; font-weight: 700; }
.growth-next { font-size: 12.5px; color: var(--text-soft); padding: 6px 10px; background: var(--surface-2); border-radius: 10px; }
.growth-next.done { color: #2f6b46; font-weight: 600; }
@keyframes bloom-pulse { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }

/* ============================================================
   项目 / 作品集：编辑、阶段、操作
   ============================================================ */
.proj-stages { display: flex; flex-direction: column; gap: 2px; }
.todo-txt { flex: 1; min-width: 0; font-size: 13.5px; }
.proj-todo .icon-btn { opacity: 0; transition: opacity .15s; }
.proj-todo:hover .icon-btn { opacity: 1; }
.stage-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stage-row .stage-text { flex: 1; min-width: 0; padding: 9px 12px; }
.stage-row .stage-done { width: 20px; height: 20px; flex-shrink: 0; }
.color-dot { width: 26px; height: 26px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; box-shadow: var(--clay-sm); transition: transform .15s; }
.color-dot:hover { transform: scale(1.08); }
.color-dot.on { border-color: var(--text); box-shadow: var(--clay); }
.port-actions { display: flex; gap: 2px; justify-content: flex-end; margin-top: 8px; opacity: 0; transition: opacity .15s; }
.port-item:hover .port-actions { opacity: 1; }

/* ============================================================
   灵感笔记：标签页与新建按钮同行（v2.10）
   ============================================================ */
.tab-group { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   时间胶囊（独立页 · v2.10）
   ============================================================ */
.cap-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: var(--radius);
  background: linear-gradient(135deg, #f3e6c9 0%, #ffd9c2 50%, #f7c9e6 100%);
  box-shadow: var(--clay); margin-bottom: 16px;
}
.cap-hero-emoji {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 18px;
  display: grid; place-items: center; font-size: 30px;
  background: rgba(255,255,255,.65); box-shadow: var(--clay-sm);
}
.cap-hero-text { flex: 1; min-width: 0; }
.cap-hero-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #6b4b2e; }
.cap-hero-sub { font-size: 13px; color: #8a6a4c; margin-top: 3px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
.cap-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 10px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--clay-sm);
  cursor: pointer; transition: transform .15s, box-shadow .15s; text-align: center;
}
.cap-item:hover { transform: translateY(-3px); box-shadow: var(--clay); }
.cap-item.locked { opacity: .82; }
.cap-bubble { font-size: 30px; filter: drop-shadow(0 4px 6px rgba(150,110,230,.25)); }
.cap-title { font-size: 13.5px; font-weight: 700; color: var(--text); word-break: break-all; }
.cap-sub { font-size: 11.5px; color: var(--text-soft); }
.cap-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 50px 20px; text-align: center; color: var(--text-soft);
}
.cap-empty-emoji { font-size: 46px; filter: drop-shadow(0 6px 10px rgba(150,110,230,.22)); }
.cap-empty p { margin: 0; font-size: 14px; line-height: 1.7; }

/* 神秘花园 CSS 已合并到下方 v2.14 区块（见「神秘花园 · 大修 v2.14」） */

/* ============================================================
   今日清单 · 游戏化每日任务（v2.11）
   ============================================================ */
.quest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.quest {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--clay-sm);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.quest:hover { transform: translateY(-2px); box-shadow: var(--clay); }
.quest.done { background: color-mix(in srgb, var(--success) 14%, var(--surface)); box-shadow: var(--clay-inset); }
.q-check {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
  background: var(--surface-2); color: var(--text-soft); box-shadow: var(--clay-inset);
}
.quest.done .q-check { background: var(--success); color: #fff; box-shadow: var(--clay-sm); }
.q-icon { font-size: 20px; }
.q-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.q-state { font-size: 12.5px; color: var(--accent-deep); font-weight: 700; }
.quest.done .q-state { color: var(--success); }

/* ============================================================
   花园浇水 + 商店 + 固定配饰（v2.11）
   ============================================================ */
.g-water {
  border: none; cursor: pointer;
  padding: 9px 16px; border-radius: 13px; font-size: 13.5px; font-weight: 700;
  color: var(--accent-deep);
  background: var(--surface); box-shadow: var(--clay-sm);
  transition: transform .15s, box-shadow .15s;
}
.g-water:hover { transform: translateY(-2px); box-shadow: var(--clay); }
.g-water:active { transform: translateY(1px); box-shadow: var(--clay-inset); }
/* ============================================================
   神秘花园 · 商店分类（v2.12 / 沿用至 v2.13）
   ============================================================ */
.g-cat { margin-top: 14px; }
.g-cat:first-of-type { margin-top: 6px; }
.g-cat-title {
  font-size: 13px; font-weight: 800; color: var(--accent-deep);
  letter-spacing: .04em; padding: 4px 4px 6px;
  display: flex; align-items: center; gap: 6px;
}
.g-cat-title::before {
  content: ''; width: 14px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
}
.g-shop { display: flex; gap: 10px; margin-top: 0; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.g-shop::-webkit-scrollbar { height: 6px; }
.g-shop::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.g-shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto;
  width: 104px; padding: 12px 8px 10px; border-radius: 14px;
  background: var(--surface); box-shadow: var(--clay-sm); scroll-snap-align: start;
}
.g-shop-item.owned { opacity: .72; }
.g-shop-emoji { font-size: 26px; }
.g-shop-name { font-size: 12px; font-weight: 700; color: var(--text); text-align: center; }
.g-shop-cost { font-size: 11.5px; color: var(--accent-deep); font-weight: 700; }
.g-shop-item .btn { width: 100%; margin-top: 4px; padding: 6px 8px; font-size: 12px; }
/* 固定摆放的配饰，位置由系统预设、不可移动 */
.g-deco { position: absolute; z-index: 2; font-size: 24px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.18)); animation: gssway 5s ease-in-out infinite; }
.g-deco.deco-tl { top: 14px; left: 14px; }
.g-deco.deco-tc { top: 10px; left: 50%; animation: gsswaytc 6s ease-in-out infinite; }
.g-deco.deco-tr { top: 14px; right: 60px; }
.g-deco.deco-bl { bottom: 14px; left: 16px; }
.g-deco.deco-br { bottom: 14px; right: 16px; }
.g-deco.deco-mr { top: 50%; right: 12px; }
@keyframes gssway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes gsswaytc { 0%,100% { transform: translateX(-50%) rotate(-4deg); } 50% { transform: translateX(-50%) rotate(4deg); } }

/* 深色模式 */
[data-theme='dark'] .quest { background: var(--surface-2); }
[data-theme='dark'] .quest.done { background: color-mix(in srgb, var(--success) 20%, var(--surface-2)); }
[data-theme='dark'] .q-check { background: #2a2a3a; color: var(--text-soft); }
[data-theme='dark'] .g-water { background: var(--surface-2); }
[data-theme='dark'] .g-shop-item { background: var(--surface-2); }

/* ============================================================
   神秘花园 · 大修 v2.14（分层天空 / 远山 / 池塘 / 小径 / 白栅栏 / 散花 / 生命树 / 花床 / 已购摆设）
   ============================================================ */
.garden-scene {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  min-height: 560px;
  padding: 0;
  background:
    radial-gradient(ellipse 60% 40% at 86% 6%, #ffe7b0 0%, transparent 60%),
    radial-gradient(ellipse 36% 22% at 14% 12%, rgba(255,255,255,.55) 0%, transparent 62%),
    linear-gradient(180deg, #b9e7ff 0%, #d3eeff 22%, #f1f7d8 50%, #d3ecae 76%, #b6dc8d 100%);
  box-shadow: var(--clay);
  border: 1px solid rgba(255,255,255,.55);
  isolation: isolate;
}
/* ---- 天空层：3 朵云 + 1 太阳 + 1 远气球 + 远飞鸟 ---- */
.gs-sky { position: absolute; inset: 0 0 48% 0; pointer-events: none; z-index: 1; }
.gs-sun { position: absolute; top: 16px; right: 28px; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, #fff7cf 0%, #ffe07a 52%, rgba(255,209,87,0) 72%);
  box-shadow: 0 0 32px 12px rgba(255,214,110,.5); animation: gsfloat 7s ease-in-out infinite; }
.gs-sun::after { content: '☀️'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; }
.gs-cloud { position: absolute; opacity: .94; font-size: 26px; filter: drop-shadow(0 3px 4px rgba(90,120,150,.18)); }
.gs-cloud.gs-c1 { top: 22px; left: 32px; animation: gsdrift 20s ease-in-out infinite; }
.gs-cloud.gs-c2 { top: 56px; left: 156px; font-size: 20px; animation: gsdrift 28s ease-in-out infinite reverse; }
.gs-cloud.gs-c3 { top: 32px; right: 124px; font-size: 22px; animation: gsdrift 24s ease-in-out infinite; }
.gs-balloon { position: absolute; top: 72px; left: 46%; font-size: 28px; z-index: 2; animation: gsfloat 8s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(80,60,90,.25)); }
/* 远飞鸟（🐦）已按需求移除 */
/* ---- 远山（3 层：远/中/近，纵深感）---- */
.gs-hills { position: absolute; left: -4%; right: -4%; bottom: 52%; height: 110px; z-index: 1; pointer-events: none; }
.hill { position: absolute; left: 0; right: 0; border-radius: 50% 50% 0 0; }
.hill.h-back { bottom: 30px; height: 86px; background: linear-gradient(180deg, #9ed98a, #84c878); opacity: .55; }
.hill.h-mid  { bottom: 12px; height: 68px; background: linear-gradient(180deg, #b6e3a0, #95d285); opacity: .85; }
.hill.h-near { bottom: 0;  height: 46px; background: linear-gradient(180deg, #c8eeb2, #a8df95); }
/* ---- 池塘（草甸中段，z 提升避免被遮挡）---- */
.gs-pond { position: absolute; right: 8%; bottom: 46%; width: 104px; height: 52px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #c4ecff, #6fb8e8 68%, #4f9fd6);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.6), 0 4px 10px rgba(40,90,130,.25); z-index: 3; }
.gs-ripple { position: absolute; left: 50%; top: 42%; width: 14px; height: 5px; border: 2px solid rgba(255,255,255,.65);
  border-radius: 50%; transform: translate(-50%,-50%); animation: gsripple 3s ease-out infinite; }
/* ---- 入口小径：仅左上角小段，不再挡中央树 ---- */
.gs-path { position: absolute; left: 16%; bottom: 30%; width: 56px; height: 110px; transform: rotate(8deg);
  background: linear-gradient(180deg, rgba(226,196,150,0), rgba(214,180,128,.85));
  clip-path: polygon(42% 0, 58% 0, 88% 100%, 12% 100%); z-index: 2; opacity: .8; }
/* ---- 永久布景（小房子/风车/秋千/蘑菇/路灯）---- */
.gs-prop { position: absolute; z-index: 3; font-size: 30px; filter: drop-shadow(0 3px 4px rgba(60,80,40,.3)); animation: gsfloat 6s ease-in-out infinite; }
.p-house { top: 120px; left: 4%; }
.p-windmill { top: 108px; left: 22%; font-size: 34px; }
.p-swing { top: 154px; right: 22%; }
.p-lamp { top: 96px; right: 7%; }
.p-mushroom { top: 172px; left: 13%; font-size: 24px; animation-delay: -1.2s; }
.p-mushroom2 { top: 188px; right: 33%; font-size: 20px; animation-delay: -2.4s; }
.p-bench { bottom: 122px; left: 7%; font-size: 26px; }
.p-falls { top: 132px; right: 37%; font-size: 22px; }
/* ---- 生命（蝴蝶 / 蜜蜂 / 花瓣）---- */
.gs-butterfly { position: absolute; font-size: 22px; pointer-events: none; z-index: 5; filter: drop-shadow(0 2px 3px rgba(60,80,40,.3)); animation: gsflutter 8s ease-in-out infinite; }
.gs-butterfly.b1 { top: 120px; left: 30%; }
.gs-butterfly.b2 { top: 200px; right: 30%; animation-delay: -3s; }
.gs-butterfly.b3 { top: 250px; left: 18%; animation-delay: -5s; }
.gs-bee { position: absolute; font-size: 16px; pointer-events: none; z-index: 5; animation: gsflutter 7s ease-in-out infinite; }
.gs-bee.e1 { top: 160px; left: 60%; }
.gs-bee.e2 { top: 220px; right: 18%; animation-delay: -3.5s; }
.gs-petal { position: absolute; font-size: 18px; pointer-events: none; z-index: 5; animation: gspetal 12s linear infinite; }
.gs-petal.p1 { top: 80px; left: 24%; animation-delay: -2s; }
.gs-petal.p2 { top: 140px; left: 56%; animation-delay: -6s; }
.gs-petal.p3 { top: 60px; right: 30%; animation-delay: -9s; }
/* ---- 前栅栏（置于草甸底部，作为草坪后沿）---- */
/* ---- 信息浮层：始终浮在场景之上，不被摆设遮挡 ---- */
.gh-panel {
  position: absolute; top: 12px; left: 12px; z-index: 20;
  max-width: 260px; padding: 12px 14px;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: var(--radius-sm); box-shadow: var(--clay);
  border: 1px solid rgba(255,255,255,.6);
}
.gh-panel .gh-tree { margin-bottom: 2px; }
.gh-season { font-size: 12px; color: #4f7a5e; font-weight: 600; letter-spacing: .2px; }
/* ---- 散落小花 ---- */
.gs-flower { position: absolute; z-index: 3; font-size: 22px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); animation: gsfloat 4.5s ease-in-out infinite; }
.gs-flower.f1 { top: 72px; left: 8%; animation-delay: 0s; }
.gs-flower.f2 { top: 52px; right: 9%; animation-delay: -1.2s; }
.gs-flower.f3 { top: 112px; left: 19%; font-size: 18px; animation-delay: -2s; }
.gs-flower.f4 { top: 96px; right: 23%; font-size: 24px; animation-delay: -3s; }
.gs-flower.f5 { top: 142px; left: 51%; font-size: 19px; animation-delay: -4s; }
/* 花园装饰图标（向日葵/小鸟/玫瑰花）已按需求移除 */
/* ---- 已拥有的摆设：按 slot 摆进场景（梦幻花园式）—— 卡片化包装，毛玻璃+圆角，统一视觉 ---- */
.gs-item {
  position: absolute; transform: translateX(-50%); line-height: 1; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 6px; border-radius: 14px;
  background: linear-gradient(165deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  box-shadow: 0 4px 10px rgba(60,80,40,.22), inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.4);
  animation: gsfloat 6s ease-in-out infinite;
  transition: transform .2s;
}
.gs-item:hover { animation-play-state: paused; transform: translateX(-50%) translateY(-4px) scale(1.08); }
/* ---- 花园中央大树：场景主视觉 —— 放大 + 醒目 ---- */
.garden-center-tree { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: 360px; height: 400px; z-index: 4; pointer-events: none; }
.garden-center-tree .garden-tree { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 18px rgba(60,90,60,.32)); }
.garden-center-tree::before { content: ''; position: absolute; left: 18%; right: 18%; bottom: -6px; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(60,40,20,.32), transparent 70%); z-index: -1; }
.garden-center-tree .bloom { transform-origin: center; animation: bloom-pulse 2.6s ease-in-out infinite; }
.garden-center-tree .fruit { transform-origin: center; animation: bloom-pulse 3.2s ease-in-out infinite; }
.garden-center-tree .snow { transform-origin: center; animation: snow-fall 3.6s ease-in-out infinite; }
.garden-center-tree .air-particle { opacity: .85; pointer-events: none; }
.garden-center-tree .air-particle.p0 { animation: air-drift 6s linear infinite; }
.garden-center-tree .air-particle.p1 { animation: air-drift 8s linear infinite -2s; }
.garden-center-tree .air-particle.p2 { animation: air-drift 7s linear infinite -4s; }
.garden-center-tree .air-particle.p3 { animation: air-drift 9s linear infinite -1s; }
@keyframes snow-fall { 0%,100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(8px); opacity: .55; } }
@keyframes air-drift { 0% { transform: translate(0, 0); opacity: .85; } 25% { transform: translate(6px, 6px); opacity: .7; } 50% { transform: translate(14px, 12px); opacity: .9; } 75% { transform: translate(22px, 6px); opacity: .55; } 100% { transform: translate(30px, 0); opacity: 0; } }

/* ---- 季节切换按钮（gh-panel 内）---- */
.season-picker { display: flex; gap: 5px; flex-wrap: wrap; }
.season-pill {
  border: none; cursor: pointer; flex: 1; min-width: 56px;
  padding: 5px 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
  color: var(--text-soft); background: var(--surface-2); box-shadow: var(--clay-inset);
  transition: transform .15s, box-shadow .15s, color .15s, background .15s;
}
.season-pill:hover { transform: translateY(-1px); box-shadow: var(--clay-sm); color: var(--accent-deep); }
.season-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff; box-shadow: var(--clay-sm);
}
/* ---- 季节场景背景微调（秋暖冬冷）---- */
.garden-scene.season-spring { background: linear-gradient(180deg, #b9e7ff 0%, #d3eeff 22%, #f1f7d8 50%, #d3ecae 76%, #b6dc8d 100%); }
.garden-scene.season-summer { background: linear-gradient(180deg, #a9e0ff 0%, #c4ebff 24%, #e6f6cf 50%, #c2e8a6 76%, #a9d98a 100%); }
.garden-scene.season-autumn { background: linear-gradient(180deg, #ffd9b8 0%, #ffe6c4 22%, #f7ecc4 50%, #d8c693 76%, #b49763 100%); }
.garden-scene.season-winter { background: linear-gradient(180deg, #d8e8f2 0%, #e4eff6 22%, #ecf3f4 50%, #d9e3e6 76%, #b9c8cc 100%); }
.garden-scene.season-winter .gs-sun { opacity: .4; filter: saturate(.6); }

/* ---- 地面：生命树 + 花床 ---- */
.garden-ground { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 16px 16px 16px; border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, #c9eab5 34%, #8fcf72 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5); }
.garden-center { display: flex; align-items: center; gap: 16px; padding: 2px 4px 12px; flex-wrap: wrap; }
.gh-mound { position: relative; display: grid; place-items: center; width: 92px; height: 66px; flex: 0 0 auto;
  background: radial-gradient(ellipse at 50% 78%, #7cbf66 0%, #8fd07a 60%, transparent 72%); border-radius: 50%; }
.gh-tree { font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(60,140,90,.35)); }
.gh-info { flex: 1; min-width: 150px; }
.gh-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #2f6b46; }
.gh-pros { font-size: 13px; color: #3c7a55; margin-top: 3px; }
.gh-pros b { color: var(--accent-deep); font-size: 15px; }
.gh-tip { font-size: 12.5px; color: #4f7a5e; line-height: 1.6; margin: 8px 0 0; }
.grove-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 9px; margin-top: 4px; }
.grove {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px 8px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow: 0 4px 9px rgba(60,80,40,.18); transition: transform .15s;
}
.grove:hover { transform: translateY(-3px); }
.grove-canopy { font-size: 30px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.14)); }
.grove-soil {
  width: 36px; height: 9px; border-radius: 0 0 8px 8px; margin-top: -1px;
  background: var(--gc, var(--accent));
  background: color-mix(in srgb, var(--gc, var(--accent)) 84%, #2b1a3a 16%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
}
.grove-name { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 3px; }
.grove-count { font-size: 11px; color: var(--text-soft); }
.grove-bloom { position: absolute; top: 4px; right: 8px; font-size: 14px; animation: gsfloat 3.5s ease-in-out infinite; }

  /* 待办任务花床已恢复花盆（no-pot 不再使用） */

/* 浇水按钮 */
.g-water {
  border: none; cursor: pointer;
  padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 700;
  color: #1f5236;
  background: linear-gradient(145deg, #d6f0d2, #9ed99a);
  box-shadow: 0 4px 10px rgba(60,140,90,.25);
  transition: transform .15s, box-shadow .15s;
}
.g-water:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(60,140,90,.32); }
.g-water:active { transform: translateY(1px); }
.garden-alert { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 700; color: #7a4b16; background: linear-gradient(135deg, #ffe8b0, #ffd28a); box-shadow: var(--clay-sm); display: flex; align-items: center; gap: 8px; }
.garden-scene.dry { filter: saturate(.58) brightness(.97); }
.garden-scene.dry .gs-sun { opacity: .5; }

/* 动画 */
@keyframes gsfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gsdrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
@keyframes gsflutter { 0%,100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(22px,-14px) rotate(10deg); } }
@keyframes gspetal { 0% { transform: translateY(0) rotate(0); opacity: .9; } 100% { transform: translateY(180px) rotate(240deg); opacity: 0; } }
@keyframes gsripple { 0% { opacity: .8; width: 14px; height: 5px; } 100% { opacity: 0; width: 56px; height: 20px; } }
@keyframes gsfly { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-26px); } }

/* 深色调 */
[data-theme='dark'] .garden-scene {
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(255,210,120,.20) 0%, transparent 65%),
    linear-gradient(180deg, #1c2a44 0%, #2a3f3c 45%, #1f3a30 100%);
}
[data-theme='dark'] .garden-ground { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, #23513c 100%); }
[data-theme='dark'] .hill.h-back { background: linear-gradient(180deg, #2c5a3e, #234a32); }
[data-theme='dark'] .hill.h-mid  { background: linear-gradient(180deg, #356b48, #2a5638); }
[data-theme='dark'] .grove { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
[data-theme='dark'] .gh-title { color: #b8f0cf; }
[data-theme='dark'] .gh-pros, [data-theme='dark'] .gh-tip { color: #9fd7b6; }
[data-theme='dark'] .g-water { background: linear-gradient(145deg, #2c5042, #1f3a30); color: #c4f0d4; }
[data-theme='dark'] .garden-alert { background: linear-gradient(135deg, #4a3a1e, #5a4528); color: #ffe2a8; }

/* ============================================================
   情绪节律 · 独立简约页（v2.13）
   ============================================================ */
.mood-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, #ffe5d6 0%, #ffc9d9 50%, #d6c9ff 100%);
  box-shadow: var(--clay);
  margin-bottom: 12px;
}
.mood-hero-emoji { font-size: 32px; }
.mood-hero-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #5a3a8c; }
.mood-hero-sub { font-size: 12.5px; color: #6e5296; margin-top: 2px; line-height: 1.6; }
.mood-section { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mood-section .ms-emoji { font-size: 18px; }
.mood-section .ms-title { font-weight: 800; font-size: 14.5px; }
.mood-section-lg .ms-emoji { font-size: 24px; }
.mood-section-lg .ms-title { font-size: 17px; font-weight: 800; letter-spacing: .3px; }
.mood-section-lg .ms-badge { font-size: 12.5px; padding: 4px 11px; }
.mood-section-sub { margin-top: 4px; opacity: .9; }
.mood-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.mood-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--clay-sm);
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  cursor: pointer; transition: all .15s; border: 2px solid transparent;
}
.mood-pills.compact .mood-pill { padding: 4px 9px; font-size: 11.5px; }
.mood-pills.compact .mood-pill-emoji { font-size: 14px; }
/* 今日记录小行 */
.mood-today { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-label { font-size: 12px; font-weight: 800; color: var(--text-soft); background: var(--surface-2); box-shadow: var(--clay-inset); padding: 3px 10px; border-radius: 999px; }
  .mood-section .ms-badge { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--accent-deep); background: var(--surface-2); box-shadow: var(--clay-inset); padding: 3px 9px; border-radius: 999px; }
  /* 心情备注：单行输入框 */
  .mood-note-input { width: 100%; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: var(--font-body); box-sizing: border-box; }
  .mood-note-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(125,108,196,.18); }
/* 30 天情绪/精力热力格子（30 天单行显示） */
.mood-month, .energy-month { display: grid; grid-template-columns: repeat(30, 1fr); gap: 5px; margin-top: 6px; }
.mm-cell, .em-cell { aspect-ratio: 1 / 1; border-radius: 5px; background: var(--surface-2); box-shadow: var(--clay-inset); transition: transform .15s; }
.mm-cell:hover, .em-cell:hover { transform: scale(1.18); }
.mm-cell.lvl-0, .em-cell.lvl-0 { background: var(--surface-2); opacity: .55; }
.mm-cell.lvl-1, .em-cell.lvl-1 { background: #f6a8a0; }
.mm-cell.lvl-2, .em-cell.lvl-2 { background: #f7c59a; }
.mm-cell.lvl-3, .em-cell.lvl-3 { background: #ffe08a; }
.mm-cell.lvl-4, .em-cell.lvl-4 { background: #b6e3a8; }
.mm-cell.lvl-5, .em-cell.lvl-5 { background: #8fd6a0; }
.energy-month .em-cell.lvl-1 { background: #c9b8f0; }
.energy-month .em-cell.lvl-2 { background: #a9c8f2; }
.energy-month .em-cell.lvl-3 { background: #8fd3e0; }
.energy-month .em-cell.lvl-4 { background: #8fd6bf; }
.energy-month .em-cell.lvl-5 { background: #7fd6a0; }
  /* 每日心情改回 1×30 热力图（见 .mood-month / .mm-cell），5×30 网格已弃用 */
.mood-tip { position: fixed; z-index: 300; pointer-events: none; background: #2f2a3a; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; transition: opacity .12s; white-space: nowrap; }

.mood-pill:hover { transform: translateY(-1px); }
.mood-pill.sel { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.mood-pill-emoji { font-size: 16px; }
.mood-history { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mood-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--clay-sm);
}
.mood-row-emoji { font-size: 22px; }
.mood-row-main { flex: 1; min-width: 0; }
.mood-row-note { font-size: 13px; color: var(--text); font-weight: 600; }
.mood-row-date { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
.mood-row-del { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 14px; }
.mood-row-del:hover { color: var(--danger); }
.energy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.energy-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.energy-row input[type=range] { accent-color: var(--accent); width: 110px; }
.energy-row .er-val { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); box-shadow: var(--clay-inset); font-size: 12px; font-weight: 800; color: var(--text); }

/* ============================================================
   首页：个人目标卡片紧凑化（v2.13）
   ============================================================ */
.goal-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.goal-card-head .g-name { flex: 1; font-weight: 700; font-size: 14px; }
.goal-card-head .g-val { font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.ms-track {
  display: flex; flex-wrap: wrap;
  gap: 16px 10px;
  padding: 16px 14px 18px;
  position: relative;
  margin: 6px -6px 0;
}
.ms-track::-webkit-scrollbar { display: none; }
.ms-spine { display: none; }
.ms-pin {
  position: relative; flex: 0 0 auto; width: 120px;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 4px;
}
.ms-pin-icon {
  font-size: 22px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: var(--clay-sm);
  margin-bottom: 6px;
}
.ms-pin-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface);
  margin: 0 0 8px;
  box-shadow: 0 0 0 3px #c79a6b;
}
.ms-pin.bronze  .ms-pin-dot { box-shadow: 0 0 0 3px #c79a6b; }
.ms-pin.silver  .ms-pin-dot { box-shadow: 0 0 0 3px #b8c5d0; }
.ms-pin.gold    .ms-pin-dot { box-shadow: 0 0 0 3px #f0c14b; }
.ms-pin.platinum .ms-pin-dot { box-shadow: 0 0 0 3px #c4a7e7; }
.ms-pin.bronze  .ms-pin-icon { background: linear-gradient(180deg, #fff, #f3e2c8); }
.ms-pin.silver  .ms-pin-icon { background: linear-gradient(180deg, #fff, #dde7ee); }
.ms-pin.gold    .ms-pin-icon { background: linear-gradient(180deg, #fff, #fce6a6); }
.ms-pin.platinum .ms-pin-icon { background: linear-gradient(180deg, #fff, #e6d4f3); }
.ms-pin-title {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  text-align: center; line-height: 1.4;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ms-pin-date {
  font-size: 11px; color: var(--text-soft);
  margin-top: 2px;
}

/* 深色模式 · 花园 */
[data-theme='dark'] .garden-scene {
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(255,210,120,.18) 0%, transparent 65%),
    linear-gradient(180deg, #1c2a44 0%, #243b3a 45%, #1f3a30 100%);
}
[data-theme='dark'] .garden-ground {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, #23513c 100%);
}
[data-theme='dark'] .ms-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
[data-theme='dark'] .ms-pin-icon { background: var(--surface-2); }


/* —— 果园养成（芭芭农场式） —— */
.fruit-tree { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(60,90,60,.18)); }
.fruit-tree .fruit-pop { transform-origin: center; animation: fruit-pop 2.4s ease-in-out infinite; }
@media (max-width: 560px) { .garden-center-tree { width: 260px; height: 300px; } }
@keyframes fruit-pop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.garden-center-tree { z-index: 4; }
.gh-tree-name { font-family: var(--font-display); font-size: 15px; font-weight: 800; margin-top: 2px; }
.gh-grow { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.gh-coins { font-size: 13px; font-weight: 700; margin-top: 4px; color: var(--accent-deep); }
.gh-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.g-act { flex: 1; min-width: 76px; border: none; cursor: pointer; padding: 9px 8px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: linear-gradient(145deg, var(--accent-3), var(--accent-5)); color: #fff; box-shadow: var(--clay-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: transform .15s, box-shadow .18s; }
.g-act b { font-weight: 800; }
.g-act:hover { transform: translateY(-1px); box-shadow: var(--clay); }
.g-act:active { transform: translateY(1px); }
.g-act.harvest { background: linear-gradient(145deg, #ff9a3c, #ff6a3c); animation: bloom-pulse 2s ease-in-out infinite; }
.gh-tip { margin-top: 8px; font-size: 12px; color: var(--warn); }
/* 今日果园任务卡 */
.quest-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: var(--clay-inset); }
.quest-item.claimed { opacity: .72; }
.q-emoji { font-size: 22px; width: 34px; text-align: center; flex-shrink: 0; }
.q-info { flex: 1; min-width: 0; }
.q-title { font-weight: 700; font-size: 14px; }
.q-desc { font-size: 12px; color: var(--text-soft); margin-top: 1px; }
.q-btn { border: none; cursor: pointer; padding: 7px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; flex-shrink: 0;
  background: linear-gradient(145deg, var(--accent-3), var(--accent-5)); color: #fff; box-shadow: var(--clay-sm); transition: transform .15s; }
.q-btn:hover { transform: translateY(-1px); }
.q-btn.claimed { background: var(--surface); color: var(--text-faint); box-shadow: var(--clay-inset); cursor: default; }
.q-btn.ghost { background: var(--surface); color: var(--accent-deep); box-shadow: var(--clay-inset); border: 1px solid rgba(155,109,255,.25); }