/* Números abertos (views/partials/usage.eta): uma grade de contadores que herda cor e fonte da página e usa --accent.
   Sem posição fixa e sem animação própria: o número "rola" por JS (public/js/usage.js), que respeita menos movimento. */
.usage { margin: 0; padding: 1.1em 1.2em; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 1em; background: color-mix(in srgb, currentColor 4%, transparent); }
.usage__title { margin: 0 0 .8em; font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.usage__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr)); gap: .9em 1em; margin: 0; }
.usage__item { display: grid; gap: .15em; margin: 0; min-width: 0; }
.usage__item dt { order: 2; font-size: .78em; line-height: 1.3; opacity: .72; }
.usage__item dd { order: 1; margin: 0; font-size: 1.55em; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--accent, currentColor); overflow-wrap: anywhere; }
.usage__note { margin: .9em 0 0; font-size: .74em; line-height: 1.4; opacity: .6; }