body[data-variant="cobalt"] .workspace-overview-kpis {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.workspace-overview-kpis > .overview-metric { grid-column: span 3; }
.workspace-overview-kpis > .overview-metric:nth-child(n + 5) { grid-column: span 4; }

body[data-variant="cobalt"] .workspace-overview-kpis > .workspace-feature-metric {
  background: var(--cobalt-feature);
  border-color: var(--cobalt-feature-line);
  box-shadow: var(--cobalt-feature-shadow);
}

.workspace-feature-metric > :is(span, strong) { color: #fff; }
.workspace-feature-metric > small { color: var(--cobalt-feature-muted); }
.workspace-route-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  color: var(--link);
  font-size: 12px;
}

.overview-card > .workspace-empty-inline { margin: 12px 0; }
.workspace-source-note { margin: 0; color: var(--muted); font-size: 12px; }
.overview-client :is(strong, .status-tag), .overview-task small { overflow-wrap: anywhere; }
.overview-client .status-tag { justify-self: start; }
.overview-client > span:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
.workspace-trend-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; margin-block: 6px; }
.workspace-trend-meta select, .workspace-account-select { min-height: 29px; padding-block: 3px; font-size: 12px; }
.workspace-account-select { max-width: min(100%, 220px); }
.workspace-trend-plot > svg { max-height: none; }
.workspace-trend-values > summary { width: fit-content; color: var(--link); font-size: 12px; }
.workspace-daily-values { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; max-width: 260px; font-size: 12px; }
.workspace-daily-values dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }

.workspace-analytics-table .workspace-depth-1 { --depth: 1; }
.workspace-analytics-table .workspace-depth-2 { --depth: 2; }
.workspace-analytics-table .workspace-depth-3 { --depth: 3; }
.workspace-analytics-table .workspace-depth-4 { --depth: 4; }
.workspace-analytics-table .name-cell .node-title {
  max-width: clamp(124px, 28vw, 340px);
  overflow-wrap: anywhere;
  white-space: normal;
}
.workspace-analytics-table .row-account th { font-weight: 600; }
.workspace-analytics-table :is(.row-campaign, .row-criterion) .node-title { font-weight: 500; }
.workspace-analytics-table .total-row .node-title { font-weight: inherit; }
.workspace-cost-stack { display: grid; gap: 2px; }
.workspace-coverage-cell { display: flex; justify-content: flex-end; align-items: center; gap: 7px; }
.workspace-coverage-stack { display: grid; gap: 2px; justify-items: end; max-width: 240px; margin-inline-start: auto; white-space: normal; overflow-wrap: anywhere; }
.workspace-coverage-stack > small { font-size: 11px; }
.workspace-table-note { margin: 0; padding: 8px 12px; color: var(--muted); font-size: 12px; }
.workspace-table-note + .workspace-table-note { padding-top: 0; }

.workspace-section-grid { display: grid; gap: 12px; min-width: 0; }
.workspace-section-grid > :is(.overview-clients, .overview-priorities) { grid-area: auto; }
.workspace-info-panel { padding: 13px 15px; }
.workspace-info-panel p { margin-bottom: 0; color: var(--muted); }
.workspace-source-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.workspace-source-row strong { overflow-wrap: anywhere; }
.workspace-source-row small { margin-inline-start: auto; }
.workspace-source-card > .workspace-route-button { margin-top: 8px; }

.metrika-settings { grid-column: 2 / -1; min-width: 0; color: var(--muted); font-size: 12px; }
.metrika-settings > summary { width: fit-content; color: var(--link); cursor: pointer; overflow-wrap: anywhere; }
.metrika-settings[open] { padding-block: 8px; border-top: 1px solid var(--line); }
.metrika-settings[open] > summary { margin-bottom: 8px; }
.metrika-saved { display: grid; gap: 4px; margin-bottom: 8px; overflow-wrap: anywhere; }
.metrika-saved strong { color: var(--ink); }
.metrika-saved p { margin-bottom: 0; }
.metrika-actions { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.metrika-form > :not([hidden]) { margin-top: 8px; }
.metrika-counter select { max-width: min(100%, 520px); }
.metrika-goals { display: grid; gap: 6px; padding: 8px; margin-inline: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--control-radius); }
.metrika-goals legend { color: var(--ink); }
.metrika-goal-search { max-width: 400px; }
.metrika-goal-list { display: grid; gap: 6px; max-height: 280px; overflow: auto; padding: 3px; }
.metrika-goal { display: flex; align-items: start; gap: 8px; cursor: pointer; overflow-wrap: anywhere; }
.metrika-goal input { flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.metrika-goal span { color: var(--ink); }
.metrika-goal small { display: block; color: var(--muted); }
.metrika-message:not(:empty) { margin-top: 8px; }
.metrika-goal-count { margin-bottom: 0; }
.conversion-goals { margin-bottom: 16px; }
.conversion-goals-body { display: grid; gap: 8px; padding: 12px 16px; }
.conversion-goals-body > p { margin: 0; font-size: 12px; }
.conversion-goals-account { width: min(100%, 360px); color: var(--muted); font-size: 12px; }
#conversion-goals-editor:not(:empty) { margin-top: 10px; }
.report-metrika-sync { display: block; margin-top: 4px; }
#report-content > .report-panel { margin-top: 16px; }
.report-campaign-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 6px 10px; }

@media (max-width: 760px) {
  body[data-variant="cobalt"] .workspace-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-overview-kpis > .overview-metric:nth-child(n) { grid-column: auto; }
  .workspace-overview-kpis > .overview-metric:last-child { grid-column: 1 / -1; }
  .workspace-analytics-table .tree-name { padding-inline-start: calc(var(--depth, 0) * 8px); }
  .workspace-analytics-table .tree-name > :is(.expand, .expand-space) { width: 16px; }
  .metrika-settings { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .workspace-source-row small { margin-inline-start: 0; flex-basis: 100%; }
  .workspace-coverage-cell { align-items: flex-end; flex-direction: column; }
}