/* ============ Rose Care 主题 ============ */
:root{
  --rose:#E5798D; --rose-deep:#D6456E; --rose-soft:#F9E2E7;
  --lav:#A78BDB; --lav-soft:#EEE7FA;
  --mint:#6FC7A5; --mint-soft:#E3F4EC;
  --amber:#E8A87C; --amber-soft:#FAEDE2;
  --cream:#FBF6F4; --card:#FFFFFF;
  --ink:#4A3B40; --ink-soft:#8A7378; --line:#F0E2E0;
  --grad:linear-gradient(135deg,#E5798D 0%,#A78BDB 100%);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;
  background:var(--cream);color:var(--ink);line-height:1.6;
  font-size:14px;overscroll-behavior-y:contain}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.mono{font-variant-numeric:tabular-nums}

/* ============ 应用外壳(移动优先,桌面居中) ============ */
#app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--cream);
  box-shadow:0 0 60px rgba(214,69,110,.08);position:relative}
.app-shell{display:flex;flex-direction:column;min-height:100vh}
.page{flex:1;padding:0 0 92px;display:none}
.page.on{display:block;animation:pageIn .32s}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ 登录页 ============ */
.auth-page{min-height:100vh;background:var(--grad);display:flex;flex-direction:column;
  justify-content:center;padding:30px 26px;animation:pageIn .4s}
