/* 工作台布局仅影响商家端工作台，颜色沿用现有日夜主题。 */
#content.dashboard-page {
  --dashboard-gap: 16px;
  --dashboard-row-gap: 12px;
  padding-block: 16px 32px;
  --dashboard-inset: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--dashboard-row-gap) var(--dashboard-gap);
}

#content.dashboard-page > .page-head,
#content.dashboard-page > .brand-tabs,
#content.dashboard-page > .metric-grid {
  grid-column: 1 / -1;
}

#content.dashboard-page > .page-head {
  align-items: center;
  margin: 0;
}

#content.dashboard-page .page-head .tabs {
  padding: 4px;
  border: 0;
  border-radius: 7px;
  background: var(--surface);
  gap: 2px;
}

#content.dashboard-page .page-head .tab {
  padding: 6px 13px;
}

#content.dashboard-page .brand-tabs {
  flex-wrap: wrap;
  gap: 8px;
}

#content.dashboard-page .brand-chip {
  min-height: 34px;
  padding: 6px 16px;
  border: 0;
}

#content.dashboard-page .metric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

#content.dashboard-page .metric {
  min-width: 0;
  min-height: 112px;
  padding: 12px var(--dashboard-inset);
  background: rgba(20, 20, 25, .82);
}

html[data-theme="light"] #content.dashboard-page .metric {
  background: rgba(255, 255, 255, .74);
}

#content.dashboard-page .metric-top {
  min-width: 0;
  gap: 10px;
  font-size: 13px;
}

#content.dashboard-page .metric-icon {
  flex: 0 0 34px;
}

#content.dashboard-page .metric-icon svg {
  width: 18px;
  height: 18px;
}

#content.dashboard-page .metric strong {
  margin: 8px 0 4px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

#content.dashboard-page .metric small {
  font-size: 12px;
}

#content.dashboard-page .panel {
  min-width: 0;
  margin: 0;
  padding: 16px var(--dashboard-inset);
}

#content.dashboard-page .metric,
#content.dashboard-page .panel {
  border: 0;
  box-shadow: 0 1px 4px rgba(20, 28, 44, .05);
}

#content.dashboard-page .panel-head {
  min-height: 32px;
  margin-bottom: 8px;
}

#content.dashboard-page .panel-head h2 {
  font-size: 16px;
  line-height: 1.4;
}

#content.dashboard-page .data-table th,
#content.dashboard-page .data-table td {
  padding: 10px 16px;
  font-variant-numeric: tabular-nums;
}

#content.dashboard-page .data-table tbody tr:last-child td {
  border-bottom: 0;
}

#content.dashboard-page .ledger-amount {
  text-align: left;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ledger-amount:hover .metric-top,
.ledger-amount[aria-expanded="true"] .metric-top {
  color: var(--accent);
}

.ledger-amount .metric-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.ledger-amount small b {font-weight:500}
#ledger-reconciliation {grid-column:1/-1}
.ledger-period-head,.service-values {display:flex;align-items:center;justify-content:space-between;gap:12px}
.service-values {justify-content:flex-end;flex-wrap:wrap}
#ledger-reconciliation dl {display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;margin:14px 0 0}
#ledger-reconciliation dt {font-size:12px;color:var(--muted)}
#ledger-reconciliation dd {margin:6px 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

