:root{--blue-50: #eff6ff;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--blue-800: #1e3a5f;--blue-900: #0f172a;--blue-glow: rgba(96, 165, 250, .35);--bg: #0c1929;--card: rgba(30, 58, 95, .35);--card-border: rgba(96, 165, 250, .15);--text: #e0efff;--text-muted: rgba(187, 216, 250, .65);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.5;color-scheme:dark}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh}body{background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem 3rem;position:relative;overflow:hidden;max-width:480px;margin:0 auto}.bubbles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.bubble{position:absolute;bottom:-40px;width:calc(12px + var(--i) * 4px);height:calc(12px + var(--i) * 4px);border-radius:50%;background:radial-gradient(circle at 30% 30%,#60a5fa33,#3b82f60d);border:1px solid rgba(96,165,250,.08);left:calc(8% + var(--i) * 7.5%);animation:rise calc(8s + var(--i) * 2s) ease-in infinite;animation-delay:calc(var(--i) * -1.3s);opacity:0}@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.6}90%{opacity:.3}to{transform:translateY(-110vh) scale(.4);opacity:0}}.notif{position:fixed;top:1rem;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,var(--blue-700),var(--blue-600));border:1px solid var(--blue-400);padding:.75rem 1rem;border-radius:1rem;box-shadow:0 8px 32px #2563eb66;animation:slideDown .5s cubic-bezier(.16,1,.3,1);max-width:calc(100vw - 2rem)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-120%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.notif-content{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#fff}.notif-icon{font-size:1.25rem;animation:drip 1.5s ease-in-out infinite}@keyframes drip{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.notif-btn{background:#fff3;border:none;color:#fff;padding:.35rem .75rem;border-radius:.5rem;cursor:pointer;font-size:.8rem;font-weight:600;transition:background .2s}.notif-btn:hover{background:#ffffff4d}.header{text-align:center;margin-bottom:2rem;position:relative;z-index:1;animation:fadeIn .8s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.greeting{font-size:.8rem;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}.title{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--blue-200),var(--blue-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.25rem;margin-bottom:2rem;animation:fadeIn 1s ease .15s both}.glass{position:relative;width:140px;height:200px;border:3px solid rgba(96,165,250,.25);border-top:none;border-radius:0 0 20px 20px;overflow:hidden;background:#0f172a66;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.glass:before{content:"";position:absolute;top:-3px;left:-8px;right:-8px;height:6px;background:#60a5fa40;border-radius:3px}.glass-shine{position:absolute;top:0;left:8px;width:20px;height:60%;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);border-radius:0 0 8px 8px;pointer-events:none}.water{position:absolute;bottom:0;left:0;right:0;height:var(--fill, 0%);background:linear-gradient(180deg,#60a5fa59,#2563eb8c);transition:height .8s cubic-bezier(.34,1.56,.64,1);overflow:hidden}.wave{position:absolute;top:-8px;left:-20%;width:140%;height:20px;border-radius:40%}.wave1{background:#60a5fa40;animation:wave 3s ease-in-out infinite}.wave2{background:#3b82f633;animation:wave 4s ease-in-out infinite reverse;animation-delay:-1s}@keyframes wave{0%,to{transform:translate(-15%) rotate(2deg)}50%{transform:translate(15%) rotate(-2deg)}}.glass-count{display:flex;align-items:baseline;gap:.15rem;font-weight:700}.count-num{font-size:2.25rem;color:var(--blue-300);line-height:1}.count-sep{font-size:1.25rem;color:var(--text-muted);margin:0 .1rem}.count-total{font-size:1.25rem;color:var(--text-muted)}.count-label{font-size:.8rem;color:var(--text-muted);margin-left:.35rem;font-weight:400}.progress-section{width:100%;margin-bottom:1.75rem;position:relative;z-index:1;animation:fadeIn 1s ease .3s both}.progress-bar{width:100%;height:10px;background:#60a5fa1a;border-radius:999px;overflow:hidden;border:1px solid rgba(96,165,250,.08)}.progress-fill{height:100%;width:var(--fill, 0%);background:linear-gradient(90deg,var(--blue-500),var(--blue-400),var(--blue-300));background-size:200% 100%;border-radius:999px;transition:width .8s cubic-bezier(.34,1.56,.64,1);animation:shimmer 2.5s ease-in-out infinite;box-shadow:0 0 12px var(--blue-glow)}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.progress-text{font-size:.75rem;color:var(--text-muted);margin-top:.4rem;text-align:center}.actions{display:flex;gap:.75rem;width:100%;margin-bottom:1.75rem;position:relative;z-index:1;animation:fadeIn 1s ease .45s both}.btn{border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:.9rem;border-radius:.75rem;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{flex:1;padding:.85rem 1.25rem;background:linear-gradient(135deg,var(--blue-600),var(--blue-500));color:#fff;box-shadow:0 4px 20px #2563eb4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 28px #2563eb73}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-icon{font-size:1.1rem;font-weight:700}.btn-secondary{padding:.85rem 1.25rem;background:var(--card);color:var(--blue-300);border:1px solid var(--card-border)}.btn-secondary:hover:not(:disabled){background:#1e3a5f8c}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%;margin-bottom:1.5rem;position:relative;z-index:1;animation:fadeIn 1s ease .6s both}.info-card{background:var(--card);border:1px solid var(--card-border);border-radius:.75rem;padding:1rem;display:flex;flex-direction:column;gap:.25rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.info-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.info-value{font-size:1.1rem;font-weight:700;color:var(--blue-300)}.controls{display:flex;gap:.75rem;width:100%;margin-bottom:2rem;position:relative;z-index:1;animation:fadeIn 1s ease .75s both}.btn-toggle{flex:1;padding:.7rem 1rem;background:var(--card);color:var(--text-muted);border:1px solid var(--card-border);font-size:.8rem}.btn-toggle.active{background:#2563eb33;color:var(--blue-300);border-color:#60a5fa4d;box-shadow:0 0 16px #60a5fa1a}.btn-toggle:hover{background:#1e3a5f8c}.btn-ghost{padding:.7rem 1rem;background:transparent;color:var(--text-muted);border:1px solid transparent;font-size:.8rem}.btn-ghost:hover{color:var(--blue-300);border-color:var(--card-border)}.footer{position:relative;z-index:1;animation:fadeIn 1s ease .9s both}.footer p{font-size:.75rem;color:var(--text-muted);text-align:center}@media(max-width:400px){.glass{width:110px;height:160px}.title{font-size:1.4rem}.count-num{font-size:1.75rem}}