@kenz1117/dsh-ui-usage-billing 0.5.0 → 0.7.0

package/lib/client.js

@@ -24,7 +24,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/Users/ken/deepseek-harness/packages/client/ui-usage-billing/src/client/UsageBilling.module.css.mjs
-		const css = ".VWh0dG_railButton{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 28%, var(--dsw-alias-border-l2));background:linear-gradient(135deg, color-mix(in srgb, var(--dsw-static-blue-500) 14%, var(--dsw-alias-bg-layer-1)), var(--dsw-alias-bg-layer-1));width:36px;height:36px;color:var(--dsw-static-blue-500);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:border-color .16s,box-shadow .16s,transform .16s,color .16s;display:flex}.VWh0dG_railButton:hover,.VWh0dG_railButton:focus-visible{border-color:color-mix(in srgb, var(--dsw-static-blue-500) 48%, var(--dsw-alias-border-l2));box-shadow:0 4px 14px -6px color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent);color:var(--dsw-static-blue-400);outline:none;transform:translateY(-1px)}.VWh0dG_railButton svg{stroke-width:2px;width:18px;height:18px}.VWh0dG_trigger{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 20%, var(--dsw-alias-border-l1));background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 12%, transparent), transparent 55%), radial-gradient(150% 200% at 100% 110%, color-mix(in srgb, var(--dsw-static-blue-400) 9%, transparent), transparent 60%), var(--dsw-alias-bg-layer-1);width:100%;color:var(--dsw-alias-label-primary);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;transition:border-color .16s,box-shadow .16s,transform .16s;display:flex;position:relative;overflow:hidden}@supports (backdrop-filter:blur(1px)){.VWh0dG_trigger{background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 14%, transparent), transparent 55%), radial-gradient(150% 200% at 100% 110%, color-mix(in srgb, var(--dsw-static-blue-400) 10%, transparent), transparent 60%), color-mix(in srgb, var(--dsw-alias-bg-layer-1) 72%, transparent);backdrop-filter:blur(12px)}}.VWh0dG_trigger:hover,.VWh0dG_trigger:focus-visible{border-color:color-mix(in srgb, var(--dsw-static-blue-500) 42%, var(--dsw-alias-border-l1));box-shadow:0 8px 24px -10px color-mix(in srgb, var(--dsw-static-blue-500) 45%, transparent);outline:none;transform:translateY(-1px)}.VWh0dG_triggerIcon{background:linear-gradient(135deg, var(--dsw-static-blue-500), var(--dsw-static-blue-400));width:28px;height:28px;color:var(--dsw-static-neutral-bluish-00);box-shadow:0 2px 8px -2px color-mix(in srgb, var(--dsw-static-blue-500) 60%, transparent);border-radius:8px;flex:none;justify-content:center;align-items:center;display:inline-flex}.VWh0dG_triggerIcon svg{stroke-width:1.8px;width:15px;height:15px}.VWh0dG_triggerToday,.VWh0dG_triggerMonth{align-items:baseline;gap:4px;min-width:0;display:flex}.VWh0dG_triggerDivider{background:var(--dsw-alias-border-l1);align-self:stretch;width:1px}.VWh0dG_triggerAmount{color:var(--dsw-alias-label-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:18px;font-weight:600;line-height:22px}.VWh0dG_triggerAmountSub{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:600;line-height:18px}.VWh0dG_triggerMeta{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_dashboardModal{background:linear-gradient(var(--dsw-alias-bg-layer-2), var(--dsw-alias-bg-layer-2)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent), color-mix(in srgb, var(--dsw-static-blue-400) 22%, transparent) 45%, color-mix(in srgb, var(--dsw-static-blue-500) 38%, transparent)) border-box;width:min(760px,100vw - 48px);max-height:min(760px,88vh);box-shadow:var(--dsw-shadow-lv3), 0 24px 80px -24px color-mix(in srgb, var(--dsw-static-blue-500) 35%, transparent);border:1px solid #0000;animation:.18s ease-out VWh0dG_dashboardIn}@keyframes VWh0dG_dashboardIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}div[role=presentation]:has(>.dsh-billing-modal)>div[aria-hidden=true]:first-child{backdrop-filter:blur(8px)saturate(1.25)}.VWh0dG_dashboard{flex-direction:column;width:100%;max-height:min(760px,88vh);display:flex}.VWh0dG_dashboardHead{border-bottom:1px solid var(--dsw-alias-border-l1);justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 14px;display:flex}.VWh0dG_dashboardTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:17px;font-weight:600;line-height:24px}.VWh0dG_dashboardSubtitle{color:var(--dsw-alias-label-caption);margin:3px 0 0;font-size:12px;line-height:17px}.VWh0dG_closeButton{width:30px;height:30px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .14s;display:inline-flex}.VWh0dG_closeButton:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_closeButton svg{stroke-width:2px;width:16px;height:16px}.VWh0dG_dashboardBody{flex-direction:column;gap:14px;padding:16px 24px 24px;display:flex;overflow-y:auto}.VWh0dG_tabNav{border-bottom:1px solid var(--dsw-alias-border-l1);align-items:center;gap:4px;padding:10px 24px;display:flex}.VWh0dG_tabButton{color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:500;line-height:18px;transition:background-color .16s,color .16s,box-shadow .16s}.VWh0dG_tabButton:hover,.VWh0dG_tabButton:focus-visible{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover);outline:none}.VWh0dG_tabButtonActive,.VWh0dG_tabButtonActive:hover,.VWh0dG_tabButtonActive:focus-visible{background:linear-gradient(135deg, var(--dsw-static-blue-500), color-mix(in srgb, var(--dsw-static-blue-500) 72%, var(--dsw-static-blue-400)));color:var(--dsw-static-neutral-bluish-00);box-shadow:0 2px 10px -3px color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent);font-weight:600}.VWh0dG_tabPanel{flex-direction:column;gap:14px;animation:.14s ease-out VWh0dG_tabPanelIn;display:flex}@keyframes VWh0dG_tabPanelIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.VWh0dG_hero{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 16%, var(--dsw-alias-border-l1));background:radial-gradient(90% 150% at 6% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 10%, transparent), transparent 60%), radial-gradient(70% 130% at 96% 100%, color-mix(in srgb, var(--dsw-static-blue-400) 8%, transparent), transparent 55%), var(--dsw-alias-bg-layer-1);border-radius:16px;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;display:flex;position:relative;overflow:hidden}.VWh0dG_heroMain{flex-direction:column;gap:4px;min-width:0;display:flex}.VWh0dG_heroLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroValue{letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;background:linear-gradient(120deg, var(--dsw-alias-label-primary) 25%, color-mix(in srgb, var(--dsw-static-blue-500) 85%, var(--dsw-alias-label-primary)));color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:44px;font-weight:600;line-height:52px}.VWh0dG_heroMeta{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSide{border-left:1px solid var(--dsw-alias-border-l1);flex-direction:column;flex:none;gap:10px;padding-left:24px;display:flex}.VWh0dG_heroSideItem{align-items:baseline;gap:8px;display:flex}.VWh0dG_heroSideLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSideValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px;font-weight:600;line-height:22px}.VWh0dG_delta{align-items:center;gap:2px;margin-left:4px;font-size:11px;font-weight:600;line-height:17px;display:inline-flex}.VWh0dG_deltaUp{color:var(--dsw-static-green-500)}.VWh0dG_deltaDown{color:var(--dsw-static-red-500)}.VWh0dG_kpiGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.VWh0dG_kpiTile{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:3px;padding:14px 15px;transition:border-color .16s,background-color .16s,transform .16s,box-shadow .16s;display:flex;position:relative;overflow:hidden}.VWh0dG_kpiTile:before{content:\"\";background:linear-gradient(90deg, color-mix(in srgb, var(--dsw-static-blue-500) 70%, transparent), transparent);opacity:.7;height:2px;position:absolute;inset:0 0 auto}.VWh0dG_kpiTile:has(.VWh0dG_kpiGreen):before{background:linear-gradient(90deg, color-mix(in srgb, var(--dsw-static-green-500) 70%, transparent), transparent)}.VWh0dG_kpiTile:hover{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-interactive-bg-hover);box-shadow:0 6px 16px -8px color-mix(in srgb, var(--dsw-alias-label-primary) 35%, transparent);transform:translateY(-1px)}.VWh0dG_kpiLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:15px}.VWh0dG_kpiValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:21px;font-weight:600;line-height:27px}.VWh0dG_kpiGreen{color:var(--dsw-static-green-500)}.VWh0dG_kpiDetail{color:var(--dsw-alias-label-caption);white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:15px;overflow:hidden}.VWh0dG_panel{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;gap:10px;padding:16px 18px;display:flex}.VWh0dG_panelHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_panelTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:14px;font-weight:600;line-height:20px}.VWh0dG_panelHint{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:11px;line-height:16px}.VWh0dG_rangeToggle{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:8px;gap:2px;padding:2px;display:inline-flex}.VWh0dG_rangeButton{color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 8px;font-size:11px;line-height:16px;transition:background-color .14s,color .14s}.VWh0dG_rangeButtonActive{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-weight:600}.VWh0dG_budget{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.VWh0dG_budgetHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_budgetLabel{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:17px}.VWh0dG_budgetValue{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_budgetControls{align-items:center;gap:8px;min-width:0;display:inline-flex}.VWh0dG_budgetInputWrap{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:6px;align-items:center;gap:2px;padding:2px 6px;display:inline-flex}.VWh0dG_budgetInputWrap:focus-within{border-color:var(--dsw-alias-border-l3)}.VWh0dG_budgetUnit{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}.VWh0dG_budgetInput{width:64px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;text-align:right;background:0 0;border:none;padding:0;font-size:12px;line-height:16px}.VWh0dG_budgetInput:focus-visible{outline:none}.VWh0dG_switch{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-module-platform);cursor:pointer;border-radius:999px;flex:none;width:30px;height:17px;padding:0;transition:background-color .16s,border-color .16s;position:relative}.VWh0dG_switchOn{border-color:var(--dsw-static-blue-500);background:var(--dsw-static-blue-500)}.VWh0dG_switchKnob{background:var(--dsw-static-neutral-bluish-00);border-radius:50%;width:11px;height:11px;transition:transform .16s;position:absolute;top:2px;left:2px}.VWh0dG_switchOn .VWh0dG_switchKnob{transform:translate(13px)}.VWh0dG_budgetTrack{background:var(--dsw-alias-bg-module-platform);border-radius:999px;height:6px;overflow:hidden}.VWh0dG_budgetFill{background:var(--dsw-static-blue-500);border-radius:999px;height:100%;transition:width .2s}.VWh0dG_budgetFillOver{background:var(--dsw-static-red-500);animation:1.6s ease-in-out infinite VWh0dG_budgetOverPulse}@keyframes VWh0dG_budgetOverPulse{50%{opacity:.55}}.VWh0dG_chartWrap{width:100%;position:relative}.VWh0dG_chartSvg{width:100%;height:auto;display:block}.VWh0dG_chartEmpty{height:140px;color:var(--dsw-alias-label-caption);justify-content:center;align-items:center;font-size:13px;display:flex}.VWh0dG_emptyRow{text-align:center;color:var(--dsw-alias-label-caption);padding:28px 0;font-size:13px}.VWh0dG_chartGrid{stroke:var(--dsw-alias-border-l1);stroke-width:1px}.VWh0dG_chartAxisLabel{fill:var(--dsw-alias-label-tertiary);font-size:10px}.VWh0dG_chartBar{fill:var(--dsw-static-blue-500);opacity:.35}.VWh0dG_chartBar:hover{opacity:.6}.VWh0dG_chartStack{stroke:var(--dsw-alias-bg-layer-1);stroke-width:.75px}.VWh0dG_chartStack:hover{opacity:.85}.VWh0dG_chartLine{stroke:var(--dsw-static-blue-500);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.VWh0dG_chartCrosshair{stroke:var(--dsw-alias-label-dimmed);stroke-width:1px;stroke-dasharray:3 3}.VWh0dG_chartDot{fill:var(--dsw-static-neutral-bluish-00);stroke:var(--dsw-static-blue-500);stroke-width:2.5px}.VWh0dG_chartTooltip{pointer-events:none;z-index:2;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);box-shadow:var(--dsw-shadow-lv2);white-space:nowrap;border-radius:10px;padding:8px 10px;position:absolute;transform:translate(-50%,calc(-100% - 10px))}.VWh0dG_chartTooltipDate{color:var(--dsw-alias-label-primary);margin-bottom:3px;font-size:11px;font-weight:600}.VWh0dG_chartTooltipRow{color:var(--dsw-alias-label-secondary);align-items:center;gap:5px;font-size:11px;line-height:17px;display:flex}.VWh0dG_chartTooltipRow strong{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-weight:600}.VWh0dG_chartLegendLine{background:var(--dsw-static-blue-500);border-radius:2px;width:10px;height:3px;display:inline-block}.VWh0dG_chartLegendBar{background:var(--dsw-static-blue-500);opacity:.5;border-radius:2px;width:7px;height:7px;display:inline-block}.VWh0dG_chartTooltipSwatch{border-radius:3px;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_chartLegend{color:var(--dsw-alias-label-tertiary);justify-content:flex-end;gap:14px;margin-top:2px;font-size:11px;display:flex}.VWh0dG_chartLegend span{align-items:center;gap:5px;display:inline-flex}.VWh0dG_tableScroll{border:1px solid var(--dsw-alias-border-l1);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border-radius:12px;overflow:auto}.VWh0dG_modelTable,.VWh0dG_pricingTable{border-collapse:collapse;width:100%;font-size:12.5px}.VWh0dG_modelTable th,.VWh0dG_modelTable td,.VWh0dG_pricingTable th,.VWh0dG_pricingTable td{border-bottom:1px solid var(--dsw-alias-border-l1);text-align:left;white-space:nowrap;padding:9px 12px}.VWh0dG_modelTable tbody tr:last-child td,.VWh0dG_pricingTable tbody tr:last-child td{border-bottom:0}.VWh0dG_modelTable thead th,.VWh0dG_pricingTable thead th{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform);font-size:11px;font-weight:500}.VWh0dG_modelTable tbody tr,.VWh0dG_pricingTable tbody tr{transition:background-color .12s}.VWh0dG_modelTable tbody tr:hover,.VWh0dG_pricingTable tbody tr:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_numCol{text-align:right;font-variant-numeric:tabular-nums}.VWh0dG_costCol{color:var(--dsw-static-blue-500);font-weight:600}.VWh0dG_na{color:var(--dsw-alias-label-dimmed)}.VWh0dG_modelCell{align-items:center;gap:8px;display:inline-flex}.VWh0dG_modelDot{width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-bg-layer-1) 60%, transparent);border-radius:50%;flex:none}.VWh0dG_modelName{color:var(--dsw-alias-label-primary);font-weight:500;line-height:16px;display:block}.VWh0dG_modelProvider{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px;display:block}.VWh0dG_pricingToggle{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0;display:flex}.VWh0dG_pricingToggle:hover .VWh0dG_panelTitle,.VWh0dG_pricingToggle:focus-visible .VWh0dG_panelTitle{color:var(--dsw-static-blue-500)}.VWh0dG_rateBadge{vertical-align:1px;white-space:nowrap;border-radius:999px;align-items:center;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:500;line-height:14px;display:inline-flex}.VWh0dG_rateBadgeLive{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_rateBadgeBuiltin{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform)}.VWh0dG_pricingToggleText{align-items:baseline;gap:10px;min-width:0;display:flex}.VWh0dG_pricingChevron{width:16px;height:16px;color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.VWh0dG_pricingChevronOpen{transform:rotate(180deg)}.VWh0dG_bandPrice{align-items:baseline;gap:6px;display:inline-flex}.VWh0dG_bandPriceOff{color:var(--dsw-alias-label-caption)}.VWh0dG_bandPriceOff:before{content:\"/\";color:var(--dsw-alias-label-dimmed);margin-right:4px}.VWh0dG_bandTag{color:var(--dsw-alias-label-secondary);flex-direction:column;gap:1px;font-size:10.5px;line-height:14px;display:inline-flex}.VWh0dG_bandTagOff{color:var(--dsw-static-green-500);font-weight:600}.VWh0dG_flatTag{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px}.VWh0dG_healthDot{border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_healthOk{background:var(--dsw-static-green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-green-500) 18%, transparent)}.VWh0dG_healthBad{background:var(--dsw-static-red-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-red-500) 18%, transparent)}.VWh0dG_healthIdle{background:var(--dsw-static-neutral-bluish-400)}.VWh0dG_dashboardRight{align-items:center;gap:8px;min-width:0;display:flex}.VWh0dG_healthBadge{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:11px;line-height:16px;display:inline-flex}.VWh0dG_healthBadgeOk{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_healthBadgeBad{color:var(--dsw-static-red-500);background:color-mix(in srgb, var(--dsw-static-red-500) 10%, transparent)}.VWh0dG_planTag{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 12%, transparent);border-radius:999px;align-items:center;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.VWh0dG_uncataloguedTag{vertical-align:1px;color:var(--dsw-static-amber-500);background:color-mix(in srgb, var(--dsw-static-amber-500) 12%, transparent);border-radius:999px;margin-left:6px;padding:0 6px;font-size:10px;font-weight:600;line-height:16px;display:inline-block}.VWh0dG_estimatedTag{vertical-align:1px;color:var(--dsw-static-blue-500);background:color-mix(in srgb, var(--dsw-static-blue-500) 12%, transparent);border-radius:999px;margin-left:6px;padding:0 6px;font-size:10px;font-weight:600;line-height:16px;display:inline-block}.VWh0dG_liveCostBar{color:var(--dsw-static-neutral-400);font-variant-numeric:tabular-nums;align-items:center;gap:6px;font-size:11px;line-height:16px;display:inline-flex}.VWh0dG_liveCostItem{white-space:nowrap}.VWh0dG_liveCostSep{color:var(--dsw-static-neutral-300)}.VWh0dG_balanceCell{flex-direction:column;align-items:flex-end;gap:2px;display:inline-flex}.VWh0dG_balanceDays{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_balanceDaysLow{color:var(--dsw-static-red-500);font-weight:600}body[data-zine-mode] .VWh0dG_trigger,body[data-zine-mode] .VWh0dG_railButton{display:none}body[data-zine-mode] .VWh0dG_dashboardHead{background:#000;border-bottom:2px solid #e8ff00}body[data-zine-mode] .VWh0dG_headTitleRow{align-items:center;gap:8px;margin-top:4px;display:flex}body[data-zine-mode] .VWh0dG_dashboardTitle{color:#e8ff00;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 8px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_dashboardSubtitle{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px}body[data-zine-mode] .VWh0dG_closeButton{color:#0a0a05;background:#ff2d95;border:1.5px solid #ff2d95;border-radius:0;box-shadow:0 0 10px #ff2d9573}body[data-zine-mode] .VWh0dG_hero{background:#000;border:2.5px solid #e8ff00;border-radius:0;position:relative;box-shadow:0 0 0 1px #0009,0 0 24px #e8ff002e}body[data-zine-mode] .VWh0dG_heroLabel{color:#c9d98a;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroValue{color:#e8ff00;letter-spacing:-.02em;text-shadow:0 0 12px #e8ff0073;-webkit-text-fill-color:#e8ff00;background:0 0;font-size:38px;font-weight:900}body[data-zine-mode] .VWh0dG_heroMeta{color:#c9d98a;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}body[data-zine-mode] .VWh0dG_heroSideLabel{color:#c9d98a;letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroSideValue{color:#e8ff00;text-shadow:0 0 6px #e8ff0059}body[data-zine-mode] .VWh0dG_delta{font-weight:900}body[data-zine-mode] .VWh0dG_deltaUp{color:#ff2d95}body[data-zine-mode] .VWh0dG_deltaDown{color:#c9d98a}body[data-zine-mode] .VWh0dG_tabNav{background:#000;border-bottom:2px solid #e8ff00}body[data-zine-mode] .VWh0dG_tabButton{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;border-radius:0;font-size:10.5px;font-weight:900}body[data-zine-mode] .VWh0dG_tabButton:hover,body[data-zine-mode] .VWh0dG_tabButton:focus-visible{color:#e8ff00;background:#e8ff001f}body[data-zine-mode] .VWh0dG_tabButtonActive,body[data-zine-mode] .VWh0dG_tabButtonActive:hover,body[data-zine-mode] .VWh0dG_tabButtonActive:focus-visible{color:#0a0a05;background:#e8ff00;box-shadow:0 0 10px #e8ff0073}body[data-zine-mode] .VWh0dG_panel{background:#000;border:2px solid #e8ff00;border-radius:0}body[data-zine-mode] .VWh0dG_trendPanel{position:relative}body[data-zine-mode] .VWh0dG_panelTitle{color:#e8ff00;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 6px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_panelHint{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_modelTableScroll{background:#000;border:1.5px solid #e8ff0080;border-radius:0}.VWh0dG_currencyToggle{border:1px solid var(--dsw-alias-border-muted,#3a4250);background:var(--dsw-alias-bg-layer-2,#232a33);border-radius:6px;align-items:center;gap:2px;margin-right:8px;padding:2px;display:inline-flex}.VWh0dG_currencyButton{color:var(--dsw-alias-text-secondary,#9aa5b1);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:4px 7px;font-size:11px;font-weight:700;line-height:1}.VWh0dG_currencyButtonActive{background:var(--dsw-alias-accent-muted,#2f6fed);color:#fff}.VWh0dG_subscriptionGrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px;display:grid}.VWh0dG_subscriptionCard{border:1px solid var(--dsw-alias-border-muted,#3a4250);background:var(--dsw-alias-bg-layer-2,#232a33);border-radius:8px;padding:10px 12px}.VWh0dG_subscriptionHead{align-items:baseline;gap:8px;margin-bottom:6px;display:flex}.VWh0dG_subscriptionName{font-size:13px;font-weight:700}.VWh0dG_subscriptionPlan{color:var(--dsw-alias-text-secondary,#9aa5b1);font-size:11px}.VWh0dG_subscriptionStatus{color:var(--dsw-alias-warning,#e0a63c);margin-bottom:6px;font-size:11px}.VWh0dG_subscriptionWindow{align-items:center;gap:8px;margin-top:6px;font-size:11px;display:flex}.VWh0dG_subscriptionWindowLabel{color:var(--dsw-alias-text-secondary,#9aa5b1);flex:0 0 44px}.VWh0dG_subscriptionTrack{background:var(--dsw-alias-bg-layer-3,#1a2028);border-radius:3px;flex:1;height:5px;overflow:hidden}.VWh0dG_subscriptionFill{background:var(--dsw-alias-accent,#3b82f6);border-radius:3px;height:100%;display:block}.VWh0dG_subscriptionPct{text-align:right;font-variant-numeric:tabular-nums;flex:none;min-width:52px}.VWh0dG_subscriptionReset{color:var(--dsw-alias-text-secondary,#9aa5b1);flex:none}.VWh0dG_providerGroupList{flex-direction:column;gap:10px;display:flex}.VWh0dG_providerGroup{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:12px;padding:12px 14px}.VWh0dG_providerGroupHead{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.VWh0dG_providerGroupTitle{align-items:center;gap:7px;min-width:0;display:inline-flex}.VWh0dG_providerGroupName{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:18px}.VWh0dG_providerGroupMeta{flex:none;align-items:center;gap:10px;display:inline-flex}.VWh0dG_providerGroupBadge{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 12%, transparent);border-radius:999px;align-items:center;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.VWh0dG_providerGroupBalance{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:baseline;gap:6px;font-size:12px;line-height:17px;display:inline-flex}.VWh0dG_providerGroupBalanceLabel{color:var(--dsw-alias-label-caption);font-size:11px;line-height:17px}.VWh0dG_roundsFlagBadge{color:#fff;background:#ef4444;border-radius:999px;margin-left:8px;padding:1px 7px;font-size:10px;font-weight:800}.VWh0dG_rounds{margin-top:10px}.VWh0dG_roundsBars{align-items:flex-end;gap:3px;height:110px;padding:4px 2px 0;display:flex;overflow-x:auto}.VWh0dG_roundsBarCol{flex-direction:column;flex:1 0 28px;justify-content:flex-end;align-items:stretch;height:100%;display:flex}.VWh0dG_roundsBarLabel{text-align:center;color:var(--dsw-alias-text-secondary,#9aa5b1);white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-bottom:2px;font-size:8px;line-height:1;overflow:hidden}.VWh0dG_roundsBarWrap{flex:1;align-items:flex-end;min-height:0;display:flex}.VWh0dG_roundsBar{background:var(--dsw-alias-accent,#3b82f6);border-radius:2px 2px 0 0;width:100%;min-height:2px;position:relative}.VWh0dG_roundsBarFlagged{outline-offset:1px;background:#ef4444;border-radius:2px 2px 0 0;outline:1.5px solid #ef4444;width:100%;min-height:2px;position:relative}.VWh0dG_roundsFlagMark{background:#ef4444;border-radius:50%;width:7px;height:7px;position:absolute;top:-3px;right:-3px;box-shadow:0 0 4px #ef4444}.VWh0dG_roundsAxis{color:var(--dsw-alias-text-secondary,#9aa5b1);justify-content:space-between;margin-top:6px;font-size:10px;display:flex}.VWh0dG_roundsEmpty{color:var(--dsw-alias-text-secondary,#9aa5b1);margin-top:10px;font-size:12px}.VWh0dG_heatmap{margin-top:10px}.VWh0dG_heatmapGrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;display:grid}.VWh0dG_heatmapCellEmpty{background:var(--dsw-alias-bg-layer-1);height:30px;color:var(--dsw-alias-label-dimmed,#6b7480);font-variant-numeric:tabular-nums;border-radius:8px;justify-content:center;align-items:center;font-size:11px;display:flex}.VWh0dG_heatmapCell{font-variant-numeric:tabular-nums;cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;height:30px;padding:0;font-size:11px;display:flex}.VWh0dG_heatmapCell[data-level=\"0\"],.VWh0dG_heatmapCell[data-level=\"1\"],.VWh0dG_heatmapCell[data-level=\"2\"]{color:var(--dsw-alias-label-primary)}.VWh0dG_heatmapCell[data-level=\"3\"],.VWh0dG_heatmapCell[data-level=\"4\"]{color:var(--dsw-static-neutral-bluish-00,#fff)}.VWh0dG_heatmapFooter{color:var(--dsw-alias-text-secondary,#9aa5b1);align-items:center;gap:8px;margin-top:10px;font-size:10px;display:flex}.VWh0dG_heatmapLegend{gap:3px;display:inline-flex}.VWh0dG_heatmapLegend i{border-radius:4px;width:14px;height:14px;display:block}.VWh0dG_heatmapHover{font-variant-numeric:tabular-nums;margin-left:auto}@media (width<=640px){.VWh0dG_kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.VWh0dG_hero{flex-direction:column;align-items:flex-start;gap:14px}.VWh0dG_heroSide{border-left:none;border-top:1px solid var(--dsw-alias-border-l1);flex-direction:row;align-self:stretch;gap:20px;padding-top:14px;padding-left:0}}";
+		const css = ".VWh0dG_railButton{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 28%, var(--dsw-alias-border-l2));background:linear-gradient(135deg, color-mix(in srgb, var(--dsw-static-blue-500) 14%, var(--dsw-alias-bg-layer-1)), var(--dsw-alias-bg-layer-1));width:36px;height:36px;color:var(--dsw-static-blue-500);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:border-color .16s,box-shadow .16s,transform .16s,color .16s;display:flex}.VWh0dG_railButton:hover,.VWh0dG_railButton:focus-visible{border-color:color-mix(in srgb, var(--dsw-static-blue-500) 48%, var(--dsw-alias-border-l2));box-shadow:0 4px 14px -6px color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent);color:var(--dsw-static-blue-400);outline:none;transform:translateY(-1px)}.VWh0dG_railButton svg{stroke-width:2px;width:18px;height:18px}.VWh0dG_trigger{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 20%, var(--dsw-alias-border-l1));background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 12%, transparent), transparent 55%), radial-gradient(150% 200% at 100% 110%, color-mix(in srgb, var(--dsw-static-blue-400) 9%, transparent), transparent 60%), var(--dsw-alias-bg-layer-1);width:100%;color:var(--dsw-alias-label-primary);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;transition:border-color .16s,box-shadow .16s,transform .16s;display:flex;position:relative;overflow:hidden}@supports (backdrop-filter:blur(1px)){.VWh0dG_trigger{background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 14%, transparent), transparent 55%), radial-gradient(150% 200% at 100% 110%, color-mix(in srgb, var(--dsw-static-blue-400) 10%, transparent), transparent 60%), color-mix(in srgb, var(--dsw-alias-bg-layer-1) 72%, transparent);backdrop-filter:blur(12px)}}.VWh0dG_trigger:hover,.VWh0dG_trigger:focus-visible{border-color:color-mix(in srgb, var(--dsw-static-blue-500) 42%, var(--dsw-alias-border-l1));box-shadow:0 8px 24px -10px color-mix(in srgb, var(--dsw-static-blue-500) 45%, transparent);outline:none;transform:translateY(-1px)}.VWh0dG_triggerIcon{background:linear-gradient(135deg, var(--dsw-static-blue-500), var(--dsw-static-blue-400));width:28px;height:28px;color:var(--dsw-static-neutral-bluish-00);box-shadow:0 2px 8px -2px color-mix(in srgb, var(--dsw-static-blue-500) 60%, transparent);border-radius:8px;flex:none;justify-content:center;align-items:center;display:inline-flex}.VWh0dG_triggerIcon svg{stroke-width:1.8px;width:15px;height:15px}.VWh0dG_triggerToday,.VWh0dG_triggerMonth{align-items:baseline;gap:4px;min-width:0;display:flex}.VWh0dG_triggerDivider{background:var(--dsw-alias-border-l1);align-self:stretch;width:1px}.VWh0dG_triggerAmount{color:var(--dsw-alias-label-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:18px;font-weight:600;line-height:22px}.VWh0dG_triggerAmountSub{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:600;line-height:18px}.VWh0dG_triggerMeta{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_triggerWrap{width:100%;display:block;position:relative}.VWh0dG_triggerPop{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 22%, var(--dsw-alias-border-l1));background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 12%, transparent), transparent 55%), var(--dsw-alias-bg-layer-2);box-shadow:0 12px 32px -12px color-mix(in srgb, var(--dsw-alias-label-primary) 30%, transparent);opacity:0;pointer-events:none;z-index:10;border-radius:12px;flex-direction:column;gap:6px;padding:12px 14px;transition:opacity .16s,transform .16s;display:flex;position:absolute;bottom:calc(100% + 8px);left:0;right:0;transform:translateY(4px)}@supports (backdrop-filter:blur(1px)){.VWh0dG_triggerPop{background:radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 14%, transparent), transparent 55%), color-mix(in srgb, var(--dsw-alias-bg-layer-2) 82%, transparent);backdrop-filter:blur(14px)}}.VWh0dG_triggerWrap:hover .VWh0dG_triggerPop,.VWh0dG_triggerWrap:focus-within .VWh0dG_triggerPop{opacity:1;transform:translateY(0)}.VWh0dG_triggerPopRow{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.VWh0dG_triggerPopLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}.VWh0dG_triggerPopValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;line-height:18px}.VWh0dG_triggerPopBars{border-top:1px solid var(--dsw-alias-border-l1);align-items:flex-end;gap:4px;height:22px;margin-top:4px;padding-top:8px;display:flex}.VWh0dG_triggerPopBar{background:linear-gradient(180deg, var(--dsw-static-blue-400), var(--dsw-static-blue-500));border-radius:2px;flex:1;transition:height .2s}.VWh0dG_dashboardModal{background:linear-gradient(var(--dsw-alias-bg-layer-2), var(--dsw-alias-bg-layer-2)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent), color-mix(in srgb, var(--dsw-static-blue-400) 22%, transparent) 45%, color-mix(in srgb, var(--dsw-static-blue-500) 38%, transparent)) border-box;width:min(760px,100vw - 48px);max-height:min(760px,88vh);box-shadow:var(--dsw-shadow-lv3), 0 24px 80px -24px color-mix(in srgb, var(--dsw-static-blue-500) 35%, transparent);border:1px solid #0000;animation:.18s ease-out VWh0dG_dashboardIn}@keyframes VWh0dG_dashboardIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}div[role=presentation]:has(>.dsh-billing-modal)>div[aria-hidden=true]:first-child{backdrop-filter:blur(8px)saturate(1.25)}.VWh0dG_dashboard{flex-direction:column;width:100%;max-height:min(760px,88vh);display:flex}.VWh0dG_dashboardHead{border-bottom:1px solid var(--dsw-alias-border-l1);justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 14px;display:flex}.VWh0dG_dashboardTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:17px;font-weight:600;line-height:24px}.VWh0dG_dashboardSubtitle{color:var(--dsw-alias-label-caption);margin:3px 0 0;font-size:12px;line-height:17px}.VWh0dG_closeButton{width:30px;height:30px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .14s;display:inline-flex}.VWh0dG_closeButton:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_closeButton svg{stroke-width:2px;width:16px;height:16px}.VWh0dG_dashboardBody{flex-direction:column;gap:14px;padding:16px 24px 24px;display:flex;overflow-y:auto}.VWh0dG_tabNav{border-bottom:1px solid var(--dsw-alias-border-l1);align-items:center;gap:4px;padding:10px 24px;display:flex}.VWh0dG_tabButton{color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:500;line-height:18px;transition:background-color .16s,color .16s,box-shadow .16s}.VWh0dG_tabButton:hover,.VWh0dG_tabButton:focus-visible{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover);outline:none}.VWh0dG_tabButtonActive,.VWh0dG_tabButtonActive:hover,.VWh0dG_tabButtonActive:focus-visible{background:linear-gradient(135deg, var(--dsw-static-blue-500), color-mix(in srgb, var(--dsw-static-blue-500) 72%, var(--dsw-static-blue-400)));color:var(--dsw-static-neutral-bluish-00);box-shadow:0 2px 10px -3px color-mix(in srgb, var(--dsw-static-blue-500) 55%, transparent);font-weight:600}.VWh0dG_tabPanel{flex-direction:column;gap:14px;animation:.14s ease-out VWh0dG_tabPanelIn;display:flex}@keyframes VWh0dG_tabPanelIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.VWh0dG_hero{border:1px solid color-mix(in srgb, var(--dsw-static-blue-500) 16%, var(--dsw-alias-border-l1));background:radial-gradient(90% 150% at 6% 0%, color-mix(in srgb, var(--dsw-static-blue-500) 10%, transparent), transparent 60%), radial-gradient(70% 130% at 96% 100%, color-mix(in srgb, var(--dsw-static-blue-400) 8%, transparent), transparent 55%), var(--dsw-alias-bg-layer-1);border-radius:16px;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;display:flex;position:relative;overflow:hidden}.VWh0dG_heroMain{flex-direction:column;gap:4px;min-width:0;display:flex}.VWh0dG_heroLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroValue{letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;background:linear-gradient(120deg, var(--dsw-alias-label-primary) 25%, color-mix(in srgb, var(--dsw-static-blue-500) 85%, var(--dsw-alias-label-primary)));color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:44px;font-weight:600;line-height:52px}.VWh0dG_heroMeta{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSide{border-left:1px solid var(--dsw-alias-border-l1);flex-direction:column;flex:none;gap:10px;padding-left:24px;display:flex}.VWh0dG_heroSideItem{align-items:baseline;gap:8px;display:flex}.VWh0dG_heroSideLabel{color:var(--dsw-alias-label-tertiary);white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_heroSideValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px;font-weight:600;line-height:22px}.VWh0dG_delta{align-items:center;gap:2px;margin-left:4px;font-size:11px;font-weight:600;line-height:17px;display:inline-flex}.VWh0dG_deltaUp{color:var(--dsw-static-green-500)}.VWh0dG_deltaDown{color:var(--dsw-static-red-500)}.VWh0dG_kpiGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.VWh0dG_kpiTile{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:3px;padding:14px 15px;transition:border-color .16s,background-color .16s,transform .16s,box-shadow .16s;display:flex;position:relative;overflow:hidden}.VWh0dG_kpiTile:before{content:\"\";background:linear-gradient(90deg, color-mix(in srgb, var(--dsw-static-blue-500) 70%, transparent), transparent);opacity:.7;height:2px;position:absolute;inset:0 0 auto}.VWh0dG_kpiTile:has(.VWh0dG_kpiGreen):before{background:linear-gradient(90deg, color-mix(in srgb, var(--dsw-static-green-500) 70%, transparent), transparent)}.VWh0dG_kpiTile:hover{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-interactive-bg-hover);box-shadow:0 6px 16px -8px color-mix(in srgb, var(--dsw-alias-label-primary) 35%, transparent);transform:translateY(-1px)}.VWh0dG_kpiLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:15px}.VWh0dG_kpiValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:21px;font-weight:600;line-height:27px}.VWh0dG_kpiGreen{color:var(--dsw-static-green-500)}.VWh0dG_kpiDetail{color:var(--dsw-alias-label-caption);white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:15px;overflow:hidden}.VWh0dG_panel{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;gap:10px;padding:16px 18px;display:flex}.VWh0dG_panelHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_panelTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:14px;font-weight:600;line-height:20px}.VWh0dG_panelHint{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:11px;line-height:16px}.VWh0dG_rangeToggle{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:8px;gap:2px;padding:2px;display:inline-flex}.VWh0dG_rangeButton{color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 8px;font-size:11px;line-height:16px;transition:background-color .14s,color .14s}.VWh0dG_rangeButtonActive{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-weight:600}.VWh0dG_exportBar{justify-content:flex-end;align-items:center;gap:8px;display:flex}.VWh0dG_exportLabel{color:var(--dsw-alias-label-caption);font-size:11px;line-height:16px}.VWh0dG_exportButton{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);cursor:pointer;border-radius:999px;padding:4px 12px;font-size:11.5px;line-height:16px;transition:border-color .16s,color .16s,background-color .16s}.VWh0dG_exportButton:hover,.VWh0dG_exportButton:focus-visible{border-color:color-mix(in srgb, var(--dsw-static-blue-500) 40%, var(--dsw-alias-border-l1));color:var(--dsw-static-blue-500);outline:none}.VWh0dG_shareTrack{background:var(--dsw-alias-bg-module-platform);border-radius:999px;height:10px;display:flex;overflow:hidden}.VWh0dG_shareSeg{height:100%;transition:width .2s}.VWh0dG_shareSegPeak{background:linear-gradient(90deg, var(--dsw-static-blue-500), var(--dsw-static-blue-400))}.VWh0dG_shareSegOff{background:color-mix(in srgb, var(--dsw-static-blue-500) 30%, var(--dsw-alias-bg-module-platform))}.VWh0dG_shareSegUser{background:linear-gradient(90deg, var(--dsw-static-blue-500), var(--dsw-static-blue-400))}.VWh0dG_shareSegAssistant{background:linear-gradient(90deg, var(--dsw-static-green-500), color-mix(in srgb, var(--dsw-static-green-500) 70%, var(--dsw-static-blue-400)))}.VWh0dG_shareSegTool{background:color-mix(in srgb, var(--dsw-static-amber-500) 80%, var(--dsw-alias-bg-module-platform))}.VWh0dG_shareLegend{align-items:center;gap:16px;display:flex}.VWh0dG_shareItem{color:var(--dsw-alias-label-secondary);align-items:baseline;gap:6px;font-size:12px;line-height:17px;display:inline-flex}.VWh0dG_shareDot{border-radius:50%;flex:none;align-self:center;width:8px;height:8px}.VWh0dG_shareValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-weight:600}.VWh0dG_budget{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:14px;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.VWh0dG_budgetHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.VWh0dG_budgetLabel{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:17px}.VWh0dG_budgetValue{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;line-height:17px}.VWh0dG_budgetControls{align-items:center;gap:8px;min-width:0;display:inline-flex}.VWh0dG_budgetInputWrap{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:6px;align-items:center;gap:2px;padding:2px 6px;display:inline-flex}.VWh0dG_budgetInputWrap:focus-within{border-color:var(--dsw-alias-border-l3)}.VWh0dG_budgetUnit{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}.VWh0dG_budgetInput{width:64px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;text-align:right;background:0 0;border:none;padding:0;font-size:12px;line-height:16px}.VWh0dG_budgetInput:focus-visible{outline:none}.VWh0dG_switch{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-module-platform);cursor:pointer;border-radius:999px;flex:none;width:30px;height:17px;padding:0;transition:background-color .16s,border-color .16s;position:relative}.VWh0dG_switchOn{border-color:var(--dsw-static-blue-500);background:var(--dsw-static-blue-500)}.VWh0dG_switchKnob{background:var(--dsw-static-neutral-bluish-00);border-radius:50%;width:11px;height:11px;transition:transform .16s;position:absolute;top:2px;left:2px}.VWh0dG_switchOn .VWh0dG_switchKnob{transform:translate(13px)}.VWh0dG_budgetTrack{background:var(--dsw-alias-bg-module-platform);border-radius:999px;height:6px;overflow:hidden}.VWh0dG_budgetFill{background:var(--dsw-static-blue-500);border-radius:999px;height:100%;transition:width .2s}.VWh0dG_budgetFillWarn{background:var(--dsw-static-amber-500)}.VWh0dG_budgetFillOver{background:var(--dsw-static-red-500);animation:1.6s ease-in-out infinite VWh0dG_budgetOverPulse}@keyframes VWh0dG_budgetOverPulse{50%{opacity:.55}}.VWh0dG_chartWrap{width:100%;position:relative}.VWh0dG_chartSvg{width:100%;height:auto;display:block}.VWh0dG_chartEmpty{height:140px;color:var(--dsw-alias-label-caption);justify-content:center;align-items:center;font-size:13px;display:flex}.VWh0dG_emptyRow{text-align:center;color:var(--dsw-alias-label-caption);padding:28px 0;font-size:13px}.VWh0dG_chartGrid{stroke:var(--dsw-alias-border-l1);stroke-width:1px}.VWh0dG_chartAxisLabel{fill:var(--dsw-alias-label-tertiary);font-size:10px}.VWh0dG_chartBar{fill:var(--dsw-static-blue-500);opacity:.35}.VWh0dG_chartBar:hover{opacity:.6}.VWh0dG_chartStack{stroke:var(--dsw-alias-bg-layer-1);stroke-width:.75px}.VWh0dG_chartStack:hover{opacity:.85}.VWh0dG_chartLine{stroke:var(--dsw-static-blue-500);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.VWh0dG_chartCrosshair{stroke:var(--dsw-alias-label-dimmed);stroke-width:1px;stroke-dasharray:3 3}.VWh0dG_chartDot{fill:var(--dsw-static-neutral-bluish-00);stroke:var(--dsw-static-blue-500);stroke-width:2.5px}.VWh0dG_chartTooltip{pointer-events:none;z-index:2;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);box-shadow:var(--dsw-shadow-lv2);white-space:nowrap;border-radius:10px;padding:8px 10px;position:absolute;transform:translate(-50%,calc(-100% - 10px))}.VWh0dG_chartTooltipDate{color:var(--dsw-alias-label-primary);margin-bottom:3px;font-size:11px;font-weight:600}.VWh0dG_chartTooltipRow{color:var(--dsw-alias-label-secondary);align-items:center;gap:5px;font-size:11px;line-height:17px;display:flex}.VWh0dG_chartTooltipRow strong{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-weight:600}.VWh0dG_chartLegendLine{background:var(--dsw-static-blue-500);border-radius:2px;width:10px;height:3px;display:inline-block}.VWh0dG_chartLegendBar{background:var(--dsw-static-blue-500);opacity:.5;border-radius:2px;width:7px;height:7px;display:inline-block}.VWh0dG_chartTooltipSwatch{border-radius:3px;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_chartLegend{color:var(--dsw-alias-label-tertiary);justify-content:flex-end;gap:14px;margin-top:2px;font-size:11px;display:flex}.VWh0dG_chartLegend span{align-items:center;gap:5px;display:inline-flex}.VWh0dG_tableScroll{border:1px solid var(--dsw-alias-border-l1);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border-radius:12px;overflow:auto}.VWh0dG_modelTable,.VWh0dG_pricingTable{border-collapse:collapse;width:100%;font-size:12.5px}.VWh0dG_modelTable th,.VWh0dG_modelTable td,.VWh0dG_pricingTable th,.VWh0dG_pricingTable td{border-bottom:1px solid var(--dsw-alias-border-l1);text-align:left;white-space:nowrap;padding:9px 12px}.VWh0dG_modelTable tbody tr:last-child td,.VWh0dG_pricingTable tbody tr:last-child td{border-bottom:0}.VWh0dG_modelTable thead th,.VWh0dG_pricingTable thead th{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform);font-size:11px;font-weight:500}.VWh0dG_modelTable tbody tr,.VWh0dG_pricingTable tbody tr{transition:background-color .12s}.VWh0dG_modelTable tbody tr:hover,.VWh0dG_pricingTable tbody tr:hover{background:var(--dsw-alias-interactive-bg-hover)}.VWh0dG_numCol{text-align:right;font-variant-numeric:tabular-nums}.VWh0dG_costCol{color:var(--dsw-static-blue-500);font-weight:600}.VWh0dG_na{color:var(--dsw-alias-label-dimmed)}.VWh0dG_modelCell{align-items:center;gap:8px;display:inline-flex}.VWh0dG_modelDot{width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-bg-layer-1) 60%, transparent);border-radius:50%;flex:none}.VWh0dG_modelName{color:var(--dsw-alias-label-primary);font-weight:500;line-height:16px;display:block}.VWh0dG_modelProvider{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px;display:block}.VWh0dG_pricingToggle{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0;display:flex}.VWh0dG_pricingToggle:hover .VWh0dG_panelTitle,.VWh0dG_pricingToggle:focus-visible .VWh0dG_panelTitle{color:var(--dsw-static-blue-500)}.VWh0dG_rateBadge{vertical-align:1px;white-space:nowrap;border-radius:999px;align-items:center;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:500;line-height:14px;display:inline-flex}.VWh0dG_rateBadgeLive{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_rateBadgeBuiltin{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-module-platform)}.VWh0dG_pricingToggleText{align-items:baseline;gap:10px;min-width:0;display:flex}.VWh0dG_pricingChevron{width:16px;height:16px;color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.VWh0dG_pricingChevronOpen{transform:rotate(180deg)}.VWh0dG_bandPrice{align-items:baseline;gap:6px;display:inline-flex}.VWh0dG_bandPriceOff{color:var(--dsw-alias-label-caption)}.VWh0dG_bandPriceOff:before{content:\"/\";color:var(--dsw-alias-label-dimmed);margin-right:4px}.VWh0dG_bandTag{color:var(--dsw-alias-label-secondary);flex-direction:column;gap:1px;font-size:10.5px;line-height:14px;display:inline-flex}.VWh0dG_bandTagOff{color:var(--dsw-static-green-500);font-weight:600}.VWh0dG_flatTag{color:var(--dsw-alias-label-caption);font-size:10.5px;line-height:14px}.VWh0dG_healthDot{border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.VWh0dG_healthOk{background:var(--dsw-static-green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-green-500) 18%, transparent)}.VWh0dG_healthBad{background:var(--dsw-static-red-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-static-red-500) 18%, transparent)}.VWh0dG_healthIdle{background:var(--dsw-static-neutral-bluish-400)}.VWh0dG_dashboardRight{align-items:center;gap:8px;min-width:0;display:flex}.VWh0dG_healthBadge{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:11px;line-height:16px;display:inline-flex}.VWh0dG_healthBadgeOk{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 10%, transparent)}.VWh0dG_healthBadgeBad{color:var(--dsw-static-red-500);background:color-mix(in srgb, var(--dsw-static-red-500) 10%, transparent)}.VWh0dG_planTag{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 12%, transparent);border-radius:999px;align-items:center;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.VWh0dG_uncataloguedTag{vertical-align:1px;color:var(--dsw-static-amber-500);background:color-mix(in srgb, var(--dsw-static-amber-500) 12%, transparent);border-radius:999px;margin-left:6px;padding:0 6px;font-size:10px;font-weight:600;line-height:16px;display:inline-block}.VWh0dG_estimatedTag{vertical-align:1px;color:var(--dsw-static-blue-500);background:color-mix(in srgb, var(--dsw-static-blue-500) 12%, transparent);border-radius:999px;margin-left:6px;padding:0 6px;font-size:10px;font-weight:600;line-height:16px;display:inline-block}.VWh0dG_liveCostBar{color:var(--dsw-static-neutral-400);font-variant-numeric:tabular-nums;align-items:center;gap:6px;font-size:11px;line-height:16px;display:inline-flex}.VWh0dG_liveCostItem{white-space:nowrap}.VWh0dG_liveCostSep{color:var(--dsw-static-neutral-300)}.VWh0dG_liveTierPeak{color:var(--dsw-static-blue-500);font-weight:600}.VWh0dG_liveTierOff{color:var(--dsw-static-green-500);font-weight:600}.VWh0dG_liveQuotaWarn{color:var(--dsw-static-amber-500);font-weight:600}.VWh0dG_liveQuotaCrit{color:var(--dsw-static-red-500);font-weight:600}.VWh0dG_balanceCell{flex-direction:column;align-items:flex-end;gap:2px;display:inline-flex}.VWh0dG_balanceDays{color:var(--dsw-alias-label-caption);white-space:nowrap;font-size:10.5px;line-height:14px}.VWh0dG_balanceDaysLow{color:var(--dsw-static-red-500);font-weight:600}body[data-zine-mode] .VWh0dG_trigger,body[data-zine-mode] .VWh0dG_triggerPop,body[data-zine-mode] .VWh0dG_railButton{display:none}body[data-zine-mode] .VWh0dG_dashboardHead{background:#000;border-bottom:2px solid #e8ff00}body[data-zine-mode] .VWh0dG_headTitleRow{align-items:center;gap:8px;margin-top:4px;display:flex}body[data-zine-mode] .VWh0dG_dashboardTitle{color:#e8ff00;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 8px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_dashboardSubtitle{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px}body[data-zine-mode] .VWh0dG_closeButton{color:#0a0a05;background:#ff2d95;border:1.5px solid #ff2d95;border-radius:0;box-shadow:0 0 10px #ff2d9573}body[data-zine-mode] .VWh0dG_hero{background:#000;border:2.5px solid #e8ff00;border-radius:0;position:relative;box-shadow:0 0 0 1px #0009,0 0 24px #e8ff002e}body[data-zine-mode] .VWh0dG_heroLabel{color:#c9d98a;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroValue{color:#e8ff00;letter-spacing:-.02em;text-shadow:0 0 12px #e8ff0073;-webkit-text-fill-color:#e8ff00;background:0 0;font-size:38px;font-weight:900}body[data-zine-mode] .VWh0dG_heroMeta{color:#c9d98a;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}body[data-zine-mode] .VWh0dG_heroSideLabel{color:#c9d98a;letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_heroSideValue{color:#e8ff00;text-shadow:0 0 6px #e8ff0059}body[data-zine-mode] .VWh0dG_delta{font-weight:900}body[data-zine-mode] .VWh0dG_deltaUp{color:#ff2d95}body[data-zine-mode] .VWh0dG_deltaDown{color:#c9d98a}body[data-zine-mode] .VWh0dG_tabNav{background:#000;border-bottom:2px solid #e8ff00}body[data-zine-mode] .VWh0dG_tabButton{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;border-radius:0;font-size:10.5px;font-weight:900}body[data-zine-mode] .VWh0dG_tabButton:hover,body[data-zine-mode] .VWh0dG_tabButton:focus-visible{color:#e8ff00;background:#e8ff001f}body[data-zine-mode] .VWh0dG_tabButtonActive,body[data-zine-mode] .VWh0dG_tabButtonActive:hover,body[data-zine-mode] .VWh0dG_tabButtonActive:focus-visible{color:#0a0a05;background:#e8ff00;box-shadow:0 0 10px #e8ff0073}body[data-zine-mode] .VWh0dG_panel{background:#000;border:2px solid #e8ff00;border-radius:0}body[data-zine-mode] .VWh0dG_trendPanel{position:relative}body[data-zine-mode] .VWh0dG_panelTitle{color:#e8ff00;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 6px #e8ff0066;font-weight:900}body[data-zine-mode] .VWh0dG_panelHint{color:#c9d98a;letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:900}body[data-zine-mode] .VWh0dG_modelTableScroll{background:#000;border:1.5px solid #e8ff0080;border-radius:0}.VWh0dG_currencyToggle{border:1px solid var(--dsw-alias-border-muted,#3a4250);background:var(--dsw-alias-bg-layer-2,#232a33);border-radius:6px;align-items:center;gap:2px;margin-right:8px;padding:2px;display:inline-flex}.VWh0dG_currencyButton{color:var(--dsw-alias-text-secondary,#9aa5b1);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:4px 7px;font-size:11px;font-weight:700;line-height:1}.VWh0dG_currencyButtonActive{background:var(--dsw-alias-accent-muted,#2f6fed);color:#fff}.VWh0dG_subscriptionGrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px;display:grid}.VWh0dG_subscriptionCard{border:1px solid var(--dsw-alias-border-muted,#3a4250);background:var(--dsw-alias-bg-layer-2,#232a33);border-radius:8px;padding:10px 12px}.VWh0dG_subscriptionHead{align-items:baseline;gap:8px;margin-bottom:6px;display:flex}.VWh0dG_subscriptionName{font-size:13px;font-weight:700}.VWh0dG_subscriptionPlan{color:var(--dsw-alias-text-secondary,#9aa5b1);font-size:11px}.VWh0dG_subscriptionStatus{color:var(--dsw-alias-warning,#e0a63c);margin-bottom:6px;font-size:11px}.VWh0dG_subscriptionWindow{align-items:center;gap:8px;margin-top:6px;font-size:11px;display:flex}.VWh0dG_subscriptionWindowLabel{color:var(--dsw-alias-text-secondary,#9aa5b1);flex:0 0 44px}.VWh0dG_subscriptionTrack{background:var(--dsw-alias-bg-layer-3,#1a2028);border-radius:3px;flex:1;height:5px;overflow:hidden}.VWh0dG_subscriptionFill{background:var(--dsw-alias-accent,#3b82f6);border-radius:3px;height:100%;transition:width .2s;display:block}.VWh0dG_subscriptionFillWarn{background:var(--dsw-static-amber-500)}.VWh0dG_subscriptionFillOver{background:var(--dsw-static-red-500)}.VWh0dG_subscriptionPct{text-align:right;font-variant-numeric:tabular-nums;flex:none;min-width:52px}.VWh0dG_subscriptionExhausted{color:var(--dsw-static-red-500);min-width:52px;font-weight:600}.VWh0dG_subscriptionReset{color:var(--dsw-alias-text-secondary,#9aa5b1);flex:none}.VWh0dG_providerGroupList{flex-direction:column;gap:10px;display:flex}.VWh0dG_providerGroup{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:12px;padding:12px 14px}.VWh0dG_providerGroupHead{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.VWh0dG_providerGroupTitle{align-items:center;gap:7px;min-width:0;display:inline-flex}.VWh0dG_providerGroupName{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:18px}.VWh0dG_providerGroupMeta{flex:none;align-items:center;gap:10px;display:inline-flex}.VWh0dG_providerGroupBadge{color:var(--dsw-static-green-500);background:color-mix(in srgb, var(--dsw-static-green-500) 12%, transparent);border-radius:999px;align-items:center;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.VWh0dG_providerGroupBalance{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:baseline;gap:6px;font-size:12px;line-height:17px;display:inline-flex}.VWh0dG_providerGroupBalanceLabel{color:var(--dsw-alias-label-caption);font-size:11px;line-height:17px}.VWh0dG_roundsFlagBadge{color:#fff;background:#ef4444;border-radius:999px;margin-left:8px;padding:1px 7px;font-size:10px;font-weight:800}.VWh0dG_rounds{margin-top:10px}.VWh0dG_roundsBars{align-items:flex-end;gap:3px;height:110px;padding:4px 2px 0;display:flex;overflow-x:auto}.VWh0dG_roundsBarCol{flex-direction:column;flex:1 0 28px;justify-content:flex-end;align-items:stretch;height:100%;display:flex}.VWh0dG_roundsBarLabel{text-align:center;color:var(--dsw-alias-text-secondary,#9aa5b1);white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-bottom:2px;font-size:8px;line-height:1;overflow:hidden}.VWh0dG_roundsBarWrap{flex:1;align-items:flex-end;min-height:0;display:flex}.VWh0dG_roundsBar{background:var(--dsw-alias-accent,#3b82f6);border-radius:2px 2px 0 0;width:100%;min-height:2px;position:relative}.VWh0dG_roundsBarFlagged{outline-offset:1px;background:#ef4444;border-radius:2px 2px 0 0;outline:1.5px solid #ef4444;width:100%;min-height:2px;position:relative}.VWh0dG_roundsFlagMark{background:#ef4444;border-radius:50%;width:7px;height:7px;position:absolute;top:-3px;right:-3px;box-shadow:0 0 4px #ef4444}.VWh0dG_roundsAxis{color:var(--dsw-alias-text-secondary,#9aa5b1);justify-content:space-between;margin-top:6px;font-size:10px;display:flex}.VWh0dG_roundsEmpty{color:var(--dsw-alias-text-secondary,#9aa5b1);margin-top:10px;font-size:12px}.VWh0dG_heatmap{margin-top:10px}.VWh0dG_heatmapGrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;display:grid}.VWh0dG_heatmapCellEmpty{background:var(--dsw-alias-bg-layer-1);height:30px;color:var(--dsw-alias-label-dimmed,#6b7480);font-variant-numeric:tabular-nums;border-radius:8px;justify-content:center;align-items:center;font-size:11px;display:flex}.VWh0dG_heatmapCell{font-variant-numeric:tabular-nums;cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;height:30px;padding:0;font-size:11px;display:flex}.VWh0dG_heatmapCell[data-level=\"0\"],.VWh0dG_heatmapCell[data-level=\"1\"],.VWh0dG_heatmapCell[data-level=\"2\"]{color:var(--dsw-alias-label-primary)}.VWh0dG_heatmapCell[data-level=\"3\"],.VWh0dG_heatmapCell[data-level=\"4\"]{color:var(--dsw-static-neutral-bluish-00,#fff)}.VWh0dG_heatmapFooter{color:var(--dsw-alias-text-secondary,#9aa5b1);align-items:center;gap:8px;margin-top:10px;font-size:10px;display:flex}.VWh0dG_heatmapLegend{gap:3px;display:inline-flex}.VWh0dG_heatmapLegend i{border-radius:4px;width:14px;height:14px;display:block}.VWh0dG_heatmapHover{font-variant-numeric:tabular-nums;margin-left:auto}@media (width<=640px){.VWh0dG_kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.VWh0dG_hero{flex-direction:column;align-items:flex-start;gap:14px}.VWh0dG_heroSide{border-left:none;border-top:1px solid var(--dsw-alias-border-l1);flex-direction:row;align-self:stretch;gap:20px;padding-top:14px;padding-left:0}}";
 		const tagId = "@kenz1117/dsh-ui-usage-billing/UsageBilling.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -34,170 +34,199 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var UsageBilling_module_css_default = {
