:root{
  --bg:#0b1220;--panel:#151f33;--panel2:#1b2940;--text:#f7fbff;--muted:#a9b6ca;
  --blue:#86c1ff;--pink:#ff9bc7;--mint:#8ee2c2;--yellow:#ffdf88;--danger:#ff999c;
  --line:rgba(255,255,255,.09);--shadow:0 18px 50px rgba(0,0,0,.25)
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Helvetica Neue",Arial,sans-serif;background:
radial-gradient(circle at 5% 0%,rgba(134,193,255,.13),transparent 34%),
radial-gradient(circle at 100% 20%,rgba(255,155,199,.09),transparent 27%),var(--bg)}
button,input{font:inherit}
button{cursor:pointer}
.shell{width:min(720px,100%);margin:0 auto;padding:env(safe-area-inset-top) 18px calc(34px + env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 4px 10px}
.date{color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.06em}
h1{font-size:28px;margin:5px 0 0}
.more-btn,.close-btn{border:1px solid var(--line);background:#1a2940;color:white;border-radius:14px;padding:10px 14px;font-weight:800}
.close-btn{width:42px;height:42px;padding:0;font-size:23px}
.status-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.streak,.success{display:inline-flex;padding:8px 11px;border-radius:999px;font-size:13px;font-weight:800}
.streak{background:rgba(134,193,255,.14);color:var(--blue)}
.success{background:rgba(255,255,255,.06);color:var(--muted)}
.success.done{background:rgba(142,226,194,.14);color:var(--mint)}
.focus-card,.reward-card,.done-card,.more-panel{
  border:1px solid var(--line);border-radius:28px;padding:24px;margin:14px 0;background:
  linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025)),var(--panel);box-shadow:var(--shadow)
}
.focus-card{text-align:center;min-height:460px;display:flex;flex-direction:column;justify-content:center}
.step-kicker{color:var(--blue);font-weight:800;font-size:14px;margin-bottom:14px}
.step-icon{font-size:54px;margin-bottom:8px}
h2{font-size:34px;line-height:1.15;margin:12px 0 10px}
.focus-card p,.done-card p{color:#d8e4f2;line-height:1.65;font-size:16px;margin:0 auto 16px;max-width:520px}
.action-stack{display:grid;gap:10px;margin-top:10px}
.primary,.secondary,.ghost,.danger,.rescue-btn{
  width:100%;border-radius:18px;padding:16px 18px;min-height:54px;font-weight:850
}
.primary{border:0;background:linear-gradient(90deg,var(--blue),var(--pink));color:#0a1220}
.secondary{border:1px solid var(--line);background:#223550;color:white;margin-top:9px}
.secondary.accent{background:linear-gradient(90deg,rgba(142,226,194,.18),rgba(134,193,255,.14))}
.ghost{border:1px solid var(--line);background:transparent;color:white;margin-top:9px}
.danger{border:1px solid rgba(255,153,156,.25);background:rgba(255,153,156,.10);color:#ffc6c8;margin-top:9px}
.rescue-btn{border:0;background:transparent;color:var(--yellow);margin-top:10px}
.why-card{padding:14px 18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:13px;text-align:center}
.why-card strong{color:white;font-size:15px}
.section-title{font-size:17px;font-weight:850}
.reward-card{padding:20px}
.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.reward{border:1px solid var(--line);background:#1b2a42;color:white;border-radius:15px;padding:13px;text-align:left;min-height:54px;font-weight:700}
.reward.active{background:linear-gradient(135deg,rgba(255,155,199,.20),rgba(255,223,136,.10));border-color:rgba(255,155,199,.45)}
.reward-note{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.5}
.timer-wrap{margin:12px 0 8px}
.timer{font-size:74px;font-weight:950;letter-spacing:-.05em}
.timer-caption{color:var(--muted);font-size:14px}
.done-card{text-align:center;background:linear-gradient(180deg,rgba(142,226,194,.10),rgba(255,255,255,.03))}
.done-icon{width:66px;height:66px;border-radius:22px;margin:0 auto;display:grid;place-items:center;background:var(--mint);color:#0b2018;font-size:34px;font-weight:900}
.panel-head,.section-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.muted{color:var(--muted);font-size:13px;line-height:1.55}
.subcard{margin-top:14px;padding:18px;border-radius:20px;background:#101a2b;border:1px solid var(--line)}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.quick{border:1px solid var(--line);background:#1a2940;color:white;border-radius:14px;padding:12px;text-align:left}
.quick.active{border-color:rgba(142,226,194,.5);background:rgba(142,226,194,.12)}
.segmented{display:flex;background:#0d1524;border-radius:11px;padding:3px}
.seg{border:0;background:transparent;color:var(--muted);padding:8px 10px;border-radius:9px;font-weight:750}
.seg.active{background:#263954;color:white}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}
.stats div{background:#0d1524;border-radius:14px;padding:13px;text-align:center}
.stats strong{display:block;font-size:23px}.stats span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.history{display:grid;gap:7px}.history-item{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.history-item:last-child{border-bottom:0}.history-tags{color:var(--muted);font-size:12px;text-align:right}
.reminders{display:grid;gap:10px;margin-top:12px}.reminders label{display:grid;gap:7px;color:var(--muted);font-size:13px}
input[type=time]{background:#0d1524;border:1px solid var(--line);color:white;border-radius:13px;padding:12px;width:100%}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#f4f8ff;color:#111827;padding:12px 16px;border-radius:14px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:30;box-shadow:var(--shadow)}
.toast.show{opacity:1}
@media(max-width:430px){
  .reward-grid,.quick-grid{grid-template-columns:1fr}
  .focus-card{min-height:430px;padding:22px 18px}
  .timer{font-size:62px}
  h2{font-size:31px}
}

.push-card{background:linear-gradient(180deg,rgba(134,193,255,.08),rgba(255,255,255,.025))}
.push-status{margin:12px 0;padding:13px 14px;border-radius:14px;background:#0d1524;color:#dce9f7;font-size:14px;line-height:1.55;border:1px solid var(--line)}
.push-status.ok{border-color:rgba(142,226,194,.35);color:#dffff2;background:rgba(142,226,194,.08)}
.push-status.warn{border-color:rgba(255,223,136,.35);color:#ffedb6;background:rgba(255,223,136,.07)}
.push-status.bad{border-color:rgba(255,153,156,.3);color:#ffd0d1;background:rgba(255,153,156,.07)}
.push-help{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.55}
.small-ghost{min-height:46px;padding:12px 14px}