.ai-usage[data-v-b82abd66] {
  padding: 24px 28px;
  font-family: 'Geist Sans', system-ui, sans-serif;
  color: #1f2937;
}
.ai-usage__header[data-v-b82abd66] {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.ai-usage__title[data-v-b82abd66] { font-size: 20px; font-weight: 700; margin: 0;
}
.ai-usage__subtitle[data-v-b82abd66] { font-size: 13px; color: #6b7280; margin: 4px 0 0;
}
.ai-usage__filters[data-v-b82abd66] { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.ai-usage__filter[data-v-b82abd66] {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em;
}
.ai-usage__filter input[data-v-b82abd66] {
  border: 1px solid #d1d5db; border-radius: 8px;
  padding: 6px 10px; font-size: 13px; color: #1f2937; background: #fff;
}
.ai-usage__presets[data-v-b82abd66] { display: flex; gap: 4px;
}
.ai-usage__preset[data-v-b82abd66] {
  border: 1px solid #d1d5db; background: #fff; color: #4b5563;
  padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.ai-usage__preset[data-v-b82abd66]:hover { background: #f3f4f6;
}
.ai-usage__preset.is-active[data-v-b82abd66] {
  background: #2563eb; border-color: #2563eb; color: #fff;
}
.ai-usage__state[data-v-b82abd66] {
  padding: 32px; text-align: center; color: #6b7280;
  background: #f9fafb; border-radius: 10px;
}
.ai-usage__state--error[data-v-b82abd66] { color: #b91c1c; background: #fef2f2;
}
.ai-usage__kpis[data-v-b82abd66] {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.ai-usage__kpi[data-v-b82abd66] {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ai-usage__kpi-label[data-v-b82abd66] {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b7280; font-weight: 600;
}
.ai-usage__kpi-value[data-v-b82abd66] {
  font-size: 22px; font-weight: 700; color: #111827; line-height: 1.1;
}
.ai-usage__kpi-value.is-bad[data-v-b82abd66] { color: #b91c1c;
}
.ai-usage__kpi-hint[data-v-b82abd66] { font-size: 11px; color: #9ca3af;
}
.ai-usage__chart[data-v-b82abd66] {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 16px; margin-bottom: 24px;
}
.ai-usage__chart-head[data-v-b82abd66] {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.ai-usage__chart-head h3[data-v-b82abd66] { font-size: 13px; font-weight: 600; margin: 0;
}
.ai-usage__chart-meta[data-v-b82abd66] { font-size: 11px; color: #6b7280;
}
.ai-usage__bars[data-v-b82abd66] {
  display: flex; align-items: flex-end; gap: 2px;
  height: 100px; padding: 4px 0;
  border-bottom: 1px solid #f3f4f6;
}
.ai-usage__bar-wrap[data-v-b82abd66] {
  flex: 1; height: 100%;
  display: flex; align-items: flex-end;
  cursor: default;
}
.ai-usage__bar[data-v-b82abd66] {
  width: 100%; min-height: 2px;
  background: #2563eb; border-radius: 2px 2px 0 0;
  transition: opacity .12s;
}
.ai-usage__bar-wrap:hover .ai-usage__bar[data-v-b82abd66] { opacity: 0.7;
}
.ai-usage__bar.is-error[data-v-b82abd66] { background: #dc2626;
}
.ai-usage__bar.is-empty[data-v-b82abd66] { background: #e5e7eb;
}
.ai-usage__chart-foot[data-v-b82abd66] {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #9ca3af; margin-top: 6px;
}
.ai-usage__tables[data-v-b82abd66] {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 16px;
}
.ai-usage__table[data-v-b82abd66] {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px 16px;
}
.ai-usage__table h3[data-v-b82abd66] { font-size: 13px; font-weight: 600; margin: 0 0 10px;
}
.ai-usage__table table[data-v-b82abd66] { width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.ai-usage__table th[data-v-b82abd66], .ai-usage__table td[data-v-b82abd66] {
  padding: 8px 6px; text-align: left;
  border-bottom: 1px solid #f3f4f6;
}
.ai-usage__table th[data-v-b82abd66] {
  font-weight: 600; color: #6b7280; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ai-usage__table tr:last-child td[data-v-b82abd66] { border-bottom: none;
}
.ai-usage__table .num[data-v-b82abd66] { text-align: right; font-variant-numeric: tabular-nums;
}
.ai-usage__table .strong[data-v-b82abd66] { font-weight: 600; color: #111827;
}
.ai-usage__table code[data-v-b82abd66] {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; color: #4338ca;
  background: #eef2ff; padding: 1px 6px; border-radius: 4px;
}
.ai-usage__empty[data-v-b82abd66] { font-size: 12px; color: #9ca3af; padding: 8px 0;
}
.ai-usage__status-row[data-v-b82abd66] { display: flex; flex-wrap: wrap; gap: 8px;
}
.ai-usage__status-chip[data-v-b82abd66] {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: #f3f4f6; color: #4b5563;
}
.ai-usage__status-chip.is-success[data-v-b82abd66] { background: #dcfce7; color: #166534;
}
.ai-usage__status-chip.is-rate_limited[data-v-b82abd66] { background: #fef3c7; color: #92400e;
}
.ai-usage__status-chip.is-provider_error[data-v-b82abd66] { background: #fee2e2; color: #991b1b;
}
.ai-usage__status-chip.is-timeout[data-v-b82abd66] { background: #fed7aa; color: #9a3412;
}
.ai-usage__status-chip.is-aborted[data-v-b82abd66] { background: #e5e7eb; color: #374151;
}
@media (max-width: 900px) {
.ai-usage__kpis[data-v-b82abd66] { grid-template-columns: repeat(2, 1fr);
}
.ai-usage__tables[data-v-b82abd66] { grid-template-columns: 1fr;
}
}