:root {
  --bg: #f3f6f4;
  --surface: #fff;
  --surface-raised: #fbfdfc;
  --surface-soft: #eef3f0;
  --surface-subtle: #f8faf9;
  --text: #18211d;
  --muted: #66716b;
  --muted-strong: #46524c;
  --text-weak: #87918c; /* Raw/decorative only; never use for small body or support text. */
  --text-support-readable: #626d67;
  --ink: #142126;
  --border: #dfe6e2;
  --border-strong: #c8d4ce;
  --divider: #e9eeeb;
  --skeleton-base: #e9eeeb;
  --skeleton-highlight: #f7f9f8;
  --skeleton-line: #cfd9d5;
  --skeleton-block: #dfe7e4;
  --skeleton-border: #d5dfdb;
  --accent: #168765;
  --accent-strong: #116b51;
  --accent-soft: #e9f5ef;
  --commerce-rail: #006f63;
  --commerce-rail-deep: #00564e;
  --risk: #e89b3c;
  --blue: #256ba7;
  --amber: #a87019;
  --red: #b44251;
  --violet: #6c5aa8;
  --shadow: 0 14px 34px rgba(24, 44, 52, 0.09);
  --shadow-soft: 0 6px 18px rgba(24, 44, 52, 0.06);
  --shadow-card: 0 8px 24px rgba(25, 48, 38, 0.06);
  --shadow-card-hover: 0 14px 32px rgba(25, 48, 38, 0.10);
  --font-ui: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --motion-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
  --type-page-title: 20px;
  --type-card-title: 16px;
  --type-body: 14px;
  --type-support: 12px;
  --type-kpi: 30px;
  --space-page: 20px;
  --space-section: 16px;
  --space-grid: 12px;
  --radius-card: 13px;
  --radius: 8px;
  --nav-page-inset: 12px;
  --nav-sidebar-width: 218px;
  --nav-shell-gap: 14px;
  --nav-sticky-top: 12px;
  --nav-sidebar-height: calc(100vh - (var(--nav-sticky-top) * 2));
  --nav-topbar-height: 66px;
  --nav-tabs-height: 44px;
  --nav-compact-inset: 8px;
  --nav-compact-sidebar-height: calc(100vh - (var(--nav-compact-inset) * 2));
  --nav-compact-sidebar-width: 174px;
  --nav-compact-gap: 8px;
  --nav-topbar-columns: clamp(180px, 19%, 248px) minmax(0, 1fr) 240px;
  --nav-topbar-gap: 6px 12px;
  --nav-topbar-compact-columns: minmax(0, 1fr) max-content;
  --nav-topbar-compact-gap: 6px 12px;
  --nav-topbar-empty-columns: minmax(0, 1fr);
  --nav-topbar-empty-gap: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-x: clip;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

html:has(body[data-active-dashboard="assistant"]) {
  height: 100%;
  overflow: hidden;
}

body[data-active-dashboard="assistant"] {
  height: 100dvh;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 16px;
  z-index: 100;
  border-radius: var(--radius);
  padding: 8px 12px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 760;
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform 160ms ease;
}

.skip-link:focus-visible {
  outline: 2px solid rgba(23, 111, 99, 0.58);
  outline-offset: 2px;
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.shell {
  width: min(1540px, calc(100vw - (var(--space-page) * 2)));
  margin: 0 auto;
  padding: 16px 0 42px;
}

@supports not (width: calc(100vw - (var(--space-page) * 2))) {
  .shell {
    width: min(1480px, calc(100vw - 32px));
  }
}

.topbar {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--nav-topbar-columns);
  gap: var(--nav-topbar-gap);
  align-items: center;
  min-height: 60px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(212, 222, 226, 0.92);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(251, 253, 253, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  transition:
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.topbar::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -12px;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 242, 246, 0.98), rgba(238, 242, 246, 0.82));
}

.topbar.is-compact {
  background: rgba(251, 253, 253, 0.96);
  box-shadow: 0 10px 26px rgba(24, 44, 52, 0.12);
}

.topbar.is-compact .brand-mark {
  filter: saturate(1.05);
}

.topbar.is-compact h1 {
  color: var(--text);
}

.topbar.is-compact .brand p {
  opacity: 0.72;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.brand-mark {
  width: 68px;
  height: 34px;
  display: block;
  flex: 0 0 auto;
  border-radius: 4px;
  background-image: url("/shared/assets/ranboss-logo.webp"), url("/shared/ranboss-logo.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
  mix-blend-mode: multiply;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 21px;
  line-height: 1.16;
  font-weight: 820;
}

h2 {
  font-size: 17px;
  font-weight: 800;
}

.brand p,
.section-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.platform-tabs {
  display: inline-flex;
  align-items: center;
  position: relative;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  gap: 3px;
  padding: 3px;
  overflow-x: clip;
  border: 1px solid rgba(183, 200, 206, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(250, 253, 253, 0.92), rgba(226, 236, 239, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 1px 2px rgba(27, 45, 55, 0.08);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.platform-tabs.has-scroll-start {
  box-shadow:
    inset 10px 0 12px -13px rgba(20, 33, 38, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 1px 2px rgba(27, 45, 55, 0.08);
}

.platform-tabs.has-scroll-end {
  box-shadow:
    inset -10px 0 12px -13px rgba(20, 33, 38, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 1px 2px rgba(27, 45, 55, 0.08);
}

.platform-tabs::-webkit-scrollbar {
  display: none;
}

button,
.open-link {
  min-height: 32px;
  border-radius: 7px;
  font: inherit;
  font-weight: 760;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  touch-action: manipulation;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--accent);
  padding: 0 12px;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(20, 115, 102, 0.18);
}

button:hover,
.open-link:hover {
  transform: translateY(-1px);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

button:disabled {
  transform: none;
  box-shadow: none;
}

button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button:focus-visible,
.open-link:focus-visible,
.platform-tabs a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(23, 111, 99, 0.58);
  outline-offset: 2px;
}

.platform-tabs {
  justify-content: center;
}

.platform-tabs button,
.platform-tabs a {
  flex: 0 1 168px;
  min-width: 68px;
  max-width: 176px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.platform-tabs [data-tab-scope="platform"],
.platform-tabs [data-tab-scope="workspace"] {
  position: relative;
}

.platform-tabs button.is-active,
.platform-tabs a.is-active {
  border-color: rgba(32, 42, 53, 0.12);
  background: rgba(32, 42, 53, 0.94);
  color: #fff;
  box-shadow: 0 7px 16px rgba(24, 39, 75, 0.15);
}

.platform-tabs [data-tab-scope="workspace"] {
  flex: 0 1 120px;
  min-width: 92px;
  max-width: 128px;
  background: rgba(255, 247, 228, 0.64);
  color: #8a5a13;
}

.platform-tabs [data-tab-scope="workspace"]::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -7px;
  width: 1px;
  background: rgba(183, 200, 206, 0.95);
}

.platform-tabs [data-tab-scope="workspace"].is-active {
  background: linear-gradient(180deg, #fffaf0, #fff2d6);
  color: #6d430f;
}

.platform-tabs a {
  color: var(--accent-strong);
}

.platform-tabs button:hover,
.platform-tabs a:hover {
  border-color: rgba(20, 115, 102, 0.24);
  background: rgba(255, 255, 255, 0.76);
  transform: translateY(-1px);
}

.platform-tabs a::after {
  content: none;
}

.tab-logo {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  overflow: hidden;
  border-radius: 6px;
  background: #edf1ef;
  color: #7a858a;
  box-shadow: inset 0 0 0 1px rgba(91, 102, 117, 0.12);
}

.tab-logo svg {
  width: 15px;
  height: 15px;
  display: block;
  overflow: visible;
}

.tab-logo :is(path, rect, circle) {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.controls {
  display: flex;
  align-items: end;
  justify-content: end;
  gap: 8px;
}

.topbar .controls {
  align-items: center;
  flex-wrap: nowrap;
}

.topbar .controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.topbar .controls input {
  width: 132px;
}

label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
}

input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
}

input,
select {
  height: 32px;
  padding: 0 9px;
}

textarea {
  width: 100%;
  min-width: 96px;
  padding: 7px 8px;
  resize: vertical;
  line-height: 1.35;
}

.status-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  overflow-x: clip;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.status-meta-strip::-webkit-scrollbar {
  display: none;
}

.status-line,
.meta-line {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.status-line {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
}

.meta-line {
  flex: 0 1 auto;
  min-width: 0;
}

.meta-line span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9aa6ac;
}

.dot.ok {
  background: #1f8a5c;
}

.dot.warn,
.dot.loading {
  background: #b77b1d;
}

.dot.error {
  background: #bf3d4c;
}

.dashboard-panel[hidden] {
  display: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.summary-card,
.panel,
.schedule-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.summary-card {
  min-height: 116px;
  position: relative;
  overflow: hidden;
  padding: 15px 16px 14px;
  box-shadow: var(--shadow-soft);
}

.summary-card span,
.channel-card span,
.profit-status,
.panel-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.summary-card strong {
  display: block;
  margin: 9px 0 6px;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 840;
  color: var(--text);
}

.summary-card small,
.channel-card small {
  color: var(--muted);
  font-size: 12px;
}

.summary-card.gmv {
  border-left: 4px solid var(--blue);
}

.summary-card.orders {
  border-left: 4px solid var(--accent);
}

.summary-card.refund {
  border-left: 4px solid var(--amber);
}

.summary-card.profit {
  border-left: 4px solid var(--red);
}

.panel,
.schedule-panel {
  margin-bottom: 14px;
  padding: 15px;
  box-shadow: var(--shadow-soft);
}

.schedule-panel {
  position: relative;
  border-color: #d4e0df;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  box-shadow: 0 10px 26px rgba(24, 44, 52, 0.07);
}

.section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.overview-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.metric-source-row {
  grid-template-columns: minmax(720px, 1.35fr) minmax(360px, 0.65fr);
  align-items: stretch;
}

.metric-source-row > .panel {
  min-width: 0;
}

.trend-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  background: #f8fafc;
}

.trend-controls .ghost {
  width: 58px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
}

.trend-controls .ghost.is-active {
  background: #202a35;
  color: #fff;
}

.trend-chart {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-frame {
  position: relative;
  height: 360px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 253, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.axis,
.grid {
  stroke: #dce5ee;
  stroke-width: 1;
}

.axis {
  stroke: #b9c7d4;
}

.axis-label {
  fill: #667386;
  font-size: var(--type-support);
  font-variant-numeric: tabular-nums;
}

.line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 160ms ease, opacity 160ms ease, filter 160ms ease;
}

.line.is-hovered {
  stroke-width: 5;
  opacity: 1;
  filter: drop-shadow(0 4px 8px rgba(23, 32, 42, 0.16));
}

.line.is-muted {
  opacity: 0.2;
}

.line-hit {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 18;
  cursor: crosshair;
  pointer-events: stroke;
}

.line-hit:focus-visible {
  outline: 2px solid rgba(23, 105, 170, 0.45);
  outline-offset: 3px;
}

.trend-hover-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.trend-hover-layer.is-visible {
  opacity: 1;
}

.trend-hover-rule {
  stroke: rgba(41, 50, 65, 0.22);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.trend-hover-dot {
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 5px 10px rgba(23, 32, 42, 0.18));
}

.trend-tooltip {
  position: absolute;
  z-index: 4;
  width: 214px;
  max-width: calc(100% - 16px);
  border: 1px solid rgba(185, 199, 212, 0.9);
  border-left: 4px solid var(--trend-color, var(--blue));
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 34px rgba(24, 39, 75, 0.16);
  color: var(--text);
  opacity: 0;
  padding: 10px 11px;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.trend-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.trend-tooltip-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #17202a;
  font-size: 12px;
}

.trend-tooltip-title time {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--type-support);
  font-variant-numeric: tabular-nums;
}

.trend-tooltip-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--trend-color, var(--blue));
}

.trend-tooltip-grid {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 5px 10px;
  margin-top: 9px;
  font-size: 12px;
}

.trend-tooltip-grid span {
  color: var(--muted);
}

.trend-tooltip-grid strong {
  justify-self: end;
  color: #17202a;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
}

.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.trend-legend {
  min-height: 30px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
}

.legend-dot.gmv {
  background: var(--blue);
}

.legend-dot.profit {
  background: var(--red);
}

.legend-dot.platform {
  background: var(--legend-color, var(--accent));
}

.open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  border: 1px solid var(--border);
  padding: 0 12px;
  color: var(--accent-strong);
  text-decoration: none;
  background: var(--surface-raised);
}

.platform-comparison-panel {
  padding: 13px 16px 12px;
}

.platform-comparison-body {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.platform-metric-grid {
  display: grid;
  gap: 8px;
}

.platform-comparison-list {
  display: grid;
  gap: 6px;
}

.platform-comparison-row {
  display: grid;
  grid-template-columns: minmax(108px, 0.32fr) minmax(0, 1.8fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 8px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.platform-comparison-row.is-missing {
  background: #f8fafb;
}

.platform-comparison-head {
  display: grid;
  min-width: 0;
}

.platform-comparison-title {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.platform-comparison-title > i {
  width: 8px;
  height: 26px;
  border-radius: 999px;
  background: var(--platform-color, var(--accent));
}

.platform-comparison-title div {
  min-width: 0;
}

.platform-open-button {
  max-width: 100%;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  font-size: 12px;
  font-weight: 860;
  text-align: left;
}

.platform-comparison-title small {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: var(--muted);
  font-size: var(--type-support);
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-comparison-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.platform-comparison-metric {
  --metric-color: var(--accent);
  min-width: 0;
  border-radius: 6px;
  padding: 6px 7px;
  background: #f8fafb;
}

.platform-comparison-metric.gmv {
  --metric-color: var(--blue);
}

.platform-comparison-metric.orders {
  --metric-color: var(--accent);
}

.platform-comparison-metric.refund {
  --metric-color: var(--amber);
}

.platform-comparison-metric.profit {
  --metric-color: var(--red);
}

.platform-comparison-metric span,
.platform-comparison-metric strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-comparison-metric span {
  color: var(--muted);
  font-size: var(--type-support);
  font-weight: 760;
}

.platform-comparison-metric strong {
  margin-top: 3px;
  color: var(--text);
  font-size: var(--type-support);
  font-weight: 850;
}

.platform-comparison-metric.is-missing strong,
.platform-comparison-metric.is-missing span {
  color: var(--muted);
}

.platform-comparison-metric.is-negative strong {
  color: var(--red);
}

.platform-metric-track {
  display: block;
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e9ec;
}

.platform-metric-track em {
  display: block;
  width: var(--bar-width, 0%);
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--metric-color);
}

.platform-comparison-metric.is-negative .platform-metric-track em {
  background: var(--red);
}

.metric-compare-table {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.metric-table-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.9fr) repeat(4, minmax(116px, 1fr));
  align-items: stretch;
  min-height: 48px;
  border-top: 1px solid var(--border-soft);
}

.metric-table-row:first-child {
  border-top: 0;
}

.metric-table-head {
  min-height: 38px;
  background: #eef5f5;
}

.metric-table-head-cell,
.metric-platform-cell,
.metric-compare-cell {
  min-width: 0;
  padding: 8px 10px;
  border-left: 1px solid var(--border-soft);
}

.metric-table-head-cell:first-child,
.metric-platform-cell {
  border-left: 0;
}

.metric-table-head-cell {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 840;
}

.metric-table-head-cell small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-table-head-cell.gmv {
  box-shadow: inset 3px 0 0 var(--blue);
}

.metric-table-head-cell.orders {
  box-shadow: inset 3px 0 0 var(--accent);
}

.metric-table-head-cell.refund {
  box-shadow: inset 3px 0 0 var(--amber);
}

.metric-table-head-cell.profit {
  box-shadow: inset 3px 0 0 var(--red);
}

.metric-platform-cell {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  column-gap: 8px;
}

.metric-platform-cell i {
  width: 8px;
  height: 24px;
  border-radius: 999px;
  background: var(--platform-color, var(--accent));
}

.metric-platform-cell span {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 840;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-platform-cell small {
  grid-column: 2;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.metric-compare-cell {
  display: grid;
  align-content: center;
  gap: 6px;
}

.metric-bar-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e9ec;
}

.metric-bar-track i {
  display: block;
  width: var(--bar-width, 0%);
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--platform-color, var(--accent));
}

.metric-compare-cell strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.15;
  white-space: nowrap;
}

.metric-compare-cell.is-missing strong {
  color: var(--muted);
}

.metric-compare-cell.is-negative .metric-bar-track i {
  background: var(--red);
}

.metric-compare-cell.is-negative strong {
  color: var(--red);
}

.metric-compare-note {
  color: var(--muted);
  font-size: var(--type-support);
  font-weight: 720;
}

.platform-share-strip {
  display: grid;
  grid-template-rows: auto minmax(150px, 1fr) auto;
  gap: 9px;
  height: 100%;
  border: 1px solid rgba(169, 190, 199, 0.7);
  border-radius: var(--radius);
  padding: 10px;
  background: #f8fafb;
}

.platform-share-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-height: 21px;
  border: 1px solid rgba(169, 190, 199, 0.58);
  border-radius: 999px;
  padding: 0 9px;
  color: var(--muted-strong);
  background: #ffffff;
  font-size: var(--type-support);
  font-weight: 860;
  letter-spacing: 0;
  text-align: center;
}

.platform-share-column-shell {
  display: grid;
  min-height: 150px;
  place-items: center;
}

.platform-share-bar {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  width: 64px;
  height: 150px;
  overflow: hidden;
  border: 1px solid rgba(169, 190, 199, 0.75);
  border-radius: 8px;
  background: #e5edf0;
}

.platform-share-segment {
  flex: var(--share, 0) 0 0;
  width: 100%;
  min-height: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  background: var(--platform-color, var(--accent));
}

.platform-share-segment:first-child {
  border-radius: 0 0 7px 7px;
}

.platform-share-segment:last-child {
  border-radius: 7px 7px 0 0;
}

.platform-share-zero {
  display: grid;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  background: #e5edf0;
  writing-mode: vertical-rl;
}

.platform-share-legend {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-share-legend-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 20px;
  border: 1px solid rgba(169, 190, 199, 0.44);
  border-radius: 7px;
  padding: 2px 5px;
  color: var(--muted-strong);
  background: #ffffff;
  font-size: var(--type-support);
  font-weight: 730;
}

.platform-share-legend-item i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--platform-color, var(--accent));
}

.platform-share-label {
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-share-legend-item b {
  justify-self: end;
  color: var(--text);
  font-size: var(--type-support);
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.platform-share-legend-item.is-muted {
  color: var(--muted);
  background: rgba(244, 248, 249, 0.74);
}

.visual-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.status-chart-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-raised);
}

.status-chart-card.pending {
  background: #fff8ea;
}

.status-chart-card.neutral {
  background: #f6f8f9;
}

.status-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.status-card-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-card-head span i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--platform-color, var(--accent));
}

