/* ============================================
   打卡页
   设计立场：这不是签到游戏。用户抽了就记，抽了不惩罚。
   页面回答三个问题：我还在坚持吗 / 今天怎么样 / 这些天怎么走的
   ============================================ */

/* ── 今日状态卡：最重要，放最上面 ── */
.today-state{
  border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-3);
  color:#fff;box-shadow:var(--sh-2);position:relative;overflow:hidden;
}
.today-state.clean{background:linear-gradient(155deg,var(--c-primary),var(--c-primary-mid))}
.today-state.broken{background:linear-gradient(155deg,#8a6274,#6d4a5c)}
.today-state.idle{background:linear-gradient(155deg,#7d8683,#5f6866)}
.ts-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3)}
.ts-day{font-size:var(--t-xs);color:rgba(255,255,255,.82);letter-spacing:1px}
.ts-badge{
  background:rgba(255,255,255,.2);padding:4px 11px;border-radius:var(--r-full);
  font-size:var(--t-xs);font-weight:500;
}
.ts-main{text-align:center;padding:var(--sp-4) 0 var(--sp-3)}
.ts-num{
  font-size:56px;font-weight:700;line-height:1;letter-spacing:-2px;
  font-variant-numeric:tabular-nums;display:block;
}
.ts-unit{font-size:var(--t-md);font-weight:500;margin-left:4px;opacity:.9}
.ts-label{font-size:var(--t-sm);color:rgba(255,255,255,.88);margin-top:var(--sp-2)}
.ts-detail{
  display:flex;justify-content:center;gap:var(--sp-5);
  padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.18);
}
.ts-detail div{text-align:center}
.ts-detail .v{
  font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums;
}
.ts-detail .k{font-size:10.5px;color:rgba(255,255,255,.75);margin-top:1px}

/* 今日动作区 */
.ts-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4)}
.ts-btn{
  padding:13px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;
  border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);
  color:#fff;transition:background var(--dur-fast) var(--ease);
  min-height:46px;
}
.ts-btn:hover{background:rgba(255,255,255,.22)}
.ts-btn.primary{background:#fff;color:var(--c-primary);border-color:#fff}
.ts-btn.primary:hover{background:#f0f6ff}

/* ── 连续打卡条 ── */
.streak-strip{
  display:flex;align-items:center;gap:var(--sp-3);background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);
}
.streak-num{
  font-size:var(--t-xl);font-weight:700;color:var(--c-warn);
  font-variant-numeric:tabular-nums;line-height:1;
}
.streak-txt{font-size:var(--t-sm);color:var(--c-ink-2)}
.streak-txt small{display:block;font-size:var(--t-xs);color:var(--c-ink-4)}

/* ── 迷你周条 ── */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:var(--sp-2)}
.week .d{
  aspect-ratio:1;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:var(--t-xs);background:var(--c-line-soft);
  color:var(--c-ink-4);position:relative;min-height:32px;
}
.week .d.clean{background:var(--c-primary);color:#fff;font-weight:600}
.week .d.broken{background:var(--c-alert-soft);color:var(--c-alert)}
.week .d.today{outline:2px solid var(--c-primary);outline-offset:1px}
.week .d .lb{position:absolute;bottom:-13px;left:0;right:0;text-align:center;
font-size:9px;color:var(--c-ink-4)}

/* ── 趋势区 ── */
.trend-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3)}
.trend-tabs{display:flex;gap:4px;background:var(--c-line-soft);padding:2px;border-radius:8px}
.trend-tabs button{
  padding:5px 12px;border-radius:6px;font-size:var(--t-xs);color:var(--c-ink-3);
  transition:all var(--dur-fast) var(--ease);
}
.trend-tabs button.on{background:var(--c-surface);color:var(--c-primary);font-weight:600;
box-shadow:var(--sh-1)}

/* 折线图容器 */
.spark{position:relative;height:132px;margin:0 0 var(--sp-3)}
.spark svg{width:100%;height:100%;overflow:visible}
.spark .line{fill:none;stroke:var(--c-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark .area{fill:url(#sparkGrad);opacity:.28}
.spark .pt{fill:#fff;stroke:var(--c-primary);stroke-width:2}
.spark .grid{stroke:var(--c-line-soft);stroke-width:1;stroke-dasharray:3 3}
.spark-x{display:flex;justify-content:space-between;font-size:10px;color:var(--c-ink-4);
margin-top:var(--sp-2)}

/* 柱状图（场景分布） */
.hbars{display:flex;flex-direction:column;gap:var(--sp-3)}
.hbar{display:flex;align-items:center;gap:var(--sp-3)}
.hbar .lb{width:72px;font-size:var(--t-xs);color:var(--c-ink-2);flex:0 0 72px}
.hbar .track{flex:1;height:22px;background:var(--c-line-soft);border-radius:5px;overflow:hidden}
.hbar .fill{
  height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--c-primary-mid),var(--c-primary));
  transition:width .5s var(--ease-out);
}
.hbar .pct{
  width:52px;text-align:right;font-size:var(--t-xs);color:var(--c-ink-3);
  flex:0 0 52px;font-variant-numeric:tabular-nums;
}
.hbar .pct b{color:var(--c-ink);font-weight:600}

/* ── 里程碑时间轴 ── */
.tl{position:relative;padding-left:var(--sp-5)}
.tl::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;
background:var(--c-line)}
.tl-item{position:relative;padding-bottom:var(--sp-4)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-20px;top:3px;width:10px;height:10px;
  border-radius:50%;background:var(--c-surface);border:2px solid var(--c-line);
}
.tl-item.done::before{background:var(--c-primary);border-color:var(--c-primary)}
.tl-item.now::before{
  background:var(--c-surface);border-color:var(--c-primary);
  box-shadow:0 0 0 4px var(--c-primary-soft);
}
.tl-t{font-size:var(--t-sm);font-weight:600;display:flex;align-items:center;gap:var(--sp-2)}
.tl-t .when{font-size:10.5px;color:var(--c-ink-4);font-weight:400}
.tl-d{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:2px}

/* ── 收益结算卡 ── */
.settle{
  background:linear-gradient(150deg,var(--c-primary-soft),#fff);
  border:1px solid #bfe5dd;border-radius:var(--r-md);padding:var(--sp-4);
  margin-bottom:var(--sp-3);
}
.settle-row{display:flex;justify-content:space-between;align-items:baseline;
padding:var(--sp-2) 0}
.settle-row .k{font-size:var(--t-sm);color:var(--c-ink-2)}
.settle-row .v{font-size:var(--t-lg);font-weight:600;color:var(--c-primary-ink);
font-variant-numeric:tabular-nums}
.settle-note{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:var(--sp-2);
padding-top:var(--sp-3);border-top:1px dashed #c5e5de}

/* ── 操作反馈 ── */
.toast{
  position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  background:rgba(22,33,31,.94);color:#fff;padding:11px 20px;border-radius:22px;
  font-size:var(--t-sm);z-index:300;opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out);
  max-width:calc(100% - 40px);text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 记录成功后的轻反馈 */
.flash{animation:flash-bg .6s var(--ease)}
@keyframes flash-bg{
  0%{background-color:var(--c-primary-soft)}
  100%{background-color:transparent}
}