.tst-token-counter {
  --tst-token-accent: var(--tst-tool-control-primary, #c8f65c);
  --tst-token-border: #475569;
  --tst-token-field: #1e293b;
  --tst-token-ink: #f8fafc;
  --tst-token-muted: #cbd5e1;
  color: var(--tst-token-ink);
  display: grid;
  gap: 1rem;
}

.tst-token-counter,
.tst-token-counter * { box-sizing: border-box; }
.tst-token-counter h2 { color: var(--tst-token-ink); margin: 0; }
.tst-token-counter p { margin: 0; }
.tst-token-counter__privacy,
.tst-token-counter__note,
.tst-token-counter__coverage,
.tst-token-counter__boundary { color: var(--tst-token-muted); font-size: 0.82rem; }
.tst-token-counter label { display: block; font-size: 0.8rem; font-weight: 800; margin-bottom: 0.4rem; }
.tst-token-counter :where(textarea, select, input) {
  background: var(--tst-token-field);
  border: 1px solid var(--tst-token-border);
  border-radius: 0.7rem;
  color: var(--tst-token-ink);
  font: inherit;
  max-width: 100%;
  padding: 0.75rem;
  width: 100%;
}
.tst-token-counter textarea { line-height: 1.55; resize: vertical; }
.tst-token-counter :where(textarea, select, input, button):focus-visible { outline: 0.2rem solid var(--tst-tool-control-focus, #8ab1ff); outline-offset: 0.12rem; }
.tst-token-counter__controls { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tst-token-counter__metrics { display: grid; gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tst-token-counter__metric { background: color-mix(in srgb, var(--tst-token-field) 86%, #2563eb 14%); border: 1px solid var(--tst-token-border); border-radius: 0.65rem; min-width: 0; padding: 0.7rem; }
.tst-token-counter__metric span { color: var(--tst-token-muted); display: block; font-size: 0.7rem; }
.tst-token-counter__metric strong { display: block; font-size: 1.2rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.tst-token-counter__budget { border: 1px solid var(--tst-token-border); border-radius: 0.8rem; display: grid; gap: 0.65rem; padding: 1rem; }
.tst-token-counter__chunks { border: 1px solid var(--tst-token-border); border-radius: 0.8rem; display: grid; gap: 0.85rem; padding: 1rem; }
.tst-token-counter__chunks h3 { color: var(--tst-token-ink); margin: 0 0 0.25rem; }
.tst-token-counter__chunks p { color: var(--tst-token-muted); font-size: 0.82rem; }
.tst-token-counter__chunk-controls { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tst-token-counter__chunk-summary { font-weight: 800; }
.tst-token-counter__chunk-list { display: grid; gap: 0.65rem; list-style: none; margin: 0; max-height: 28rem; overflow: auto; padding: 0; }
.tst-token-counter__chunk { background: color-mix(in srgb, var(--tst-token-field) 90%, #2563eb 10%); border: 1px solid var(--tst-token-border); border-radius: 0.65rem; display: grid; gap: 0.3rem; min-width: 0; padding: 0.75rem; }
.tst-token-counter__chunk strong,
.tst-token-counter__chunk span,
.tst-token-counter__chunk p { overflow-wrap: anywhere; }
.tst-token-counter__chunk span { color: var(--tst-token-accent); font-size: 0.75rem; font-weight: 800; }
.tst-token-counter__meter { height: 0.65rem; width: 100%; }
.tst-token-counter__meter::-webkit-meter-bar { background: var(--tst-token-field); border: 0; border-radius: 999px; }
.tst-token-counter__meter::-webkit-meter-optimum-value { background: var(--tst-token-accent); border-radius: 999px; }
.tst-token-counter__status { font-size: 0.88rem; font-weight: 800; }
.tst-token-counter__status[data-state='uncertain'] { color: #ffd166; }
.tst-token-counter__status[data-state='over'] { color: #ff9b8f; }
.tst-token-counter button {
  background: var(--tst-token-accent);
  border: 1px solid var(--tst-token-accent);
  border-radius: 0.65rem;
  color: var(--tst-tool-control-on-primary, #101827);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  justify-self: start;
  min-height: 2.65rem;
  padding: 0.62rem 1rem;
}

[data-tst-site-shell][data-theme='light'] .tst-token-counter {
  --tst-token-border: #cbd5e1;
  --tst-token-field: #f8fafc;
  --tst-token-ink: #0f172a;
  --tst-token-muted: #526071;
}

@media (max-width: 42rem) {
  .tst-token-counter__controls { grid-template-columns: 1fr; }
  .tst-token-counter__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tst-token-counter__chunk-controls { grid-template-columns: 1fr; }
}