.status-card-head b {
  color: var(--muted-strong);
  font-size: var(--type-support);
  font-weight: 760;
  white-space: nowrap;
}

.status-chart-card > strong {
  display: block;
  margin: 8px 0;
  color: var(--accent-strong);
  font-size: 21px;
  font-weight: 860;
}

.status-chart-card > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--type-support);
  font-weight: 720;
}

.status-metric-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.status-metric-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted-strong);
  background: #eef3f4;
  font-size: var(--type-support);
  font-weight: 750;
}

.status-metric-dot i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-metric-dot.ready,
.status-metric-dot.ready-zero {
  color: var(--accent-strong);
  background: #e5f4ef;
}

.status-metric-dot.missing {
  color: #8a5a13;
  background: #fff4de;
}

.status-metric-dot.pending {
  color: #7a4850;
  background: #fde8eb;
}

.status-metric-dot.no-data {
  color: #4f5f66;
  background: #edf2f4;
}

.compact-table-wrap {
  max-height: 314px;
}

.quality-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.compact-panel {
  padding: 12px;
}

.compact-head {
  margin-bottom: 8px;
}

.quality-table-wrap {
  max-height: none;
}

.quality-grid th,
.quality-grid td {
  padding: 8px 7px;
  font-size: 12px;
}

.quality-grid th {
  font-size: var(--type-support);
}

.status-matrix-table {
  min-width: 610px;
}

.status-matrix-table td:first-child {
  min-width: 104px;
}

.status-matrix-table td strong {
  display: block;
}

.status-matrix-table td small {
  display: block;
  margin-top: 3px;
  color: var(--text-support-readable);
  font-size: var(--type-support);
  overflow-wrap: anywhere;
}

.metric-quality-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 3px;
  border-radius: 999px;
  padding: 2px 6px;
  background: #f8efe3;
  color: #8a5b20;
  font-size: var(--type-support);
  font-style: normal;
  font-weight: 760;
}

.metric-quality-label[data-status-detail] {
  cursor: help;
  outline: none;
}

.metric-quality-label[data-status-detail]::before,
.metric-quality-label[data-status-detail]::after {
  position: absolute;
  left: 0;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.metric-quality-label[data-status-detail]::before {
  content: "";
  bottom: calc(100% + 4px);
  width: 10px;
  height: 10px;
  margin-left: 13px;
  border-right: 1px solid rgba(30, 62, 49, 0.12);
  border-bottom: 1px solid rgba(30, 62, 49, 0.12);
  background: #fffdf9;
  transform: translateY(4px) rotate(45deg);
}

.metric-quality-label[data-status-detail]::after {
  content: attr(data-status-detail);
  bottom: calc(100% + 9px);
  min-width: 190px;
  max-width: min(320px, 70vw);
  border: 1px solid rgba(30, 62, 49, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fffdf9;
  box-shadow: 0 16px 36px rgba(24, 45, 37, 0.16);
  color: var(--text);
  font-size: var(--type-support);
  font-weight: 680;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  transform: translateY(4px);
}

.metric-quality-label[data-status-detail]:hover::before,
.metric-quality-label[data-status-detail]:focus-visible::before {
  opacity: 1;
  transform: translateY(0) rotate(45deg);
}

.metric-quality-label[data-status-detail]:hover::after,
.metric-quality-label[data-status-detail]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.matrix-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  font-size: var(--type-support);
  font-weight: 720;
  white-space: nowrap;
}

.matrix-badge.is-actual,
.matrix-badge.is-valid,
.matrix-badge.is-zero {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.matrix-badge.is-pending,
.matrix-badge.is-missing,
.matrix-badge.is-error,
.matrix-badge.is-partial_actual,
.matrix-badge.is-estimated {
  background: #f8efe3;
  color: #8a5b20;
}

.matrix-badge.ready {
  color: var(--accent-strong);
  background: #e5f4ef;
}

.matrix-badge.ready-zero {
  color: #4f5f66;
  background: #edf2f4;
}

.matrix-badge.no-data {
  color: #4f5f66;
  background: #edf2f4;
}

.matrix-badge.missing {
  color: #8a5a13;
  background: #fff4de;
}

.matrix-badge.pending {
  color: #7a4850;
  background: #fde8eb;
}

.table-wrap {
  width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: contain;
}

#overviewPanel .table-wrap {
  overflow-x: clip;
  overscroll-behavior-x: auto;
}

#overviewPanel .audit-table-wrap {
  display: none;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
  font-size: 13px;
}

.issue-table {
  min-width: 860px;
}

.compact-issue-table {
  min-width: 720px;
}

#overviewPanel table,
#overviewPanel .issue-table,
#overviewPanel .compact-issue-table,
#overviewPanel .status-matrix-table {
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}

#overviewPanel th,
#overviewPanel td {
  overflow-wrap: anywhere;
  word-break: normal;
}

#overviewPanel .status-matrix-table th:first-child,
#overviewPanel .status-matrix-table td:first-child {
  width: 96px;
  min-width: 0;
}

#overviewPanel .status-matrix-table th:last-child,
#overviewPanel .status-matrix-table td:last-child {
  width: 82px;
}

#overviewPanel .compact-issue-table th:nth-child(1),
#overviewPanel .compact-issue-table td:nth-child(1) {
  width: 70px;
}

#overviewPanel .compact-issue-table th:nth-child(3),
#overviewPanel .compact-issue-table td:nth-child(3) {
  width: 118px;
}

#overviewPanel .compact-issue-table th:nth-child(4),
#overviewPanel .compact-issue-table td:nth-child(4) {
  width: 48px;
}

#overviewPanel .compact-issue-table th:nth-child(5),
#overviewPanel .compact-issue-table td:nth-child(5) {
  width: 82px;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 10px 9px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  background: #f4f8f9;
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody tr {
  background: var(--surface);
  transition: background 140ms ease;
}

tbody tr:hover {
  background: #f7fbfb;
}

.metric-cell {
  text-align: right;
  white-space: nowrap;
}

.metric-cell.is-missing {
  color: var(--muted);
}

.metric-cell.is-negative {
  color: var(--red);
  font-weight: 780;
}

.table-link {
  justify-content: flex-start;
  min-height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent-strong);
}

.state-pill,
.schedule-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  background: #e7f2ef;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 760;
}

.state-pill.ready {
  background: #e5f4ef;
  color: var(--accent-strong);
}

.state-pill.pending,
.schedule-badge.draft {
  background: #fff4de;
  color: #8a5a13;
}

.state-pill.neutral {
  color: #4f5f66;
  background: #edf2f4;
}

.issue-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.issue-visual-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-raised);
}

.issue-visual-card.is-warn {
  background: #fff8ea;
}

.issue-visual-card.is-pending,
.issue-visual-card.is-error {
  background: #fff1f3;
}

.issue-visual-card.is-ok {
  background: #eef8f4;
}

.issue-visual-card span {
  display: block;
  color: var(--muted);
  font-size: var(--type-support);
  font-weight: 760;
}

.issue-visual-card strong {
  display: block;
  min-height: 34px;
  margin: 6px 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 840;
  line-height: 1.3;
}

.issue-visual-card small {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 730;
}

.compact-empty {
  min-height: 34px;
  padding: 8px 0;
}

.schedule-badge.conflict,
.schedule-badge.is-error {
  background: #fde8eb;
  color: #9f3040;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.source-structure-grid {
  display: block;
}

.source-structure-panel {
  padding-bottom: 11px;
}

.source-stack {
  display: grid;
  gap: 9px;
}

.metric-source-row .source-stack {
  gap: 7px;
}

.source-stack-row {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.metric-source-row .source-stack-row {
  padding: 8px;
}

.source-stack-row.is-missing {
  background: #f8fafb;
}

.source-stack-head,
.source-stack-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.source-stack-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-source-row .source-stack-head strong {
  font-size: 12.5px;
}

.source-stack-head span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.source-stack-row.is-missing .source-stack-head span {
  color: var(--muted);
}

.source-stack-bar {
  display: flex;
  align-items: stretch;
  height: 18px;
  margin: 8px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e9ec;
}

.metric-source-row .source-stack-bar {
  height: 16px;
  margin: 7px 0 6px;
}

.source-stack-segment {
  flex: 0 0 var(--segment-width, 0%);
  opacity: var(--segment-alpha, 0.9);
  background: var(--segment-color, var(--accent));
}

.source-stack-empty {
  display: grid;
  width: 100%;
  place-items: center;
  color: var(--muted);
  font-size: var(--type-support);
  font-weight: 760;
}

.source-stack-meta {
  color: var(--muted);
  font-size: var(--type-support);
  font-weight: 720;
}

.source-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.metric-source-row .source-stack-legend {
  gap: 5px;
  margin-top: 7px;
}

.source-stack-legend span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--muted-strong);
  background: #f8fafb;
  font-size: var(--type-support);
  font-weight: 740;
}

.metric-source-row .source-stack-legend span {
  padding: 2px 7px;
}

.channel-card {
  min-height: 96px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px;
  background: var(--surface-raised);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.channel-card strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 20px;
  font-weight: 820;
}

.source-card {
  min-height: 112px;
}

.share-track {
  display: block;
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e0e8eb;
}

.share-track::before {
  content: "";
  display: block;
  width: var(--share, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--blue));
}

.pending-card,
.empty {
  border: 1px dashed #c8d4d8;
  border-radius: var(--radius);
  padding: 16px;
  color: var(--muted);
  background: #f8fbfb;
}

.schedule-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) repeat(6, minmax(90px, 1fr));
  align-items: end;
  gap: 7px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid #dbe6e4;
  border-radius: 8px;
  background: #f4f8f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.schedule-controls > * {
  min-width: 0;
}

.schedule-controls input {
  width: 100%;
}

.schedule-date-title {
  color: #52656a;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.schedule-date-field {
  position: relative;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-date-display {
  min-width: 0;
  min-height: 42px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-color: #d4e0df;
  border-radius: 6px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #34484f;
  box-shadow: none;
  font-size: 14px;
  font-weight: 780;
}

.schedule-date-display svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.schedule-date-display:hover,
.schedule-date-display:focus-visible {
  border-color: #8ebdb3;
  background: #ffffff;
  color: var(--accent-strong);
}

.schedule-date-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 284px;
  border: 1px solid rgba(181, 204, 201, 0.72);
  border-radius: 8px;
  padding: 10px;
  background: rgba(248, 252, 251, 0.72);
  box-shadow: 0 14px 36px rgba(28, 50, 57, 0.16);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.schedule-date-picker[hidden] {
  display: none;
}

.schedule-date-picker-head {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 4px;
  margin-bottom: 7px;
}

.schedule-date-picker-head strong {
  color: #20343a;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

.schedule-date-picker-head button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border-color: transparent;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: #53686e;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.schedule-date-picker-head button:hover,
.schedule-date-picker-head button:focus-visible {
  border-color: #bdd7d1;
  background: rgba(232, 244, 241, 0.88);
  color: var(--accent-strong);
}

.schedule-date-weekdays,
.schedule-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.schedule-date-weekdays {
  margin-bottom: 2px;
}

.schedule-date-weekdays span {
  color: #76878c;
  text-align: center;
  font-size: var(--type-support);
  font-weight: 720;
}

.schedule-date-grid button {
  width: 100%;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  border-color: transparent;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: #26383e;
  font-size: 12px;
  font-weight: 720;
}

.schedule-date-grid button:hover,
.schedule-date-grid button:focus-visible {
  border-color: #b9d8d1;
  background: rgba(226, 241, 237, 0.9);
  color: #0c675a;
}

.schedule-date-grid button.is-other-month {
  color: #a1adb0;
}

.schedule-date-grid button.is-today {
  border-color: #78aea3;
}

.schedule-date-grid button.is-selected {
  border-color: #147366;
  background: #147366;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(20, 115, 102, 0.2);
}

.schedule-date-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(201, 218, 216, 0.8);
}

.schedule-date-picker-foot button {
  min-height: 28px;
  border: 0;
  padding: 0 5px;
  background: transparent;
  color: #0e6e61;
  font-size: 12px;
  font-weight: 780;
}

.schedule-date-picker-foot button:hover,
.schedule-date-picker-foot button:focus-visible {
  color: #084f46;
  text-decoration: underline;
}

.schedule-controls > button,
.schedule-controls .schedule-upload-control {
  width: 100%;
  min-height: 42px;
  border-color: #d4e0df;
  border-radius: 6px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #526267;
  box-shadow: none;
  font-size: 13px;
  font-weight: 790;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
}

.schedule-controls > button:hover,
.schedule-controls .schedule-upload-control:hover {
  border-color: #9fc9c0;
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow: 0 4px 10px rgba(20, 115, 102, 0.08);
}

#scheduleSaveDraftBtn,
#scheduleExecuteBtn {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(20, 115, 102, 0.16);
}

