/* Billing & credits: the bar pill, the #/billing page, the "not enough credits" sheet. Uses the shell's tokens only. */
.ib.cred{gap:6px;display:inline-flex;align-items:center;color:var(--ink);border:1px solid var(--hair);height:32px;border-radius:var(--pill);padding:0 12px;font-variant-numeric:tabular-nums}
.ib.cred .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);display:inline-block}
.ib.cred .u{color:var(--muted);font-weight:500}
.ib.cred.low .dot{background:var(--sun)} .ib.cred.low{border-color:var(--sun)}
.ib.cred.out .dot{background:var(--ember)} .ib.cred.out{border-color:var(--ember)}
@media (max-width:1180px){.ib.cred .u{display:none}}
.crtag{flex:0 0 auto;align-self:center;margin-left:6px;font:600 10.5px/1 var(--mono);color:var(--muted);border:1px solid var(--hair);border-radius:var(--pill);padding:4px 7px;white-space:nowrap}

.billing .bnote{margin:10px 0 0;padding:10px 14px;border-radius:12px;border:1px solid var(--hair2);font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.billing .bnote.test{border-style:dashed}
.billing .bnote.warn{border-color:var(--sun);color:var(--ink)}
.billing .bnote.ok{border-color:var(--mint);color:var(--ink)}
.bhero{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:stretch;margin-top:18px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px}
.bbal .k,.bplanbox .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bbal .n{font-size:72px;line-height:.9;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.bbal .s{color:var(--muted);font-size:13px}
.bsplit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:center}
.bsplit>div{background:var(--card2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.bsplit span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.bsplit b{font-size:22px;font-variant-numeric:tabular-nums}
.bsplit em{font-style:normal;font-size:12px;color:var(--muted)}
.bplanbox{display:flex;flex-direction:column;gap:6px;min-width:220px}
.bplanbox .disp{font-size:34px}
.bplanbox span{color:var(--muted);font-size:13px}
.bplanbox .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.bplans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bplan{position:relative;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:8px}
.bplan.pop{border-color:var(--sun)} .bplan.cur{border-color:var(--mint)}
.bplan .bd{position:absolute;top:14px;right:14px}
.bplan .disp{font-size:32px}
.bplan .price{color:var(--muted);font-size:13px} .bplan .price span{color:var(--ink);font-size:28px;font-weight:700;margin-right:2px}
.bplan .cr{font-weight:700}
.bplan p{margin:0;color:var(--muted);font-size:13px}
.bplan ul{margin:4px 0 8px;padding-left:18px;font-size:13px;line-height:1.6}
.bplan .btn{margin-top:auto;justify-content:center}
.bpacks{display:flex;gap:12px;flex-wrap:wrap}
.bpack{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:150px;background:var(--card);border:1px solid var(--hair2);border-radius:16px;padding:14px 16px;text-align:left;color:var(--ink);cursor:pointer;transition:border-color .12s,transform .12s}
.bpack:hover{border-color:var(--ink)} .bpack.pop{border-color:var(--sun)}
.bpack b{font-size:24px;font-variant-numeric:tabular-nums} .bpack span{font-size:12px;color:var(--muted)} .bpack em{font-style:normal;font-weight:700;margin-top:6px}
.bpack:disabled{opacity:.5}
.bprices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.bprices>div{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;padding:10px 0;border-bottom:1px solid var(--hair)}
.bprices b{font-size:14px} .bprices span{grid-row:2;font-size:12px;color:var(--muted)} .bprices em{grid-row:1/3;grid-column:2;align-self:center;font:600 13px var(--mono);font-style:normal}
.bhist{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:130px 1fr auto 90px;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13px}
.hrow .d,.hrow .a{color:var(--muted);font-variant-numeric:tabular-nums} .hrow .a{text-align:right}
.hrow b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow em{font-style:normal;font:600 13px var(--mono);text-align:right} .hrow.p em{color:var(--mint)} .hrow.z em{color:var(--muted)}
#credsheet{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px}
#credsheet[hidden]{display:none}
#credsheet .sheet{position:relative;width:min(620px,96vw);max-height:92vh;overflow:auto;background:var(--ground);border:1px solid var(--hair2);border-radius:24px;padding:26px}
#credsheet .x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hair2);display:grid;place-items:center}
@media (max-width:1000px){.bhero{grid-template-columns:1fr}.bsplit{grid-template-columns:repeat(2,minmax(0,1fr))}.bplans{grid-template-columns:1fr}.bprices{grid-template-columns:1fr}}
@media (max-width:560px){.hrow{grid-template-columns:1fr auto}.hrow .d,.hrow .a{display:none}.bbal .n{font-size:56px}.wrap.billing{padding:0 16px}}
#mega .row:has(.crtag){grid-template-columns:34px 1fr auto auto}
#mega .row:has(.crtag):not(:has(.bd)){grid-template-columns:34px 1fr auto}
#mega .row .crtag{display:inline-block;margin:0;align-self:center;font-size:10.5px;line-height:1;margin-top:0;color:var(--muted)}