.badge-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.badge-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.badge-card h2,
.badge-card p {
    margin: 0;
}

.badge-card h2 {
    font-size: 18px;
}

.badge-card p,
.badge-card small {
    color: var(--muted);
}

.badge-card p {
    margin-top: 5px;
    line-height: 1.5;
}

.badge-card small {
    display: block;
    margin-top: 8px;
    font-size: 11px;
}

.badge-card-icon,
.profile-badge-item > span,
.badge-admin-name > i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}

.tone-success .badge-card-icon,
.profile-badge-item.tone-success > span,
.badge-admin-name > i.tone-success { color: #087b50; background: color-mix(in srgb, #10b981 15%, var(--surface)); }
.tone-warning .badge-card-icon,
.profile-badge-item.tone-warning > span,
.badge-admin-name > i.tone-warning { color: #a15e00; background: color-mix(in srgb, #f59e0b 18%, var(--surface)); }
.tone-purple .badge-card-icon,
.profile-badge-item.tone-purple > span,
.badge-admin-name > i.tone-purple { color: #6844d6; background: color-mix(in srgb, #8b5cf6 15%, var(--surface)); }
.tone-neutral .badge-card-icon,
.profile-badge-item.tone-neutral > span,
.badge-admin-name > i.tone-neutral { color: var(--muted); background: var(--surface-2); }

.badge-progress-list {
    display: grid;
    gap: 10px;
}

.badge-progress-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.badge-progress-item:last-child { border-bottom: 0; }
.badge-progress-item > div { display: grid; gap: 4px; }
.badge-progress-item small { color: var(--muted); }
.badge-progress-item i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.badge-progress-item i u { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

.profile-badge-strip {
    margin-top: 14px;
}

.profile-badge-strip > .site-shell {
    padding-block: 14px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.profile-badge-strip header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.profile-badge-strip header h2 { margin: 2px 0 0; font-size: 20px; }

.profile-badge-list {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.profile-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: inherit;
    background: var(--surface);
}

.profile-badge-item > span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.profile-badge-item .icon { width: 15px; height: 15px; }
.profile-badge-empty { color: var(--muted); }

.badge-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
    gap: 14px;
}

.badge-admin-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-admin-name > i {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-style: normal;
}

.badge-admin-name span { display: grid; gap: 3px; }
.badge-manual-form { display: grid; gap: 12px; }

@media (max-width: 980px) {
    .badge-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .badge-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .badge-gallery { grid-template-columns: 1fr; }
    .badge-progress-item { grid-template-columns: auto 1fr; }
    .badge-progress-item > b { grid-column: 2; }
}