#scheduleSaveDraftBtn:hover,
#scheduleExecuteBtn:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #ffffff;
}

#scheduleValidateBtn,
#scheduleDryRunBtn {
  border-color: #bcd8d1;
  background: #eaf5f1;
  color: var(--accent-strong);
}

#scheduleClearDraftBtn {
  border-style: dashed;
  background: transparent;
  color: #75858a;
}

.schedule-section-head {
  align-items: center;
  margin-bottom: 12px;
  padding: 1px 2px 12px;
  border-bottom: 1px solid #e1e9e7;
}

.schedule-section-head > div:first-child {
  min-width: 0;
}

.schedule-section-head h2 {
  font-size: 20px;
}

.schedule-section-head p {
  font-size: 13px;
}

.schedule-head-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.schedule-head-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 184px;
  padding-left: 14px;
  border-left: 1px solid #d7e2e0;
}

.schedule-head-meta .profit-status {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.schedule-head-meta .schedule-latest-meta {
  margin: 0;
  font-size: var(--type-support);
  line-height: 1.25;
  white-space: nowrap;
}

.schedule-latest-meta {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
}

.schedule-image-preview {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: none;
  width: min(240px, calc(100vw - 32px));
  border: 1px solid #cadbd7;
  border-radius: 7px;
  padding: 6px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(24, 44, 52, 0.15);
  cursor: default;
}

.schedule-image-preview.is-visible {
  display: grid;
  gap: 6px;
}

.schedule-image-preview img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: 6px;
  background: #f8fbfb;
}

.schedule-image-preview small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--type-support);
  line-height: 1.35;
}

.ghost {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--muted);
  box-shadow: none;
}

.profit-status.is-ok {
  color: var(--accent-strong);
}

.profit-status.is-warn {
  color: #8a5a13;
}

.profit-status.is-error {
  color: #9f3040;
}

.schedule-upload {
  position: relative;
  isolation: isolate;
}

.schedule-upload .schedule-image-preview {
  pointer-events: auto;
}

.schedule-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.schedule-upload-control {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d4e0df;
  border-radius: 6px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--accent-strong);
}

.schedule-recognition-progress {
  position: absolute;
  z-index: 3;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  padding: 6px 8px;
  border: 1px solid #bdded5;
  border-radius: 6px;
  background: #eef8f5;
  color: #2d6f61;
  font-size: var(--type-support);
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(42, 91, 81, 0.12);
}

.schedule-recognition-progress::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: schedule-recognition-pulse 1s ease-in-out infinite;
}

.schedule-recognition-cancel {
  position: absolute;
  z-index: 4;
  left: 6px;
  right: 6px;
  bottom: 5px;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 12px;
}

.schedule-recognition-cancel[hidden] {
  display: none;
}

@keyframes schedule-recognition-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-recognition-progress::before {
    animation: none;
  }
}

.schedule-note {
  margin-bottom: 10px;
}

