*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--green-dark:#2d6a4f;--green-mid:#40916c;--green-light:#52b788;--green-pale:#95d5b2;--bg:#d8f3dc;--bg-card:#fff;--text:#1b4332;--text-light:#555;--radius:16px;--shadow:0 4px 24px #0000001a}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-user-select:none;user-select:none;touch-action:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;height:100%;display:flex}.setup-overlay{background:var(--bg);z-index:100;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.setup-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;width:90%;max-width:400px;padding:32px 24px}.setup-card h1{color:var(--green-dark);margin-bottom:8px;font-size:1.5rem}.setup-card p{color:var(--text-light);margin-bottom:24px;font-size:.9rem}.setup-step{flex-direction:column;gap:12px;display:flex}.setup-step label{text-align:left;font-size:.95rem;font-weight:600}.setup-step input{border:2px solid var(--green-pale);border-radius:10px;outline:none;width:100%;padding:12px 16px;font-size:1rem;transition:border-color .2s}.setup-step input:focus{border-color:var(--green-light)}.setup-step input[type=number]{-moz-appearance:textfield}.setup-step input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.setup-step input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.setup-step input[type=time]{min-width:0;max-width:100%}.btn-group{gap:12px;margin-top:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:10px;flex:1;padding:12px 20px;font-size:1rem;font-weight:600;transition:opacity .2s}.btn:active{opacity:.8}.btn-primary{background:var(--green-dark);color:#fff}.btn-secondary{background:var(--green-pale);color:var(--text)}.step-indicators{justify-content:center;gap:8px;margin-bottom:24px;display:flex}.step-dot{background:var(--green-pale);border-radius:50%;width:10px;height:10px;transition:background .3s}.step-dot.active{background:var(--green-dark)}.dashboard{flex-direction:column;flex:1;align-items:center;gap:12px;padding:24px 16px;display:flex;overflow:hidden}.panda-name{color:var(--green-dark);font-size:1.3rem;font-weight:700}.panda-sprite{object-fit:contain;width:180px;height:180px;image-rendering:pixelated}.panda-sprite.celebrating{animation:.8s panda-celebrate}@keyframes panda-celebrate{0%{transform:scale(1)}30%{transform:scale(1.15)}50%{transform:scale(1.2)rotate(-4deg)}70%{transform:scale(1.15)rotate(4deg)}to{transform:scale(1)}}.progress-container{width:160px;height:160px;position:relative}.progress-ring-bg{fill:none;stroke:var(--green-pale);stroke-width:12px}.progress-ring-fill{fill:none;stroke:var(--green-dark);stroke-width:12px;stroke-linecap:round;transform-origin:50%;transition:stroke-dashoffset .5s;transform:rotate(-90deg)}.progress-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.progress-text .percent{color:var(--green-dark);font-size:2rem;font-weight:700}.progress-text .label{color:var(--text-light);font-size:.75rem}.water-glass-container{cursor:grab;touch-action:none;width:100px;height:170px;position:relative}.water-glass-container:active{cursor:grabbing}.water-glass-bg{object-fit:contain;pointer-events:none;z-index:2;width:100px;height:140px;position:absolute;top:0;left:0}.water-fill{z-index:1;background:linear-gradient(#81d4fa,#4fc3f7);border-radius:4px;height:0%;transition:height 50ms linear;position:absolute;bottom:12px;left:12px;right:12px}.drag-instruction{color:var(--text-light);text-align:center;margin:0;font-size:.8rem;position:absolute;bottom:0;left:0;right:0}.splash{background:var(--green-dark);color:#fff;opacity:0;pointer-events:none;z-index:50;border-radius:10px;padding:12px 24px;font-size:1rem;font-weight:600;transition:opacity .3s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.splash.show{opacity:1}