body { margin: 0; background: var(--ui-color-background); color: var(--ui-color-text); font-family: var(--ui-font-body); }
.account-layout { min-height: 100vh; display: grid; place-items: center; padding: var(--ui-space-lg) 1rem; box-sizing: border-box; }
.account-layout .ui-surface { width: min(100%, 28rem); box-sizing: border-box; }
.account-brand { margin: 0; font-family: var(--ui-font-heading); color: var(--ui-color-accent); font-weight: 700; letter-spacing: .02em; }
.account-panel h1 { font-family: var(--ui-font-heading); margin: var(--ui-space-sm) 0 var(--ui-space-md); }
.account-panel form { display: grid; gap: var(--ui-space-md); }
.account-field { display: grid; gap: var(--ui-space-sm); }
.account-field label { font-weight: 600; }
.account-field input { font: inherit; color: var(--ui-color-text); background: var(--ui-color-surface); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-control); padding: var(--ui-space-sm); }
.account-field .validation-message, .account-panel .validation-errors { color: var(--ui-color-error); margin: 0; }
.account-message { color: var(--ui-color-text); margin: 0 0 var(--ui-space-md); }
.account-submit { font: inherit; font-weight: 600; color: var(--ui-color-accent-text); background: var(--ui-color-accent); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-control); padding: var(--ui-space-sm) var(--ui-space-md); cursor: pointer; }
.account-links { display: grid; gap: var(--ui-space-sm); margin-top: var(--ui-space-md); }
.account-credit { margin: var(--ui-space-md) 0 0; color: var(--ui-color-muted); font-size: .875rem; }