-			"panelHead": "VWh0dG_panelHead",
-			"bandPrice": "VWh0dG_bandPrice",
-			"chartDot": "VWh0dG_chartDot",
-			"healthBadgeOk": "VWh0dG_healthBadgeOk",
-			"headTitleRow": "VWh0dG_headTitleRow",
-			"estimatedTag": "VWh0dG_estimatedTag",
-			"tabButtonActive": "VWh0dG_tabButtonActive",
-			"flatTag": "VWh0dG_flatTag",
+			"subscriptionStatus": "VWh0dG_subscriptionStatus",
+			"delta": "VWh0dG_delta",
+			"currencyButtonActive": "VWh0dG_currencyButtonActive",
+			"healthBad": "VWh0dG_healthBad",
+			"subscriptionGrid": "VWh0dG_subscriptionGrid",
+			"chartWrap": "VWh0dG_chartWrap",
+			"subscriptionFill": "VWh0dG_subscriptionFill",
+			"kpiTile": "VWh0dG_kpiTile",
+			"chartTooltipDate": "VWh0dG_chartTooltipDate",
+			"deltaDown": "VWh0dG_deltaDown",
+			"healthOk": "VWh0dG_healthOk",
+			"liveQuotaWarn": "VWh0dG_liveQuotaWarn",
+			"heroMain": "VWh0dG_heroMain",
+			"subscriptionCard": "VWh0dG_subscriptionCard",
+			"railButton": "VWh0dG_railButton",
+			"subscriptionPlan": "VWh0dG_subscriptionPlan",
+			"providerGroup": "VWh0dG_providerGroup",
+			"heatmapGrid": "VWh0dG_heatmapGrid",
+			"uncataloguedTag": "VWh0dG_uncataloguedTag",
 			"roundsBarFlagged": "VWh0dG_roundsBarFlagged",
+			"roundsEmpty": "VWh0dG_roundsEmpty",
+			"kpiLabel": "VWh0dG_kpiLabel",
+			"kpiValue": "VWh0dG_kpiValue",
+			"triggerIcon": "VWh0dG_triggerIcon",
+			"rangeButtonActive": "VWh0dG_rangeButtonActive",
+			"modelName": "VWh0dG_modelName",
+			"healthIdle": "VWh0dG_healthIdle",
+			"budget": "VWh0dG_budget",
+			"trigger": "VWh0dG_trigger",
+			"panelHead": "VWh0dG_panelHead",
+			"pricingToggleText": "VWh0dG_pricingToggleText",
+			"liveCostItem": "VWh0dG_liveCostItem",
+			"deltaUp": "VWh0dG_deltaUp",
+			"pricingChevron": "VWh0dG_pricingChevron",
+			"rateBadgeLive": "VWh0dG_rateBadgeLive",
 			"rangeToggle": "VWh0dG_rangeToggle",
-			"liveCostSep": "VWh0dG_liveCostSep",
-			"heatmapCellEmpty": "VWh0dG_heatmapCellEmpty",
-			"triggerAmount": "VWh0dG_triggerAmount",
-			"kpiDetail": "VWh0dG_kpiDetail",
-			"chartSvg": "VWh0dG_chartSvg",
-			"subscriptionReset": "VWh0dG_subscriptionReset",
-			"rateBadge": "VWh0dG_rateBadge",
-			"roundsBarCol": "VWh0dG_roundsBarCol",
-			"chartLegendLine": "VWh0dG_chartLegendLine",
+			"chartBar": "VWh0dG_chartBar",
+			"dashboardRight": "VWh0dG_dashboardRight",
+			"budgetInputWrap": "VWh0dG_budgetInputWrap",
+			"triggerToday": "VWh0dG_triggerToday",
+			"exportButton": "VWh0dG_exportButton",
+			"chartCrosshair": "VWh0dG_chartCrosshair",
+			"triggerPopBar": "VWh0dG_triggerPopBar",
+			"dashboardTitle": "VWh0dG_dashboardTitle",
+			"costCol": "VWh0dG_costCol",
+			"flatTag": "VWh0dG_flatTag",
 			"healthBadge": "VWh0dG_healthBadge",
