.ub-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px;margin-top:30px;padding:0}.ub-badge-item{position:relative;background:var(--panel-2,#15181e);border:1px solid var(--stroke,rgba(255,255,255,0.06));border-radius:12px;padding:20px 15px;text-align:center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;overflow:hidden}.ub-badge-item:hover{transform:translateY(-5px);border-color:var(--accent,#f3c669);box-shadow:0 10px 30px rgba(0,0,0,0.3)}.ub-badge-icon{font-size:64px;margin-bottom:12px;display:inline-block;transition:transform 0.3s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3))}.ub-badge-item:hover .ub-badge-icon{transform:scale(1.1) rotate(5deg)}.ub-badge-item.locked .ub-badge-icon{opacity:0.3;filter:grayscale(100%) brightness(0.7)}.ub-badge-title{font-size:15px;font-weight:600;color:var(--text,#e8edf3);margin:0 0 6px 0;line-height:1.3}.ub-badge-item.locked .ub-badge-title{color:var(--muted,#a9b0bb)}.ub-badge-description{font-size:12px;color:var(--muted,#a9b0bb);margin:0 0 12px 0;line-height:1.4;min-height:32px}.ub-progress-container{margin-top:12px}.ub-progress-bar{width:100%;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;position:relative}.ub-progress-fill{height:100%;background:linear-gradient(90deg,var(--badge-color,#f3c669),var(--badge-color-light,#ffd966));border-radius:3px;transition:width 0.5s ease;position:relative;overflow:hidden}.ub-progress-fill::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}100%{left:100%}}.ub-progress-text{font-size:11px;color:var(--muted,#a9b0bb);margin-top:6px;font-weight:500}.ub-badge-item[data-rarity="common"]{border-color:rgba(169,176,187,0.3)}.ub-badge-item[data-rarity="common"]:hover{border-color:#a9b0bb;box-shadow:0 10px 30px rgba(169,176,187,0.2)}.ub-badge-item[data-rarity="rare"]{border-color:rgba(59,130,246,0.3)}.ub-badge-item[data-rarity="rare"]:hover{border-color:#3b82f6;box-shadow:0 10px 30px rgba(59,130,246,0.3)}.ub-badge-item[data-rarity="epic"]{border-color:rgba(147,51,234,0.3)}.ub-badge-item[data-rarity="epic"]:hover{border-color:#9333ea;box-shadow:0 10px 30px rgba(147,51,234,0.3)}.ub-badge-item[data-rarity="legendary"]{border-color:rgba(243,198,105,0.3)}.ub-badge-item[data-rarity="legendary"]:hover{border-color:#f3c669;box-shadow:0 10px 30px rgba(243,198,105,0.3)}.ub-badge-item[data-rarity="special"]{border-color:rgba(236,72,153,0.3);background:linear-gradient(135deg,rgba(236,72,153,0.05),rgba(147,51,234,0.05))}.ub-badge-item[data-rarity="special"]:hover{border-color:#ec4899;box-shadow:0 10px 30px rgba(236,72,153,0.3)}.ub-badge-item.earned{animation:badgeGlow 2s ease-in-out infinite alternate}@keyframes badgeGlow{0%{box-shadow:0 0 10px rgba(243,198,105,0.2)}100%{box-shadow:0 0 20px rgba(243,198,105,0.4)}}.ub-lock-icon{position:absolute;top:10px;right:10px;font-size:16px;opacity:0.5}.ub-earned-date{font-size:10px;color:var(--muted,#a9b0bb);margin-top:8px;font-style:italic}.ub-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.ub-filter-btn{padding:8px 16px;background:var(--panel-2,#15181e);border:1px solid var(--stroke,rgba(255,255,255,0.06));border-radius:6px;color:var(--text,#e8edf3);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s ease}.ub-filter-btn:hover{border-color:var(--accent,#f3c669);background:var(--panel-3,#1a1e26)}.ub-filter-btn.active{background:var(--accent,#f3c669);border-color:var(--accent,#f3c669);color:#000}.ub-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.ub-header-title{font-size:28px;font-weight:700;color:var(--text,#e8edf3);display:flex;align-items:center;gap:12px}.ub-stats{display:flex;gap:20px;font-size:14px;color:var(--muted,#a9b0bb)}.ub-stat{display:flex;flex-direction:column;align-items:center}.ub-stat-value{font-size:24px;font-weight:700;color:var(--accent,#f3c669)}.ub-stat-label{font-size:12px;color:var(--muted,#a9b0bb);margin-top:4px}.ub-loading{text-align:center;padding:60px 20px;color:var(--muted,#a9b0bb);font-size:16px}.ub-empty{text-align:center;padding:60px 20px;color:var(--muted,#a9b0bb)}.ub-empty-icon{font-size:80px;margin-bottom:20px;opacity:0.3}.ub-empty-text{font-size:16px;margin:0}.ub-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);z-index:99999;align-items:center;justify-content:center;backdrop-filter:blur(5px)}.ub-modal.active{display:flex}.ub-modal-content{background:var(--panel-2,#15181e);border:1px solid var(--stroke,rgba(255,255,255,0.06));border-radius:16px;padding:40px;max-width:500px;width:90%;position:relative;animation:modalSlideIn 0.3s ease}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.ub-modal-close{position:absolute;top:15px;right:15px;font-size:24px;cursor:pointer;color:var(--muted,#a9b0bb);transition:color 0.2s ease;background:none;border:none;padding:5px 10px}.ub-modal-close:hover{color:var(--text,#e8edf3)}.ub-modal-icon{font-size:100px;text-align:center;margin-bottom:20px;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.5))}.ub-modal-title{font-size:26px;font-weight:700;color:var(--text,#e8edf3);text-align:center;margin:0 0 10px 0}.ub-modal-rarity{text-align:center;font-size:13px;color:var(--accent,#f3c669);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}.ub-modal-description{font-size:15px;color:var(--muted,#a9b0bb);text-align:center;line-height:1.6;margin-bottom:20px}.ub-modal-progress{margin-top:20px}.ub-modal-earned{text-align:center;padding:15px;background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);border-radius:8px;color:#4ade80;font-weight:600;margin-top:20px}@media (max-width:768px){.ub-badges-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:15px}.ub-badge-icon{font-size:48px}.ub-badge-title{font-size:13px}.ub-badge-description{font-size:11px;min-height:auto}.ub-header{flex-direction:column;align-items:flex-start;gap:15px}.ub-header-title{font-size:24px}.ub-modal-content{padding:30px 20px}.ub-modal-icon{font-size:80px}}