.account { max-width: 560px; margin: 0 auto; padding: 32px 20px 64px; }
.account h1 { margin-top: 0; }
.account h1:focus { outline: none; }
.account-card { background: var(--card, #f3ede2); border-radius: 18px; padding: 22px; margin-top: 18px; }
.account-card > p:first-child { margin-top: 0; }
.link-button { background: none; border: 0; color: var(--accent-dark); text-decoration: underline; font: inherit; padding: 12px 8px; min-height: 44px; cursor: pointer; }
.link-button.danger { color: var(--error); }
.premium-status { font-weight: 600; }
.plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0; }
.plan { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; font: inherit; color: inherit; background: var(--paper, #fbf7ef); border: 2px solid var(--line, #d9cfbf); border-radius: 14px; padding: 16px; min-height: 44px; cursor: pointer; }
.plan:hover, .plan:focus-visible { border-color: var(--accent-dark); }
.plan[disabled] { cursor: progress; opacity: .7; }
.plan-name { font-weight: 600; }
.plan-price { font-size: 1.25rem; }
.plan-note, .small { color: var(--muted); font-size: .92rem; }
.account-actions { margin: 24px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.test-banner { background: #fde8c8; border-radius: 12px; padding: 12px 16px; font-weight: 600; }