:root {
  color-scheme: light;
  --surface: #F7F7F8;
  --surface-muted: #EFEFF2;
  --text: #171717;
  --text-muted: #52525B;
  --border: rgba(23, 23, 23, 0.12);
  --brand: #0FDC78;
  --brand-soft: #E5FFF2;
  --brand-text: #004D26;
  --brand-on: #004D26;
  --chart-series-1: #02743B;
  --chart-series-4: #80C1FF;
  --accent: #27D2BF;
  --accent-soft: #EAFBF8;
  --accent-text: #0F766E;
  --success: #1DC981;
  --warning: #EFAA17;
  --danger: #E8463A;
  --radius: 8px;
  --radius-card: 12px;
  --radius-full: 999px;
  --spacer-4: 4px;
  --spacer-8: 8px;
  --spacer-12: 12px;
  --spacer-16: 16px;
  --spacer-20: 20px;
  --spacer-24: 24px;
  --font-sans: "SF Pro Text", "PingFang SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-metric: "Inter", "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --text-caption: 12px/18px;
  --text-body: 14px/20px;
  --text-title: 16px/24px;
  --text-code: 13px/20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-widget-theme]) {
    color-scheme: dark;
    --surface: #171717;
    --surface-muted: #262626;
    --text: #E5E5E5;
    --text-muted: #A1A1AA;
    --border: rgba(229, 229, 229, 0.12);
    --brand: #32F08C;
    --brand-soft: #004D26;
    --brand-text: #E5FFF2;
    --brand-on: #004D26;
    --chart-series-1: #32F08C;
    --chart-series-4: #64B4FF;
    --accent-soft: #123F3C;
    --accent-text: #CCFBF1;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface-muted);
  color: var(--text);
  font: var(--weight-regular) var(--text-body) var(--font-sans);
  min-height: 100vh;
}

/* 顶栏 */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--spacer-16); flex-wrap: wrap;
  padding: var(--spacer-16) var(--spacer-24);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: var(--spacer-12); }
.topbar-left .logo { font-size: 28px; line-height: 1; }
.topbar h1 { margin: 0; font: var(--weight-medium) var(--text-title) var(--font-sans); }
.topbar .meta, .topbar p { margin: 0; color: var(--text-muted); font: var(--weight-regular) var(--text-caption) var(--font-sans); }
.topbar-right { display: flex; align-items: center; gap: var(--spacer-8); flex-wrap: wrap; }

.btn {
  padding: var(--spacer-4) var(--spacer-12);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: var(--weight-medium) var(--text-caption) var(--font-sans);
  cursor: pointer;
}
.btn:hover { border-color: var(--brand); }
.btn-brand { background: var(--brand); color: var(--brand-on); border-color: var(--brand); }
.btn-ghost { background: transparent; }

/* 主网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacer-16);
  padding: var(--spacer-16) var(--spacer-24);
  max-width: 1400px;
  margin: 0 auto;
}
.grid .full { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .topbar { padding: var(--spacer-12); }
  .grid { padding: var(--spacer-12); }
}

/* 卡片 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--spacer-16);
  display: flex; flex-direction: column; gap: var(--spacer-12);
}
.card.alert { border: 2px solid var(--danger); }
.card.plan { border: 2px solid var(--warning); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacer-8); }
.card-head h2 { margin: 0; font: var(--weight-medium) var(--text-title) var(--font-sans); display: flex; align-items: center; gap: var(--spacer-8); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); }
.dot.danger { background: var(--danger); }
.dot.warning { background: var(--warning); }
.dot.success { background: var(--success); }
.dot.brand { background: var(--brand); }

.badge {
  font: var(--weight-medium) var(--text-caption) var(--font-sans);
  padding: var(--spacer-4) var(--spacer-8);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--text-muted);
}
.badge.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.badge.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.badge.brand { color: var(--brand-text); background: var(--brand-soft); }
.badge.success { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }

.meta { font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text-muted); margin: 0; }

/* 即时提醒 */
.alerts { list-style: none; margin: 0; padding: 0; }
.alerts li {
  font: var(--weight-regular) var(--text-body) var(--font-sans);
  padding: var(--spacer-8) 0;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: var(--spacer-8);
}
.alerts li:last-child { border-bottom: none; }
.alerts .lvl { flex-shrink: 0; padding: var(--spacer-4) var(--spacer-8); border-radius: var(--radius-full); font: var(--weight-medium) var(--text-caption) var(--font-sans); }
.alerts .lvl.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.alerts .lvl.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.alerts .lvl.info { color: var(--accent-text); background: var(--accent-soft); }

/* 到期分级 */
.expiry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacer-8); }
.expiry-cell { padding: var(--spacer-8) var(--spacer-12); background: var(--surface-muted); border-radius: var(--radius); border-top: 3px solid var(--border); }
.expiry-cell.r { border-top-color: var(--danger); }
.expiry-cell.o { border-top-color: var(--warning); }
.expiry-cell.y { border-top-color: var(--accent); }
.expiry-cell.b { border-top-color: var(--chart-series-4); }
.expiry-cell .label { font: var(--weight-medium) var(--text-caption) var(--font-sans); color: var(--text-muted); margin-bottom: var(--spacer-4); }
.expiry-cell .count { font: var(--weight-strong) var(--text-title) var(--font-metric); color: var(--text); }
.expiry-cell .items { margin-top: var(--spacer-4); font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text-muted); }
.expiry-cell .items div { padding: var(--spacer-2, 2px) 0; }

