.filter-form {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
}

.filter-form label {
  font-weight: 700;
}

.filter-form input,
.filter-form select {
  display: block;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid #aebdca;
  border-radius: 8px;
  font: inherit;
}

.date-range-picker { position: relative; min-width: 310px; }
.date-range-picker details { position: relative; }
.date-range-picker summary { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; min-height: 42px; padding: 7px 34px 7px 12px; border: 1px solid #aebdca; border-radius: 8px; background: #fff; cursor: pointer; list-style: none; }
.date-range-picker summary::-webkit-details-marker { display: none; }
.date-range-picker summary::after { content: '▾'; position: absolute; top: 15px; right: 12px; color: var(--muted); }
.date-range-picker details[open] summary::after { content: '▴'; }
.date-range-picker summary > span:first-child { grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: .78rem; }
.date-range-picker summary strong { font-size: .85rem; }
.date-range-picker [data-range-summary] { font-size: .82rem; white-space: nowrap; }
.date-range-panel { position: absolute; z-index: 20; top: calc(100% + 8px); left: var(--date-range-panel-left, 0px); display: grid; grid-template-columns: 210px minmax(390px, 1fr); width: min(720px, calc(100vw - 32px)); box-sizing: border-box; border: 1px solid #cbd5df; border-radius: 10px; background: #fff; box-shadow: 0 16px 38px rgb(33 52 72 / 18%); overflow: hidden; }
.date-range-presets { padding: 10px 0; border-right: 1px solid var(--line); background: #f7f9fb; }
.date-range-presets > button { display: block; width: 100%; padding: 9px 15px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.date-range-presets > button:hover, .date-range-presets > button:focus-visible { background: #e6eef6; }
.date-range-days { display: flex; align-items: center; gap: 7px; padding: 11px 12px 3px; border-top: 1px solid var(--line); }
.date-range-days input { width: 62px; margin: 0; }
.date-range-days button { border: 0; background: transparent; padding: 7px 0; color: var(--ink); font: inherit; cursor: pointer; }
.date-range-custom { min-width: 0; padding: 20px; }
.date-range-custom h3 { margin: 0 0 16px; }
.date-range-inputs { display: flex; align-items: end; gap: 10px; }
.date-range-inputs input { width: 155px; }
.date-range-inputs > span { padding-bottom: 10px; }
.date-range-custom p { margin: 16px 0 0; color: var(--muted); font-size: .82rem; }

.card .table-text {
  max-width: 320px;
  margin-top: 0;
  white-space: normal;
  font-size: .92rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.job-error {
  max-width: 340px;
  white-space: normal;
  color: var(--danger);
}

.sync-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}

.sync-summary span {
  border-radius: 999px;
  background: #e8eef4;
  padding: 5px 10px;
  color: var(--ink);
  font-size: .85rem;
}

.compact-job-table {
  margin-top: 18px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.category-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-left: 5px solid;
  border-radius: 10px;
  padding: 14px 16px;
  background: #f5f8fb;
}

.category-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .83rem;
}

.category-card > span {
  font-size: 1.55rem;
  font-weight: 800;
}

.category-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.category-cost-efficiency {
  border-color: #c77900;
  color: #754900;
  background: #fff4da;
}

.category-acquisition-growth {
  border-color: #138a58;
  color: #08613d;
  background: #e6f7ef;
}

.category-delivery-optimization {
  border-color: #4169b1;
  color: #294d8e;
  background: #eaf1ff;
}

.category-urgent-review {
  border-color: #c43b4d;
  color: #8e2030;
  background: #fdebed;
}

.integrated-filter { align-items: end; }
.platform-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.platform-pill { display: flex; justify-content: space-between; gap: 12px; border: 1px dashed #aebdca; border-radius: 10px; padding: 11px 14px; background: #f7f9fb; color: var(--muted); }
.platform-pill strong { color: var(--ink); }
.platform-pill span { font-size: .82rem; }
.platform-pill.is-ready { border-style: solid; border-color: #78aa9e; background: #edf7f4; color: #145c52; }
.integrated-kpis strong { font-size: 1.65rem; }
.insight-hero { margin-top: 22px; }
.insight-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.graph-card { min-width: 0; padding: 18px; }
.graph-card-primary { grid-column: 1 / 3; border-top: 4px solid #145c52; }
.graph-card-funnel { grid-column: 1 / 3; }
.graph-card h3 { margin: 0 0 3px; font-size: 1.05rem; }
.graph-card p { margin: 0; color: var(--muted); font-size: .83rem; }
.graph-card .chart-shell { min-height: 270px; }
.graph-card-primary .chart-shell { min-height: 310px; }
.chart-value { fill: var(--ink); font-size: 12px; font-weight: 700; }
.chart-empty { display: grid; place-items: center; color: var(--muted); }
.chart-shell { position: relative; }
.chart-hit-zone { pointer-events: all; cursor: crosshair; }
.chart-hit-zone:focus { outline: none; }
.chart-hover-guide { stroke: #667085; stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.chart-point { transition: r .1s ease, stroke-width .1s ease; pointer-events: none; }
.chart-point.is-active { r: 6; stroke: #fff; stroke-width: 2.5; }
.chart-tooltip { position: absolute; z-index: 8; min-width: 185px; max-width: 270px; padding: 10px 12px; border: 1px solid #b8c7d4; border-radius: 9px; background: rgb(255 255 255 / 96%); box-shadow: 0 8px 24px rgb(16 42 67 / 18%); pointer-events: none; }
.chart-tooltip strong { margin: 0 0 6px; font-size: .86rem; }
.chart-tooltip span { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; color: var(--ink); font-size: .8rem; }
.chart-tooltip i { width: 9px; height: 9px; border-radius: 3px; }
.chart-tooltip b { font-weight: 600; }
.chart-tooltip em { font-style: normal; font-weight: 800; }
.async-placeholder { display: flex; align-items: center; gap: 15px; min-height: 86px; color: var(--muted); }
.async-placeholder strong { color: var(--ink); }
.async-placeholder p { margin: 4px 0 0; }
.loading-spinner { width: 24px; height: 24px; flex: 0 0 auto; border: 3px solid #d8e3e0; border-top-color: #145c52; border-radius: 50%; animation: integrated-spin .8s linear infinite; }
.async-error { border-left: 5px solid var(--danger); }
.comparison-intro { background: #edf4f2; }
.sticky-table-wrap { position: relative; max-height: min(68vh, 720px); border: 1px solid var(--line); border-radius: 9px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.sticky-data-table { border-collapse: separate; border-spacing: 0; }
.sticky-data-table th, .sticky-data-table td { background: var(--surface); }
.sticky-data-table thead th { position: sticky; top: 0; z-index: 3; background: #edf2f7; box-shadow: inset 0 -1px 0 #c8d3df; }
.sticky-data-table th:first-child, .sticky-data-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 160px; font-weight: 700; box-shadow: inset -1px 0 0 #c8d3df; }
.sticky-data-table thead th:first-child { z-index: 4; background: #e4ecef; box-shadow: inset -1px -1px 0 #b8c7d4; }
.sticky-data-table tbody tr:hover td { background: #f6faf9; }
.sticky-data-table tbody tr:hover td:first-child { background: #edf5f2; }
.heatmap-control { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; }
.heatmap-control small { max-width: 260px; text-align: right; }
.sticky-data-table.is-heatmap td { transition: background-color .16s ease; }
.breakdown-comparison { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fb; }
.breakdown-comparison > div:first-child { flex: 1 1 260px; }
.breakdown-comparison strong, .breakdown-comparison small { display: block; }
.breakdown-comparison label { font-size: .82rem; font-weight: 700; }
.breakdown-comparison input { display: block; margin-top: 4px; padding: 8px 10px; border: 1px solid #aebdca; border-radius: 7px; font: inherit; }
.comparison-period-note { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-bottom: 12px; padding: 9px 12px; border-left: 4px solid var(--accent); background: #edf4f2; }
.table-sort-button { display: flex; align-items: center; justify-content: space-between; gap: 7px; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sort-indicator::after { content: '↕'; color: #8a9aaa; font-size: .85rem; }
th[aria-sort="ascending"] .sort-indicator::after { content: '↑'; color: var(--accent); }
th[aria-sort="descending"] .sort-indicator::after { content: '↓'; color: var(--accent); }
.table-filter-row th { top: 43px; z-index: 3; padding: 7px; background: #e5edf3; }
.table-filter-row th:first-child { z-index: 4; background: #dce7ec; }
.table-filter-row input { width: 105px; min-width: 80px; padding: 6px 7px; border: 1px solid #9daeba; border-radius: 6px; font-size: .76rem; }
.table-filter-row th:first-child input { width: 140px; }
.table-filter-toolbar { display: flex; gap: 8px; margin: 10px 0 8px; }
.table-filter-toolbar .button { padding: 8px 11px; }
.table-no-results { padding: 14px; color: var(--muted); text-align: center; }
@keyframes integrated-spin { to { transform: rotate(360deg); } }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.section-heading h2 { margin-bottom: 5px; }
.section-heading p { margin: 0; }
.coverage-list { display: flex; flex-wrap: wrap; gap: 9px; }
.coverage-list span { border-radius: 999px; background: #edf4f2; color: #145c52; padding: 6px 11px; font-weight: 700; font-size: .85rem; }
.comparison-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.comparison-list { margin: 0; }
.comparison-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.comparison-list div:last-child { border-bottom: 0; }
.comparison-list dt { color: var(--muted); }
.comparison-list dd { margin: 0; text-align: right; font-weight: 800; }
.comparison-list small { font-weight: 400; }
.chart-shell { min-height: 330px; margin-top: 12px; overflow: hidden; }
.chart-shell svg { display: block; width: 100%; min-width: 0; height: 260px; }
.chart-gridline { stroke: #d9e2ec; stroke-width: 1; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 4px; }
.chart-legend span { color: var(--ink); font-size: .85rem; }
.chart-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart-axis { position: relative; height: 1.65em; color: var(--muted); font-size: .78rem; }
.chart-axis span { position: absolute; top: 0; transform: translateX(calc(-50% + 6px)); white-space: nowrap; }
.caveat-card { border-left: 5px solid #d97706; }
.caveat-card ul { margin-bottom: 0; }
@media (max-width: 900px) { .comparison-grid, .platform-status, .insight-chart-grid { grid-template-columns: 1fr; } .graph-card-primary, .graph-card-funnel { grid-column: auto; } .section-heading { align-items: flex-start; flex-direction: column; } .date-range-panel { grid-template-columns: 1fr; width: min(440px, calc(100vw - 32px)); } .date-range-presets { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--line); } .date-range-days { grid-column: 1 / 3; } .date-range-inputs { align-items: stretch; flex-direction: column; } .date-range-inputs > span { display: none; } .date-range-inputs input { width: 100%; box-sizing: border-box; } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } }