.traffic-usage-open{margin-top:12px;padding:7px 13px;border:1px solid #ffffff40;border-radius:9px;background:#ffffff12;color:#fff;font-size:12px;cursor:pointer}
.traffic-usage-open[hidden]{display:none!important}
.traffic-usage-dialog{box-sizing:border-box;width:min(800px,calc(100vw - 28px));max-height:calc(100dvh - 36px);border:1px solid #e9dfd5;border-radius:22px;background:#fffcf8;color:#40372f;padding:26px;box-shadow:0 24px 80px #32281b45;overflow:auto}
.traffic-usage-dialog::backdrop{background:#241c1666;backdrop-filter:blur(3px)}
.traffic-usage-dialog *{box-sizing:border-box}.traffic-usage-dialog [hidden]{display:none!important}
.traffic-usage-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.traffic-usage-dialog h2{margin:0;font-size:21px;letter-spacing:.02em}
.traffic-usage-dialog button{border:1px solid #e4d8ce;background:#fffaf5;border-radius:8px;color:#766758;padding:7px 12px;cursor:pointer;font:inherit;font-size:12px}
.traffic-usage-dialog button:disabled{opacity:.45;cursor:default}
.traffic-usage-dialog button:focus-visible,.traffic-usage-dialog input:focus-visible,.traffic-usage-dialog summary:focus-visible{outline:2px solid #da794c;outline-offset:3px}
.traffic-usage-dialog #traffic-usage-close{font-size:22px;padding:0;width:32px;height:32px;border:0;background:#f3ede6;color:#8a7b6d;border-radius:50%}
.traffic-usage-controls{display:flex;align-items:center;gap:8px;position:relative}
.traffic-usage-ranges{display:flex;padding:3px;border-radius:10px;background:#f2ede7;gap:3px}
.traffic-usage-ranges button{border:0;background:none;padding:7px 13px;color:#847569}
.traffic-usage-ranges button[aria-pressed=true]{background:#fff;color:#b65b35;box-shadow:0 1px 4px #38251712;font-weight:700}
#traffic-usage-custom{margin-left:auto}
#traffic-usage-custom>summary{list-style:none;font-size:12px;color:#8a7969;padding:8px 0;cursor:pointer}
#traffic-usage-custom>summary::-webkit-details-marker{display:none}
#traffic-usage-custom>summary:after{content:'⌄';padding-left:6px}
.traffic-usage-form{position:absolute;z-index:5;right:0;top:44px;display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px;width:min(430px,100%);padding:15px;border:1px solid #e5d7c9;border-radius:12px;background:#fffcf8;box-shadow:0 12px 34px #493c3320}
.traffic-usage-form label{display:grid;gap:5px;font-size:11px;color:#756457;min-width:0}
.traffic-usage-form input{min-width:0;width:100%;border:1px solid #e5d6c8;border-radius:8px;padding:7px;background:#fff;color:#40372f;font:inherit;min-height:35px}
.traffic-usage-form button{min-height:35px;background:#ce6c45;color:#fff;border-color:#ce6c45}
.traffic-usage-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:24px 0 20px;padding-bottom:20px;border-bottom:1px solid #eee4da}
.traffic-usage-summary div{display:grid;gap:7px}.traffic-usage-summary span{font-size:12px;color:#8c7b6b}
.traffic-usage-summary strong{font-size:34px;color:#a84e2b;letter-spacing:-.025em;line-height:1.15;font-variant-numeric:tabular-nums}
#traffic-usage-period{padding-bottom:2px;white-space:nowrap;color:#9a8b7f;font-size:11px}
.traffic-usage-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;min-height:24px}
.traffic-usage-chart-head h3{margin:0;font-size:13px;font-weight:600;color:#685747}
.traffic-usage-plot{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;margin:0 2px 32px;height:168px}
.traffic-usage-axis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;color:#a09081;font-size:10px;font-variant-numeric:tabular-nums}
.traffic-usage-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:168px;border-bottom:1px solid #e5d9ce;background:linear-gradient(#eee5dc,#eee5dc) 0 0/100% 1px no-repeat,linear-gradient(#eee5dc,#eee5dc) 0 50%/100% 1px no-repeat}
.traffic-usage-dialog .usage-bar{position:relative;padding:0;border:0;background:transparent;border-radius:5px;height:100%;min-width:0;color:#8a796b}
.usage-bar-fill{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(56%,26px);min-height:2px;max-height:100%;border-radius:5px 5px 0 0;background:linear-gradient(0deg,#df784e,#eead84);transition:filter .15s}
.usage-bar:hover .usage-bar-fill,.usage-bar:focus-visible .usage-bar-fill{filter:brightness(.88)}
.usage-bar-fill.no-record{background:#ddcfc1;min-height:1px}
.usage-bar-label{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px}
.usage-bar-amount{position:absolute;left:50%;transform:translateX(-50%);color:#8a5b3d;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.usage-chart-action{font-size:10px;color:#b46e49;white-space:nowrap}.usage-bar[aria-pressed=true] .usage-bar-label{color:#ad4d25;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.traffic-usage-point{min-height:18px;margin:0;color:#8c6147;font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.traffic-usage-hint{margin:7px 0 18px;text-align:center;color:#a09184;font-size:11px}
.traffic-usage-empty{padding:44px 16px;text-align:center;color:#958474;font-size:13px;line-height:1.6;border-radius:12px;background:#f9f4ee;margin-bottom:14px}
.traffic-usage-dialog table{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:12px;font-size:12px}
.traffic-usage-dialog th,.traffic-usage-dialog td{padding:9px 5px;border-bottom:1px solid #f0e5dd;text-align:left;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.traffic-usage-dialog th{color:#a18b77;font-size:11px;font-weight:500}.traffic-usage-dialog th:last-child,.traffic-usage-dialog td:last-child{text-align:right}
.traffic-usage-dialog footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:16px;color:#a49382;font-size:10px;line-height:1.6}
.traffic-usage-error{color:#ad4c31;font-size:12px;line-height:1.6;margin:10px 0}.traffic-usage-error:empty{display:none}
@media(max-width:520px){.traffic-usage-dialog{padding:20px 16px;border-radius:18px}.traffic-usage-dialog header{margin-bottom:16px}.traffic-usage-dialog h2{font-size:19px}.traffic-usage-ranges button{padding:7px 10px;font-size:11px}.traffic-usage-summary{margin-top:22px;gap:8px}.traffic-usage-summary strong{font-size:29px}#traffic-usage-period{font-size:10px}.traffic-usage-form{grid-template-columns:1fr 1fr}.traffic-usage-form button{grid-column:1/-1}.traffic-usage-plot{grid-template-columns:42px minmax(0,1fr);gap:4px}.traffic-usage-point{font-size:11px}.usage-bar-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.usage-bar-fill{transition:none}}
.records-stack{display:grid;gap:8px;min-width:0}
.records-stack .top-records:not(.expanded) .record-row:nth-child(n+2){display:none}
.records-stack .traffic-usage-open{display:flex;align-items:center;justify-content:space-between;margin:0;width:100%;padding:11px 16px;border-radius:13px;background:#ffffff10;color:#ffffffe3;text-align:left;font-weight:600}
.records-stack .traffic-usage-open:after{content:'›';font-size:18px;font-weight:400;color:#ffffff9e}
.portal-head{padding-block:28px;gap:30px}
.balance-copy{align-self:center}.balance-copy>p{margin-top:16px}.balance-copy .progress{margin-top:20px}
#traffic-usage-chart{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:start}
.traffic-usage-day{border-left:1px solid #eee4da;padding-left:22px;min-width:0}
.traffic-usage-day h3{font-size:13px;font-weight:600;margin:0 0 14px;color:#685747;text-align:center}
.traffic-usage-donut{height:134px;width:134px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#ece3d9}
.traffic-usage-donut>div{height:100px;width:100px;border-radius:50%;background:#fffcf8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.traffic-usage-donut strong{font-size:18px;color:#75513b;font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap}
.traffic-usage-donut span{font-size:10px;color:#a38e7b}
.traffic-usage-legend{display:grid;gap:4px;margin-top:12px}
.traffic-usage-dialog .usage-slot{display:flex;align-items:center;gap:6px;padding:5px 0;min-width:0;border:0;border-radius:4px;background:none;text-align:left;font-size:11px;color:#7e6857}
.traffic-usage-dialog .usage-slot:disabled{opacity:.7}.usage-slot i{width:6px;height:6px;border-radius:50%;flex-shrink:0}.usage-slot b{font-weight:600;margin-left:auto;color:#775e4d;font-size:10px;white-space:nowrap}
.usage-slot[aria-pressed=true]{background:#f5eee6!important}.usage-bar[aria-pressed=true] .usage-bar-fill{background:linear-gradient(0deg,#c9653b,#e89467)}
@media(max-width:620px){#traffic-usage-chart{grid-template-columns:1fr;gap:12px}.traffic-usage-day{border-left:0;border-top:1px solid #eee4da;padding:16px 0 0}.traffic-usage-day h3{text-align:left}.traffic-usage-day-body{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:center}.traffic-usage-donut{height:116px;width:116px}.traffic-usage-donut>div{height:86px;width:86px}.traffic-usage-donut strong{font-size:18px}.traffic-usage-legend{margin:0}.traffic-usage-plot,.traffic-usage-bars{height:138px}.traffic-usage-hint{margin-bottom:5px}.portal-head{gap:18px;padding-block:24px}}

/* Credit state never hides the history controls. */
.status-pill[data-state=empty] i{background:#df9b76}
.status-pill[data-state=pending] i{background:#b7ada5}

.records-stack .top-records.expanded{position:relative;top:auto;right:auto;z-index:1;width:100%;max-height:260px;transform:none;box-shadow:none}
.sale-mode .balance-copy .progress,.sale-mode .balance-meta,.sale-mode #usage-ring,.sale-mode #refresh{display:none}.sale-mode .overview-side{grid-template-columns:1fr}.sale-mode #portal-remaining{font-size:clamp(26px,3vw,42px)}

/* Stable dialog: details replace the donut in place, never append below it. */
.traffic-usage-dialog{width:min(760px,calc(100vw - 24px));height:min(530px,calc(100dvh - 28px));max-height:none;padding:22px 24px;overflow:hidden}
.traffic-usage-dialog[open]{display:flex;flex-direction:column;gap:0}
.traffic-usage-dialog header{margin-bottom:14px;flex-shrink:0}
.traffic-usage-dialog h2{font-size:20px}
.traffic-usage-controls,.traffic-usage-summary,.traffic-usage-dialog footer{flex-shrink:0}
.traffic-usage-summary{margin:16px 0 14px;padding-bottom:14px}
.traffic-usage-summary strong{font-size:30px}.traffic-usage-summary div{gap:4px}
.traffic-usage-content{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable}
#traffic-usage-chart{height:100%;min-height:252px;grid-template-columns:minmax(0,1fr) 278px;gap:18px;align-items:stretch}
.traffic-usage-chart-head{margin-bottom:18px;gap:6px}.usage-chart-action{font-size:9px}
.traffic-usage-plot{grid-template-columns:38px minmax(0,1fr);gap:4px;margin-bottom:28px;height:152px}
.traffic-usage-bars{height:152px}.traffic-usage-point{font-size:11px}
.traffic-usage-day{padding-left:16px;display:flex;flex-direction:column;min-height:0}
.traffic-usage-day-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;min-height:24px;flex-shrink:0}
.traffic-usage-day-head h3{margin:0;text-align:left;font-size:13px}
.traffic-usage-dialog #traffic-usage-details-toggle{border:0;background:transparent;padding:4px 0;font-size:11px;color:#ad5735;white-space:nowrap}
.traffic-usage-dialog #traffic-usage-details-toggle:disabled{color:#9a8c7e}
.traffic-usage-day-body{display:block;flex:1;min-height:0;overflow:auto}
.traffic-usage-donut{width:118px;height:118px}.traffic-usage-donut>div{width:88px;height:88px}
.traffic-usage-donut strong{font-size:17px}.traffic-usage-legend{margin-top:10px;gap:3px}
.traffic-usage-dialog .usage-slot{padding:4px 0}.usage-slot b{font-size:11px}
.traffic-usage-details{display:flex;flex-direction:column;flex:1;min-height:0}
.traffic-usage-detail-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#756353;height:24px;flex-shrink:0}
.traffic-usage-dialog #traffic-usage-clear-slot{padding:2px 0;border:0;background:none;font-size:10px;color:#ad5735}
.traffic-usage-table-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.traffic-usage-dialog table{margin-top:0;font-size:11px;table-layout:fixed}
.traffic-usage-dialog th,.traffic-usage-dialog td{padding:7px 3px;line-height:1.3}
.traffic-usage-dialog th{position:sticky;top:0;background:#fffcf8;font-size:10px;color:#897665;z-index:1}
.traffic-usage-dialog th:first-child{width:32%}.traffic-usage-dialog th:nth-child(2){width:40%}
.traffic-usage-dialog th:nth-child(2),.traffic-usage-dialog td:nth-child(2){text-align:right;white-space:nowrap}
.traffic-usage-dialog td:last-child{padding-left:12px;font-size:10px;color:#8e7866}
.usage-share-track{display:block;background:#f2e8df;height:3px;margin-top:3px;border-radius:2px;overflow:hidden}
.usage-share-track i{display:block;height:100%;background:#dfa17b}.traffic-usage-dialog .usage-peak{font-weight:700;color:#af5632}
.traffic-usage-detail-total{display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid #eee4da;font-size:11px;color:#796351;flex-shrink:0}
#traffic-usage-detail-empty{font-size:12px;text-align:center;padding:28px 4px;color:#917c69}
.traffic-usage-dialog footer{margin-top:12px}.traffic-usage-empty{margin:0;display:grid;place-items:center;min-height:100%;padding:20px}
.traffic-usage-error{margin:6px 0;flex-shrink:0}
@media(max-width:620px){
 .traffic-usage-dialog{width:calc(100vw - 20px);height:min(690px,calc(100dvh - 20px));padding:18px 16px;border-radius:18px}
 .traffic-usage-summary{margin:12px 0}.traffic-usage-summary strong{font-size:28px}
 #traffic-usage-chart{height:auto;min-height:0;grid-template-columns:1fr;gap:12px}
 .traffic-usage-daily{min-height:210px}.traffic-usage-plot,.traffic-usage-bars{height:128px}
 .traffic-usage-chart-head{margin-bottom:14px}.traffic-usage-day{height:264px;border-left:0;border-top:1px solid #eee4da;padding:12px 0 0}
 .traffic-usage-day-body{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:16px}
 .traffic-usage-legend{margin-top:0}.traffic-usage-content{scrollbar-gutter:auto}
 .traffic-usage-dialog table{font-size:12px}.traffic-usage-dialog th,.traffic-usage-dialog td{padding:8px 4px}
}

.traffic-usage-dialog #traffic-usage-domain-open{border:0;background:none;padding:6px;color:#a75433;white-space:nowrap;font-size:11px}
#traffic-usage-domains{height:100%;display:flex;flex-direction:column;min-height:0}
.traffic-usage-domain-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.traffic-usage-domain-head span,#traffic-usage-domain-note{font-size:10px;color:#8f7b69}
#traffic-usage-domain-note{margin:8px 0}.traffic-usage-domain-scroll{flex:1;overflow:auto;min-height:0}
#traffic-usage-domains th:first-child{width:60%}#traffic-usage-domains th:nth-child(2){width:23%}
#traffic-usage-domains td:first-child{font-size:12px}#traffic-usage-domains td small{display:block;font-size:10px;color:#a07c62;margin-top:3px}

.traffic-usage-dialog[aria-busy=true] #traffic-usage-chart{opacity:.65;pointer-events:none}.traffic-usage-dialog #traffic-usage-chart{transition:opacity .18s ease}.traffic-usage-dialog[aria-busy=true] .usage-chart-action{visibility:hidden}
@media(prefers-reduced-motion:reduce){.traffic-usage-dialog #traffic-usage-chart{transition:none}}