-			"heroMeta": "VWh0dG_heroMeta",
-			"tabPanelIn": "VWh0dG_tabPanelIn",
-			"chartEmpty": "VWh0dG_chartEmpty",
-			"subscriptionPct": "VWh0dG_subscriptionPct",
-			"budgetOverPulse": "VWh0dG_budgetOverPulse",
+			"liveTierPeak": "VWh0dG_liveTierPeak",
+			"providerGroupHead": "VWh0dG_providerGroupHead",
 			"subscriptionHead": "VWh0dG_subscriptionHead",
-			"dashboardBody": "VWh0dG_dashboardBody",
-			"chartTooltipRow": "VWh0dG_chartTooltipRow",
-			"liveCostBar": "VWh0dG_liveCostBar",
-			"budgetUnit": "VWh0dG_budgetUnit",
-			"currencyButton": "VWh0dG_currencyButton",
-			"budget": "VWh0dG_budget",
+			"trendPanel": "VWh0dG_trendPanel",
 			"switchKnob": "VWh0dG_switchKnob",
-			"panelTitle": "VWh0dG_panelTitle",
-			"healthOk": "VWh0dG_healthOk",
-			"currencyToggle": "VWh0dG_currencyToggle",
-			"heroValue": "VWh0dG_heroValue",
-			"triggerMeta": "VWh0dG_triggerMeta",
-			"heroSide": "VWh0dG_heroSide",
-			"providerGroupList": "VWh0dG_providerGroupList",
-			"rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
-			"chartAxisLabel": "VWh0dG_chartAxisLabel",
+			"providerGroupBalanceLabel": "VWh0dG_providerGroupBalanceLabel",
+			"heatmap": "VWh0dG_heatmap",
 			"dashboard": "VWh0dG_dashboard",
+			"triggerPopValue": "VWh0dG_triggerPopValue",
+			"triggerPopLabel": "VWh0dG_triggerPopLabel",
+			"budgetHead": "VWh0dG_budgetHead",
+			"triggerAmount": "VWh0dG_triggerAmount",
+			"healthBadgeOk": "VWh0dG_healthBadgeOk",
+			"triggerWrap": "VWh0dG_triggerWrap",
+			"triggerAmountSub": "VWh0dG_triggerAmountSub",
+			"shareDot": "VWh0dG_shareDot",
+			"balanceDaysLow": "VWh0dG_balanceDaysLow",
+			"panel": "VWh0dG_panel",
+			"budgetLabel": "VWh0dG_budgetLabel",
 			"pricingChevronOpen": "VWh0dG_pricingChevronOpen",
-			"roundsEmpty": "VWh0dG_roundsEmpty",
-			"bandTag": "VWh0dG_bandTag",
-			"chartGrid": "VWh0dG_chartGrid",
-			"roundsBars": "VWh0dG_roundsBars",
-			"modelTable": "VWh0dG_modelTable",
-			"heroSideItem": "VWh0dG_heroSideItem",
-			"kpiLabel": "VWh0dG_kpiLabel",
-			"kpiGreen": "VWh0dG_kpiGreen",
-			"budgetFill": "VWh0dG_budgetFill",
-			"kpiTile": "VWh0dG_kpiTile",
-			"trigger": "VWh0dG_trigger",
-			"bandPriceOff": "VWh0dG_bandPriceOff",
-			"liveCostItem": "VWh0dG_liveCostItem",
-			"subscriptionTrack": "VWh0dG_subscriptionTrack",
-			"na": "VWh0dG_na",
-			"delta": "VWh0dG_delta",
-			"heroSideLabel": "VWh0dG_heroSideLabel",
-			"pricingToggleText": "VWh0dG_pricingToggleText",
-			"rangeButtonActive": "VWh0dG_rangeButtonActive",
+			"kpiGrid": "VWh0dG_kpiGrid",
+			"chartLegend": "VWh0dG_chartLegend",
+			"balanceDays": "VWh0dG_balanceDays",
+			"subscriptionExhausted": "VWh0dG_subscriptionExhausted",
 			"budgetFillOver": "VWh0dG_budgetFillOver",
+			"subscriptionWindow": "VWh0dG_subscriptionWindow",
+			"roundsAxis": "VWh0dG_roundsAxis",
 			"chartStack": "VWh0dG_chartStack",
-			"closeButton": "VWh0dG_closeButton",
-			"budgetLabel": "VWh0dG_budgetLabel",
-			"heroLabel": "VWh0dG_heroLabel",
-			"numCol": "VWh0dG_numCol",
-			"rangeButton": "VWh0dG_rangeButton",
-			"balanceCell": "VWh0dG_balanceCell",
-			"balanceDaysLow": "VWh0dG_balanceDaysLow",
-			"currencyButtonActive": "VWh0dG_currencyButtonActive",
-			"deltaDown": "VWh0dG_deltaDown",
-			"heroSideValue": "VWh0dG_heroSideValue",
-			"switchOn": "VWh0dG_switchOn",
+			"triggerMonth": "VWh0dG_triggerMonth",
+			"kpiDetail": "VWh0dG_kpiDetail",
+			"triggerPop": "VWh0dG_triggerPop",
+			"tabButtonActive": "VWh0dG_tabButtonActive",
+			"shareSeg": "VWh0dG_shareSeg",
+			"triggerDivider": "VWh0dG_triggerDivider",
+			"dashboardModal": "VWh0dG_dashboardModal",
+			"heroMeta": "VWh0dG_heroMeta",
+			"shareLegend": "VWh0dG_shareLegend",
 			"emptyRow": "VWh0dG_emptyRow",
-			"modelTableScroll": "VWh0dG_modelTableScroll",
-			"heroMain": "VWh0dG_heroMain",
-			"budgetTrack": "VWh0dG_budgetTrack",
-			"chartBar": "VWh0dG_chartBar",
-			"budgetValue": "VWh0dG_budgetValue",
-			"chartLegend": "VWh0dG_chartLegend",
-			"rounds": "VWh0dG_rounds",
-			"modelDot": "VWh0dG_modelDot",
-			"switch": "VWh0dG_switch",
-			"panel": "VWh0dG_panel",
-			"roundsBarLabel": "VWh0dG_roundsBarLabel",
-			"pricingTable": "VWh0dG_pricingTable",
+			"budgetOverPulse": "VWh0dG_budgetOverPulse",
+			"shareValue": "VWh0dG_shareValue",
+			"numCol": "VWh0dG_numCol",
+			"liveTierOff": "VWh0dG_liveTierOff",
+			"headTitleRow": "VWh0dG_headTitleRow",
+			"currencyButton": "VWh0dG_currencyButton",
+			"tableScroll": "VWh0dG_tableScroll",
 			"dashboardHead": "VWh0dG_dashboardHead",
