@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap";:root{--color-primary:#4f86f7;--color-primary-light:#a8c8ff;--color-primary-dark:#1a3a8f;--color-coral:#ff6b6b;--color-mint:#4ecdc4;--color-gold:#ffd93d;--bg-dark:#0d1b2a;--bg-card:#1a2b3c;--bg-card-hover:#243548;--bg-nav:#0a1520;--text-primary:#f0f4ff;--text-secondary:#8ba0b5;--text-muted:#4a6278;--samoyed-white:#fff;--samoyed-pink:#ffb6c1;--samoyed-cream:#fff8f0;--shadow-card:0 4px 24px #0006;--shadow-glow-blue:0 0 20px #4f86f766;--shadow-glow-coral:0 0 20px #ff6b6b66;--shadow-glow-gold:0 0 20px #ffd93d66;--border-radius:16px;--border-radius-sm:10px;--border-radius-lg:24px;--transition:.3s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-card)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:3px}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{background:var(--bg-dark);width:100%;max-width:480px;min-height:100vh;margin:0 auto;position:relative}.btn{border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 24px;font-family:Outfit,sans-serif;font-size:16px;font-weight:600;text-decoration:none;display:flex}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg, var(--color-primary), #6fa3ff);color:#fff;box-shadow:var(--shadow-glow-blue)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px #4f86f799}.btn-coral{background:linear-gradient(135deg, var(--color-coral), #ff8e8e);color:#fff;box-shadow:var(--shadow-glow-coral)}.btn-coral:hover{transform:translateY(-2px);box-shadow:0 0 30px #ff6b6b99}.btn-gold{background:linear-gradient(135deg, #e6b800, var(--color-gold));color:#1a1a1a;box-shadow:var(--shadow-glow-gold)}.btn-outline{color:var(--color-primary);border:2px solid var(--color-primary);background:0 0}.btn-outline:hover{background:#4f86f71a}.btn-ghost{color:var(--text-primary);background:#ffffff14;border:1px solid #ffffff1f}.card{background:var(--bg-card);border-radius:var(--border-radius);box-shadow:var(--shadow-card);transition:var(--transition);border:1px solid #ffffff0f;padding:20px}.card:hover{border-color:#4f86f74d;transform:translateY(-2px)}.progress-bar-container{flex-direction:column;gap:6px;display:flex}.progress-bar-label{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:13px;display:flex}.progress-bar-track{background:#ffffff1a;border-radius:4px;height:8px;overflow:hidden}.progress-bar-fill{border-radius:4px;height:100%;transition:width 1s cubic-bezier(.4,0,.2,1)}.progress-bar-fill.blue{background:linear-gradient(90deg, var(--color-primary), var(--color-primary-light))}.progress-bar-fill.red{background:linear-gradient(90deg,#ff4d6d,#ff6b6b)}.progress-bar-fill.yellow{background:linear-gradient(90deg, #ffb800, var(--color-gold))}.progress-bar-fill.green{background:linear-gradient(90deg,#2ecc71,#4ecdc4)}.progress-bar-fill.purple{background:linear-gradient(90deg,#9b59b6,#bb8af0)}.xp-badge{color:var(--color-primary-light);background:linear-gradient(135deg,#4f86f733,#4f86f71a);border:1px solid #4f86f766;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex}.streak-badge{color:var(--color-coral);background:linear-gradient(135deg,#ff6b6b33,#ffbc001a);border:1px solid #ff6b6b66;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:14px;font-weight:700;display:inline-flex}@keyframes samoyedIdle{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-8px)rotate(-1deg)}75%{transform:translateY(-4px)rotate(1deg)}}@keyframes samoyedWag{0%,to{transform:rotate(-5deg)translate(-2px)}50%{transform:rotate(5deg)translate(2px)}}@keyframes heartFloat{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-60px)scale(.5)}}@keyframes rewardPop{0%{opacity:0;transform:scale(0)rotate(-10deg)}60%{opacity:1;transform:scale(1.15)rotate(3deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes pulse{0%,to{box-shadow:0 0 #ff6b6b66}50%{box-shadow:0 0 0 12px #ff6b6b00}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes starSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.fade-in-up{animation:.5s forwards fadeInUp}.animate-idle{animation:3s ease-in-out infinite samoyedIdle}.pulse-animation{animation:2s ease-in-out infinite pulse}.bottom-nav{background:var(--bg-nav);width:100%;max-width:480px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid #ffffff14;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-item{cursor:pointer;transition:var(--transition);color:var(--text-muted);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:8px;font-family:Outfit,sans-serif;display:flex}.nav-item.active{color:var(--color-primary)}.nav-item.active svg{filter:drop-shadow(0 0 8px var(--color-primary))}.nav-item span{font-size:10px;font-weight:500}.input-field{background:var(--bg-card);border-radius:var(--border-radius-sm);width:100%;color:var(--text-primary);transition:var(--transition);border:1.5px solid #ffffff1a;outline:none;padding:14px 16px;font-family:Outfit,sans-serif;font-size:15px}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4f86f726}.input-field::placeholder{color:var(--text-muted)}@media (width>=480px){.app-container{border-left:1px solid #ffffff0d;border-right:1px solid #ffffff0d;box-shadow:0 0 60px #00000080}}.loading-spinner{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;display:flex}.spinner{border:3px solid #4f86f733;border-top-color:var(--color-primary);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}