.forms-page .character-card.form-card,
.team-role__cards .character-card.form-card {
    background: #fff;
    border: 1px solid #dfe5ec;
}

.forms-page .character-card.form-card--rainbow,
.team-role__cards .character-card.form-card--rainbow {
    background: linear-gradient(135deg, #f5e2f5 0%, #e9e5fb 38%, #dfefff 68%, #e5f8fc 100%);
    border-color: #d4c9ec;
}

.forms-page .form-card .char-num,
.team-role__cards .form-card .char-num {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.forms-page .form-card .char-name,
.team-role__cards .form-card .char-name {
    row-gap: 2px;
}

.forms-page .form-card .level-pills,
.team-role__cards .form-card .level-pills {
    flex-wrap: wrap;
}

.forms-page .form-card .form-element-pill,
.team-role__cards .form-card .form-element-pill {
    flex: none;
}

@media (max-width: 768px) {
    .forms-page .form-card .char-num,
    .team-role__cards .form-card .char-num {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .forms-page .character-card.form-card,
    .team-role__cards .character-card.form-card {
        transition: none;
    }
}