-			"healthDot": "VWh0dG_healthDot",
-			"triggerMonth": "VWh0dG_triggerMonth",
-			"providerGroupHead": "VWh0dG_providerGroupHead",
-			"modelProvider": "VWh0dG_modelProvider",
-			"triggerAmountSub": "VWh0dG_triggerAmountSub",
-			"triggerToday": "VWh0dG_triggerToday",
-			"deltaUp": "VWh0dG_deltaUp",
-			"heatmapGrid": "VWh0dG_heatmapGrid",
-			"chartWrap": "VWh0dG_chartWrap",
-			"subscriptionFill": "VWh0dG_subscriptionFill",
-			"subscriptionStatus": "VWh0dG_subscriptionStatus",
-			"subscriptionWindowLabel": "VWh0dG_subscriptionWindowLabel",
-			"roundsFlagMark": "VWh0dG_roundsFlagMark",
-			"heatmapCell": "VWh0dG_heatmapCell",
-			"providerGroupTitle": "VWh0dG_providerGroupTitle",
-			"tabPanel": "VWh0dG_tabPanel",
-			"dashboardRight": "VWh0dG_dashboardRight",
-			"triggerIcon": "VWh0dG_triggerIcon",
-			"subscriptionCard": "VWh0dG_subscriptionCard",
-			"providerGroup": "VWh0dG_providerGroup",
-			"tabNav": "VWh0dG_tabNav",
 			"subscriptionName": "VWh0dG_subscriptionName",
-			"budgetInputWrap": "VWh0dG_budgetInputWrap",
-			"subscriptionPlan": "VWh0dG_subscriptionPlan",
-			"triggerDivider": "VWh0dG_triggerDivider",
-			"heatmap": "VWh0dG_heatmap",
-			"subscriptionGrid": "VWh0dG_subscriptionGrid",
+			"subscriptionPct": "VWh0dG_subscriptionPct",
 			"providerGroupName": "VWh0dG_providerGroupName",
-			"dashboardIn": "VWh0dG_dashboardIn",
-			"panelHint": "VWh0dG_panelHint",
-			"chartLine": "VWh0dG_chartLine",
+			"providerGroupMeta": "VWh0dG_providerGroupMeta",
+			"roundsBarCol": "VWh0dG_roundsBarCol",
+			"heatmapCell": "VWh0dG_heatmapCell",
+			"chartGrid": "VWh0dG_chartGrid",
+			"providerGroupTitle": "VWh0dG_providerGroupTitle",
+			"chartTooltipRow": "VWh0dG_chartTooltipRow",
+			"tabPanelIn": "VWh0dG_tabPanelIn",
+			"chartLegendLine": "VWh0dG_chartLegendLine",
 			"budgetInput": "VWh0dG_budgetInput",
-			"budgetControls": "VWh0dG_budgetControls",
-			"chartTooltip": "VWh0dG_chartTooltip",
-			"tableScroll": "VWh0dG_tableScroll",
-			"dashboardModal": "VWh0dG_dashboardModal",
-			"healthBad": "VWh0dG_healthBad",
-			"trendPanel": "VWh0dG_trendPanel",
+			"rounds": "VWh0dG_rounds",
+			"bandPrice": "VWh0dG_bandPrice",
+			"panelTitle": "VWh0dG_panelTitle",
+			"roundsBars": "VWh0dG_roundsBars",
+			"exportLabel": "VWh0dG_exportLabel",
+			"heroLabel": "VWh0dG_heroLabel",
+			"budgetUnit": "VWh0dG_budgetUnit",
+			"healthBadgeBad": "VWh0dG_healthBadgeBad",
+			"providerGroupBalance": "VWh0dG_providerGroupBalance",
+			"hero": "VWh0dG_hero",
+			"shareSegPeak": "VWh0dG_shareSegPeak",
+			"budgetTrack": "VWh0dG_budgetTrack",
+			"subscriptionTrack": "VWh0dG_subscriptionTrack",
+			"dashboardBody": "VWh0dG_dashboardBody",
+			"budgetFillWarn": "VWh0dG_budgetFillWarn",
+			"pricingToggle": "VWh0dG_pricingToggle",
+			"providerGroupList": "VWh0dG_providerGroupList",
+			"roundsFlagMark": "VWh0dG_roundsFlagMark",
+			"tabPanel": "VWh0dG_tabPanel",
 			"heatmapFooter": "VWh0dG_heatmapFooter",
 			"heatmapHover": "VWh0dG_heatmapHover",
+			"roundsBar": "VWh0dG_roundsBar",
 			"tabButton": "VWh0dG_tabButton",
+			"shareSegOff": "VWh0dG_shareSegOff",
+			"modelCell": "VWh0dG_modelCell",
+			"chartSvg": "VWh0dG_chartSvg",
+			"shareSegUser": "VWh0dG_shareSegUser",
+			"switchOn": "VWh0dG_switchOn",
+			"rangeButton": "VWh0dG_rangeButton",
+			"triggerMeta": "VWh0dG_triggerMeta",
+			"heroValue": "VWh0dG_heroValue",
+			"triggerPopBars": "VWh0dG_triggerPopBars",
+			"subscriptionFillOver": "VWh0dG_subscriptionFillOver",
+			"exportBar": "VWh0dG_exportBar",
+			"modelTable": "VWh0dG_modelTable",
+			"shareTrack": "VWh0dG_shareTrack",
 			"chartTooltipSwatch": "VWh0dG_chartTooltipSwatch",
-			"healthIdle": "VWh0dG_healthIdle",
-			"budgetHead": "VWh0dG_budgetHead",
-			"balanceDays": "VWh0dG_balanceDays",
-			"subscriptionWindow": "VWh0dG_subscriptionWindow",
-			"roundsBar": "VWh0dG_roundsBar",
-			"kpiValue": "VWh0dG_kpiValue",
-			"pricingChevron": "VWh0dG_pricingChevron",
-			"roundsAxis": "VWh0dG_roundsAxis",
-			"providerGroupBadge": "VWh0dG_providerGroupBadge",
-			"dashboardTitle": "VWh0dG_dashboardTitle",
-			"costCol": "VWh0dG_costCol",
-			"modelName": "VWh0dG_modelName",
-			"kpiGrid": "VWh0dG_kpiGrid",
-			"pricingToggle": "VWh0dG_pricingToggle",
-			"heatmapLegend": "VWh0dG_heatmapLegend",
+			"subscriptionWindowLabel": "VWh0dG_subscriptionWindowLabel",
+			"heroSideItem": "VWh0dG_heroSideItem",
+			"rateBadge": "VWh0dG_rateBadge",
+			"roundsBarWrap": "VWh0dG_roundsBarWrap",
+			"budgetValue": "VWh0dG_budgetValue",
+			"chartEmpty": "VWh0dG_chartEmpty",
+			"na": "VWh0dG_na",
+			"chartDot": "VWh0dG_chartDot",
+			"heatmapCellEmpty": "VWh0dG_heatmapCellEmpty",
+			"liveQuotaCrit": "VWh0dG_liveQuotaCrit",
+			"balanceCell": "VWh0dG_balanceCell",
+			"switch": "VWh0dG_switch",
+			"estimatedTag": "VWh0dG_estimatedTag",
+			"shareItem": "VWh0dG_shareItem",
+			"chartLine": "VWh0dG_chartLine",
+			"panelHint": "VWh0dG_panelHint",
 			"planTag": "VWh0dG_planTag",
-			"roundsFlagBadge": "VWh0dG_roundsFlagBadge",
-			"healthBadgeBad": "VWh0dG_healthBadgeBad",
-			"rateBadgeLive": "VWh0dG_rateBadgeLive",
-			"providerGroupMeta": "VWh0dG_providerGroupMeta",
-			"modelCell": "VWh0dG_modelCell",
+			"heroSideLabel": "VWh0dG_heroSideLabel",
+			"shareSegTool": "VWh0dG_shareSegTool",
+			"subscriptionFillWarn": "VWh0dG_subscriptionFillWarn",
+			"budgetControls": "VWh0dG_budgetControls",
+			"heroSideValue": "VWh0dG_heroSideValue",
 			"bandTagOff": "VWh0dG_bandTagOff",
-			"providerGroupBalanceLabel": "VWh0dG_providerGroupBalanceLabel",
-			"roundsBarWrap": "VWh0dG_roundsBarWrap",
-			"hero": "VWh0dG_hero",
-			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
-			"uncataloguedTag": "VWh0dG_uncataloguedTag",
-			"chartCrosshair": "VWh0dG_chartCrosshair",
+			"liveCostBar": "VWh0dG_liveCostBar",
+			"providerGroupBadge": "VWh0dG_providerGroupBadge",
+			"bandPriceOff": "VWh0dG_bandPriceOff",
 			"chartLegendBar": "VWh0dG_chartLegendBar",
-			"chartTooltipDate": "VWh0dG_chartTooltipDate",
-			"providerGroupBalance": "VWh0dG_providerGroupBalance",
-			"railButton": "VWh0dG_railButton"
+			"subscriptionReset": "VWh0dG_subscriptionReset",
+			"chartAxisLabel": "VWh0dG_chartAxisLabel",
+			"heatmapLegend": "VWh0dG_heatmapLegend",
+			"chartTooltip": "VWh0dG_chartTooltip",
+			"budgetFill": "VWh0dG_budgetFill",
+			"modelDot": "VWh0dG_modelDot",
+			"bandTag": "VWh0dG_bandTag",
+			"dashboardSubtitle": "VWh0dG_dashboardSubtitle",
+			"closeButton": "VWh0dG_closeButton",
+			"rateBadgeBuiltin": "VWh0dG_rateBadgeBuiltin",
+			"liveCostSep": "VWh0dG_liveCostSep",
+			"shareSegAssistant": "VWh0dG_shareSegAssistant",
+			"tabNav": "VWh0dG_tabNav",
+			"healthDot": "VWh0dG_healthDot",
+			"triggerPopRow": "VWh0dG_triggerPopRow",
+			"kpiGreen": "VWh0dG_kpiGreen",
+			"modelTableScroll": "VWh0dG_modelTableScroll",
+			"pricingTable": "VWh0dG_pricingTable",
+			"heroSide": "VWh0dG_heroSide",
+			"currencyToggle": "VWh0dG_currencyToggle",
+			"roundsFlagBadge": "VWh0dG_roundsFlagBadge",
+			"dashboardIn": "VWh0dG_dashboardIn",
+			"modelProvider": "VWh0dG_modelProvider",
+			"roundsBarLabel": "VWh0dG_roundsBarLabel"
 		};
 		//#endregion
 		//#region src/client/pricing.ts
