.ui-mt-12 {
    margin-top: 0.75rem;
}

.ui-mt-20 {
    margin-top: 1.25rem;
}

.ui-mb-8 {
    margin-bottom: 0.5rem;
}

.ui-mb-12 {
    margin-bottom: 0.75rem;
}

.ui-mb-20 {
    margin-bottom: 1.25rem;
}

.ui-pb-12 {
    padding-bottom: 0.75rem;
}

.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: 8.4375rem;
}

.ui-icon-inline {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Раскладывает свои блоки в ряд на широкой десктопной колонке. На мобильной
   обёртка исчезает из дерева раскладки целиком: display: contents не создаёт
   ни строки в потоке, ни нового контекста, и дети остаются прямыми детьми
   прежнего родителя — то есть мобильная раскладка не меняется вовсе, даже в
   правилах, написанных через соседей и :first-child.
   auto-fit вместо фиксированных двух колонок: половина блоков на странице
   показывается по условию, и при одном видимом ребёнке пустая дорожка
   схлопывается, а не оставляет карточку в половину ширины. */
.ui-split {
    display: contents;
}

body.web-desktop .ui-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.125rem;
    align-items: start;
}

/* Нечётный последний блок дотягивается до конца строки, чтобы не висеть
   половинкой рядом с пустотой. */
body.web-desktop .ui-split > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Отступы между блоками в потоке задаёт сетка, свои вертикальные поля детям
   здесь только мешают: они складываются с gap и разводят колонки по высоте. */
body.web-desktop .ui-split > * {
    margin-top: 0;
    margin-bottom: 0;
}