#profilePage .billing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 720px; margin: 18px auto 8px; }
#profilePage .billing-plan { display: grid; gap: 6px; justify-items: center; padding: 20px 16px; border: 1px solid #cadced; border-radius: 16px; background: #f6faff; }
#profilePage .billing-plan-name { color: #102a43; font-weight: 700; }
#profilePage .billing-plan-price { color: #1f5eff; font-size: 28px; line-height: 1.2; }
#profilePage .billing-plan p { margin: 0 0 6px; color: #516378; font-size: 13px; }
#profilePage .billing-plan button { width: 100%; }
#profilePage .billing-pay-amount { margin: 4px 0 0; color: #102a43; }
#profilePage .billing-pay-amount strong { color: #1f5eff; font-size: 22px; }
@media (max-width: 720px) { #profilePage .billing-plans { grid-template-columns: 1fr; } }
#profilePage .billing-modal.hidden { display: none; }
#profilePage .billing-modal-card { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; border-radius: 16px; text-align: center; }
#profilePage .billing-modal-card .modal-head { text-align: left; }
#profilePage .billing-warning { color: #8b3a21; font-weight: 600; font-size: 13px; }
#profilePage .billing-modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
#profilePage .billing-modal-actions button { width: auto; padding: 0 18px; }
#profilePage .billing-qr img { display: block; width: min(240px, 100%); margin: 12px auto; }
#profilePage .billing-history { margin-top: 16px; color: #516378; }
#profilePage .billing-qr img { height: auto; aspect-ratio: 1; border: 1px solid #e0e7f0; border-radius: 12px; background: #fff; }
#profilePage .billing-qr-hint { margin: 0 auto 8px; color: #516378; font-size: 13px; }