#purchaseView .purchase-intro{color:#526b86;margin:12px 0 20px}
#purchaseView .purchase-steps{list-style:none;display:flex;gap:8px;counter-reset:step;padding:0;margin:20px 0;flex-wrap:wrap}
#purchaseView .purchase-steps li{counter-increment:step;display:flex;align-items:center;gap:9px;padding:12px 16px;border-radius:12px;background:#e8f1fd;color:#204d83;font-size:15px}
#purchaseView .purchase-steps li:before{content:counter(step);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#195ca2;color:white}
#purchaseView .purchase-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}
#purchaseView .purchase-plan-card{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;padding:22px 18px;border:1px solid #d1e0f1;border-radius:18px;background:white;box-shadow:0 5px 18px #1746770a}
#purchaseView .purchase-plan-card h3{font-size:19px;margin:0 0 12px;color:#18375e}
#purchaseView .purchase-plan-price{font-size:30px;color:#195ca2}
#purchaseView .purchase-plan-description{font-size:14px;white-space:pre-line;overflow-wrap:anywhere;color:#526b86;margin:10px 0 20px}
#purchaseView .purchase-primary{background:#195ca2;color:white;border:1px solid #195ca2;border-radius:10px;min-height:46px;padding:10px 18px;font:inherit;cursor:pointer}
#purchaseView .purchase-plan-card button{width:100%;margin-top:auto}
#purchaseView button:disabled{opacity:.6;cursor:wait}
.purchase-checkout{padding:24px;border:1px solid #b7d1ef;border-top:4px solid #195ca2;border-radius:18px;background:white;scroll-margin-top:84px}
.purchase-summary{font-size:21px;font-weight:600;margin:12px 0}
.purchase-pay-details{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:20px 0}
.purchase-qr{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.purchase-qr img{width:280px;max-width:100%;height:auto;border:1px solid #d5e2f0;border-radius:10px}
.purchase-save-qr{padding:10px 16px;border:1px solid #b7d1ef;border-radius:8px;color:#195ca2;min-height:44px;box-sizing:border-box}
.purchase-result{padding:16px;background:#edf5ff;border-radius:12px;color:#164d86;line-height:1.6;font-size:17px;overflow-wrap:anywhere}
.purchase-result[data-state=paid]{background:#e6f7ee;color:#126d47}
.purchase-result[data-state=review],.purchase-result[data-state=rejected]{background:#fff4df;color:#87521c}
.purchase-checkout label{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.purchase-checkout input{max-width:100%;box-sizing:border-box}
.purchase-slip-preview{display:block;max-width:100%;max-height:320px;object-fit:contain;margin:16px 0}
.purchase-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.purchase-checkout-history{margin-top:28px}
#purchaseView .purchase-order-row{padding:18px;border:1px solid #d6e3f0;border-radius:14px;background:white;margin:10px 0;overflow-wrap:anywhere}
#purchaseView .purchase-order-row p{font-size:14px;color:#526b86}
#purchaseView .purchase-order-row button{min-height:44px;margin-top:8px}
@media(max-width:850px){#purchaseView .purchase-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){#purchaseView .purchase-plan-grid{gap:10px}#purchaseView .purchase-plan-card{padding:16px 10px}#purchaseView .purchase-plan-price{font-size:24px}#purchaseView .purchase-plan-card h3{font-size:16px}#purchaseView .purchase-steps li{font-size:13px;padding:8px}.purchase-checkout{padding:16px}.purchase-summary{font-size:18px}.purchase-actions button{flex:1 1 150px}}
/* Shared package/extension payment panel on narrow screens. */
.purchase-countdown{font-weight:700;color:#1559a8;background:#eaf3ff;padding:12px;border-radius:12px;font-variant-numeric:tabular-nums}
.purchase-checkout input[type=file]{max-width:100%;width:100%;box-sizing:border-box}
.purchase-checkout p{overflow-wrap:anywhere}.purchase-checkout .purchase-actions{flex-wrap:wrap}
.purchase-checkout label{display:block;margin-block:16px}.purchase-checkout .purchase-actions button{min-height:44px}
@media(max-width:600px){.purchase-checkout{padding:16px}.purchase-checkout .purchase-actions button{width:100%}}

.purchase-actions button:not(.purchase-primary){background:white;color:#195ca2;border:1px solid #b7d1ef}