body:not(.mobile) .account-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 360px;
    margin: 0 auto;
}

.setting-description {
    margin-right: auto; /* Align element to the left despite the parent being centered */
    margin-bottom: var(--spacing-xs);
}

body.mobile .setting-description {
    margin-bottom: var(--spacing-sm);
}

select {
    color: var(--color-text-primary-light);
    border: 1px solid var(--color-button-active);
    border-radius: 9999px;
    padding: 0 var(--spacing-md);
    height: var(--button-size);
    width: 100%;
    cursor: pointer;
    transition: background var(--transition-medium) ease, color var(--transition-medium) ease, outline var(--transition-medium) ease;
    background: var(--color-button-light);
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
    margin-bottom: var(--spacing-sm);
}

select option {
    background: var(--color-background);
    color: var(--color-text-primary-light);
}

body.mobile select {
    margin-bottom: var(--spacing-md);
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

body.mobile .account-form {
    width: 100%;
}

.account-error {
    color: var(--color-error)
}

.account-form {
    margin-bottom: var(--spacing-sm);
}

body.mobile .account-form {
    margin-bottom: var(--spacing-md);
}

.account-form label {
    font-size: var(--font-size-md);
    margin-bottom: calc(var(--spacing-sm) * -1); /* Move the label closer to the input field */
}

.account-form input {
    padding: 0 var(--spacing-md);
    height: var(--button-size);
    font-size: var(--font-size-md);
    margin-right: var(--spacing-sm);
    outline: 1px solid var(--color-button-light) !important;
    background: transparent;
    transition: outline var(--transition-medium) ease, background var(--transition-medium) ease;
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
}

.account-form input:focus {
    background: var(--color-button-dark-focus);
    outline: 1px solid var(--color-button-light-focus) !important;
}

.account-form-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

body.mobile .account-form-buttons {
    gap: var(--spacing-md);
}

body.mobile .account-form-buttons {
    margin-top: var(--spacing-md);
}

.account-form-buttons button {
    width: 100%;
}

.account-form button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.account-info {
    width: 100%;
}