/* DE 仪表盘（设计 §8.2）：网格 + 卡片 + 8 种图形的基础样式。 */
.de-dash { margin-bottom: 14px; }
.de-dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.de-dash-title { font-weight: 700; font-size: 15px; }
.de-dash-scope { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted, #888); }
.de-dash-asof { font-size: 11px; color: var(--text-muted, #888); }
.de-dash-warn { background: #fff7e6; border: 1px solid #ffd591; color: #ad6800;
  border-radius: 8px; padding: 6px 10px; font-size: 12px; margin-bottom: 8px; }

.de-dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.de-dash-card { background: var(--bg-card, #fff); border-radius: 12px; padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); min-height: 96px; }
.de-dash-sm { grid-column: span 1; }
.de-dash-md { grid-column: span 2; }
.de-dash-lg { grid-column: span 3; }
.de-dash-card-title { font-size: 12px; font-weight: 600; color: var(--text-muted, #666);
  display: flex; justify-content: space-between; align-items: center; }
.de-dash-go { font-size: 11px; color: var(--primary, #7c5cff); cursor: pointer; }
.de-dash-value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.de-dash-delta { font-size: 12px; margin-top: 2px; }
.de-dash-delta-good { color: var(--green, #16a34a); }
.de-dash-delta-bad { color: #dc2626; }
.de-dash-delta-flat { color: var(--text-muted, #888); }
.de-dash-empty-hint { font-size: 12px; color: var(--text-muted, #888); padding: 12px 0; }
.de-dash-skeleton { background: linear-gradient(90deg, #f3f3f6 25%, #ececf2 37%, #f3f3f6 63%);
  background-size: 400% 100%; animation: de-dash-shimmer 1.2s ease infinite; }
@keyframes de-dash-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.de-dash-error, .de-dash-empty { font-size: 13px; color: var(--text-muted, #888); padding: 10px 0; }
.de-dash-retry { margin-left: 8px; font-size: 12px; cursor: pointer; }

.de-dash-progress-wrap { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.de-dash-progress-side { flex: 1; min-width: 0; }
.de-dash-target-set { display: flex; gap: 6px; margin-top: 8px; }
.de-dash-target-input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #efeae4; border-radius: 8px; font-size: 13px; }
.de-dash-target-save { border: 0; border-radius: 8px; padding: 6px 10px; background: #7c5cff; color: #fff; font-size: 12px; cursor: pointer; }
.de-dash-progress { position: relative; width: 72px; height: 72px; margin-top: 6px; flex: none; }
.de-dash-progress svg.de-dash-ring { width: 72px !important; height: 72px !important; max-width: 72px !important; display: block; }
.de-dash-ring-bg { fill: none; stroke: #e4ddd4; stroke-width: 6; }
.de-dash-ring-fg { fill: none; stroke: var(--primary, #7c5cff); stroke-width: 6; stroke-linecap: round; }
.de-dash-ring-label { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; }

.de-dash-list { margin-top: 6px; }
.de-dash-row { display: flex; gap: 8px; align-items: center; font-size: 13px;
  padding: 10px 12px; margin-top: 8px; border: 1px solid #efeae4; border-radius: 12px;
  background: #fffcf9; cursor: pointer; }
.de-dash-row-label { flex: 1; font-weight: 700; min-width: 0; }
.de-dash-row-note { color: #8a8178; font-size: 12px; }
.de-dash-row-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.de-dash-row:hover { border-color: #e4d5c8; background: #fff; }

.de-family-board { max-height: 720px; overflow-y: auto; margin-top: 4px;
  display: flex; flex-direction: column; gap: 8px; }
.de-family-summary { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0;
  background: var(--bg-card, #fff); padding: 2px 0 8px; z-index: 1; }
.de-family-count { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.de-family { padding: 12px; border: 1px solid #efeae4; border-radius: 14px; background: #fffcf9; cursor: pointer; }
.de-family:hover { border-color: #e4d5c8; background: #fff; }
.de-family-head { display: flex; align-items: flex-start; gap: 10px; }
.de-family-avatar { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.de-family-avatar img { width: 100%; height: 100%; object-fit: cover; }
.de-family-who { flex: 1; min-width: 0; }
.de-family-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.de-family-meta { margin-top: 2px; font-size: 12px; line-height: 1.4; color: #8a8178; }
.de-family-grade { font-size: 12px; font-weight: 700; white-space: nowrap; padding: 3px 8px; border-radius: 999px; }
.de-family-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.de-family-point { display: flex; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 1.45; color: #3f3a36; }
.de-family-point-who { flex: none; width: 2.5em; font-size: 12px; font-weight: 700; color: #8a8178; }
.de-chip { font-size: 11px; line-height: 1.4; padding: 1px 6px; border-radius: 999px; }
.de-contract-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.de-contract-side { flex: 0 0 2.5em; font-size: 11px; font-weight: 700; color: var(--text-muted, #666); }
.de-family-ok { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0 2px; }
.de-family-ok-label { font-size: 12px; font-weight: 700; }
.de-family-ok-name { font-size: 12px; padding: 2px 8px; border-radius: 8px;
  background: rgba(22,163,74,.08); color: var(--text, #333); cursor: pointer; }
.is-risk { color: #dc2626; background: rgba(220,38,38,.08); }
.is-watch { color: #c2410c; background: rgba(224,138,46,.12); }
.is-gap { color: #57534e; background: #f3f1ee; }
.is-ok { color: #15803d; background: rgba(22,163,74,.08); }
.de-family-ok-label.is-ok { background: transparent; }

.de-dash-heat { margin-top: 6px; }
.de-dash-heat-row { display: flex; gap: 4px; margin-bottom: 4px; }
.de-dash-heat-cell { flex: 1; text-align: center; font-size: 11px; padding: 5px 0;
  border-radius: 4px; background: rgba(124,92,255,.06); }
.de-dash-heat-head { font-weight: 600; color: var(--text-muted, #666); background: transparent; }

.de-dash-note { font-size: 11px; color: var(--text-muted, #888); margin-top: 2px; }.de-dash-note-warn { color: var(--orange, #e08a2e); }

.de-dash-timeline { margin-top: 6px; }
.de-dash-timeline-bar { display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; background: rgba(124,92,255,.05); }
.de-dash-timeline-bar:hover { background: rgba(124,92,255,.09); }
.de-dash-timeline-sum { flex: 1; font-size: 12px; color: var(--text, #333); }
.de-dash-timeline-note { font-size: 11px; color: var(--text-muted, #888); }
.de-dash-event { display: flex; gap: 8px; font-size: 12px; padding: 3px 0; }
.de-dash-event-time { width: 44px; color: var(--text-muted, #888); }
.de-dash-event-title { flex: 1; }
.de-dash-event-note { color: var(--text-muted, #888); font-size: 11px; margin-left: 4px; }
.de-dash-event-status { color: var(--primary, #7c5cff); white-space: nowrap; }

/* 手机端（真人反馈：护士 DE 仪表盘在手机上要横着滑，很不友好）
   三件事一起做，才能真的不横滑：
   ① 网格塌成单列，并**取消跨列**（sm/md/lg 都占 1 列）
   ② 任何子元素不许超过卡片宽度（图表 canvas、热力矩阵、长标题、长数字）
   ③ 页面级防溢出：卡片内换行而不是把整页撑宽 */
.de-dash, .de-dash-grid, .de-dash-card { max-width: 100%; box-sizing: border-box; }
.de-dash-card, .de-dash-value, .de-dash-event-title, .de-dash-timeline-sum {
  overflow-wrap: anywhere; word-break: break-word;
}
.de-dash-card canvas, .de-dash-card svg, .de-dash-card img { max-width: 100% !important; height: auto; }

@media (max-width: 900px) {
  .de-dash { overflow-x: hidden; }
  .de-dash-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .de-dash-sm, .de-dash-md, .de-dash-lg { grid-column: span 1 !important; }
  .de-dash-value { font-size: 22px; }
  .de-dash-head { flex-wrap: wrap; gap: 4px; }
  /* 热力矩阵：窄屏下允许自己横向滚动，而不是把整页撑宽 */
  .de-dash-heat { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .de-dash-heat-cell { min-width: 34px; font-size: 10px; }
  .de-dash-timeline-bar { flex-wrap: wrap; }
  .de-dash-event { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .de-dash-card { padding: 10px; }
  .de-dash-value { font-size: 20px; }
  .de-dash-card-title { font-size: 11px; }
}

.de-situation-mask { position: fixed; inset: 0; z-index: 4000; background: rgba(28, 25, 23, .45);
  display: flex; align-items: flex-end; justify-content: center; }
body.de-situation-open .de-fab { display: none !important; }
.de-situation { width: min(560px, 100%); max-height: calc(100dvh - 8px); overflow: auto; background: var(--bg-card, #fff);
  border-radius: 16px 16px 0 0; padding: 16px 16px calc(48px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0,0,0,.12); }
.de-family-staff { display: flex; align-items: center; gap: 6px; }
.de-nanny-face { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.de-situation-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.de-situation-name { font-size: 18px; font-weight: 700; }
.de-situation-grade { margin-top: 4px; font-size: 13px; font-weight: 700; }
.de-situation-close { border: 0; background: #f3f1ee; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.de-situation-links { display: flex; gap: 8px; margin-top: 12px; }
.de-situation-links button, .de-situation-back {
  border: 1px solid var(--border, #e6e1db); background: #fff; border-radius: 999px;
  padding: 6px 14px; cursor: pointer; font-size: 13px; }
.de-situation-back { margin: 12px 0 4px; }
.de-situation-gap { margin: 12px 0 4px; padding: 8px 10px; background: #fff6e8; border-radius: 8px;
  font-size: 13px; line-height: 1.6; }
.de-situation-lead { font-size: 12px; color: var(--text-muted, #666); margin: 8px 0 12px; }
.de-situation-person { padding: 8px 0; border-top: 1px solid var(--border, #eee); }
.de-situation-person-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 6px; }
.de-situation-ind { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 8px 0; font-size: 13px; border-bottom: 1px solid #f3f1ee; }
.de-situation-ind-name { font-weight: 700; }
.de-situation-reading { font-variant-numeric: tabular-nums; color: var(--text, #333); }
.de-situation-change { flex: 1 1 100%; font-weight: 650; }
.de-trend { flex: 1 1 100%; margin-top: 4px; position: relative; }
.de-trend-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: #2a2623; color: #fff; border-radius: 8px; padding: 6px 10px;
  font-size: 12px; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(28, 25, 23, .28);
}
.de-trend-tip span { display: block; color: rgba(255,255,255,.72); }
.de-trend-tip strong { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.de-trend-tip.is-mid { transform: translate(-50%, calc(-100% - 10px)); }
.de-trend-tip.is-start { transform: translate(0, calc(-100% - 10px)); }
.de-trend-tip.is-end { transform: translate(-100%, calc(-100% - 10px)); }
.de-trend-tip.is-below.is-mid { transform: translate(-50%, 12px); }
.de-trend-tip.is-below.is-start { transform: translate(0, 12px); }
.de-trend-tip.is-below.is-end { transform: translate(-100%, 12px); }
.de-trend-svg { width: 100%; height: auto; display: block; }
.de-trend-grid { stroke: #efeae4; stroke-width: 1; }
.de-trend-birth { stroke: #c4b8a8; stroke-width: 1; stroke-dasharray: 3 3; }
.de-trend-area { fill: rgba(196, 92, 38, .12); stroke: none; }
.de-trend-line { fill: none; stroke: #c45c26; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.de-trend-dot { fill: #fff; stroke: #c45c26; stroke-width: 2; }
.de-trend-dot.is-on { fill: #c45c26; }
.de-trend-hit { fill: transparent; cursor: pointer; }
.de-trend-ylabel, .de-trend-xlabel { font-size: 11px; fill: #8a8178; }
.de-trend-ylabel { text-anchor: end; }
.de-trend-now { margin-top: 2px; font-size: 12px; color: #5c564f; font-variant-numeric: tabular-nums; }
.de-trend-notes { flex: 1 1 100%; display: grid; gap: 4px; margin-top: 4px; }
.de-trend-note { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 12px; line-height: 1.45; color: #3f3a36; }
.de-trend-note span:first-child { color: #8a8178; }
.de-trend-more { font-size: 11px; color: #8a8178; }
.de-situation-detail { flex: 1 1 100%; color: var(--text-muted, #555); font-size: 12px; }
.de-situation-entry { flex: 1 1 100%; font-size: 12px; line-height: 1.5; color: #6b4e16; }
.de-situation-advice { flex: 1 1 100%; font-size: 12px; line-height: 1.5; background: #f7f3ee; border-radius: 8px; padding: 6px 8px; }
.de-situation-plan { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff7f2; border: 1px solid #f0d7c8; }
.de-situation-plan-who { margin: 4px 0 8px; font-size: 12px; line-height: 1.5; color: #6b5346; }
.de-situation-plan-step { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.de-situation-go { margin-top: 4px; padding: 7px 14px; border: none; border-radius: 8px; background: #c45c26; color: #fff; font-weight: 700; cursor: pointer; }
.de-situation-go:disabled { opacity: 0.6; cursor: default; }
.de-situation-empty { font-size: 13px; color: var(--text, #444); padding: 8px 0; line-height: 1.6; }
.de-situation-fold { margin-top: 8px; border-top: 1px solid var(--border, #eee); padding-top: 8px; }
.de-situation-fold summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.de-situation-facts { display: grid; gap: 6px; margin: 8px 0 0; }
.de-situation-facts div { display: flex; gap: 10px; font-size: 13px; }
.de-situation-facts dt { width: 3em; color: var(--text-muted, #666); }
.de-situation-facts dd { margin: 0; }
.de-situation-photo { max-width: 100%; max-height: 60vh; border-radius: 8px; margin-top: 8px; }
.de-situation-analysis { white-space: pre-wrap; font-size: 13px; line-height: 1.6; margin-top: 8px; }
@media (min-width: 720px) {
  .de-situation-mask { align-items: center; }
  .de-situation { border-radius: 16px; max-height: 80vh; }
}