/* =========================================================
   ACCOUNT MODALS
========================================================= */

.modal.acct-modal {
    width: calc(100% - 32px);
    max-width: 500px;
}

.acct-modal-sub {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-3);
}

.acct-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: var(--identity-gradient);
}

.avatar--xl {
    width: 54px;
    height: 54px;
    font-size: 17px;
}

.acct-name {
    font-size: 15px;
    font-weight: 800;
}

.acct-email {
    font-size: 12px;
    color: var(--text-2);
}

/* Shared chip look lives in css/layout/topbar.css (.profile-card-chip, .acct-role-chip) */
.acct-role-chip {
    padding: 3px 9px;
    font-size: 10.5px;
}

.acct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.acct-stack {
    display: grid;
    gap: 14px;
}

.acct-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acct-field > span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
}

.acct-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.acct-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 113, 219, .15);
}

.acct-field input:disabled {
    background: var(--surface-soft);
    color: var(--text-3);
    cursor: not-allowed;
}

.acct-meta {
    margin-top: 14px;
    font-size: 11.5px;
    color: var(--text-3);
}

.pw-meter {
    height: 6px;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.pw-meter span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--danger);
    transition: width 200ms ease, background 200ms ease;
}

.pw-meter-label {
    font-size: 11px;
    color: var(--text-3);
}

.acct-error {
    min-height: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
}

@media (max-width: 560px) {
    .acct-grid {
        grid-template-columns: 1fr;
    }
}