:root{--color-background:#0a0a0a;--color-surface:#141414;--color-surface-elevated:#1a1a1a;--color-text-primary:#ffffff;--color-text-secondary:#a0a0a0;--color-text-tertiary:#666666;--color-accent:#ffffff;--color-accent-dim:rgba(255,255,255,0.1);--spacing-unit:8px;--border-radius:16px;--transition-timing:cubic-bezier(0.4,0,0.2,1);}[data-theme="light"]{--color-background:#f0f2f5;--color-surface:#ffffff;--color-surface-elevated:#e9ecef;--color-text-primary:#1a1a1a;--color-text-secondary:#4a4a4a;--color-text-tertiary:#6b6b6b;--color-accent:#1a1a1a;--color-accent-dim:rgba(0,0,0,0.08);}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background-color:var(--color-background);color:var(--color-text-primary);min-height:100vh;min-height:100dvh;padding:calc(var(--spacing-unit) * 3);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.container{max-width:1000px;width:100%;margin:0 auto;}header{margin-bottom:calc(var(--spacing-unit) * 6);display:flex;align-items:center;gap:calc(var(--spacing-unit) * 3);}.back-button{background-color:var(--color-surface);border:1px solid var(--color-surface-elevated);color:var(--color-text-primary);padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:0.9375rem;font-family:inherit;transition:all 0.2s var(--transition-timing);}.back-button:hover{background-color:var(--color-surface-elevated);border-color:rgba(255,255,255,0.2);}h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:600;letter-spacing:-0.03em;}.loading{text-align:center;padding:calc(var(--spacing-unit) * 10) 0;}.spinner{width:50px;height:50px;border:3px solid var(--color-surface-elevated);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto calc(var(--spacing-unit) * 3);}@keyframes spin{to{transform:rotate(360deg);}}.stats-card{background-color:var(--color-surface);border:1px solid var(--color-surface-elevated);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 4);margin-bottom:calc(var(--spacing-unit) * 3);}.user-header{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 3);}.user-avatar{width:80px;height:80px;background-color:var(--color-surface-elevated);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;transition:all 0.3s var(--transition-timing);position:relative;}.user-avatar:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(255,255,255,0.2);}.user-avatar::after{content:'✏️';position:absolute;bottom:-5px;right:-5px;font-size:16px;background-color:var(--color-surface);border-radius:50%;padding:4px;opacity:0;transition:opacity 0.3s;}.user-avatar:hover::after{opacity:1;}.user-avatar img.stats-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;}.user-avatar:has(img)::after{display:none;}.user-avatar:has(img):hover::after{display:block;}.user-header .user-info{flex:1;min-width:0;display:flex;flex-direction:column;}.user-header .user-info h2{font-size:1.5rem;font-weight:600;margin-bottom:calc(var(--spacing-unit) * 0.5);}.user-header .user-info p{color:var(--color-text-secondary);font-size:0.9375rem;}.settings-btn{background-color:var(--color-surface-elevated);border:1px solid rgba(255,255,255,0.1);color:var(--color-text-primary);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:all 0.3s var(--transition-timing);}.settings-btn:hover{background-color:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);transform:rotate(45deg) scale(1.1);}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:calc(var(--spacing-unit) * 3);margin-bottom:calc(var(--spacing-unit) * 4);}.stat-box{background-color:var(--color-surface);border:1px solid var(--color-surface-elevated);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 4);text-align:center;transition:all 0.3s var(--transition-timing);}.stat-box:hover{background-color:var(--color-surface-elevated);transform:translateY(-2px);}.stat-icon{font-size:2rem;margin-bottom:calc(var(--spacing-unit) * 2);}.stat-value{font-size:2.5rem;font-weight:700;line-height:1;margin-bottom:calc(var(--spacing-unit) * 1);color:var(--color-text-primary);}[data-theme="dark"] .stat-value{background:linear-gradient(135deg,#ffffff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}[data-theme="light"] .stat-box{background-color:#ffffff;border:1px solid #d0d0d0;box-shadow:0 2px 8px rgba(0,0,0,0.08);}[data-theme="light"] .stat-box:hover{background-color:#f8f8f8;box-shadow:0 4px 12px rgba(0,0,0,0.12);}[data-theme="light"] .stat-value{color:#0a0a0a;font-weight:800;}[data-theme="light"] .stat-label{color:#2a2a2a;font-weight:600;}.stat-label{font-size:0.875rem;color:var(--color-text-secondary);font-weight:500;}.stats-section{background-color:var(--color-surface);border:1px solid var(--color-surface-elevated);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 4);margin-bottom:calc(var(--spacing-unit) * 3);}.stats-section h3{font-size:1.25rem;font-weight:600;margin-bottom:calc(var(--spacing-unit) * 3);letter-spacing:-0.02em;}.mode-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:calc(var(--spacing-unit) * 3);}.mode-stat-card{background-color:var(--color-surface-elevated);border-radius:calc(var(--border-radius) / 2);padding:calc(var(--spacing-unit) * 3);}.mode-stat-card h4{font-size:1.125rem;font-weight:600;margin-bottom:calc(var(--spacing-unit) * 2);padding-bottom:calc(var(--spacing-unit) * 2);border-bottom:1px solid rgba(255,255,255,0.1);}.mode-stat-item{display:flex;justify-content:space-between;padding:calc(var(--spacing-unit) * 1.5) 0;font-size:0.9375rem;}.mode-stat-item span{color:var(--color-text-secondary);}.mode-stat-item strong{color:var(--color-text-primary);font-weight:600;}.performance-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:calc(var(--spacing-unit) * 3);}.perf-item{background-color:var(--color-surface-elevated);border-radius:calc(var(--border-radius) / 2);padding:calc(var(--spacing-unit) * 3);text-align:center;display:flex;flex-direction:column;justify-content:space-between;min-height:120px;}.perf-label{font-size:0.875rem;color:var(--color-text-secondary);margin-bottom:calc(var(--spacing-unit) * 1.5);min-height:2.5em;display:flex;align-items:center;justify-content:center;}.perf-value{font-size:1.75rem;font-weight:700;color:var(--color-text-primary);}.achievements-preview{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing-unit) * 3);}.achievement-summary{text-align:center;}.achievement-count{font-size:3rem;font-weight:700;line-height:1;margin-bottom:calc(var(--spacing-unit) * 1);}.achievement-label{color:var(--color-text-secondary);font-size:0.9375rem;}.view-all-btn{background-color:var(--color-accent);color:var(--color-background);border:none;padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);border-radius:calc(var(--border-radius) / 2);font-size:0.9375rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.2s var(--transition-timing);}.view-all-btn:hover{opacity:0.85;transform:translateY(-1px);}[data-theme="light"] .view-all-btn{background-color:#1a1a1a;color:#ffffff;}[data-theme="light"] .view-all-btn:hover{background-color:#333333;}.collection-preview{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing-unit) * 3);}.collection-summary{text-align:center;}.collection-count{font-size:3rem;font-weight:700;line-height:1;margin-bottom:calc(var(--spacing-unit) * 1);background:linear-gradient(135deg,#4caf50,#8bc34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.collection-label{color:var(--color-text-secondary);font-size:0.9375rem;}.error-message{text-align:center;padding:calc(var(--spacing-unit) * 8);}.error-icon{font-size:4rem;margin-bottom:calc(var(--spacing-unit) * 3);}.error-message h3{font-size:1.5rem;margin-bottom:calc(var(--spacing-unit) * 2);}.error-message p{color:var(--color-text-secondary);margin-bottom:calc(var(--spacing-unit) * 4);}.error-message button{background-color:var(--color-accent);color:var(--color-background);border:none;padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);border-radius:calc(var(--border-radius) / 2);font-size:0.9375rem;font-weight:500;cursor:pointer;font-family:inherit;}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;justify-content:center;align-items:center;backdrop-filter:blur(5px);}.modal.show{display:flex;}.modal-content{background:var(--color-surface);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 3);max-width:550px;width:90%;position:relative;border:1px solid var(--color-surface-elevated);animation:modalSlideIn 0.3s ease;overflow:hidden;}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-30px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}.modal-close{position:absolute;top:15px;right:20px;font-size:28px;cursor:pointer;color:var(--color-text-secondary);transition:all 0.2s;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;}.modal-close:hover{color:var(--color-text-primary);background:var(--color-surface-elevated);}.avatar-modal-content h2{font-size:1.25rem;margin-bottom:calc(var(--spacing-unit) * 2);text-align:center;color:var(--color-text-primary);}.current-avatar-preview{text-align:center;margin-bottom:calc(var(--spacing-unit) * 2);}.avatar-preview{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:3px solid #ffd700;display:flex;align-items:center;justify-content:center;font-size:45px;margin:0 auto calc(var(--spacing-unit) * 1);box-shadow:0 6px 20px rgba(0,0,0,0.3);overflow:hidden;}.avatar-preview img{width:100%;height:100%;object-fit:cover;border-radius:50%;}.current-avatar-preview p{color:var(--color-text-secondary);font-size:0.875rem;}.avatar-section{margin-bottom:calc(var(--spacing-unit) * 2);padding:calc(var(--spacing-unit) * 2);background:var(--color-surface-elevated);border-radius:calc(var(--border-radius) / 2);}.avatar-section h3{font-size:1rem;margin-bottom:calc(var(--spacing-unit) * 1.5);color:#ffd700;}.file-input-wrapper{position:relative;overflow:hidden;display:inline-block;width:100%;}.file-input-wrapper input[type=file]{position:absolute;left:-9999px;}.file-input-label{display:block;padding:calc(var(--spacing-unit) * 2);border-radius:calc(var(--border-radius) / 2);border:2px dashed rgba(255,255,255,0.2);background:rgba(255,255,255,0.03);color:var(--color-text-secondary);font-size:0.9375rem;cursor:pointer;text-align:center;transition:all 0.3s;}.file-input-label:hover{border-color:#ffd700;background:rgba(255,255,255,0.05);color:#ffd700;}.file-input-label.has-file{color:#4caf50;border-color:#4caf50;}.upload-progress{margin-top:calc(var(--spacing-unit) * 1.5);height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;display:none;}.upload-progress.show{display:block;}.upload-progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);width:0%;transition:width 0.3s ease;}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(55px,1fr));gap:calc(var(--spacing-unit) * 1);}.avatar-option{width:55px;height:55px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,0.05);border:2px solid transparent;transition:all 0.3s ease;font-size:28px;}.avatar-option:hover{transform:scale(1.08);background:rgba(255,255,255,0.1);border-color:rgba(255,215,0,0.5);}.avatar-option.selected{border-color:#ffd700;background:rgba(255,215,0,0.15);box-shadow:0 0 15px rgba(255,215,0,0.3);}.avatar-name{font-size:8px;margin-top:2px;color:var(--color-text-tertiary);font-weight:500;}.avatar-message{padding:calc(var(--spacing-unit) * 1.5);border-radius:calc(var(--border-radius) / 2);margin-top:calc(var(--spacing-unit) * 2);display:none;font-size:0.875rem;text-align:center;animation:slideDown 0.3s ease;}.avatar-message.show{display:block;}.avatar-message.success{background:rgba(76,175,80,0.15);border:1px solid #4caf50;color:#4caf50;}.avatar-message.error{background:rgba(244,67,54,0.15);border:1px solid #f44336;color:#f44336;}@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}@media (max-width:768px){body{padding:calc(var(--spacing-unit) * 2);}header{flex-direction:column;align-items:center;}header h1{width:100%;text-align:center;padding:20px 50px;white-space:nowrap;}.back-button{display:none;}.stats-grid{grid-template-columns:repeat(2,1fr);}.stats-card,.stats-section{padding:calc(var(--spacing-unit) * 3);}.stat-box{padding:calc(var(--spacing-unit) * 3);}.stat-value{font-size:2.1rem;}.user-avatar{width:64px;height:64px;font-size:32px;}.settings-btn{width:44px;height:44px;font-size:22px;}.performance-stats{grid-template-columns:1fr;}.achievements-preview{flex-direction:column;}.collection-preview{flex-direction:column;}.modal-content{width:95%;padding:calc(var(--spacing-unit) * 3);}.avatar-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));}.avatar-option{width:60px;height:60px;font-size:30px;}.avatar-preview{width:100px;height:100px;font-size:50px;}}@media (max-width:480px){.user-header{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:calc(var(--spacing-unit) * 2);row-gap:calc(var(--spacing-unit) * 0.5);align-items:center;position:relative;padding-right:0;}.user-avatar{grid-column:1;grid-row:1 / span 2;width:64px;height:64px;font-size:32px;}.settings-btn{position:absolute;top:0;right:0;width:44px;height:44px;font-size:22px;}.user-header .user-info{grid-column:2;grid-row:1 / span 2;min-width:0;}.user-header .user-info h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}.user-header .user-info p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;}.stats-grid{grid-template-columns:1fr;}.user-info h2{font-size:1.25rem;}.user-info p{font-size:0.875rem;}}body.high-contrast{filter:contrast(1.2);}body.high-contrast *{border-color:rgba(255,255,255,0.3) !important;}body.no-animations,body.no-animations *{animation:none !important;transition:none !important;}body.no-animations .container,body.no-animations [style*="opacity"],body.no-animations .stats-card,body.no-animations .modal-content{opacity:1 !important;transform:none !important;}body.performance-mode *{box-shadow:none !important;backdrop-filter:none !important;text-shadow:none !important;}body.performance-mode::before,body.performance-mode::after{display:none !important;}.login-required-screen{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:calc(var(--spacing-unit) * 3);}.login-card{background-color:var(--color-surface);border:1px solid var(--color-surface-elevated);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 5);max-width:450px;width:100%;text-align:center;}.login-icon{font-size:4rem;margin-bottom:calc(var(--spacing-unit) * 3);}.login-card h2{font-size:1.75rem;font-weight:600;margin-bottom:calc(var(--spacing-unit) * 2);color:var(--color-text-primary);}.login-card p{color:var(--color-text-secondary);font-size:1rem;line-height:1.6;margin-bottom:calc(var(--spacing-unit) * 2);}.login-subtitle{color:var(--color-gold,#FFD700) !important;font-weight:500;}.login-buttons{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 2);margin:calc(var(--spacing-unit) * 4) 0;}.login-btn{padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);border-radius:calc(var(--border-radius) / 2);font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all 0.2s var(--transition-timing);border:none;}.login-btn.primary{background:linear-gradient(135deg,#FFD700,#FFA500);color:#000;}.login-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,215,0,0.3);}.login-btn.secondary{background-color:var(--color-surface-elevated);color:var(--color-text-secondary);border:1px solid rgba(255,255,255,0.1);}.login-btn.secondary:hover{background-color:rgba(255,255,255,0.1);color:var(--color-text-primary);}[data-theme="light"] .login-btn.secondary{background-color:#f0f0f0;border:1px solid #c8c8c8;color:#2a2a2a;}[data-theme="light"] .login-btn.secondary:hover{background-color:#e0e0e0;color:#1a1a1a;}.login-features{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--spacing-unit) * 1.5);margin-top:calc(var(--spacing-unit) * 3);padding-top:calc(var(--spacing-unit) * 3);border-top:1px solid var(--color-surface-elevated);}.feature-item{font-size:0.875rem;color:var(--color-text-secondary);text-align:left;padding:calc(var(--spacing-unit));background-color:rgba(255,255,255,0.03);border-radius:calc(var(--border-radius) / 3);}@media (max-width:480px){.login-features{grid-template-columns:1fr;}.login-card{padding:calc(var(--spacing-unit) * 3);}}