/* Theme bridge for Injector. The feature's calculations, overlays and exports stay in injector.css/js. */
.inj-zone-strength { display: grid; gap: 6px; margin: 12px 0; }
.inj-zone-strength input { width: 100%; accent-color: var(--inj-accent); }
.inj-zone-strength small { color: var(--ui-muted); font-size: 10px; line-height: 1.5; }
:root {
  --inj-accent: #6543a8;
  --inj-accent-soft: #f2edfc;
  --inj-on-accent: #ffffff;
}
:root[data-theme="dark"] {
  --inj-accent: #c8b7ef;
  --inj-accent-soft: #332b48;
  --inj-on-accent: #261b3c;
}
.inj-head { border-color: var(--ui-border); }
.inj-head h1, .inj-zone-name strong, .inj-volume output, .inj-tech dd,
.inj-card h2, .inj-table td, .inj-totals strong, .inj-changes strong,
.inj-tip :is(b, strong), .inj-weak li > div, .inj-plan li, .inj-plan-total,
.inj-rank-head b, .inj-split-head b, .inj-cmp-col h3 { color: var(--ui-text); }
.inj-head p, .inj-zone-name small, .inj-typical, .inj-scores p, .inj-muted,
.inj-table td small, .inj-chip small, .inj-time p, .inj-rank-head small,
.inj-saved small, .inj-report-grid small, .inj-legend small,
.inj-scores small, .inj-totals small, .inj-presets > span, .inj-zones h3,
.inj-tech dt, .inj-table th, .inj-time > span, .inj-suggest h3,
.inj-weak em, .inj-chip em, .inj-plan-total small, .inj-changes em,
.inj-compare-bar > span, .inj-split-head small { color: var(--ui-muted); }
.inj-toggle, .inj-volume span, .inj-product span, .inj-legend, .inj-legend-row,
.inj-tip, .inj-table-view, .inj-split-head, .inj-asym, .inj-note,
.inj-compare-bar, .inj-cmp-score, .inj-report, .inj-report-actions span,
.inj-liquify, .inj-changes span, .inj-empty { color: var(--ui-secondary); }
.inj-ghost, .inj-stage, .inj-zone, .inj-card, .inj-tip {
  background: var(--ui-surface); border-color: var(--ui-border);
}
.inj-ghost { color: var(--ui-secondary); }
.inj-ghost:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-subtle); }
.inj-switch, .inj-tag, .inj-bar { background: var(--ui-surface-raised); }
.inj-switch button, .inj-tag { color: var(--ui-secondary); }
.inj-switch button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-text); }
.inj-pro, .inj-chip.is-up, .inj-cmp-table tr.is-diff td { background: var(--inj-accent-soft); color: var(--inj-accent); }
.inj-zone.is-on, .inj-zone.is-focus { border-color: var(--inj-accent); }
.inj-zone.is-focus { box-shadow: 0 0 0 3px var(--inj-accent-soft); }
.inj-zone-name::after, .inj-scores b, .inj-plan li small, .inj-cmp-score b,
.inj-saved li.is-loaded b { color: var(--inj-accent); }
.inj-head-actions { flex-wrap: wrap; }
.inj-safety, .inj-warn, .inj-score, .inj-chip.is-down {
  color: var(--ui-warning); background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border));
}
.inj-danger, .inj-link.is-danger, .inj-changes b.is-down { color: var(--ui-negative); }
.inj-risk-high, .inj-danger-t { color: var(--ui-negative) !important; }
.inj-risk-mid { color: var(--ui-warning) !important; }
.inj-risk-low { color: var(--ui-positive) !important; }
.inj-tech, .inj-table :is(th, td), .inj-changes div, .inj-weak li,
.inj-plan li, .inj-rank li, .inj-saved li, .inj-compare-bar,
.inj-cmp-photo, .inj-chip, .inj-report, .inj-liquify { border-color: var(--ui-border); }
.inj-presets button:not(.inj-ghost), .inj-chip.is-zone { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-border); }
.inj-presets button:not(.inj-ghost):hover, .inj-chip.is-zone:hover { background: var(--ui-hover); }
.inj-link, .inj-table-view summary { color: var(--ui-accent); }
.inj-split, .inj-chip, .inj-report, .inj-liquify { background: var(--ui-surface-subtle); }
.inj-chip { color: var(--ui-secondary); }
.inj-product select, .inj-save input, .inj-note textarea, .inj-compare-bar select,
.inj-report input[type="text"], .inj-report-grid input {
  color: var(--ui-text); background-color: var(--ui-surface); border-color: var(--ui-border);
}
.inj-card-head button, .inj-suggest [data-inj-apply-plan], .inj-save button[type="submit"],
.inj-compare-bar button, .inj-report-actions button, .inj-plan li::before, .inj-chip.is-on {
  background: var(--inj-accent); color: var(--inj-on-accent); border-color: var(--inj-accent);
}
.inj-volume input, .inj-split input, .inj-liquify input[type="range"],
.inj-photo > input { accent-color: var(--inj-accent); }
.inj-bar i.is-up { background: var(--inj-accent); }
.inj-changes b.is-up { color: var(--inj-accent); background: none; }
.inj-ba span { background: var(--ui-surface); color: var(--ui-text); }
.inj-chart .grid { stroke: var(--ui-border); }
.inj-chart :is(.ref, .hover) { stroke: var(--ui-border-strong); }
.inj-chart .sel { stroke: var(--ui-text); }
.inj-chart .tick, .inj-chart .end { fill: var(--ui-muted); }
.inj-chart .tick.is-sel { fill: var(--ui-text); }
.inj-chart .dot { stroke: var(--ui-surface); }
:root[data-theme="dark"] .inj-chart .series { filter: brightness(1.45); }
.inj-stage { top: calc(var(--ds-header-height) + 20px); }
.inj-save input { min-width: min(200px, 100%); }
.inj-table { display: block; max-width: 100%; overflow-x: auto; }
.inj-changes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (max-width: 640px) {
  .inj-head-actions { width: 100%; justify-content: space-between; }
}