:root{font-family:var(--font-sans);background:var(--bg);color:var(--text)}*{box-sizing:border-box}.container{max-width:1080px;margin:0 auto;padding:20px}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.btn{border:0;cursor:pointer;background:var(--brand-primary);color:var(--on-primary);padding:10px 14px;border-radius:calc(var(--radius) - 4px);font-weight:800;text-decoration:none;display:inline-block}.btn.secondary{background:var(--brand-secondary)}.btn:disabled{opacity:.5;cursor:not-allowed}.row{display:flex;gap:12px;align-items:center}.nav{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#0000000f}.hero{display:flex;gap:18px;align-items:center;justify-content:space-between}.heroimg{width:360px;max-width:45vw;height:220px;background:var(--hero-illustration) center/cover no-repeat;border-radius:var(--radius);box-shadow:var(--shadow)}.tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:2px solid rgba(0,0,0,.1);padding-bottom:8px}.tab{padding:8px 16px;cursor:pointer;border-radius:var(--radius) var(--radius) 0 0;background:transparent;border:none;font-weight:600;color:var(--text);opacity:.6;transition:all .2s}.tab:hover{opacity:.8}.tab.active{opacity:1;background:var(--brand-primary);color:var(--on-primary)}.progress-bar{width:100%;height:12px;background:#0000001a;border-radius:6px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));transition:width .3s ease}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:16px 0}.stat-item{text-align:center;padding:12px;background:#00000008;border-radius:var(--radius)}.stat-value{font-size:24px;font-weight:900;color:var(--brand-primary)}.stat-label{font-size:12px;opacity:.7;margin-top:4px}.task-list{display:flex;flex-direction:column;gap:12px}.task-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .2s}.task-item:hover{transform:translateY(-2px)}.task-item.completed{opacity:.6}.task-info{flex:1}.task-title{font-weight:700;margin-bottom:4px}.task-desc{font-size:13px;opacity:.7}.task-rewards{display:flex;gap:8px;margin-top:8px}.task-reward{font-size:12px;padding:4px 8px;background:#0000000d;border-radius:4px}.task-category{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--brand-secondary);color:var(--on-primary);margin-bottom:4px;display:inline-block}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.achievement-item{padding:16px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;transition:transform .2s}.achievement-item:hover{transform:translateY(-2px)}.achievement-item.locked{opacity:.4;filter:grayscale(1)}.achievement-icon{font-size:36px;margin-bottom:8px}.achievement-name{font-weight:700;margin-bottom:4px}.achievement-desc{font-size:12px;opacity:.7}.achievement-reward{font-size:11px;margin-top:8px;color:var(--brand-primary)}.leaderboard{display:flex;flex-direction:column;gap:8px}.leaderboard-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}.leaderboard-rank{font-size:20px;font-weight:900;width:40px;text-align:center}.leaderboard-rank.gold{color:gold}.leaderboard-rank.silver{color:silver}.leaderboard-rank.bronze{color:#cd7f32}.leaderboard-info{flex:1}.leaderboard-name{font-weight:700}.leaderboard-stats{font-size:12px;opacity:.7}.leaderboard-level{padding:4px 12px;background:var(--brand-primary);color:var(--on-primary);border-radius:999px;font-weight:700}.toast{position:fixed;bottom:20px;right:20px;padding:16px 24px;background:var(--brand-primary);color:var(--on-primary);border-radius:var(--radius);box-shadow:0 4px 12px #0003;animation:slideIn .3s ease;z-index:1000}.toast.success{background:#22c55e}.toast.achievement{background:#eab308}.toast.special{background:linear-gradient(135deg,#ff69b4,gold);animation:slideIn .3s ease,pulse 1s infinite}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}.confetti{position:absolute;width:10px;height:10px;top:-10px;animation:confetti-fall 4s linear forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.special-day-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9998;animation:fadeIn .3s ease}.special-day-content{background:#fff;border-radius:20px;padding:32px;text-align:center;max-width:400px;width:90%;animation:bounceIn .5s ease;box-shadow:0 20px 60px #0000004d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.special-day-banner{background:linear-gradient(135deg,#ff69b4,gold);color:#fff;padding:16px;border-radius:var(--radius);margin-bottom:16px;text-align:center;animation:shimmer 2s infinite;position:relative;overflow:hidden}.special-day-banner:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);animation:shimmer-move 3s infinite}@keyframes shimmer-move{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}.campaign-banner{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:16px 20px;border-radius:var(--radius);margin-bottom:16px;text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 15px #f59e0b4d}.campaign-banner:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);animation:shimmer-move 2s infinite}.campaign-banner-content{position:relative;z-index:1}.campaign-title{font-size:18px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px}.campaign-multiplier{font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2)}.campaign-countdown{display:flex;gap:12px;justify-content:center;margin-top:12px}.campaign-time-unit{background:#0003;border-radius:8px;padding:8px 12px;min-width:60px}.campaign-time-value{font-size:20px;font-weight:900}.campaign-time-label{font-size:10px;opacity:.8}.campaign-actions{display:flex;gap:8px;justify-content:center;margin-top:8px}.profile-header{display:flex;gap:20px;align-items:center;margin-bottom:20px}.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--brand-primary);display:flex;align-items:center;justify-content:center;color:var(--on-primary);font-size:32px;font-weight:900}.profile-info{flex:1}.profile-name{font-size:24px;font-weight:900;margin-bottom:4px}.profile-email{opacity:.7}.profile-level{display:flex;align-items:center;gap:12px;margin-top:8px}@media (max-width: 768px){.hero{flex-direction:column}.heroimg{width:100%;max-width:none;height:180px}.profile-header{flex-direction:column;text-align:center}.stats-grid{grid-template-columns:repeat(2,1fr)}}.levelup-overlay{background:radial-gradient(ellipse at center,#6366f14d,#000000e6)}.levelup-modal{text-align:center;min-width:320px;position:relative;overflow:visible}.egg-hatching-container{position:relative;height:120px;margin-bottom:8px}.hatching-particles{position:absolute;width:100%;height:100%;overflow:hidden}.hatching-particles .particle{position:absolute;width:8px;height:8px;background:#fbbf24;border-radius:50%;bottom:0;animation:particle-float 3s ease-in-out infinite}@keyframes particle-float{0%{transform:translateY(0) scale(0);opacity:0}20%{opacity:1;transform:translateY(-20px) scale(1)}to{transform:translateY(-100px) scale(0);opacity:0}}.egg-animation{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:64px;animation:egg-wobble .5s ease-in-out infinite alternate}.egg-animation.level-1,.egg-animation.level-2{animation:egg-warm 2s ease-in-out infinite}.egg-animation.level-3,.egg-animation.level-4{animation:egg-shake .3s ease-in-out infinite}.egg-animation.level-5,.egg-animation.level-6{animation:egg-crack .4s ease-in-out infinite}.egg-animation.level-7,.egg-animation.level-8{animation:egg-emerge .5s ease-in-out infinite alternate}.egg-animation.level-9{animation:egg-almost .3s ease-in-out infinite}@keyframes egg-warm{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.1)}}@keyframes egg-shake{0%,to{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-50%) rotate(3deg)}}@keyframes egg-crack{0%,to{transform:translate(-50%,-50%) rotate(-5deg) scale(1.02)}50%{transform:translate(-50%,-50%) rotate(5deg) scale(.98)}}@keyframes egg-emerge{0%{transform:translate(-50%,-50%) translateY(0)}to{transform:translate(-50%,-50%) translateY(-5px)}}@keyframes egg-almost{0%,to{transform:translate(-50%,-50%) scale(1) rotate(-2deg)}50%{transform:translate(-50%,-50%) scale(1.1) rotate(2deg)}}@keyframes egg-wobble{0%{transform:translate(-50%,-50%) rotate(-5deg)}to{transform:translate(-50%,-50%) rotate(5deg)}}.egg-shell-top{transition:all .5s ease;display:inline-block}.egg-chick{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);transition:all .5s ease}.crack-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px}.crack-line{position:absolute;left:50%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#fbbf24,transparent);animation:crack-glow 1s ease-in-out infinite alternate}@keyframes crack-glow{0%{opacity:.5;box-shadow:0 0 5px #fbbf24}to{opacity:1;box-shadow:0 0 15px #fbbf24}}.hatching-complete{position:relative;height:140px;margin-bottom:8px}.hatching-celebration{position:absolute;width:100%;height:100%;overflow:hidden}.celebration-particle{position:absolute;width:12px;height:12px;border-radius:50%;top:50%;animation:celebration-burst 1.5s ease-out infinite}@keyframes celebration-burst{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-150px) translate(var(--x, 0)) scale(0);opacity:0}}.celebration-particle:nth-child(odd){--x: -50px}.celebration-particle:nth-child(2n){--x: 50px}.celebration-particle:nth-child(3n){--x: 0}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(10deg)}}