/* ============================================================
 * 陈果工作台 V2 · 设计系统
 * 清新晨露 · 茉莉绿主色 · 375px 手机端
 * ============================================================ */

:root {
  /* 颜色 */
  --c-primary: #6FAE5C;
  --c-primary-deep: #3D6B3A;
  --c-appbar: #2F8564;
  --c-amber: #F2C94C;
  --c-red: #EB5757;
  --c-bg: #F7FBF6;
  --c-bg-alt: #FAFCFC;
  --c-card: #FFFFFF;
  --c-mint-soft: #E4F2DF;
  --c-mint-tint: #D4EDD7;
  --c-divider: #EDF3EB;
  --c-text-primary: #1F2A24;
  --c-text-secondary: #5A6B61;
  --c-text-tertiary: #8A998F;
  --c-text-on-appbar: #FFFFFF;

  /* 阴影 */
  --shadow-home: 0 4px 16px rgba(111, 174, 92, 0.10);
  --shadow-detail: 0 2px 10px rgba(111, 174, 92, 0.06);
  --shadow-button: 0 4px 12px rgba(235, 87, 87, 0.28);

  /* 圆角 */
  --r-card: 16px;
  --r-card-sm: 14px;
  --r-pill: 999px;

  /* 间距 */
  --gap-page: 14px;
  --pad-page: 16px;
  --gap-section: 18px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  background: #E5EBE3;
  color: var(--c-text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* App 容器 (移动端仿真) */
#app {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.08);
}

/* 状态栏 */
.status-bar {
  height: 36px;
  background: var(--c-appbar);
  color: var(--c-text-on-appbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 22px;
  font-size: 13px;
  font-weight: 600;
  font-family: "SF Pro Text", system-ui, sans-serif;
  letter-spacing: 0.2px;
}
.status-bar .right { display: flex; gap: 6px; align-items: center; }
.status-bar svg { width: 16px; height: 11px; fill: white; }

/* 顶部应用栏 */
.appbar {
  background: var(--c-appbar);
  color: var(--c-text-on-appbar);
  padding: 10px var(--pad-page) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.appbar.detail { padding: 10px 8px 14px; }
.appbar .brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 8px;
}
.appbar .brand .title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.appbar .brand .sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--c-mint-tint);
  letter-spacing: 0.4px;
}
.appbar .left,
.appbar .right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.appbar .icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.appbar .icon-btn svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.appbar.detail .back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.appbar.detail .back-btn svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.appbar.detail .page-title {
  font-size: 17px;
  font-weight: 600;
  margin-left: 4px;
}
.appbar.detail .action-btn {
  margin-right: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.appbar.detail .action-btn svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 页面内容容器 */
.page-content {
  padding: var(--pad-page);
  padding-bottom: calc(72px + var(--pad-page));
  display: flex;
  flex-direction: column;
  gap: var(--gap-page);
}

/* ============================================================
 * 总览首页
 * ============================================================ */
.hero {
  background: linear-gradient(135deg, #3D6B3A 0%, #6FAE5C 100%);
  border-radius: var(--r-card);
  padding: 18px 20px 22px;
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 65%);
  pointer-events: none;
}
.hero .flower-bg {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  opacity: 0.18;
}
.hero .flower-bg.small { opacity: 0.12; top: 60px; right: 30px; }
.hero .label {
  font-size: 11px;
  letter-spacing: 1.5px;
  opacity: 0.85;
  margin-bottom: 8px;
  font-weight: 500;
}
.hero .quote {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}
.hero .meta {
  font-size: 11px;
  opacity: 0.8;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.hero .meta .dot { opacity: 0.4; }

/* 模块入口卡 */
.modules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.module-card {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-home);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.module-card:active { transform: scale(0.985); box-shadow: 0 2px 8px rgba(111, 174, 92, 0.08); }
.module-card .icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.module-card .icon svg { width: 22px; height: 22px; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.module-card .body { flex: 1; min-width: 0; }
.module-card .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-primary);
  margin-bottom: 2px;
}
.module-card .subtitle {
  font-size: 12px;
  color: var(--c-text-tertiary);
}
.module-card .badge {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.module-card .arrow {
  color: var(--c-text-tertiary);
  flex-shrink: 0;
  margin-left: 4px;
}
.module-card .arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 入口卡图标主题色 */
.icon-todo { background: #E4F2DF; }
.icon-todo svg { stroke: #6FAE5C; }
.icon-todo .badge { background: #F2C94C; color: #6B4A00; }

.icon-ai { background: #E1ECFF; }
.icon-ai svg { stroke: #5C8FE8; }
.icon-ai .badge { background: #5C8FE8; }

.icon-red { background: #FFE5E5; }
.icon-red svg { stroke: #EB5757; }
.icon-red .badge { background: #EB5757; }

.icon-concept { background: #F0EAFF; }
.icon-concept svg { stroke: #7C5CC7; }

.icon-book { background: #FFF6DB; }
.icon-book svg { stroke: #C99524; }
.icon-book .badge { background: #F2C94C; color: #6B4A00; }

.icon-remind { background: #E4F2DF; }
.icon-remind svg { stroke: #6FAE5C; }

.icon-huzhou { background: #E4F2DF; }
.icon-huzhou svg { stroke: #3D6B3A; }

.icon-fitness { background: #EAF4FF; }
.icon-fitness svg { stroke: #5C8FE8; }

.icon-podcast { background: #F0EAFF; }
.icon-podcast svg { stroke: #7C5CC7; }

/* 底部 Tab 栏 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  background: white;
  border-top: 1px solid var(--c-divider);
  display: flex;
  padding: 6px 0 14px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
  z-index: 10;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  color: #9DBE8E;
  font-size: 10px;
  font-weight: 500;
  transition: color 0.2s;
}
.tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: var(--c-primary-deep); }
.tab.active svg { stroke: var(--c-primary-deep); }

/* ============================================================
 * 详情页组件
 * ============================================================ */
.section {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--shadow-detail);
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title .pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-red);
}
.section-title .pip.amber { background: var(--c-amber); }
.section-title .pip.green { background: var(--c-primary); }
.section-meta {
  font-size: 11px;
  color: var(--c-text-tertiary);
}
.section-meta .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  background: rgba(242, 201, 76, 0.18);
  color: #B08200;
  margin-left: 6px;
}
.section-meta .badge.green { background: rgba(111, 174, 92, 0.18); color: var(--c-primary-deep); }
.section-meta .badge.red { background: rgba(235, 87, 87, 0.14); color: var(--c-red); }

/* 今日行动项 */
.action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--c-divider);
}
.action-item:first-child { border-top: none; padding-top: 4px; }
.action-item:last-child { padding-bottom: 4px; }
.action-item .check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.6px solid #C7D2C3;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.action-item .check.done {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.action-item .check.done::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 11px;
  font-weight: 700;
}
.action-item .text { flex: 1; min-width: 0; }
.action-item .label {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-primary);
  margin-bottom: 2px;
}
.action-item.done .label { color: var(--c-text-tertiary); text-decoration: line-through; }
.action-item .meta {
  font-size: 11px;
  color: var(--c-text-tertiary);
  display: flex;
  gap: 8px;
}
.action-item .priority {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-weight: 600;
  background: rgba(242, 201, 76, 0.18);
  color: #B08200;
}
.action-item .priority.low { background: rgba(138, 153, 143, 0.18); color: var(--c-text-secondary); }

/* 长期项目卡 */
.project-item {
  background: var(--c-bg-alt);
  border-radius: var(--r-card-sm);
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--c-divider);
}
.project-item:last-child { margin-bottom: 0; }
.project-item .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.project-item .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-primary);
}
.project-item .pct {
  font-size: 13px;
  font-weight: 700;
  font-family: "Inter Tight", system-ui, sans-serif;
  color: var(--c-primary-deep);
}
.project-item .pct.amber { color: #B08200; }
.progress-bar {
  height: 6px;
  background: var(--c-mint-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 10px;
}
.progress-bar .fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}
.progress-bar .fill.amber { background: var(--c-amber); }
.project-item .next {
  font-size: 12px;
  color: var(--c-text-secondary);
  margin-bottom: 6px;
  line-height: 1.5;
}
.project-item .foot {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--c-text-tertiary);
}
.project-item .foot .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.project-item .foot .tag svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
 * 视图切换动画
 * ============================================================ */
.view { display: none; min-height: 100vh; padding-bottom: 0; }
.view.active { display: block; animation: fadeIn 0.18s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 滚动条 */
.page-content::-webkit-scrollbar { width: 0; }

/* 工具行 */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row.between { justify-content: space-between; }
.spacer { flex: 1; }

/* ============================================================
 * 详情页通用：摘要条 + 子标题
 * ============================================================ */
.detail-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  margin-bottom: -4px;
  font-size: 12px;
  color: var(--c-text-secondary);
}
.detail-summary .sub-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-text-tertiary);
}

/* ============================================================
 * AI 信息
 * ============================================================ */
.news-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--c-divider);
}
.news-item:first-child { border-top: none; padding-top: 4px; }
.news-item:last-child { padding-bottom: 4px; }
.news-item .head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.news-item .source-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: #E1ECFF;
  color: #456BB0;
  font-weight: 600;
}
.news-item .source-tag.green { background: #E4F2DF; color: var(--c-primary-deep); }
.news-item .source-tag.purple { background: #F0EAFF; color: #5B3FA6; }
.news-item .source-tag.amber { background: rgba(242,201,76,0.18); color: #B08200; }
.news-item .source-tag.red { background: rgba(235,87,87,0.14); color: var(--c-red); }
.news-item .time {
  font-size: 11px;
  color: var(--c-text-tertiary);
}
.news-item .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-primary);
  line-height: 1.45;
}
.news-item .summary {
  font-size: 12px;
  color: var(--c-text-secondary);
  line-height: 1.55;
}

/* ============================================================
 * 小红书热点
 * ============================================================ */
.tag-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  background: var(--c-bg-alt);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-divider);
}
.chip.active {
  background: var(--c-mint-soft);
  color: var(--c-primary-deep);
  border-color: var(--c-primary);
  font-weight: 600;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-radius: 10px;
}
.rank-item .rank-no {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: "Inter Tight", system-ui, sans-serif;
  flex-shrink: 0;
  color: white;
}
.rank-item .rank-no.red { background: #EB5757; }
.rank-item .rank-no.orange { background: #F2994A; }
.rank-item .rank-no.amber { background: #F2C94C; }
.rank-item .rank-no.green { background: var(--c-primary); }
.rank-item .rank-info { flex: 1; min-width: 0; }
.rank-item .rank-theme {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-primary);
  margin-bottom: 2px;
}
.rank-item .rank-score {
  font-size: 11px;
  color: var(--c-text-tertiary);
}
.rank-item .rank-trend {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-red);
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(235,87,87,0.10);
}
.rank-item .rank-trend.cool { color: var(--c-primary-deep); background: rgba(111,174,92,0.12); }

/* ============================================================
 * 跨学科概念（plog 卡）
 * ============================================================ */
.concept-card {
  background: var(--c-bg-alt);
  border-radius: var(--r-card-sm);
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--c-divider);
  position: relative;
  overflow: hidden;
}
.concept-card:last-child { margin-bottom: 0; }
.concept-card .top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.concept-card .day-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--c-mint-soft);
  color: var(--c-primary-deep);
  font-family: "Inter Tight", system-ui, sans-serif;
}
.concept-card .domain {
  font-size: 11px;
  color: var(--c-text-secondary);
  font-weight: 500;
}
.concept-card .en {
  font-size: 10px;
  color: var(--c-text-tertiary);
  font-style: italic;
}
.concept-card .term {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.4px;
}
.concept-card .definition {
  font-size: 12px;
  color: var(--c-text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}
.concept-card .scenario {
  font-size: 12px;
  color: var(--c-primary-deep);
  background: var(--c-mint-soft);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.55;
  border-left: 2px solid var(--c-primary);
}

/* ============================================================
 * 读书计划
 * ============================================================ */
.book-card {
  background: var(--c-bg-alt);
  border-radius: var(--r-card-sm);
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--c-divider);
  position: relative;
  overflow: hidden;
}
.book-card:last-child { margin-bottom: 0; }
.book-card .cover {
  width: 36px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  font-family: "Inter Tight", system-ui, sans-serif;
  margin-right: 12px;
}
.book-card .cover.orange { background: linear-gradient(135deg, #F2994A, #EB5757); }
.book-card .cover.blue { background: linear-gradient(135deg, #5C8FE8, #456BB0); }
.book-card .cover.purple { background: linear-gradient(135deg, #7C5CC7, #5B3FA6); }
.book-card .row-head {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.book-card .info { flex: 1; min-width: 0; }
.book-card .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-primary);
  margin-bottom: 2px;
}
.book-card .author {
  font-size: 11px;
  color: var(--c-text-tertiary);
}
.book-card .pct {
  font-size: 13px;
  font-weight: 700;
  font-family: "Inter Tight", system-ui, sans-serif;
}
.book-card .pct.orange { color: #B08200; }
.book-card .pct.blue { color: #456BB0; }
.book-card .pct.purple { color: #5B3FA6; }
.book-card .progress-bar { margin-bottom: 8px; }
.book-card .fill.orange { background: #F2994A; }
.book-card .fill.blue { background: #5C8FE8; }
.book-card .fill.purple { background: #7C5CC7; }
.book-card .current {
  font-size: 11px;
  color: var(--c-text-secondary);
  margin-bottom: 4px;
}
.book-card .minutes {
  font-size: 11px;
  color: var(--c-text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.book-card .minutes svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ============================================================
 * 个人提醒
 * ============================================================ */
.water-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.water-cup {
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--c-bg-alt);
  border: 2px dashed var(--c-mint-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--c-text-tertiary);
}
.water-cup.filled {
  background: var(--c-mint-soft);
  border: 2px solid var(--c-primary);
  color: var(--c-primary-deep);
}

.emotion-card {
  background: var(--c-bg-alt);
  border-radius: var(--r-card-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  position: relative;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-primary);
  border-left: 3px solid var(--c-amber);
}
.emotion-card:last-child { margin-bottom: 0; }
.emotion-card.blue { border-left-color: #5C8FE8; }
.emotion-card .quote-mark {
  font-size: 24px;
  line-height: 1;
  color: var(--c-amber);
  margin-bottom: 2px;
}
.emotion-card.blue .quote-mark { color: #5C8FE8; }
.emotion-card .author {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--c-text-tertiary);
  text-align: right;
}

.tomato-card {
  background: linear-gradient(135deg, #FF8888 0%, #EB5757 100%);
  color: white;
  border-radius: var(--r-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.tomato-card::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.tomato-card .label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  opacity: 0.92;
  font-weight: 500;
}
.tomato-card .timer {
  font-size: 36px;
  font-weight: 700;
  font-family: "Inter Tight", system-ui, sans-serif;
  letter-spacing: 1px;
}
.tomato-card .progress-text {
  font-size: 11px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tomato-card .progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  opacity: 0.6;
}
.tomato-card .progress-dot.active { opacity: 1; }
.tomato-card .controls {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  position: relative;
}
.tomato-card .ctrl-btn {
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.22);
  color: white;
  font-size: 12px;
  font-weight: 600;
}

/* ============================================================
 * 健身运动
 * ============================================================ */
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-mint-soft);
  color: var(--c-primary-deep);
  font-size: 12px;
  font-weight: 600;
}
.plan-chip.rest {
  background: rgba(242,201,76,0.18);
  color: #B08200;
}
.plan-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--c-divider);
}
.plan-item:first-child { border-top: none; padding-top: 4px; }
.plan-item:last-child { padding-bottom: 4px; }
.plan-item .marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-mint-soft);
  color: var(--c-primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-item .marker.done { background: var(--c-primary); color: white; }
.plan-item .marker.rest { background: rgba(242,201,76,0.18); color: #B08200; }
.plan-item .item-body { flex: 1; min-width: 0; }
.plan-item .item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-primary);
  margin-bottom: 3px;
}
.plan-item .item-time {
  font-size: 11px;
  color: var(--c-text-tertiary);
}

.tip-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}
.tip-row .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-primary);
  margin-top: 7px;
  flex-shrink: 0;
}
.tip-row .text {
  font-size: 12px;
  color: var(--c-text-secondary);
  line-height: 1.5;
}

.video-card {
  background: linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 100%);
  border-radius: var(--r-card-sm);
  padding: 14px;
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
}
.video-card .play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.video-card .play svg { width: 16px; height: 16px; fill: white; }
.video-card .info { flex: 1; min-width: 0; }
.video-card .v-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}
.video-card .v-meta {
  font-size: 11px;
  opacity: 0.85;
}

/* ============================================================
 * 播客精选
 * ============================================================ */
.podcast-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--c-divider);
}
.podcast-item:first-child { border-top: none; padding-top: 4px; }
.podcast-item:last-child { padding-bottom: 4px; }
.podcast-item .cover-mini {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--c-mint-soft);
  color: var(--c-primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.podcast-item .cover-mini svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.podcast-item .body { flex: 1; min-width: 0; }
.podcast-item .head-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.podcast-item .source {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: rgba(124,92,199,0.14);
  color: #5B3FA6;
  font-weight: 600;
}
.podcast-item .source.green { background: var(--c-mint-soft); color: var(--c-primary-deep); }
.podcast-item .date {
  font-size: 10px;
  color: var(--c-text-tertiary);
}
.podcast-item .p-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-primary);
  line-height: 1.4;
  margin-bottom: 3px;
}
.podcast-item .p-summary {
  font-size: 11px;
  color: var(--c-text-tertiary);
  line-height: 1.5;
}

/* ============================================================
 * 湖州运营
 * ============================================================ */
.post-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--c-divider);
}
.post-row:first-child { border-top: none; padding-top: 4px; }
.post-row:last-child { padding-bottom: 4px; }
.post-row .status {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.post-row .status.published {
  background: rgba(111,174,92,0.18);
  color: var(--c-primary-deep);
}
.post-row .status.pending {
  background: rgba(242,201,76,0.18);
  color: #B08200;
}
.post-row .post-body { flex: 1; min-width: 0; }
.post-row .post-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-primary);
  margin-bottom: 2px;
}
.post-row .post-time {
  font-size: 11px;
  color: var(--c-text-tertiary);
}

.metric-card {
  background: var(--c-bg-alt);
  border-radius: var(--r-card-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--c-divider);
}
.metric-card:last-child { margin-bottom: 0; }
.metric-card .m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.metric-card .m-label {
  font-size: 11px;
  color: var(--c-text-tertiary);
}
.metric-card .m-value {
  font-size: 22px;
  font-weight: 700;
  font-family: "Inter Tight", system-ui, sans-serif;
  color: var(--c-text-primary);
}
.metric-card .m-sub {
  font-size: 11px;
  color: var(--c-text-secondary);
  margin-bottom: 8px;
}
.metric-card .m-progress {
  height: 5px;
  background: var(--c-mint-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 8px;
}
.metric-card .m-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-pill);
}
.metric-card .m-fill.amber { background: var(--c-amber); }
.metric-card .m-trend {
  font-size: 11px;
  color: var(--c-primary-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric-card .m-trend .delta {
  font-weight: 700;
  color: var(--c-red);
}
.metric-card .m-trend .extra {
  color: var(--c-text-tertiary);
}