#content.dashboard-page > .dashboard-grid {
  grid-column: 1 / -1;
  align-self: stretch;
  display: grid;
  gap: var(--dashboard-row-gap) var(--dashboard-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

#content.dashboard-page .dashboard-grid > .panel { align-self: stretch; min-width: 0; }
#content.dashboard-page .dashboard-releases {
  background: var(--surface);
  box-shadow: none;
}
.binding-row,.binding-provider,.binding-actions,.binding-dialog header,.binding-dialog footer {display:flex;align-items:center}
.binding-row {justify-content:space-between;gap:12px;min-height:45px;border-top:1px solid var(--line)}
.binding-row:first-child {border:0}
.binding-provider,.binding-actions {gap:10px}
.binding-actions {justify-content:flex-end;flex-wrap:wrap;color:var(--muted);font-size:13px}
.binding-icon {display:grid;place-items:center;width:25px;height:25px}
.binding-icon svg {width:22px;height:22px}
.binding-icon.wechat {color:#169a58}
.binding-icon.ding,.binding-icon.email {color:var(--accent)}
.binding-dialog {width:min(390px,calc(100% - 32px));padding:22px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
.binding-dialog::backdrop {background:#141b2988}
.binding-dialog header {justify-content:space-between}.binding-dialog h2 {margin:0;font-size:17px}
.binding-dialog header button {font-size:24px}.binding-dialog label {display:grid;gap:8px;margin:16px 0}
.binding-dialog footer {justify-content:flex-end;gap:10px}.binding-feedback {color:var(--muted);font-size:13px}
.release-entry { padding-block: 12px; }
.release-entry + .release-entry { border-top: 1px solid var(--line); }
.release-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
}
.release-version { color: var(--accent); font-size: 13px; font-weight: 600; }
.release-heading h3 { margin: 0; font-size: 14px; line-height: 1.5; }
.release-heading time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.release-changes {
  margin: 10px 0 0;
  padding-inline-start: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.release-changes li + li { margin-top: 6px; }
.release-changes li::marker { color: var(--accent); font-size: .8em; }
.release-archive { max-width: 900px; }
.trend-panel { position:relative; grid-column:1/-1; }
.trend-panel .panel-head,.tr-controls,.tr-choices,.tr-modes,.tr-legend,.tr-legend button,.tr-legend span,.tr-ops-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tr-controls { justify-content:space-between; margin-bottom:8px; min-height:30px; }
.tr-controls small,.tr-axis,.tr-labels { color:var(--muted); font-size:11px; }
.tr-modes { gap:2px; padding:3px; background:var(--surface-hover); border-radius:6px; }
.tr-modes button,.tr-legend button { border:0; border-radius:4px; color:var(--muted); background:transparent; padding:4px 9px; font-size:12px; }
.tr-modes button[aria-pressed="true"],.tr-legend button[aria-pressed="true"] { background:var(--surface); color:var(--accent); box-shadow:0 0 0 1px var(--line); }
.tr-picker summary { font-size:12px; }
.tr-picker { position:relative; }
.tr-picker summary { cursor:pointer; padding:6px 8px; border:1px solid var(--line); border-radius:5px; }
.tr-options { z-index:8; position:absolute; right:0; top:100%; min-width:195px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:10px; box-shadow:0 4px 14px #0002; }
.tr-options input[type=search] { width:100%; }
.tr-brands { max-height:180px; overflow:auto; }
.tr-brands label,.trend-business label { display:flex;align-items:center;gap:7px; }
.tr-brands label { padding:5px 0; }
.tr-brands label[hidden] { display:none; }
.tr-options small { display:block; padding:6px 0; }
.tr-options small[hidden] { display:none; }
.tr-canvas { position:relative; }
.tr-scroll { overflow-x:auto; }
.tr-chart { display:grid; grid-template-columns:46px minmax(0,1fr); min-width:420px; gap:4px; }
.tr-axis { display:flex; flex-direction:column; justify-content:space-between; text-align:right; padding-right:4px; }
.tr-plot { position:relative; height:172px; margin:2px 0; background:linear-gradient(var(--line),var(--line)) top/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) bottom/100% 1px no-repeat; }
.tr-plot svg,.tr-slots { position:absolute; inset:0; width:100%; height:100%; }
.tr-plot svg {overflow:visible;pointer-events:none}
.tr-plot path { fill:none; stroke-width:2.3; stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke; }
.tr-slots,.tr-labels {display:grid;grid-template-columns:repeat(var(--slots),minmax(0,1fr));}
.tr-slots button { border:0; min-width:0; padding:0; background:transparent; }
.tr-slots button:hover,.tr-slots button:focus-visible { background:color-mix(in srgb,var(--accent) 9%,transparent); }
.tr-labels {grid-column:2;text-align:center;white-space:nowrap}
.tr-legend { justify-content:center; gap:12px; min-height:30px; margin-top:8px; }
.tr-legend span,.tr-legend button {color:var(--muted);font-size:12px}
.tr-legend i,.tr-tip i {display:inline-block;width:15px;height:3px;border-radius:2px;background:var(--series)}
.tr-tip {position:absolute;top:8px;pointer-events:none;z-index:3;background:var(--surface);color:var(--ink);padding:9px 12px;box-shadow:0 3px 14px #0002;border:1px solid var(--line);border-radius:6px;font-size:12px;}
.tr-limit { font-size:12px; color:var(--muted); margin-bottom:6px; }
.tr-tip table { margin-top:5px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.tr-tip th,.tr-tip td { padding:2px 5px; text-align:right; }
.tr-tip th:first-child { text-align:left; padding-left:0; }
.tr-tip th { font-weight:500; }
.tr-tip div {display:flex;align-items:center;gap:6px;margin-top:4px}.tr-tip b {margin-left:auto;padding-left:10px;font-variant-numeric:tabular-nums;}
.trend-business th button {background:transparent;color:inherit;border:0;padding:0;font:inherit;}
.trend-business th[aria-sort="ascending"] button,.trend-business th[aria-sort="descending"] button {color:var(--accent);}
.trend-business tfoot {font-weight:600;}
.tr-ops-actions button:disabled {color:var(--muted);opacity:.65;cursor:default;}

.dashboard-releases .release-entry { padding-block: 8px 0; }
.release-history-link { white-space:nowrap; }
.header-tool { width:34px;height:34px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted); }
.header-tool:hover,.header-tool[aria-expanded="true"] { background:var(--surface-hover);color:var(--accent); }
.header-tool svg { width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.notification-anchor { position:relative; }
.notification-panel { position:absolute;z-index:101;right:0;top:calc(100% + 8px);width:min(320px,70vw);padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px #0002; }
.notification-panel h2,.help-guides h2 { margin:0 0 8px;font-size:15px;color:var(--ink); }
.release-notice { display:grid;gap:5px;width:100%;padding:8px 0 0;border:0;background:transparent;text-align:left;color:var(--ink); }
.release-notice time,.release-notice span,.help-guides p { color:var(--muted);font-size:13px;line-height:1.6; }
.help-guides p { margin:0; }
.help-guides h2:not(:first-child) { margin-top:20px; }
@media(max-width:620px){.notification-panel{position:fixed;top:56px;right:12px;width:min(320px,calc(100vw - 24px));}}
@media (min-width:951px) {
  #content.dashboard-page > .dashboard-operations { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
}
@media (max-width:950px) {
  #content.dashboard-page > .dashboard-operations { grid-template-columns: minmax(0, 1fr); }
}
@media(max-width:850px){#content.dashboard-page > .dashboard-grid{grid-template-columns:minmax(0,1fr)}}
#content.dashboard-page .summary-row {
  min-height: 44px;
  gap: 16px;
  padding: 8px 0;
}

#content.dashboard-page .summary-row:last-child {
  padding-bottom: 0;
}

#content.dashboard-page .service-values {
  gap: 12px;
}

@media (max-width: 1200px) {
  #content.dashboard-page .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #content.dashboard-page .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #content.dashboard-page > .page-head {
    align-items: flex-start;
  }


}

@media (max-width: 520px) {
  #content.dashboard-page {
    --dashboard-gap: 12px;
    --dashboard-row-gap: 10px;
    --dashboard-inset: 16px;
    padding: 16px;
  }

  #content.dashboard-page .metric {
    min-height: 104px;
    padding: 12px 14px;
  }

  #content.dashboard-page .metric strong {
    font-size: 21px;
  }

}


.tr-chart.tr-dual { grid-template-columns:46px minmax(0,1fr) 46px; }
.tr-dual .tr-plot + .tr-axis { text-align:left; padding-inline-start:4px; }
.tr-dual .tr-labels { grid-column:2; }