@@ -212,6 +241,8 @@ window.__ModuleLoader__.load({
 		/** 运行时实时覆盖：undefined = 用内置目录与内置汇率（默认值降级）。 */
 		let liveRate;
 		let livePrices;
+		let liveExtraModels;
+		let liveCatalogModels;
 		/**
 		* Apply the node half's live pricing snapshot. Absent fields keep the
 		* built-in catalog and rate; callers never fabricate values.
@@ -220,6 +251,16 @@ window.__ModuleLoader__.load({
 		function applyLivePricing(pricing) {
 			liveRate = pricing.rate;
 			livePrices = pricing.prices;
+			liveExtraModels = pricing.extraModels;
+		}
+		/**
+		* 注入探活得到的「系统里实际配置/预制的模型」清单（host 的 llm.models 返回
+		* groups[].models[]，含模型 id/name，无价格）。费率表据此对标现实可用模型——
+		* 有价的补价（内置目录 / models.dev 补充），无价的标「未收录」。纯内存状态，
+		* 供 `catalogEntries()` 渲染。
+		*/
+		function applyLiveCatalogModels(models) {
+			liveCatalogModels = models;
 		}
 		/** 当前汇率：实时覆盖优先，缺省回退内置固定值。 */
 		function currentRate() {
@@ -238,6 +279,77 @@ window.__ModuleLoader__.load({
 		/** Default share of traffic assumed to fall in the peak band (0..1). */
 		const DEFAULT_PEAK_SHARE = .5;
 		/**
+		* 高峰时段判定（北京时间，UTC+8，无夏令时）：09:00–12:00、14:00–18:00。
+		* @param beijingHour - 北京时间的小时数（0–23）。
+		*/
+		function isPeakHour(beijingHour) {
+			return beijingHour >= 9 && beijingHour < 12 || beijingHour >= 14 && beijingHour < 18;
+		}
+		/**
+		* 由时刻（epoch 毫秒）推断计费时段；时刻未知/非法时按高峰计（保守：未知
+		* 时刻不低估成本，与社区 dsh-usage-chart 的 tierAt 语义一致）。
+		* @param timeMs - Unix epoch 毫秒；null/undefined/NaN 视为未知。
+		*/
+		function tierAt(timeMs) {
+			if (timeMs === null || timeMs === void 0 || !Number.isFinite(timeMs)) return "peak";
+			return isPeakHour((new Date(timeMs).getUTCHours() + 8) % 24) ? "peak" : "offPeak";
+		}
+		/** 峰谷切换边界（北京时间的当日分钟数）：09:00 / 12:00 / 14:00 / 18:00。 */
+		const TIER_BOUNDARY_MINUTES = [
+			540,
+			720,
+			840,
+			1080
+		];
+		/** 北京时间的当日毫秒数（0–86,400,000）。 */
+		function beijingMillisOfDay(timeMs) {
+			return ((timeMs + 8 * 36e5) % 864e5 + 864e5) % 864e5;
+		}
+		/**
+		* 当前峰谷档位与距下次切换的时长。导出供测试：纯函数。
+		* @param nowMs - 当前时刻（epoch 毫秒）。
+		* @returns 当前档位与到下一个切换边界的毫秒数。
+		*/
+		function tierCountdown(nowMs) {
+			const dayMs = beijingMillisOfDay(nowMs);
+			for (const boundary of TIER_BOUNDARY_MINUTES) {
+				const boundaryMs = boundary * 6e4;
+				if (dayMs < boundaryMs) return {
+					tier: tierAt(nowMs),
+					nextSwitchInMs: boundaryMs - dayMs
+				};
+			}
+			return {
+				tier: tierAt(nowMs),
+				nextSwitchInMs: 864e5 - dayMs + TIER_BOUNDARY_MINUTES[0] * 6e4
+			};
+		}
+		/**
+		* 峰/谷切换预告：距下次切换不足 leadMs 时返回即将进入的档位与切换时刻，
+		* 否则 null。导出供测试：纯函数。
+		* @param nowMs - 当前时刻（epoch 毫秒）。
+		* @param leadMs - 提前量（毫秒）。
+		*/
+		function upcomingTierSwitch(nowMs, leadMs) {
+			const { nextSwitchInMs } = tierCountdown(nowMs);
+			if (nextSwitchInMs > leadMs) return null;
+			const atMs = nowMs + nextSwitchInMs;
+			return {
+				entering: tierAt(atMs),
+				atMs
+			};
+		}
+		/**
+		* 切换倒计时短格式：`1h23m` / `45m` / `3m`。导出供测试：纯函数。
+		* @param ms - 剩余毫秒数。
+		*/
+		function formatSwitchCountdown(ms) {
+			const minutes = Math.max(1, Math.ceil(ms / 6e4));
+			const hours = Math.floor(minutes / 60);
+			const rest = minutes % 60;
+			return hours > 0 ? `${hours}h${String(rest).padStart(2, "0")}m` : `${rest}m`;
+		}
+		/**
 		* Built-in catalog of current mainstream models as of 2026-08-16, priced from
 		* each provider's official price page. Domestic providers are OpenAI-API
 		* compatible and publish RMB prices directly; overseas providers publish USD
@@ -755,11 +867,13 @@ window.__ModuleLoader__.load({
 		/** Lookup a model by its stats key; falls back to the generic `other` entry. */
 		function modelOf(key) {
 			const resolved = MODEL_KEY_ALIASES[key] ?? key;
-			const base = MODEL_CATALOG.find((entry) => entry.key === resolved) ?? (() => {
+			const found = MODEL_CATALOG.find((entry) => entry.key === resolved);
+			const extra = liveExtraModels?.find((item) => item.key === resolved);
+			const base = found ?? (extra !== void 0 ? extraEntryOf(extra) : (() => {
 				const fallback = MODEL_CATALOG.at(-1);
 				if (fallback !== void 0) return fallback;
 				throw new Error("MODEL_CATALOG must not be empty");
-			})();
+			})());
 			const live = livePrices?.[resolved];
 			if (live === void 0) return base;
 			return {
@@ -772,6 +886,57 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
+		/** models.dev 补充条目转为目录条目：USD 直价（走汇率换算），无峰谷分档。 */
+		function extraEntryOf(extra) {
+			return {
+				key: extra.key,
+				name: extra.name,
+				provider: extra.provider,
+				colorVar: "dsw-static-neutral-400",
+				price: {
+					currency: "USD",
+					input: extra.price.input,
+					cacheHit: extra.price.cacheHit,
+					output: extra.price.output
+				}
+			};
+		}
+		/**
+		* 费率表渲染的完整目录：内置 + models.dev 补充条目 + 探活模型（无价标记）。
+		* 探活模型去重（按归一化 id）：内置/补充已有的不再重复；无价的保留并标记
+		* `uncatalogued`，费率表据此显示「未收录」。
+		*/
+		function catalogEntries() {
+			const entries = [...MODEL_CATALOG, ...(liveExtraModels ?? []).map(extraEntryOf)];
+			const known = new Set(entries.map((entry) => entry.key.toLowerCase()));
+			for (const model of liveCatalogModels ?? []) {
+				const rawKey = model.id.toLowerCase();
+				if ((() => {
+					const aliasKey = MODEL_KEY_ALIASES[model.id] ?? model.id;
+					return MODEL_CATALOG.find((item) => item.key === aliasKey);
+				})() !== void 0) continue;
+				if (known.has(rawKey)) continue;
+				const extra = (liveExtraModels ?? []).find((item) => item.key === rawKey);
+				let entry;
+				if (extra !== void 0) entry = { ...extraEntryOf(extra) };
+				else entry = {
+					key: MODEL_KEY_ALIASES[model.id] ?? model.id,
+					name: model.name ?? model.id,
+					provider: model.provider,
+					colorVar: "dsw-static-neutral-400",
+					price: {
+						currency: "USD",
+						input: 0,
+						cacheHit: 0,
+						output: 0
+					},
+					uncatalogued: true
+				};
+				known.add(entry.key.toLowerCase());
+				entries.push(entry);
+			}
+			return entries;
+		}
 		/** Resolve a price-table row by its CSS variable name (theme token or fallback color). */
 		function resolveToken(name) {
 			const value = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
@@ -1429,6 +1594,64 @@ window.__ModuleLoader__.load({
 			return flags;
 		}
 		//#endregion
+		//#region src/client/export.ts
+		/** CSV 单元格转义：含逗号 / 引号 / 换行的值加双引号并内层引号双写。 */
+		function csvCell(value) {
+			return /[",\n]/.test(value) ? `"${value.replace(/"/g, "\"\"")}"` : value;
+		}
+		/** 金额保留两位小数字符串（导出对账用，不做千分位）。 */
+		function money(value) {
+			return value.toFixed(2);
+		}
+		/** 按日 CSV：日期,调用,输入,输出,缓存命中,缓存未命中,费用(元)。 */
+		function dayRowsCsv(byDay) {
+			return ["date,calls,input,output,cache_hit,cache_miss,cost_cny", ...Object.keys(byDay).sort().map((date) => {
+				const day = byDay[date];
+				if (day === void 0) return "";
+				return [
+					date,
+					day.calls,
+					day.input,
+					day.output,
+					day.cacheHit,
+					day.cacheMiss,
+					money(day.cost)
+				].join(",");
+			})].join("\n");
+		}
+		/** 项目名取 cwd 末级目录（与统计 Tab 的会话明细同口径）。 */
+		function projectOf(cwd) {
+			if (cwd === void 0) return "";
+			return cwd.split(/[\\/]/).filter(Boolean).pop() ?? cwd;
+		}
+		/** 按会话 CSV：会话 id,标题,项目,调用,费用(元),最后活跃(ISO)。 */
+		function sessionRowsCsv(rows) {
+			return ["session_id,title,project,calls,cost_cny,last_active", ...rows.map((row) => [
+				csvCell(row.id),
+				csvCell(row.title ?? ""),
+				csvCell(projectOf(row.cwd)),
+				row.calls,
+				money(row.cost),
+				row.lastActive > 0 ? new Date(row.lastActive).toISOString() : ""
+			].join(","))].join("\n");
+		}
+		/** 导出文件名：带日期范围（usage-2026-08-01_2026-08-22.csv）；无日期时只带前缀。 */
+		function exportFileName(prefix, ext, dates) {
+			const sorted = [...dates].sort();
+			const first = sorted[0];
+			const last = sorted.at(-1);
+			return `${prefix}${first !== void 0 && last !== void 0 ? `-${first}_${last}` : ""}.${ext}`;
+		}
+		/** 触发浏览器下载（唯一 DOM 副作用；调用方在 click 手势里使用）。 */
+		function downloadText(filename, text, mime) {
+			const url = URL.createObjectURL(new Blob([text], { type: mime }));
+			const anchor = document.createElement("a");
+			anchor.href = url;
+			anchor.download = filename;
+			anchor.click();
+			URL.revokeObjectURL(url);
+		}
+		//#endregion
 		//#region src/client/UsageBilling.tsx
 		/**
 		* UsageBilling: sidebar footer trigger + full billing dashboard modal.
@@ -1475,6 +1698,12 @@ window.__ModuleLoader__.load({
 			if (cwd === void 0) return void 0;
 			return cwd.split(/[\\/]/).filter(Boolean).pop() ?? cwd;
 		}
+		/** 预算提醒档位（百分比）：跨档时桌面通知，每档每天最多一次。 */
+		const BUDGET_ALERT_TIERS = [
+			50,
+			80,
+			100
+		];
 		/** Idle health state before the probe settles. */
 		const IDLE_HEALTH = {
 			checked: false,
@@ -1645,6 +1874,41 @@ window.__ModuleLoader__.load({
 			if (avg <= 0) return 0;
 			return avg * monthLen;
 		}
+		/**
+		* 峰谷时段费用分摊：按每轮的起始时刻（北京时间高峰 9-12 / 14-18）把费用
+		* 归入高峰 / 空闲两档。导出供测试：纯函数。
+		* @param turns - 每轮费用行（需带 startedAt 与 cost）。
+		* @returns 两档费用合计（人民币元）。
+		*/
+		function peakOffpeakCost(turns) {
+			let peak = 0;
+			let offPeak = 0;
+			for (const turn of turns) if (tierAt(turn.startedAt) === "peak") peak += turn.cost;
+			else offPeak += turn.cost;
+			return {
+				peak,
+				offPeak
+			};
+		}
+		/**
+		* 近 7 天费用序列（含今天，缺日补 0）：触发卡 hover 速览的迷你柱数据源。
+		* 导出供测试：纯函数（日期取本地时区）。
+		* @param byDay - 按日费用表。
+		* @returns 7 个 `{ date, cost }`，最旧在前。
+		*/
+		function lastSevenDays(byDay) {
+			const out = [];
+			for (let offset = 6; offset >= 0; offset -= 1) {
+				const day = /* @__PURE__ */ new Date();
+				day.setDate(day.getDate() - offset);
+				const stamp = localDayStamp(day.getTime());
+				out.push({
+					date: stamp,
+					cost: byDay[stamp]?.cost ?? 0
+				});
+			}
+			return out;
+		}
 		/** Resolve one provider's dot state: green when live, red when failed, gray when unknown. */
 		function providerDot(health, provider) {
 			if (!health.checked) return UsageBilling_module_css_default.healthIdle;
@@ -1679,7 +1943,7 @@ window.__ModuleLoader__.load({
 		/** Path to the account-balance endpoint served by this plugin's node half. */
 		const BALANCE_PATH = "/api/billing/balance";
 		/** Path to the subscription-plan quota endpoint served by this plugin's node half. */
-		const SUBSCRIPTIONS_PATH = "/api/billing/subscriptions";
+		const SUBSCRIPTIONS_PATH$1 = "/api/billing/subscriptions";
 		/** 弹窗打开期间统计与定价的自动刷新间隔（毫秒）。 */
 		const STATS_REFRESH_INTERVAL_MS = 3e4;
 		/**
@@ -1746,7 +2010,8 @@ window.__ModuleLoader__.load({
 					...typeof candidate.lowBalanceThreshold === "number" ? { lowBalanceThreshold: candidate.lowBalanceThreshold } : {},
 					...Array.isArray(candidate.bySession) ? { bySession: candidate.bySession } : {},
 					...Array.isArray(candidate.byTurn) ? { byTurn: candidate.byTurn } : {},
-					...Array.isArray(candidate.byWorkspace) ? { byWorkspace: candidate.byWorkspace } : {}
+					...Array.isArray(candidate.byWorkspace) ? { byWorkspace: candidate.byWorkspace } : {},
+					...candidate.byRole !== null && typeof candidate.byRole === "object" ? { byRole: candidate.byRole } : {}
 				};
 			} catch {
 				return null;
@@ -1800,7 +2065,7 @@ window.__ModuleLoader__.load({
 		*/
 		async function fetchSubscriptions() {
 			try {
-				const response = await fetch(SUBSCRIPTIONS_PATH);
+				const response = await fetch(SUBSCRIPTIONS_PATH$1);
 				if (!response.ok) return [];
 				const text = await response.text();
 				const parsed = JSON.parse(text);
@@ -1817,7 +2082,7 @@ window.__ModuleLoader__.load({
 		* @param props - framework props plus `wide` column state.
 		*/
 		function UsageBillingTrigger(props) {
-			const { wide, t, onOpen, monthCost, todayCost } = props;
+			const { wide, t, onOpen, monthCost, todayCost, weekCost, days } = props;
 			const cardIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
@@ -1849,42 +2114,91 @@ window.__ModuleLoader__.load({
 				title: `${t("billing.title")} · ${formatMoney(monthCost)}`,
 				children: cardIcon
 			});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				type: "button",
-				className: UsageBilling_module_css_default.trigger,
-				"data-testid": "billing-trigger",
-				onClick: onOpen,
-				title: `${t("billing.title")} · 本月 ${formatMoney(monthCost)}`,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: UsageBilling_module_css_default.triggerIcon,
-						"data-testid": "billing-trigger-icon",
-						children: cardIcon
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: UsageBilling_module_css_default.triggerToday,
-						"data-testid": "billing-trigger-today",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: UsageBilling_module_css_default.triggerMeta,
-							children: "今日"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: UsageBilling_module_css_default.triggerAmount,
-							children: formatMoney(todayCost)
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.triggerDivider }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: UsageBilling_module_css_default.triggerMonth,
-						"data-testid": "billing-trigger-month",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: UsageBilling_module_css_default.triggerMeta,
-							children: "当月"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: UsageBilling_module_css_default.triggerAmountSub,
-							children: formatMoney(monthCost)
-						})]
-					})
-				]
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: UsageBilling_module_css_default.triggerWrap,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: UsageBilling_module_css_default.trigger,
+					"data-testid": "billing-trigger",
+					onClick: onOpen,
+					title: `${t("billing.title")} · 本月 ${formatMoney(monthCost)}`,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.triggerIcon,
+							"data-testid": "billing-trigger-icon",
+							children: cardIcon
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.triggerToday,
+							"data-testid": "billing-trigger-today",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerMeta,
+								children: "今日"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerAmount,
+								children: formatMoney(todayCost)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageBilling_module_css_default.triggerDivider }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.triggerMonth,
+							"data-testid": "billing-trigger-month",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerMeta,
+								children: "当月"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerAmountSub,
+								children: formatMoney(monthCost)
+							})]
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: UsageBilling_module_css_default.triggerPop,
+					"data-testid": "billing-trigger-pop",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.triggerPopRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerPopLabel,
+								children: t("billing.todayCost")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerPopValue,
+								children: formatMoney(todayCost)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.triggerPopRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerPopLabel,
+								children: t("billing.weekCost")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerPopValue,
+								children: formatMoney(weekCost)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.triggerPopRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerPopLabel,
+								children: t("billing.monthCost")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: UsageBilling_module_css_default.triggerPopValue,
+								children: formatMoney(monthCost)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.triggerPopBars,
+							children: (() => {
+								const max = Math.max(...days.map((d) => d.cost), 0);
+								return days.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: UsageBilling_module_css_default.triggerPopBar,
+									style: { height: `${max > 0 ? 4 + d.cost / max * 18 : 4}px` }
+								}, d.date));
+							})()
+						})
+					]
+				})]
 			});
 		}
 		/**
@@ -1898,6 +2212,33 @@ window.__ModuleLoader__.load({
 			const rateInfo = getRateInfo();
 			const money = (cny) => formatMoney(currency === "usd" ? cnyToUsd(cny) : cny, currency);
 			const roundFlags = (0, react.useMemo)(() => flagAnomalies([...turns].reverse()), [turns]);
+			const peakShare = (0, react.useMemo)(() => peakOffpeakCost(turns), [turns]);
+			const roleRows = (0, react.useMemo)(() => {
+				const role = stats.byRole;
+				if (role === void 0) return [];
+				const total = role.user + role.assistant + role.tool;
+				if (total <= 0) return [];
+				return [
+					{
+						label: t("billing.roleUser"),
+						value: role.user,
+						seg: UsageBilling_module_css_default.shareSegUser
+					},
+					{
+						label: t("billing.roleAssistant"),
+						value: role.assistant,
+						seg: UsageBilling_module_css_default.shareSegAssistant
+					},
+					{
+						label: t("billing.roleTool"),
+						value: role.tool,
+						seg: UsageBilling_module_css_default.shareSegTool
+					}
+				].map((row) => ({
+					...row,
+					pct: row.value / total * 100
+				}));
+			}, [stats.byRole, t]);
 			const dailyBurn = dailyBurnRate(byDay, localDayStamp());
 			const balanceFor = (provider) => balances.find((balance) => normalizeProvider(balance.provider) === normalizeProvider(provider));
 			const renderBalance = (balance) => {
@@ -2014,13 +2355,25 @@ window.__ModuleLoader__.load({
 					if (list === void 0) modelsByVendor.set(row.provider, [row]);
 					else list.push(row);
 				}
-				return [...new Set([...modelsByVendor.keys(), ...subscriptionsByVendor.keys()])].map((name) => ({
+				const groups = [...new Set([...modelsByVendor.keys(), ...subscriptionsByVendor.keys()])].map((name) => ({
 					name,
 					models: modelsByVendor.get(name) ?? [],
 					subscriptions: subscriptionsByVendor.get(name) ?? [],
 					balance: balanceFor(name),
 					dot: providerDot(health, name)
-				})).sort((a, b) => {
+				}));
+				const claimed = new Set(groups.map((group) => normalizeProvider(group.name)));
+				for (const balance of balances) {
+					if (claimed.has(normalizeProvider(balance.provider))) continue;
+					if (balance.error === void 0 || balance.provider.startsWith("custom:")) groups.push({
+						name: balance.displayName,
+						models: [],
+						subscriptions: [],
+						balance,
+						dot: providerDot(health, balance.displayName)
+					});
+				}
+				return groups.sort((a, b) => {
 					const costOf = (group) => group.models.reduce((sum, m) => sum + (m.actual ?? m.estimated), 0);
 					const diff = costOf(b) - costOf(a);
 					if (diff !== 0) return diff;
@@ -2279,7 +2632,7 @@ window.__ModuleLoader__.load({
 													className: UsageBilling_module_css_default.budgetTrack,
 													"data-testid": "billing-budget-track",
 													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-														className: clsx(UsageBilling_module_css_default.budgetFill, pct >= 100 && UsageBilling_module_css_default.budgetFillOver),
+														className: clsx(UsageBilling_module_css_default.budgetFill, pct >= 100 && UsageBilling_module_css_default.budgetFillOver, pct >= 80 && pct < 100 && UsageBilling_module_css_default.budgetFillWarn),
 														style: { width: `${Math.min(pct, 100)}%` }
 													})
 												});
@@ -2387,79 +2740,156 @@ window.__ModuleLoader__.load({
 												className: UsageBilling_module_css_default.panelHead,
 												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 													className: UsageBilling_module_css_default.panelTitle,
-													children: t("billing.heatmap")
-												})
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageHeatmap, {
-												days: heatmapDays,
+													children: t("billing.heatmap")
+												})
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageHeatmap, {
+												days: heatmapDays,
+												currency,
+												t
+											})]
+										})
+									]
+								}),
+								tab === "trends" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: UsageBilling_module_css_default.tabPanel,
+									"data-testid": "billing-tab-panel-trends",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+											className: clsx(UsageBilling_module_css_default.panel, UsageBilling_module_css_default.trendPanel),
+											"data-testid": "billing-panel-trend",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: UsageBilling_module_css_default.panelHead,
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+														className: UsageBilling_module_css_default.panelTitle,
+														children: t("billing.trend")
+													}),
+													renderSlot("billing.dashboard.decor", { position: "trend" }),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: UsageBilling_module_css_default.rangeToggle,
+														role: "group",
+														"aria-label": t("billing.trend"),
+														children: [7, 30].map((days) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															className: clsx(UsageBilling_module_css_default.rangeButton, trendDays === days && UsageBilling_module_css_default.rangeButtonActive),
+															"aria-pressed": trendDays === days,
+															"data-testid": `billing-trend-${days}d`,
+															onClick: () => {
+																setTrendDays(days);
+															},
+															children: days === 7 ? t("billing.trend7d") : t("billing.trend30d")
+														}, days))
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: UsageBilling_module_css_default.panelHint,
+														children: latestDate
+													})
+												]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendChart, {
+												data: trend,
+												models: chartModels,
+												currency
+											})]
+										}),
+										turns.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+											className: UsageBilling_module_css_default.panel,
+											"data-testid": "billing-panel-rounds",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: UsageBilling_module_css_default.panelHead,
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+													className: UsageBilling_module_css_default.panelTitle,
+													children: t("billing.rounds")
+												}), roundFlags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+													className: UsageBilling_module_css_default.roundsFlagBadge,
+													"data-testid": "billing-rounds-flag-count",
+													children: [
+														roundFlags.length,
+														" ",
+														t("billing.anomaly")
+													]
+												})]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundCostChart, {
+												rounds: turns,
+												flags: roundFlags,
 												currency,
 												t
 											})]
-										})
-									]
-								}),
-								tab === "trends" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: UsageBilling_module_css_default.tabPanel,
-									"data-testid": "billing-tab-panel-trends",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-										className: clsx(UsageBilling_module_css_default.panel, UsageBilling_module_css_default.trendPanel),
-										"data-testid": "billing-panel-trend",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: UsageBilling_module_css_default.panelHead,
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-													className: UsageBilling_module_css_default.panelTitle,
-													children: t("billing.trend")
-												}),
-												renderSlot("billing.dashboard.decor", { position: "trend" }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: UsageBilling_module_css_default.rangeToggle,
-													role: "group",
-													"aria-label": t("billing.trend"),
-													children: [7, 30].map((days) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														type: "button",
-														className: clsx(UsageBilling_module_css_default.rangeButton, trendDays === days && UsageBilling_module_css_default.rangeButtonActive),
-														"aria-pressed": trendDays === days,
-														"data-testid": `billing-trend-${days}d`,
-														onClick: () => {
-															setTrendDays(days);
-														},
-														children: days === 7 ? t("billing.trend7d") : t("billing.trend30d")
-													}, days))
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: UsageBilling_module_css_default.panelHint,
-													children: latestDate
-												})
-											]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendChart, {
-											data: trend,
-											models: chartModels,
-											currency
-										})]
-									}), turns.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-										className: UsageBilling_module_css_default.panel,
-										"data-testid": "billing-panel-rounds",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: UsageBilling_module_css_default.panelHead,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-												className: UsageBilling_module_css_default.panelTitle,
-												children: t("billing.rounds")
-											}), roundFlags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-												className: UsageBilling_module_css_default.roundsFlagBadge,
-												"data-testid": "billing-rounds-flag-count",
+										}),
+										turns.length > 0 && (() => {
+											const shareTotal = peakShare.peak + peakShare.offPeak;
+											if (shareTotal <= 0) return null;
+											const peakPct = peakShare.peak / shareTotal * 100;
+											return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+												className: UsageBilling_module_css_default.panel,
+												"data-testid": "billing-panel-share",
 												children: [
-													roundFlags.length,
-													" ",
-													t("billing.anomaly")
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: UsageBilling_module_css_default.panelHead,
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+															className: UsageBilling_module_css_default.panelTitle,
+															children: t("billing.peakShare")
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: UsageBilling_module_css_default.panelHint,
+															children: t("billing.peakShareHint").replace("{count}", String(turns.length))
+														})]
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: UsageBilling_module_css_default.shareTrack,
+														"data-testid": "billing-share-track",
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+															className: clsx(UsageBilling_module_css_default.shareSeg, UsageBilling_module_css_default.shareSegPeak),
+															style: { width: `${peakPct}%` }
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+															className: clsx(UsageBilling_module_css_default.shareSeg, UsageBilling_module_css_default.shareSegOff),
+															style: { width: `${100 - peakPct}%` }
+														})]
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: UsageBilling_module_css_default.shareLegend,
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: UsageBilling_module_css_default.shareItem,
+															children: [
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.shareDot,
+																	style: { background: "var(--dsw-static-blue-500)" }
+																}),
+																t("billing.peak"),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																	className: UsageBilling_module_css_default.shareValue,
+																	"data-testid": "billing-share-peak",
+																	children: [
+																		money(peakShare.peak),
+																		" · ",
+																		peakPct.toFixed(1),
+																		"%"
+																	]
+																})
+															]
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: UsageBilling_module_css_default.shareItem,
+															children: [
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.shareDot,
+																	style: { background: "color-mix(in srgb, var(--dsw-static-blue-500) 30%, var(--dsw-alias-bg-module-platform))" }
+																}),
+																t("billing.offPeak"),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																	className: UsageBilling_module_css_default.shareValue,
+																	"data-testid": "billing-share-offpeak",
+																	children: [
+																		money(peakShare.offPeak),
+																		" · ",
+																		(100 - peakPct).toFixed(1),
+																		"%"
+																	]
+																})
+															]
+														})]
+													})
 												]
-											})]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundCostChart, {
-											rounds: turns,
-											flags: roundFlags,
-											currency,
-											t
-										})]
-									})]
+											});
+										})()
+									]
 								}),
 								tab === "providers" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: UsageBilling_module_css_default.tabPanel,
@@ -2624,31 +3054,35 @@ window.__ModuleLoader__.load({
 																		className: UsageBilling_module_css_default.subscriptionStatus,
 																		children: t("billing.subscriptionNoApi")
 																	}),
-																	quota.windows.map((window) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-																		className: UsageBilling_module_css_default.subscriptionWindow,
-																		children: [
-																			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																				className: UsageBilling_module_css_default.subscriptionWindowLabel,
-																				children: subscriptionWindowLabel(window.kind, t)
-																			}),
-																			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																				className: UsageBilling_module_css_default.subscriptionTrack,
-																				"aria-hidden": "true",
-																				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																					className: UsageBilling_module_css_default.subscriptionFill,
-																					style: { width: `${Math.min(100, Math.max(0, window.remainingPercent))}%` }
+																	quota.windows.map((window) => (() => {
+																		const used = Math.min(100, Math.max(0, window.usedPercent));
+																		const exhausted = Math.min(100, Math.max(0, window.remainingPercent)) <= 0;
+																		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																			className: UsageBilling_module_css_default.subscriptionWindow,
+																			children: [
+																				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																					className: UsageBilling_module_css_default.subscriptionWindowLabel,
+																					children: subscriptionWindowLabel(window.kind, t)
+																				}),
+																				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																					className: UsageBilling_module_css_default.subscriptionTrack,
+																					"aria-hidden": "true",
+																					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																						className: clsx(UsageBilling_module_css_default.subscriptionFill, used >= 100 && UsageBilling_module_css_default.subscriptionFillOver, used >= 80 && used < 100 && UsageBilling_module_css_default.subscriptionFillWarn),
+																						style: { width: `${used}%` }
+																					})
+																				}),
+																				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																					className: clsx(UsageBilling_module_css_default.subscriptionPct, exhausted && UsageBilling_module_css_default.subscriptionExhausted),
+																					children: exhausted ? t("billing.subscriptionExhausted") : t("billing.subscriptionRemaining").replace("{pct}", String(window.remainingPercent))
+																				}),
+																				window.resetsAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																					className: UsageBilling_module_css_default.subscriptionReset,
+																					children: t("billing.subscriptionReset").replace("{date}", window.resetsAt.slice(0, 10))
 																				})
-																			}),
-																			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																				className: UsageBilling_module_css_default.subscriptionPct,
-																				children: t("billing.subscriptionRemaining").replace("{pct}", String(window.remainingPercent))
-																			}),
-																			window.resetsAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																				className: UsageBilling_module_css_default.subscriptionReset,
-																				children: t("billing.subscriptionReset").replace("{date}", window.resetsAt.slice(0, 10))
-																			})
-																		]
-																	}, window.kind))
+																			]
+																		}, window.kind);
+																	})())
 																]
 															}, quota.provider);
 														})
@@ -2661,130 +3095,215 @@ window.__ModuleLoader__.load({
 								tab === "details" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: UsageBilling_module_css_default.tabPanel,
 									"data-testid": "billing-tab-panel-details",
-									children: [stats.byWorkspace !== void 0 && stats.byWorkspace.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-										className: UsageBilling_module_css_default.panel,
-										"data-testid": "billing-panel-workspaces",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: UsageBilling_module_css_default.panelHead,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-												className: UsageBilling_module_css_default.panelTitle,
-												children: t("billing.workspaces")
-											})
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: UsageBilling_module_css_default.tableScroll,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-												className: UsageBilling_module_css_default.modelTable,
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.calls")
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.inputTokens")
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.outputTokens")
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.actual")
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.lastActive")
-													})
-												] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: stats.byWorkspace.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: UsageBilling_module_css_default.modelName,
-														children: row.name
-													}) }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: row.calls.toLocaleString()
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: formatTokens(row.input)
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: formatTokens(row.output)
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: money(row.cost)
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)}` : "—"
-													})
-												] }, row.name)) })]
-											})
-										})]
-									}), stats.bySession !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-										className: UsageBilling_module_css_default.panel,
-										"data-testid": "billing-panel-sessions",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: UsageBilling_module_css_default.panelHead,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-												className: UsageBilling_module_css_default.panelTitle,
-												children: t("billing.sessions")
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: UsageBilling_module_css_default.panelHint,
-												children: stats.bySession.length > SESSION_DISPLAY_LIMIT ? t("billing.sessionOverflow").replace("{limit}", String(SESSION_DISPLAY_LIMIT)).replace("{total}", String(stats.bySession.length)) : `${stats.bySession.length}`
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: UsageBilling_module_css_default.exportBar,
+											"data-testid": "billing-export-bar",
+											role: "group",
+											"aria-label": t("billing.export"),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: UsageBilling_module_css_default.exportLabel,
+													children: t("billing.export")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: UsageBilling_module_css_default.exportButton,
+													"data-testid": "billing-export-day",
+													onClick: () => {
+														downloadText(exportFileName("usage-daily", "csv", Object.keys(byDay)), dayRowsCsv(byDay), "text/csv");
+													},
+													children: t("billing.exportCsvDay")
+												}),
+												stats.bySession !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: UsageBilling_module_css_default.exportButton,
+													"data-testid": "billing-export-sessions",
+													onClick: () => {
+														downloadText(exportFileName("usage-sessions", "csv", Object.keys(byDay)), sessionRowsCsv(stats.bySession ?? []), "text/csv");
+													},
+													children: t("billing.exportCsvSession")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: UsageBilling_module_css_default.exportButton,
+													"data-testid": "billing-export-json",
+													onClick: () => {
+														downloadText(exportFileName("usage-stats", "json", Object.keys(byDay)), JSON.stringify(stats, null, 2), "application/json");
+													},
+													children: t("billing.exportJson")
+												})
+											]
+										}),
+										roleRows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+											className: UsageBilling_module_css_default.panel,
+											"data-testid": "billing-panel-roles",
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: UsageBilling_module_css_default.panelHead,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+														className: UsageBilling_module_css_default.panelTitle,
+														children: t("billing.roleCost")
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: UsageBilling_module_css_default.panelHint,
+														children: t("billing.roleHint")
+													})]
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: UsageBilling_module_css_default.shareTrack,
+													"data-testid": "billing-role-track",
+													children: roleRows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+														className: clsx(UsageBilling_module_css_default.shareSeg, row.seg),
+														style: { width: `${row.pct}%` }
+													}, row.label))
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: UsageBilling_module_css_default.shareLegend,
+													children: roleRows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														className: UsageBilling_module_css_default.shareItem,
+														children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: clsx(UsageBilling_module_css_default.shareDot, row.seg) }),
+															row.label,
+															/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: UsageBilling_module_css_default.shareValue,
+																children: [
+																	money(row.value),
+																	" · ",
+																	row.pct.toFixed(1),
+																	"%"
+																]
+															})
+														]
+													}, row.label))
+												})
+											]
+										}),
+										stats.byWorkspace !== void 0 && stats.byWorkspace.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+											className: UsageBilling_module_css_default.panel,
+											"data-testid": "billing-panel-workspaces",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: UsageBilling_module_css_default.panelHead,
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+													className: UsageBilling_module_css_default.panelTitle,
+													children: t("billing.workspaces")
+												})
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: UsageBilling_module_css_default.tableScroll,
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+													className: UsageBilling_module_css_default.modelTable,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.calls")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.inputTokens")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.outputTokens")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.actual")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.lastActive")
+														})
+													] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: stats.byWorkspace.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: UsageBilling_module_css_default.modelName,
+															children: row.name
+														}) }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: row.calls.toLocaleString()
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: formatTokens(row.input)
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: formatTokens(row.output)
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: money(row.cost)
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)}` : "—"
+														})
+													] }, row.name)) })]
+												})
 											})]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: UsageBilling_module_css_default.tableScroll,
-											"data-testid": "billing-sessions-table",
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-												className: UsageBilling_module_css_default.modelTable,
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.sessions") }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.calls")
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.actual")
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-														className: UsageBilling_module_css_default.numCol,
-														children: t("billing.lastActive")
-													})
-												] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [stats.bySession.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-													colSpan: 5,
-													className: UsageBilling_module_css_default.emptyRow,
-													children: t("billing.noData")
-												}) }), stats.bySession.slice(0, SESSION_DISPLAY_LIMIT).map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: UsageBilling_module_css_default.modelName,
-														children: row.title ?? row.id.slice(0, 8)
-													}) }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: UsageBilling_module_css_default.modelProvider,
-														children: projectName(row.cwd) ?? "—"
-													}) }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: row.calls.toLocaleString()
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: money(row.cost)
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)} ${formatClock(row.lastActive)}` : "—"
-													})
-												] }, row.id))] })]
-											})
-										})]
-									})]
+										}),
+										stats.bySession !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+											className: UsageBilling_module_css_default.panel,
+											"data-testid": "billing-panel-sessions",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: UsageBilling_module_css_default.panelHead,
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+													className: UsageBilling_module_css_default.panelTitle,
+													children: t("billing.sessions")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: UsageBilling_module_css_default.panelHint,
+													children: stats.bySession.length > SESSION_DISPLAY_LIMIT ? t("billing.sessionOverflow").replace("{limit}", String(SESSION_DISPLAY_LIMIT)).replace("{total}", String(stats.bySession.length)) : `${stats.bySession.length}`
+												})]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: UsageBilling_module_css_default.tableScroll,
+												"data-testid": "billing-sessions-table",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+													className: UsageBilling_module_css_default.modelTable,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.sessions") }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.project") }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.calls")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.actual")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+															className: UsageBilling_module_css_default.numCol,
+															children: t("billing.lastActive")
+														})
+													] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [stats.bySession.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+														colSpan: 5,
+														className: UsageBilling_module_css_default.emptyRow,
+														children: t("billing.noData")
+													}) }), stats.bySession.slice(0, SESSION_DISPLAY_LIMIT).map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: UsageBilling_module_css_default.modelName,
+															children: row.title ?? row.id.slice(0, 8)
+														}) }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: UsageBilling_module_css_default.modelProvider,
+															children: projectName(row.cwd) ?? "—"
+														}) }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: row.calls.toLocaleString()
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: money(row.cost)
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: row.lastActive > 0 ? `${localDayStamp(row.lastActive)} ${formatClock(row.lastActive)}` : "—"
+														})
+													] }, row.id))] })]
+												})
+											})]
+										})
+									]
 								}),
 								tab === "pricing" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: UsageBilling_module_css_default.tabPanel,
@@ -2828,65 +3347,81 @@ window.__ModuleLoader__.load({
 														children: t("billing.output")
 													}),
 													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("billing.band") })
-												] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: MODEL_CATALOG.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-														className: UsageBilling_module_css_default.modelCell,
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															className: UsageBilling_module_css_default.modelDot,
-															style: { background: resolveToken(entry.colorVar) }
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															className: UsageBilling_module_css_default.modelName,
-															children: entry.name
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															className: UsageBilling_module_css_default.modelProvider,
-															children: entry.provider
-														})] })]
-													}) }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-															className: UsageBilling_module_css_default.bandPrice,
-															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.input, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																className: UsageBilling_module_css_default.bandPriceOff,
-																children: formatUnitPrice(entry.price.offPeak.input, entry.price.currency)
-															})]
-														}) : formatUnitPrice(entry.price.input, entry.price.currency)
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-															className: UsageBilling_module_css_default.bandPrice,
-															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.cacheHit, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																className: UsageBilling_module_css_default.bandPriceOff,
-																children: formatUnitPrice(entry.price.offPeak.cacheHit, entry.price.currency)
-															})]
-														}) : formatUnitPrice(entry.price.cacheHit, entry.price.currency)
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-														className: UsageBilling_module_css_default.numCol,
-														children: entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-															className: UsageBilling_module_css_default.bandPrice,
-															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.output, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																className: UsageBilling_module_css_default.bandPriceOff,
-																children: formatUnitPrice(entry.price.offPeak.output, entry.price.currency)
+												] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: catalogEntries().map((entry) => {
+													const hasPrice = entry.price.input > 0 || entry.price.output > 0;
+													return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: UsageBilling_module_css_default.modelCell,
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: UsageBilling_module_css_default.modelDot,
+																style: { background: resolveToken(entry.colorVar) }
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: UsageBilling_module_css_default.modelName,
+																children: [entry.name, entry.uncatalogued && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.uncataloguedTag,
+																	"data-testid": "billing-price-uncatalogued",
+																	children: t("billing.uncatalogued")
+																})]
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: UsageBilling_module_css_default.modelProvider,
+																children: entry.provider
+															})] })]
+														}) }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: hasPrice ? entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: UsageBilling_module_css_default.bandPrice,
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.input, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.bandPriceOff,
+																	children: formatUnitPrice(entry.price.offPeak.input, entry.price.currency)
+																})]
+															}) : formatUnitPrice(entry.price.input, entry.price.currency) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: UsageBilling_module_css_default.na,
+																children: "—"
+															})
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: hasPrice ? entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: UsageBilling_module_css_default.bandPrice,
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.cacheHit, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.bandPriceOff,
+																	children: formatUnitPrice(entry.price.offPeak.cacheHit, entry.price.currency)
+																})]
+															}) : formatUnitPrice(entry.price.cacheHit, entry.price.currency) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: UsageBilling_module_css_default.na,
+																children: "—"
+															})
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															className: UsageBilling_module_css_default.numCol,
+															children: hasPrice ? entry.price.offPeak !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: UsageBilling_module_css_default.bandPrice,
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatUnitPrice(entry.price.output, entry.price.currency) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: UsageBilling_module_css_default.bandPriceOff,
+																	children: formatUnitPrice(entry.price.offPeak.output, entry.price.currency)
+																})]
+															}) : formatUnitPrice(entry.price.output, entry.price.currency) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: UsageBilling_module_css_default.na,
+																children: "—"
+															})
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: entry.price.offPeak !== void 0 && entry.peakHours !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: UsageBilling_module_css_default.bandTag,
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+																t("billing.peak"),
+																" ",
+																entry.peakHours
+															] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: UsageBilling_module_css_default.bandTagOff,
+																children: [t("billing.offPeak"), " 50%"]
 															})]
-														}) : formatUnitPrice(entry.price.output, entry.price.currency)
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: entry.price.offPeak !== void 0 && entry.peakHours !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-														className: UsageBilling_module_css_default.bandTag,
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-															t("billing.peak"),
-															" ",
-															entry.peakHours
-														] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-															className: UsageBilling_module_css_default.bandTagOff,
-															children: [t("billing.offPeak"), " 50%"]
-														})]
-													}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: UsageBilling_module_css_default.flatTag,
-														children: t("billing.flat")
-													}) })
-												] }, entry.key)) })]
+														}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: UsageBilling_module_css_default.flatTag,
+															children: t("billing.flat")
+														}) })
+													] }, entry.key);
+												}) })]
 											})
 										})]
 									})
@@ -2945,7 +3480,9 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				let mounted = true;
 				checkModels().then((result) => {
-					if (mounted) setHealth(result);
+					if (!mounted) return;
+					setHealth(result);
+					applyLiveCatalogModels(result.catalog ?? []);
 				});
 				return () => {
 					mounted = false;
@@ -2954,9 +3491,12 @@ window.__ModuleLoader__.load({
 			const today = localDayStamp();
 			const monthCost = Object.entries(stats.byDay).filter(([date]) => date.startsWith(today.slice(0, 7))).reduce((sum, [, day]) => sum + day.cost, 0);
 			const todayCost = stats.byDay[today]?.cost ?? 0;
+			const weekCost = lastSevenDays(stats.byDay).reduce((sum, d) => sum + d.cost, 0);
+			const last7 = (0, react.useMemo)(() => lastSevenDays(stats.byDay), [stats.byDay]);
 			const budgetEnabled = useStore((s) => s.enabled);
 			const budgetAmount = useStore((s) => s.amount);
-			const budgetAlertedDay = useStore((s) => s.lastAlertDay);
+			const tierAlertDays = useStore((s) => s.tierAlertDays);
+			const lastTierSwitchAt = useStore((s) => s.lastTierSwitchAt);
 			const effectiveBudget = budgetAmount > 0 ? budgetAmount : stats.budget ?? 0;
 			const toggleBudget = (0, react.useCallback)(() => {
 				const next = !budgetEnabled;
@@ -2966,12 +3506,13 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				if (!budgetEnabled || effectiveBudget <= 0) return;
 				const pct = monthCost / effectiveBudget * 100;
-				if (pct < 100) return;
 				const day = localDayStamp();
-				if (budgetAlertedDay === day) return;
-				actions.markAlerted(day);
+				const crossed = BUDGET_ALERT_TIERS.filter((tier) => pct >= tier && tierAlertDays?.[String(tier)] !== day);
+				if (crossed.length === 0) return;
+				const top = crossed[crossed.length - 1] ?? 100;
+				actions.markTierAlerted(crossed, day);
 				if (typeof Notification === "undefined" || Notification.permission !== "granted") return;
-				const body = t("billing.budgetOverBody").replace("{cost}", formatMoney(monthCost)).replace("{budget}", formatMoney(effectiveBudget)).replace("{pct}", pct.toFixed(0));
+				const body = t("billing.budgetTierBody").replace("{cost}", formatMoney(monthCost)).replace("{budget}", formatMoney(effectiveBudget)).replace("{pct}", String(top));
 				try {
 					new Notification(t("billing.budget"), { body });
 				} catch {}
@@ -2979,7 +3520,25 @@ window.__ModuleLoader__.load({
 				budgetEnabled,
 				effectiveBudget,
 				monthCost,
-				budgetAlertedDay,
+				tierAlertDays,
+				actions,
+				t
+			]);
+			(0, react.useEffect)(() => {
+				const leadMs = 2 * 6e4;
+				const now = Date.now();
+				const upcoming = upcomingTierSwitch(now, leadMs);
+				if (upcoming === null) return;
+				if (upcoming.atMs === lastTierSwitchAt) return;
+				actions.markTierSwitchAlerted(upcoming.atMs);
+				if (typeof Notification === "undefined" || Notification.permission !== "granted") return;
+				const minutes = Math.max(1, Math.round((upcoming.atMs - now) / 6e4));
+				const body = upcoming.entering === "peak" ? t("billing.tierAlertEnterPeak").replace("{minutes}", String(minutes)) : t("billing.tierAlertEnterOff").replace("{minutes}", String(minutes));
+				try {
+					new Notification(t("billing.budget"), { body });
+				} catch {}
+			}, [
+				lastTierSwitchAt,
 				actions,
 				t
 			]);
@@ -3038,7 +3597,9 @@ window.__ModuleLoader__.load({
 				...props,
 				onOpen: openDashboard,
 				monthCost,
-				todayCost
+				todayCost,
+				weekCost,
+				days: last7
 			}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BillingDashboard, {
 				stats,
 				t,
@@ -3069,6 +3630,11 @@ window.__ModuleLoader__.load({
 		* the current session id off the framework snapshot (`useSession` parent of
 		* `sessionId`) and matches `bySession` (session total) and `byTurn` (latest
 		* turn cost). Rendering is a pure function of the snapshot, never a side effect.
+		*
+		* The bar also carries two ambient signals: the current peak/off-peak pricing
+		* tier with a switch countdown (DeepSeek time-of-day pricing), and quota chips
+		* for subscription plans running low (≤20% remaining), so cost pressure is
+		* visible without opening the dashboard.
 		*/
 		/**
 		* 当前会话累计费用：bySession 里会话 id 匹配的那行；缺省为 0。
@@ -3102,8 +3668,31 @@ window.__ModuleLoader__.load({
 			}
 			return latest;
 		}
+		/**
+		* 低额度预警 chips：查询成功（ok）且任一窗口剩余 ≤ threshold 的套餐，
+		* 按剩余升序、最多 3 枚。导出供测试：纯函数。
+		* @param quotas - 订阅额度行切片。
+		* @param threshold - 剩余百分比阈值（默认 20%）。
+		*/
+		function lowQuotaChips(quotas, threshold = 20) {
+			const chips = [];
+			for (const quota of quotas) {
+				if (quota.status !== "ok") continue;
+				for (const win of quota.windows) {
+					if (win.remainingPercent > threshold) continue;
+					chips.push({
+						name: quota.displayName,
+						kind: win.kind,
+						pct: win.remainingPercent
+					});
+				}
+			}
+			return chips.sort((a, b) => a.pct - b.pct).slice(0, 3);
+		}
 		/** Endpoint the node half serves (same constant the dashboard uses). */
 		const USAGE_STATS_PATH = "/api/billing/usage-stats";
