:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--water-deep: #0c4a6e;--water-mid: #0284c7;--water-light: #38bdf8;--water-glow: #7dd3fc;--surface: rgba(255, 255, 255, .04);--surface-hover: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .08);--text-primary: #f0f9ff;--text-secondary: rgba(186, 230, 253, .7);--danger: #f87171;--success: #4ade80;--warning: #fbbf24}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:linear-gradient(160deg,#020617,#0c1929 40%,#0a1628);color:var(--text-primary)}#root{display:flex;flex-direction:column}.app-header{padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#02061799;position:sticky;top:0;z-index:10}.app-logo{display:flex;align-items:center;gap:.75rem}.app-logo svg{width:32px;height:32px;color:var(--water-light);filter:drop-shadow(0 0 8px rgba(56,189,248,.4))}.app-logo h1{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--water-glow),var(--water-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-date{font-size:.85rem;color:var(--text-secondary)}.app-main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:2rem;max-width:1200px;width:100%;margin:0 auto}@media(max-width:768px){.app-main{grid-template-columns:1fr;padding:1rem}}.card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s}.card:hover{border-color:#38bdf826}.card-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-secondary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.card-title svg{width:16px;height:16px}.gauge-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.gauge-ring{position:relative;width:200px;height:200px}.gauge-ring svg{transform:rotate(-90deg);width:100%;height:100%}.gauge-ring .bg{fill:none;stroke:#ffffff0d;stroke-width:12}.gauge-ring .fill{fill:none;stroke:var(--water-light);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 6px rgba(56,189,248,.5))}.gauge-ring .fill.over{stroke:var(--danger);filter:drop-shadow(0 0 6px rgba(248,113,113,.5))}.gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.gauge-value{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1}.gauge-unit{font-size:.85rem;color:var(--text-secondary);margin-top:.25rem}.gauge-label{font-size:.85rem;color:var(--text-secondary)}.gauge-sublabel{font-size:.75rem;color:var(--text-secondary);opacity:.6}.usage-list{display:flex;flex-direction:column;gap:.5rem;max-height:340px;overflow-y:auto}.usage-list::-webkit-scrollbar{width:4px}.usage-list::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.usage-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-radius:.5rem;background:#ffffff05;border:1px solid transparent;transition:background .15s}.usage-item:hover{background:var(--surface-hover);border-color:var(--border)}.usage-item-left{display:flex;align-items:center;gap:.75rem}.usage-icon{width:36px;height:36px;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:#38bdf814;border:1px solid rgba(56,189,248,.12)}.usage-item-name{font-size:.9rem;font-weight:500}.usage-item-time{font-size:.75rem;color:var(--text-secondary)}.usage-item-right{display:flex;align-items:center;gap:.75rem}.usage-item-amount{font-size:.9rem;font-weight:600;color:var(--water-glow)}.usage-item-delete{background:none;border:none;color:#fff3;cursor:pointer;padding:.25rem;border-radius:.25rem;transition:color .15s,background .15s;display:flex;align-items:center}.usage-item-delete:hover{color:var(--danger);background:#f871711a}.usage-empty{text-align:center;padding:2rem 1rem;color:var(--text-secondary);font-size:.85rem}.quick-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.quick-add-btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.85rem .5rem;border-radius:.75rem;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer;transition:all .2s;font-family:inherit}.quick-add-btn:hover{background:var(--surface-hover);border-color:#38bdf833;transform:translateY(-1px)}.quick-add-btn:active{transform:translateY(0)}.quick-add-icon{font-size:1.4rem}.quick-add-label{font-size:.75rem;font-weight:500}.quick-add-amount{font-size:.65rem;color:var(--text-secondary)}.goal-input-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.goal-input{flex:1;background:#ffffff0a;border:1px solid var(--border);border-radius:.5rem;padding:.6rem .85rem;color:var(--text-primary);font-size:1rem;font-family:inherit;outline:none;transition:border-color .2s}.goal-input:focus{border-color:var(--water-mid)}.goal-input-unit{font-size:.85rem;color:var(--text-secondary)}.goal-btn{padding:.6rem 1rem;border-radius:.5rem;border:1px solid rgba(56,189,248,.3);background:#38bdf81a;color:var(--water-light);cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:500;transition:all .2s}.goal-btn:hover{background:#38bdf833;border-color:#38bdf880}.custom-row{display:flex;gap:.5rem;margin-top:.75rem}.custom-input{flex:1;background:#ffffff0a;border:1px solid var(--border);border-radius:.5rem;padding:.55rem .75rem;color:var(--text-primary);font-size:.85rem;font-family:inherit;outline:none;transition:border-color .2s}.custom-input:focus{border-color:var(--water-mid)}.custom-input::placeholder{color:#fff3}.custom-btn{padding:.55rem .85rem;border-radius:.5rem;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:inherit;font-size:.85rem;transition:all .2s;white-space:nowrap}.custom-btn:hover{background:var(--surface-hover)}.tips-list{display:flex;flex-direction:column;gap:.6rem}.tip-item{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .75rem;border-radius:.5rem;background:#ffffff05;font-size:.85rem;color:var(--text-secondary);line-height:1.4}.tip-icon{flex-shrink:0;font-size:1rem;margin-top:.1rem}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}.stat-box{text-align:center;padding:.75rem .5rem;border-radius:.5rem;background:#ffffff05;border:1px solid var(--border)}.stat-value{font-size:1.25rem;font-weight:700;color:var(--water-glow)}.stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-top:.15rem}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.05em}.badge-success{background:#4ade801a;color:var(--success);border:1px solid rgba(74,222,128,.2)}.badge-warning{background:#fbbf241a;color:var(--warning);border:1px solid rgba(251,191,36,.2)}.badge-danger{background:#f871711a;color:var(--danger);border:1px solid rgba(248,113,113,.2)}.app-footer{text-align:center;padding:1.5rem;font-size:.75rem;color:#fff3;border-top:1px solid var(--border)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}.reset-btn{background:none;border:1px solid rgba(248,113,113,.2);color:var(--danger);padding:.4rem .75rem;border-radius:.5rem;cursor:pointer;font-size:.75rem;font-family:inherit;transition:all .2s;opacity:.6}.reset-btn:hover{opacity:1;background:#f8717114}