.account-link{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0 0 12px;padding:10px 12px;border:1px solid #ffffff26;border-radius:10px;color:#fff;background:#ffffff08;font:700 15px/1.4 "Atkinson Hyperlegible",sans-serif;text-align:left;cursor:pointer;transition:background .15s ease}
.account-link:hover{background:#ffffff17}.account-link:active{background:#ffffff26;transform:translateY(1px)}.account-link svg{flex:none}
.account-modal-open{overflow:hidden}
.account-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:600px;max-height:calc(100svh - 40px);margin:auto;padding:28px;border:1px solid #ffffffcf;border-radius:22px;background:#fffffff2;color:var(--ink,#19223b);box-shadow:0 24px 80px #12172b33;backdrop-filter:blur(24px);font:400 15px/1.5 "Atkinson Hyperlegible",sans-serif;overflow-y:auto;overscroll-behavior:contain}
.account-dialog::backdrop{background:#12172b66;backdrop-filter:blur(7px)}.account-dialog *{box-sizing:border-box}
.account-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px}.account-heading h2{margin:3px 0 0;font:700 26px/1.2 "Atkinson Hyperlegible",sans-serif}.account-heading .folio{margin:0;font-size:11px}.account-close{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid #19223b1c;border-radius:50%;background:#ffffffb3;color:inherit;cursor:pointer}.account-close:hover{background:#e9eaf4}.account-close:active{transform:scale(.95)}
.account-card{padding:18px;margin-bottom:12px;border:1px solid #dedfd8;border-radius:14px;background:#ffffff9c}.account-card h3,.account-danger h3{margin:0 0 7px;font-size:14px;font-weight:700}.account-email,.account-value{margin:0;font-size:18px;font-weight:700;overflow-wrap:anywhere}.account-hint{margin:7px 0 0;font-size:13px;line-height:1.5;color:#53617d}.account-pack{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#f5f4ee}.account-credit-value{margin:0;flex:none;padding:8px 12px;border-radius:10px;background:#e6e8f7;color:#303d91;font-weight:700;font-size:16px}.account-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}.account-dialog .button{min-height:44px;font-size:14px;padding:10px 15px;white-space:normal}.account-help{color:#303d91;text-underline-offset:3px;font-weight:700}.account-status{margin:10px 0;color:#53617d;font-size:14px;overflow-wrap:anywhere}.account-status:empty{display:none}.account-status[data-error="true"]{color:#a92732}
.account-danger{padding-top:20px;margin-top:20px;border-top:1px solid #dedfd8}.account-danger p{margin:0;color:#53617d;font-size:13px}.account-delete-link{min-height:44px;margin-top:10px;padding:9px 0;border:0;background:transparent;color:#a92732;text-align:left;font:700 14px/1.4 "Atkinson Hyperlegible",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.account-dialog button:disabled{opacity:.5;cursor:not-allowed}.account-dialog :focus-visible,.account-link:focus-visible{outline:3px solid #9199f5;outline-offset:3px}
.account-delete-dialog{max-width:560px}.account-delete-dialog .account-heading .folio{color:#a92732}.account-delete-list{padding-left:20px;margin:12px 0}.account-delete-list li{margin:8px 0}.account-delete-list li::marker{color:#a92732}.account-confirm-label{display:block;margin:20px 0 8px;font-size:14px}.account-confirm-input{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid #c4c7d1;border-radius:10px;background:white;color:inherit;font:inherit}.account-ack{display:flex;align-items:flex-start;gap:10px;margin:16px 0;font-size:13px;line-height:1.5}.account-ack input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#303d91}.account-delete-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.account-delete-dialog p{margin-top:0}
@media(max-width:520px){.account-dialog{padding:20px;border-radius:18px}.account-heading{margin-bottom:18px}.account-heading h2{font-size:23px}.account-card{padding:14px}.account-pack{gap:12px;align-items:flex-start;flex-direction:column}.account-email{font-size:16px}.account-credit-value{font-size:15px}.account-actions{align-items:flex-start;flex-direction:column}.account-delete-actions{flex-direction:column-reverse}.account-delete-actions .button{width:100%}.account-delete-dialog .account-heading h2{font-size:21px}.account-delete-dialog{font-size:14px}}
@media(prefers-reduced-motion:reduce){.account-link{transition:none}}

/* Compact account overview; the destructive confirmation remains separate. */
#account-dialog { max-width:460px; padding:22px; border-radius:18px; background:#fffffff9; }
#account-dialog .account-heading { align-items:center; margin-bottom:18px; }
#account-dialog .account-heading h2 { margin:0; font-size:30px; letter-spacing:-.025em; }
#account-close { width:40px; height:40px; border:0; border-radius:8px; background:transparent; }
#account-close:hover { background:#eef0f5; }
#account-dialog .account-card { padding:16px; margin-bottom:14px; border:1px solid #e6e7eb; border-radius:12px; background:#f7f8fa; }
#account-dialog .account-email { font-size:17px; }
#account-dialog .account-hint { font-size:12px; }
#account-dialog .account-pack { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px 12px; background:#f8f3e9; border-color:#eee9df; }
.account-pack #account-plan-title { grid-column:1/-1; margin:0 0 2px; }
.account-pack #account-plan { grid-column:1; font-size:18px; line-height:1.35; }
#account-dialog .account-credit-value { grid-column:2; grid-row:2; margin:0; padding:6px 12px; border-radius:999px; background:#2f66ce; color:white; font-size:14px; font-weight:400; white-space:nowrap; }
.account-expiry-row { grid-column:1/-1; display:flex; align-items:center; gap:7px; margin:0; font-size:12px; line-height:1.5; }
.account-expiry-row svg { flex:none; }
#account-recharge { grid-column:1/-1; justify-self:start; width:168px; margin-top:8px; background:#2c65d4; border-color:#2c65d4; border-radius:7px; font-weight:400; }
#account-recharge:hover { background:#2457bc; }
.account-security { padding:4px 0 0; }
.account-security h3 { margin:0 0 10px; font-size:14px; }
#account-dialog .account-actions { flex-direction:row; align-items:center; gap:8px 14px; }
#account-dialog .account-actions .button { font-size:12px; padding:9px 12px; border-radius:7px; font-weight:400; }
#account-dialog .account-help { display:inline-flex; align-items:center; min-height:44px; color:#2457bc; font-size:12px; font-weight:400; text-decoration:none; }
#account-dialog .account-help:hover { color:#153e8e; }
#account-dialog .account-danger { margin-top:14px; padding-top:16px; }
#account-dialog .account-danger p { font-size:12px; }
#account-dialog .account-delete-link { margin-top:4px; padding:8px 0; font-size:12px; font-weight:400; text-decoration:none; }
#account-dialog .account-delete-link:hover { color:#861b24; }
@media(max-width:360px) { #account-dialog { padding:18px; } #account-dialog .account-heading h2 { font-size:27px; } #account-dialog .account-pack { gap:7px 8px; } #account-dialog .account-credit-value { padding:6px 9px; font-size:12px; } .account-pack #account-plan { font-size:16px; } }