/* === GAMIFICATION SYSTEM === */
.xp-bar-container{position:fixed;top:0;left:0;right:0;height:4px;z-index:10000;background:rgba(26,26,26,0.3)}
.xp-bar{height:100%;background:linear-gradient(90deg,#c41e1e,#ff4444);width:0%;transition:width 0.8s cubic-bezier(.4,0,.2,1)}
.gamification-panel{position:fixed;bottom:20px;right:20px;z-index:9999;font-family:'Inter',sans-serif}
.gp-toggle{width:52px;height:52px;border-radius:50%;background:rgba(196,30,30,0.95);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(196,30,30,0.4);backdrop-filter:blur(10px);transition:transform 0.2s}
.gp-toggle:hover{transform:scale(1.1)}
.gp-toggle svg{width:24px;height:24px;fill:white}
.gp-badge-notify{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#ff4444;border:2px solid white;display:none;animation:gpPulse 1s infinite}
@keyframes gpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.gp-card{position:absolute;bottom:64px;right:0;width:300px;background:rgba(26,26,26,0.95);backdrop-filter:blur(20px);border-radius:16px;border:1px solid rgba(196,30,30,0.3);padding:20px;display:none;animation:gpSlide 0.3s ease}
.gp-card.active{display:block}
@keyframes gpSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.gp-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.gp-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#c41e1e,#8c1414);display:flex;align-items:center;justify-content:center;font-size:20px;color:white;font-weight:700}
.gp-info{flex:1}
.gp-level{font-size:13px;color:#c41e1e;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.gp-name{font-size:11px;color:rgba(255,255,255,0.5);margin-top:2px}
.gp-xp-track{height:6px;background:rgba(255,255,255,0.1);border-radius:3px;margin-top:4px;overflow:hidden}
.gp-xp-fill{height:100%;background:linear-gradient(90deg,#c41e1e,#ff4444);border-radius:3px;transition:width 0.6s ease}
.gp-xp-text{font-size:10px;color:rgba(255,255,255,0.4);margin-top:4px;text-align:right}
.gp-section{margin-top:14px}
.gp-section-title{font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.gp-badges{display:flex;flex-wrap:wrap;gap:6px}
.gp-bdg{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);position:relative;cursor:default;transition:transform 0.15s}
.gp-bdg:hover{transform:scale(1.15)}
.gp-bdg.locked{opacity:0.3;filter:grayscale(1)}
.gp-bdg-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1a1a1a;color:white;font-size:10px;padding:4px 8px;border-radius:6px;white-space:nowrap;display:none;pointer-events:none;border:1px solid rgba(196,30,30,0.3)}
.gp-bdg:hover .gp-bdg-tip{display:block}
.gp-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.gp-stat{background:rgba(255,255,255,0.04);border-radius:8px;padding:8px 10px;text-align:center}
.gp-stat-val{font-size:18px;font-weight:700;color:white}
.gp-stat-lbl{font-size:9px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px}
.gp-toast{position:fixed;bottom:90px;right:20px;background:rgba(196,30,30,0.95);color:white;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;z-index:10001;display:none;animation:gpToast 0.4s ease;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(196,30,30,0.4)}
@keyframes gpToast{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}