/* 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;min-height:0;max-height:32px;flex:0 0 auto;white-space:nowrap;overflow:hidden;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.cred-low .dot{background:var(--sun)} .ib.cred.cred-low{border-color:var(--sun)}
.ib.cred.cred-out .dot{background:var(--ember)} .ib.cred.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)}
.blegal{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}.blegal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Monthly / Yearly (billing.js cycleToggle): both prices are in the card, data-cycle picks one; monthly-only plans hide under Yearly */
.bcycle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--hair);border-radius:999px;background:var(--card)}
.bcycle button{appearance:none;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.bcycle button.on{background:var(--ink);color:var(--ground)}
.bcycle em{font-style:normal;font-weight:700;font-size:11px;background:var(--sun);color:#000;border-radius:999px;padding:1px 7px;margin-left:6px}
[data-cycle="month"] .cy,[data-cycle="year"] .cm,[data-cycle="year"] .noyear{display:none}
.cm,.cy{display:contents}
.bplan .ysave{color:var(--muted);font-size:12px;margin-top:-4px}
.acc-cyc{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* "Pick your plan" (#/pick-plan, after sign-up) and the upgrade sheet (a paid action without a plan). No Free plan, Oct 11 */
.picker{padding-top:40px;padding-bottom:56px;max-width:1120px}
.picker .pk-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:26px}
.pk-k{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.picker .ptitle{font-size:clamp(44px,6vw,72px);margin:2px 0 0}
.picker .psub{max-width:520px;margin:0 0 6px;font-size:15px}
.picker .bnote{justify-content:center}
.bplan.pk{padding:24px 22px 22px}
.bplan.pk .disp{font-size:36px;margin-top:24px}
.bplan.pk.pop{box-shadow:0 0 0 1px var(--sun),0 18px 50px -24px rgba(255,215,49,.45)}
.pk-tag{position:absolute;top:16px;left:22px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pk-tag.on{color:#000;background:var(--sun);border-radius:999px;padding:3px 9px;left:18px}
.pk-hl{align-self:flex-start;font-size:13px;font-weight:700;color:var(--ink);border:1px solid var(--sun);border-radius:999px;padding:4px 10px}
.bplan.pk .btn{padding:12px 16px;font-size:12.5px}
.pk-foot{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0 4px;color:var(--muted);font-size:13px;text-align:center}
.pk-later{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.picker .blegal{text-align:center;max-width:640px;margin:10px auto 0}
#credsheet .upsheet{width:min(560px,96vw)}
.upsheet .aih{margin-top:6px}
.uplist{display:flex;flex-direction:column;gap:8px}
.uprow{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;width:100%;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:12px 14px;color:var(--ink);cursor:pointer;font:inherit;transition:border-color .12s}
.uprow:hover{border-color:var(--ink)} .uprow.on{border-color:var(--sun)}
.uprow b{font-family:var(--disp);font-weight:400;font-size:22px;text-transform:uppercase;line-height:1}
.uprow span{grid-row:2;font-size:12.5px;color:var(--muted)}
.uprow em{grid-row:1/3;grid-column:2;font-style:normal;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}
.uprow em small{font-size:12px;font-weight:500;color:var(--muted);margin-left:1px}
.upacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.upacts .btn{padding:11px 16px}
@media (max-width:1000px){.picker .bplans{max-width:520px;margin:0 auto}.picker .bplan.pop{order:-1}}
@media (max-width:560px){.wrap.billing.picker{padding:36px 16px 40px}.picker .ptitle{font-size:46px}#credsheet{padding:12px;align-items:flex-end}#credsheet .sheet{padding:22px 18px;border-radius:22px}.upacts .btn{flex:1 1 auto;justify-content:center}}