: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-gold:#FFD700;--color-locked:#333333;--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-gold:#b8860b;--color-locked:#c0c0c0;}*{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:1200px;margin:0 auto;}header{margin-bottom:calc(var(--spacing-unit) * 4);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;}.progress-summary{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) * 4);display:grid;grid-template-columns:auto 1fr auto;gap:calc(var(--spacing-unit) * 4);align-items:center;}.progress-stat{text-align:center;}.progress-number{font-size:2.5rem;font-weight:700;line-height:1;margin-bottom:calc(var(--spacing-unit));}.progress-label{font-size:0.875rem;color:var(--color-text-secondary);}.progress-bar-container{height:12px;background-color:var(--color-surface-elevated);border-radius:6px;overflow:hidden;}.progress-bar{height:100%;background:linear-gradient(90deg,var(--color-gold),#FFA500);border-radius:6px;transition:width 0.5s var(--transition-timing);width:0%;}.category-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:calc(var(--spacing-unit) * 1.5);margin-bottom:calc(var(--spacing-unit) * 4);padding-bottom:calc(var(--spacing-unit) * 1);-webkit-overflow-scrolling:touch;}.category-filters::-webkit-scrollbar{height:8px;}.category-filters::-webkit-scrollbar-track{background:transparent;}.category-filters::-webkit-scrollbar-thumb{background-color:var(--color-surface-elevated);border-radius:999px;}.filter-btn{flex:0 0 auto;white-space:nowrap;background-color:var(--color-surface);border:1px solid var(--color-surface-elevated);color:var(--color-text-secondary);padding:calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5);border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:0.875rem;font-weight:500;font-family:inherit;transition:all 0.2s var(--transition-timing);}.filter-btn:hover{background-color:var(--color-surface-elevated);color:var(--color-text-primary);}.filter-btn.active{background-color:var(--color-accent);color:var(--color-background);border-color:var(--color-accent);}.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);}}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:calc(var(--spacing-unit) * 3);}.achievement-card{background-color:var(--color-surface);border:1px solid var(--color-surface-elevated);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 3);cursor:pointer;transition:all 0.3s var(--transition-timing);position:relative;overflow:hidden;}.achievement-card:hover{background-color:var(--color-surface-elevated);transform:translateY(-2px);}.achievement-card.locked{opacity:0.5;}.achievement-card.unlocked::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-gold),#FFA500);}.achievement-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:calc(var(--spacing-unit) * 2);}.achievement-icon{font-size:2.5rem;}.achievement-points-badge{background-color:var(--color-surface-elevated);padding:calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);border-radius:calc(var(--border-radius) / 3);font-size:0.75rem;font-weight:600;color:var(--color-gold);}.achievement-name{font-size:1.125rem;font-weight:600;margin-bottom:calc(var(--spacing-unit));line-height:1.3;}.achievement-desc{font-size:0.875rem;color:var(--color-text-secondary);margin-bottom:calc(var(--spacing-unit) * 2);line-height:1.5;}.achievement-progress{margin-top:calc(var(--spacing-unit) * 2);padding-top:calc(var(--spacing-unit) * 2);border-top:1px solid var(--color-surface-elevated);}.progress-text{font-size:0.8125rem;color:var(--color-text-secondary);margin-bottom:calc(var(--spacing-unit));}.mini-progress-bar{height:6px;background-color:var(--color-surface-elevated);border-radius:3px;overflow:hidden;}.mini-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-gold),#FFA500);border-radius:3px;transition:width 0.3s var(--transition-timing);}.achievement-status-badge{display:inline-block;padding:calc(var(--spacing-unit)) calc(var(--spacing-unit) * 2);border-radius:calc(var(--border-radius) / 3);font-size:0.75rem;font-weight:600;margin-top:calc(var(--spacing-unit) * 2);}.status-unlocked{background-color:rgba(255,215,0,0.1);color:var(--color-gold);}.status-locked{background-color:rgba(255,255,255,0.05);color:var(--color-text-tertiary);}.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);backdrop-filter:blur(4px);}.modal.show{display:flex;align-items:center;justify-content:center;}.modal-content{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:500px;width:90%;position:relative;text-align:center;}.modal-close{position:absolute;top:calc(var(--spacing-unit) * 2);right:calc(var(--spacing-unit) * 2);font-size:28px;font-weight:bold;color:var(--color-text-secondary);cursor:pointer;transition:color 0.2s;line-height:1;}.modal-close:hover{color:var(--color-text-primary);}.achievement-icon-large{font-size:5rem;margin-bottom:calc(var(--spacing-unit) * 3);}.achievement-detail h2{font-size:1.75rem;font-weight:600;margin-bottom:calc(var(--spacing-unit) * 2);}.achievement-description{font-size:1rem;color:var(--color-text-secondary);margin-bottom:calc(var(--spacing-unit) * 3);}.achievement-requirement{background-color:var(--color-surface-elevated);padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);border-radius:calc(var(--border-radius) / 2);margin-bottom:calc(var(--spacing-unit) * 3);font-size:1rem;color:var(--color-text-secondary);line-height:1.5;}.achievement-requirement strong{color:var(--color-gold);font-weight:600;}.points-badge{display:inline-block;background:linear-gradient(135deg,var(--color-gold),#FFA500);color:var(--color-background);padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);border-radius:calc(var(--border-radius) / 2);font-weight:700;font-size:1.125rem;margin-bottom:calc(var(--spacing-unit) * 2);}.modal-content .status-unlocked{display:inline-block;background-color:rgba(76,175,80,0.15);color:#4CAF50;padding:calc(var(--spacing-unit)) calc(var(--spacing-unit) * 2);border-radius:calc(var(--border-radius) / 3);font-weight:600;font-size:0.9rem;}.modal-content .status-locked{display:inline-block;background-color:rgba(255,255,255,0.05);color:var(--color-text-tertiary);padding:calc(var(--spacing-unit)) calc(var(--spacing-unit) * 2);border-radius:calc(var(--border-radius) / 3);font-weight:600;font-size:0.9rem;}.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;}@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;}.progress-summary{grid-template-columns:1fr;text-align:center;}.achievements-grid{grid-template-columns:1fr;}.category-filters{justify-content:flex-start;padding-left:calc(var(--spacing-unit) * 2);padding-right:calc(var(--spacing-unit) * 2);}}.achievement-notification{position:fixed;top:20px;right:-400px;background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-elevated) 100%);border:2px solid var(--color-gold);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);z-index:3000;box-shadow:0 10px 40px rgba(255,215,0,0.3);transition:right 0.5s var(--transition-timing);max-width:350px;}.achievement-notification.show{right:20px;}.notification-content{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 2);}.notification-icon{font-size:2.5rem;animation:bounce 0.6s ease infinite;}@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}.notification-text strong{display:block;color:var(--color-gold);font-size:0.875rem;margin-bottom:calc(var(--spacing-unit) * 0.5);}.notification-text p{color:var(--color-text-primary);font-size:1rem;font-weight:600;margin:0;}.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) !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,var(--color-gold),#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);}}