/* Account page styles */

.lha-page { max-width: 720px; }

/* Header */
.lha-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 28px;
}
.lha-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 22px; font-weight: 700; font-family: 'Space Grotesk', sans-serif;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lha-username   { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; }
.lha-email-small{ font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Tabs */
.lha-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.lha-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; color: var(--muted);
    transition: .15s; margin-bottom: -1px;
}
.lha-tab:hover { color: var(--text); }
.lha-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Section */
.lha-section { animation: lhaFadeIn .2s ease; }
@keyframes lhaFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Password field */
.lha-pass-wrap { position: relative; }
.lha-pass-wrap .lh-input { padding-right: 40px; }
.lha-eye {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px;
    color: var(--muted);
}

/* Password rules */
.lha-pass-rules { margin: 8px 0 16px; display: flex; flex-direction: column; gap: 4px; }
.lha-rule { font-size: 12px; color: var(--muted); transition: color .2s; }
.lha-rule.ok  { color: var(--success); }
.lha-rule.ok::first-letter { }

/* Strength bar */
.lha-strength-bar { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.lha-strength-bar::after {
    content: ''; display: block; height: 100%; border-radius: 4px;
    background: var(--danger); width: var(--w, 0%); transition: width .3s, background .3s;
}

/* Billing grid */
.lha-billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .lha-billing-grid { grid-template-columns: 1fr; } }

/* Payment summary */
.lha-pay-summary {
    background: #f8fafc; border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.lha-pay-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border);
}
.lha-pay-row:last-child { border-bottom: none; }
.lha-pay-total { font-weight: 700; font-size: 16px; color: var(--primary); }
.lha-sub-status { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }

/* Notifications */
.lha-notif-list { display: flex; flex-direction: column; gap: 0; }
.lha-notif-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid var(--border);
}
.lha-notif-row:last-child { border-bottom: none; }
.lha-notif-info { display: flex; align-items: center; gap: 12px; }
.lha-notif-icon { font-size: 20px; width: 32px; text-align: center; flex-shrink: 0; }
.lha-notif-label { font-size: 14px; font-weight: 600; }
.lha-notif-desc  { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Payment history table */
.lha-pay-history { margin-top:4px; }
.lha-pay-history-head {
    display:grid; grid-template-columns:130px 1fr 90px 90px;
    padding:6px 0; border-bottom:2px solid var(--border);
    font-size:11px; font-weight:700; text-transform:uppercase;
    color:var(--muted); letter-spacing:.5px;
}
.lha-pay-history-row {
    display:grid; grid-template-columns:130px 1fr 90px 90px;
    padding:10px 0; border-bottom:1px solid var(--border);
    font-size:13px; align-items:center;
}
.lha-pay-history-row:last-child { border-bottom:none; }
@media(max-width:600px) {
    .lha-pay-history-head { display:none; }
    .lha-pay-history-row { grid-template-columns:1fr 1fr; gap:4px; }
}