/* Account page specific styles (avoid duplicating base.css) */
.page-hero { padding: var(--space-12) 0 var(--space-10); background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 6%, #fff), transparent 70%); }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.hero-cta { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

.page-section { padding: var(--space-10) 0; }
.grid-responsive { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.2fr 1fr; } .grid-responsive { grid-template-columns: 1fr 1fr; } }

/* Forms helpers */
.form-control { margin-bottom: var(--space-4); }
.inline-flex { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Steps list */
.list-steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.list-steps li { counter-increment: step; position: relative; padding-left: calc(var(--space-6) + 6px); }
.list-steps li::before { content: counter(step); position: absolute; left: 0; top: 0.2rem; width: 28px; height: 28px; border-radius: var(--radius-round); background: rgb(var(--color-primary-rgb) / 0.12); color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* Transactions */
.transaction-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.tx-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-weight: 600; }
.tx-meta { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Password meter */
.password-meter { margin-top: var(--space-2); }
meter { width: 100%; height: 10px; }

/* Security actions and details */
.security-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.twofa-details { margin-top: var(--space-4); }

/* Utility */
.list-plain { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }