.ui-mt-12 {
    margin-top: 12px;
}

.ui-mt-20 {
    margin-top: 20px;
}

.ui-mb-8 {
    margin-bottom: 8px;
}

.ui-mb-12 {
    margin-bottom: 12px;
}

.ui-mb-20 {
    margin-bottom: 20px;
}

.ui-pb-12 {
    padding-bottom: 12px;
}

.ui-text-danger {
    color: var(--ui-color-danger);
}

.ui-text-success {
    color: var(--ui-color-success);
}

.ui-text-soft {
    color: var(--ui-color-text-soft);
}

.ui-text-strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.ui-text-invalid {
    color: var(--ui-color-danger) !important;
}

.ui-hidden {
    display: none !important;
}

.ui-hidden-soft {
    display: none;
}

.ui-avatar-color {
    background: var(--ui-avatar-bg, var(--ui-color-surface-3));
}

.ui-avatar-color--0 { background: #3b82f6; }
.ui-avatar-color--1 { background: #10b981; }
.ui-avatar-color--2 { background: #f59e0b; }
.ui-avatar-color--3 { background: #ef4444; }
.ui-avatar-color--4 { background: #8b5cf6; }
.ui-avatar-color--5 { background: #00897b; }

.ui-avatar-gradient--0 { background: linear-gradient(135deg, rgba(91, 159, 211, 0.2) 0%, rgba(91, 159, 211, 0.3) 100%); }
.ui-avatar-gradient--1 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.3) 100%); }
.ui-avatar-gradient--2 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.3) 100%); }
.ui-avatar-gradient--3 { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.3) 100%); }
.ui-avatar-gradient--4 { background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.3) 100%); }
.ui-avatar-gradient--5 { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.3) 100%); }
.ui-avatar-gradient--6 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.3) 100%); }
.ui-avatar-gradient--7 { background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(20, 184, 166, 0.3) 100%); }

.ui-maxh-achievements {
    max-height: 135px;
}

.ui-icon-inline {
    margin-right: 8px;
    vertical-align: middle;
}