/* ====================================================================
   营养管理后台 · 设计系统 + 布局样式
   色彩取自参考前端：鼠尾草绿 / 暖米 / 深墨
   ==================================================================== */

:root {
  /* 主题色 */
  --sage: #5C8C6E;
  --sage-dk: #3D6B52;
  --sage-lt: #A8C9B5;
  --sage-bg: #EFF5EF;

  --coral: #E07F6A;
  --coral-lt: #FAE5DF;
  --sand: #E8B86D;
  --sand-lt: #FBEFD6;
  --blue: #4A7FA5;
  --blue-lt: #D6E5F0;
  --purple: #9878D0;
  --purple-lt: #EDE8F5;

  --ink: #1E2A22;
  --ink-2: #4A5A50;
  --ink-3: #8B9C90;
  --ink-4: #C2CDC6;
  --ink-5: #E5EAE6;
  --bg: #F7F4EF;
  --paper: #FFFFFF;
  --line: rgba(30,42,34,.08);
  --line-2: rgba(30,42,34,.14);

  /* 状态色 */
  --success: #5C8C6E;
  --warning: #E8B86D;
  --danger: #E07F6A;
  --info: #4A7FA5;

  /* 字体 */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Space Mono", "SF Mono", Consolas, monospace;
  --font-serif: "DM Serif Display", Georgia, serif;

  /* 阴影 */
  --shadow-xs: 0 1px 2px rgba(30,42,34,.04);
  --shadow-sm: 0 1px 8px rgba(30,42,34,.06);
  --shadow-md: 0 4px 16px rgba(30,42,34,.08);
  --shadow-lg: 0 8px 32px rgba(30,42,34,.12);
  --shadow-sage: 0 4px 16px rgba(92,140,110,.28);

  /* 半径 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 100px;

  /* 布局 */
  --sidebar-w: 232px;
  --header-h: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--sage-dk); text-decoration: none; }
a:hover { color: var(--sage); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }

/* ============= 布局 ============= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.brand-logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-dk) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sage);
}
.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.2px;
}
.brand-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
}
.nav-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-3);
  font-weight: 700;
  padding: 14px 12px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-item:hover { background: var(--ink-5); color: var(--ink); }
.nav-item.active {
  background: var(--sage-bg);
  color: var(--sage-dk);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--sage);
  border-radius: 0 3px 3px 0;
}
.nav-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.nav-badge {
  margin-left: auto;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  font-family: var(--font-mono);
}
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sand) 0%, var(--coral) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.avatar-xl { width: 64px; height: 64px; font-size: 22px; }
.user-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.user-role { font-size: 11px; color: var(--ink-3); }
.user-card .logout {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: transparent;
}
.user-card .logout:hover { color: var(--coral); border-color: var(--coral-lt); }

/* 侧边栏折叠为图标模式 */
.app.app-collapsed { grid-template-columns: 64px 1fr; }
.sidebar.collapsed { width: 64px; padding: 16px 0; overflow: visible; }
.sidebar-collapse-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  z-index: 2;
}
.sidebar-collapse-btn:hover {
  background: var(--sage-bg);
  color: var(--sage-dk);
  border-color: var(--sage-lt);
}
.sidebar.collapsed .sidebar-collapse-btn {
  right: 50%;
  transform: translate(50%, -50%);
}

/* ============= 主区 ============= */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
}
.crumbs .sep { color: var(--ink-4); }
.crumbs .current { color: var(--ink); font-weight: 600; }
.search {
  flex: 1;
  max-width: 360px;
  position: relative;
  margin-left: 12px;
}
.search input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 14px 8px 36px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, background .15s;
}
.search input:focus { border-color: var(--sage); background: var(--paper); }
.search::before {
  content: "🔍";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: .55;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  color: var(--ink-2);
  position: relative;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--sage-bg); border-color: var(--sage-lt); }
.icon-btn .dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--coral);
  border-radius: 50%;
  border: 2px solid var(--paper);
}

.content {
  padding: 24px;
  flex: 1;
  max-width: 100%;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.5px;
}
.page-subtitle {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}
.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ============= 通用组件 ============= */

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--bg);
  color: var(--ink);
  transition: background .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--ink-5); }
.btn-primary {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
  box-shadow: var(--shadow-sage);
}
.btn-primary:hover { background: var(--sage-dk); border-color: var(--sage-dk); }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-danger:hover { background: #C66951; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* 卡片 */
.card {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.card-flat { box-shadow: none; }
.card-pad-sm { padding: 14px; }
.card-pad-lg { padding: 24px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card-title { font-size: 14px; font-weight: 700; margin: 0; }
.card-sub { font-size: 12px; color: var(--ink-3); }

/* 标签 / 徽章 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: var(--ink-5);
  color: var(--ink-2);
}
.tag-sage { background: var(--sage-bg); color: var(--sage-dk); }
.tag-coral { background: var(--coral-lt); color: #B0543F; }
.tag-sand { background: var(--sand-lt); color: #B07A2F; }
.tag-blue { background: var(--blue-lt); color: #2C5A7C; }
.tag-purple { background: var(--purple-lt); color: #6B4FA0; }
.tag-outline { background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); }
.tag-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* 统计卡 */
.stat {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.stat-label {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  margin: 6px 0 2px;
  letter-spacing: -1px;
}
.stat-unit { font-size: 13px; color: var(--ink-3); margin-left: 4px; font-weight: 500; }
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}
.delta-up { color: var(--sage-dk); }
.delta-down { color: var(--coral); }
.delta-flat { color: var(--ink-3); }
.stat-icon {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.stat-sage { background: var(--sage-bg); color: var(--sage-dk); }
.stat-coral { background: var(--coral-lt); color: #B0543F; }
.stat-sand { background: var(--sand-lt); color: #B07A2F; }
.stat-blue { background: var(--blue-lt); color: #2C5A7C; }
.stat-purple { background: var(--purple-lt); color: #6B4FA0; }

/* 表格 */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:hover { background: rgba(92,140,110,.04); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { font-family: var(--font-mono); font-weight: 600; }
.table-actions {
  display: flex;
  gap: 6px;
}
.table-actions .icon-btn { width: 28px; height: 28px; font-size: 13px; }

/* 进度条 */
.bar {
  height: 6px;
  background: var(--ink-5);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 100px;
  transition: width .4s ease;
}
.bar-sage .bar-fill { background: linear-gradient(90deg, var(--sage-lt), var(--sage)); }
.bar-coral .bar-fill { background: linear-gradient(90deg, var(--coral-lt), var(--coral)); }
.bar-sand .bar-fill { background: linear-gradient(90deg, var(--sand-lt), var(--sand)); }
.bar-blue .bar-fill { background: linear-gradient(90deg, var(--blue-lt), var(--blue)); }
.bar-thin { height: 4px; }

/* 网格 */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-12 { grid-column: span 12; }

/* 表单 */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field-hint  { font-size: 11px; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(92,140,110,.12);
}
.textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

.input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}
.input-group .input {
  border: none;
  background: transparent;
}
.input-group .addon {
  padding: 0 12px;
  font-size: 12px;
  color: var(--ink-3);
  background: var(--bg);
  border-left: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Checkbox / Radio */
.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}
.check-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-2);
  border-radius: 5px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.check input { display: none; }
.check input:checked + .check-box { background: var(--sage); border-color: var(--sage); }
.check input:checked + .check-box::before { content: "✓"; }

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  padding: 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.tab {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
  background: transparent;
  border: none;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-xs); }

/* 空状态 */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-3);
}
.empty-emoji { font-size: 40px; opacity: .5; margin-bottom: 8px; }
.empty-text { font-size: 13px; }

/* 时间线 */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--line);
}
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -19px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--sage);
}
.tl-item.is-current::before { background: var(--sage); }
.tl-item.is-done::before { background: var(--sage); }
.tl-time { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.tl-title { font-size: 13px; font-weight: 600; margin: 2px 0 2px; }
.tl-desc { font-size: 12px; color: var(--ink-3); }

/* 头像组合 */
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar {
  width: 28px; height: 28px;
  font-size: 11px;
  border: 2px solid var(--paper);
  margin-left: -8px;
}
.avatar-stack .avatar:first-child { margin-left: 0; }

/* 信息块 */
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; font-size: 13px; }
.kv dt { color: var(--ink-3); font-weight: 500; }
.kv dd { margin: 0; color: var(--ink); font-weight: 500; }