+		/** 订阅额度端点（额度预警 chips 的数据源）。 */
+		const SUBSCRIPTIONS_PATH = "/api/billing/subscriptions";
 		/** Refresh cadence (ms): matching the dashboard so the bar stays current. */
 		const REFRESH_INTERVAL_MS = 3e4;
 		/** Load the thin stats slice; null when the endpoint does not answer valid JSON. */
@@ -3123,6 +3712,28 @@ window.__ModuleLoader__.load({
 				return null;
 			}
 		}
+		/** Load subscription quota slices; empty list on any failure. */
+		async function loadQuotas() {
+			try {
+				const response = await fetch(SUBSCRIPTIONS_PATH);
+				if (!response.ok) return [];
+				const parsed = JSON.parse(await response.text());
+				if (parsed === null || typeof parsed !== "object" || !("quotas" in parsed)) return [];
+				const quotas = parsed.quotas;
+				return Array.isArray(quotas) ? quotas : [];
+			} catch {
+				return [];
+			}
+		}
+		/** 额度窗口类型 → 文案 key（本次 / 本周 / 本月 / 计费周期）。 */
+		function windowLabelKey(kind) {
+			switch (kind) {
+				case "session": return "billing.subscriptionSession";
+				case "weekly": return "billing.subscriptionWeekly";
+				case "monthly": return "billing.subscriptionMonthly";
+				default: return "billing.subscriptionBilling";
+			}
+		}
 		/**
 		* Render the live cost ticker for the current session.
 		* @param props - framework session snapshot hook and locale.
@@ -3130,12 +3741,18 @@ window.__ModuleLoader__.load({
 		function LiveCostBar({ useSession, t }) {
 			const sessionId = useSession((s) => s.sessionId);
 			const [stats, setStats] = (0, react.useState)(null);
+			const [quotas, setQuotas] = (0, react.useState)([]);
+			const [nowMs, setNowMs] = (0, react.useState)(() => Date.now());
 			(0, react.useEffect)(() => {
 				let cancelled = false;
 				const load = () => {
 					loadLiveStats().then((data) => {
 						if (!cancelled && data !== null) setStats(data);
 					});
+					loadQuotas().then((list) => {
+						if (!cancelled) setQuotas(list);
+					});
+					if (!cancelled) setNowMs(Date.now());
 				};
 				load();
 				const timer = setInterval(load, REFRESH_INTERVAL_MS);
@@ -3146,35 +3763,72 @@ window.__ModuleLoader__.load({
 			}, [sessionId]);
 			const sessionCost = (0, react.useMemo)(() => sessionCostOf(stats, sessionId), [stats, sessionId]);
 			const turnCost = (0, react.useMemo)(() => turnCostOf(stats, sessionId), [stats, sessionId]);
+			const tier = tierCountdown(nowMs);
+			const chips = (0, react.useMemo)(() => lowQuotaChips(quotas), [quotas]);
 			const money = (cny) => formatMoney(cny, "cny");
-			if (sessionId === void 0 || sessionCost <= 0 && turnCost <= 0) return null;
+			if (sessionId === void 0) return null;
+			const hasCost = sessionCost > 0 || turnCost > 0;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: UsageBilling_module_css_default.liveCostBar,
 				"data-testid": "billing-live-cost-bar",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: UsageBilling_module_css_default.liveCostItem,
-						"data-testid": "billing-live-turn",
+						className: tier.tier === "peak" ? UsageBilling_module_css_default.liveTierPeak : UsageBilling_module_css_default.liveTierOff,
+						"data-testid": "billing-live-tier",
 						children: [
-							t("billing.liveTurn"),
+							tier.tier === "peak" ? t("billing.tierPeak") : t("billing.tierOff"),
+							" · ",
+							formatSwitchCountdown(tier.nextSwitchInMs),
 							" ",
-							money(turnCost)
+							tier.tier === "peak" ? t("billing.tierToOff") : t("billing.tierToPeak")
 						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					hasCost && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.liveCostSep,
+							"aria-hidden": "true",
+							children: "·"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.liveCostItem,
+							"data-testid": "billing-live-turn",
+							children: [
+								t("billing.liveTurn"),
+								" ",
+								money(turnCost)
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: UsageBilling_module_css_default.liveCostSep,
+							"aria-hidden": "true",
+							children: "·"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageBilling_module_css_default.liveCostItem,
+							"data-testid": "billing-live-session",
+							children: [
+								t("billing.liveSession"),
+								" ",
+								money(sessionCost)
+							]
+						})
+					] }),
+					chips.map((chip) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: UsageBilling_module_css_default.liveCostSep,
 						"aria-hidden": "true",
 						children: "·"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: UsageBilling_module_css_default.liveCostItem,
-						"data-testid": "billing-live-session",
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: chip.pct <= 10 ? UsageBilling_module_css_default.liveQuotaCrit : UsageBilling_module_css_default.liveQuotaWarn,
+						"data-testid": "billing-live-quota",
 						children: [
-							t("billing.liveSession"),
+							chip.name,
+							" ",
+							t(windowLabelKey(chip.kind)),
 							" ",
-							money(sessionCost)
+							chip.pct,
+							"%"
 						]
-					})
+					})] }, `${chip.name}:${chip.kind}`))
 				]
 			});
 		}
@@ -3207,7 +3861,7 @@ window.__ModuleLoader__.load({
 			"billing.project": "项目",
 			"billing.lastActive": "最后活跃",
 			"billing.sessionOverflow": "仅显示花费前 {limit} 个，共 {total} 个会话",
-			"billing.budgetOverBody": "本月花费 {cost} 已超过预算 {budget}（{pct}%）",
+			"billing.budgetTierBody": "本月花费 {cost} 已达预算 {budget} 的 {pct}%",
 			"billing.models": "模型计费明细",
 			"billing.providerBilling": "厂商计费与订阅",
 			"billing.estimated": "估算",
@@ -3250,6 +3904,7 @@ window.__ModuleLoader__.load({
 			"billing.subscriptionMonthly": "本月",
 			"billing.subscriptionBilling": "计费周期",
 			"billing.subscriptionRemaining": "剩余 {pct}%",
+			"billing.subscriptionExhausted": "已用尽",
 			"billing.subscriptionReset": "{date} 重置",
 			"billing.subscriptionNoApi": "该厂商暂未提供用量查询接口",
 			"billing.heatmapLess": "少",
@@ -3271,7 +3926,25 @@ window.__ModuleLoader__.load({
 			"billing.tabTrends": "趋势",
 			"billing.tabProviders": "明细",
 			"billing.tabDetails": "统计",
-			"billing.tabPricing": "费率"
+			"billing.tabPricing": "费率",
+			"billing.export": "导出",
+			"billing.exportCsvDay": "按日 CSV",
+			"billing.exportCsvSession": "按会话 CSV",
+			"billing.exportJson": "全量 JSON",
+			"billing.peakShare": "峰谷时段占比",
+			"billing.peakShareHint": "近 {count} 轮",
+			"billing.weekCost": "本周",
+			"billing.roleCost": "费用构成",
+			"billing.roleUser": "用户输入",
+			"billing.roleAssistant": "助手输出",
+			"billing.roleTool": "工具结果",
+			"billing.roleHint": "估算：输出按实测计价，输入按消息长度摊分",
+			"billing.tierPeak": "峰时",
+			"billing.tierOff": "平价",
+			"billing.tierToPeak": "后转峰时",
+			"billing.tierToOff": "后转平价",
+			"billing.tierAlertEnterPeak": "{minutes} 分钟后进入峰时（DeepSeek 高峰价 ×2），不急的调用可稍等",
+			"billing.tierAlertEnterOff": "{minutes} 分钟后进入平价（价格减半）"
 		};
 		const en = {
 			"billing.title": "Usage",
@@ -3299,7 +3972,7 @@ window.__ModuleLoader__.load({
 			"billing.project": "Project",
 			"billing.lastActive": "Last active",
 			"billing.sessionOverflow": "Top {limit} of {total} sessions by cost",
-			"billing.budgetOverBody": "This month {cost} exceeded the budget {budget} ({pct}%)",
+			"billing.budgetTierBody": "This month {cost} reached {pct}% of the budget {budget}",
 			"billing.models": "Model billing",
 			"billing.providerBilling": "Provider billing & subscriptions",
 			"billing.estimated": "Est.",
@@ -3342,6 +4015,7 @@ window.__ModuleLoader__.load({
 			"billing.subscriptionMonthly": "Monthly",
 			"billing.subscriptionBilling": "Billing",
 			"billing.subscriptionRemaining": "{pct}% left",
+			"billing.subscriptionExhausted": "Exhausted",
 			"billing.subscriptionReset": "Resets {date}",
 			"billing.subscriptionNoApi": "Provider does not offer a usage API",
 			"billing.heatmapLess": "Less",
@@ -3363,7 +4037,25 @@ window.__ModuleLoader__.load({
 			"billing.tabTrends": "Trends",
 			"billing.tabProviders": "Details",
 			"billing.tabDetails": "Stats",
-			"billing.tabPricing": "Rates"
+			"billing.tabPricing": "Rates",
+			"billing.export": "Export",
+			"billing.exportCsvDay": "Daily CSV",
+			"billing.exportCsvSession": "Sessions CSV",
+			"billing.exportJson": "Full JSON",
+			"billing.peakShare": "Peak vs off-peak",
+			"billing.peakShareHint": "last {count} turns",
+			"billing.weekCost": "This week",
+			"billing.roleCost": "Cost breakdown",
+			"billing.roleUser": "User input",
+			"billing.roleAssistant": "Assistant output",
+			"billing.roleTool": "Tool results",
+			"billing.roleHint": "Estimated: output priced exactly, input split by message size",
+			"billing.tierPeak": "Peak",
+			"billing.tierOff": "Off-peak",
+			"billing.tierToPeak": "until peak",
+			"billing.tierToOff": "until off-peak",
+			"billing.tierAlertEnterPeak": "Peak pricing (2x) starts in {minutes} min — non-urgent calls can wait",
+			"billing.tierAlertEnterOff": "Off-peak pricing (50% off) starts in {minutes} min"
 		};
 		//#endregion
 		//#region src/client/billing-service.ts
@@ -3414,8 +4106,9 @@ window.__ModuleLoader__.load({
 				init: () => ({
 					enabled: false,
 					amount: 0,
-					lastAlertDay: "",
-					lastBalanceAlertDay: ""
+					tierAlertDays: {},
+					lastBalanceAlertDay: "",
+					lastTierSwitchAt: 0
 				}),
 				persist: "dsh.ui-usage-billing.budget",
 				actions: {
@@ -3425,11 +4118,15 @@ window.__ModuleLoader__.load({
 					setAmount: (d, value) => {
 						d.amount = Number.isFinite(value) && value > 0 ? value : 0;
 					},
-					markAlerted: (d, day) => {
-						d.lastAlertDay = day;
+					markTierAlerted: (d, tiers, day) => {
+						d.tierAlertDays ??= {};
+						for (const tier of tiers) d.tierAlertDays[String(tier)] = day;
 					},
 					markBalanceAlerted: (d, day) => {
 						d.lastBalanceAlertDay = day;
+					},
+					markTierSwitchAlerted: (d, at) => {
+						d.lastTierSwitchAt = at;
 					}
 				}
 			});
@@ -3476,13 +4173,20 @@ window.__ModuleLoader__.load({
 								okProviders: [],
 								badProviders: []
 							};
+							const catalog = [];
+							for (const group of result.value.groups) for (const model of group.models) catalog.push({
+								id: model.id,
+								...typeof model.name === "string" && model.name !== "" ? { name: model.name } : {},
+								provider: group.name
+							});
 							return {
 								checked: true,
 								available: result.value.groups.length > 0,
 								models: result.value.groups.reduce((sum, group) => sum + group.models.length, 0),
 								failures: result.value.failures.length,
 								okProviders: result.value.groups.map((group) => group.name),
-								badProviders: result.value.failures.map((failure) => failure.name)
+								badProviders: result.value.failures.map((failure) => failure.name),
+								catalog
 							};
 						} catch {
 							return {