.listener-account-page {
    padding: clamp(1.25rem, 4vw, 3.5rem) 1rem 7rem;
}

.listener-account-card {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border: 1px solid var(--border-color);
    background: var(--sidebar-background);
}

.listener-account-card h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.55rem, 4vw, 2.15rem);
}

.listener-account-lead {
    margin: 0 0 1.5rem;
    color: var(--secondary-color);
    line-height: 1.65;
}

.listener-account-form {
    display: grid;
    gap: 1rem;
}

.listener-account-field {
    display: grid;
    gap: .4rem;
}

.listener-account-field label {
    font-weight: 600;
}

.listener-account-help {
    margin: 0;
    color: var(--secondary-color);
    font-size: .9rem;
}

.listener-account-message {
    margin: 1rem 0 0;
    padding: .8rem .9rem;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.listener-account-message.is-error {
    border-color: rgba(220, 53, 69, .55);
    color: #dc3545;
}

.listener-account-message.is-success {
    border-color: rgba(25, 135, 84, .55);
    color: #198754;
}

[data-theme="dark"] .listener-account-message.is-error { color: #ff8f9b; }
[data-theme="dark"] .listener-account-message.is-success { color: #75d6a0; }

.listener-account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
}

.listener-account-actions a {
    color: var(--primary-color);
}

.listener-account-submit[disabled] {
    cursor: wait;
    opacity: .7;
}