:root { font-family: Inter, system-ui, sans-serif; color: #294638; background: #edf2e8; }
* { box-sizing: border-box; }
body { margin: 0; }
.account-page { min-height: 100dvh; display: grid; place-items: center; padding: 28px; background: radial-gradient(ellipse at 15% 15%, #c4dec4 0, transparent 50%), radial-gradient(ellipse at 95% 100%, #f1d6b7 0, transparent 50%); }
.account-card { width: min(100%, 420px); padding: 42px 36px 30px; background: #fffdf8eb; border: 1px solid #fff; border-radius: 24px; box-shadow: 0 18px 70px #28493616; text-align: center; }
.account-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; background: #355b44; border-radius: 17px; color: #f8f4dd; font-size: 27px; font-weight: 750; }
.account-eyebrow { margin: 22px 0 12px; font-size: 11px; font-weight: 750; letter-spacing: .18em; color: #769077; }
h1 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; }
.account-description { color: #728273; font-size: 14px; line-height: 1.7; margin: 18px 0 26px; }
.account-button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 15px 20px; background: #fff; border: 1px solid #dbe4d6; border-radius: 12px; font-size: 14px; font-weight: 650; text-decoration: none; color: #2c4435; }
.account-button:hover { background: #f2f7ee; border-color: #98b190; }
.account-button:focus-visible { outline: 3px solid #8cae7e; outline-offset: 4px; }
.account-footnote { margin: 23px 0 0; font-size: 12px; color: #8b9687; }
.account-notice { padding: 12px; background: #fff0dd; border-radius: 10px; font-size: 13px; line-height: 1.6; }
@media (max-width: 480px) { .account-card { padding: 34px 24px 26px; } h1 { font-size: 27px; } }