.auth-logo{text-align:center;color:#fff;margin-bottom:26px}
.auth-logo .i{font-size:46px}
.auth-logo h1{font-size:24px;letter-spacing:3px;margin-top:6px;font-weight:700}
.auth-logo small{opacity:.88;font-size:11px;letter-spacing:1px}
.auth-card{background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  border-radius:22px;padding:20px 18px;border:1px solid rgba(255,255,255,.25)}
.auth-tabs{display:flex;gap:6px;background:rgba(255,255,255,.2);padding:3px;border-radius:12px;margin-bottom:16px}
.auth-tabs button{flex:1;border:none;background:none;color:#fff;padding:9px;border-radius:9px;font-size:13px;opacity:.75}
.auth-tabs button.on{background:#fff;color:var(--rose-deep);font-weight:700;opacity:1}
.auth-err{color:#fff;background:rgba(214,69,110,.55);border-radius:10px;font-size:12px;
  padding:8px 12px;margin-bottom:10px;text-align:center;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.auth-in{width:100%;border:none;background:rgba(255,255,255,.92);border-radius:12px;
  padding:12px 14px;font-size:14px;outline:none;margin-bottom:10px}
.auth-btn{width:100%;border:none;background:#fff;color:var(--rose-deep);font-weight:800;
  border-radius:12px;padding:13px;font-size:15px;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:.2s}
.auth-btn:active{transform:scale(.96)}
.auth-foot{color:rgba(255,255,255,.85);font-size:10px;text-align:center;margin-top:18px;line-height:1.7}

/* ============ 顶部渐变头 ============ */
.scr-head{background:var(--grad);color:#fff;padding:18px 16px 20px;
  border-radius:0 0 26px 26px;position:sticky;top:0;z-index:5}
.date-nav{display:flex;align-items:center;justify-content:space-between}
.d-arrow{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.2);
  border:none;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;transition:.15s}
.d-arrow:active{transform:scale(.9)}
.date-nav b{font-size:16px;letter-spacing:1px}
.greet{font-size:17px;font-weight:700}
.greet-sub{font-size:11.5px;opacity:.92;margin-top:2px}
.pad{padding:14px 14px 26px}

/* ============ 卡片 ============ */
.mcard{background:var(--card);border-radius:18px;padding:14px 15px;margin-bottom:12px;
  box-shadow:0 3px 14px rgba(74,59,64,.05);animation:cardIn .45s both}
.mcard:nth-child(2){animation-delay:.06s}.mcard:nth-child(3){animation-delay:.12s}
.mcard:nth-child(4){animation-delay:.18s}.mcard:nth-child(5){animation-delay:.24s}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mtitle{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.mtitle i{color:var(--rose);font-size:16px}
.mtitle .mini{margin-left:auto;font-size:10.5px;color:var(--ink-soft);font-weight:400}
.empty-guide{text-align:center;padding:26px 18px;color:var(--ink-soft);font-size:12.5px}
.empty-guide i{font-size:26px;color:var(--rose);display:block;margin-bottom:8px}

/* ============ 打卡:chips(开关/量纲/文本) ============ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;
  font-size:12.5px;color:var(--ink-soft);transition:.2s;display:flex;align-items:center;gap:5px;max-width:100%}
.chip:active{transform:scale(.93)}
.chip.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(229,121,141,.35)}
.chip .sub{font-weight:500}
.chip.req-dot::after{content:"*";color:var(--rose-deep);font-weight:800}
.chip.req-dot.on::after{color:#fff}

/* ============ 打卡:计数步进器 ============ */
.step-rows{margin-top:10px}
.step-row{display:flex;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line)}
.step-row:last-child{border-bottom:none}
.step-row .nm{flex:1;font-size:13px}
.step-row .nm .req{color:var(--rose-deep);font-weight:800}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{width:30px;height:30px;border-radius:9px;border:none;background:var(--lav-soft);
  color:#6B5590;font-size:16px;transition:.15s}
.stepper button:active{transform:scale(.85)}
.stepper .val{min-width:40px;text-align:center;font-weight:700;font-size:14px}
.stepper .val.bump{animation:bump .3s}
@keyframes bump{40%{transform:scale(1.25);color:var(--rose-deep)}}

/* ============ 量纲 seg(≤3选项时行内展示) ============ */
.gauge-inline{display:flex;background:var(--cream);border-radius:12px;padding:3px;gap:3px;margin-top:8px;flex-wrap:wrap}
.gauge-inline button{border:none;background:none;padding:6px 12px;border-radius:9px;
  font-size:12px;color:var(--ink-soft)}
.gauge-inline button.on{background:#fff;color:var(--rose-deep);font-weight:700;box-shadow:0 2px 8px rgba(229,121,141,.2)}

/* ============ 饮水 ============ */
.water-wrap{display:flex;align-items:center;gap:14px}
.ring{position:relative;width:92px;height:92px;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-size:16px;font-weight:800;color:var(--rose-deep)}
.ring .num small{font-size:9px;color:var(--ink-soft);font-weight:400}
.ring.ok .num{color:var(--mint)}
.water-btns{flex:1;display:flex;flex-direction:column;gap:8px}
.water-btns button{border:none;background:var(--grad);color:#fff;border-radius:12px;
  padding:10px;font-size:12.5px;box-shadow:0 4px 12px rgba(229,121,141,.3);transition:.2s}
.water-btns button.plain{background:#fff;color:var(--rose-deep);box-shadow:none;border:1.5px solid var(--rose)}
.water-btns button:active{transform:scale(.95)}
.water-manual{display:flex;gap:8px;margin-top:10px;align-items:center}
.water-manual input{flex:1;border:none;background:var(--cream);border-radius:11px;padding:9px 13px;
  font-size:13px;outline:none;font-weight:700}
.water-manual button{border:none;background:var(--rose-soft);color:var(--rose-deep);
  border-radius:11px;padding:9px 16px;font-size:12.5px;font-weight:600}

/* ============ 运动条目 ============ */
.li-item{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:12px;
  padding:10px 11px;margin-bottom:7px;font-size:12.5px}
.li-item i.it{color:var(--lav);font-size:16px}
.li-item .det{flex:1}
.li-item .del{border:none;background:var(--rose-soft);color:var(--rose-deep);
  width:25px;height:25px;border-radius:8px;font-size:12px}
.add-btn{width:100%;border:1.6px dashed var(--rose);background:none;color:var(--rose-deep);
  border-radius:12px;padding:9px;font-size:12.5px;transition:.2s}
.add-btn:active{background:var(--rose-soft)}

/* ============ 泡脚/体重 ============ */
.toggle-row{display:flex;align-items:center;gap:9px;font-size:13px}
.toggle{margin-left:auto;width:46px;height:26px;border-radius:999px;background:#E8DCDA;
  border:none;position:relative;transition:.25s;flex-shrink:0}
.toggle::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.toggle.on{background:var(--mint)}
.toggle.on::after{left:23px}
.w-input{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.w-input input{width:100%;border:none;background:var(--cream);border-radius:11px;
  padding:9px 13px;font-size:15px;font-weight:700;outline:none}
.w-input input.err{outline:2px solid var(--rose-deep)}

/* ============ 文本域 ============ */
.note-in{width:100%;border:none;background:var(--cream);border-radius:12px;padding:11px 13px;
  font-size:13px;outline:none;resize:none;min-height:64px}
.field-err{color:var(--rose-deep);font-size:11px;margin-top:4px}

/* ============ 保存按钮 ============ */
.save-btn{width:100%;border:none;background:var(--grad);color:#fff;border-radius:16px;
  padding:14px;font-size:15px;font-weight:700;letter-spacing:4px;
  box-shadow:0 8px 20px rgba(229,121,141,.35);transition:.25s;position:sticky;bottom:84px;z-index:4}
.save-btn:active{transform:scale(.97)}
.save-btn.done{background:var(--mint)}
.save-btn.done i{display:inline-block;animation:checkPop .5s}
@keyframes checkPop{0%{transform:scale(0)}60%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ============ 底部 Tab ============ */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  display:flex;background:#fff;border-top:1px solid var(--line);
  padding:6px 4px calc(8px + env(safe-area-inset-bottom));z-index:20;border-radius:20px 20px 0 0;
  box-shadow:0 -4px 24px rgba(74,59,64,.06)}
.tabbar button{flex:1;border:none;background:none;font-size:11px;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:14px;transition:.25s}
.tabbar button i{font-size:22px}
.tabbar button.on{color:var(--rose-deep)}
.tabbar button.on i{transform:translateY(-3px) scale(1.12)}
.tabbar button.on::after{content:"";width:18px;height:3px;border-radius:3px;background:var(--grad);margin-top:1px}

/* ============ 日历 ============ */
.cal-head{display:flex;align-items:center;justify-content:space-between;font-size:15px}
.cal-head b{color:#fff}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px;text-align:center}
.cal-grid .wk{padding:4px 0;font-size:10px;opacity:.85;color:#fff}
.cal-cell{background:#fff;border-radius:11px;padding:7px 2px 10px;position:relative;
  color:var(--ink);font-weight:600;font-size:12.5px;min-height:38px;transition:.18s}
.cal-cell:active{transform:scale(.9)}
.cal-cell.blank{background:rgba(255,255,255,.22);color:rgba(255,255,255,.5)}
.cal-cell.today{outline:2.5px solid #fff;font-weight:800}
.cal-cell .dot{width:6px;height:6px;border-radius:50%;position:absolute;bottom:4px;
  left:50%;transform:translateX(-50%)}
.cal-cell .dot.pink{background:var(--rose)}
.cal-cell .dot.amber{background:var(--amber)}
.cal-cell .dot.bleed{background:var(--rose-deep);animation:breath 1.8s infinite}
@keyframes breath{0%{box-shadow:0 0 0 0 rgba(214,69,110,.45)}70%{box-shadow:0 0 0 7px rgba(214,69,110,0)}100%{box-shadow:0 0 0 0 rgba(214,69,110,0)}}
.cal-legend{display:flex;gap:12px;font-size:10.5px;color:var(--ink-soft);flex-wrap:wrap;
  margin-top:14px;padding:10px 12px;background:rgba(255,255,255,.6);border-radius:12px}
.cal-legend span{display:flex;align-items:center;gap:5px}
.cal-legend .lg{width:9px;height:9px;border-radius:50%;display:inline-block}

/* ============ 数据页 ============ */
.stat-hero{display:flex;gap:10px;margin-bottom:12px}
.stat-hero .sc{flex:1;background:#fff;border-radius:16px;padding:12px 8px;text-align:center;
  box-shadow:0 3px 12px rgba(74,59,64,.05)}
.stat-hero .sc i{font-size:20px;color:var(--rose)}
.stat-hero .sc .v{font-size:19px;font-weight:800;margin-top:3px}
.stat-hero .sc .v em{font-style:normal;font-size:10px;color:var(--ink-soft);font-weight:400}
.stat-hero .sc .l{font-size:10px;color:var(--ink-soft);margin-top:2px}
.chart-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.chart-title i{color:var(--rose)}
.chart-title .mini{margin-left:auto;font-size:10.5px;font-weight:400;color:var(--ink-soft)}
.chart-box{width:100%;height:180px}
.tl-item{display:flex;gap:10px;align-items:center;padding:9px 2px;
  border-bottom:1px dashed var(--line);font-size:12.5px}
.tl-item:last-child{border:none}
.tl-item .tl-d{color:var(--ink-soft);width:82px;flex-shrink:0}
.tl-badge{border-radius:999px;padding:2px 10px;font-size:11px;background:var(--rose-soft);
  color:var(--rose-deep);font-weight:600}
.month-sw{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.month-sw b{font-size:15px}

/* ============ 我的页 ============ */
.me-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0 18px}
.avatar{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.25);
  border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:36px}
.me-hero b{font-size:16px}
.me-hero small{color:rgba(255,255,255,.92);font-size:11.5px}
.menu{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 3px 14px rgba(74,59,64,.05)}
.menu button{width:100%;display:flex;align-items:center;gap:11px;border:none;background:none;
  padding:14px 16px;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--line);text-align:left}
.menu button:last-child{border-bottom:none}
.menu button.danger{color:var(--rose-deep)}
.menu button i:first-child{color:var(--rose);font-size:17px}
.menu button .ar{margin-left:auto;color:#D8C9C7;font-size:15px}
.menu button .sub2{color:var(--ink-soft);font-size:11px;margin-left:6px}
.menu button:active{background:var(--cream)}
.me-foot{text-align:center;font-size:10.5px;color:var(--ink-soft);margin-top:16px;line-height:1.7}
.back-btn{display:flex;align-items:center;gap:7px;border:none;background:var(--rose-soft);
  color:var(--rose-deep);padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;margin-bottom:14px}

/* ============ 表单(资料/密码/打卡项) ============ */
.form-card{background:#fff;border-radius:18px;padding:18px 16px;box-shadow:0 3px 14px rgba(74,59,64,.05)}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px}
.form-row label .req{color:var(--rose-deep)}
.form-row input,.form-row select,.form-row textarea{width:100%;border:none;background:var(--cream);
  border-radius:11px;padding:11px 13px;font-size:13.5px;outline:none}
.form-row textarea{min-height:80px;resize:vertical;line-height:1.6}
.form-row .hint{font-size:10.5px;color:var(--ink-soft);margin-top:5px;line-height:1.5}
.type-seg{display:flex;gap:6px;flex-wrap:wrap}
.type-seg button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:11px;
  padding:9px 4px;font-size:12px;color:var(--ink-soft);min-width:70px}
.type-seg button.on{border-color:var(--rose);color:var(--rose-deep);background:var(--rose-soft);font-weight:700}
.opt-checks{display:flex;flex-wrap:wrap;gap:8px}
.opt-checks .oc{border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 12px;font-size:12px;color:var(--ink-soft)}
.opt-checks .oc.on{background:var(--grad);color:#fff;border-color:transparent;font-weight:600}
.form-btns{display:flex;gap:10px;margin-top:6px}
.btn-pri{flex:1;border:none;background:var(--grad);color:#fff;border-radius:13px;
  padding:12px;font-size:14px;font-weight:700;box-shadow:0 6px 16px rgba(229,121,141,.3)}
.btn-ghost{border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);
  border-radius:13px;padding:12px 18px;font-size:13px}
.btn-pri:active,.btn-ghost:active{transform:scale(.97)}
.avatar-pick{display:flex;gap:8px;flex-wrap:wrap}
.avatar-pick button{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);
  background:#fff;font-size:22px}
.avatar-pick button.on{border-color:var(--rose);background:var(--rose-soft)}

/* ============ 打卡项列表 ============ */
.it-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;
  padding:12px 14px;margin-bottom:10px;box-shadow:0 3px 10px rgba(74,59,64,.04)}
.it-row.off{opacity:.55}
.it-row .it-ic{width:38px;height:38px;border-radius:12px;background:var(--lav-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#6B5590;flex-shrink:0}
.it-row .it-info{flex:1;min-width:0}
.it-row .it-info b{font-size:13.5px;display:flex;align-items:center;gap:6px}
.it-row .it-info .tags{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap}
.it-row .it-info .t{font-size:9.5px;padding:1px 8px;border-radius:99px;background:var(--cream);color:var(--ink-soft)}
.it-row .it-info .t.req{background:var(--rose-soft);color:var(--rose-deep)}
.it-row .it-info .t.focus{background:var(--mint-soft);color:#2E8B68}
.it-row .it-info .t.off{background:#EDE4E3}
.it-acts{display:flex;gap:6px}
.it-acts button{border:none;width:30px;height:30px;border-radius:9px;background:var(--cream);color:var(--ink-soft);font-size:13px}
.it-acts button.del{background:var(--rose-soft);color:var(--rose-deep)}

/* ============ 导入 ============ */
.import-preview{background:var(--mint-soft);border-radius:12px;padding:12px 14px;
  font-size:12.5px;color:#2E8B68;margin:12px 0}
.file-btn{position:relative;overflow:hidden;display:inline-block}
.file-btn input{position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer}
.file-btn .fb{display:inline-block;border:1.6px dashed var(--rose);color:var(--rose-deep);
  border-radius:12px;padding:14px;font-size:13px;width:100%;text-align:center}

/* ============ 弹层 & toast ============ */
.sheet-mask{position:fixed;inset:0;background:rgba(74,59,64,.35);z-index:60;opacity:0;
  transition:.3s;pointer-events:none;max-width:520px;margin:0 auto}
.sheet-mask.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;bottom:0;left:50%;transform:translate(-50%,105%);width:100%;max-width:520px;
  background:#fff;border-radius:26px 26px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  transition:transform .35s cubic-bezier(.22,1.2,.36,1);box-shadow:0 -10px 40px rgba(74,59,64,.18);z-index:61}
.sheet.on{transform:translate(-50%,0)}
.sheet h5{font-size:14.5px;text-align:center;margin-bottom:16px}
.sheet .opts{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.sheet .opt{border:1.6px solid var(--line);background:#fff;border-radius:999px;
  padding:10px 16px;font-size:13px;color:var(--ink-soft);transition:.2s}
.sheet .opt:active{transform:scale(.93)}
.sheet .opt.on{background:var(--grad);color:#fff;border-color:transparent;font-weight:700}
.sheet .sub-title{font-size:11px;color:var(--ink-soft);margin:14px 0 8px;text-align:center}
.sheet .cancel{width:100%;margin-top:16px;border:none;background:var(--cream);border-radius:12px;
  padding:11px;font-size:13px;color:var(--ink-soft)}
.sheet .ok-btn{width:100%;margin-top:14px;border:none;background:var(--grad);color:#fff;
  border-radius:12px;padding:12px;font-size:14px;font-weight:700}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(14px);
  background:rgba(74,59,64,.9);color:#fff;font-size:13px;padding:11px 22px;border-radius:999px;
  z-index:99;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap;max-width:88vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}