#bgp-sales .bi-usage{max-width:1260px;margin-inline:auto;padding:4px 0 32px;display:grid;gap:20px}
#bgp-sales .bi-usage-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
#bgp-sales .bi-usage h2{font-size:26px;font-weight:500;letter-spacing:-.5px;margin:0 0 6px}
#bgp-sales .bi-usage-lead{margin:0;font-size:13px;color:var(--secondary);max-width:640px;line-height:1.5}
#bgp-sales .bi-usage-periods{display:flex;gap:6px;flex-wrap:wrap}
#bgp-sales .bi-usage-periods button{min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
#bgp-sales .bi-usage-periods button:hover{background:var(--surface-hover)}
#bgp-sales .bi-usage-periods button[aria-pressed=true]{background:var(--selected);color:var(--selected-text);border-color:var(--selected)}
#bgp-sales .bi-usage-periods .bi-usage-refresh{margin-left:6px}
#bgp-sales .bi-usage-periods button:focus-visible,#bgp-sales .bi-usage-sort:focus-visible{outline:2px solid var(--actual);outline-offset:2px}
#bgp-sales .bi-usage-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
#bgp-sales .bi-usage-tile{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);min-width:0}
#bgp-sales .bi-usage-tile span{font-size:12px;color:var(--secondary)}
#bgp-sales .bi-usage-tile strong{font-size:26px;font-weight:500;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
#bgp-sales .bi-usage-tile small{font-size:11px;color:var(--secondary);line-height:1.4}
#bgp-sales .bi-usage-tile.is-warn{border-left:3px solid var(--warn)}
#bgp-sales .bi-usage-tile.is-bad{border-left:3px solid var(--bad)}
#bgp-sales .bi-usage-tile.is-good{border-left:3px solid var(--good)}
#bgp-sales .bi-usage-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px 22px;min-width:0}
#bgp-sales .bi-usage-card header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
#bgp-sales .bi-usage-card h3{font-size:17px;font-weight:500;margin:0}
#bgp-sales .bi-usage-card header p{margin:0;font-size:12px;color:var(--secondary)}
#bgp-sales .bi-usage-chart{display:flex;align-items:flex-end;gap:4px;height:170px;overflow-x:auto;padding-bottom:2px}
#bgp-sales .bi-usage-day{flex:1 0 22px;max-width:56px;height:100%;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:4px}
#bgp-sales .bi-usage-day b{font-size:11px;font-weight:500;color:var(--secondary);font-variant-numeric:tabular-nums}
#bgp-sales .bi-usage-day small{font-size:10px;color:var(--secondary);white-space:nowrap}
#bgp-sales .bi-usage-bar{align-self:end;width:100%;height:var(--h,3%);min-height:3px;border-radius:4px 4px 0 0;background:var(--actual)}
#bgp-sales .bi-usage-bar.has-errors{background:linear-gradient(to top,var(--bad) 0 4px,var(--actual) 4px)}
#bgp-sales .bi-usage-table-wrap{overflow-x:auto}
#bgp-sales .bi-usage-table{width:100%;border-collapse:collapse;font-size:13px}
#bgp-sales .bi-usage-table th{text-align:left;font-weight:400;border-bottom:1px solid var(--line);padding:0}
#bgp-sales .bi-usage-table th.is-num{text-align:right}
#bgp-sales .bi-usage-sort{all:unset;box-sizing:border-box;display:block;width:100%;padding:8px 10px;font-size:12px;color:var(--secondary);cursor:pointer;text-align:inherit}
#bgp-sales .bi-usage-table th[aria-sort=ascending] .bi-usage-sort::after{content:' ↑'}
#bgp-sales .bi-usage-table th[aria-sort=descending] .bi-usage-sort::after{content:' ↓'}
#bgp-sales .bi-usage-table td{padding:9px 10px;border-bottom:1px solid var(--grid,var(--line));vertical-align:top}
#bgp-sales .bi-usage-table tbody tr:hover td{background:var(--surface-hover)}
#bgp-sales .bi-usage-table td.is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#bgp-sales .bi-usage-table td.is-good{color:var(--good)}
#bgp-sales .bi-usage-table td.is-warn{color:var(--warn)}
#bgp-sales .bi-usage-table td.is-bad{color:var(--bad)}
#bgp-sales .bi-usage-table td.bi-usage-detail{max-width:460px;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
#bgp-sales .bi-usage-route{display:grid;gap:2px}
#bgp-sales .bi-usage-route small{font-size:11px;color:var(--secondary)}
#bgp-sales .bi-usage-api{display:flex;gap:8px;align-items:baseline;word-break:break-all}
#bgp-sales .bi-usage-api b{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--secondary)}
#bgp-sales .bi-usage-empty{margin:0;font-size:13px;color:var(--secondary)}
#bgp-sales .bi-usage-where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr);gap:24px}
#bgp-sales .bi-usage-where h4{margin:0 0 10px;font-size:13px;font-weight:500}
#bgp-sales .bi-usage-share{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}
#bgp-sales .bi-usage-share li{display:grid;grid-template-columns:minmax(0,1fr) 72px 40px;align-items:center;gap:8px}
#bgp-sales .bi-usage-share-bar{height:6px;border-radius:3px;background:var(--track,var(--line));position:relative;overflow:hidden}
#bgp-sales .bi-usage-share-bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--share,0%);background:var(--actual);border-radius:3px}
#bgp-sales .bi-usage-share b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1100px){#bgp-sales .bi-usage-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}#bgp-sales .bi-usage-where{grid-template-columns:1fr 1fr}}
@media (max-width:640px){#bgp-sales .bi-usage-tiles{grid-template-columns:1fr 1fr}#bgp-sales .bi-usage-where{grid-template-columns:1fr}#bgp-sales .bi-usage-card{padding:16px}}