/* W3 credits page. Ported from Claude Design canvas 8d06322c (docs/design-system/source/claude-design-export/nikuniku Credits.dc.html, frames a-f); values only from docs/design-system/tokens/studio.json. */
#billing{width:min(34rem,100% - 40px);margin-inline:auto;padding-block:96px;display:flex;flex-direction:column;gap:40px;text-align:start}
#billing .intro{display:flex;flex-direction:column;gap:12px}
#billing .intro p{margin:0;text-wrap:pretty}
#billing h1{margin:0;font-size:32px;line-height:1.25;font-weight:600;letter-spacing:-0.01em}
:lang(zh-Hant) #billing h1,:lang(zh-Hans) #billing h1,:lang(ja) #billing h1,:lang(ko) #billing h1{letter-spacing:0}
#billing h2{margin:0;font-size:16px;line-height:1.7;font-weight:600}
#billing section{display:flex;flex-direction:column;gap:40px}
#billing #step-signin{gap:16px}
#billing [hidden]{display:none}
#billing .balance{display:flex;flex-direction:column;gap:4px;padding:20px 24px;border:1px solid #171717}
#billing .balance .label{font-size:14px;font-weight:600}
#billing .balance div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#balance-value{font-size:32px;line-height:1.25;font-weight:600;font-variant-numeric:tabular-nums}
#billing .buy{display:flex;flex-direction:column;gap:16px}
#offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#offers button{display:flex;align-items:center;justify-content:flex-start;min-height:44px;padding:12px 16px;background:#f5ecdd;color:#171717;border:1px solid #171717;border-radius:0;font:inherit;font-size:16px;text-align:start;cursor:pointer}
#offers button:hover{background:#171717;color:#f5ecdd}
#offers button:disabled{cursor:not-allowed;opacity:.6}
#billing .action{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:#b62c45;color:#f5ecdd;font-size:16px;font-weight:600;text-decoration:none}
#billing :is(button,a,[tabindex]):focus-visible{outline:2px solid #b62c45;outline-offset:2px}
#billing .hint{margin:0;font-size:14px;line-height:1.7;text-wrap:pretty}
#order-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#billing .docs{align-self:flex-start;display:flex;align-items:center;min-height:44px;font-size:16px}
#billing .status{margin:0;padding:12px 16px;border-inline-start:4px solid #c6b9a9;font-size:16px;line-height:1.7;text-wrap:pretty}
#billing .status.ok{border-inline-start-color:#171717}
#billing .status.warn{border-inline-start-color:#b62c45}
#billing .status:empty{display:none}
@media (max-width:700px){#billing{padding-block:40px 64px}}
@media (max-width:419px){#offers{grid-template-columns:minmax(0,1fr)}}
#billing .network{display:flex;flex-direction:column;gap:6px;font-weight:600}#network{min-height:44px;padding:8px 12px;border:1px solid #171717;border-radius:0;background:#fffaf1;font:inherit;font-weight:400}
#billing .pay-warn{margin:12px 0;padding:12px 14px;border:2px solid #b62c45;border-radius:10px;background:#fdf0f2;color:#5c1222;font-size:16px;line-height:1.5;font-weight:600}