/* 警告/提示 */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  border: 1px solid;
}
.alert-icon { flex-shrink: 0; font-size: 16px; line-height: 1; margin-top: 2px; }
.alert-info    { background: var(--blue-lt);    border-color: rgba(74,127,165,.25); color: #2C5A7C; }
.alert-warning { background: var(--sand-lt);    border-color: rgba(212,146,74,.25); color: #8C5E1E; }
.alert-danger  { background: var(--coral-lt);   border-color: rgba(224,127,106,.3);  color: #B0543F; }
.alert-success { background: var(--sage-bg);    border-color: rgba(92,140,110,.25);  color: var(--sage-dk); }

/* 移动端汉堡按钮 */
.menu-toggle { display: none; }

/* 响应式 */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-span-3, .col-span-4, .col-span-5, .col-span-6,
  .col-span-7, .col-span-8, .col-span-9 { grid-column: span 12; }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform .25s;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle {
    display: flex;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    align-items: center; justify-content: center;
    font-size: 18px;
  }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .search { display: none; }
  .page-head { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* 工具 */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 32px; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.color-sage { color: var(--sage-dk); }
.color-coral { color: var(--coral); }
.color-ink-3 { color: var(--ink-3); }
.muted { color: var(--ink-3); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-wrap { white-space: nowrap; }
.w-full { width: 100%; }
.h-full { height: 100%; }

/* 分隔符 */
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.divider-v { width: 1px; background: var(--line); align-self: stretch; margin: 0 12px; }

/* 圆点状态 */
.dot-sage { background: var(--sage); }
.dot-coral { background: var(--coral); }
.dot-sand { background: var(--sand); }
.dot-blue { background: var(--blue); }
.dot-ink-3 { background: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* 动画 */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ====================================================================
   新页面附加样式（customers / customer-detail / reports / stages 等）
   ==================================================================== */

/* 兼容变量映射 - 新页面使用 --sage-600 等命名 */
:root {
  --sage-50:#F0F4ED; --sage-100:#E0E9D9; --sage-200:#C8D6BC;
  --sage-300:#A8B89E; --sage-400:#8FA683; --sage-500:#7A8C5C;
  --sage-600:#5A6B4C; --sage-700:#44513A; --sage-800:#2E3828;
  --sand-50:#FBF5EC; --sand-100:#F5E8D2; --sand-200:#EAD4A8;
  --sand-300:#DFC089; --sand-400:#D4A574; --sand-500:#B88A5C;
  --sand-600:#8E6843;
  --text-primary:#2D2D2D; --text-secondary:#6B6B6B; --text-tertiary:#9A9A9A;
  --border-color:#E8E5DD; --border-color-light:#F0EDE5;
  --success:#7A8C5C; --warning:#D4A574; --danger:#C97B63; --info:#5A7A8C;
}

body { color: var(--text-primary); }

/* 工具栏 */
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border-color-light); }
.toolbar-left, .toolbar-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.toolbar h3.card-title { margin: 0; padding: 0; border: 0; }

/* 输入 */
.input { height:36px; padding:0 12px; border:1px solid var(--border-color); border-radius:8px; background:#fff; font-size:13px; color:var(--text-primary); outline:none; transition:border-color .15s; }
.input.sm { height:30px; padding:0 8px; font-size:12px; }
.input:focus { border-color: var(--sage-500); }
textarea.input { height:auto; padding:10px 12px; line-height:1.6; resize:vertical; }
.input::placeholder { color: var(--text-tertiary); }

/* 按钮 */
.btn { height:36px; padding:0 16px; border-radius:8px; font-size:13px; font-weight:500; border:0; display:inline-flex; align-items:center; gap:6px; cursor:pointer; transition:all .15s; }
.btn-sm { height:28px; padding:0 10px; font-size:12px; }
.btn-primary { background: var(--sage-600); color:#fff; }
.btn-primary:hover { background: var(--sage-700); }
.btn-ghost { background: transparent; color: var(--text-secondary); border:1px solid var(--border-color); }
.btn-ghost:hover { background: var(--border-color-light); color: var(--text-primary); }
.btn-text { background:transparent; border:0; height:auto; padding:2px 6px; color: var(--sage-600); font-size:12px; }
.btn-text:hover { color: var(--sage-700); text-decoration:underline; }
.btn-text.success { color: var(--success); }
.btn-text.danger { color: var(--danger); }
.btn-icon { width:36px; padding:0; justify-content:center; }

/* 卡片 */
.card { background:#fff; border:1px solid var(--border-color); border-radius:12px; padding:20px; margin-bottom:16px; }
.card-title { font-size:15px; font-weight:600; margin:0 0 16px; color: var(--text-primary); }
.card-title.mt-24 { margin-top:24px; }

/* 顶栏 */
.topbar { height:64px; background:#fff; border-bottom:1px solid var(--border-color); padding:0 24px; display:flex; justify-content:space-between; align-items:center; }
.page-title { font-size:18px; font-weight:600; margin:0; }
.page-sub { font-size:12px; color: var(--text-secondary); margin:2px 0 0; }
.page-back { font-size:12px; color: var(--text-secondary); display:block; margin-bottom:4px; }
.topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.topbar-right.valign-bottom { align-self:flex-end; padding-bottom:14px; }
.avatar { width:32px; height:32px; border-radius:50%; background: var(--sage-500); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; }
.avatar-sm { width:28px; height:28px; font-size:12px; }

/* 主区 */
.main { background: var(--bg); min-width: 0; }
.content { padding:24px; }

/* 侧边栏 */
.sidebar { padding: 16px 0; }
.sidebar .brand { padding: 0 20px 16px; border-bottom: 1px solid var(--border-color-light); margin-bottom: 16px; }
.sidebar .brand-name { font-size: 15px; font-weight: 600; color: var(--sage-700); }
.sidebar .menu-section { padding: 0 12px; }
.sidebar .menu-title { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .5px; padding: 12px 8px 6px; }
.sidebar .menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.sidebar .menu-item:hover { background: var(--border-color-light); color: var(--text-primary); }
.sidebar .menu-item.active { background: var(--sage-100); color: var(--sage-700); font-weight: 500; }
.sidebar .menu-icon { font-size: 16px; width: 20px; text-align: center; }
.sidebar .menu-badge { margin-left: auto; background: var(--coral); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 99px; }

/* 统计卡 */
.stat-scope-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding: 8px 14px;
  background: #f0f5ff;
  border-left: 3px solid var(--primary, #4f46e5);
  border-radius: 6px;
  line-height: 1.5;
}
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card { background:#fff; border:1px solid var(--border-color); border-radius:12px; padding:18px 20px; }
.stat-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: 600; color: var(--text-primary); }
.stat-trend { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* 数据表 */
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border-color); background: var(--bg); }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border-color-light); color: var(--text-primary); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--border-color-light); }

/* 标签 */
.tag { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.tag-primary { background: var(--sage-100); color: var(--sage-700); }
.tag-success { background: #DDEAD0; color: #4D6B2C; }
.tag-warning { background: var(--sand-100); color: #8B5A1F; }
.tag-danger { background: #F5DDD5; color: #A03F2C; }
.tag-default { background: #E8E5DD; color: var(--text-secondary); }

/* 头像单元 */
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-name { font-weight: 500; color: var(--text-primary); }
.user-sub { font-size: 11px; color: var(--text-tertiary); }

/* 阶段单元 */
.stage-cell { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.progress-bar { width: 100%; height: 6px; background: var(--border-color); border-radius: 99px; overflow: hidden; }
.progress-bar.sm { width: 80px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.progress-fill { height: 100%; background: var(--sage-500); border-radius: 99px; transition: width .3s; }
.progress-text { font-size: 11px; color: var(--text-secondary); }

.row-actions { display: flex; gap: 4px; }

/* 模态 */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); }
.modal-panel { position: relative; background: #fff; border-radius: 12px; max-width: 480px; width: 90%; max-height: 90vh; display: flex; flex-direction: column; }
.modal-lg { max-width: 720px; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close { width: 28px; height: 28px; border: 0; background: transparent; font-size: 20px; color: var(--text-secondary); border-radius: 6px; }
.modal-close:hover { background: var(--border-color-light); }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 8px; }

.form-section-title { font-size: 12px; font-weight: 600; color: var(--sage-700); margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--border-color); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-item { display: flex; flex-direction: column; gap: 4px; }
.form-item-full { grid-column: 1 / -1; }
.form-label { font-size: 12px; color: var(--text-secondary); }
.form-stack { display: flex; flex-direction: column; gap: 12px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--border-color-light); margin-top: 8px; }

/* 翻页 */
.pagination { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border-color-light); }
.pagination-info { font-size: 12px; color: var(--text-secondary); }
.pagination-buttons { display: flex; gap: 4px; }

/* 网格 */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }

/* KPI / Ring */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--bg); border-radius: 8px; padding: 12px 14px; }
.kpi.sm { padding: 8px 10px; }
.kpi-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.kpi-value { font-size: 20px; font-weight: 600; color: var(--text-primary); }
.kpi.sm .kpi-value { font-size: 16px; }
.kpi-unit { font-size: 11px; color: var(--text-tertiary); font-weight: 400; margin-left: 2px; }
.kpi-trend { font-size: 10px; margin-top: 4px; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
.cgm-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }

/* 图表占位 */
.chart-placeholder { background: linear-gradient(180deg, var(--sage-50) 0%, #fff 100%); border: 1px dashed var(--border-color); border-radius: 10px; height: 160px; display: flex; align-items: center; justify-content: center; position: relative; padding: 12px; }
.chart-placeholder.large { height: 220px; }
.chart-line { width: 90%; height: 60%; background: linear-gradient(90deg, transparent 0%, var(--sage-300) 30%, var(--sage-500) 70%, var(--sage-700) 100%); clip-path: polygon(0 80%, 8% 70%, 16% 75%, 24% 60%, 32% 50%, 40% 55%, 48% 40%, 56% 45%, 64% 30%, 72% 35%, 80% 25%, 88% 30%, 96% 20%, 100% 25%, 100% 100%, 0 100%); opacity: .8; }
.chart-bar { width: 90%; height: 70%; display: flex; align-items: flex-end; gap: 8px; justify-content: center; }
.chart-bar::before, .chart-bar::after { content: ''; }
.chart-bar { background: linear-gradient(180deg, transparent, var(--sage-100)); }
.chart-axis { position: absolute; bottom: 8px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 10px; color: var(--text-tertiary); }

/* 客户详情导航区（窗口上方） */
.detail-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 64px;
  z-index: 10;
}
.detail-nav-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.detail-nav-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-500), var(--sage-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.detail-nav-info {
  flex: 1;
  min-width: 0;
}
.detail-nav-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-nav-name .tag {
  font-size: 11px;
}
.detail-nav-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.detail-nav-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.detail-nav-progress .ring {
  position: relative;
  width: 56px;
  height: 56px;
}
.detail-nav-progress .ring svg {
  width: 56px;
  height: 56px;
}
.detail-nav-progress .ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--sage-700);
  font-family: var(--font-mono);
}
.detail-nav-progress .ring-label {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
}
.detail-nav-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  overflow-x: auto;
  background: var(--paper);
}
.detail-nav-tabs .tab {
  padding: 10px 16px;
  background: transparent;
  border: 0;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}
.detail-nav-tabs .tab:hover {
  color: var(--ink);
  background: var(--sage-bg);
}
.detail-nav-tabs .tab.active {
  color: var(--sage-700);
  border-bottom-color: var(--sage-500);
  font-weight: 600;
}

@media (max-width: 768px) {
  .detail-nav-banner { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
  .detail-nav-avatar { width: 44px; height: 44px; font-size: 18px; }
  .detail-nav-tabs { padding: 0 12px; }
  .detail-nav-tabs .tab { padding: 8px 12px; font-size: 12px; }
  .detail-nav-progress { display: none; }
}
@media (max-width: 560px) {
  .detail-nav-tabs { flex-wrap: nowrap; }
  .detail-nav-tabs .tab { padding: 8px 10px; font-size: 11.5px; }
}

/* Profile card */
.profile-card { background: #fff; border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 20px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--sage-500), var(--sage-700)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.profile-main { flex: 1; }
.profile-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.profile-row h2 { font-size: 20px; margin: 0; }
.profile-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.profile-progress { display: flex; align-items: center; gap: 12px; }
.ring { position: relative; width: 80px; height: 80px; }
.ring svg { width: 100%; height: 100%; }
.ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--sage-700); }
.ring-label { font-size: 11px; color: var(--text-secondary); }

/* Tabs */
.tabs-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; padding: 0; overflow-x: auto; background: #fff; border-radius: 12px 12px 0 0; padding: 0 16px; }
.tab { padding: 14px 16px; background: transparent; border: 0; font-size: 13px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .15s; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--sage-700); border-bottom-color: var(--sage-500); font-weight: 500; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .25s; }

/* 时间线 */
.timeline { display: flex; flex-direction: column; gap: 16px; }
.timeline-item { display: flex; gap: 16px; }
.timeline-date { width: 80px; flex-shrink: 0; text-align: right; color: var(--text-secondary); font-size: 12px; padding-top: 4px; }
.timeline-content { flex: 1; background: var(--bg); border-radius: 10px; padding: 14px 16px; border-left: 3px solid var(--sage-500); }
.timeline-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 12px; }
.timeline-grid > div { color: var(--text-secondary); }
.timeline-grid span { color: var(--text-tertiary); margin-right: 4px; }
.timeline-actions { display: flex; gap: 6px; margin-top: 10px; }

/* 任务清单 */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; }
.task-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--border-color); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border-color); }
.task-item.done .task-dot { background: var(--success); }
.task-item.done span:nth-child(2) { color: var(--text-tertiary); text-decoration: line-through; }
.task-pct { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.completion-summary { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border-color); font-size: 13px; color: var(--text-secondary); text-align: right; }
.completion-summary b { color: var(--sage-700); font-size: 16px; }

