:root {
  --bg:#0b0d12; --card:#161a22; --card2:#1e2430; --line:#272e3b;
  --text:#eef1f6; --muted:#9aa3b2; --accent:#3b82f6; --accent2:#2563eb;
  --good:#22c55e; --good-bg:#123322; --warn:#f59e0b;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  margin:0; font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 50% -200px,#141a2b,#0b0d12) fixed;
  color:var(--text); padding-bottom:78px; -webkit-font-smoothing:antialiased;
}
main { padding:16px 14px 8px; max-width:600px; margin:0 auto; }
h1 { font-size:22px; margin:6px 2px 14px; letter-spacing:.3px; }
.muted { color:var(--muted); }

/* ---- 頂部日期橫幅 ---- */
.dayhero {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:20px; padding:20px 18px; margin:4px 0 18px;
  box-shadow:0 10px 30px -12px rgba(59,130,246,.6);
}
.dayhero .badge {
  display:inline-block; background:rgba(255,255,255,.22); color:#fff;
  font-weight:700; font-size:13px; padding:5px 12px; border-radius:999px; letter-spacing:1px;
}
.dayhero h2 { margin:10px 0 2px; font-size:26px; color:#fff; }
.dayhero p { margin:0; color:rgba(255,255,255,.85); font-size:14px; }

/* ---- 動作卡 ---- */
.ex {
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:14px; margin:12px 0; display:flex; gap:13px; align-items:flex-start;
}
.ex .icon {
  width:50px; height:50px; border-radius:14px; flex:0 0 auto;
  display:grid; place-items:center; font-size:24px;
}
.ex .body { flex:1; min-width:0; }
.ex .name { font-size:17px; font-weight:700; }
.ex .en { color:var(--muted); font-size:12px; margin-top:1px; }
.ex .meta { margin-top:8px; font-size:14px; }
.ex .meta b { color:var(--text); font-variant-numeric:tabular-nums; }
.tag {
  display:inline-block; font-size:11px; padding:3px 9px; border-radius:999px;
  background:var(--card2); color:var(--muted); margin-left:6px; vertical-align:middle;
}
.hint {
  margin-top:9px; background:var(--card2); border-left:3px solid var(--accent);
  padding:8px 11px; border-radius:0 10px 10px 0; color:#cfe0ff; font-size:13px; line-height:1.5;
}
.hint.up { border-color:var(--good); color:#bff2cf; }
.hint.down { border-color:var(--warn); color:#ffe2b0; }
.demo {
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-size:13px; font-weight:600; color:#fff; text-decoration:none;
  background:#111827; border:1px solid var(--line); padding:8px 13px; border-radius:11px;
}
.demo:active { background:#0a0f1a; }

/* ---- 按鈕 ---- */
button { font:inherit; border:0; border-radius:14px; background:var(--accent); color:#fff; cursor:pointer; }
.big {
  width:100%; font-size:18px; font-weight:700; padding:18px; margin:16px 0 6px;
  box-shadow:0 8px 24px -10px rgba(59,130,246,.7);
}
.big.ghost { background:var(--card); border:1px solid var(--line); box-shadow:none; }
.big.finish { background:var(--good); box-shadow:0 8px 24px -10px rgba(34,197,94,.7); }

/* ---- 訓練中 ---- */
.stickybar {
  position:sticky; top:0; z-index:5; background:rgba(11,13,18,.92);
  backdrop-filter:blur(8px); padding:12px 2px; margin:-8px 0 6px;
}
.stickybar .row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.stickybar h1 { margin:0; font-size:19px; }
.stickybar .count { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.progressbar { height:9px; background:#232a37; border-radius:6px; overflow:hidden; }
.progressbar > div { height:100%; background:linear-gradient(90deg,var(--good),#4ade80); width:0; transition:width .35s ease; }

.exblock { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:13px; margin:12px 0; }
.exblock .head { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.exblock .head .icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; flex:0 0 auto; }
.exblock .head .name { font-weight:700; font-size:16px; }
.exblock .head .en { color:var(--muted); font-size:11px; }
.exblock .head a { margin-left:auto; font-size:19px; text-decoration:none; opacity:.8; }

.labels { display:flex; gap:9px; padding:0 2px 5px; color:var(--muted); font-size:11px; }
.labels .l-w { width:82px; text-align:center; }
.labels .l-r { width:82px; text-align:center; }
.labels .l-s { flex:1; }

.setrow { display:flex; align-items:center; gap:9px; padding:7px 0; }
.setrow .sn { width:26px; color:var(--muted); font-size:13px; font-weight:700; text-align:center; }
.field { width:82px; position:relative; }
.field input {
  width:100%; font-size:19px; text-align:center; padding:11px 4px; font-variant-numeric:tabular-nums;
  border-radius:11px; border:1px solid var(--line); background:#0d1017; color:#fff;
}
.field .unit { position:absolute; right:8px; bottom:6px; font-size:10px; color:var(--muted); pointer-events:none; }
.check {
  width:46px; height:46px; border-radius:13px; background:#2a3240; color:#8b95a6;
  font-size:20px; margin-left:auto; flex:0 0 auto; transition:transform .1s;
}
.check:active { transform:scale(.9); }
.check.on { background:var(--good); color:#fff; }
.setrow.done .field input { border-color:var(--good); background:var(--good-bg); }

/* ---- 休息計時器 ---- */
#rest {
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%);
  background:#111827; border:1px solid var(--line); border-radius:16px;
  padding:12px 18px; display:flex; align-items:center; gap:14px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.7); z-index:20;
}
#rest.hidden { display:none; }
#rest .t { font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; min-width:58px; }
#rest .lbl { color:var(--muted); font-size:12px; }
#rest button { background:var(--card2); padding:8px 12px; font-size:13px; }

/* ---- 歷史 / 進度卡 ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px; margin:11px 0; }
.card.hist { display:flex; align-items:center; gap:12px; }
.card.hist .d { font-weight:700; font-size:15px; }
.card.hist .rate { margin-left:auto; font-weight:800; font-size:18px; }
.rate.hi { color:var(--good); } .rate.mid { color:var(--warn); } .rate.lo { color:#f87171; }

/* ---- 登入 ---- */
.login { max-width:340px; margin:16vh auto 0; text-align:center; }
.login .logo { font-size:52px; }
.login h1 { justify-content:center; }
.login input { width:100%; font-size:17px; padding:15px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:#fff; margin:14px 0; }
.err { color:#f87171; font-size:14px; min-height:20px; }

/* ---- 底部導覽 ---- */
#tabbar { position:fixed; bottom:0; left:0; right:0; display:flex; background:rgba(16,20,28,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); }
#tabbar button { flex:1; background:transparent; border-radius:0; padding:11px 0 13px; color:var(--muted); font-size:11px; display:flex; flex-direction:column; align-items:center; gap:3px; }
#tabbar button .i { font-size:21px; }
#tabbar button.active { color:var(--accent); }