:root {
  --multimedia-ui-accent: #ef4766;
  --multimedia-ui-ink: #18333f;
  --multimedia-ui-muted: #71838b;
  --multimedia-ui-border: #dfe7e9;
  --multimedia-ui-surface: #fff;
  --multimedia-ui-canvas: #f3f6f8;
  --multimedia-ui-shadow: 0 10px 28px rgba(31, 55, 65, 0.07);
}

.multimedia-ui-dashboard,
.multimedia-ui-entry-page { color: #243b45; background: var(--multimedia-ui-canvas); }

/* 两个看板沿用外层页面留白，内部只保留相同的上下间距。 */
.multimedia-analysis-preview,
.station-dashboard-page {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 0 24px;
}

.multimedia-ui-tabs { display: flex; align-items: stretch; min-width: 0; }
.multimedia-ui-tab { border: 0; color: #536a73; background: transparent; box-shadow: none; font-weight: 700; }
.multimedia-ui-tab:hover { color: var(--multimedia-ui-ink); background: #f8fafb; }
.multimedia-ui-tab:focus-visible { outline: 2px solid var(--multimedia-ui-accent); outline-offset: -2px; }
.multimedia-ui-tab.active,
.multimedia-ui-tab[aria-selected="true"],
.multimedia-ui-tab[aria-pressed="true"] { color: #e62f51; background: #fff; }

.multimedia-ui-project-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--multimedia-ui-border); background: #f7f9fa; scrollbar-width: thin; }
.multimedia-ui-project-tab { flex: 1 0 150px; min-height: 48px; padding: 0 20px; white-space: nowrap; }
.multimedia-ui-project-tab.active,
.multimedia-ui-project-tab[aria-selected="true"] { box-shadow: inset 0 -3px var(--multimedia-ui-accent); }

.multimedia-ui-segmented-tabs { gap: 4px; padding: 3px; border-radius: 8px; background: #f2f5f6; }
.multimedia-ui-segmented-tab { min-height: 34px; padding: 0 14px; border-radius: 6px; }
.multimedia-ui-segmented-tab.active,
.multimedia-ui-segmented-tab[aria-pressed="true"] { box-shadow: 0 2px 8px rgba(44, 62, 70, 0.09); }

.multimedia-ui-chart-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 40px;
  overflow-x: auto;
}
.multimedia-ui-chart-header > div { flex: 0 0 auto; }
.multimedia-ui-chart-header h3 { white-space: nowrap; }

.multimedia-ui-segmented-tabs.multimedia-metric-switch {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  grid-template-columns: none;
  width: max-content;
  max-width: none;
  margin: 0 0 0 auto;
  gap: 4px;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: #f2f5f6;
}
.multimedia-ui-segmented-tabs.multimedia-metric-switch > button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  color: #647881;
  background: transparent;
  box-shadow: none;
}
.multimedia-ui-segmented-tabs.multimedia-metric-switch > button.active,
.multimedia-ui-segmented-tabs.multimedia-metric-switch > button[aria-pressed="true"] {
  color: #ef334f;
  background: #fff;
  box-shadow: 0 2px 8px rgba(44, 62, 70, 0.09);
}

.multimedia-analysis-preview :is(.multimedia-update-state, .multimedia-chart-update-state) { display: none; }

.multimedia-ui-chart-card,
.multimedia-ui-entry-page > section {
  border: 1px solid var(--multimedia-ui-border);
  border-radius: 14px;
  background: var(--multimedia-ui-surface);
  box-shadow: var(--multimedia-ui-shadow);
}
.multimedia-ui-chart-card h3 { color: var(--multimedia-ui-ink); font-size: 19px; }
.multimedia-ui-chart-card :is(.multimedia-chart-axis-label, .station-chart-labels text, .station-chart-grid text) { fill: #74868d; }
.multimedia-ui-chart-card :is(.multimedia-chart-grid-line, .station-chart-grid line) { stroke: #e5ebed; }

.multimedia-ui-chart-legend,
.multimedia-ui-chart-legend-host { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: 30px; }
.multimedia-ui-legend-item { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0; border: 0; color: #536a73; background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
.multimedia-ui-legend-item:hover { color: var(--multimedia-ui-ink); background: transparent; }
.multimedia-ui-legend-item.muted { color: #9aa6ac; text-decoration: line-through; opacity: 0.65; }
.multimedia-ui-legend-swatch { width: 18px; height: 4px; border-radius: 999px; background: var(--multimedia-ui-series-color, currentColor); }
.multimedia-ui-legend-swatch.is-block { width: 12px; height: 12px; border-radius: 3px; }

.multimedia-ui-stack-total,
.multimedia-stacked-sales-total {
  fill: #253b45;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

/* 共用小组看板的悬浮窗外观；低优先级允许各类明细保留自己的宽度和排版。 */
:where(.multimedia-chart-tooltip, .multimedia-ui-tooltip) {
  position: fixed;
  z-index: 12000;
  display: grid;
  gap: 2px;
  min-width: 136px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #dce5e8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #30454e;
  font-size: 14px;
  pointer-events: none;
  box-shadow: 0 9px 24px rgba(31, 56, 66, 0.16);
}
.station-chart-tooltip,
.multimedia-stacked-sales-tooltip { width: min(420px, calc(100vw - 24px)); padding: 10px 12px; gap: 6px; }
.multimedia-chart-tooltip-month,
.multimedia-ui-tooltip-title {
  padding-bottom: 6px;
  border-bottom: 1px solid #e7ecee;
  color: #263c46;
  font-size: 16px !important;
}
.multimedia-ui-tooltip-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.multimedia-ui-tooltip-table :is(th, td) { padding: 6px 8px; text-align: right; }
.multimedia-ui-tooltip-table thead th { color: #89979d; font-size: 13px; font-weight: 400; }
.multimedia-ui-tooltip-table th:first-child { text-align: left; }
.multimedia-ui-tooltip-table tbody th { color: #2b414a; font-weight: 600; }
.multimedia-ui-tooltip-table tbody td { color: #263b45; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.multimedia-ui-tooltip-table tbody tr:nth-child(odd) { background: #f7f9fa; }
.multimedia-ui-tooltip-label { display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.multimedia-ui-tooltip-table .multimedia-ui-tooltip-label { color: #2b414a; }
.multimedia-ui-tooltip-label i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--tooltip-color); }

.multimedia-ui-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.multimedia-ui-entry-heading :is(h2, h3) { margin: 0; color: var(--multimedia-ui-ink); font-size: 25px; }
.multimedia-ui-entry-heading :is(p, span) { color: var(--multimedia-ui-muted); }
.multimedia-ui-save-area { display: flex; align-items: center; gap: 12px; }
.multimedia-ui-save-area > span { color: var(--multimedia-ui-muted); font-size: 13px; }
.multimedia-ui-save-area > button { min-height: 40px; padding: 0 16px; border: 1px solid var(--multimedia-ui-accent); border-radius: 8px; color: #fff; background: var(--multimedia-ui-accent); font-weight: 700; }
.multimedia-ui-save-area > button:disabled { cursor: not-allowed; opacity: 0.45; }
.multimedia-ui-business-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); overflow-x: auto; border-bottom: 1px solid var(--multimedia-ui-border); background: #f7f9fa; }
.multimedia-ui-business-tabs > button { min-height: 48px; border-radius: 0; white-space: nowrap; }
.multimedia-ui-business-tabs > button.active { box-shadow: inset 0 -3px var(--multimedia-ui-accent); }

.multimedia-ui-data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.multimedia-ui-data-table :is(th, td) { border-right: 1px solid #e2e8ea; border-bottom: 1px solid #e2e8ea; }
.multimedia-ui-data-table thead th { color: #526872; background: #f4f7f8; font-weight: 700; }

.multimedia-ui-unsaved-dialog { border: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(20, 39, 47, 0.24); }
.multimedia-ui-unsaved-dialog::backdrop { background: rgba(26, 42, 49, 0.46); }

@media (max-width: 760px) {
  .multimedia-ui-entry-heading { align-items: flex-start; flex-direction: column; }
  .multimedia-ui-save-area { width: 100%; justify-content: space-between; }
}