/* 风险 */
.risk-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color-light); }
.risk-item:last-child { border-bottom: 0; }
.risk-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.risk-item.warning .risk-dot { background: var(--warning); }
.risk-item.info .risk-dot { background: var(--info); }
.risk-item.success .risk-dot { background: var(--success); }
.risk-title { font-size: 13px; }
.risk-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* AI 餐食 */
.ai-score { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.ai-score-num { font-size: 48px; font-weight: 700; color: var(--sage-700); line-height: 1; }
.ai-score-num span { font-size: 18px; color: var(--text-tertiary); margin-left: 2px; }
.ai-score-meta { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; }
.ai-suggestion { background: var(--sand-50); border-left: 3px solid var(--sand-400); padding: 12px 14px; border-radius: 8px; }
.ai-suggestion-title { font-size: 13px; font-weight: 600; color: var(--sand-600); margin-bottom: 6px; }
.ai-suggestion p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

.meal-item { padding: 12px 0; border-bottom: 1px solid var(--border-color-light); }
.meal-item:last-child { border-bottom: 0; }
.meal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.meal-content { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.meal-macro { display: flex; gap: 12px; font-size: 11px; color: var(--text-tertiary); }

/* ===== AI 餐食点评功能 ===== */
/* 点评概览栏 */
.review-overview { display: flex; align-items: center; gap: 0; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color-light); padding: 18px 24px; margin-bottom: 16px; }
.review-overview-item { flex: 1; text-align: center; }
.review-overview-num { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
.review-overview-label { font-size: 12px; color: var(--text-tertiary); }
.review-overview-divider { width: 1px; height: 36px; background: var(--border-color-light); }

/* 工具栏 */
.review-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.review-date-nav { display: flex; align-items: center; gap: 12px; }
.review-date-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-color-light); background: var(--bg-card); cursor: pointer; font-size: 16px; color: var(--text-secondary); transition: all .15s; }
.review-date-btn:hover { background: var(--sage-50); border-color: var(--sage-300); color: var(--sage-700); }
.review-date-current { font-size: 15px; font-weight: 600; color: var(--text-primary); min-width: 160px; text-align: center; }
.review-filter-group { display: flex; gap: 6px; }
.review-filter-btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border-color-light); background: var(--bg-card); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary); transition: all .15s; display: flex; align-items: center; gap: 4px; }
.review-filter-btn:hover { border-color: var(--sage-300); color: var(--sage-700); }
.review-filter-btn.active { background: var(--sage-600); border-color: var(--sage-600); color: #fff; }
.review-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 100px; background: var(--coral); color: #fff; font-size: 10px; font-weight: 700; padding: 0 5px; }
.review-filter-btn.active .review-filter-count { background: rgba(255,255,255,.3); }

/* 餐食点评卡片 */
.meal-review-list { display: flex; flex-direction: column; gap: 14px; }
.meal-review-card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color-light); overflow: hidden; transition: border-color .2s; }
.meal-review-card.pending { border-left: 3px solid var(--coral); }
.meal-review-card.reviewed { border-left: 3px solid var(--sage-500); }
.meal-review-card.flagged { border-left: 3px solid var(--coral-dark); }

