:root{--bg: #fff7ef;--bg-2: #ffeede;--card: #ffffff;--ink: #4a3b32;--ink-soft: #9b8b80;--line: #f0e3d6;--accent: #5b9df9;--accent-soft: color-mix(in srgb, var(--accent) 14%, white);--milk: #ffd166;--milk-deep: #f4a259;--poop: #b5835a;--pee: #ffd23f;--ok: #56c596;--shadow: 0 10px 30px -12px rgba(120, 80, 40, .35);--radius: 26px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;font-family:"Baloo 2",ui-rounded,Segoe UI Rounded,Nunito,system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(1200px 500px at 80% -10%,var(--bg-2),transparent 60%),radial-gradient(900px 500px at -10% 0%,#ffe9f0,transparent 55%),var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none}input,select{font-family:inherit}.app{max-width:520px;margin:0 auto;padding:14px 16px calc(28px + env(safe-area-inset-bottom));min-height:100%}.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 14px}.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px}.brand .logo{font-size:26px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.12))}.icon-btn{background:var(--card);border-radius:16px;padding:8px 10px;box-shadow:var(--shadow);font-size:16px;color:var(--ink)}.tabs{display:flex;gap:10px;margin-bottom:16px}.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:20px;font-weight:700;font-size:16px;background:var(--card);color:var(--ink-soft);box-shadow:var(--shadow);border:2.5px solid transparent;transition:transform .12s ease,border-color .12s}.tab .av{font-size:22px}.tab.active{color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}.tab:active{transform:scale(.97)}.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}.card h2{margin:0 0 12px;font-size:16px;color:var(--ink-soft);font-weight:800;letter-spacing:.3px;text-transform:uppercase}.ring-card{display:flex;gap:18px;align-items:center}.ring{position:relative;width:132px;height:132px;flex:0 0 auto}.ring .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.ring .big{font-size:26px;font-weight:800;line-height:1}.ring .unit{font-size:12px;color:var(--ink-soft);font-weight:700}.ring .goal{font-size:12px;color:var(--ink-soft);margin-top:3px}.ring-info{flex:1}.ring-info .row{display:flex;justify-content:space-between;padding:5px 0;font-size:15px;border-bottom:1px dashed var(--line)}.ring-info .row:last-child{border-bottom:none}.ring-info b{font-weight:800}.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800}.pill.ok{background:color-mix(in srgb,var(--ok) 18%,white);color:#2e8b63}.pill.low{background:#fff0d6;color:#c98a1e}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.preset{padding:16px 4px;border-radius:18px;font-weight:800;font-size:18px;background:linear-gradient(180deg,#fff,#fff6e6);border:2px solid var(--line);color:var(--ink);box-shadow:0 4px 0 var(--line);transition:transform .08s}.preset small{display:block;font-size:10px;color:var(--ink-soft);font-weight:700}.preset:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}.preset.custom{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.act{padding:14px 6px;border-radius:18px;font-weight:800;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink);transition:transform .08s}.act .em{font-size:24px}.act:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}.act.pee{background:#fffbe6}.act.poop{background:#f6ede3}.act.both{background:#fff0f0}.range{display:flex;gap:8px;flex-wrap:wrap}.range button{padding:8px 14px;border-radius:999px;font-weight:800;font-size:13px;background:#fff;color:var(--ink-soft);border:2px solid var(--line)}.range button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.slotpick{margin-bottom:14px}.slotpick-label{display:block;font-size:12px;font-weight:800;color:var(--ink-soft);margin:0 4px 8px;letter-spacing:.3px}.slots{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.slots button{padding:9px 0;border-radius:13px;font-weight:800;font-size:12px;background:var(--card);color:var(--ink-soft);border:2px solid var(--line);box-shadow:var(--shadow)}.slots button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.slots button:active{transform:scale(.94)}.chart-wrap{width:100%;overflow:hidden}.legend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--ink-soft);font-weight:700;flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:6px}.dot{width:12px;height:12px;border-radius:4px;display:inline-block}.dot.line{height:4px;border-radius:2px;width:16px}.log{list-style:none;margin:0;padding:0}.log li{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px dashed var(--line)}.log li:last-child{border-bottom:none}.log .em{font-size:22px;width:30px;text-align:center}.log .main{flex:1}.log .main .t{font-weight:800;font-size:15px}.log .main .s{font-size:12px;color:var(--ink-soft)}.log .del{background:none;color:var(--ink-soft);font-size:18px;padding:6px 8px;border-radius:12px}.log .del:active{background:#fff0f0;color:#e06565}.empty{text-align:center;color:var(--ink-soft);padding:22px 0;font-weight:700}.wlist{list-style:none;margin:10px 0 0;padding:0}.wlist li{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;border-bottom:1px dashed var(--line);font-size:15px}.wlist b{font-weight:800}.login{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px}.login .hero{font-size:74px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.12));animation:bob 3s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-10px)}}.login h1{margin:0;font-size:28px}.login p{margin:0;color:var(--ink-soft);font-weight:700}.pin-dots{display:flex;gap:14px}.pin-dots i{width:16px;height:16px;border-radius:50%;background:var(--line)}.pin-dots i.on{background:var(--accent)}.pin-dots.err i{background:#f0a0a0;animation:shake .35s}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.keypad{display:grid;grid-template-columns:repeat(3,78px);gap:14px}.keypad button{height:78px;border-radius:24px;font-size:28px;font-weight:800;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}.keypad button:active{transform:scale(.94)}.keypad .ghost{background:transparent;box-shadow:none;font-size:20px;color:var(--ink-soft)}.overlay{position:fixed;inset:0;background:#3c281959;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;z-index:50;animation:fade .18s ease}@keyframes fade{0%{opacity:0}}.sheet{background:var(--card);width:100%;max-width:520px;border-radius:28px 28px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px -10px #0000004d;animation:up .22s ease}@keyframes up{0%{transform:translateY(30px)}}.sheet h3{margin:0 0 16px;font-size:20px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:800;color:var(--ink-soft);margin-bottom:6px}.field input,.field select{width:100%;padding:14px;border-radius:16px;border:2px solid var(--line);font-size:17px;background:#fffdf9;color:var(--ink)}.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}.sheet-actions{display:flex;gap:10px;margin-top:8px}.btn{flex:1;padding:15px;border-radius:18px;font-weight:800;font-size:16px}.btn.primary{background:var(--accent);color:#fff}.btn.ghost{background:var(--line);color:var(--ink)}.big-amount{text-align:center;font-size:40px;font-weight:800;margin:6px 0 2px}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;z-index:60;box-shadow:var(--shadow);animation:up .2s ease}.loading{display:flex;min-height:100dvh;align-items:center;justify-content:center;font-size:60px;animation:bob 2s ease-in-out infinite}