[hidden] { display: none !important; }
.payment-modal { padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); }
.payment-modal .modal-content { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.payment-modal .modal-header { padding: 25px 24px 19px; text-align: left; }
.payment-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #728076; background: transparent; cursor: pointer; display: grid; place-items: center; }
.payment-close svg { width: 19px; height: 19px; }
.payment-close:hover { background: #f0f5f1; }
.payment-close:disabled { opacity: .35; cursor: wait; }
.payment-close:focus-visible, .reopen-plans:focus-visible, .price-option:focus-within, .payment-button:focus-visible { outline: 3px solid #15783d; outline-offset: 3px; }
.plan-eyebrow { font-size: 11px; letter-spacing: 2px; color: #62796a; margin-bottom: 9px; }
.payment-modal .modal-title { padding-right: 20px; font-size: 21px; line-height: 1.4; }
.payment-modal .modal-subtitle { font-size: 13px; color: #76827a; line-height: 1.5; }
.payment-modal .price-options { padding: 19px 20px 20px; }
.payment-modal .price-option { padding: 15px 13px; min-height: 79px; margin-bottom: 10px; border-width: 1.5px; }
.payment-modal .price-option.selected { border-color: #22a657; background: #f1fbf4; }
.payment-modal .price-option input { width: 19px; height: 19px; margin-right: 11px; }
.payment-modal .price-amount { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-current { font-size: 21px; font-weight: 650; letter-spacing: -.5px; }
.price-currency { font-size: 13px; margin-right: 1px; }
.price-original { font-size: 11px; color: #8a938d; font-weight: 400; }
.payment-modal .price-duration { color: #65756a; font-size: 12px; }
.payment-modal .price-discount { flex-shrink: 0; color: #849087; font-size: 11px; margin-left: 8px; }
.payment-modal .price-discount.is-offer { color: #168746; background: #e5f5ea; padding: 5px 7px; border-radius: 5px; }
.payment-modal .recommend-badge { font-size: 10px; font-weight: 500; padding: 3px 6px; margin-left: 7px; background: #249f53; }
.payment-modal .agreement { padding: 6px 0 12px; color: #748078; font-size: 11px; }
.payment-modal .agreement-checkbox { line-height: 1.6; }
.payment-modal .agreement a { color: #267b48; }
.payment-modal .button-container { margin-top: 0; gap: 8px; }
.payment-modal .payment-button { padding: 14px 4px; font-size: 15px; border-radius: 10px; background: #21a653; }
.payment-modal .payment-button:disabled { background: #a6cdb4; }
.payment-modal .jianzhi-button { padding: 14px 4px; font-size: 13px; border-radius: 10px; flex: 0 0 91px; }
.offer-notice { color: #317248; font-size: 11px; line-height: 1.6; padding: 10px 20px; background: #eef8f1; border-bottom: 1px solid #e3efe7; }
.offer-notice { display: flex; align-items: center; justify-content: center; gap: 8px; }
.offer-countdown { display: inline-block; font-size: 17px; font-weight: 700; letter-spacing: 1px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #177b3d; }
.offer-countdown-suffix { color: #66846d; font-size: 10px; }
.offer-notice.expired { color: #7e817e; background: #f4f5f3; }
.offer-notice.expired .offer-countdown { color: #7e817e; }
.offer-mode .modal-header { background: linear-gradient(125deg, #f0fbf3, #fff 80%); }
.offer-mode .plan-eyebrow { color: #1c9450; }
.offer-mode .price-current { color: #158548; }
.offer-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.offer-celebrating .price-current { display: inline-block; transform-origin: left center; animation: offer-price-pop .65s cubic-bezier(.2,.8,.25,1) both; }
@keyframes offer-price-pop {
    0% { transform: scale(.9); }
    40% { transform: scale(1.12); }
    70% { transform: scale(.98); }
    100% { transform: scale(1); }
}
.reopen-plans { position: relative; z-index: 1; border: 1px solid #bed9c7; background: #fff; color: #20804a; padding: 12px 23px; margin-top: 24px; border-radius: 24px; cursor: pointer; font-size: 14px; }
@media (max-width: 350px) {
    .payment-modal { padding-left: 12px; padding-right: 12px; }
    .payment-modal .modal-header { padding: 20px 17px 15px; }
    .payment-modal .modal-title { font-size: 19px; }
    .payment-modal .price-options { padding: 14px; }
    .payment-modal .price-option { padding: 12px 9px; min-height: 72px; }
    .price-current { font-size: 19px; }
    .payment-modal .price-discount { font-size: 10px; margin-left: 4px; }
    .payment-modal .price-discount.is-offer { padding: 4px; }
    .payment-modal .payment-button { font-size: 13px; }
    .payment-modal .jianzhi-button { flex-basis: 78px; font-size: 12px; }
    .offer-notice { padding: 8px 14px; }
}
@media (max-height: 590px) {
    .payment-modal .modal-header { padding-top: 16px; padding-bottom: 12px; }
    .plan-eyebrow { margin-bottom: 5px; }
    .payment-modal .price-option { min-height: 65px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 8px; }
    .payment-modal .price-options { padding-top: 12px; padding-bottom: 14px; }
    .offer-notice { padding-top: 7px; padding-bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .offer-confetti { display: none !important; }
    .offer-celebrating .price-current { animation: none !important; }
    .payment-modal, .modal-content { transition: none !important; }
    .bg-animate, .loading-dots span { animation: none !important; }
}

.payment-status { padding-top: 12px; color: #b34937; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.payment-modal .jianzhi-button { gap: 5px; white-space: nowrap; }
.payment-modal .jianzhi-button i { font-size: 12px; flex-shrink: 0; }
.payment-modal .price-info { min-width: 0; }
.payment-modal .price-amount { flex-wrap: wrap; }
.payment-modal .price-discount { max-width: 94px; overflow-wrap: anywhere; }
@media (max-height: 500px) {
    .payment-modal .plan-eyebrow { display: none; }
    .payment-modal .modal-header { padding-top: 18px; padding-bottom: 10px; }
    .payment-modal .price-option { min-height: 59px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 6px; }
    .payment-modal .offer-notice { padding-top: 5px; padding-bottom: 5px; font-size: 10px; }
    .payment-modal .agreement { padding-top: 3px; padding-bottom: 9px; }
}