.top-space {
    height: 32px;
}

.logout-container {
    padding: 24px 16px;
    max-width: 480px;
    margin: 0 auto;

    .user-info {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 0;

        .user-avatar {
            margin-right: 16px;

            ::ng-deep .ant-avatar {
                background: #1890ff;
            }
        }

        .user-details {
            .user-label {
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
                margin-bottom: 4px;
            }

            .user-name {
                color: rgba(0, 0, 0, 0.85);
                font-size: 16px;
                font-weight: 500;
            }
        }
    }

    .alert-item {
        margin-bottom: 8px;

        &:last-child {
            margin-bottom: 16px;
        }
    }

    .logout-actions {
        text-align: center;

        .confirmation-text {
            display: block;
            color: rgba(0, 0, 0, 0.65);
            margin-bottom: 16px;
        }

        .button-group {
            display: flex;
            gap: 8px;
            justify-content: center;

            button {
                min-width: 100px;
            }
        }
    }
}

:host ::ng-deep {
    .ant-card {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;

        &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
        }
    }

    .ant-alert {
        border-radius: 4px;
    }
}