.meal-review-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-color-light); }
.meal-review-mealinfo { display: flex; align-items: center; gap: 12px; }
.meal-review-emoji { font-size: 22px; }
.meal-review-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.meal-review-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.meal-review-scores { display: flex; align-items: center; gap: 10px; }
.meal-score-badge { display: flex; flex-direction: column; align-items: center; padding: 4px 12px; border-radius: 8px; min-width: 52px; }
.meal-score-badge.ai { background: var(--sand-50); }
.meal-score-badge.nutritionist { background: var(--sage-50); }
.meal-score-badge.nutritionist.pending-badge { background: var(--border-color-light); opacity: .6; }
.meal-score-label { font-size: 9px; font-weight: 600; letter-spacing: .5px; color: var(--text-tertiary); text-transform: uppercase; }
.meal-score-num { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }

.meal-review-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.meal-review-ai { padding: 14px 18px; border-right: 1px solid var(--border-color-light); }
.meal-review-nutritionist, .meal-review-form { padding: 14px 18px; }
.meal-review-section-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 10px; }

.meal-macro-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.meal-macro-chip { font-size: 11px; padding: 3px 9px; border-radius: 100px; background: var(--bg-card); border: 1px solid var(--border-color-light); color: var(--text-secondary); }
.meal-macro-chip b { color: var(--text-primary); font-weight: 700; }
.meal-ai-foods { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.meal-ai-tip { font-size: 12px; padding: 8px 10px; border-radius: 8px; background: var(--sage-50); color: var(--sage-700); line-height: 1.5; }
.meal-ai-tip.warning { background: #FFF4ED; color: #B0543F; }

/* 已点评展示 */
.meal-reviewer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.meal-reviewer-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.meal-reviewer-time { font-size: 11px; color: var(--text-tertiary); }
.meal-review-comment { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; }
.meal-review-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.meal-review-tag { font-size: 11px; padding: 3px 9px; border-radius: 100px; font-weight: 500; }
.meal-review-tag.good { background: var(--sage-50); color: var(--sage-700); }
.meal-review-tag.tip { background: var(--sand-50); color: var(--sand-600); }
.meal-review-tag.warning { background: #FFF4ED; color: #B0543F; }

/* 点评表单 */
.review-score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-score-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.review-score-slider-wrap { flex: 1; display: flex; align-items: center; gap: 10px; }
.review-score-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 100px; background: linear-gradient(to right, var(--coral) 0%, var(--sand-400) 50%, var(--sage-500) 100%); outline: none; cursor: pointer; }
.review-score-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--sage-600); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.review-score-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--sage-600); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.review-score-display { font-size: 20px; font-weight: 700; color: var(--sage-700); min-width: 36px; text-align: center; }
.review-score-hint { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

.review-templates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.review-template-chip { padding: 5px 11px; border-radius: 100px; border: 1px solid var(--border-color-light); background: var(--bg-card); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary); transition: all .15s; }
.review-template-chip:hover { border-color: var(--sage-400); background: var(--sage-50); color: var(--sage-700); }
.review-template-chip.selected { border-color: var(--sage-600); background: var(--sage-600); color: #fff; }

.review-comment-input { width: 100%; border: 1px solid var(--border-color-light); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; color: var(--text-primary); outline: none; resize: vertical; min-height: 60px; transition: border-color .2s; line-height: 1.5; }
.review-comment-input:focus { border-color: var(--sage-400); }
.review-comment-input::placeholder { color: var(--text-quaternary); }

.review-action-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.review-action-flag { color: var(--coral) !important; }
.review-action-flag:hover { background: #FFF4ED !important; }

/* 点评历史 */
.review-history-list { display: flex; flex-direction: column; gap: 0; }
.review-history-item { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-color-light); }
.review-history-item:last-child { border-bottom: 0; }
.review-history-date { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding-top: 2px; }
.review-history-date b { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.review-history-date span { font-size: 11px; color: var(--text-tertiary); }
.review-history-content { flex: 1; }
.review-history-meal { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.review-history-comment { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 4px; font-style: italic; }
.review-history-meta { font-size: 11px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 响应式 */
@media (max-width: 768px) {
  .meal-review-body { grid-template-columns: 1fr; }
  .meal-review-ai { border-right: 0; border-bottom: 1px solid var(--border-color-light); }
  .review-overview { flex-wrap: wrap; gap: 12px; }
  .review-overview-divider { display: none; }
  .review-overview-item { flex: 1 1 30%; }
  .review-toolbar { flex-direction: column; align-items: stretch; }
  .meal-review-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* 反馈 */
.feedback-list { display: flex; flex-direction: column; gap: 16px; }
.feedback-item { background: var(--bg); border-radius: 10px; padding: 16px; border-left: 3px solid var(--sage-500); }
.feedback-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.feedback-body { display: flex; flex-direction: column; gap: 10px; }
.feedback-section { display: flex; gap: 10px; }
.feedback-label { font-size: 12px; font-weight: 600; color: var(--sage-700); white-space: nowrap; }
.feedback-section p { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* 阶段时间线 */
.stage-timeline { display: flex; flex-direction: column; gap: 16px; position: relative; }
.stage-item { display: flex; gap: 16px; align-items: stretch; position: relative; }
.stage-tag { width: 80px; flex-shrink: 0; text-align: center; padding-top: 16px; font-size: 12px; color: var(--text-tertiary); font-weight: 500; }
.stage-card { flex: 1; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; }
.stage-item.current .stage-card { border-color: var(--sage-500); box-shadow: 0 0 0 3px var(--sage-50); }
.stage-card h4 { margin: 0 0 6px; font-size: 15px; }
.stage-card p { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary); }
.stage-card ul { margin: 0 0 12px; padding-left: 18px; font-size: 12px; color: var(--text-secondary); }
.stage-card li { margin-bottom: 4px; }
.stage-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--border-color); }

/* 任务模板 */
.task-template { display: flex; flex-direction: column; gap: 8px; }
.tt-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.tt-check { width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tt-item:not(:first-child) .tt-check { background: var(--border-color); color: var(--text-tertiary); }
.tt-content { flex: 1; }
.tt-title { font-size: 13px; font-weight: 500; }
.tt-meta { font-size: 11px; color: var(--text-secondary); }

.reward-rule { display: flex; flex-direction: column; gap: 8px; }
.rr-row { display: flex; justify-content: space-between; font-size: 12px; padding: 8px 12px; background: var(--bg); border-radius: 6px; }
.rr-row b { color: var(--sage-700); }

.push-time { display: flex; flex-direction: column; gap: 8px; }
.pt-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.pt-row .input { width: 80px; }

/* 食物/报告 */
.score-badge { display: inline-block; min-width: 32px; padding: 2px 8px; text-align: center; border-radius: 6px; font-size: 12px; font-weight: 600; }
.score-good { background: #DDEAD0; color: #4D6B2C; }
.score-warn { background: var(--sand-100); color: #8B5A1F; }
.score-bad { background: #F5DDD5; color: #A03F2C; }

.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 100px 1fr 50px; gap: 12px; align-items: center; font-size: 12px; }
.bar-label { color: var(--text-secondary); }
.bar-track { height: 16px; background: var(--border-color-light); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.bar-value { text-align: right; color: var(--text-primary); font-weight: 500; }

.nutri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nutri-cell { text-align: center; }
.nutri-name { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.nutri-ring { position: relative; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sage-700); font-weight: 600; font-size: 13px; }
.nutri-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--sage-500) calc(var(--p) * 1%), var(--border-color) 0); }
.nutri-ring::after { content: ''; position: absolute; inset: 6px; background: #fff; border-radius: 50%; }
.nutri-ring span { position: relative; z-index: 1; }
.nutri-ring.r-78 { --p: 78; }
.nutri-ring.r-65 { --p: 65; }
.nutri-ring.r-82 { --p: 82; }
.nutri-ring.r-58 { --p: 58; }
.nutri-ring.r-72 { --p: 72; }
.nutri-ring.r-69 { --p: 69; }

.cgm-chart { background: var(--bg); border-radius: 10px; padding: 16px; }
.cgm-chart svg { width: 100%; height: 240px; }

.meal-response { display: flex; flex-direction: column; gap: 12px; }
.response-item { display: grid; grid-template-columns: 1.2fr 2fr 40px; gap: 12px; align-items: center; font-size: 12px; }
.response-bar { height: 18px; background: var(--border-color-light); border-radius: 99px; overflow: hidden; }
.response-fill { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; color: #fff; font-size: 11px; font-weight: 500; border-radius: 99px; }

/* 报告卡 */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 16px 0; }
.report-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.report-cover { padding: 24px 20px; color: #fff; }
.report-cover.sage { background: linear-gradient(135deg, var(--sage-500), var(--sage-700)); }
.report-cover.sand { background: linear-gradient(135deg, var(--sand-400), var(--sand-600)); }
.report-cover.graduation { background: linear-gradient(135deg, #B88A5C, #6B3A1C); }
.cover-stage { font-size: 12px; opacity: .8; margin-bottom: 4px; }
.cover-name { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.cover-stats { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
.cover-stats > div { font-size: 11px; }
.cover-stats span { opacity: .8; }
.cover-stats b { display: block; font-size: 16px; margin-top: 2px; }
.report-meta { padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-secondary); }
.report-actions { display: flex; gap: 4px; padding: 0 20px 14px; }

.report-card.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; min-height: 280px; border-style: dashed; }
.placeholder-icon { font-size: 32px; margin-bottom: 8px; opacity: .5; }
.placeholder-title { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.placeholder-num { font-size: 28px; font-weight: 600; color: var(--sage-700); margin-bottom: 16px; }

/* 反馈编辑器 */
.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal-input-row { display: flex; align-items: center; gap: 8px; }
.goal-num { width: 24px; height: 24px; border-radius: 50%; background: var(--sage-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }

.voice-recorder { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg); border-radius: 10px; }
.voice-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--sage-500); color: #fff; border: 0; font-size: 20px; cursor: pointer; }
.voice-info { flex: 1; }
.voice-status { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.voice-bar { height: 4px; background: var(--border-color); border-radius: 99px; overflow: hidden; }
.voice-progress { height: 100%; background: var(--sage-500); }
.voice-time { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }

.attach-area { display: flex; gap: 8px; flex-wrap: wrap; }
.attach-card { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); border-radius: 8px; font-size: 12px; }
.attach-add { padding: 8px 12px; background: transparent; border: 1px dashed var(--border-color); border-radius: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }

.feedback-history { display: flex; flex-direction: column; gap: 10px; max-height: 600px; overflow-y: auto; }
.fh-section-header { font-size: 13px; font-weight: 700; color: var(--text-primary); padding: 8px 4px 4px; border-bottom: 1px solid var(--border-color-light); margin-bottom: 2px; }
.fh-item { padding: 12px; background: var(--bg); border-radius: 8px; cursor: pointer; transition: all .15s; position: relative; }
.fh-item:hover { background: var(--sage-50); }
.fh-item:hover .fh-edit-btn { opacity: 1; }
.fh-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; }
.fh-actions { display: flex; align-items: center; gap: 6px; }
.fh-meta { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; cursor: pointer; user-select: none; }
.fh-meta:hover { color: var(--sage-700); }
.fh-preview { font-size: 12px; color: var(--text-secondary); }
.fh-edit-btn { font-size: 11px; padding: 2px 8px; border-radius: 100px; background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; opacity: .6; transition: opacity .15s; }
.fh-edit-btn:hover { background: var(--sage-50); color: var(--sage-700); border-color: var(--sage-700); }
/* 历史反馈「查看」按钮：常驻可见，与编辑按钮形态一致 */
.fh-view-btn { font-size: 11px; padding: 2px 8px; border-radius: 100px; background: var(--sage-50); border: 1px solid var(--sage-700); color: var(--sage-700); cursor: pointer; opacity: 1; transition: all .15s; }
.fh-view-btn:hover { background: var(--sage-700); color: #fff; }

/* 毕业评估 */
.grad-check { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: 8px; font-size: 13px; }
.check-item span { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.check-item.done span { background: var(--success); color: #fff; }
.check-item:not(.done) span { background: var(--border-color); color: var(--text-tertiary); }
.grad-progress { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.grad-bar { flex: 1; height: 8px; background: var(--border-color); border-radius: 99px; overflow: hidden; }
.grad-fill { height: 100%; background: var(--sage-500); }
.grad-progress span { font-size: 13px; color: var(--sage-700); font-weight: 500; }
.grad-actions { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-color-light); }

/* 文章卡 */
.article-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.article-cover { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.article-cover.sage { background: linear-gradient(135deg, var(--sage-100), var(--sage-200)); }
.article-cover.sand { background: linear-gradient(135deg, var(--sand-100), var(--sand-200)); }
.article-body { padding: 14px; }
.article-body h4 { margin: 8px 0 6px; font-size: 14px; }
.article-body p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.article-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); }

.article-card.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; border-style: dashed; gap: 8px; padding: 20px; }
.article-card.placeholder .placeholder-icon { font-size: 28px; }

/* 响应式 */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .cgm-stats { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .profile-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .nutri-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .kpi-row, .cgm-stats { grid-template-columns: 1fr 1fr; }
  .timeline-item { flex-direction: column; }
  .timeline-date { width: auto; text-align: left; }
  .timeline-grid { grid-template-columns: 1fr; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .25s ease-out; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }

/* ====================================================================
   个性化方案模块样式（plans / customer-detail plan tab / stages link）
   ==================================================================== */

/* 联动徽章 */
.linkage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  background: var(--sand-50);
  color: var(--sand-600);
  border: 1px solid rgba(212,146,74,.2);
  margin-left: 6px;
  vertical-align: middle;
}
.linkage-badge::before { content: '🔗'; font-size: 9px; }

/* 方案 Hero */
.plan-hero {
  background: linear-gradient(135deg, var(--sage-100) 0%, var(--sage-50) 50%, var(--sand-50) 100%);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.plan-hero::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(92,140,110,.06);
}
.plan-hero-inner {}
.plan-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--sage-700);
  margin-bottom: 12px;
}
.plan-hero-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.plan-hero-stats {
  display: flex;
  gap: 24px;
}
.plan-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-hero-stat b {
  font-size: 18px;
  color: var(--sage-700);
  font-family: var(--font-mono);
}
.plan-hero-stat span {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 方案目标 */
.plan-goal-primary {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--sage-50);
  border-radius: 10px;
  border: 1px solid rgba(92,140,110,.15);
  margin-bottom: 12px;
}
.plan-goal-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--sage-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.plan-goal-name { font-size: 15px; font-weight: 600; color: var(--sage-700); margin-bottom: 4px; }
.plan-goal-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.plan-goal-metrics { display: flex; gap: 12px; font-size: 12px; color: var(--text-tertiary); }
.plan-goal-metrics span { background: var(--sage-100); padding: 2px 8px; border-radius: 6px; }

.plan-goal-secondary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-goal-sec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
}
.plan-goal-sec-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--sand-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.plan-goal-sec-item .tag { margin-left: auto; }

/* 本周任务 */
.plan-week-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-week-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
}
.plan-week-task.done {
  background: var(--sage-50);
}
.plan-week-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--border-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-tertiary);
  flex-shrink: 0;
}
.plan-week-task.done .plan-week-dot {
  background: var(--sage-500);
  color: #fff;
}
.plan-week-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.plan-week-task-name {
  flex: 1;
  font-weight: 500;
}
.plan-week-task.done .plan-week-task-name {
  color: var(--text-tertiary);
}

/* 阶段时间线 */
.plan-stage-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan-stage-item {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border-color-light);
}
.plan-stage-item.current {
  border-color: var(--sage-500);
  background: var(--sage-50);
  box-shadow: 0 0 0 3px var(--sage-100);
}
.plan-stage-item.done {
  opacity: .65;
}
.plan-stage-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--sage-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.plan-stage-item.current .plan-stage-icon {
  background: var(--sage-500);
  color: #fff;
}
.plan-stage-item.done .plan-stage-icon {
  background: var(--sage-200);
}
.plan-stage-info { flex: 1; }
.plan-stage-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.plan-stage-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.plan-stage-progress { margin-bottom: 6px; }
.plan-stage-tasks { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-stage-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--sage-100);
  border-radius: 6px;
  font-size: 11px;
  color: var(--sage-700);
}