.schedule-note-card {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 8px 11px;
  background: #f7faf9;
  color: var(--muted);
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.schedule-note-card.ok {
  border-color: #bdded5;
  background: #eef8f5;
}

.schedule-note-card.warn {
  border-color: #eed4a5;
  background: #fff8ea;
}

.schedule-note-card.error {
  border-color: #efbdc5;
  background: #fff0f2;
}

.schedule-note-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.schedule-table {
  --schedule-grid: #b8c8ce;
  --schedule-grid-strong: #98adb6;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--schedule-grid-strong);
  border-radius: 8px;
  overflow: visible;
  background: #ffffff;
  table-layout: fixed;
  box-shadow: 0 2px 8px rgba(24, 44, 52, 0.08);
}

.schedule-table-wrap {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

.schedule-col-live-room {
  width: 12%;
}

.schedule-col-account {
  width: 17%;
}

.schedule-col-media {
  width: 12%;
}

.schedule-col-time {
  width: 15%;
}

.schedule-col-duration {
  width: 8%;
}

.schedule-col-anchor,
.schedule-col-assistant,
.schedule-col-promotion {
  width: 9.5%;
}

.schedule-col-actions {
  width: 7%;
}

.schedule-table thead {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
}

.schedule-table thead th {
  height: 32px;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.18;
}

.schedule-table thead tr:first-child th {
  position: sticky;
  top: var(--schedule-sticky-top, 92px);
  z-index: 4;
  border-bottom-color: var(--schedule-grid-strong);
  background: #eaf3f1;
}

.schedule-table thead tr:nth-child(2) th {
  position: sticky;
  top: calc(var(--schedule-sticky-top, 92px) + 32px);
  z-index: 5;
  background: #f7faf9;
  font-size: 13.5px;
}

.schedule-table thead tr:first-child .schedule-head-leaf {
  z-index: 6;
}

.schedule-table thead tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.schedule-table thead tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

.schedule-head-title {
  display: block;
  color: #253840;
  font-size: 15px;
  font-weight: 840;
  line-height: 1;
  white-space: nowrap;
}

.schedule-head-group {
  box-shadow: inset 0 2px 0 rgba(68, 86, 93, 0.14);
}

.schedule-table thead tr:first-child .schedule-head-group--identity {
  background: #e1f1ec;
  box-shadow: inset 0 2px 0 rgba(20, 115, 102, 0.36);
}

.schedule-table thead tr:first-child .schedule-head-group--time {
  background: #fff1dc;
  box-shadow: inset 0 2px 0 rgba(168, 112, 25, 0.34);
}

.schedule-head-leaf {
  color: #31454d;
  font-weight: 800;
}

.schedule-table th,
.schedule-table td {
  border-right: 1px solid var(--schedule-grid);
  border-bottom: 1px solid var(--schedule-grid);
}

.schedule-table tbody tr {
  height: 36px;
}

.schedule-table td {
  padding: 4px 6px;
  vertical-align: middle;
  font-size: 14px;
}

.schedule-table tbody tr:not(.needs-review):hover td {
  background: #ffffff;
}

.schedule-head-actions,
.schedule-table tbody td:last-child {
  border-right: 0;
}

.schedule-table tbody tr:last-child td {
  border-bottom: 0;
}

.schedule-live-room-cell {
  position: static;
  left: auto;
  z-index: auto;
  background: #ffffff;
  box-shadow: none;
}

.schedule-head-room {
  left: auto;
  background: #eaf3f1;
  box-shadow: none;
}

.schedule-table tbody td:last-child {
  position: static;
  right: auto;
  z-index: auto;
  background: #ffffff;
  box-shadow: none;
}

.schedule-head-actions {
  right: auto;
  background: #eaf3f1;
  box-shadow: none;
}

.schedule-tag-editor {
  min-height: 20px;
  border: 0;
  border-radius: 0;
  padding: 1px 0;
  background: transparent;
  box-shadow: none;
  cursor: text;
}

.schedule-tag-editor:hover,
.schedule-tag-editor:focus-within {
  border-color: transparent;
  background: transparent;
}

.schedule-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.schedule-tag-pill,
.schedule-tag-empty {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  border: 1px solid #d6e3e6;
  border-radius: 999px;
  padding: 0 7px;
  color: var(--muted-strong);
  background: transparent;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.schedule-tag-pill--account {
  border-color: #cbdde2;
  color: #26373e;
  background: transparent;
}

.schedule-tag-pill--room {
  border-color: #c3d3da;
  color: #20363f;
  background: transparent;
}

.schedule-tag-pill--person {
  border-color: #d8d7ec;
  color: #3d3d70;
  background: transparent;
}

.schedule-tag-pill--empty {
  border-color: #d1d8dc;
  color: #5b6870;
  background: transparent;
}

.schedule-tag-pill--platform,
.schedule-tag-pill[data-platform-code="wechat_shop"] {
  border-color: #bfe0d3;
  color: #0f6b46;
  background: transparent;
}

.schedule-tag-pill[data-platform-code="douyin"] {
  border-color: #cdd5dc;
  color: #26313b;
  background: transparent;
}

.schedule-tag-pill[data-platform-code="kuaishou"] {
  border-color: #f0c39f;
  color: #a9470b;
  background: transparent;
}

.schedule-tag-pill[data-platform-code="pinduoduo"] {
  border-color: #efb8b8;
  color: #b42323;
  background: transparent;
}

.schedule-tag-pill[data-platform-code="private_domain"] {
  border-color: #cad8dd;
  color: #275a61;
  background: transparent;
}

.schedule-tag-empty {
  border-style: dashed;
  color: var(--muted);
  background: transparent;
}

.schedule-tag-empty.schedule-tag-pill--room {
  border-color: #cbdde2;
  color: #49616b;
  background: transparent;
}

.schedule-tag-source {
  display: block;
  width: 100%;
  min-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  resize: vertical;
  background: transparent;
  font-size: 13px;
  line-height: 1.35;
  transition: opacity 120ms ease, margin 120ms ease;
}

.schedule-tag-editor:focus-within .schedule-tag-source {
  min-height: 34px;
  height: auto;
  margin-top: 5px;
  border: 1px solid var(--border);
  padding: 5px 6px;
  opacity: 1;
  pointer-events: auto;
  overflow: auto;
  background: #ffffff;
}

.schedule-table textarea {
  min-height: 42px;
  padding: 6px 7px;
  font-size: 14px;
}

.schedule-table .schedule-tag-source {
  min-height: 0;
  height: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.schedule-table .schedule-tag-editor:focus-within .schedule-tag-source {
  min-height: 34px;
  height: auto;
  margin-top: 5px;
  border: 1px solid var(--border);
  padding: 5px 6px;
  opacity: 1;
  pointer-events: auto;
  overflow: auto;
  background: #ffffff;
}

.schedule-table input,
.schedule-table select {
  height: 28px;
  padding: 0 7px;
  font-size: 14px;
}

.schedule-stacked-field,
.schedule-row-actions,
.schedule-time-range {
  display: grid;
  gap: 4px;
}

.schedule-live-room-cell {
  vertical-align: middle;
}

.schedule-merged-cell {
  vertical-align: middle;
  background: #ffffff;
}

.schedule-live-room-cell .schedule-tag-editor {
  background: transparent;
}

.schedule-time-range {
  grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr);
  align-items: center;
}

.schedule-duration-input {
  width: 100%;
}

.schedule-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.schedule-icon-button {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-color: transparent;
  color: #8d9da2;
  background: transparent;
  box-shadow: none;
  opacity: 0.72;
}

.schedule-icon-button span[aria-hidden="true"] {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.schedule-icon-button:hover,
.schedule-icon-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: #eef7f4;
  opacity: 1;
}

.schedule-delete:hover,
.schedule-delete:focus-visible {
  border-color: #dfb8bf;
  color: var(--red);
  background: #fff2f4;
}

.schedule-table tbody tr.needs-review,
.schedule-table tbody tr.needs-review td {
  background: #ffffff;
}

.schedule-table tbody tr.needs-review td {
  border-top-color: #e5c985;
}

/* Schedule ecommerce operations workbench */
body:has(#schedulePanel:not([hidden])) .status-meta-strip {
  gap: 4px;
  margin-bottom: 8px;
  padding: 0 2px;
}

body:has(#schedulePanel:not([hidden])) .status-line,
body:has(#schedulePanel:not([hidden])) .meta-line {
  gap: 0;
  color: #69787d;
  font-size: 12.5px;
}

body:has(#schedulePanel:not([hidden])) .status-line,
body:has(#schedulePanel:not([hidden])) .meta-line span {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  padding: 0 9px;
  background: transparent;
  box-shadow: none;
}

body:has(#schedulePanel:not([hidden])) .meta-line span {
  border-left: 1px solid #dce4e6;
}

.schedule-panel {
  border-color: #dde6e7;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(32, 55, 62, 0.07);
}

.schedule-section-head {
  margin-bottom: 14px;
  padding: 2px 2px 14px;
  border-bottom-color: #e3eaeb;
}

.schedule-section-head h2 {
  color: #17272d;
  font-size: 22px;
  font-weight: 820;
}

.schedule-section-head p {
  color: #718086;
  font-size: 13px;
}

.schedule-head-tools {
  gap: 14px;
}

.schedule-head-meta {
  min-width: 198px;
  padding-left: 16px;
  border-left-color: #dce5e6;
}

.schedule-controls {
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(100px, 1fr)) minmax(150px, 1.15fr) repeat(3, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
  border-color: #e0e7e8;
  background: #f7f9f9;
  box-shadow: none;
}

.schedule-controls > label {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.schedule-controls .schedule-upload-control {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.schedule-date-display,
.schedule-controls > button,
.schedule-controls .schedule-upload-control {
  min-height: 40px;
  border-color: #d6e0e2;
  border-radius: 6px;
  background: #ffffff;
  color: #43565d;
  box-shadow: none;
  font-size: 14px;
  font-weight: 720;
}

#scheduleSaveDraftBtn,
#scheduleExecuteBtn {
  border-color: #147366;
  background: #147366;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(20, 115, 102, 0.16);
}

#scheduleValidateBtn,
#scheduleDryRunBtn {
  background: #ffffff;
  border-color: #9fc8bf;
  color: #0d6659;
}

#scheduleClearDraftBtn {
  border-color: #ccd6d9;
  border-style: dashed;
  background: transparent;
  color: #7a898e;
}

.schedule-note-card {
  border-color: #dfe7e8;
  border-left-width: 3px;
  background: #fafcfc;
  box-shadow: none;
}

.schedule-table {
  --schedule-grid: #dce4e6;
  --schedule-grid-strong: #c5d1d4;
  border-color: var(--schedule-grid-strong);
  box-shadow: none;
}

.schedule-table thead tr:first-child th,
.schedule-head-room,
.schedule-head-actions {
  background: #edf3f1;
}

.schedule-table thead tr:nth-child(2) th {
  background: #f6f9f8;
}

.schedule-table thead tr:first-child .schedule-head-group--identity {
  background: #edf3f1;
  box-shadow: inset 0 2px 0 rgba(20, 115, 102, 0.55);
}

.schedule-table thead tr:first-child .schedule-head-group--time {
  background: #edf3f1;
  box-shadow: inset 0 2px 0 rgba(168, 112, 25, 0.5);
}

.schedule-table tbody tr {
  height: 40px;
}

.schedule-table td {
  padding: 5px 7px;
  font-size: 14.5px;
}

.schedule-tag-pill,
.schedule-tag-empty {
  min-height: 24px;
  border-radius: 6px;
  padding: 0 7px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 730;
}

.schedule-icon-button {
  color: #6f8086;
  opacity: 1;
}

.schedule-icon-button:hover,
.schedule-icon-button:focus-visible {
  background: #f4f8f7;
}

.is-busy {
  pointer-events: none;
  opacity: 0.68;
}

@media (max-width: 980px) {
  .topbar {
    top: 8px;
    grid-template-columns: var(--nav-topbar-compact-columns);
    gap: var(--nav-topbar-compact-gap);
    min-height: 0;
    padding: 9px;
  }

  .brand p {
    display: none;
  }

  .platform-tabs {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: none;
  }

  .controls {
    justify-content: end;
  }

  .summary-grid,
  .channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 620px) {
  .shell {
    width: min(100vw - 18px, 1220px);
    padding-top: 10px;
  }

  .summary-grid,
  .channel-grid,
  .schedule-controls {
    grid-template-columns: 1fr;
  }

  .summary-card strong {
    font-size: 22px;
  }

  .section-head {
    display: grid;
  }

  .topbar {
    top: 6px;
    grid-template-columns: var(--nav-topbar-compact-columns);
    gap: var(--nav-topbar-compact-gap);
    padding: 7px;
  }

  .controls {
    justify-content: stretch;
  }

  .controls label {
    min-width: 0;
  }

  .controls input {
    width: 100%;
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 6px;
  }

  h1 {
    font-size: 18px;
  }

  .platform-tabs {
    gap: 3px;
    padding: 3px;
  }

  .platform-tabs button,
  .platform-tabs a {
    min-width: 72px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  .platform-tabs [data-tab-scope="workspace"] {
    min-width: 84px;
  }

  .tab-logo {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .tab-logo svg {
    width: 14px;
    height: 14px;
  }

  input,
  select {
    height: 30px;
  }

  button,
  .open-link {
    min-height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.skeleton {
  display: block;
  background-color: var(--skeleton-base);
  background-image: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 37%, var(--skeleton-base) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 6px;
  overflow: hidden;
  line-height: 1;
  color: transparent;
}

.skeleton-field,
.skeleton-pill,
.skeleton-table-cell {
  display: block;
  background-color: var(--skeleton-base);
  background-image: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 37%, var(--skeleton-base) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  overflow: hidden;
  color: transparent;
}

.skeleton-line {
  height: 12px;
}

.skeleton-strong {
  height: 24px;
}

.skeleton-bar {
  height: 4px;
  border-radius: 999px;
}

.skeleton-row {
  height: 18px;
  margin: 4px 0;
}

.skeleton-field {
  height: 14px;
  border-radius: 6px;
}

.skeleton-pill {
  height: 22px;
  border-radius: 999px;
}

.skeleton-table-cell {
  height: 18px;
  margin: 4px 0;
  border-radius: 6px;
}

.skeleton-chart {
  color: var(--skeleton-line);
}

.skeleton-chart-axis,
.skeleton-chart-line {
  fill: none;
  stroke: var(--skeleton-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skeleton-chart-axis {
  stroke-width: 1;
  stroke-dasharray: 4 8;
}

.skeleton-chart-bars rect,
.skeleton-chart-bar {
  fill: var(--skeleton-block);
}

.skeleton-chart-donut {
  fill: none;
  stroke: var(--skeleton-block);
  stroke-linecap: round;
}

.skeleton-tree,
.skeleton-issue {
  display: grid;
  gap: 9px;
}

.summary-card.skeleton-card {
  border-left-color: var(--skeleton-border);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton-field,
  .skeleton-pill,
  .skeleton-table-cell {
    background-image: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }

  .shared-date-picker {
    animation: none;
  }
}

/* Unified dashboard framework: semantic desktop platform rail + business tabs. */
.dashboard-app {
  width: min(1540px, calc(100vw - (var(--nav-page-inset) * 2)));
  min-width: 0;
  overflow-x: clip;
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--nav-sidebar-width) minmax(0, 1fr);
  gap: var(--nav-shell-gap);
}

body[data-active-dashboard="assistant"] .dashboard-app {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.dashboard-sidebar {
  position: sticky;
  top: var(--nav-sticky-top);
  align-self: start;
  height: var(--nav-sidebar-height);
  min-height: 620px;
  padding: 18px 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      var(--commerce-rail) 0%,
      var(--commerce-rail-deep) 100%
    );
  box-shadow: 0 16px 34px rgba(0, 86, 78, 0.18);
  backdrop-filter: blur(14px);
}

.rail-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 5px 24px;
  color: #ffffff;
  text-decoration: none;
}

.rail-brand .brand-mark {
  width: 48px;
  height: 28px;
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}

.rail-brand > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.rail-brand b {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.rail-brand small,
.rail-foot {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--type-support);
}

.rail-label {
  margin: 0 8px 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--type-support);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.platform-rail {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 6px;
}

.platform-rail a {
  --platform-theme: #147366;
  --platform-tint: #e5f3ed;
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.platform-rail a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--platform-theme);
  opacity: 0;
  transform: scaleY(0.55);
  transition: opacity 160ms ease, transform 160ms ease;
}

.platform-rail a[data-platform-icon="douyin"] {
  --platform-theme: #c84968;
  --platform-tint: #fbeaf0;
}

.platform-rail a[data-platform-icon="kuaishou"] {
  --platform-theme: #e8662d;
  --platform-tint: #fff0e8;
}

.platform-rail a[data-platform-icon="wechat_shop"] {
  --platform-theme: #15945a;
  --platform-tint: #e6f5ed;
}

.platform-rail a[data-platform-icon="private_domain"] {
  --platform-theme: #7358b1;
  --platform-tint: #f0ecf9;
}

.platform-rail a[data-platform-icon="schedule"] {
  --platform-theme: #a76b20;
  --platform-tint: #fbf0df;
}

.platform-rail a:hover,
.platform-rail a:focus-visible {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.platform-rail a:focus-visible {
  outline: 2px solid rgba(23, 105, 170, 0.6);
  outline-offset: 2px;
}

.platform-rail a.is-active {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.platform-rail a.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.platform-rail a small {
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--type-support);
  font-weight: 650;
}

.platform-rail .tab-logo {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

.platform-rail .tab-logo svg {
  width: 16px;
  height: 16px;
}

.platform-rail .tab-logo :is(path, rect, circle) {
  stroke: currentColor;
}

.platform-rail a.is-active .tab-logo {
  background: #ffffff;
  color: var(--commerce-rail);
  box-shadow: 0 6px 12px rgba(0, 55, 50, 0.12);
}

.rail-foot {
  position: absolute;
  left: 21px;
  bottom: 14px;
  margin: 0;
}

.dashboard-app > .shell {
  width: auto;
  min-width: 0;
  overflow-x: clip;
  margin: 0;
  padding: var(--nav-sticky-top) 0 32px;
}

body[data-active-dashboard="assistant"] .dashboard-app > .shell {
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding-bottom: var(--nav-sticky-top);
  overflow: hidden;
}

body[data-active-dashboard="assistant"] .assistant-dashboard-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.dashboard-app .topbar {
  position: sticky;
  top: var(--nav-sticky-top);
  grid-template-columns: var(--nav-topbar-columns);
  min-width: 0;
  min-height: var(--nav-topbar-height);
}

.dashboard-app .topbar .controls[hidden] {
  display: none !important;
}

.dashboard-app .topbar[hidden] {
  display: none !important;
}

.all-platform-tabs[hidden] {
  display: none !important;
}

.dashboard-app .topbar.is-tabs-empty {
  grid-template-columns: var(--nav-topbar-empty-columns);
  gap: var(--nav-topbar-empty-gap);
}

.complete-day-filter {
  align-items: center;
}

.complete-day-filter label {
  gap: 7px;
  color: #607068;
  font-size: var(--type-support);
  font-weight: 760;
}

.complete-day-filter label.date-control {
  gap: 0;
}

.complete-day-filter input {
  width: 142px;
  border-color: #cddbd4;
  background: #f7faf8;
  color: #244c3c;
  font-weight: 720;
}

.shared-date-field {
  position: relative;
  width: 142px;
  min-width: 142px;
}

.shared-date-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0 !important;
  white-space: nowrap;
}

.complete-day-filter .shared-date-trigger {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #cedbd5;
  border-radius: 7px;
  padding: 0 9px;
  background: linear-gradient(180deg, #ffffff, #f5f9f7);
  color: #315347;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(25, 61, 48, 0.05);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.shared-date-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.complete-day-filter .shared-date-trigger:hover,
.complete-day-filter .shared-date-trigger:focus-visible,
.complete-day-filter .shared-date-trigger[aria-expanded="true"] {
  border-color: #8ebdb3;
  background: #ffffff;
  color: #0e6e61;
  box-shadow: 0 0 0 3px rgba(20, 115, 102, 0.08);
}

.complete-day-filter #refreshBtn {
  min-width: 78px;
  height: 34px;
  border-color: var(--accent);
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  color: #fff;
  box-shadow: 0 8px 18px rgba(18, 123, 99, 0.18);
}

.complete-day-filter #refreshBtn:hover,
.complete-day-filter #refreshBtn:focus-visible {
  border-color: var(--accent-strong);
  background: linear-gradient(145deg, var(--accent-strong), #0f6656);
  box-shadow: 0 0 0 3px rgba(42, 135, 112, 0.14), 0 10px 22px rgba(18, 123, 99, 0.18);
}

.shared-date-picker {
  position: fixed;
  top: var(--date-picker-top, 0px);
  left: var(--date-picker-left, 0px);
  right: auto;
  z-index: 90;
  width: 284px;
  border: 1px solid rgba(181, 204, 201, 0.76);
  border-radius: 9px;
  padding: 10px;
  background: rgba(248, 252, 251, 0.94);
  box-shadow: 0 16px 38px rgba(28, 50, 57, 0.17);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  transform-origin: top right;
  animation: shared-date-in 150ms cubic-bezier(0.2, 0, 0.2, 1);
}

.shared-date-picker[hidden] {
  display: none;
}

.shared-date-picker-head {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 4px;
  margin-bottom: 7px;
}

.shared-date-picker-head strong {
  color: #20343a;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

.shared-date-picker button {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  color: #415a52;
  box-shadow: none;
  transform: none;
}

.shared-date-picker-head button {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
}

.shared-date-picker-head button:hover,
.shared-date-picker-head button:focus-visible {
  border-color: #bdd7d1;
  background: rgba(232, 244, 241, 0.9);
  color: #0e6e61;
  transform: none;
}

.shared-date-weekdays,
.shared-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.shared-date-weekdays {
  margin-bottom: 2px;
}

.shared-date-weekdays span {
  color: #76878c;
  text-align: center;
  font-size: var(--type-support);
  font-weight: 720;
}

.shared-date-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: #26383e;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
}

.shared-date-grid button:hover:not(:disabled),
.shared-date-grid button:focus-visible {
  border-color: #b9d8d1;
  background: rgba(226, 241, 237, 0.92);
  color: #0c675a;
  transform: none;
}

.shared-date-grid button.is-other-month { color: #a1adb0; }
.shared-date-grid button.is-today { border-color: #78aea3; }

.shared-date-grid button.is-selected {
  border-color: #147366;
  background: linear-gradient(145deg, #17806f, #11685c);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(20, 115, 102, 0.22);
}

.shared-date-grid button:disabled {
  color: #c7cecc;
  cursor: not-allowed;
}

.shared-date-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(201, 218, 216, 0.82);
}

.shared-date-picker-foot button {
  height: 28px;
  padding: 0 5px;
  color: #0e6e61;
  font-size: 12px;
  font-weight: 780;
}

.shared-date-picker-foot button:hover:not(:disabled),
.shared-date-picker-foot button:focus-visible {
  color: #084f46;
  text-decoration: underline;
  transform: none;
}

@keyframes shared-date-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.page-heading {
  min-width: 0;
}

.page-heading h1 {
  font-size: var(--type-page-title);
  font-weight: 700;
}

.page-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--type-support);
}

.all-platform-tabs {
  height: var(--nav-tabs-height);
  min-height: var(--nav-tabs-height);
  min-width: 0;
  align-self: center;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  padding: 2px 3px;
  border: 1px solid rgba(211, 222, 216, 0.72);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  overflow-x: clip;
  scrollbar-width: none;
}

.all-platform-tabs::-webkit-scrollbar {
  display: none;
}

.all-platform-tabs button {
  min-width: 76px;
  min-height: 38px;
  flex: 1 1 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 6px;
  padding: 0 8px;
  background: transparent;
  color: #68766f;
  font-size: 12px;
  font-weight: 760;
  box-shadow: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.all-platform-tabs button:hover,
.all-platform-tabs button:focus-visible {
  background: rgba(239, 246, 242, 0.9);
  color: #245c46;
  box-shadow: inset 0 0 0 1px rgba(197, 218, 207, 0.7);
  transform: none;
}

.all-platform-tabs button.is-active {
  border-bottom-color: #17805b;
  background: linear-gradient(180deg, #ffffff, #eaf5ef);
  color: #145f42;
  box-shadow: inset 0 0 0 1px rgba(23, 128, 91, 0.13), 0 2px 7px rgba(30, 70, 54, 0.08);
}

.all-platform-tabs button svg {
  display: none;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.all-platform-tabs button b {
  min-width: 18px;
  border-radius: 999px;
  padding: 2px 5px;
  background: #fff0d8;
  color: #8b5b0d;
  font-size: var(--type-support);
}

@media (max-width: 1180px) {
  .dashboard-app .topbar {
    grid-template-columns: var(--nav-topbar-columns);
    gap: var(--nav-topbar-gap);
  }

  .all-platform-tabs button {
    min-width: 68px;
    padding-inline: 5px;
  }
}

@media (max-width: 1100px) {
  .dashboard-app {
    width: min(1540px, calc(100vw - (var(--nav-compact-inset) * 2)));
    grid-template-columns: var(--nav-compact-sidebar-width) minmax(0, 1fr);
    gap: var(--nav-compact-gap);
  }

  .dashboard-sidebar {
    top: var(--nav-compact-inset);
    height: var(--nav-compact-sidebar-height);
    padding-inline: 9px;
  }

  .dashboard-app > .shell {
    min-width: 0;
    padding-top: var(--nav-compact-inset);
  }

  .dashboard-app .topbar {
    top: var(--nav-compact-inset);
    grid-template-columns: var(--nav-topbar-compact-columns);
    gap: var(--nav-topbar-compact-gap);
  }
}

@media (max-width: 1040px) {
  .dashboard-app > .shell {
    min-width: 0;
  }

  .dashboard-app .schedule-panel {
    min-width: 0;
  }

  .dashboard-app .schedule-controls > * {
    min-width: 0;
  }

  .dashboard-app .schedule-table-wrap {
    overflow-x: clip;
  }

  .dashboard-app .topbar {
    grid-template-columns: var(--nav-topbar-compact-columns);
    gap: var(--nav-topbar-compact-gap);
  }

  .all-platform-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    height: var(--nav-tabs-height);
    min-height: var(--nav-tabs-height);
    justify-content: flex-start;
  }

  .all-platform-tabs button {
    flex: 1 0 86px;
  }
}

@media (max-width: 620px) {
  .dashboard-app > .shell {
    overflow-x: hidden;
  }

  .complete-day-filter {
    min-width: 0;
  }

  .complete-day-filter .shared-date-field {
    flex: 0 1 98px;
    width: 98px;
    min-width: 0;
  }

  .complete-day-filter .shared-date-trigger {
    min-width: 0;
    gap: 4px;
    padding-inline: 7px;
  }

  .complete-day-filter .shared-date-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .complete-day-filter #refreshBtn {
    flex: 0 0 58px;
    min-width: 58px;
    padding-inline: 8px;
  }

  .all-platform-tabs {
    width: 100%;
    max-width: 100%;
  }

  .all-platform-tabs button {
    flex: 0 0 76px;
  }
}

@media (min-width: 981px) and (max-width: 1040px) {
  .dashboard-app .schedule-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-rail a,
  .all-platform-tabs button {
    transition: none;
  }
}

/* Approved all-platform demo panels. Scoped to avoid schedule workflow styles. */
.demo-scopebar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-grid);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: var(--type-support);
}

.demo-scopebar[hidden],
.demo-workspace[hidden] {
  display: none !important;
}

.demo-scopebar strong,
.demo-scopebar span {
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--surface-subtle);
}

.demo-scopebar strong {
  border: 1px solid #c6e6d7;
  background: var(--accent-soft);
  color: #27664e;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.demo-scopebar em {
  margin-left: auto;
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff4d8;
  color: #805a10;
  font-style: normal;
}

.demo-workspace {
  --demo-ink: var(--text);
  --demo-muted: var(--muted);
  --demo-green: var(--accent);
  --demo-blue: #6283a0;
  --demo-amber: var(--risk);
  --demo-red: #bd5d5d;
  --demo-line: var(--border);
  min-width: 0;
  color: var(--demo-ink);
}

.demo-workspace ~ .status-meta-strip,
.demo-workspace ~ #overviewPanel {
  display: none;
}

.demo-page {
  display: none;
  min-width: 0;
  animation: demo-page-in 180ms ease;
}

.demo-page.is-active {
  display: block;
}

@keyframes demo-page-in {
  from { opacity: 0.35; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.demo-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  margin-bottom: var(--space-grid);
  align-items: start;
}

.demo-grid .span-7 { grid-column: span 7; }
.demo-grid .span-5 { grid-column: span 5; }
.demo-grid .span-4 { grid-column: span 4; }
.demo-grid .span-3 { grid-column: span 3; }

.overview-hero-grid .span-7 { grid-column: span 6; }
.overview-hero-grid .span-5 { grid-column: span 6; }

.demo-card {
  min-width: 0;
  border: 1px solid var(--demo-line);
  border-radius: var(--radius-card);
  padding: var(--space-section);
  background: var(--surface);
  color: var(--muted-strong);
  box-shadow: var(--shadow-card);
  cursor: default;
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

.demo-card:is(:hover, :focus-within) {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.demo-card header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 9px;
}

.demo-card header > div { min-width: 0; }

.demo-card h2 {
  color: var(--demo-ink);
  font-size: var(--type-card-title);
  font-weight: 700;
}

.demo-card header span,
.demo-card header p,
.truth-note {
  color: var(--demo-muted);
  font-size: var(--type-support);
  line-height: 1.45;
}

.demo-card button,
.demo-table button,
.decision-strip button {
  min-height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #176e50;
  font-size: var(--type-support);
  box-shadow: none;
}

.demo-card :is(button, [tabindex="0"]):focus-visible,
.decision-strip button:focus-visible,
.demo-table button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 3px;
}

.demo-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-grid);
  margin-bottom: var(--space-grid);
}

.demo-kpi {
  position: relative;
  min-height: 122px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.demo-kpi > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #66736d;
  min-height: 24px;
  font-size: var(--type-support);
  font-weight: 720;
}

.demo-kpi > span i,
.demo-table i,
.plan-cards i {
  border-radius: 999px;
  padding: 3px 6px;
  background: var(--accent-soft);
  color: #247055;
  font-size: var(--type-support);
  font-style: normal;
  white-space: nowrap;
}

.demo-kpi > strong {
  display: block;
  margin: 10px 0 6px;
  color: #203029;
  font-size: var(--type-kpi);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.demo-kpi > strong.textual { font-size: 19px; }

.demo-kpi > small {
  color: #6f7b75;
  min-height: 18px;
  font-size: var(--type-support);
  line-height: 1.45;
}

.demo-kpi > small b { color: #1b835b; }
.demo-workspace .warn { color: #956311 !important; background-color: #fff2d9 !important; }
.demo-workspace .danger { color: #b94f4f !important; background-color: #fff0ef !important; }

.demo-kpi > svg {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 70px;
  height: 24px;
  overflow: visible;
}

.demo-kpi > svg path:not(.area) {
  fill: none;
  stroke: #42a77d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-kpi > svg .area { fill: url(#kpi-fill); }

.decision-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--space-grid);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, var(--surface), #f0f7f3);
  box-shadow: var(--shadow-card);
}

.decision-strip article {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
  color: var(--muted-strong);
}

.decision-strip article:last-child { border-right: 0; }
.decision-strip small { color: var(--muted); font-size: var(--type-support); }
.decision-strip strong { display: block; margin: 6px 0 4px; color: var(--text); font-size: var(--type-card-title); }
.decision-strip p { color: var(--muted); font-size: var(--type-support); }
.decision-strip button { color: var(--accent-strong); }

.demo-chart-card { min-height: 350px; }
.gmv-chart-header { align-items: flex-start; }
.gmv-chart-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.gmv-chart-tools > span { color: var(--text-support-readable); font-size: var(--type-support); white-space: nowrap; }
.gmv-view-switch {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #cfddd6;
  border-radius: 8px;
  padding: 3px;
  background: #f3f8f5;
}
.gmv-view-switch button {
  width: auto;
  min-width: 82px;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  color: #5e6d66;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  transform: none;
}
.gmv-view-switch button:hover { color: var(--accent-strong); background: rgba(255,255,255,.72); box-shadow: none; transform: none; }
.gmv-view-switch button.is-active { color: #125d45; background: #fff; box-shadow: 0 2px 7px rgba(28,75,56,.11); }
.gmv-view-switch button:focus-visible { outline: 2px solid rgba(20,122,87,.54); outline-offset: 2px; }
.demo-chart { position: relative; height: 278px; min-width: 0; outline: none; }
.demo-chart:focus-visible { outline: 2px solid rgba(20, 122, 87, 0.5); outline-offset: 2px; border-radius: 7px; }
.demo-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid line { stroke: #dfe7e2; stroke-width: 1; stroke-dasharray: 3 5; }
.demo-chart .chart-area { fill: url(#kpi-fill); opacity: 0.38; }
.demo-chart .series { fill: none; stroke: var(--demo-green); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 3px 4px rgba(30,70,50,.08)); }
.demo-chart .series.comparison { stroke-dasharray: 8 6; stroke-width: 2.4; }
.demo-chart .series.blue { stroke: var(--demo-blue); }
.demo-chart .series.amber { stroke: var(--demo-amber); }
.demo-chart .target-line { stroke: var(--demo-amber); stroke-width: 2; stroke-dasharray: 6 6; }
.demo-chart .trend-crosshair { stroke: #73847b; stroke-width: 1; stroke-dasharray: 3 3; }
.trend-points circle { fill: #fff; stroke: var(--demo-green); stroke-width: 3; transition: cx 120ms ease, cy 120ms ease; }
.trend-points circle.primary { stroke: var(--demo-green); }
.trend-points circle.blue { stroke: var(--demo-blue); }
.trend-points circle.amber { stroke: var(--demo-amber); }
.gmv-stack-layer { opacity: 1; transition: opacity 150ms ease; }
.gmv-stack-layer[hidden],
.demo-chart .chart-area[hidden],
.demo-chart .series[hidden],
.demo-chart .target-line[hidden] { display: none; }
.gmv-stack-day { opacity: .9; transition: opacity 140ms ease, filter 140ms ease; }
.gmv-stack-day.is-active { opacity: 1; filter: drop-shadow(0 5px 7px rgba(26,67,51,.16)); }
.gmv-stack-segment { fill: var(--demo-green); stroke: rgba(255,255,255,.9); stroke-width: 1; }
.gmv-stack-segment.blue { fill: var(--demo-blue); }
.gmv-stack-segment.amber { fill: var(--demo-amber); }

.chart-legend { display: flex; align-items: center; gap: 12px; color: #65716c; font-size: var(--type-support); }
.chart-legend span i { display: inline-block; width: 12px; height: 3px; margin-right: 4px; background: var(--demo-green); }
.chart-legend span i.blue { background: var(--demo-blue); }
.chart-legend span i.amber { background: var(--demo-amber); }
.chart-legend span i.target-key { height: 0; border-top: 2px dashed var(--demo-amber); background: transparent; }
.chart-legend em { margin-left: auto; font-style: normal; }

.matrix-head,
.matrix-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(48px,.7fr) minmax(88px,1.4fr) minmax(52px,.8fr) minmax(48px,.8fr) 32px;
  gap: 4px;
  align-items: center;
}

.matrix-head { padding: 4px 5px 8px; border-bottom: 1px solid var(--divider); color: var(--text-support-readable); font-size: var(--type-support); }
.matrix-row { min-height: 48px; border-bottom: 1px solid var(--divider); padding: 7px 5px !important; color: #425048 !important; text-align: left; }
.matrix-row:hover,.matrix-row:focus-visible { background: var(--surface-subtle); transform: none; }
.matrix-row span { font-size: var(--type-support); }
.matrix-row i { color: #a16219; font-style: normal; text-align: center; }
.truth-note { margin-top: 10px; border-radius: 7px; padding: 8px; background: var(--surface-subtle); }

.stack-row,
.source-share-row { display: grid; grid-template-columns: minmax(72px, auto) minmax(0,1fr) 50px; gap: 8px; align-items: center; padding: 8px 0; font-size: var(--type-support); }
.stack-row > span,
.source-share-row > span { height: 9px; display: flex; overflow: hidden; border-radius: 999px; background: var(--divider); }
.stack-row i,
.source-share-row i { display: block; background: linear-gradient(90deg, #168765, #65b69a); }
.stack-row i:nth-child(2) { background: linear-gradient(90deg, #6283a0, #91abc0); }
.stack-row i:nth-child(3) { background: linear-gradient(90deg, #c78a34, #e3b36c); }
.stack-row em,
.source-share-row em { font-style: normal; text-align: right; }

.rank-list,.donut-legend,.refund-rank { margin: 0; padding: 0; list-style: none; }
.rank-list li { display: grid; grid-template-columns: 82px minmax(0,1fr) 58px; gap: 8px; align-items: center; padding: 8px 0; font-size: var(--type-support); }
.rank-list li > span,.profit-bars div > span,.issue-bars div > span { height: 7px; overflow: hidden; border-radius: 999px; background: var(--divider); }
.rank-list li > span::before { content: ""; display: block; width: var(--bar); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#147a57,#48ae84); }
.rank-list em { font-style: normal; text-align: right; }

.donut-layout { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px; align-items: center; }
.donut-chart { width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#168765 0 76%,#c78a34 76% 90%,#e8eeea 90%); box-shadow: inset 0 0 0 1px rgba(24, 33, 29, 0.05); }
.donut-chart::before { content: ""; grid-area: 1/1; width: 76px; height: 76px; border-radius: 50%; background: #fff; }
.donut-chart > span { grid-area: 1/1; z-index: 1; display: grid; text-align: center; font-size: 18px; font-weight: 850; }
.donut-chart small { font-size: var(--type-support); font-weight: 650; color: var(--demo-muted); }
.blue-donut { background: conic-gradient(#168765 0 70%,#6283a0 70% 83%,#bd5d5d 83% 88%,#c78a34 88%); }
.amber-donut { background: conic-gradient(#168765 0 76%,#bd5d5d 76% 94%,#c78a34 94%); }
.donut-chart:focus-visible { outline: 3px solid rgba(20,122,87,.36); outline-offset: 3px; }
.donut-legend li { display: flex; justify-content: space-between; gap: 7px; padding: 6px 0; border-bottom: 1px solid var(--divider); font-size: var(--type-support); }

.freshness-list p { display: flex; justify-content: space-between; gap: 8px; padding: 7px; border-bottom: 1px solid var(--divider); font-size: var(--type-support); }
.freshness-list .warn { border-radius: 6px; padding-inline: 7px; }

.bubble-chart { position: relative; height: 260px; border-left: 1px solid #d5ddd8; border-bottom: 1px solid #d5ddd8; background: linear-gradient(90deg,transparent 49.8%,var(--divider) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,var(--divider) 50%,transparent 50.2%); }
.bubble-axis-x,.bubble-axis-y { position: absolute; z-index: 1; color: var(--text-support-readable); font-size: var(--type-support); font-weight: 720; pointer-events: none; }
.bubble-axis-x { right: 6px; bottom: 6px; }
.bubble-axis-y { top: 6px; left: 6px; writing-mode: vertical-rl; transform: rotate(180deg); }
.bubble-chart .bubble-point { position: absolute; left: var(--x); top: var(--y); width: var(--s); min-width: var(--s); height: var(--s); min-height: var(--s); border: 0; padding: 0; border-radius: 50%; background: linear-gradient(145deg,#147a57,#54b28c); box-shadow: 0 8px 16px rgba(20,122,87,.18); cursor: pointer; }
.bubble-chart .bubble-point.blue { background: linear-gradient(145deg,#577894,#8aa8bd); }
.bubble-chart .bubble-point.amber { background: linear-gradient(145deg,#c9852c,#efb45d); }
.bubble-chart .bubble-point:hover { transform: scale(1.12); }
.bubble-chart .bubble-point:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 8px 16px rgba(20,122,87,.18);
}

.plan-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-grid); margin-bottom: var(--space-grid); }
.plan-cards article { padding: 11px; }
.plan-cards header { margin: 0; }
.plan-cards p { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 9px 0; color: var(--demo-muted); font-size: var(--type-support); }
.plan-cards p b { display: block; margin-top: 3px; color: var(--demo-ink); font-size: 12px; }
.plan-cards svg { width: 100%; height: 34px; }
.plan-cards svg path { fill: none; stroke: var(--demo-green); stroke-width: 2; }

.table-card { margin-bottom: var(--space-grid); }
.demo-table-wrap { max-width: 100%; overflow-x: clip; }
.demo-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--type-body); }
.demo-table th { padding: 8px; color: var(--text-support-readable); font-size: var(--type-support); text-align: left; background: var(--surface-subtle); }
.demo-table td { padding: 9px 8px; border-bottom: 1px solid var(--divider); }
.demo-table tbody tr { transition: background-color 150ms ease; }
.demo-table tbody tr:hover { background: var(--surface-subtle); }

.profit-bars div,.issue-bars div { display: grid; grid-template-columns: 90px minmax(0,1fr) 62px; gap: 8px; align-items: center; padding: 10px 0; font-size: 12px; }
.profit-bars div > span i,.issue-bars div > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#147a57,#48ae84); }
.profit-bars div > span i.warn,.issue-bars i.amber { background: linear-gradient(90deg,#ca812b,#efb35e) !important; }
.issue-bars i.blue { background: linear-gradient(90deg,#557994,#83a6bd) !important; }
.issue-bars i.danger { background: linear-gradient(90deg,#bd5551,#e5867e) !important; }
.profit-bars em,.issue-bars em { font-style: normal; text-align: right; }
.pareto-line { width: 100%; height: 36px; }
.pareto-line path { fill: none; stroke: var(--demo-amber); stroke-width: 2.5; stroke-linecap: round; }
.cost-stack { height: 14px; display: flex; overflow: hidden; margin-top: 12px; border-radius: 999px; }
.cost-stack i:nth-child(1){background:#147a57}.cost-stack i:nth-child(2){background:#6885a1}.cost-stack i:nth-child(3){background:#d79738}.cost-stack i:nth-child(4){background:#c6d1cb}
.refund-rank li { display: grid; grid-template-columns: minmax(90px,1fr) 90px 70px; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 12px; }
.refund-rank em { font-style: normal; text-align: right; }
.cost-missing-head { display: grid; grid-template-columns: minmax(90px,1fr) 90px 90px; gap: 8px; padding: 0 0 7px; border-bottom: 1px solid var(--divider); color: var(--text-support-readable); font-size: var(--type-support); }
.profit-support-grid .span-12 { grid-column: span 12; }

.profit-cost-compare {
  position: relative;
  overflow: hidden;
  border-color: #d4dfd8;
  background:
    linear-gradient(135deg, rgba(247, 251, 248, 0.96), rgba(255, 251, 241, 0.82)),
    repeating-linear-gradient(90deg, rgba(25, 88, 64, 0.035) 0 1px, transparent 1px 18px);
}

.profit-cost-compare > header {
  align-items: flex-start;
  margin-bottom: 12px;
}

.profit-cost-compare > header > span {
  flex: 0 0 auto;
  border: 1px solid #e3bd73;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff6df;
  color: #8a6018;
  font-weight: 760;
}

.platform-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid);
  margin-bottom: var(--space-grid);
}

.cost-compare-card {
  min-width: 0;
  border: 1px solid #d7e2dc;
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cost-compare-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.cost-compare-head b {
  color: var(--text);
  font-size: var(--type-card-title);
}

.cost-compare-head small {
  color: var(--text-support-readable);
  font-size: var(--type-support);
  font-weight: 720;
}

.cost-slope-chart {
  display: grid;
  gap: 10px;
}

.cost-slope-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 64px 72px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  color: #425149;
  font-size: var(--type-support);
}

.cost-slope-row > span {
  color: var(--text);
  font-weight: 780;
}

.cost-slope-row > i {
  position: relative;
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3ebe6;
}

.cost-slope-row > i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #177f5b, #6ab996);
}

.cost-slope-row.is-kuaishou > i::before {
  background: linear-gradient(90deg, #5f8099, #9bb5c5);
}

.cost-slope-row.is-wechat > i::before {
  background: linear-gradient(90deg, #c58a34, #e6bb74);
}

.cost-slope-chart--ads .cost-slope-row.is-kuaishou > i::before,
.cost-slope-chart--ads .cost-slope-row.is-wechat > i::before {
  background: repeating-linear-gradient(90deg, #c9923f 0 6px, #efd29a 6px 10px);
}

.cost-slope-row > em {
  color: var(--text);
  font-style: normal;
  font-weight: 760;
  text-align: right;
}

.cost-slope-row > small {
  color: var(--text-support-readable);
  text-align: right;
  white-space: nowrap;
}

.cost-proof-wrap {
  border: 1px solid #dde7e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.cost-proof-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #3e4c45;
  font-size: var(--type-body);
}

.cost-proof-table th {
  padding: 8px;
  color: var(--text-support-readable);
  font-size: var(--type-support);
  text-align: left;
  background: #f3f8f5;
}

.cost-proof-table td {
  padding: 9px 8px;
  border-top: 1px solid var(--divider);
  vertical-align: top;
}

.history-period-controls { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: var(--space-grid); }
.history-period-controls .seg-btn { min-height: 34px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; color: var(--muted-strong); background: var(--surface); font-size: var(--type-support); }
.history-period-controls .seg-btn.active { border-color: var(--accent); color: #fff; background: var(--accent); }

.ads-source-card,
[data-testid="ads-source-structure"],
.high-gmv-profit-review,
[data-testid="high-gmv-profit-review"] {
  margin-bottom: var(--space-grid);
}

.issue-evidence-card,
.issue-evidence-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(210px, 1.1fr);
  gap: var(--space-section);
  align-content: start;
}

.issue-evidence-card > header,
.issue-evidence-grid > header {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.issue-impact-rank,
[data-testid="issue-impact-ranking"] {
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: var(--space-section);
}

.issue-impact-rank h3,
[data-testid="issue-impact-ranking"] h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: var(--type-body);
}

.heatmap { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: 28px; gap: 4px; min-height: 188px; }
.issue-heat { grid-template-columns: repeat(16,minmax(0,1fr)); min-height: 156px; }
.heatmap button { width: 100%; min-width: 0; min-height: 0; border: 0; padding: 0; border-radius: 3px; background: var(--divider); box-shadow: none; cursor: pointer; transition: transform 150ms ease,filter 150ms ease; }
.heatmap button:nth-child(5n) { background: #c7dfd3; }
.heatmap button:nth-child(7n) { background: #72aa90; }
.heatmap button:nth-child(13n) { background: var(--risk); }
.heatmap button:hover { z-index: 2; transform: scale(1.12); filter: saturate(1.2); box-shadow: 0 4px 10px rgba(42,67,54,.18); }
.heatmap button:focus-visible {
  z-index: 2;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(42,67,54,.18);
}

.anomaly-list { margin-bottom: 9px; }
.anomaly-list > div { display: grid; grid-template-columns: 42px minmax(150px,1fr) minmax(120px,1fr) 70px; gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--divider); font-size: 12px; }
.anomaly-list i { color: #a25525; font-style: normal; }

.owner-grid article { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.owner-grid article span,.owner-grid article small { font-size: var(--type-support); color: var(--demo-muted); }
.owner-grid article strong { grid-row: span 2; align-self: center; font-size: 25px; color: var(--demo-green); }

.priority-list { margin-bottom: 9px; }
.priority-list > div { width: 100%; min-height: 48px; display: grid; grid-template-columns: 72px minmax(150px,1fr) minmax(160px,1.2fr) 54px 70px; gap: 8px; align-items: center; border-bottom: 1px solid var(--divider); border-radius: 6px; padding: 7px 5px; color: #435149; text-align: left; }
.priority-list > div:hover { background: var(--surface-subtle); }
.priority-list > div i { font-style: normal; }
.priority-list > div strong { color: #176e50; }

.demo-tooltip {
  position: fixed;
  z-index: 80;
  width: 240px;
  max-width: calc(100vw - 24px);
  border-radius: 9px;
  padding: 12px;
  background: rgba(21,43,34,.96);
  color: #fff;
  box-shadow: 0 14px 34px rgba(18,40,31,.25);
  pointer-events: none;
}
.demo-tooltip time,.demo-tooltip span { display:block; color:#d4e3dc; font-size:var(--type-support); }
.demo-tooltip strong { display:block; margin:5px 0; font-size:14px; }
.demo-tooltip-rows { display: grid; gap: 7px; margin: 8px 0; }
.demo-tooltip-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; font-size: 12px; }
.demo-tooltip-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-green); }
.demo-tooltip-row i.primary { background: var(--demo-green); }
.demo-tooltip-row i.blue { background: var(--demo-blue); }
.demo-tooltip-row i.amber { background: var(--demo-amber); }
.demo-tooltip-row span { min-width: 0; overflow: hidden; color: #f3faf6; text-overflow: ellipsis; white-space: nowrap; }
.demo-tooltip-row strong { margin: 0; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 1280px) {
  .demo-chart { height: 278px; }
  .overview-drivers .span-3 { grid-column: span 6; }
  .issue-evidence-card,
  .issue-evidence-grid { grid-template-columns: 112px minmax(0,1fr); gap: 12px; }
  .issue-evidence-card > .donut-layout,
  .issue-evidence-grid > .donut-layout { grid-template-columns: 1fr; gap: 8px; }
  .issue-impact-rank li,
  [data-testid="issue-impact-ranking"] li { grid-template-columns: minmax(72px,.8fr) minmax(0,1fr) 58px; }
}

@media (max-width: 1100px) {
  .gmv-chart-header { align-items: flex-start; }
  .gmv-chart-tools { align-items: flex-end; flex-direction: column; gap: 6px; }
  .demo-grid .span-7,.demo-grid .span-5 { grid-column: span 12; }
  .demo-grid .span-4,.demo-grid .span-3 { grid-column: span 6; }
  .decision-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .decision-strip article:nth-child(2) { border-right: 0; }
  .decision-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .priority-list > div { grid-template-columns: 70px minmax(140px,1fr) minmax(130px,1fr) 56px; }
  .priority-list > div > strong { display: none; }
  .issue-evidence-card,
  .issue-evidence-grid { grid-template-columns: minmax(190px,.9fr) minmax(210px,1.1fr); gap: var(--space-section); }
  .issue-evidence-card > .donut-layout,
  .issue-evidence-grid > .donut-layout { grid-template-columns: 112px minmax(0,1fr); gap: 14px; }
  .issue-impact-rank li,
  [data-testid="issue-impact-ranking"] li { grid-template-columns: 82px minmax(0,1fr) 58px; }
}

@media (max-width: 1024px) {
  .gmv-chart-header { display: grid; gap: 10px; }
  .gmv-chart-tools { align-items: center; flex-direction: row; justify-content: space-between; }
  .demo-scopebar { flex-wrap: wrap; }
  .demo-scopebar em { margin-left: 0; }
  .demo-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plan-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .platform-cost-grid { grid-template-columns: 1fr; }
  .demo-table { min-width: 620px; }
  .demo-table-wrap,
  .cost-proof-wrap {
    max-width: 100%;
    overflow-x: auto;
    contain: paint;
  }
  .issue-evidence-card,
  .issue-evidence-grid { grid-template-columns: 1fr; }
  .issue-evidence-card > header,
  .issue-evidence-grid > header { grid-column: auto; }
  .issue-impact-rank,
  [data-testid="issue-impact-ranking"] { border-left: 0; border-top: 1px solid var(--border); padding: var(--space-section) 0 0; }
}

@media (max-width: 620px) {
  .dashboard-app {
    width: min(100vw - 16px, 1540px);
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    overflow-x: hidden;
  }

  body[data-active-dashboard="assistant"] .dashboard-app {
    grid-template-rows: auto minmax(0, 1fr);
  }

  body[data-active-dashboard="assistant"] .dashboard-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(164px, 210px);
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
  }

  body[data-active-dashboard="assistant"] .dashboard-sidebar .rail-brand {
    min-width: 0;
    margin: 0;
  }

  body[data-active-dashboard="assistant"] .dashboard-sidebar .rail-brand small {
    display: none;
  }

  body[data-active-dashboard="assistant"] .dashboard-sidebar .rail-label,
  body[data-active-dashboard="assistant"] .dashboard-sidebar .platform-rail {
    display: none;
  }

  body[data-active-dashboard="assistant"] .dashboard-sidebar .assistant-entry {
    position: static;
    inset: auto;
    width: 100%;
    min-height: 56px;
    margin: 0;
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    gap: 8px;
    padding: 7px 8px;
  }

  body[data-active-dashboard="assistant"] .dashboard-sidebar .agent-launcher-avatar {
    width: 40px;
    height: 40px;
  }

  body[data-active-dashboard="assistant"] .dashboard-sidebar .agent-launcher-avatar svg {
    width: 31px;
    height: 31px;
  }

  body[data-active-dashboard="assistant"] .all-platform-tabs,
  body[data-active-dashboard="assistant"] .complete-day-filter {
    display: none !important;
  }

  .dashboard-sidebar {
    position: static;
    min-height: 0;
    height: auto;
    padding: 8px;
    border-radius: 10px;
  }

  .rail-brand {
    margin: 0 0 8px;
  }

  .rail-label,
  .rail-foot {
    display: none;
  }

  .platform-rail {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .platform-rail a {
    min-height: 36px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 6px;
    font-size: 12px;
  }

  .platform-rail a small {
    display: none;
  }

  .platform-rail .tab-logo {
    width: 22px;
    height: 22px;
  }

  .dashboard-app .topbar {
    grid-template-columns: var(--nav-topbar-compact-columns);
    gap: var(--nav-topbar-compact-gap);
    max-width: 100%;
    overflow: hidden;
  }

  .dashboard-app > .shell,
  .demo-workspace,
  .demo-page {
    overflow-x: hidden;
  }

  body[data-active-dashboard="assistant"] .dashboard-app > .shell {
    height: 100%;
    min-height: 0;
  }

  .all-platform-tabs {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    overscroll-behavior-x: contain;
  }

  .all-platform-tabs button {
    flex: 0 0 76px;
    min-width: 76px;
  }

  .complete-day-filter {
    grid-column: 1;
    justify-self: stretch;
  }

  .cost-slope-row {
    grid-template-columns: 48px minmax(0, 1fr) 58px;
  }

  .cost-slope-row > small {
    grid-column: 2 / -1;
    justify-self: start;
    text-align: left;
  }

  .cost-proof-table {
    min-width: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-page { animation: none; }
  .demo-card,.heatmap button,.bubble-chart .bubble-point,.demo-table tbody tr,.decision-strip button,.trend-points circle { transition: none; }
  .demo-card:is(:hover,:focus-within),.heatmap button:hover,.bubble-chart .bubble-point:hover { transform: none; }
}

/* Approved A: 精致浅绿 shell surface only. No layout, content, or behavior changes. */
.dashboard-app .topbar {
  border: 1px solid #dfe8e3;
  border-top: 1px solid #dfe8e3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(25, 48, 38, 0.06);
}

.dashboard-app .all-platform-tabs button.is-active {
  background: #eaf5ef;
  color: #145f42;
  box-shadow: inset 0 -2px 0 #17805b;
}

.dashboard-app .demo-card,
.dashboard-app .decision-strip {
  border-color: #dfe8e3;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(25, 48, 38, 0.06);
}

.dashboard-app .demo-card:is(:hover, :focus-within) {
  transform: none;
  box-shadow: 0 10px 24px rgba(25, 48, 38, 0.08);
}

/* Real all-platform overview states. Business values are mounted by app.js only. */
.overview-scopebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 0 var(--space-grid);
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted-strong);
  box-shadow: 0 6px 18px rgba(25, 48, 38, 0.04);
}

.overview-scopebar strong {
  color: var(--accent-strong);
}

.overview-scopebar[hidden] {
  display: none;
}

.overview-scopebar span {
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

.status-meta-strip[data-overview-scopebar] {
  min-width: 0;
  flex-wrap: nowrap;
  margin: 0 0 var(--space-grid);
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted-strong);
  box-shadow: 0 6px 18px rgba(25, 48, 38, 0.04);
}

.status-meta-strip[data-overview-scopebar] strong {
  color: var(--accent-strong);
}

.status-meta-strip[data-overview-scopebar][hidden] {
  display: none;
}

.status-meta-strip[data-overview-scopebar] > span,
.status-meta-strip[data-overview-scopebar] .status-line,
.status-meta-strip[data-overview-scopebar] .meta-line span {
  border-left: 1px solid var(--border);
  padding-left: 8px;
  white-space: nowrap;
}

.status-meta-strip[data-overview-scopebar] .status-line {
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 8px;
  background: transparent;
  box-shadow: none;
}

.status-meta-strip[data-overview-scopebar] .meta-line {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  row-gap: 0;
}

.status-meta-strip[data-overview-scopebar] .meta-line span {
  min-height: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted-strong);
}

.status-meta-strip[data-overview-scopebar] .scopebar-note {
  min-width: 0;
  overflow: hidden;
  color: #5c6b62;
  text-overflow: ellipsis;
}

.business-workspace,
.business-page,
.overview-grid-two,
.overview-card,
.platform-comparison-panel {
  min-width: 0;
}

.business-workspace {
  overflow-x: clip;
}

.business-page {
  display: grid;
  overflow-x: clip;
  gap: var(--space-grid);
}

.overview-reference-shell {
  gap: 10px;
}

.overview-reference-shell .demo-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.overview-reference-shell .overview-metric-card {
  min-height: 132px;
  padding: 18px;
}

.overview-reference-shell .metric-quality-label {
  align-self: flex-start;
}

.overview-truth-note {
  margin: -2px 2px 2px;
}

.overview-hero-grid,
.overview-support-grid {
  align-items: stretch;
}

.overview-hero-grid {
  gap: 12px;
}

.overview-meta-list {
  display: grid;
  gap: 9px;
}

.overview-meta-list p {
  display: grid;
  grid-template-columns: minmax(82px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  border-bottom: 1px solid var(--divider);
  padding: 0 0 8px;
}

.overview-meta-list p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.overview-meta-list b {
  color: var(--muted-strong);
  font-size: var(--type-support);
}

.overview-meta-list span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--type-support);
  font-weight: 740;
  text-align: right;
}

.overview-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
  gap: var(--space-grid);
}

.business-page[hidden] {
  display: none;
}

.overview-meta-grid,
.overview-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-grid);
}

.overview-meta-card,
.overview-metric-card,
.overview-card,
.unavailable-card {
  border: 1px solid #dfe8e3;
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(25, 48, 38, 0.06);
}

.overview-meta-card,
.overview-metric-card {
  min-width: 0;
  padding: 14px;
}

.overview-metric-card {
  --kpi-card-ink: #16211c;
  --kpi-card-muted: #64746d;
  --kpi-card-accent: #168f72;
  --kpi-card-accent-soft: rgba(22, 143, 114, 0.08);
  --kpi-card-gradient: linear-gradient(145deg, #ffffff 0%, #fbfffd 48%, #ecfff8 100%);
  --kpi-card-glow: rgba(22, 143, 114, 0.09);
  isolation: isolate;
  min-height: 134px;
  border-color: color-mix(in srgb, var(--kpi-card-accent) 13%, #dce6e0);
  padding: 17px 18px 15px;
  background: var(--kpi-card-gradient);
  box-shadow: 0 10px 24px var(--kpi-card-glow);
}

.dashboard-app .overview-metric-card {
  box-shadow: 0 10px 24px var(--kpi-card-glow);
}

.overview-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 16px auto;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kpi-card-accent) 52%, transparent);
  opacity: 0.72;
}

.overview-metric-card::after {
  content: none;
}

.overview-metric-card[data-kpi-kind="orders"] {
  --kpi-card-accent: #2588b8;
  --kpi-card-accent-soft: rgba(37, 136, 184, 0.08);
  --kpi-card-gradient: linear-gradient(145deg, #ffffff 0%, #fbfeff 48%, #eefaff 100%);
  --kpi-card-glow: rgba(37, 136, 184, 0.09);
}

.overview-metric-card[data-kpi-kind="refund"] {
  --kpi-card-accent: #b97924;
  --kpi-card-accent-soft: rgba(185, 121, 36, 0.08);
  --kpi-card-gradient: linear-gradient(145deg, #ffffff 0%, #fffdf9 48%, #fff5ea 100%);
  --kpi-card-glow: rgba(185, 121, 36, 0.09);
}

.overview-metric-card[data-kpi-kind="profit"] {
  --kpi-card-accent: #718c41;
  --kpi-card-accent-soft: rgba(113, 140, 65, 0.08);
  --kpi-card-gradient: linear-gradient(145deg, #ffffff 0%, #fdfef8 48%, #f7fce9 100%);
  --kpi-card-glow: rgba(113, 140, 65, 0.09);
}

.overview-metric-card .kpi-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.overview-metric-card .kpi-card-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--kpi-card-muted);
  font-size: var(--type-support);
  font-weight: 720;
  letter-spacing: 0.02em;
}

.overview-metric-card .kpi-card-code {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--kpi-card-accent-soft);
  color: color-mix(in srgb, var(--kpi-card-accent) 76%, #24352f);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.08em;
  line-height: 1;
}

.overview-meta-card span,
.overview-metric-card span,
.overview-metric-card small {
  display: block;
  color: var(--text-support-readable);
  font-size: var(--type-support);
}

.overview-meta-card strong {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 6px;
  color: var(--text);
  font-size: var(--type-body);
}

.overview-summary-section {
  min-width: 0;
}

.overview-summary-section .section-head {
  margin-bottom: 8px;
}

.overview-summary-section .section-head h2,
.overview-card-head h2,
.unavailable-card h2 {
  margin: 0;
  font-size: var(--type-card-title);
}

.overview-summary-section .section-head p,
.overview-card-head p,
.unavailable-card p {
  margin: 4px 0 0;
  color: var(--text-support-readable);
  font-size: var(--type-support);
}

.overview-metric-card strong {
  display: block;
  margin: 17px 0 13px;
  color: var(--kpi-card-ink);
  font-size: var(--type-kpi);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.overview-metric-card .kpi-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.overview-metric-card small,
.overview-metric-card .kpi-card-compare {
  max-width: 100%;
  color: var(--kpi-card-muted);
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: keep-all;
  font-weight: 650;
}

.overview-metric-card .kpi-card-compare {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--kpi-card-accent) 7%, #ffffff);
  color: color-mix(in srgb, var(--kpi-card-accent) 46%, #53625c);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.overview-metric-card .kpi-card-compare.is-up {
  background: color-mix(in srgb, #1b7f5f 8%, #f7faf7);
  color: #246b53;
}

.overview-metric-card .kpi-card-compare.is-down {
  background: color-mix(in srgb, #8a6b43 9%, #f8f7f3);
  color: #715b39;
}

.overview-metric-card .kpi-card-compare.is-flat,
.overview-metric-card .kpi-card-compare.is-empty {
  color: #6a7771;
}

.overview-metric-card.is-missing,
.overview-metric-card.is-loading,
#overviewPanel[data-overview-state="error"] .overview-card {
  border-color: color-mix(in srgb, var(--kpi-card-accent) 24%, #eadfcf);
}

.overview-metric-card.is-missing strong,
.overview-metric-card.is-loading strong {
  color: color-mix(in srgb, var(--kpi-card-ink) 58%, #7b8881);
}

.overview-card {
  overflow: hidden;
  padding: 15px;
}

.overview-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.trend-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.trend-controls button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  padding: 5px 10px;
  background: transparent;
  color: var(--muted-strong);
  font-size: var(--type-support);
  font-weight: 720;
  transform: none;
}

.trend-controls button:is(:hover, :focus-visible) {
  background: var(--surface-soft);
  transform: none;
}

.trend-controls button.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.trend-range-controls button {
  min-width: 44px;
}

#overviewTrend {
  position: relative;
  min-width: 0;
}

#overviewTrend .chart-frame {
  position: relative;
  height: 268px;
  overflow: hidden;
  border-color: rgba(232, 221, 207, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 246, 239, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(42, 32, 23, 0.045);
}

#overviewTrend .chart-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(87, 111, 106, 0.042) 1px, transparent 1px),
    linear-gradient(180deg, rgba(87, 111, 106, 0.042) 1px, transparent 1px);
  background-size: 88px 100%, 100% 56px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  pointer-events: none;
}

#overviewTrend .trend-chart {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gmv-chart-grid {
  color: #667386;
}

.gmv-chart-grid-line {
  stroke: #dce5ee;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.gmv-axis-label {
  fill: #667386;
  font-size: 12px;
  font-weight: 740;
  letter-spacing: -0.02em;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-linejoin: round;
  stroke-width: 4px;
  text-anchor: end;
}

.gmv-chart-x-axis-line {
  stroke: #dce5ee;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.gmv-x-axis-label {
  fill: #667386;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: -0.01em;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-linejoin: round;
  stroke-width: 4px;
}

#overviewTrend .series {
  --series-color: #20bfa6;
  fill: none;
  stroke: var(--series-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: none;
  stroke-opacity: 1;
  transition: opacity 170ms ease, stroke-opacity 170ms ease, stroke-width 170ms ease, filter 170ms ease;
  animation: gmv-line-draw 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--series-index, 0) * 80ms);
}

#overviewTrend .series.blue {
  --series-color: #3c9ddd;
  filter: none;
}

#overviewTrend .series.amber {
  --series-color: #ff8555;
  filter: none;
}

#overviewTrend .series.gray {
  --series-color: #8792a2;
  filter: none;
}

#overviewTrend .series.is-focused {
  stroke-width: 5;
  opacity: 1;
  filter: drop-shadow(0 4px 8px rgba(23, 32, 42, 0.16));
}

.business-workspace.has-platform-focus [data-platform-code] {
  transition: opacity 170ms ease, filter 170ms ease, transform 170ms ease, background 170ms ease, box-shadow 170ms ease, color 170ms ease;
}

.business-workspace.has-platform-focus [data-platform-code].is-dimmed {
  opacity: 0.42;
  filter: saturate(0.42) contrast(0.92);
}

.business-workspace.has-platform-focus [data-platform-code].is-focused {
  opacity: 1;
  filter: none;
}

.status-matrix-table tr.is-focused {
  background: linear-gradient(90deg, rgba(231, 245, 238, 0.94), rgba(255, 255, 255, 0.98));
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--text);
  font-weight: 850;
}

.status-matrix-table tr.is-focused a {
  color: var(--accent-strong);
  font-weight: 920;
}

.cost-proof-row.is-focused {
  background: linear-gradient(145deg, rgba(231, 245, 238, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: 0 14px 26px rgba(25, 132, 105, 0.11);
  transform: translateY(-1px);
}

.cost-proof-row.is-focused > strong {
  font-weight: 920;
}

#overviewTrend .series.is-dimmed {
  stroke: rgba(139, 153, 148, 0.72);
  stroke: color-mix(in srgb, var(--series-color) 46%, #9aa8a3 54%);
  opacity: 0.44;
  stroke-opacity: 0.58;
  filter: saturate(0.42) contrast(0.92);
}

#overviewTrend .gmv-series-glow.is-dimmed {
  stroke: rgba(188, 199, 195, 0.62);
  stroke: color-mix(in srgb, var(--series-color) 36%, #c2cbc7 64%);
  opacity: 0.045;
  stroke-opacity: 0.7;
  filter: saturate(0.42) contrast(0.92);
}

#overviewTrend .gmv-stack-segment.is-dimmed {
  opacity: 0.34;
  filter: saturate(0.42) contrast(0.92);
}

#overviewTrend .gmv-stack-segment.is-dimmed {
  fill-opacity: 0.52;
}

#overviewTrend .trend-point.is-dimmed {
  opacity: 0;
  stroke-opacity: 0;
}

.gmv-series-glow {
  --series-color: #20bfa6;
  fill: none;
  stroke: var(--series-color);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.055;
  filter: none;
  transition: opacity 170ms ease;
}

.gmv-series-glow.blue {
  --series-color: #3c9ddd;
}

.gmv-series-glow.amber {
  --series-color: #ff8555;
}

.gmv-series-glow.gray {
  --series-color: #8792a2;
}

#overviewTrend .line-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: crosshair;
  pointer-events: stroke;
}

.trend-point {
  fill: #fff;
  stroke: #20bfa6;
  stroke-width: 2.2;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.trend-point.blue {
  stroke: #3c9ddd;
}

.trend-point.amber {
  stroke: #ff8555;
}

.trend-point.gray {
  stroke: #8792a2;
}

#overviewTrend .trend-point.is-focused {
  opacity: 0;
}

.gmv-stack-segment.primary {
  fill: #20bfa6;
}

.gmv-stack-segment.blue {
  fill: #3c9ddd;
}

.gmv-stack-segment.amber {
  fill: #ff8555;
}

.gmv-stack-segment.gray {
  fill: #8792a2;
}

.overview-trend-area {
  fill: url(#overview-trend-area-gradient);
  opacity: 0.18;
  pointer-events: none;
}

.gmv-stack-segment {
  transition: opacity 170ms ease, filter 170ms ease, transform 170ms ease;
}

.gmv-stack-segment.is-focused {
  filter: drop-shadow(0 8px 14px rgba(30, 45, 38, 0.16));
}

.trend-hover-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.trend-hover-layer.is-visible {
  opacity: 1;
}

.trend-crosshair {
  stroke: rgba(38, 61, 55, 0.28);
  stroke-dasharray: 5 6;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

#overviewTrend .trend-hover-dot {
  fill: #fff;
  stroke: #20bfa6;
  stroke-width: 2.6;
  filter: drop-shadow(0 6px 12px rgba(25, 55, 46, 0.18));
}

#overviewTrend .trend-hover-dot.blue {
  stroke: #3c9ddd;
}

#overviewTrend .trend-hover-dot.amber {
  stroke: #ff8555;
}

#overviewTrend .trend-hover-dot.gray {
  stroke: #8792a2;
}

.trend-empty {
  position: absolute;
  inset: 50% auto auto 50%;
  margin: 0;
  color: var(--text-support-readable);
  font-size: var(--type-body);
  transform: translate(-50%, -50%);
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 12px;
  margin-top: 12px;
  color: var(--muted-strong);
  font-size: var(--type-support);
}

.trend-legend button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(188, 209, 202, 0.72);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-strong);
  font: inherit;
  font-weight: 760;
  gap: 7px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.trend-legend button:is(:hover, :focus-visible, .is-focused) {
  border-color: rgba(20, 134, 98, 0.35);
  background: rgba(231, 245, 238, 0.92);
  color: var(--accent-strong);
  box-shadow: 0 8px 18px rgba(24, 96, 75, 0.1);
  transform: translateY(-1px);
}

.trend-legend button.is-dimmed {
  opacity: 0.48;
  filter: saturate(0.42) contrast(0.92);
  transform: none;
}

@keyframes gmv-line-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0.2;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

#overviewPanel .status-matrix-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

#overviewPanel .status-matrix-table th,
#overviewPanel .status-matrix-table td {
  height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid #dce5ee;
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: keep-all;
}

#overviewPanel .status-matrix-table th {
  background: #f6f9fc;
  color: #445164;
  font-size: var(--type-support);
  font-weight: 800;
}

#overviewPanel .status-matrix-table tbody tr {
  transition:
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

#overviewPanel .status-matrix-table tbody tr:hover {
  background: #f7fbff;
}

#overviewPanel .status-matrix-table tbody tr:last-child td {
  border-bottom: 0;
}

#overviewPanel .status-matrix-table td strong {
  white-space: nowrap;
}

#overviewPanel .status-matrix-table td small {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
}

.status-matrix-table .matrix-col-platform {
  width: 14%;
}

.status-matrix-table .matrix-col-money,
.status-matrix-table .matrix-col-profit {
  width: 17%;
}

.status-matrix-table .matrix-col-orders {
  width: 12%;
}

.status-matrix-table .matrix-col-status {
  width: 23%;
}

.matrix-metric-cell {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  justify-content: start;
  gap: 6px;
  width: 100%;
}

.matrix-metric-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-status-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1280px) {
  .overview-hero-grid .span-7,
  .overview-hero-grid .span-5 {
    grid-column: 1 / -1;
  }
}

.status-matrix-table a {
  color: var(--accent-strong);
  font-weight: 760;
  text-decoration: none;
}

.unavailable-module {
  min-height: 360px;
  align-content: start;
}

.unavailable-page-head h2,
.unavailable-card h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--type-card-title);
}

.unavailable-page-head p {
  margin: 5px 0 0;
  color: var(--text-support-readable);
  font-size: var(--type-support);
}

.unavailable-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid);
}

.unavailable-card {
  width: 100%;
  min-width: 0;
  padding: 22px;
  text-align: left;
}

.ads-management-page {
  gap: 10px;
  margin-bottom: -24px;
}

.ads-platform-scroll {
  min-width: 0;
}

.ads-card-head,
.ads-platform-identity,
.ads-trend-head,
.ads-trend-toolbar,
.ads-platform-switch {
  display: flex;
  align-items: center;
}

.ads-card-head,
.ads-trend-head {
  justify-content: space-between;
  gap: 12px;
}

.ads-platform-identity h3,
.ads-metric-grid,
.ads-metric-grid dt,
.ads-metric-grid dd,
.ads-trend-head h2 {
  margin: 0;
}

.ads-section {
  min-width: 0;
  border: 1px solid #dfe8e3;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(25, 48, 38, 0.055);
}

.ads-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ads-platform-card {
  min-width: 0;
  border: 1px solid #dfe8e3;
  border-radius: 14px;
  padding: 13px 14px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(25, 48, 38, 0.055);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ads-platform-card:hover {
  border-color: #b9d4c7;
  box-shadow: 0 9px 20px rgba(25, 48, 38, 0.07);
  transform: translateY(-1px);
}

.ads-platform-card:focus-visible,
.ads-platform-card.is-focused {
  outline: none;
  border-color: #8fc7ae;
  box-shadow: 0 0 0 3px rgba(17, 133, 96, 0.11), 0 10px 22px rgba(25, 48, 38, 0.09);
}

/* 三平台投流卡对齐“全平台-经营总览”overview-metric-card 视觉体系 */
.ads-platform-card.ads-metric-card {
  --kpi-card-ink: #16211c;
  --kpi-card-muted: #64746d;
  --kpi-card-accent: #3a5f51;
  --kpi-card-accent-soft: rgba(58, 95, 81, 0.08);
  --kpi-card-gradient: linear-gradient(145deg, #ffffff 0%, #fbfdfc 48%, #eef5f1 100%);
  --kpi-card-glow: rgba(58, 95, 81, 0.09);
  position: relative;
  isolation: isolate;
  min-height: 134px;
  border: 1px solid color-mix(in srgb, var(--kpi-card-accent) 13%, #dce6e0);
  border-radius: 13px;
  padding: 17px 18px 15px;
  background: var(--kpi-card-gradient);
  box-shadow: 0 10px 24px var(--kpi-card-glow);
}

.ads-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 16px auto;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kpi-card-accent) 52%, transparent);
  opacity: 0.72;
  pointer-events: none;
}

.ads-metric-card[data-ads-platform="kuaishou"] {
  --kpi-card-accent: #d97f36;
  --kpi-card-accent-soft: rgba(217, 127, 54, 0.09);
  --kpi-card-gradient: linear-gradient(145deg, #ffffff 0%, #fffdf9 48%, #fff3e7 100%);
  --kpi-card-glow: rgba(217, 127, 54, 0.1);
}

.ads-metric-card[data-ads-platform="wechat-shop"] {
  --kpi-card-accent: #1e8a5f;
  --kpi-card-accent-soft: rgba(30, 138, 95, 0.08);
  --kpi-card-gradient: linear-gradient(145deg, #ffffff 0%, #fbfefc 48%, #ecf9f2 100%);
  --kpi-card-glow: rgba(30, 138, 95, 0.09);
}

.ads-metric-card.is-missing,
.ads-metric-card.is-loading {
  border-color: color-mix(in srgb, var(--kpi-card-accent) 24%, #eadfcf);
}

.ads-metric-card.is-missing .ads-metric-grid dd,
.ads-metric-card.is-loading .ads-metric-grid dd {
  color: color-mix(in srgb, var(--kpi-card-ink) 58%, #7b8881);
}

.ads-metric-card .ads-platform-mark {
  background: var(--kpi-card-accent);
}

.ads-metric-card .ads-metric-grid dt {
  color: var(--kpi-card-muted);
}

.ads-metric-card .ads-metric-grid dd {
  color: var(--kpi-card-ink);
  font-size: var(--type-kpi);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ads-platform-identity {
  flex: 0 0 auto;
  gap: 9px;
  min-width: 0;
}

.ads-platform-mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  place-items: center;
  color: #fff;
  background: #25332d;
  font-size: 14px;
  font-weight: 820;
}

.ads-platform-identity h3 {
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
}

.ads-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 9px;
  border-top: 1px solid #e7eeea;
}

.ads-metric-grid > div {
  min-width: 0;
  padding: 8px 5px 1px;
}

.ads-metric-grid dt {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.ads-metric-grid dd {
  margin-top: 3px;
  color: var(--text);
  font-size: 21px;
  font-weight: 820;
  line-height: 1;
}

.ads-trend-card {
  padding: 13px 16px 10px;
}

.ads-trend-head h2 {
  color: var(--text);
  font-size: var(--type-card-title);
}

.ads-trend-head {
  flex-wrap: wrap;
}

.ads-trend-toolbar {
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ads-segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #dfe8e3;
  border-radius: 10px;
  background: #f5f9f7;
}

.ads-segmented button,
.ads-platform-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  padding: 5px 10px;
  color: var(--muted-strong);
  background: transparent;
  font-size: 12px;
  font-weight: 720;
  box-shadow: none;
  transform: none;
}

.ads-segmented button:hover,
.ads-platform-switch button:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
  transform: none;
}

.ads-segmented button[aria-pressed="true"],
.ads-platform-switch button[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 3px 8px rgba(17, 117, 88, 0.16);
}

.ads-platform-switch {
  gap: 5px;
  margin-top: 0;
}

.ads-platform-switch small {
  margin-left: auto;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 680;
}

.ads-trend-chart {
  position: relative;
  width: 100%;
  height: 360px;
  margin: 7px auto 0;
  overflow: hidden;
  border-top: 1px solid #e7eeea;
}

.ads-trend-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ads-trend-y-axis text {
  fill: var(--muted-strong);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.ads-trend-grid line {
  stroke: #e6ede9;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ads-trend-preview-series[hidden],
.ads-trend-area[hidden],
.ads-trend-inspector[hidden],
.ads-trend-point[hidden],
.ads-trend-tooltip[hidden],
.ads-trend-empty[hidden] {
  display: none;
}

.ads-trend-area {
  pointer-events: none;
  opacity: 1;
  transition: opacity 170ms ease, filter 170ms ease;
}

.ads-trend-area.is-douyin {
  fill: url(#ads-trend-area-gradient-douyin);
}

.ads-trend-area.is-kuaishou {
  fill: url(#ads-trend-area-gradient-kuaishou);
}

.ads-trend-area.is-wechat-shop {
  fill: url(#ads-trend-area-gradient-wechat-shop);
}

.ads-trend-area.is-focused {
  opacity: 1;
}

.ads-trend-area.is-dimmed {
  opacity: 0.12;
  filter: saturate(0.28);
}

.ads-trend-series {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  transition: opacity 170ms ease, filter 170ms ease, stroke-width 170ms ease;
}

.ads-trend-series.is-douyin {
  stroke: #34413b;
}

.ads-trend-series.is-kuaishou {
  stroke: #ee8f45;
}

.ads-trend-series.is-wechat-shop {
  stroke: #23a36f;
}

.ads-trend-series.is-focused {
  stroke-width: 4.2;
  opacity: 1;
  filter: drop-shadow(0 3px 6px rgba(20, 52, 41, 0.18));
}

.ads-trend-series.is-dimmed {
  stroke-width: 2.1;
  opacity: 0.28;
  filter: saturate(0.35);
}

.ads-trend-hit {
  fill: none;
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 18;
  cursor: pointer;
  pointer-events: stroke;
  vector-effect: non-scaling-stroke;
}

.ads-trend-interaction {
  fill: transparent;
  cursor: crosshair;
  pointer-events: all;
}

.ads-trend-interaction:focus-visible {
  outline: none;
  stroke: rgba(22, 135, 101, 0.48);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}

.ads-trend-crosshair {
  stroke: rgba(52, 74, 65, 0.42);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.ads-trend-point {
  fill: #fff;
  stroke-width: 2.6;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  transition: opacity 150ms ease, r 150ms ease, filter 150ms ease;
}

.ads-trend-point.is-douyin {
  stroke: #34413b;
}

.ads-trend-point.is-kuaishou {
  stroke: #ee8f45;
}

.ads-trend-point.is-wechat-shop {
  stroke: #23a36f;
}

.ads-trend-point.is-focused {
  filter: drop-shadow(0 3px 7px rgba(20, 52, 41, 0.22));
}

.ads-trend-point.is-dimmed {
  opacity: 0.34;
  filter: saturate(0.3);
}

.ads-trend-tooltip {
  position: absolute;
  z-index: 6;
  width: 218px;
  max-width: calc(100% - 16px);
  border: 1px solid rgba(193, 207, 200, 0.92);
  border-radius: 10px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 30px rgba(24, 52, 42, 0.15);
  pointer-events: none;
}

.ads-trend-tooltip header,
.ads-trend-tooltip-row {
  display: flex;
  align-items: center;
}

.ads-trend-tooltip header {
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e5ece8;
}

.ads-trend-tooltip header strong {
  color: var(--text);
  font-size: 12px;
}

.ads-trend-tooltip header time {
  color: var(--muted);
  font-size: 12px;
}

.ads-trend-tooltip-rows {
  display: grid;
  gap: 6px;
  padding-top: 7px;
}

.ads-trend-tooltip-row {
  gap: 7px;
  color: var(--muted-strong);
  font-size: 12px;
  transition: opacity 150ms ease, color 150ms ease;
}

.ads-trend-tooltip-row i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fff;
}

.ads-trend-tooltip-row strong {
  margin-left: auto;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ads-trend-tooltip-row.is-douyin {
  color: #34413b;
}

.ads-trend-tooltip-row.is-kuaishou {
  color: #d8742d;
}

.ads-trend-tooltip-row.is-wechat-shop {
  color: #16845a;
}

.ads-trend-tooltip-row.is-focused {
  font-weight: 760;
}

.ads-trend-tooltip-row.is-dimmed {
  opacity: 0.38;
  filter: saturate(0.3);
}

.ads-trend-empty {
  fill: var(--muted);
  font-size: 29px;
  font-weight: 760;
}

.ads-trend-axis text {
  fill: var(--muted);
  font-size: 12px;
}

@media (max-width: 1040px) {
  .ads-platform-grid {
    gap: 8px;
  }

  .ads-platform-card {
    padding: 11px;
  }

  .ads-metric-card .ads-metric-grid dd {
    font-size: 22px;
  }

  .ads-trend-card {
    padding: 12px;
  }

  .ads-segmented button,
  .ads-platform-switch button {
    padding-right: 5px;
    padding-left: 5px;
  }
}

@media (max-width: 620px) {
  .ads-management-page {
    margin-bottom: 0;
  }

  .ads-platform-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .ads-platform-grid {
    min-width: 760px;
  }

  .ads-metric-card .ads-metric-grid dd {
    font-size: 20px;
  }

  .ads-trend-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ads-trend-toolbar {
    justify-content: flex-start;
  }

  .ads-platform-switch {
    flex-wrap: wrap;
  }

  .ads-platform-switch small {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.profit-cost-compare {
  grid-column: 1 / -1;
}

.cost-proof-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.cost-proof-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.cost-proof-legend span {
  border: 1px solid #d7e4dc;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-support-readable);
  font-size: var(--type-support);
  font-weight: 780;
}

.cost-proof-empty,
.cost-proof-row {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(243, 249, 246, 0.92), rgba(255, 255, 255, 0.96));
}

.cost-proof-empty {
  padding: 16px;
  color: var(--muted);
  font-size: var(--type-body);
}

.cost-proof-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.cost-proof-row > strong {
  color: var(--accent-strong);
  font-size: var(--type-body);
}

.cost-proof-metric {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(58px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-radius: 12px;
  padding: 9px 10px;
  background: var(--surface-raised);
  color: var(--text);
  overflow: hidden;
}

.cost-proof-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, rgba(25, 132, 105, 0.16), rgba(171, 111, 23, 0.12));
  opacity: 0.86;
}

.cost-proof-metric > * {
  position: relative;
  z-index: 1;
}

.cost-proof-metric i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(25, 132, 105, 0.12);
}

.cost-proof-metric b {
  color: var(--text-support-readable);
  font-size: var(--type-support);
}

.cost-proof-metric span {
  font-weight: 850;
  overflow-wrap: anywhere;
}

.cost-status-chip {
  display: inline-flex;
  justify-content: center;
  min-width: 42px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8efe3;
  color: #8a5b20;
  font-size: var(--type-support);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.cost-status-chip.is-valid,
.cost-status-chip.is-zero {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.cost-status-chip.is-missing,
.cost-status-chip.is-error {
  background: #fff1dd;
  color: #94631b;
}

.cost-status-chip[data-status-detail] {
  position: relative;
  cursor: help;
}

.cost-status-chip[data-status-detail]:hover::after,
.cost-status-chip[data-status-detail]:focus-visible::after {
  content: attr(data-status-detail);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: min(260px, 76vw);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  line-height: 1.5;
  white-space: normal;
}

.unavailable-card .module-state {
  display: inline-flex;
  margin-bottom: 12px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #f8efe3;
  color: #8a5b20;
  font-size: var(--type-support);
  font-weight: 760;
}

.unavailable-card [data-module-reason] {
  display: block;
  margin-top: 12px;
  color: var(--muted-strong);
  font-size: var(--type-body);
  overflow-wrap: anywhere;
}

.overview-refresh {
  flex: 0 0 auto;
  white-space: nowrap;
}

.overview-refresh:disabled {
  cursor: wait;
  opacity: 0.58;
}

/* Dashboard field contract: labels and metric values stay on one line.
   Long fields are clipped with an ellipsis; wide tables scroll inside their panel. */
.dashboard-app :where(
  .rail-brand b,
  .rail-brand small,
  .platform-rail a span:last-child,
  .platform-rail a small,
  .page-heading h1,
  .all-platform-tabs button span,
  .overview-scopebar strong,
  .overview-scopebar span,
  .status-meta-strip[data-overview-scopebar] strong,
  .status-meta-strip[data-overview-scopebar] span,
  .demo-kpi span,
  .demo-kpi strong,
  .demo-kpi small,
  .overview-metric-card span,
  .overview-metric-card strong,
  .overview-metric-card small,
  .overview-card h2,
  .overview-card h3,
  .overview-card small,
  .overview-meta-list b,
  .overview-meta-list span,
  .status-matrix-table strong,
  .status-matrix-table small,
  .metric-quality-label,
  .trend-actions span,
  .gmv-chart-tools > span,
  .cost-proof-metric b,
  .cost-proof-metric span,
  .cost-status-chip,
  .unavailable-card .module-state,
  .unavailable-card [data-module-reason],
  .schedule-tag-pill,
  .schedule-tag-empty
) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.dashboard-app :where(
  .demo-card,
  .overview-card,
  .overview-meta-list,
  .cost-proof-metric,
  .metric-quality-label,
  .schedule-tag-pill,
  .schedule-tag-empty
) {
  min-width: 0;
}

.dashboard-app :where(
  table th,
  table td,
  .status-matrix-table th,
  .status-matrix-table td,
  .schedule-table th,
  .schedule-table td
) {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.dashboard-app :where(
  .table-wrap,
  .status-matrix-wrap,
  .schedule-table-wrap,
  .schedule-table-scroll,
  .profit-table-wrap,
  .cost-proof-table-wrap
) {
  overflow-x: auto;
}

.dashboard-app .schedule-table-wrap {
  overflow-x: clip;
  overflow-y: visible;
}

/* Platform status matrix: preserve complete financial values at every width.
   The table grows to its unbroken content width and only its own wrapper scrolls. */
.dashboard-app #overviewPanel .quality-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 110, 88, 0.28) transparent;
}

.dashboard-app #overviewPanel .status-matrix-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.dashboard-app #overviewPanel .status-matrix-table col {
  width: auto;
}

.dashboard-app #overviewPanel .status-matrix-table th,
.dashboard-app #overviewPanel .status-matrix-table td {
  padding-inline: clamp(8px, 0.72vw, 12px);
}

.dashboard-app #overviewPanel .status-matrix-table th:first-child,
.dashboard-app #overviewPanel .status-matrix-table td:first-child {
  width: auto;
  min-width: 6.5em;
  text-align: left;
}

.dashboard-app #overviewPanel .status-matrix-table th:nth-child(2),
.dashboard-app #overviewPanel .status-matrix-table td:nth-child(2),
.dashboard-app #overviewPanel .status-matrix-table th:nth-child(4),
.dashboard-app #overviewPanel .status-matrix-table td:nth-child(4),
.dashboard-app #overviewPanel .status-matrix-table th:nth-child(5),
.dashboard-app #overviewPanel .status-matrix-table td:nth-child(5) {
  min-width: 9ch;
  text-align: right;
}

.dashboard-app #overviewPanel .status-matrix-table th:nth-child(3),
.dashboard-app #overviewPanel .status-matrix-table td:nth-child(3) {
  min-width: 7ch;
  text-align: right;
}

.dashboard-app #overviewPanel .status-matrix-table th:last-child,
.dashboard-app #overviewPanel .status-matrix-table td:last-child {
  width: auto;
  min-width: 7.5em;
  text-align: right;
}

.dashboard-app #overviewPanel .matrix-metric-cell {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.dashboard-app #overviewPanel .matrix-metric-cell strong {
  width: max-content;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard-app #overviewPanel .quality-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.dashboard-app #overviewPanel .quality-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(43, 110, 88, 0.28);
}

@media (max-width: 1280px) {
  .overview-grid-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .unavailable-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .overview-meta-grid,
  .overview-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .trend-actions {
    justify-content: flex-start;
  }

  #overviewTrend .chart-frame {
    height: 260px;
  }

  .unavailable-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cost-proof-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cost-proof-metric {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cost-proof-metric i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trend-controls button,
  .overview-card,
  .overview-metric-card,
  .ads-platform-card,
  .ads-trend-area,
  .ads-trend-point,
  .ads-trend-tooltip-row,
  .ads-segmented button,
  .ads-platform-switch button {
    transition: none;
  }
}