@keyframes badgePop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes legendaryPulse{0%,to{box-shadow:0 0 0 2px gold,0 2px 10px rgba(255,215,0,.3)}50%{box-shadow:0 0 0 3px gold,0 2px 16px rgba(255,215,0,.55)}}.badge-avatar-container{position:relative;display:inline-block}.badge-ring{position:absolute;inset:-14px;pointer-events:none}.badge-ring-item{position:absolute;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--white);box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:auto;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);z-index:2}.badge-ring-item:hover{transform:scale(1.25);box-shadow:0 4px 14px rgba(0,0,0,.28);z-index:10}.badge-ring-item svg{width:16px;height:16px}html.dark .badge-ring-item{border-color:#2c2c2e;box-shadow:0 2px 8px rgba(0,0,0,.45)}.badges-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.75rem}.badge-card,.badge-icon-lg{display:flex;align-items:center}.badge-card{flex-direction:column;gap:.35rem;padding:.6rem .35rem;border-radius:var(--border-radius);background:var(--bg-secondary);border:1px solid transparent;cursor:pointer;transition:all var(--transition-fast);text-align:center}.badge-card:hover{background:var(--white);border-color:var(--gray-200);box-shadow:var(--shadow-base);transform:translateY(-2px)}html.dark .badge-card{background:#1a1a1c}html.dark .badge-card:hover{background:#28282a;border-color:#3a3a3c}.badge-card.locked{opacity:.35;filter:grayscale(1)}.badge-card.locked:hover{opacity:.55;filter:grayscale(.5)}.badge-icon-lg{width:42px;height:42px;border-radius:50%;justify-content:center;flex-shrink:0}.badge-icon-lg svg{width:22px;height:22px}.badge-label{font-size:.65rem;font-weight:600;line-height:1.2;color:var(--gray-700);max-width:100%;overflow:hidden;text-overflow:ellipsis}html.dark .badge-label{color:var(--gray-300)}.badge-tooltip{position:fixed;max-width:220px;padding:.6rem .85rem;border-radius:var(--border-radius);background:var(--gray-900);color:var(--white);font-size:.75rem;line-height:1.4;box-shadow:var(--shadow-xl);z-index:9999;pointer-events:none;opacity:0;transition:opacity 150ms ease}.badge-tooltip.visible{opacity:1}.badge-tooltip .tooltip-name{font-weight:700;margin-bottom:2px;font-size:.8rem}.badge-tooltip .tooltip-date{font-size:.65rem;opacity:.7;margin-top:3px}html.dark .badge-tooltip{background:#f5f5f5;color:#070709}.badge-bronze{background:linear-gradient(135deg,#cd7f32,sienna);color:#fff}.badge-silver{background:linear-gradient(135deg,silver,#8e8e93);color:#fff}.badge-gold{background:linear-gradient(135deg,gold,#daa520);color:#312e0b}.badge-emerald{background:linear-gradient(135deg,#15803d,#0b4d26);color:#fff}.badge-legendary{background:linear-gradient(135deg,#070709,#2c2c2e);color:gold;box-shadow:0 0 0 2px gold,0 2px 10px rgba(255,215,0,.3)}html.dark .badge-legendary{box-shadow:0 0 0 2px gold,0 2px 14px rgba(255,215,0,.45)}.badge-orange{background:linear-gradient(135deg,#f97316,#c2410c);color:#fff}.badge-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.badge-purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff}.badge-green{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff}.badge-steel{background:linear-gradient(135deg,#64748b,#334155);color:#fff}.badge-teal{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff}.badge-pink{background:linear-gradient(135deg,#ec4899,#be185d);color:#fff}.badge-amber{background:linear-gradient(135deg,#f59e0b,#b45309);color:#fff}.badges-section-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);margin-bottom:.5rem}.badges-empty,html.dark .badges-section-title{color:var(--gray-400)}.badges-empty{font-size:.78rem;padding:.5rem 0}.badge-ring-item{animation:badgePop .4s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}.badge-ring-item:nth-child(1){animation-delay:.1s}.badge-ring-item:nth-child(2){animation-delay:.18s}.badge-ring-item:nth-child(3){animation-delay:.26s}.badge-ring-item:nth-child(4){animation-delay:.34s}.badge-ring-item:nth-child(5){animation-delay:.42s}.badge-ring-item:nth-child(6){animation-delay:.5s}.badge-ring-item:nth-child(7){animation-delay:.58s}.badge-ring-item:nth-child(8){animation-delay:.66s}.badge-ring-item.badge-legendary{animation:badgePop .4s cubic-bezier(.34,1.56,.64,1) forwards,legendaryPulse 2.5s ease-in-out infinite 1s}.badges-accordion{border:1px solid var(--gray-200);border-radius:var(--border-radius);margin-bottom:.5rem;overflow:hidden;transition:box-shadow var(--transition-fast)}.badges-accordion:last-child{margin-bottom:0}.badges-accordion[open]{box-shadow:0 2px 8px rgba(0,0,0,.07)}html.dark .badges-accordion{border-color:#3a3a3c}html.dark .badges-accordion[open]{box-shadow:0 2px 8px rgba(0,0,0,.3)}.badges-accordion-summary{display:flex;align-items:center;justify-content:space-between;padding:.55rem .75rem;cursor:pointer;list-style:none;user-select:none;background:var(--bg-secondary);transition:background var(--transition-fast)}.badges-accordion-summary::-webkit-details-marker{display:none}.badges-accordion-summary:hover{background:var(--gray-100)}html.dark .badges-accordion-summary{background:#1a1a1c}html.dark .badges-accordion-summary:hover{background:#242426}.badges-accordion-title{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-700)}html.dark .badges-accordion-title{color:var(--gray-300)}.badges-cat-icon{width:15px;height:15px;flex-shrink:0;opacity:.85}.badges-accordion-meta{display:flex;align-items:center;gap:.45rem}.badges-accordion-count{font-size:.7rem;font-weight:600;color:var(--gray-400);background:var(--gray-100);padding:.1rem .42rem;border-radius:999px;line-height:1.5}.badges-accordion-count.has-earned{background:var(--primary-50, #fef3c7);color:var(--primary, #d97706)}html.dark .badges-accordion-count{background:#28282a;color:var(--gray-400)}html.dark .badges-accordion-count.has-earned{background:rgba(217,119,6,.18);color:#fbbf24}.badges-accordion-chevron{width:14px;height:14px;color:var(--gray-400);flex-shrink:0;transition:transform 220ms ease}.badges-accordion[open] .badges-accordion-chevron{transform:rotate(180deg)}.badges-accordion-body{padding:.65rem .6rem .75rem;border-top:1px solid var(--gray-200)}html.dark .badges-accordion-body{border-top-color:#3a3a3c}