/* Account page styles. Additive to styles.css; reuses .btn / .chip / .card. */
.acct { max-width: 720px; }
.acct-panel { padding: 8px 0 40px; }
.acct-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-sub { color: var(--muted, #6b7280); font-size: 0.9rem; margin: 4px 0 16px; }

.acct-form { display: grid; gap: 12px; margin: 0 0 28px; }
.acct-li-import { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 0; }
.acct-li-import .acct-note { margin: 0; }
.acct-form label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.acct-form input, .acct-form select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--border, #d1d5db);
  border-radius: 8px; background: var(--card-bg, #fff); color: inherit; width: 100%;
}
.acct-form input:focus, .acct-form select:focus { outline: 2px solid #6366f1; outline-offset: 1px; }
.acct-form .btn { justify-self: start; }

.acct-note { padding: 10px 12px; border-radius: 8px; background: rgba(99,102,241,0.08);
  font-size: 0.9rem; margin: 8px 0; }
.acct-note.ok { background: rgba(16,185,129,0.12); }
.acct-note.error { background: rgba(239,68,68,0.12); }
.acct-help { font-size: 0.9rem; margin-top: 12px; }
.acct-help code { background: rgba(127,127,127,0.15); padding: 1px 5px; border-radius: 4px; }
.acct-help ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }

.acct-recs { display: grid; gap: 10px; }
.rec-card .btn { justify-self: start; margin-top: 8px; }

@media (max-width: 640px) { .acct { padding-left: 16px; padding-right: 16px; } }