/* =====================================================================
   AquaBalance — mobile-first theme (fresh cyan hydration)
   Covers every class used across the app. Base = phone; scales up.
   ===================================================================== */
:root{
  --aqua-50:#ecfeff; --aqua-100:#cffafe; --aqua-200:#a5f3fc;
  --aqua-300:#67e8f9; --aqua-400:#22d3ee; --aqua-500:#06b6d4;
  --aqua-600:#0891b2; --aqua-700:#0e7490;
  --ink:#0f2733; --muted:#5b7280; --line:#e6eef1; --bg:#eef4f6; --card:#ffffff;
  --ok:#0f9d6b; --warn:#b8791b; --danger:#d0463b;
  --radius:14px; --shadow:0 14px 40px -20px rgba(8,145,178,.45);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --app-w:480px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;padding-bottom:80px;
  background:
    radial-gradient(1200px 700px at 50% -12%,#d6f4fa,transparent 60%),
    linear-gradient(180deg,#f4fafb,var(--bg));
  background-attachment:fixed;
  animation:pageFade .4s ease both;
}
a{color:var(--aqua-700);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;line-height:1.2;margin:.1rem 0 .35rem;letter-spacing:-.02em;font-weight:800}
h2{font-size:1.12rem;margin:0 0 .8rem;font-weight:700}
.sub{color:var(--muted);margin:0 0 1.1rem}
.hint{font-weight:400;color:var(--muted);font-size:.82rem}
.mt{margin-top:1.1rem}.mt-sm{margin-top:.65rem}.mt-xs{margin-top:.3rem}
.mb{margin-bottom:1rem}.mb-sm{margin-bottom:.5rem}

/* ---------- App shell (phone width on every screen) ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:var(--app-w);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:.75rem 1.1rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--aqua-700);font-size:1.08rem}
.brand:hover{text-decoration:none}
.brand .drop{width:30px;height:30px;display:grid;place-items:center;color:#fff;font-size:16px;
  border-radius:50% 50% 50% 10px;background:linear-gradient(150deg,var(--aqua-400),var(--aqua-600));
  box-shadow:0 8px 16px -6px var(--aqua-500)}
.navlinks{display:none}
.wrap{max-width:var(--app-w);margin:0 auto;padding:1.2rem 1.05rem 2.5rem}
.wrap-narrow{max-width:440px}

/* ---------- Auth ---------- */
.authbg{min-height:100vh;display:grid;place-items:center;padding:1.2rem;
  background:linear-gradient(155deg,var(--aqua-400),var(--aqua-700) 92%)}
.auth-card{width:100%;max-width:420px}
.hero-tag{color:var(--aqua-600);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:.7rem;margin:0 0 .15rem}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:1.4rem;animation:rise .4s ease both}
.card + .card{margin-top:1.05rem}
.card.glow{position:relative;overflow:hidden}
.card.glow::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--aqua-300),var(--aqua-500),var(--aqua-300))}

/* ---------- Forms ---------- */
label{display:block;font-weight:600;font-size:.86rem;margin:.9rem 0 .35rem}
input,select,textarea{width:100%;min-height:48px;padding:.75rem .9rem;border:1px solid var(--line);
  border-radius:12px;font-family:inherit;font-size:1rem;color:var(--ink);background:#f8fbfc;
  transition:border .15s,box-shadow .15s,background .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aqua-400);background:#fff;
  box-shadow:0 0 0 4px var(--aqua-100)}
