/* 喝水排石 — 样式 */
:root{
  --bg:#eef5fa;
  --bg2:#f7fbfd;
  --card:#ffffff;
  --ink:#0e2a3c;
  --ink2:#5b7c93;
  --ink3:#93aec0;
  --line:#e2edf4;
  --sky:#0ea5e9;
  --cyan:#06b6d4;
  --grad:linear-gradient(135deg,#38bdf8 0%,#06b6d4 100%);
  --grad-soft:linear-gradient(135deg,#e0f2fe 0%,#cffafe 100%);
  --ok:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --r:18px;
  --shadow:0 4px 18px rgba(14,90,140,.08);
  --shadow-lg:0 10px 34px rgba(14,90,140,.14);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none;padding:0}
a{color:var(--sky);text-decoration:none}

#app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--bg2);
  box-shadow:0 0 40px rgba(14,90,140,.06);position:relative;padding-bottom:calc(74px + var(--safe-b))}

/* ---------- 启动占位 ---------- */
.boot{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh;gap:14px;color:var(--ink3)}
.boot-drop{width:34px;height:34px;background:var(--grad);border-radius:50% 50% 50% 0;transform:rotate(-45deg);animation:bp 1.2s ease-in-out infinite}
@keyframes bp{0%,100%{transform:rotate(-45deg) scale(1);opacity:1}50%{transform:rotate(-45deg) scale(.82);opacity:.6}}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  padding:calc(14px + var(--safe-t)) 18px 12px;
  background:rgba(247,251,253,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.3px}
.topbar .sub{font-size:12px;color:var(--ink3);margin-top:1px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;box-shadow:0 3px 10px rgba(6,182,212,.3)}

/* ---------- 容器 ---------- */
.page{padding:6px 16px 20px;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.card.tight{padding:14px}
.card h2{font-size:15px;margin:0 0 12px;font-weight:650;display:flex;align-items:center;gap:7px}
.card h2 .hint{margin-left:auto;font-size:12px;font-weight:400;color:var(--ink3)}

/* ---------- 进度环 ---------- */
.ring-wrap{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px}
.ring{position:relative;width:216px;height:216px}
.ring svg{transform:rotate(-90deg);display:block}
.ring .track{fill:none;stroke:#e6f1f8;stroke-width:15;stroke-linecap:round}
.ring .bar{fill:none;stroke:url(#gradRing);stroke-width:15;stroke-linecap:round;
  transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)}
.ring .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring .num{font-size:42px;font-weight:750;letter-spacing:-1.5px;line-height:1;
  font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ring .num.done{background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;background-clip:text}
.ring .unit{font-size:13px;color:var(--ink3);margin-top:-2px}
.ring .goal{font-size:12.5px;color:var(--ink2);margin-top:8px;padding:3px 11px;background:#f0f7fc;border-radius:20px}

.ring-legend{display:flex;gap:20px;margin-top:16px;text-align:center}
.ring-legend .item{min-width:74px}
.ring-legend b{display:block;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.ring-legend span{font-size:11.5px;color:var(--ink3)}

/* ---------- 快捷加水 ---------- */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.qbtn{background:var(--card);border-radius:15px;padding:14px 12px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:11px;text-align:left;transition:transform .12s,box-shadow .12s}
.qbtn:active{transform:scale(.965)}
.qbtn .ic{width:38px;height:38px;border-radius:11px;background:var(--grad-soft);display:grid;place-items:center;font-size:19px;flex:none}
.qbtn .t1{font-weight:640;font-size:14.5px;line-height:1.2}
.qbtn .t2{font-size:11.5px;color:var(--ink3);margin-top:1px}
.qbtn.primary{background:var(--grad);box-shadow:0 6px 20px rgba(6,182,212,.3)}
.qbtn.primary .t1,.qbtn.primary .t2{color:#fff}
.qbtn.primary .t2{opacity:.82}
.qbtn.primary .ic{background:rgba(255,255,255,.22)}

/* ---------- 记录列表 ---------- */
.rec{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:none}
.rec .dot{width:9px;height:9px;border-radius:50%;flex:none}
.rec .nm{flex:1;min-width:0}
.rec .nm b{display:block;font-weight:560;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .nm span{font-size:11.5px;color:var(--ink3)}
.rec .ml{font-weight:680;font-variant-numeric:tabular-nums;font-size:15px}
.rec .del{width:28px;height:28px;border-radius:8px;color:var(--ink3);display:grid;place-items:center;flex:none}
.rec .del:active{background:#fee2e2;color:var(--bad)}

.empty{text-align:center;padding:30px 12px;color:var(--ink3);font-size:13.5px}
.empty .big{font-size:32px;display:block;margin-bottom:8px;opacity:.55}

/* ---------- 提示条 ---------- */
.alert{border-radius:14px;padding:12px 14px;margin-bottom:12px;display:flex;gap:10px;font-size:13.2px;line-height:1.5}
.alert .ai{font-size:16px;flex:none;line-height:1.35}
.alert b{display:block;margin-bottom:2px;font-weight:640}
.alert.high{background:#fef2f2;color:#991b1b}
.alert.mid{background:#fffbeb;color:#92400e}
.alert.low{background:#f0f9ff;color:#075985}
.alert.info{background:#f0fdfa;color:#115e59}
.alert.ok{background:#f0fdf4;color:#166534}
.alert.danger{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}

/* ---------- 表单 ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink2)}
.field .tip{font-size:11.5px;color:var(--ink3);margin-top:6px;line-height:1.45}
.input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:13px;background:#fbfdff;
  outline:none;transition:border-color .16s,box-shadow .16s}
.input:focus{border-color:var(--sky);box-shadow:0 0 0 3.5px rgba(14,165,233,.12);background:#fff}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393aec0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.btn{width:100%;padding:15px;border-radius:15px;background:var(--grad);color:#fff;font-weight:660;
  font-size:16px;box-shadow:0 6px 20px rgba(6,182,212,.28);transition:transform .12s;letter-spacing:.2px}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.55;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink2);box-shadow:var(--shadow);border:1.5px solid var(--line)}
.btn.sm{padding:11px;font-size:14px;border-radius:12px}
.btn.danger{background:#fff;color:var(--bad);border:1.5px solid #fecaca;box-shadow:none}

/* 选项芯片 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 14px;border-radius:11px;background:#f4f9fc;border:1.5px solid transparent;font-size:13.5px;
  color:var(--ink2);transition:all .15s;font-weight:520}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(6,182,212,.26);font-weight:600}
.chip.warn.on{background:linear-gradient(135deg,#f59e0b,#f97316);box-shadow:0 4px 12px rgba(245,158,11,.3)}

/* 饮品网格 */
.drinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.dk{background:#fbfdff;border:1.5px solid var(--line);border-radius:13px;padding:11px 12px;text-align:left;
  transition:all .15s;position:relative;overflow:hidden}
.dk:active{transform:scale(.97)}
.dk.on{border-color:var(--sky);background:#f0faff;box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.dk .n{font-size:13.5px;font-weight:580;line-height:1.3}
.dk .s{font-size:11px;color:var(--ink3);margin-top:3px;display:flex;align-items:center;gap:5px}
.dk .bar{position:absolute;left:0;bottom:0;height:3px;border-radius:0 3px 3px 0}

/* 容量 */
.mls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.ml{background:#f4f9fc;border-radius:12px;padding:13px 4px;text-align:center;font-weight:640;
  font-variant-numeric:tabular-nums;transition:all .15s;border:1.5px solid transparent}
.ml:active{transform:scale(.95)}
.ml.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(6,182,212,.3)}
.ml small{display:block;font-size:10px;font-weight:400;opacity:.62;margin-top:1px}

/* ---------- 图表 ---------- */
.bars{display:flex;align-items:flex-end;gap:5px;height:130px;padding-top:8px}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0}
.bar .col{width:100%;border-radius:6px 6px 3px 3px;background:var(--grad);min-height:3px;transition:height .6s cubic-bezier(.22,1,.36,1);position:relative}
.bar .col.miss{background:#dce9f2}
.bar .col .pct{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--ink3);white-space:nowrap}
.bar .lb{font-size:9.5px;color:var(--ink3);white-space:nowrap;transform:scale(.92)}
.tgtline{position:relative;border-top:1.5px dashed #bcd7e6;margin-bottom:-1px}

.hbars{display:flex;flex-direction:column;gap:11px}
.hb{display:flex;align-items:center;gap:10px;font-size:13px}
.hb .lbl{width:96px;flex:none;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .trk{flex:1;height:8px;background:#eef5fa;border-radius:5px;overflow:hidden}
.hb .fl{height:100%;border-radius:5px;background:var(--grad);transition:width .7s cubic-bezier(.22,1,.36,1)}
.hb .vl{width:62px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink3);font-size:12px;flex:none}

.hours{display:flex;gap:2px;align-items:flex-end;height:60px}
.hours .h{flex:1;background:#dce9f2;border-radius:3px 3px 1px 1px;min-height:2px;transition:height .5s}
.hours .h.act{background:var(--grad)}
.hour-labels{display:flex;gap:2px;margin-top:5px;font-size:9px;color:var(--ink3)}
.hour-labels span{flex:1;text-align:center}

/* ---------- 排行 ---------- */
.rank{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:none}
.rank .no{width:26px;text-align:center;font-weight:750;font-size:15px;color:var(--ink3);flex:none;font-variant-numeric:tabular-nums}
.rank .no.g1{color:#f59e0b}.rank .no.g2{color:#94a3b8}.rank .no.g3{color:#d97706}
.rank .av{width:38px;height:38px;border-radius:50%;background:var(--grad-soft);color:var(--sky);
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.rank .info{flex:1;min-width:0}
.rank .info b{display:block;font-size:14.5px;font-weight:570;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .info .pbar{height:5px;background:#eef5fa;border-radius:3px;margin-top:5px;overflow:hidden}
.rank .info .pbar i{display:block;height:100%;background:var(--grad);border-radius:3px;transition:width .7s}
.rank .amt{text-align:right;flex:none}
.rank .amt b{display:block;font-size:15px;font-variant-numeric:tabular-nums;font-weight:700}
.rank .amt span{font-size:10.5px;color:var(--ink3)}
.rank.me{background:linear-gradient(90deg,#f0faff,transparent);border-radius:11px;padding-left:8px;padding-right:8px}
.rank .medal{font-size:19px;width:26px;text-align:center;flex:none}

.seg{display:flex;background:#eef5fa;border-radius:12px;padding:3px;margin-bottom:14px}
.seg button{flex:1;padding:9px;border-radius:10px;font-size:13.5px;font-weight:560;color:var(--ink2);transition:all .2s}
.seg button.on{background:#fff;color:var(--sky);box-shadow:0 2px 8px rgba(14,90,140,.1);font-weight:650}

/* ---------- 时间表 ---------- */
.tl{position:relative;padding-left:4px}
.tl .it{display:flex;gap:12px;padding:9px 0;align-items:flex-start}
.tl .tm{width:48px;flex:none;font-size:12.5px;font-weight:650;color:var(--sky);font-variant-numeric:tabular-nums;padding-top:1px}
.tl .bd{flex:1}
.tl .bd .l1{font-size:14px;font-weight:550}
.tl .bd .l2{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.45}
.tl .ml2{margin-left:auto;font-size:13.5px;font-weight:640;color:var(--ink2);flex:none;font-variant-numeric:tabular-nums}

/* ---------- 底栏 ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;z-index:30;
  background:rgba(255,255,255,.93);backdrop-filter:blur(18px);border-top:1px solid var(--line);
  display:flex;padding:7px 6px calc(7px + var(--safe-b));}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;
  color:var(--ink3);font-size:10.5px;font-weight:520;transition:color .18s}
.tabbar button svg{width:23px;height:23px;stroke-width:1.9}
.tabbar button.on{color:var(--sky);font-weight:650}
.tabbar button.on svg{stroke-width:2.3}
.tabbar .fab{position:relative;top:-15px}
.tabbar .fab .cir{width:50px;height:50px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  box-shadow:0 7px 20px rgba(6,182,212,.42);color:#fff;margin-bottom:-2px}
.tabbar .fab .cir svg{stroke:#fff;width:26px;height:26px}
.tabbar .fab span{margin-top:3px}

/* ---------- 提示 ---------- */
#toast-wrap{position:fixed;top:calc(16px + var(--safe-t));left:0;right:0;z-index:99;display:flex;
  flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:rgba(14,42,60,.94);color:#fff;padding:11px 20px;border-radius:26px;font-size:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.22);animation:tin .3s cubic-bezier(.22,1,.36,1);max-width:100%;backdrop-filter:blur(8px)}
.toast.bad{background:rgba(185,28,28,.95)}
.toast.good{background:rgba(5,150,105,.95)}
@keyframes tin{from{opacity:0;transform:translateY(-14px) scale(.94)}to{opacity:1;transform:none}}

/* ---------- 弹层 ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(14,42,60,.42);z-index:40;backdrop-filter:blur(3px);
  animation:fade .2s;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;background:#fff;border-radius:24px 24px 0 0;padding:20px 18px calc(20px + var(--safe-b));
  max-height:88vh;overflow-y:auto;animation:up .32s cubic-bezier(.22,1,.36,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sheet .hd h3{margin:0;font-size:17px;font-weight:680}
.sheet .hd .x{width:32px;height:32px;border-radius:50%;background:#f0f7fc;display:grid;place-items:center;color:var(--ink2)}
.grabber{width:38px;height:4px;background:#dbe8f1;border-radius:3px;margin:-8px auto 14px}

/* ---------- 登录 ---------- */
.auth{padding:0 26px 40px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:440px;margin:0 auto}
.auth .logo{width:74px;height:74px;border-radius:22px;background:var(--grad);display:grid;place-items:center;
  margin:0 auto 18px;box-shadow:0 12px 32px rgba(6,182,212,.34)}
.auth .logo svg{width:42px;height:42px}
.auth h1{text-align:center;font-size:23px;margin:0 0 5px;font-weight:730;letter-spacing:-.5px}
.auth .sub{text-align:center;color:var(--ink3);font-size:13px;margin-bottom:26px}
.auth .switch{text-align:center;margin-top:18px;font-size:13.5px;color:var(--ink3)}
.auth .switch button{color:var(--sky);font-weight:600}
.disclaimer{font-size:11.5px;color:var(--ink3);line-height:1.55;margin-top:22px;padding:12px 14px;
  background:#f7fbfd;border-radius:12px;border:1px solid var(--line)}

/* ---------- 我的 ---------- */
.menu{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
.menu .mi{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.menu .mi:last-child{border-bottom:none}
.menu .mi .mi-ic{font-size:17px;width:22px;text-align:center;flex:none}
.menu .mi .mi-t{flex:1;font-size:14.5px;font-weight:520}
.menu .mi .mi-v{font-size:13px;color:var(--ink3)}
.menu .mi .arrow{color:var(--ink3);font-size:17px}

.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat3 .s{background:var(--card);border-radius:15px;padding:14px 10px;text-align:center;box-shadow:var(--shadow)}
.stat3 .s b{display:block;font-size:20px;font-weight:730;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat3 .s span{font-size:11px;color:var(--ink3)}

.breakdown{font-size:12.8px;color:var(--ink2)}
.breakdown .bd-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.breakdown .bd-row:last-child{border-bottom:none}
.breakdown .bd-row b{font-variant-numeric:tabular-nums;color:var(--ink);flex:none}
.breakdown .bd-row .nm{flex:1}

@media(max-width:360px){
  .drinks{grid-template-columns:1fr 1fr}
  .mls{grid-template-columns:repeat(3,1fr)}
}