/* V169 · 实时经营脉络：安静、清晰、可读的经营遥测台。 */

.dashboard-pulse-v169 {
  --pulse-surface: color-mix(in srgb, var(--panel, #fff) 96%, #f4f7fb);
  --pulse-soft: color-mix(in srgb, var(--panel-soft, #eef2f6) 72%, var(--panel, #fff));
  --pulse-chart: color-mix(in srgb, var(--panel-soft, #eef2f6) 50%, var(--panel, #fff));
  --pulse-ink: var(--ink, #17233a);
  --pulse-muted: var(--muted, #66758d);
  --pulse-line: var(--line, #d9e2ef);
  --pulse-line-strong: var(--line-strong, #c5d0df);
  --pulse-indigo: #5e6ad2;
  --pulse-teal: #169b8e;
  --pulse-amber: #c97d18;
  --pulse-red: #d95368;
  overflow: hidden;
  border: 1px solid var(--pulse-line);
  border-radius: 20px;
  background: var(--pulse-surface);
  color: var(--pulse-ink);
  box-shadow: 0 12px 34px rgba(39, 55, 78, .07);
}

.dashboard-pulse-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 26px 20px;
}

.dashboard-pulse-title > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--pulse-teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

.dashboard-pulse-title > span i,
.dashboard-pulse-meta > span i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.dashboard-pulse-title h2 {
  margin: 0;
  color: var(--pulse-ink);
  font-size: clamp(22px, 1.45vw, 27px);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.dashboard-pulse-title p {
  margin: 8px 0 0;
  color: var(--pulse-muted);
  font-size: 14px;
  line-height: 1.6;
}

.dashboard-pulse-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 48%;
  color: var(--pulse-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dashboard-pulse-meta > span,
.dashboard-pulse-meta > b,
.dashboard-pulse-meta > time {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--pulse-line);
  border-radius: 999px;
  background: var(--pulse-soft);
}

.dashboard-pulse-meta > span {
  gap: 8px;
  color: var(--pulse-teal);
  font-weight: 750;
}

.dashboard-pulse-meta > b {
  max-width: 220px;
  overflow: hidden;
  color: var(--pulse-ink);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-pulse-stages {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--stage-count, 5), minmax(0, 1fr));
  gap: 10px;
  padding: 0 26px 22px;
}

.dashboard-pulse-stages::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 26px;
  right: 9%;
  left: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pulse-line-strong) 8%, var(--pulse-line-strong) 92%, transparent);
}

.dashboard-pulse-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 112px;
  padding: 15px 14px;
  border: 1px solid var(--pulse-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--pulse-surface) 84%, var(--pulse-soft));
  color: var(--pulse-ink);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.dashboard-pulse-stage::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 14px 0 0 14px;
  background: var(--pulse-line-strong);
}

.dashboard-pulse-stage.is-live::after { background: var(--pulse-teal); }
.dashboard-pulse-stage.is-attention::after { background: var(--pulse-amber); }
.dashboard-pulse-stage.is-risk::after { background: var(--pulse-red); }

.dashboard-pulse-stage:hover,
.dashboard-pulse-stage:focus-visible {
  border-color: color-mix(in srgb, var(--pulse-indigo) 48%, var(--pulse-line));
  background: var(--pulse-surface);
  box-shadow: 0 8px 18px rgba(39, 55, 78, .08);
  outline: none;
}

.dashboard-pulse-step {
  display: inline-grid;
  place-items: center;
  gap: 5px;
  width: 32px;
  color: var(--pulse-muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dashboard-pulse-step i {
  width: 9px;
  height: 9px;
  border: 2px solid var(--pulse-surface);
  border-radius: 999px;
  background: var(--pulse-line-strong);
  box-shadow: 0 0 0 1px var(--pulse-line-strong);
}

.dashboard-pulse-stage.is-live .dashboard-pulse-step i { background: var(--pulse-teal); box-shadow: 0 0 0 1px var(--pulse-teal); }
.dashboard-pulse-stage.is-attention .dashboard-pulse-step i { background: var(--pulse-amber); box-shadow: 0 0 0 1px var(--pulse-amber); }
.dashboard-pulse-stage.is-risk .dashboard-pulse-step i { background: var(--pulse-red); box-shadow: 0 0 0 1px var(--pulse-red); }

.dashboard-pulse-stage small {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  color: var(--pulse-muted);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-pulse-stage strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
}

.dashboard-pulse-stage strong b {
  overflow: hidden;
  font-size: clamp(23px, 1.55vw, 29px);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-pulse-stage strong em {
  color: var(--pulse-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.dashboard-pulse-stage p {
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--pulse-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-pulse-stage.is-risk p { color: var(--pulse-red); font-weight: 700; }
.dashboard-pulse-stage.is-attention p { color: var(--pulse-amber); font-weight: 700; }

.dashboard-pulse-arrow {
  color: var(--pulse-line-strong);
  font-size: 17px;
}

.dashboard-pulse-trend {
  border-top: 1px solid var(--pulse-line);
  background: var(--pulse-chart);
}

.dashboard-pulse-trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 26px 8px;
}

.dashboard-pulse-trend-head h3 {
  margin: 0;
  color: var(--pulse-ink);
  font-size: 18px;
  line-height: 1.3;
}

.dashboard-pulse-trend-head p {
  margin: 5px 0 0;
  color: var(--pulse-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dashboard-pulse-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 30px;
  color: var(--pulse-muted);
  font-size: 13px;
}

.dashboard-pulse-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dashboard-pulse-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.dashboard-pulse-legend .revenue i { background: var(--pulse-indigo); }
.dashboard-pulse-legend .orders i { border-radius: 999px; background: var(--pulse-teal); }

.dashboard-pulse-chart-shell {
  position: relative;
  overflow-x: auto;
  min-height: 300px;
  padding: 0 14px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--pulse-line-strong) transparent;
}

.dashboard-pulse-chart {
  display: block;
  width: 100%;
  min-width: 820px;
  height: auto;
  min-height: 285px;
  overflow: visible;
}

.dashboard-pulse-chart text {
  fill: var(--pulse-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dashboard-pulse-grid {
  stroke: color-mix(in srgb, var(--pulse-line) 84%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
}

.dashboard-pulse-bar {
  fill: url(#dashboardPulseRevenueGradient);
  opacity: .82;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: dashboard-pulse-bar-in .5s cubic-bezier(.2, .75, .25, 1) both;
}

.dashboard-pulse-area { fill: url(#dashboardPulseOrderAreaGradient); }

.dashboard-pulse-line {
  fill: none;
  stroke: var(--pulse-teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dashboard-pulse-line-in .7s .08s ease-out forwards;
}

.dashboard-pulse-point {
  fill: var(--pulse-surface);
  stroke: var(--pulse-teal);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.dashboard-pulse-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 300px;
  padding: 34px 20px 42px;
  color: var(--pulse-muted);
  text-align: center;
  background-image: repeating-linear-gradient(0deg, transparent 0 61px, color-mix(in srgb, var(--pulse-line) 44%, transparent) 62px);
}

.dashboard-pulse-empty-mark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
  margin-bottom: 15px;
}

.dashboard-pulse-empty-mark i {
  display: block;
  width: 9px;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--pulse-indigo) 38%, var(--pulse-line));
}

.dashboard-pulse-empty-mark i:nth-child(1) { height: 16px; }
.dashboard-pulse-empty-mark i:nth-child(2) { height: 31px; }
.dashboard-pulse-empty-mark i:nth-child(3) { height: 23px; }

.dashboard-pulse-empty strong { color: var(--pulse-ink); font-size: 18px; }
.dashboard-pulse-empty p { margin: 7px 0 16px; font-size: 13px; }
.dashboard-pulse-empty > div:last-child { display: flex; gap: 9px; }
.dashboard-pulse-empty button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--pulse-line-strong);
  border-radius: 9px;
  background: var(--pulse-surface);
  color: var(--pulse-ink);
  font-weight: 700;
  cursor: pointer;
}
.dashboard-pulse-empty button:first-child { border-color: var(--pulse-indigo); background: var(--pulse-indigo); color: #fff; }

html[data-local-theme="night"] .dashboard-pulse-v169 {
  --pulse-surface: #182235;
  --pulse-soft: #202c40;
  --pulse-chart: #151f31;
  --pulse-ink: #edf3fb;
  --pulse-muted: #a9b7c8;
  --pulse-line: #314056;
  --pulse-line-strong: #455772;
  --pulse-indigo: #8b9bef;
  --pulse-teal: #45c7b7;
  --pulse-amber: #e5a54d;
  --pulse-red: #ef7587;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

@keyframes dashboard-pulse-bar-in {
  from { opacity: 0; transform: scaleY(.04); }
  to { opacity: .82; transform: scaleY(1); }
}

@keyframes dashboard-pulse-line-in {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 1180px) {
  .dashboard-pulse-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-pulse-stages::before { display: none; }
}

@media (max-width: 760px) {
  .dashboard-pulse-head,
  .dashboard-pulse-trend-head { flex-direction: column; }
  .dashboard-pulse-head { padding: 20px 18px 17px; }
  .dashboard-pulse-meta { justify-content: flex-start; max-width: none; }
  .dashboard-pulse-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 18px 18px; }
  .dashboard-pulse-stage { min-height: 106px; padding: 13px 11px; }
  .dashboard-pulse-trend-head { padding: 18px 18px 8px; }
  .dashboard-pulse-chart-shell { padding-inline: 6px; }
  .dashboard-pulse-chart { min-width: 760px; }
}

@media (max-width: 480px) {
  .dashboard-pulse-stages { grid-template-columns: 1fr; }
  .dashboard-pulse-title p { font-size: 13px; }
  .dashboard-pulse-meta > b { max-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-pulse-stage { transition: none; }
  .dashboard-pulse-bar,
  .dashboard-pulse-line { animation: none; stroke-dashoffset: 0; }
}