/* 01 Tokens */
:root{--app-width:430px;--bg-page:#f4f7f9;--bg-app:#fff;--bg-subtle:#f6f9fb;--text-primary:#14232b;--text-secondary:#667780;--text-tertiary:#95a2a8;--blue:#1769e0;--blue-hover:#125bc5;--blue-soft:#eef4fd;--border:#e3e9ed;--border-strong:#cad5db;--success:#258a60;--success-soft:#edf8f3;--warning:#b97817;--warning-soft:#fff7e8;--danger:#b94848;--danger-soft:#fff1f1;--text-xs:12px;--text-sm:13px;--text-body:15px;--text-md:16px;--text-card:18px;--text-section:20px;--text-page:28px;--text-display:32px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px}
/* 02 Reset */
*{box-sizing:border-box}html{min-height:100%}body{min-height:100dvh;margin:0;background:var(--bg-page);color:var(--text-primary);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:var(--text-body);line-height:1.55}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid rgba(23,105,224,.12);outline-offset:2px}
/* 03 Typography */
h1,h2,p{margin-top:0}h1,h2,b,strong{line-height:1.15}h1{margin-bottom:0;font-size:var(--text-page);font-weight:700;letter-spacing:-.02em}h2{font-size:var(--text-section);font-weight:700;letter-spacing:-.01em}.eyebrow{margin:0;color:var(--text-secondary);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;line-height:1.3}.lead{color:var(--text-secondary)}small{color:var(--text-secondary);font-size:var(--text-sm)}
/* 04 App shell */
.app-shell{width:100%;max-width:var(--app-width);min-height:100dvh;margin-inline:auto;background:var(--bg-app);overflow:visible}.page{display:none;width:100%;min-height:100dvh;padding:var(--space-6) var(--space-6) 112px;animation:fade .15s ease}.page.active{display:block}@keyframes fade{from{opacity:.4}to{opacity:1}}
/* 05 Shared layout */
.title-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}.title-line h2{margin:0}.title-line span{color:var(--text-secondary);font-size:var(--text-sm)}.full{width:100%;margin-top:var(--space-5)}hr{border:0;border-top:1px solid var(--border)}
/* 06 Icons */
svg{width:20px;height:20px;flex:none;stroke-linecap:round;stroke-linejoin:round}.brand-mark{width:32px;height:32px;color:var(--blue)}
/* 07 Buttons */
.primary,.secondary,.text-button{min-height:48px;border-radius:10px;padding:10px var(--space-4);font-size:var(--text-body);font-weight:600;transition:background .15s ease,transform .15s ease}.primary{background:var(--blue);color:#fff}.primary:hover{background:var(--blue-hover)}.primary:disabled{opacity:.45;cursor:not-allowed}.secondary{border:1px solid var(--border-strong);background:#fff;color:var(--text-primary)}.text-button{background:transparent;color:var(--blue)}button:active{transform:translateY(1px)}
/* 08 Forms */
.counter{display:flex;height:48px;align-items:center;gap:var(--space-4);border:1px solid var(--border);border-radius:10px;background:#fff}.counter button{width:40px;height:40px;border-radius:8px;background:var(--bg-subtle);color:var(--blue);font-size:20px}.counter strong{min-width:18px;text-align:center;font-size:var(--text-md);font-weight:600}fieldset{margin:var(--space-6) 0;padding:0;border:0;border-top:1px solid var(--border);padding-top:var(--space-5)}legend{padding:0;margin-bottom:var(--space-3);font-size:var(--text-body);font-weight:600}.choice-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.choice-row button{min-height:38px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text-primary);font-size:var(--text-sm)}.choice-row button.selected{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:600}.check{display:flex;margin:var(--space-3) 0;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.check input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
/* 09 Header */
.brand-row{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:var(--space-3)}.brand b{display:block;font-size:20px;font-weight:700}.brand small{display:block;margin-top:1px;font-size:var(--text-xs)}.icon-btn,.back{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--border);border-radius:50%;background:#fff;color:var(--text-primary)}.simple-head{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6)}.simple-head .back{width:40px;height:40px;margin-top:3px}.simple-head h1{margin-top:2px}
/* 10 Home */
.intro{margin:var(--space-7) 0 var(--space-8)}.intro>span{color:var(--blue);font-size:var(--text-sm);font-weight:600}.intro h1{margin:var(--space-2) 0 var(--space-3);font-size:var(--text-display)}.intro p{max-width:340px;margin:0;color:var(--text-secondary)}.hydration-overview{padding-bottom:var(--space-7);border-bottom:1px solid var(--border)}.hydration-numbers{display:flex;align-items:end;justify-content:space-between;margin:var(--space-2) 0 var(--space-4)}.hydration-numbers strong{display:block;font-size:var(--text-display);font-weight:700;letter-spacing:-.025em}.hydration-numbers small{display:block}.hydration-numbers>b{color:var(--blue);font-size:var(--text-card);font-weight:600}.liquid-track{height:12px;overflow:hidden;border-radius:8px;background:var(--blue-soft)}.liquid-track i{display:block;width:38%;height:100%;border-radius:inherit;background:var(--blue);transition:width .4s ease}.remaining{margin:var(--space-2) 0 var(--space-4);color:var(--text-secondary);font-size:var(--text-sm)}.quick-add{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.quick-add button{height:42px;border:1px solid var(--border-strong);border-radius:10px;background:#fff;color:var(--text-primary);font-size:var(--text-sm);font-weight:600}.uro-promo{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--space-4);margin:var(--space-7) 0;padding:var(--space-5) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:transparent;text-align:left}.uro-promo h2{margin:var(--space-1) 0;font-size:var(--text-card);font-weight:600}.uro-promo p:not(.eyebrow){max-width:250px;margin:0 0 var(--space-2);color:var(--text-secondary);font-size:var(--text-sm)}.text-link{display:flex;align-items:center;gap:var(--space-1);color:var(--blue);font-size:var(--text-sm);font-weight:600}.text-link svg{width:18px}.swatches{display:grid;grid-template-columns:repeat(3,12px);gap:4px;flex:none}.swatches i{display:block;width:12px;height:54px;border-radius:4px}.swatches i:nth-child(1){background:#f3df82}.swatches i:nth-child(2){background:#e9bd50}.swatches i:nth-child(3){background:#c77b24}.feature-list h2{margin-bottom:var(--space-2)}.feature-list button{display:flex;width:100%;min-height:70px;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border);background:#fff;color:var(--text-primary);text-align:left}.feature-list button>svg{width:22px;height:22px;color:var(--blue)}.feature-list span{flex:1}.feature-list b,.feature-list small{display:block}.feature-list b{font-size:var(--text-md);font-weight:600}.feature-list small{margin-top:1px}.feature-list em{color:var(--text-tertiary);font-size:24px;font-style:normal;font-weight:400}
/* 11 Drink Log */
.container-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-3) 0 var(--space-6)}.container{height:112px;padding:var(--space-3) var(--space-2);border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text-primary);text-align:center}.container.selected{border-color:var(--blue);background:var(--blue-soft)}.container svg{display:block;width:28px;height:28px;margin:0 auto var(--space-2);color:var(--blue)}.container b{display:block;font-size:var(--text-sm);font-weight:600}.container small{display:block;font-size:var(--text-xs)}.quantity,.form-block{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;border-top:1px solid var(--border)}.quantity h2{margin:0;font-size:var(--text-section)}.history{margin-top:var(--space-8)}.history-item{display:flex;min-height:68px;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--border)}.history-item>i{width:8px;height:8px;border-radius:50%;background:var(--blue)}.history-item div{flex:1}.history-item b{display:block;font-size:var(--text-sm);font-weight:600}.history-item small{display:block}.history-item strong{color:var(--success);font-size:var(--text-sm);font-weight:600}
/* 12 Reminder */
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin:var(--space-7) 0 var(--space-2);padding-bottom:var(--space-5);border-bottom:1px solid var(--border)}.toggle-row b{display:block;font-size:var(--text-md);font-weight:600}.toggle-row small{display:block}.toggle{width:48px;height:28px;padding:3px;border-radius:20px;background:var(--border-strong)}.toggle i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s ease}.toggle.on{background:var(--blue)}.toggle.on i{transform:translateX(20px)}.schedule>div{display:flex;gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--border)}.schedule time{width:48px;flex:none;color:var(--blue);font-size:var(--text-sm);font-weight:600}.schedule p{margin:0}.schedule b{display:block;font-size:var(--text-md);font-weight:600}.schedule small{display:block;margin-top:2px}
/* 13 Urination */
.disclaimer{display:flex;gap:var(--space-2);margin:0 0 var(--space-7);color:var(--text-secondary);font-size:var(--text-sm)}.disclaimer svg{width:18px;height:18px;flex:none;color:var(--blue)}.disclaimer b{color:var(--text-primary);font-weight:600}.form-block{margin-bottom:0}.form-block>span{font-weight:600}
/* 14 UroColor */
.uro-intro{margin:0 0 var(--space-8);color:var(--text-secondary);font-size:var(--text-sm)}.uro-intro b{color:var(--text-primary);font-weight:600}.color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin:var(--space-5) 0 var(--space-6)}.color-grid button{position:relative;min-height:132px;padding:var(--space-3);border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text-primary);text-align:left}.color-grid button i{display:block;height:72px;margin-bottom:var(--space-2);border-radius:6px;background:var(--swatch)}.color-grid button span{display:block;font-size:var(--text-sm)}.color-grid button b{display:block;margin-bottom:2px;font-size:var(--text-xs);font-weight:600}.color-grid button.selected{border:2px solid var(--text-primary);padding:11px}.color-grid button.selected::after{position:absolute;top:8px;right:8px;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:var(--text-primary);color:#fff;content:"✓";font-size:var(--text-xs)}.result-section{padding:var(--space-3) 0 var(--space-6)}.result-section>#resultSwatch{display:block;width:80px;height:80px;margin:var(--space-4) 0;border-radius:8px;background:var(--swatch)}.result-section h2{margin:0 0 var(--space-2);font-size:var(--text-display)}.result-section>p{margin-bottom:var(--space-5)}.result-section hr{margin:var(--space-6) 0}.result-section small{display:block;line-height:1.55}.safety{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border)}.safety p{color:var(--text-secondary);font-size:var(--text-sm)}.safety b{color:var(--text-primary);font-weight:600}.safety svg{width:16px;height:16px;margin-right:var(--space-1);color:var(--danger);vertical-align:-3px}
/* 15 HydroInsight */
.score-section{padding:var(--space-8) 0 var(--space-7);border-bottom:1px solid var(--border)}.score-section>div{margin:var(--space-2) 0}.score-section strong{font-size:56px;font-weight:700;letter-spacing:-.05em}.score-section span{color:var(--text-secondary);font-size:var(--text-card)}.score-section h2{margin:0 0 var(--space-2);font-size:var(--text-card);font-weight:600}.score-section p{max-width:330px;margin:0;color:var(--text-secondary)}.score-section>i{display:block;width:74%;height:8px;margin-top:var(--space-5);border-radius:8px;background:var(--blue);box-shadow:0 0 0 1px var(--blue)}.score-section>i::after{display:block;width:35%;height:8px;margin-left:100%;border-radius:0 8px 8px 0;background:var(--blue-soft);content:""}.chart-section{padding:var(--space-7) 0;border-bottom:1px solid var(--border)}.chart-section h2{margin-bottom:var(--space-1)}.chart-section>p{margin:0;color:var(--text-secondary);font-size:var(--text-sm)}.bar-chart{display:flex;height:178px;align-items:flex-end;gap:var(--space-2);margin-top:var(--space-6);border-bottom:1px solid var(--border)}.bar-chart>div{display:flex;height:100%;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--space-2)}.bar-chart i{display:block;width:100%;height:var(--h);border-radius:4px 4px 0 0;background:var(--blue)}.bar-chart span{font-size:var(--text-xs);color:var(--text-secondary)}.why{padding-top:var(--space-7)}.why h2{margin-bottom:var(--space-5)}.why p{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0;font-size:var(--text-sm)}.why i{display:grid;width:20px;height:20px;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:var(--text-xs);font-style:normal;font-weight:600}.yes{color:var(--success)}.warn{color:var(--warning)}.why small{display:block;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border)}
/* 16 Bottom Navigation */
.bottom-nav{position:fixed;z-index:5;bottom:0;left:50%;display:grid;width:min(100%,var(--app-width));height:72px;grid-template-columns:repeat(4,1fr);transform:translateX(-50%);border-top:1px solid var(--border);background:#fff;box-shadow:0 -4px 16px rgba(18,35,43,.05)}.bottom-nav button{display:grid;place-content:center;gap:4px;background:transparent;color:var(--text-tertiary);font-size:11px;font-weight:500}.bottom-nav svg{width:20px;height:20px;margin:auto}.bottom-nav button.active{color:var(--blue);font-weight:600}.toast{position:fixed;z-index:8;bottom:88px;left:50%;padding:10px var(--space-4);transform:translate(-50%,16px);border-radius:8px;background:var(--text-primary);color:#fff;font-size:var(--text-sm);opacity:0;pointer-events:none;transition:.2s}.toast.show{transform:translate(-50%,0);opacity:1}
/* 17 Responsive */
@media(max-width:360px){.page{padding-inline:var(--space-5)}.intro h1{font-size:30px}.quick-add button{font-size:var(--text-xs)}}@media(min-width:431px){.app-shell{border-inline:1px solid var(--border)}}
/* 18 Reduced Motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.schedule input.slot{width:84px;flex:none;align-self:flex-start;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-subtle);color:var(--blue);font:600 var(--text-sm) inherit}
.empty{padding:var(--space-5) 0;color:var(--text-tertiary);font-size:var(--text-sm)}
.bar-chart i.today{background:var(--blue)}.bar-chart i:not(.today){opacity:.45}
.history-item .del{border:0;background:none;color:var(--text-tertiary);font-size:18px;cursor:pointer}
.account{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--border)}
.field{display:block;margin:var(--space-3) 0;font-size:var(--text-sm);color:var(--text-secondary)}
.field input{display:block;width:100%;margin-top:var(--space-1);padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);font:var(--text-md) inherit;color:var(--text-primary)}
.auth-actions{display:flex;gap:var(--space-3);align-items:center;margin:var(--space-4) 0}
.auth-error{min-height:18px;margin:0;color:var(--danger);font-size:var(--text-sm)}
.text-button.danger{color:var(--danger)}