input::placeholder{color:#9fb4bc}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem}
@media(max-width:420px){.row-3{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:100%;
  min-height:52px;padding:.85rem 1rem;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:1.02rem;font-weight:700;color:#fff;letter-spacing:.01em;
  background:linear-gradient(150deg,var(--aqua-400),var(--aqua-600));
  box-shadow:0 14px 26px -12px var(--aqua-600);transition:transform .07s,filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.05);text-decoration:none;box-shadow:0 18px 30px -14px var(--aqua-600)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.75;cursor:default}
.btn.loading{color:transparent;position:relative}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.ghost{background:#fff;color:var(--aqua-700);border:1px solid var(--aqua-200);box-shadow:none}
.btn.small{width:auto;min-height:0;padding:.55rem .95rem;font-size:.9rem;border-radius:11px}
.btn.small i{font-style:normal;font-weight:800;margin-right:.15rem}
.linkrow{display:flex;justify-content:space-between;align-items:center;margin-top:1.1rem;font-size:.9rem}

/* ---------- Chips & option cards ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.chip{position:relative;cursor:pointer;user-select:none}
.chip.inline{display:inline-block}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;padding:.55rem .85rem;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:.88rem;color:var(--muted);transition:all .13s}
.chip input:checked + span{background:var(--aqua-50);border-color:var(--aqua-400);color:var(--aqua-700);
  font-weight:600;box-shadow:0 0 0 3px var(--aqua-100);animation:chipPop .25s ease}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:.55rem;margin-top:.4rem}
.opt{cursor:pointer}
.opt input{position:absolute;opacity:0}
.opt span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;
  padding:.7rem .5rem;border:1px solid var(--line);border-radius:13px;background:#fff;
  font-size:.9rem;color:var(--muted);transition:all .13s}
.opt span:hover{border-color:var(--aqua-200)}
.opt input:checked + span{border-color:var(--aqua-400);background:var(--aqua-50);color:var(--aqua-700);
  font-weight:600;box-shadow:0 0 0 3px var(--aqua-100);animation:chipPop .25s ease}

/* ---------- Alerts ---------- */
.alert{padding:.78rem .95rem;border-radius:12px;font-size:.92rem;margin-bottom:1rem;border:1px solid}
.alert.info{background:var(--aqua-50);border-color:var(--aqua-200);color:var(--aqua-700)}
.alert.success{background:#e6f7ef;border-color:#bce6d3;color:#0f7a52}
.alert.error{background:#fdeceb;border-color:#f5c6c2;color:#a92f26}
.alert.warn{background:#fdf3e3;border-color:#f2ddb4;color:#8a5a10}
.fieldset-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--aqua-600);
  font-weight:800;margin:1.5rem 0 .2rem;display:flex;gap:.4rem;align-items:baseline}
.disclaimer{font-size:.78rem;color:var(--muted);margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}

/* ---------- Dashboard grid + info pane ---------- */
.dash-wrap{max-width:var(--app-w)}
.dash-grid{display:grid;grid-template-columns:1fr;gap:1.05rem}
.info-pane{position:relative;background:linear-gradient(170deg,#ffffff,#f0fbfd)}
.info-pane h2{font-size:1.05rem;margin-bottom:.3rem}
.info-badge{position:absolute;top:1.1rem;right:1.1rem;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--aqua-50);color:var(--aqua-600)}
.factor-list{list-style:none;padding:0;margin:1rem 0 .4rem}
.factor-list li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--line)}
.factor-list li:last-child{border-bottom:none}
.factor-list strong{display:block;font-size:.9rem;font-weight:600}
.factor-list em{font-style:normal;font-size:.8rem;color:var(--muted)}
.fi{width:11px;height:11px;border-radius:50%;flex:none;margin-top:.4rem}
.fi-body{background:#0891b2}.fi-move{background:#0f9d6b}.fi-sun{background:#ef9f27}
.fi-health{background:#d0463b}.fi-pill{background:#7c6cf0}.fi-drop{background:#22d3ee}
.info-foot{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line)}
.reminder-opt{display:block}
.reminder-opt span{width:100%;text-align:left}

/* ---------- Exercise rows ---------- */
.ex-head{display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr 1fr 30px;gap:.5rem;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:700;margin:.5rem 0 .3rem;padding:0 .1rem}
.ex-row{margin-bottom:.5rem}
.ex-grid{display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr 1fr 30px;gap:.5rem;align-items:center}
.ex-grid input,.ex-grid select{min-height:44px;padding:.55rem .5rem;font-size:.9rem;border-radius:10px}
.ex-remove{width:30px;height:30px;border:none;border-radius:9px;cursor:pointer;
  background:#fdeceb;color:#a92f26;font-size:1.15rem;line-height:1;display:grid;place-items:center}
.ex-remove:hover{background:#f6c9c4}
@media(max-width:560px){
  .ex-head{display:none}
  .ex-grid{grid-template-columns:1fr 1fr;gap:.45rem;padding:.75rem;border:1px solid var(--line);
    border-radius:13px;background:#f8fbfc;position:relative}
  .ex-grid .ex-type{grid-column:1 / -1}
  .ex-remove{position:absolute;top:.45rem;right:.45rem;width:26px;height:26px;font-size:1rem}
}

/* ---------- Result: ring + carousel ---------- */
.result-card{background:linear-gradient(180deg,#ffffff,#f4fbfc);border-color:var(--aqua-200)}
.carousel{overflow:hidden;border-radius:14px}
.carousel-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;box-sizing:border-box;padding:.2rem .05rem .4rem;animation:fadein .35s ease both}
.slide-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--aqua-600);
  font-weight:800;margin-bottom:1rem}
.ring-wrap{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.ring{--pct:0;width:158px;height:158px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--aqua-500) calc(var(--pct)*1%),var(--aqua-100) 0);
  transition:background .8s ease;box-shadow:inset 0 0 0 1px var(--aqua-100)}
.ring .inner{width:124px;height:124px;border-radius:50%;background:#fff;display:grid;place-items:center;
  text-align:center;box-shadow:0 8px 18px -12px var(--aqua-600)}
.ring .big{font-size:1.6rem;font-weight:800;color:var(--aqua-700);line-height:1.05}
.ring .lbl{font-size:.72rem;color:var(--muted)}
.stat-line{flex:1;min-width:180px}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;
  font-size:.78rem;font-weight:700}
.badge.low{background:#e6f7ef;color:#0f7a52}
.badge.moderate{background:#fdf3e3;color:#8a5a10}
.badge.high{background:#fdeceb;color:#a92f26}
.electro-flag{display:inline-block;background:#fdf3e3;color:#8a5a10;font-weight:600;font-size:.8rem;
  padding:.3rem .65rem;border-radius:999px}
.carousel-nav{display:flex;align-items:center;justify-content:space-between;margin-top:1.1rem}
.carousel-title{font-weight:700;font-size:.95rem}
.cnav{width:40px;height:40px;border-radius:50%;border:1px solid var(--aqua-200);background:#fff;
  color:var(--aqua-700);font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .12s,transform .06s}
.cnav:hover:not(:disabled){background:var(--aqua-50)}
.cnav:active:not(:disabled){transform:scale(.94)}
.cnav:disabled{opacity:.35;cursor:default}
.dots{display:flex;justify-content:center;gap:.4rem;margin-top:.9rem}
.dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--aqua-200);cursor:pointer;padding:0;transition:all .15s}
.dot.active{background:var(--aqua-500);width:22px;border-radius:5px}

/* ---------- Weather dayparts ---------- */
.wx-city{font-weight:600;color:var(--aqua-700);margin:-.4rem 0 .7rem;font-size:.95rem}
.daypart-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-top:.4rem}
.daypart{border-radius:16px;padding:.9rem .3rem;text-align:center;
  background:linear-gradient(170deg,#ecfeff,#cffafe);border:1px solid var(--aqua-100)}
.daypart.warm{background:linear-gradient(170deg,#fbf1e2,#f7e3c6);border-color:#f2d29f}
.daypart.hot{background:linear-gradient(170deg,#fbeae0,#f6cdb4);border-color:#eeb38f}
.dp-l{font-size:.72rem;color:var(--muted);font-weight:600}
.dp-ic{font-size:1.5rem;line-height:1;margin:.35rem 0}
.dp-t{font-size:1.5rem;font-weight:800;color:var(--aqua-700)}
.daypart.warm .dp-t,.daypart.hot .dp-t{color:#9a5410}
.dp-t span{font-size:.9rem;font-weight:600}
.wx-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;justify-content:center}
.wx-chip{font-size:.8rem;font-weight:600;color:var(--aqua-700);background:var(--aqua-50);
  border:1px solid var(--aqua-100);padding:.35rem .7rem;border-radius:999px}
.wx-chip.hot{color:#9a5410;background:#fbf1e2;border-color:#f2d29f}
@media(max-width:420px){.daypart-strip{gap:.4rem}.daypart{padding:.7rem .15rem}.dp-ic{font-size:1.25rem}.dp-t{font-size:1.25rem}}

/* ---------- Schedule ---------- */
.schedule{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;margin-top:.6rem}
.slot{border:1px solid var(--line);border-radius:13px;padding:.6rem .3rem;text-align:center;
  background:linear-gradient(180deg,#f8fdfe,#eefafc)}
.slot .t{font-size:.76rem;color:var(--muted)}
.slot .m{font-weight:800;color:var(--aqua-700);font-size:1.05rem}

/* ---------- Notes ---------- */
.notes{margin-top:1.1rem;padding-left:0;list-style:none}
.notes li{position:relative;padding:.5rem .5rem .5rem 1.7rem;font-size:.9rem;border-radius:10px;
  background:var(--aqua-50);margin-bottom:.4rem}
.notes li::before{content:"i";position:absolute;left:.6rem;top:.55rem;width:16px;height:16px;border-radius:50%;
  background:var(--aqua-400);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;font-style:normal}

/* ---------- Verify banner + tick, toast ---------- */
.verify-banner{max-width:var(--app-w);margin:1rem auto 0;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;background:#fdf3e3;color:#8a5a10;border:1px solid #f2ddb4;border-radius:12px;
  padding:.6rem .9rem;font-size:.86rem;font-weight:500;animation:slideDown .4s ease both}
.verify-banner a{color:#8a5a10;font-weight:700;white-space:nowrap}
.pop-in{animation:popIn .45s cubic-bezier(.2,.8,.3,1.1) both}
.verify-tick,.verify-cross{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  font-size:2rem;font-weight:800;margin:.2rem 0 1rem;animation:tickPop .5s cubic-bezier(.2,.8,.3,1.2) both}
.verify-tick{background:#e6f7ef;color:#0f7a52}
.verify-cross{background:#fdeceb;color:#a92f26}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:60;
  background:var(--aqua-700);color:#fff;padding:.7rem 1.1rem;border-radius:999px;font-size:.9rem;font-weight:600;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.35);animation:toastIn 3s ease forwards;display:flex;align-items:center;gap:.4rem}

/* ---------- Bottom navigation (always visible, app-like) ---------- */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -18px rgba(8,145,178,.5);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom))}
.bn-inner{max-width:var(--app-w);margin:0 auto;display:flex}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.4rem 0;
  color:var(--muted);font-size:.7rem;font-weight:600;text-decoration:none;border-radius:12px;transition:background .12s}
.bn-item span{font-size:1.35rem;line-height:1}
.bn-item.active{color:var(--aqua-600);background:var(--aqua-50)}
.bn-item:hover{text-decoration:none;color:var(--aqua-600)}

/* ---------- Desktop: frame the phone column ---------- */
@media(min-width:820px){
  body::before{content:"";position:fixed;inset:0;z-index:-1;
    background:radial-gradient(900px 600px at 20% 10%,#dff6fb,transparent 55%),
               radial-gradient(700px 500px at 90% 90%,#e7f0f3,transparent 55%),var(--bg)}
}

/* ---------- Keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,20px)}15%{opacity:1;transform:translate(-50%,0)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}
@keyframes tickPop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes chipPop{0%{transform:scale(.96)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ============ Remaining-water highlight + extra mobile polish ============ */
.goal-sub{font-size:.95rem;color:var(--muted);margin-bottom:.1rem}
.goal-sub b{color:var(--ink);font-weight:700}
.ring .big{font-size:1.9rem}

@media(max-width:560px){
  .card{padding:1.2rem}
  h1{font-size:1.42rem}
  .ring-wrap{flex-direction:column;text-align:center;gap:1rem}
  .stat-line{min-width:0;width:100%}
  .ring{width:172px;height:172px}
  .ring .inner{width:136px;height:136px}
  .ring .big{font-size:2.2rem}
  .ring .lbl{font-size:.78rem}
  .carousel-nav{gap:.4rem}
  .cnav{width:44px;height:44px}          /* bigger thumb targets */
  .slot{padding:.7rem .3rem}
  .slot .m{font-size:1.15rem}
  .opt span{min-height:52px}
  .btn{min-height:54px}
  .wrap{padding-left:.9rem;padding-right:.9rem}
}
@media(max-width:380px){
  .daypart-strip{grid-template-columns:repeat(2,1fr)}   /* 2x2 dayparts on tiny screens */
}

/* ============ Highlighted progress pill (logged / to go) ============ */
.progress-hl{display:inline-block;background:var(--aqua-50);color:var(--aqua-700);
  border:1px solid var(--aqua-200);font-weight:700;font-size:.95rem;
  padding:.5rem .85rem;border-radius:12px;margin:.15rem 0 .45rem;line-height:1.3}
.progress-hl.done{background:#e6f7ef;color:#0f7a52;border-color:#bce6d3}
@media(max-width:560px){ .progress-hl{display:block;text-align:center} }