Verbrauch-Tab: Tokens/Kosten pro Pool und Projekt aus Transcripts

- usage_stats: streamt <pool>/projects/*/*.jsonl, zählt message.usage,
  Dedup über message.id+requestId, Zeitfilter (eigener RFC3339-Parser),
  Projektpfad-Mapping wie claudes Ordnerkodierung
- Preistabelle je Modell (Fable/Opus/Sonnet/Haiku, Cache 1.25x/0.1x),
  Kosten als API-Gegenwert ausgewiesen
- UI-Tab mit 7/30-Tage-Filter: Pool-Zeilen aggregiert, Projekte
  aufklappbar darunter, Summenzeile; i18n de/en
- Tests: Aggregation+Dedup+Zeitfilter, leerer Fall, parse_ts-Referenz

src/style.css

@@ -220,10 +220,90 @@ button.gear {
 
 .toolbar {
   display: flex;
+  align-items: center;
   gap: 0.6rem;
   margin-bottom: 1.5rem;
 }
 
+/* ---------- Verbrauch ---------- */
+
+.range {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--crust);
+  border-radius: 8px;
+}
+
+.range button {
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--subtext);
+  padding: 0.3rem 0.9rem;
+}
+
+.range button:hover:not(:disabled),
+.range button.active {
+  background: var(--surface0);
+  color: var(--text);
+}
+
+.usage-hint {
+  margin-left: auto;
+  color: var(--overlay);
+  font-size: 0.75rem;
+  text-align: right;
+  max-width: 32rem;
+}
+
+.pool-row {
+  cursor: pointer;
+}
+
+.pool-row .caret {
+  display: inline-block;
+  width: 1.1rem;
+  color: var(--overlay);
+}
+
+.project-row td {
+  border-bottom-color: color-mix(in srgb, var(--surface0) 25%, transparent);
+}
+
+.project-row .project-name {
+  padding-left: 2rem;
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  color: var(--subtext);
+}
+
+td.num,
+th.num {
+  text-align: right;
+}
+
+td.num {
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  color: var(--subtext);
+}
+
+td.num.cost {
+  color: var(--text);
+}
+
+tfoot td {
+  border-bottom: none;
+  border-top: 1px solid var(--surface0);
+  font-weight: 600;
+}
+
+tfoot .total-label {
+  text-align: right;
+  color: var(--subtext);
+}
+
 /* ---------- Tabellen ---------- */
 
 table.grid {
@@ -250,6 +330,12 @@ col.col-type {
 col.col-projects {
   width: 10rem;
 }
+col.col-num {
+  width: 6.5rem;
+}
+col.col-cost {
+  width: 7.5rem;
+}
 
 th {
   text-align: left;