.account-overlay[hidden],
.drawer-danger[hidden] { display: none; }

.account-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(14, 14, 11, .58); }
.account-drawer { position: absolute; inset: 0 0 0 auto; width: min(440px, 92vw); overflow-y: auto; background: #eee7d6; color: #171711; padding: 38px clamp(25px, 5vw, 48px); box-shadow: -18px 0 45px rgba(0, 0, 0, .24); animation: drawer-in .22s ease-out; }
.drawer-open { overflow: hidden; }
.drawer-close { float: right; border: 0; background: transparent; color: inherit; font: 34px/1 Arial, sans-serif; cursor: pointer; }
.drawer-eyebrow, .drawer-label { display: block; color: #a6382c; font: 800 10px/1.3 Arial, sans-serif; letter-spacing: .13em; }
.drawer-eyebrow { margin-top: 45px; }
.account-drawer h2 { clear: both; font-size: 42px; letter-spacing: -.04em; margin: 15px 0 36px; }
.drawer-email { display: block; overflow-wrap: anywhere; margin: 8px 0 28px; font: 700 15px/1.4 Arial, sans-serif; }
.drawer-methods { display: flex; gap: 8px; margin: 9px 0 28px; }
.drawer-method { border: 1px solid rgba(23, 23, 17, .25); padding: 7px 9px; font: 700 11px/1 Arial, sans-serif; }
.drawer-label select { display: block; box-sizing: border-box; width: 100%; margin-top: 8px; padding: 11px; border: 1px solid rgba(23, 23, 17, .25); background: white; }
.drawer-status { min-height: 40px; color: #a6382c; font: 13px/1.4 Arial, sans-serif; }
.drawer-button { width: 100%; border: 0; padding: 13px; background: #171711; color: white; font: 800 11px/1 Arial, sans-serif; letter-spacing: .08em; cursor: pointer; }
.drawer-button.secondary { background: transparent; border: 1px solid #171711; color: #171711; }
.drawer-delete-link { display: block; margin: 28px auto 0; border: 0; background: none; color: #8e241c; text-decoration: underline; cursor: pointer; }
.drawer-danger { margin-top: 18px; border-top: 1px solid rgba(166, 56, 44, .35); padding-top: 18px; }
.drawer-danger p { line-height: 1.5; }
.drawer-danger input { box-sizing: border-box; width: 100%; margin: 5px 0 10px; padding: 11px; border: 1px solid rgba(166, 56, 44, .5); }
.drawer-button.danger { background: #a6382c; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .account-drawer { animation: none; } }