:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--blue: #38bdf8;--indigo: #818cf8;--blue-dim: rgba(56, 189, 248, .15);--indigo-dim: rgba(129, 140, 248, .15);--surface: rgba(255, 255, 255, .04);--surface-hover: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .08);--text: #e2e8f0;--text-dim: rgba(255, 255, 255, .5);--text-muted: rgba(255, 255, 255, .35)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#070b14;color:var(--text)}.app{max-width:420px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:1rem 1.25rem 2rem}.header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 1rem}.brand{display:flex;align-items:center;gap:.5rem}.brand-name{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--blue),var(--indigo));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-actions{display:flex;gap:.25rem}.icon-btn{background:none;border:1px solid var(--border);color:var(--text-dim);border-radius:.5rem;width:2.25rem;height:2.25rem;display:grid;place-items:center;cursor:pointer;transition:all .2s}.icon-btn:hover{background:var(--surface-hover);color:var(--text)}.icon-btn.active{background:var(--blue-dim);border-color:#38bdf84d;color:var(--blue)}.main{flex:1;display:flex;flex-direction:column;gap:1.75rem}.progress-section{display:flex;flex-direction:column;align-items:center;gap:1.25rem}.ring-wrapper{position:relative;width:200px;height:200px}.progress-ring{display:block}.ring-content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.glass-count{font-size:3rem;font-weight:700;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--blue),var(--indigo));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-label{font-size:.8rem;color:var(--text-dim);margin-top:.15rem}.stats-row{display:flex;gap:.5rem;width:100%}.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:.625rem;padding:.65rem .5rem;text-align:center}.stat-value{display:block;font-size:.95rem;font-weight:600;color:var(--text)}.stat-label{display:block;font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.1rem}.tap-section{display:flex;flex-direction:column;align-items:center;gap:.75rem}.tap-area{position:relative;width:140px;height:140px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:radial-gradient(circle,var(--blue-dim),transparent 70%);border:2px solid rgba(56,189,248,.2);transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden}.tap-area:hover{border-color:#38bdf873;background:radial-gradient(circle,rgba(56,189,248,.2),transparent 70%);transform:scale(1.04)}.tap-area:active{transform:scale(.95)}.drop-btn{background:none;border:none;cursor:pointer;display:grid;place-items:center;padding:0}.drop-icon{filter:drop-shadow(0 0 12px rgba(56,189,248,.4));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.tap-area:hover .drop-icon{transform:scale(1.1)}.tap-area:active .drop-icon{transform:scale(.9)}.ripple{position:absolute;width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:50%;background:#38bdf866;animation:ripple-anim .7s ease-out forwards;pointer-events:none}@keyframes ripple-anim{to{width:280px;height:280px;margin-left:-140px;margin-top:-140px;opacity:0}}.tap-hint{font-size:.8rem;color:var(--text-muted)}.action-row{display:flex;gap:.5rem}.btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:500;border-radius:.5rem;padding:.5rem .85rem;cursor:pointer;transition:all .2s;font-family:inherit;line-height:1}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-outline{background:var(--surface);border:1px solid var(--border);color:var(--text-dim)}.btn-outline:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--indigo));border:none;color:#fff;font-weight:600}.btn-primary:hover{opacity:.9}.week-section{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:1rem}.section-title{font-size:.8rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}.week-chart{display:flex;gap:.35rem;align-items:flex-end;height:100px}.week-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;height:100%}.week-bar-track{flex:1;width:100%;background:#ffffff0a;border-radius:.25rem;display:flex;align-items:flex-end;overflow:hidden}.week-bar-fill{width:100%;background:linear-gradient(to top,var(--blue),var(--indigo));border-radius:.25rem;transition:height .5s cubic-bezier(.4,0,.2,1);min-height:2px}.week-day{font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.week-count{font-size:.65rem;font-weight:600;color:var(--text-dim)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;animation:fade-in .2s ease}.modal{background:#111827;border:1px solid var(--border);border-radius:.875rem;padding:1.5rem;width:min(340px,90vw);animation:slide-up .25s cubic-bezier(.4,0,.2,1)}.modal-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem}.field-label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;font-weight:500;color:var(--text-dim)}.field-input{background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:.6rem .75rem;font-size:1rem;color:var(--text);font-family:inherit;width:100%;outline:none;transition:border-color .2s}.field-input:focus{border-color:#38bdf880}.field-hint{font-size:.75rem;color:var(--text-muted);margin-top:.35rem}.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem}.celebration{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#38bdf833,#818cf833);border:1px solid rgba(56,189,248,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:.6rem 1.5rem;border-radius:2rem;font-size:.85rem;font-weight:600;color:var(--blue);animation:pop-in .4s cubic-bezier(.34,1.56,.64,1);z-index:50}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:translate(-50%) scale(.8)}to{opacity:1;transform:translate(-50%) scale(1)}}