/* Operations Activity > AI Usage / SMS Usage (stfwUsage.js, doc 35 §10.11) */
.oa-panel[hidden] { display: none; }
.usg { display: grid; gap: 14px; }
.usg-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.usg-f { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ob-muted, #667085); }
.usg-f[hidden] { display: none; }
.usg-f select, .usg-f input { height: 36px !important; min-width: 150px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.usg-err { padding: 6px 10px; border-radius: 8px; background: #fef3f2; color: #b42318; border: 1px solid #fda29b; font-size: 13px; align-self: center; }
.usg-err[hidden] { display: none; }
.usg-span { font-size: 12.5px; align-self: center; }
.usg-note { font-size: 12.5px; color: var(--ob-muted, #667085); margin-top: -6px; }
.usg-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.usg-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ob-line, #e4e7ec); background: var(--ob-surface, #fff); text-align: left; font: inherit; color: var(--ob-ink, #101828); }
.usg-tile b { font-size: 20px; font-variant-numeric: tabular-nums; }
.usg-tile span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ob-muted, #667085); }
.usg-tile.usg-hot { border-color: #fdb022; background: #fffaeb; }
.usg-tile.usg-hot b { color: #b54708; }
.usg-link { cursor: pointer; }
.usg-link:hover { border-color: var(--ob-brand, #1e5bff); }
.usg-link span::after { content: " →"; }
.usg-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.usg-charts:empty { display: none; }
.usg-chart { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ob-line, #e4e7ec); background: var(--ob-surface, #fff); }
.usg-chart figcaption { font-size: 13px; font-weight: 600; color: var(--ob-ink, #101828); margin-bottom: 6px; }
.usg-chart svg { width: 100%; height: auto; display: block; }
.usg-mark { fill: var(--ob-brand, #1e5bff); }
.usg-bar:hover .usg-mark { fill: var(--ob-brand-hover, #1648d8); }
.usg-grid { stroke: var(--ob-line, #eaecf0); stroke-width: 1; }
.usg-base { stroke: var(--ob-line-strong, #d0d5dd); stroke-width: 1; }
.usg-ax { font-size: 10px; fill: var(--ob-muted, #667085); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.usg-card { padding: 0; overflow: hidden; }
.usg-scroll { overflow: auto; max-height: 520px; }
.usg-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.usg-t th { position: sticky; top: 0; background: var(--ob-head, #f9fafb); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ob-muted, #667085); padding: 9px 12px; border-bottom: 1px solid var(--ob-line, #e4e7ec); white-space: nowrap; }
.usg-t td { padding: 8px 12px; border-bottom: 1px solid var(--ob-line, #f2f4f7); white-space: nowrap; }
.usg-t .usg-n { text-align: right; font-variant-numeric: tabular-nums; }
.usg-zero { color: var(--ob-muted, #98a2b3); }
.usg-hotc { color: #b54708; font-weight: 700; }
.usg-code { color: var(--ob-muted, #667085); font-size: 12px; }
.usg-none { padding: 22px; text-align: center; color: var(--ob-muted, #667085); }
.usg-bad { color: #b42318; }
html[data-theme="dark"] .usg-tile.usg-hot { background: rgba(245,158,11,.10); border-color: rgba(252,211,77,.4); }
html[data-theme="dark"] .usg-tile.usg-hot b, html[data-theme="dark"] .usg-hotc { color: #fcd34d; }
html[data-theme="dark"] .usg-err { background: rgba(240,68,56,.12); color: #fda29b; }