/* 营养师备注 */
.plan-note-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 10px;
  border-left: 3px solid var(--sage-500);
}
.plan-note-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sage-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.plan-note-content { flex: 1; }
.plan-note-head { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.plan-note-head b { color: var(--text-primary); }
.plan-note-text { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* 方案列表页布局（plans.html） */
.plan-list-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  min-height: 400px;
}
.plan-list-sidebar {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  overflow-y: auto;
}
.plan-list-search {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  margin-bottom: 12px;
}
.plan-list-search:focus { border-color: var(--sage-500); }
.plan-list-search::placeholder { color: var(--text-tertiary); }
.plan-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 4px;
}
.plan-list-item:hover { background: var(--sage-50); }
.plan-list-item.active { background: var(--sage-100); border-left: 3px solid var(--sage-500); }
.plan-list-item-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--sage-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.plan-list-item.active .plan-list-item-icon { background: var(--sage-500); color: #fff; }
.plan-list-item-info { flex: 1; min-width: 0; }
.plan-list-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-list-item-sub { font-size: 11px; color: var(--text-tertiary); }

.plan-detail-panel {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  overflow-y: auto;
}

/* 方案详情内 tabs */
.plan-detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
  padding-bottom: 0;
  overflow-x: auto;
}
.plan-detail-tab {
  padding: 10px 14px;
  background: transparent;
  border: 0;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}