.upload { margin-top: var(--spacer-8); border-top: 1px solid var(--border); padding-top: var(--spacer-8); }
.upload summary { cursor: pointer; color: var(--text-muted); font: var(--weight-medium) var(--text-caption) var(--font-sans); }
.upload textarea { width: 100%; min-height: 80px; margin-top: var(--spacer-8); padding: var(--spacer-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); color: var(--text); font: var(--weight-regular) var(--text-code) var(--font-mono); }

/* 任务清单 */
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li {
  display: flex; align-items: flex-start; gap: var(--spacer-8);
  padding: var(--spacer-8) 0; border-bottom: 1px solid var(--border);
}
.tasks li:last-child { border-bottom: none; }
.tasks input[type="checkbox"] { margin-top: var(--spacer-4); accent-color: var(--brand); flex-shrink: 0; width: 16px; height: 16px; }
.tasks .summary { font: var(--weight-regular) var(--text-body) var(--font-sans); color: var(--text); }
.tasks .meta { font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text-muted); margin-top: var(--spacer-4); }
.tasks .del { margin-left: auto; background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: 14px; opacity: .6; }
.tasks .del:hover { opacity: 1; }
.tasks .done .summary { text-decoration: line-through; color: var(--text-muted); }

.task-add { display: flex; gap: var(--spacer-8); margin-top: var(--spacer-8); border-top: 1px solid var(--border); padding-top: var(--spacer-8); }
.task-add input[type="text"] { flex: 1; padding: var(--spacer-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); color: var(--text); font: var(--weight-regular) var(--text-body) var(--font-sans); }
.task-add select { padding: var(--spacer-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); color: var(--text); }

/* 任务建议 */
.advice .group { margin-bottom: var(--spacer-8); }
.advice .group-head { font: var(--weight-medium) var(--text-caption) var(--font-sans); color: var(--brand-text); margin-bottom: var(--spacer-4); }
.advice .group-tip { font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text); margin: 0; }

/* 交接 */
.handover-flow { display: flex; align-items: center; gap: var(--spacer-8); flex-wrap: wrap; font: var(--weight-regular) var(--text-caption) var(--font-sans); }
.flow-node { padding: var(--spacer-4) var(--spacer-8); background: var(--surface-muted); border-radius: var(--radius); color: var(--text); }
.flow-node.current { border: 1px solid var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.flow-arrow { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); margin: var(--spacer-4) 0; }
.editable-block { display: flex; flex-direction: column; gap: var(--spacer-4); margin-bottom: var(--spacer-8); }
.editable-block label { font: var(--weight-medium) var(--text-caption) var(--font-sans); color: var(--text-muted); }
.editable-block input, .editable-block textarea { padding: var(--spacer-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); color: var(--text); font: var(--weight-regular) var(--text-body) var(--font-sans); resize: vertical; }
.editable-block textarea { min-height: 50px; }

/* 案例 */
.cases .case { padding: var(--spacer-12); background: var(--surface-muted); border-radius: var(--radius); border-left: 3px solid var(--danger); }
.cases .case + .case { margin-top: var(--spacer-8); }
.cases .case.warning { border-left-color: var(--warning); }
.cases .case.info { border-left-color: var(--chart-series-4); }
.cases .case-title { font: var(--weight-medium) var(--text-body) var(--font-sans); color: var(--text); margin: 0 0 var(--spacer-4) 0; }
.cases .case-meta { font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text-muted); margin: 0 0 var(--spacer-4) 0; }
.cases .case-lesson { font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text); margin: 0; }
.cases .case-lesson strong { color: var(--danger); }
.cases .case.warning .case-lesson strong { color: var(--warning); }
.cases .case.info .case-lesson strong { color: var(--chart-series-4); }
.cases a { color: var(--accent-text); text-decoration: none; font: var(--weight-regular) var(--text-caption) var(--font-sans); }
.cases a:hover { text-decoration: underline; }

/* 效率看板 */
.bars { display: flex; flex-direction: column; gap: var(--spacer-8); }
.bar-row { display: grid; grid-template-columns: 88px 1fr 36px; align-items: center; gap: var(--spacer-8); }
.bar-label { font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text-muted); }
.bar-track { height: 8px; background: var(--surface-muted); border-radius: var(--radius-full); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--chart-series-1); }
.bar-value { font: var(--weight-medium) var(--text-code) var(--font-mono); color: var(--text); text-align: right; }

/* 健康 */
.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacer-8); }
.health-grid .tip { display: flex; gap: var(--spacer-8); align-items: center; font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text); }
.health-grid .icon { color: var(--brand); }
.notice { padding: var(--spacer-8) var(--spacer-12); background: var(--surface-muted); border-radius: var(--radius); font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text); }
.notice strong { color: var(--brand-text); }

/* 计划建议 */
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacer-12); }
.bullet { list-style: disc inside; margin: 0; padding-left: var(--spacer-12); font: var(--weight-regular) var(--text-caption) var(--font-sans); color: var(--text); line-height: 1.7; }
.bullet li { margin-bottom: var(--spacer-4); }

/* 底部 */
.footer {
  display: flex; justify-content: space-between; gap: var(--spacer-12);
  padding: var(--spacer-12) var(--spacer-24);
  border-top: 1px solid var(--border);
  background: var(--surface);
  font: var(--weight-regular) var(--text-caption) var(--font-sans);
  color: var(--text-muted);
}
@media (max-width: 720px) { .footer { flex-direction: column; padding: var(--spacer-12); } }