/* Account page specific styles (kept minimal; reusing base variables and components) */

.account-hero { margin-block: var(--space-32); }

.account-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-24); align-items: start; margin-block: var(--space-24) var(--space-56); }
@media (max-width: 980px) { .account-layout { grid-template-columns: 1fr; } }

.account-sidebar { position: relative; }
.account-nav { position: sticky; top: 92px; padding: var(--space-16); }
.account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.account-nav a { display: block; padding: 10px 12px; border-radius: var(--radius-md); color: var(--color-text); border: 1px solid transparent; }
.account-nav a:hover { background: var(--gray-50); text-decoration: none; }
.account-nav a.is-active { background: var(--color-primary-weak); color: var(--color-primary); border-color: var(--color-primary); }

.account-section { margin-bottom: var(--space-32); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.form-grid .grid-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-hint { color: var(--gray-600); font-size: var(--fs-sm); margin: 0; }
.form-feedback { margin-top: 10px; font-size: var(--fs-sm); min-height: 1.25em; }
.form-feedback.success { color: var(--color-success); }
.form-feedback.error { color: var(--color-danger); }

.security-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
.security-block { padding: var(--space-16); border: 1px dashed var(--gray-200); border-radius: var(--radius-lg); background: var(--color-surface); }

.twofa-setup { margin-top: var(--space-16); }
.twofa-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: end; }
.twofa-form .form-hint { grid-column: 1 / -1; }

.payments-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-24); align-items: start; }
@media (max-width: 980px) { .payments-grid { grid-template-columns: 1fr; } }

.payment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); }
.payment-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); }
.payment-title { font-weight: 600; margin-bottom: 4px; }
.payment-meta { color: var(--gray-600); font-size: var(--fs-sm); margin: 0; }
.payment-actions { display: flex; gap: var(--space-12); }

.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table th, .table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.table th { background: var(--gray-50); font-weight: 600; }

.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-bottom: var(--space-16); }
@media (max-width: 980px) { .plans-grid { grid-template-columns: 1fr; } }
.plan h3 { margin-bottom: 6px; }
.plan-price { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 8px; }
.plan ul { margin: 0 0 12px; padding-left: 18px; }

.current-plan { margin-top: var(--space-16); }

.support-form .form-grid { margin-bottom: 0; }

/* Utilities */
.mt-8 { margin-top: 8px; }
.mono { font-family: var(--font-mono); }