#billingButton[hidden], #billingDialog [hidden] { display: none !important; }
#billingDialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px; overflow: auto; color: #e6e8ed; background: #191d23; border: 1px solid #49505e; border-radius: 16px; }
#billingDialog::backdrop { background: rgb(0 0 0 / 65%); }
#billingDialog h1 { margin: 4px 0 0; }
#billingDialog h2 { margin: 22px 0 12px; font-size: 1.1rem; }
#billingDialog small { color: #b7ff55; letter-spacing: .12em; }
#billingDialog .billing-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
#billingDialog .billing-banner { padding: 15px; border: 1px solid #7eaa45; border-radius: 10px; background: #283423; line-height: 1.5; }
#billingDialog .hint { color: #aeb9c8; line-height: 1.5; }
#billingDialog button { padding: 11px 15px; cursor: pointer; }
#billingDialog button:disabled { cursor: not-allowed; opacity: .65; }
#billingDialog button:focus-visible, #billingDialog input:focus-visible, #billingDialog select:focus-visible { outline: 2px solid #b7ff55; outline-offset: 3px; }
#billingDialog .billing-wallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#billingDialog .billing-wallet > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; background: #242a33; border: 1px solid #424955; border-radius: 10px; }
#billingDialog .billing-wallet strong { font-size: 1.7rem; color: #b7ff55; }
#billingDialog .billing-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#billingDialog .billing-product { padding: 18px; border: 1px solid #424955; border-radius: 10px; background: #222730; }
#billingDialog .billing-product > strong, #billingDialog .billing-price { display: block; }
#billingDialog .billing-price { margin-top: 8px; }
#billingDialog .billing-product-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#billingMessage, #billingOrderMessage, #billingGrantMessage { line-height: 1.5; overflow-wrap: anywhere; }
#billingOrderSection { border: 1px solid #576d3e; border-radius: 10px; padding: 0 16px 16px; }
#billingGrantForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#billingGrantForm label { display: flex; flex-direction: column; gap: 7px; }
#billingGrantForm input, #billingGrantForm select { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px; color: #e6e8ed; background: #10141a; border: 1px solid #49505e; border-radius: 7px; }
#billingGrantForm button { align-self: end; }
#billingHistory { padding-left: 20px; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 600px) { #billingDialog { padding: 18px; } #billingDialog .billing-products, #billingDialog .billing-wallet, #billingGrantForm { grid-template-columns: 1fr; } }

#billingButton{white-space:nowrap;background:#29352a;border-color:#73963f;color:#d7ffaa}#billingDialog .billing-section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}#billingDialog .billing-export-product{grid-column:1/-1;border-color:#657649}#billingRecoveryMessage{overflow-wrap:anywhere}#billingRetryConfig{margin-top:12px}#billingWallet:empty::before{content:"Loading balance…";color:#aeb9c8}#billingDialog .billing-wallet span{line-height:1.5}#billingDialog .billing-wallet strong{flex:none}#billingDialog .billing-product strong{font-size:17px}#billingDialog .billing-price{font-size:20px;font-weight:650;color:#e9f3d8}
@media(max-width:600px){#billingDialog h1{font-size:23px}#billingDialog .billing-heading{gap:12px}#billingDialog .billing-product-actions button{flex:1}#billingDialog .billing-wallet>div{padding:13px}#billingDialog .billing-section-heading h2{margin-top:12px}}