.plan-detail-tab:hover { color: var(--text-primary); }
.plan-detail-tab.active { color: var(--sage-700); border-bottom-color: var(--sage-500); font-weight: 500; }
.plan-detail-content { min-height: 200px; }

/* 饮食原则列表 */
.principle-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.principle-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg);
  border-radius: 10px;
}
.principle-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sage-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.principle-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.principle-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* 注意事项 */
.caution-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.caution-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--coral-lt, #FAE5DF);
  border-radius: 10px;
  border-left: 3px solid var(--danger, #C97B63);
}
.caution-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.caution-text { font-size: 12px; line-height: 1.6; color: #8B4A3C; }

/* 模板视图 */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.template-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  transition: all .15s;
}
.template-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-color: var(--sage-300); }
.template-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--sage-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.template-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.template-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.template-meta { display: flex; gap: 8px; }

/* 新建方案弹窗 */
.plan-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-create-form .form-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }

/* 方案响应式 */
@media (max-width: 1024px) {
  .plan-list-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .plan-hero-stats { flex-direction: column; gap: 8px; }
  .plan-stage-item { flex-direction: column; gap: 8px; }
  .plan-goal-primary { flex-direction: column; }
}

/* ====================================================================
   趋势分析模块样式（customer-detail trends tab）
   ==================================================================== */

