:root{--primary-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);--secondary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);--accent-gradient: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);--success-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);--danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);--glass-bg: rgba(15, 23, 42, .8);--glass-border: rgba(148, 163, 184, .2);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .3);--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--text-accent: #f59e0b;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--bg-card: rgba(30, 41, 59, .9);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-xl: 0 16px 64px rgba(0, 0, 0, .6);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 9999px}.profile-container{min-height:100vh;background:var(--bg-primary);position:relative;overflow-x:hidden}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.scrollbar-thin::-webkit-scrollbar{width:8px}.scrollbar-thin::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.scrollbar-thin::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px;transition:background-color .2s ease}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background:#ffffff80}.scrollbar-thin::-webkit-scrollbar-thumb:active{background:#fff9}.scrollbar-thin{overflow-y:scroll!important}.scrollbar-thin{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.profile-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:radial-gradient(circle at 20% 80%,rgba(59,130,246,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(139,92,246,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(236,72,153,.05) 0%,transparent 50%);animation:backgroundShift 20s ease-in-out infinite}@keyframes backgroundShift{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-20px,-20px) scale(1.1)}66%{transform:translate(20px,-10px) scale(.9)}}.profile-particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.profile-particle{position:absolute;width:4px;height:4px;background:var(--text-accent);border-radius:50%;opacity:.6;animation:floatParticle 15s linear infinite}@keyframes floatParticle{0%{transform:translateY(100vh) translate(0);opacity:0}10%{opacity:.6}90%{opacity:.6}to{transform:translateY(-100vh) translate(100px);opacity:0}}.profile-main-content{max-width:1400px;margin:-64px auto 0;padding:0 20px;position:relative;z-index:20}.profile-grid{display:grid;gap:24px;align-items:start}@media(min-width:1024px){.profile-grid{grid-template-columns:1fr 1fr 1fr}}@media(min-width:768px)and (max-width:1023px){.profile-grid{grid-template-columns:1fr 1fr}}@media(max-width:767px){.profile-grid{grid-template-columns:1fr}}.profile-left-column{display:flex;flex-direction:column;gap:24px}@media(min-width:1024px){.profile-left-column{grid-column:span 2}}.profile-right-column{display:flex;flex-direction:column;gap:24px}.profile-cards-row{display:grid;gap:24px;margin-bottom:24px}@media(min-width:768px){.profile-cards-row{grid-template-columns:1fr 1fr}}@media(max-width:767px){.profile-cards-row{grid-template-columns:1fr}}.profile-stat-card,.profile-theme-card,.profile-skill-card,.profile-stats-card{height:100%;min-height:180px;display:flex;flex-direction:column}.profile-stat-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff;border-radius:20px;padding:24px;position:relative;overflow:hidden;box-shadow:0 15px 35px #0003;transition:all .3s ease}.profile-stat-card .text-yellow-600,.profile-stat-card .dark\:text-yellow-400{color:#fff}.profile-stat-card .bg-yellow-100{background-color:#fff3}.profile-stat-card .text-yellow-700,.profile-stat-card .dark\:text-yellow-300{color:#fff}.profile-stat-card .text-yellow-600,.profile-stat-card .dark\:text-yellow-400{color:#fffc}.profile-theme-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff;border-radius:20px;padding:24px;box-shadow:0 15px 35px #0003;transition:all .3s ease}.profile-theme-card .text-purple-500{color:#fff}.profile-theme-card .bg-purple-100{background-color:#fff3}.profile-theme-card .text-gray-700,.profile-theme-card .dark\:text-gray-300,.profile-theme-card .text-purple-600,.profile-theme-card .dark\:text-purple-400{color:#fff}.profile-theme-card .text-gray-600,.profile-theme-card .dark\:text-gray-400{color:#fffc}.profile-skill-card,.profile-stats-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff;border-radius:20px;padding:24px;position:relative;overflow:hidden;box-shadow:0 15px 35px #1e293b66}.profile-hero{position:relative;height:500px;background:var(--primary-gradient);overflow:hidden;z-index:10}.profile-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(15,23,42,.4) 0%,rgba(15,23,42,.2) 50%,transparent 100%);z-index:1}.profile-hero-pattern{position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 80%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,255,255,.05) 0%,transparent 50%);animation:patternMove 30s linear infinite;z-index:2}@keyframes patternMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.profile-avatar{position:relative;width:160px;height:160px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:3px solid var(--glass-border);border-radius:50%;padding:4px;box-shadow:var(--shadow-lg);animation:avatarGlow 3s ease-in-out infinite alternate;z-index:3}@keyframes avatarGlow{0%{box-shadow:var(--shadow-lg),0 0 30px #f59e0b4d}to{box-shadow:var(--shadow-lg),0 0 50px #8b5cf680}}.profile-avatar-inner{width:100%;height:100%;background:var(--secondary-gradient);border-radius:50%;overflow:hidden;position:relative;z-index:4}.profile-avatar-inner img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.profile-avatar:hover .profile-avatar-inner img{transform:scale(1.05)}.profile-avatar-ring{position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;background:conic-gradient(from 0deg,#f59e0b,#f97316,#ef4444,#8b5cf6,#3b82f6,#10b981,#f59e0b);border-radius:50%;filter:blur(2px);opacity:.8;animation:rotate 4s linear infinite;z-index:-1}.avatar-frame{box-sizing:border-box;position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 6px #ffd7000f;overflow:visible;background-position:center;background-repeat:no-repeat;-webkit-mask:radial-gradient(circle,transparent 70%,black 71%);mask:radial-gradient(circle,transparent 70%,black 71%);box-shadow:0 6px 18px #00000040,0 0 0 6px #ffd7000f}.avatar-frame:after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;background:transparent;box-shadow:inset 0 0 8px #00000040;pointer-events:none}.avatar-frame--sm{top:-4px;left:-4px;right:-4px;bottom:-4px}.avatar-frame--lg{top:-8px;left:-8px;right:-8px;bottom:-8px}.leaderboard-avatar-container{position:relative}.leaderboard-avatar-img{position:relative;z-index:4;display:block}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.profile-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-gradient);opacity:0;transition:opacity .3s ease}.profile-card:hover:before{opacity:1}.profile-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--text-accent)}.profile-card:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(245,158,11,.1) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.profile-card:hover:after{opacity:1}.profile-stat-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff}.profile-stat-card:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-30%,-30%) rotate(180deg)}}.profile-stat-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 20px 40px #0000004d}.profile-theme-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff}.profile-theme-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #0003}.profile-skill-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff}.profile-skill-card:before{content:"";position:absolute;top:-100%;left:-100%;width:300%;height:300%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:pulse 4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(180deg)}}.profile-stats-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff}.profile-achievement-card{background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);color:#fff;border-radius:24px;padding:32px;box-shadow:0 20px 40px #1e293b66;transition:all .3s ease;position:relative;overflow:hidden}.profile-achievement-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);transform:translate(-100%);transition:transform .6s ease}.profile-achievement-card:hover:before{transform:translate(100%)}.profile-achievement-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 30px 60px #1e293b80}.profile-badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:24px;padding:20px 0}.profile-badge-grid>div{text-align:center;transition:all .3s ease}.profile-badge-grid>div:hover{transform:translateY(-8px) rotate(5deg)}.profile-progress-bar{position:relative;height:12px;background:#fff3;border-radius:100px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.profile-progress-fill{position:absolute;top:0;left:0;height:100%;background:var(--accent-gradient);border-radius:100px;transition:all 1s cubic-bezier(.4,0,.2,1);box-shadow:0 0 20px #4facfe80;position:relative;overflow:hidden}.profile-progress-fill:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShine 2s ease-in-out infinite}@keyframes progressShine{0%{left:-100%}to{left:100%}}.profile-title{font-size:3rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;animation:titleGlow 3s ease-in-out infinite alternate}@keyframes titleGlow{0%{filter:brightness(1)}to{filter:brightness(1.2)}}.profile-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:8px}.profile-description{font-size:1.125rem;line-height:1.6;color:var(--text-primary);opacity:.9}.profile-button{background:var(--primary-gradient);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #667eea66}.profile-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.profile-button:hover:before{left:100%}.profile-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea99}.profile-social-link{display:flex;align-items:center;gap:12px;padding:16px;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:16px;color:var(--text-primary);text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden}.profile-social-link:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:var(--primary-gradient);opacity:.1;transition:width .3s ease}.profile-social-link:hover:before{width:100%}.profile-social-link:hover{transform:translate(8px);box-shadow:0 8px 25px #0000001a}@media(max-width:768px){.profile-hero{height:400px}.profile-avatar{width:150px;height:150px}.profile-title{font-size:2rem}.profile-card{padding:20px;margin:16px}.profile-badge-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:16px}}@media(max-width:480px){.profile-hero{height:300px}.profile-avatar{width:120px;height:120px}.profile-title{font-size:1.5rem}.profile-card{padding:16px;margin:12px}.profile-badge-grid{grid-template-columns:repeat(3,1fr);gap:12px}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.animate-slide-up{animation:slideInUp .6s ease-out forwards}.animate-slide-left{animation:slideInLeft .6s ease-out forwards}.animate-slide-right{animation:slideInRight .6s ease-out forwards}.animate-fade-in{animation:fadeIn .6s ease-out forwards}.animate-scale-in{animation:scaleIn .6s ease-out forwards}.animation-delay-100{animation-delay:.1s}.animation-delay-200{animation-delay:.2s}.animation-delay-300{animation-delay:.3s}.animation-delay-400{animation-delay:.4s}.animation-delay-500{animation-delay:.5s}.animation-delay-600{animation-delay:.6s}.animation-delay-700{animation-delay:.7s}.animation-delay-800{animation-delay:.8s}.profile-loading{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--primary-gradient)}.profile-loading-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 30px #ffffff80}.profile-theme-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-top:20px}.profile-theme-option{padding:16px;border-radius:12px;border:2px solid transparent;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:all .3s ease;text-align:center}.profile-theme-option:hover{border-color:var(--primary-gradient);transform:translateY(-4px)}.profile-theme-option.active{border-color:#667eea;background:#667eea1a}.profile-level-badge{position:absolute;top:-10px;right:-10px;background:linear-gradient(135deg,gold,#ffb347);color:#333;padding:8px 16px;border-radius:20px;font-weight:700;font-size:.875rem;box-shadow:0 4px 15px #ffd70066;animation:levelPulse 2s ease-in-out infinite}@keyframes levelPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.profile-online-status{position:absolute;bottom:10px;right:10px;width:24px;height:24px;background:#4ade80;border:3px solid white;border-radius:50%;box-shadow:0 0 15px #4ade8099;animation:onlinePulse 2s ease-in-out infinite}@keyframes onlinePulse{0%,to{transform:scale(1);box-shadow:0 0 15px #4ade8099}50%{transform:scale(1.1);box-shadow:0 0 25px #4ade80cc}}.profile-crown{position:absolute;top:-20px;left:50%;transform:translate(-50%);color:gold;font-size:2rem;filter:drop-shadow(0 0 10px rgba(255,215,0,.6));animation:crownFloat 3s ease-in-out infinite}@keyframes crownFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.profile-category-progress{margin-bottom:24px}.profile-category-header{display:flex;align-items:center;gap:16px;margin-bottom:12px}.profile-category-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--primary-gradient);color:#fff;box-shadow:0 4px 15px #667eea4d;transition:all .3s ease}.profile-category-icon:hover{transform:scale(1.1) rotate(5deg)}.profile-category-info{flex:1}.profile-category-name{font-weight:600;color:var(--text-primary);margin-bottom:4px}.profile-category-stats{font-size:.875rem;color:var(--text-secondary)}.text-gradient{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-effect{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border)}.hover-lift{transition:transform .3s ease}.hover-lift:hover{transform:translateY(-8px)}html{scroll-behavior:smooth}::-webkit-scrollbar-track{background:#ffffff1a}::-webkit-scrollbar-thumb{background:var(--primary-gradient);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--secondary-gradient)}@keyframes tilt{0%,50%,to{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #9333ea80}50%{box-shadow:0 0 40px #9333eacc}}.animation-delay-1000{animation-delay:1s}.glass{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.glass-dark{background:#0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.hover-lift{transition:all .3s cubic-bezier(.4,0,.2,1)}.hover-lift:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0000001a}.shadow-modern{box-shadow:0 10px 30px #0000001a;transition:box-shadow .3s ease}.shadow-modern:hover{box-shadow:0 20px 60px #00000026}.transition-all-smooth{transition:all .4s cubic-bezier(.4,0,.2,1)}@tailwind base;@tailwind components;@tailwind utilities;html[dir=rtl]{direction:rtl}html[dir=ltr]{direction:ltr}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1)}.dark ::-webkit-scrollbar-track{background:#2d3748}.dark ::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#4c51bf,#553c9a)}.dark ::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1)}@keyframes tilt{0%,50%,to{transform:rotate(0)}25%{transform:rotate(.5deg)}75%{transform:rotate(-.5deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #8b5cf680}50%{box-shadow:0 0 40px #8b5cf6cc}}.animation-delay-150{animation-delay:.15s}.animation-delay-2000{animation-delay:2s}.animation-delay-4000{animation-delay:4s}.animate-tilt{animation:tilt 4s ease-in-out infinite}.animate-float{animation:float 3s ease-in-out infinite}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.glassmorphism{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.glassmorphism-dark{background:#0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.gradient-text{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.shadow-glow{box-shadow:0 0 30px #8b5cf64d}.shadow-glow-lg{box-shadow:0 0 50px #8b5cf666}::selection{background:#8b5cf64d}.focus-ring:focus{outline:none;ring:2px;ring-color:#8b5cf6;ring-offset:2px}.spinner{border:4px solid rgba(139,92,246,.2);border-top:4px solid #8b5cf6;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.glassmorphism{background:#ffffff0d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.glassmorphism-dark{background:#0000000d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}@media print{.no-print{display:none!important}}