.modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; background: #251b1585; }
.modal.show { display: grid; }
.dialog { position: relative; width: 100%; max-width: 420px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 30px 24px 22px; border-radius: 22px; background: #fff; text-align: center; line-height: 1.6; box-shadow: 0 20px 60px #38211780; }
.dialog:focus { outline: none; }
.dialog h2 { margin: 0 0 6px; font-size: 24px; }
.dialog p { margin: 0 0 16px; color: var(--muted); }
.dialog .selected-plan { margin: 14px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.dialog .selected-plan-note { margin: 0 0 12px; color: #8b6942; font-size: 12px; }
.dialog [hidden] { display: none; }
.dialog .qr { display: block; width: min(220px, 100%); max-height: 275px; height: auto; object-fit: contain; margin: 0 auto 14px; border-radius: 8px; }
.dialog .wechat-id { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--ink); font-size: 14px; }
.wechat-id input { width: 105px; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: left; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-actions .button { display: flex; justify-content: center; align-items: center; padding: 10px 8px; font-size: 14px; }
.dialog .modal-hint { margin: 14px 0 0; font-size: 12px; }
.dialog .modal-status { min-height: 20px; margin: 6px 0 0; color: var(--brand); font-size: 12px; }
.close { position: absolute; top: 10px; right: 13px; border: 0; padding: 0; background: transparent; color: #8d8179; font-size: 28px; line-height: 1; cursor: pointer; }
.modal .button:focus-visible, .close:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
body.modal-open { overflow: hidden; }
@media (max-width: 400px) { .dialog { padding: 28px 18px 18px; } .dialog h2 { font-size: 22px; } }