/* 综合改善指数 Hero */
.trend-hero {
  background: linear-gradient(135deg, #2E5B40 0%, #5C8C6E 55%, #7AB894 100%);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.trend-hero::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.trend-hero-content { position: relative; z-index: 2; }
.trend-hero-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.trend-hero-value {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: 6px;
}
.trend-hero-sub {
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
/* 无每日记录时：改善指数置空，弱化显示避免"凭空改善"误导 */
.trend-hero-empty {
  color: rgba(255,255,255,.45);
  font-weight: 400;
  font-style: italic;
}
.trend-hero-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: 4px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.trend-range {
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: all .15s;
}
.trend-range:hover { color: #fff; }
.trend-range.active {
  background: #fff;
  color: var(--sage-700);
}

/* 关键指标对比卡 */
.trend-kpi-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow .15s, border-color .15s;
}
.trend-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(30,42,34,.06);
  border-color: var(--sage-300);
}
.trend-kpi-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.trend-kpi-body { flex: 1; min-width: 0; }
.trend-kpi-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 2px;
}
.trend-kpi-values {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 8px;
}
.trend-kpi-values b {
  font-size: 16px;
  font-family: var(--font-mono);
  color: var(--sage-700);
}
.trend-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
}
.mini-bar {
  flex: 1;
  min-width: 4px;
  border-radius: 2px 2px 0 0;
  transition: height .4s ease;
}
.trend-kpi-delta {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.trend-kpi-delta.good { color: var(--sage-600); }

/* 图表容器 */
.trend-chart-wrap {
  background: var(--bg);
  border-radius: 10px;
  padding: 16px;
  margin-top: 4px;
}
.trend-chart-wrap svg { display: block; }

/* 图表图例 */
.trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.trend-legend-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
}

