@layer components {
  .usage-meter{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:9px;width:min(350px,calc(100% - 28px));font-family:var(--sans);color:var(--ink)}
  .usage-meter[data-state=near-limit] .usage-meter-mark{background:#ad7a2d}
  .usage-meter-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:9px 13px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 2px 12px #17231612;font-size:11px;line-height:1.4;text-align:left;transition:border-color .18s,box-shadow .18s}.usage-meter-button:hover,.usage-meter-button[aria-expanded=true]{border-color:var(--strong-line);box-shadow:var(--shadow)}.usage-meter-label{font-weight:650;white-space:nowrap}.usage-meter-summary{font-family:var(--mono);font-size:9px;color:var(--muted);overflow-wrap:anywhere}.usage-meter-mark{width:6px;height:6px;flex:0 0 6px;background:var(--accent);border-radius:50%}.usage-meter[data-state=limited] .usage-meter-mark,.usage-meter[data-state=paused] .usage-meter-mark{background:var(--security)}.usage-meter[data-state=checking] .usage-meter-mark,.usage-meter[data-state=stale] .usage-meter-mark,.usage-meter[data-state=offline] .usage-meter-mark,.usage-meter[data-state=unavailable] .usage-meter-mark{background:var(--muted)}
  .usage-meter-panel{display:flex;flex-direction:column;min-height:0;width:100%;max-height:min(650px,calc(100vh - 90px));max-height:min(650px,calc(100dvh - 90px));background:var(--surface);border:1px solid var(--strong-line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.usage-meter-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 2px 18px;flex:0 0 auto}.usage-meter-header h2{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.5px;line-height:1.2}.usage-meter-header h2:focus{outline:0}.usage-meter-close{min-width:44px;min-height:44px;font-size:25px;border-radius:6px;color:var(--muted)}.usage-meter-close:hover{background:var(--accent-soft)}.usage-meter-status{font-size:11px;line-height:1.6;padding:0 18px 12px;color:var(--muted);flex:0 0 auto}.usage-meter-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 18px 12px;scrollbar-width:thin}.usage-meter-group{padding-top:12px;border-top:1px solid var(--line);margin-bottom:17px}.usage-meter-group h3{font-size:10px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:650;margin:0 0 12px}.usage-meter-row{margin:0 0 14px}.usage-meter-row:last-child{margin-bottom:0}.usage-meter-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:13px;font-size:11px;line-height:1.55;margin-bottom:6px}.usage-meter-count{font-family:var(--mono);font-size:10px;flex:0 0 auto;text-align:right}.usage-meter-bar{display:block;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;background:var(--line);color:var(--accent);accent-color:var(--accent)}.usage-meter-bar::-webkit-progress-bar{background:var(--line);border-radius:4px}.usage-meter-bar::-webkit-progress-value{background:var(--accent);border-radius:4px}.usage-meter-bar::-moz-progress-bar{background:var(--accent);border-radius:4px}.usage-meter-row.is-limited .usage-meter-bar{color:var(--security);accent-color:var(--security)}.usage-meter-row.is-limited .usage-meter-bar::-webkit-progress-value{background:var(--security)}.usage-meter-row.is-limited .usage-meter-bar::-moz-progress-bar{background:var(--security)}.usage-meter-panel.is-stale .usage-meter-bar{opacity:.45}.usage-meter-timing{font-size:9px;color:var(--muted);line-height:1.6;margin-top:5px}.usage-meter-note{font-size:10px;line-height:1.65;color:var(--muted);padding-top:13px;border-top:1px solid var(--line)}.usage-meter-stamp{font-size:9px;line-height:1.65;color:var(--muted);margin-top:9px}.usage-meter-refresh{min-height:44px;font-size:11px;font-weight:600;color:var(--link);padding:8px 0}.usage-meter-advanced{margin-bottom:14px}.usage-meter-advanced>summary{font-size:11px;min-height:44px;padding:12px 0;cursor:pointer;color:var(--link)}.usage-meter-advanced .usage-meter-group{padding-top:10px;margin-bottom:12px}
}
@layer responsive {
  body:has(>.usage-meter) .site-footer{padding-bottom:max(80px,calc(env(safe-area-inset-bottom) + 66px))}
  @media(max-width:390px){.usage-meter{right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 20px)}.usage-meter-button{padding:9px 11px;gap:7px}.usage-meter-summary{font-size:9px}.usage-meter-content{padding-left:14px;padding-right:14px}.usage-meter-header{padding-left:14px}.usage-meter-status{padding-left:14px;padding-right:14px}.usage-meter-row-top{font-size:10px;gap:8px}.usage-meter-count{font-size:9px}}
  @media(prefers-reduced-motion:reduce){.usage-meter-button{transition:none}}
  @media print{.usage-meter{display:none!important}}
}