/* Shared readability pass: keep typography and contrast consistent in both themes. */
:root {
  --c-text-dim: #bacbc3;
  --c-text-dim2: #cbdad2;
  --c-faint: #a0b3a9;
  --c-fainter: #95a99f;
  --c-term: #a0b3a9;
  --bg-overlay: linear-gradient(rgba(6, 9, 8, .82), rgba(6, 9, 8, .86));
}
html.light {
  --c-text-dim: #40564b;
  --c-text-dim2: #354c40;
  --c-faint: #506358;
  --c-fainter: #586b60;
  --c-term: #506358;
  --c-brand: #0b756b;
  --c-brand-strong: #095f58;
  --bg-overlay: linear-gradient(rgba(244, 241, 233, .88), rgba(244, 241, 233, .92));
}
body {
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: auto;
}
input::placeholder, textarea::placeholder { color: var(--c-faint); opacity: 1; }

/* The second selector also covers the already deployed model-list bundles. */
:is(.model-group-tabs, div.mb-4.flex.flex-wrap.items-center.gap-2:has(> button[style*="color"])) > button {
  color: var(--c-strong) !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-line);
  box-shadow: none !important;
  min-height: 42px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}
:is(.model-group-tabs, div.mb-4.flex.flex-wrap.items-center.gap-2:has(> button[style*="color"])) > button:hover {
  background: var(--c-raised) !important;
  border-color: var(--c-brand);
}
:is(.model-group-tabs, div.mb-4.flex.flex-wrap.items-center.gap-2:has(> button[style*="color"])) > button.bg-brand-dim {
  background: var(--c-brand) !important;
  color: var(--c-onbrand) !important;
  border-color: var(--c-brand);
  font-weight: 700;
}
:is(.model-group-tabs, div.mb-4.flex.flex-wrap.items-center.gap-2:has(> button[style*="color"])) > button > span {
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
}
:is(.model-group-tabs, div.mb-4.flex.flex-wrap.items-center.gap-2:has(> button[style*="color"])) > button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
}