/* 洞察提示 */
.trend-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--sand-50, #FBF5EC);
  border-left: 3px solid var(--sand-400, #D4A574);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.trend-insight-icon { font-size: 14px; flex-shrink: 0; }
.trend-insight b { color: var(--sage-700); }

/* Before/After 对比网格 */
.trend-compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.trend-compare-item {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  border: 1px solid var(--border-color-light);
  transition: transform .15s, box-shadow .15s;
}
.trend-compare-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30,42,34,.06);
}
.trend-compare-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin: 0 auto 8px;
}
.trend-compare-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
}
.trend-compare-ba {
  font-size: 13px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px;
}
.trend-compare-ba span:first-child {
  text-decoration: line-through;
  opacity: 0.6;
}
.trend-compare-ba b {
  font-size: 17px;
  font-family: var(--font-mono);
  font-weight: 700;
}
.trend-compare-arrow {
  color: var(--text-tertiary);
  font-size: 12px;
}
.trend-compare-unit {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.trend-compare-delta {
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
}
.trend-compare-delta.good {
  background: var(--sage-100);
  color: var(--sage-700);
}

/* 趋势分析响应式 */
@media (max-width: 1024px) {
  .trend-compare-grid { grid-template-columns: repeat(2, 1fr); }
  .trend-hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .trend-compare-grid { grid-template-columns: 1fr; }
  .trend-hero-value { font-size: 28px; }
}

/* ====================================================================
   月报编辑表单 · 对齐「营养管理月报模板.html」视觉
   编辑弹窗内的表单按区块归类汇总，每个子项聚合为卡片。
   仅作用于 .edit-form 容器内，避免与全局样式冲突。
   ==================================================================== */
.edit-form {
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  color: #2C3E50;
}
.edit-form .input {
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #D6E0E8;
  background: #fff;
}
.edit-form textarea.input { line-height: 1.5; resize: vertical; }

/* 区块容器（归类汇总卡片） */
.edit-form .edit-sec {
  background: #fff;
  border: 1px solid #ECEFF1;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(26,60,94,.05);
}
.edit-form .edit-sec:last-child { margin-bottom: 0; }
.edit-form .edit-sec-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.edit-form .edit-sec-title .bar {
  width: 4px; height: 22px; flex: none;
  background: linear-gradient(180deg, #1E6B8A, #2BA0A8);
  border-radius: 3px;
}
.edit-form .edit-sec-title h2 { font-size: 18px; font-weight: 700; color: #163D52; margin: 0; }
.edit-form .edit-sec-title .en-sub {
  font-size: 11px; color: #95A5A6; margin-left: 2px;
  text-transform: uppercase; letter-spacing: 1px;
}
.edit-form .edit-sec-title .add-btn {
  margin-left: auto;
  font-size: 12px; color: #1E6B8A; background: #E8F4F8;
  border: 1px dashed #9CC7D6; border-radius: 20px;
  padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.edit-form .edit-sec-title .add-btn:hover { background: #D6EAF2; }

/* 字段标签（沿用全局 .edit-label，此处仅补充间距） */
.edit-form .edit-label { margin-bottom: 4px; }

/* 通用子项卡片 */
.edit-form .edit-card {
  background: #FAFBFC; border: 1px solid #ECEFF1;
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
}
.edit-form .edit-card:last-child { margin-bottom: 0; }
.edit-form .card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 2px solid #E8F4F8;
}
.edit-form .card-head .ct { font-size: 14px; font-weight: 700; color: #163D52; }

/* grid 工具 */
.edit-form .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.edit-form .edit-grid.three { grid-template-columns: repeat(3, 1fr); }
.edit-form .edit-grid.four { grid-template-columns: repeat(4, 1fr); }
.edit-form .col-full { grid-column: 1 / -1; }

/* 增 / 删 按钮 */
.edit-form .add-btn, .edit-form .del-btn {
  font-size: 11px; cursor: pointer; white-space: nowrap;
  border-radius: 14px; padding: 3px 10px;
}
.edit-form .del-btn {
  margin-left: auto;
  color: #E74C3C; background: #FDECEA; border: 1px solid #F5C6C0;
}
.edit-form .del-btn:hover { background: #FAD4CF; }

/* KPI */
.edit-form .edit-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.edit-form .edit-kpi {
  background: linear-gradient(135deg, #F0F9FC, #E3F2F8);
  border: 1px solid #D6EAF2; border-radius: 12px; padding: 14px;
}
.edit-form .edit-kpi .kpi-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.edit-form .edit-kpi .kpi-idx { font-size: 12px; font-weight: 700; color: #1E6B8A; }
.edit-form .edit-kpi .kpi-trend-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* 症状 */
.edit-form .edit-symptom-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.edit-form .edit-symptom { background: #fff; border: 1px solid #ECEFF1; border-radius: 12px; padding: 16px; }
.edit-form .edit-symptom .sc-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid #EEF2F5;
}
.edit-form .edit-symptom .sc-head .sc-name { flex: 1; }
.edit-form .edit-symptom .sc-ba {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
}
.edit-form .edit-symptom .sc-arrow { font-size: 20px; color: #B0BEC5; text-align: center; }
.edit-form .edit-symptom .sc-note { margin-top: 10px; }

/* 双栏：未改善 / 新发 */
.edit-form .edit-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.edit-form .edit-info-box { border-radius: 12px; padding: 16px; }
.edit-form .edit-info-box.unresolved {
  background: linear-gradient(135deg, #FFF8F0, #FFF3E0); border-left: 4px solid #E67E22;
}
.edit-form .edit-info-box.new-symptom {
  background: linear-gradient(135deg, #F5F0FF, #EDE7F6); border-left: 4px solid #5C6BC0;
}
.edit-form .edit-info-box h3 {
  font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 6px;
}
.edit-form .edit-info-box.unresolved h3 { color: #B7570A; }
.edit-form .edit-info-box.new-symptom h3 { color: #4527A0; }

/* 分析 */
.edit-form .edit-analysis {
  background: linear-gradient(135deg, #F0F9FC, #E8F4F8);
  border-radius: 12px; padding: 18px;
}
.edit-form .edit-analysis .ab-sub {
  font-size: 12px; font-weight: 700; color: #1E6B8A; margin: 0 0 6px;
}
.edit-form .edit-analysis .ab-box { border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.edit-form .edit-analysis .ab-box.hi { background: rgba(39,174,96,.1); }
.edit-form .edit-analysis .ab-box.warn { background: rgba(231,76,60,.08); }

/* 计划 */
.edit-form .edit-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.edit-form .edit-plan { background: #FAFBFC; border: 1px solid #ECEFF1; border-radius: 12px; padding: 16px; }
.edit-form .edit-plan .pc-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 2px solid #E8F4F8;
}
.edit-form .edit-plan .pc-icon-input { width: 48px; text-align: center; flex: none; }
.edit-form .edit-plan .pc-title { flex: 1; }

/* 教育时间轴 */
.edit-form .edit-edu { display: flex; gap: 0; overflow-x: auto; padding-bottom: 6px; }
.edit-form .edit-edu-week {
  flex: 1; min-width: 200px; background: #F8FBFC; border: 1px solid #E8F4F8;
  border-radius: 12px; padding: 16px; margin-right: 12px; position: relative;
}
.edit-form .edit-edu-week:last-child { margin-right: 0; }
.edit-form .edit-edu-week::before {
  content: ""; position: absolute; top: -6px; left: 24px;
  width: 12px; height: 12px; background: #2BA0A8; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 1px #2BA0A8;
}
.edit-form .edit-edu-week .ew-label {
  font-size: 11px; color: #2BA0A8; font-weight: 600; margin: 6px 0 4px;
}
.edit-form .edit-edu-week .ew-head {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}

/* 页脚卡片 */
.edit-form .edit-footer-card { background: #163D52; border-radius: 12px; padding: 18px 20px; color: #fff; }
.edit-form .edit-footer-card .edit-label { color: #B8C6D2; }

/* 只读预览（分区明细）：隐藏增删按钮，输入框转为只读展示 */
.ro-panel .add-btn, .ro-panel .del-btn { display: none !important; }
.edit-form .ro-val {
  padding: 7px 10px; min-height: 34px; background: #F7F9FB;
  border: 1px solid #ECEFF1; border-radius: 8px; font-size: 13px;
  color: #2C3E50; word-break: break-word;
}
.edit-form .ro-val.ro-multi { white-space: pre-wrap; line-height: 1.6; }
.edit-form .ro-val.ro-empty { color: #95A5A6; }
.edit-form .ro-list { margin: 0; padding: 6px 0 0 18px; }
.edit-form .ro-list li { font-size: 13px; line-height: 1.8; color: #2C3E50; }

@media (max-width: 760px) {
  .edit-form .edit-kpi-grid,
  .edit-form .edit-plan-grid,
  .edit-form .edit-two-col { grid-template-columns: 1fr; }
  .edit-form .edit-grid.four { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 四周依从性：任务完成率自动统计列表 ---- */
.edit-form .comp-overall { display: flex; align-items: baseline; gap: 10px; }
.edit-form .comp-overall .big { font-size: 30px; font-weight: 800; color: #1A3C5E; line-height: 1; }
.edit-form .comp-overall .lbl { font-size: 13px; color: var(--text-secondary, #7F8C8D); }
.edit-form .comp-list { display: flex; flex-direction: column; gap: 8px; }
.edit-form .comp-row-item {
  display: grid; grid-template-columns: 1.2fr 3fr 0.9fr; align-items: center; gap: 10px;
  background: #F7FAFC; border: 1px solid #ECEFF1; border-radius: 10px; padding: 10px 12px;
}
.edit-form .comp-row-item .comp-name { font-size: 13px; font-weight: 700; color: #163D52; }
.edit-form .comp-weeks { display: flex; gap: 6px; flex-wrap: wrap; }
.edit-form .comp-cell { background: #fff; border: 1px solid #E4EAF0; border-radius: 8px; padding: 4px 8px; text-align: center; min-width: 52px; }
.edit-form .comp-cell .comp-wk { display: block; font-size: 11px; color: #7F8C8D; }
.edit-form .comp-cell .comp-pct { display: block; font-size: 14px; font-weight: 700; color: #1E6B8A; }
.edit-form .comp-avg { text-align: right; }
.edit-form .comp-avg .comp-avg-label { display: block; font-size: 11px; color: #7F8C8D; }
.edit-form .comp-avg strong { font-size: 16px; color: #1A3C5E; }
.edit-form .comp-weekly { display: flex; gap: 10px; flex-wrap: wrap; }
.edit-form .comp-weekly-item {
  flex: 1; min-width: 96px; background: #F2F8FB; border: 1px solid #E4EAF0; border-radius: 8px;
  padding: 8px 10px; display: flex; justify-content: space-between; align-items: center;
}
.edit-form .comp-weekly-item span { font-size: 12px; color: #7F8C8D; }
.edit-form .comp-weekly-item strong { font-size: 15px; color: #1E6B8A; }
.edit-form .recompute-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #1E6B8A; background: #EAF4F8;
  color: #1E6B8A; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.edit-form .recompute-btn:hover { background: #D6EAF2; }
.edit-form .recompute-btn:disabled { opacity: .6; cursor: default; }
.edit-form .recompute-hint { font-size: 12px; color: #7F8C8D; }
@media (max-width: 760px) {
  .edit-form .comp-row-item { grid-template-columns: 1fr; }
  .edit-form .comp-avg { text-align: left; }
}