/* ===========================================================
   练记 · 样式表（纯手写，无外部依赖，离线可用）
   =========================================================== */
:root {
  --bg: #0e1116;
  --bg-soft: #141920;
  --card: #181e27;
  --card-2: #1f2733;
  --line: #262f3d;
  --line-soft: #202836;
  --text: #e9eef5;
  --text-dim: #97a3b6;
  --text-mute: #67748a;
  --accent: #4ade80;
  --accent-ink: #06240f;
  --accent-2: #38bdf8;
  --warn: #fbbf24;
  --danger: #f87171;
  --orange: #fb923c;
  --purple: #a78bfa;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --tabbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

body {
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(74, 222, 128, .10), transparent 62%),
    radial-gradient(760px 380px at 92% -4%, rgba(56, 189, 248, .09), transparent 60%);
  background-attachment: fixed;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--accent-2); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2b3646; border-radius: 8px; }

/* ---------- 布局 ---------- */
#app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: calc(var(--safe-t) + 14px) 16px 12px;
  background: linear-gradient(180deg, rgba(14,17,22,.97) 62%, rgba(14,17,22,.72) 100%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar h1 { font-size: 21px; letter-spacing: .5px; }
.topbar .sub { font-size: 12px; color: var(--text-mute); display: block; margin-top: 2px; }
.topbar-right { display: flex; gap: 8px; align-items: center; padding-bottom: 2px; }

.view { padding: 14px 14px 24px; }
.view.no-pad { padding: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.card.tight { padding: 10px 12px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card-title h3 { font-size: 15px; }
.card-title .hint { font-size: 12px; color: var(--text-mute); }

.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; }

.muted { color: var(--text-dim); }
.mute2 { color: var(--text-mute); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.center { text-align: center; }
.bold { font-weight: 650; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(20, 25, 32, .96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  max-width: 720px; margin: 0 auto;
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10.5px; color: var(--text-mute); transition: color .18s;
}
.tabbar .tab .ico { font-size: 19px; line-height: 1; filter: grayscale(1) opacity(.55); transition: .18s; }
.tabbar .tab.active { color: var(--accent); }
.tabbar .tab.active .ico { filter: none; transform: translateY(-1px); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 550; transition: transform .1s, background .18s, opacity .18s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.btn.blue { background: var(--accent-2); color: #04212f; border-color: transparent; font-weight: 700; }
.btn.orange { background: var(--orange); color: #2b1403; border-color: transparent; font-weight: 700; }
.btn.danger { background: rgba(248,113,113,.14); color: var(--danger); border-color: rgba(248,113,113,.35); }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; }
.btn.xs { padding: 4px 8px; font-size: 11.5px; border-radius: 8px; }
.btn.icon { padding: 8px 10px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
}
.chip.active { background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.45); color: var(--accent); font-weight: 600; }
.chip.tone-blue.active { background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.45); color: var(--accent-2); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; background: rgba(148,163,184,.14); color: var(--text-dim);
}
.tag.green { background: rgba(74,222,128,.15); color: var(--accent); }
.tag.blue { background: rgba(56,189,248,.15); color: var(--accent-2); }
.tag.orange { background: rgba(251,146,60,.15); color: var(--orange); }
.tag.purple { background: rgba(167,139,250,.15); color: var(--purple); }
.tag.warn { background: rgba(251,191,36,.15); color: var(--warn); }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12px; color: var(--text-mute); }
.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); outline: none;
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: rgba(74,222,128,.6); box-shadow: 0 0 0 3px rgba(74,222,128,.12); }
textarea.input { min-height: 72px; resize: vertical; }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.input.num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; padding: 9px 6px; }
.input.search { padding-left: 34px; }
.search-wrap { position: relative; }
.search-wrap::before { content: "🔍"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .6; }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 30px; height: 30px; border-radius: 9px; background: var(--card-2);
  border: 1px solid var(--line); color: var(--text-dim); font-size: 15px; line-height: 1;
}
.stepper button:active { background: var(--line); }

.switch { position: relative; width: 44px; height: 25px; border-radius: 999px; background: var(--line); transition: .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: .2s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(19px); }

/* ---------- 列表项 ---------- */
.list { display: flex; flex-direction: column; }
.item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px; border-bottom: 1px solid var(--line-soft);
  text-align: left; width: 100%; color: inherit;
}
.list .item:last-child { border-bottom: none; }
.item .thumb {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--card-2); border: 1px solid var(--line);
}
.item .t { font-weight: 560; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .d { font-size: 12px; color: var(--text-mute); margin-top: 1px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .arr { color: var(--text-mute); font-size: 15px; flex: none; }
.item:active { background: rgba(255,255,255,.025); }

.empty {
  text-align: center; padding: 42px 20px; color: var(--text-mute);
}
.empty .e-ico { font-size: 40px; display: block; margin-bottom: 10px; opacity: .55; }
.empty .e-t { font-size: 14.5px; color: var(--text-dim); margin-bottom: 4px; }

/* ---------- 数据展示 ---------- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat .v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.stat .v small { font-size: 11.5px; font-weight: 500; color: var(--text-mute); margin-left: 2px; }
.stat .k { font-size: 11.5px; color: var(--text-mute); margin-top: 3px; }
.stat.accent .v { color: var(--accent); }
.stat.blue .v { color: var(--accent-2); }
.stat.orange .v { color: var(--orange); }
.stat.purple .v { color: var(--purple); }

.bar-track { height: 7px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; border: 1px solid var(--line-soft); }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #22d3ee); transition: width .35s; }
.bar-fill.p { background: linear-gradient(90deg, #f472b6, #fb7185); }
.bar-fill.c { background: linear-gradient(90deg, #fbbf24, #fb923c); }
.bar-fill.f { background: linear-gradient(90deg, #a78bfa, #60a5fa); }
.bar-fill.over { background: linear-gradient(90deg, #fb7185, #ef4444); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: left; font-weight: 500; color: var(--text-mute); font-size: 11.5px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.tbl td { padding: 7px 4px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl .num { text-align: right; }

.seg { display: flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 7px 6px; border-radius: 8px; font-size: 12.5px; color: var(--text-dim); }
.seg button.active { background: var(--card-2); color: var(--text); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ---------- 训练中 / 组记录 ---------- */
.set-head, .set-row {
  display: grid; grid-template-columns: 30px 1fr 1fr 54px 34px;
  gap: 6px; align-items: center;
}
.set-head { font-size: 11px; color: var(--text-mute); padding: 4px 2px; text-align: center; }
.set-row { padding: 5px 2px; border-bottom: 1px solid var(--line-soft); }
.set-row:last-child { border-bottom: none; }
.set-row.done { background: rgba(74,222,128,.06); border-radius: 9px; }
.set-idx { font-size: 12.5px; color: var(--text-mute); text-align: center; font-variant-numeric: tabular-nums; }
.set-idx.warm { color: var(--warn); }
.set-row .input.num { padding: 7px 4px; font-size: 14px; }
.set-del { color: var(--text-mute); font-size: 15px; text-align: center; }

.ex-block { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--card); }
.ex-block .ex-hd { display: flex; align-items: center; gap: 9px; padding: 11px 12px; background: var(--card-2); }
.ex-block .ex-bd { padding: 8px 10px 10px; }

.timer-fab {
  position: fixed; right: 14px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index: 45;
  min-width: 76px; height: 52px; border-radius: 999px; padding: 0 16px;
  background: linear-gradient(135deg, #22c55e, #14b8a6); color: #052e16;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 17px;
  box-shadow: 0 10px 26px rgba(34,197,94,.4), 0 0 0 1px rgba(255,255,255,.08) inset;
  display: flex; align-items: center; gap: 7px;
}
.timer-fab.rest { background: linear-gradient(135deg, #f59e0b, #f97316); color: #2b1403; box-shadow: 0 10px 26px rgba(249,115,22,.4); }
.timer-fab .lbl { font-size: 10px; font-weight: 600; opacity: .75; }

.hero {
  background: linear-gradient(135deg, rgba(74,222,128,.14), rgba(56,189,248,.10));
  border: 1px solid rgba(74,222,128,.28);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.hero h2 { font-size: 17px; margin-bottom: 4px; }

/* ---------- 动作库 ---------- */
.ex-hero { display: flex; gap: 12px; align-items: flex-start; }
.ex-emoji { width: 56px; height: 56px; border-radius: 15px; background: var(--card-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 27px; flex: none; }
.kv { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-mute); width: 62px; flex: none; font-size: 12.5px; padding-top: 1px; }
.kv .v { flex: 1; }
ol.steps { counter-reset: s; padding: 0; margin: 0; }
ol.steps li {
  counter-increment: s; position: relative; padding: 7px 0 7px 30px;
  font-size: 13.5px; border-bottom: 1px dashed var(--line-soft);
}
ol.steps li:last-child { border-bottom: none; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 7px;
  width: 20px; height: 20px; border-radius: 6px; background: rgba(74,222,128,.15);
  color: var(--accent); font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
ul.dots li { position: relative; padding: 5px 0 5px 18px; font-size: 13.5px; }
ul.dots li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
ul.dots.green li::before { background: var(--accent); }
ul.dots.blue li::before { background: var(--accent-2); }
ul.dots.warn li::before { background: var(--warn); }

/* ---------- 动作动图 ---------- */
.media-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1a2230, #0b0f14 70%);
  border: 1px solid var(--line); border-radius: 14px;
  min-height: 204px; overflow: hidden;
}
.media-hero .media-fallback { font-size: 54px; opacity: .45; }
.media-hero .media-gif {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 202px; height: 202px; object-fit: contain; cursor: pointer;
  image-rendering: -webkit-optimize-contrast;
}
.media-hero .media-gif[data-paused] { position: absolute; }

/* ---------- 肌肉解剖图 ---------- */
.mm-wrap { display: flex; gap: 20px; justify-content: center; align-items: flex-start; padding: 2px 0 4px; }
.mm-fig { text-align: center; }
.mm-fig svg { display: block; width: auto; overflow: visible; }
.mm-cap { display: block; font-size: 11px; color: var(--text-mute); margin-top: 4px; }
.mm-body { fill: #1b2331; stroke: #2d3849; stroke-width: 1.2; }
.mm-bone { fill: #232b38; }
.mm-base { fill: #2a3342; stroke: #384455; stroke-width: 1; }
.mm-secondary { fill: rgba(74, 222, 128, .42); stroke: rgba(74, 222, 128, .75); stroke-width: 1; }
.mm-primary { fill: #4ade80; stroke: #bbf7d0; stroke-width: 1; animation: mmPulse 1.9s ease-in-out infinite; }
.mm-gap { fill: #0b0f14; opacity: .5; }
@keyframes mmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .66; } }
.mm-mini { display: block; }

/* 列表小图：图片加载失败时自动露出底下的 emoji */
.thumb { position: relative; overflow: hidden; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 3D 解剖 ---------- */
.anatomy-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 68vh;
  background: radial-gradient(circle at 50% 42%, #141c26, #090d12 72%);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.anatomy-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.anatomy-stage canvas:active { cursor: grabbing; }
.anatomy-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(9, 13, 18, .82); text-align: center;
}
.anatomy-hint { font-size: 13.5px; color: var(--text-dim); }
.anatomy-hint .bar-track { margin: 10px auto 0; }

/* ---------- 图表 ---------- */
.chart { width: 100%; display: block; overflow: visible; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }

/* ---------- 底部弹层 / 弹窗 ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 8, 12, .62); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease;
}
.sheet-mask.center { align-items: center; padding: 20px; }
.sheet {
  width: 100%; max-width: 720px;
  background: var(--bg-soft);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-height: 92vh; display: flex; flex-direction: column;
  animation: slideUp .22s cubic-bezier(.2,.9,.3,1);
  padding-bottom: var(--safe-b);
}
.sheet-mask.center .sheet { border-radius: 18px; border: 1px solid var(--line); max-width: 460px; animation: pop .18s ease; padding-bottom: 0; }
.sheet-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px 10px; border-bottom: 1px solid var(--line-soft); }
.sheet-hd h3 { font-size: 16px; }
.sheet-bd { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.sheet-ft { padding: 12px 16px calc(14px + var(--safe-b)); border-top: 1px solid var(--line-soft); display: flex; gap: 10px; background: var(--bg-soft); }
.sheet-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--line); margin: 8px auto 0; }
@keyframes slideUp { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.toast-root {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b) + 22px);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  background: rgba(30, 38, 50, .97); border: 1px solid var(--line);
  color: var(--text); padding: 9px 16px; border-radius: 999px;
  font-size: 13px; box-shadow: var(--shadow); animation: pop .16s ease;
  max-width: 86vw; text-align: center;
}
.toast.ok { border-color: rgba(74,222,128,.5); color: #bbf7d0; }
.toast.err { border-color: rgba(248,113,113,.5); color: #fecaca; }

/* 食物搜索结果 */
.food-res { max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.mini-bars { display: flex; gap: 3px; margin-top: 6px; }
.mini-bars .mb { flex: 1; text-align: center; }
.mini-bars .mb .t { height: 5px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; margin-bottom: 3px; }
.mini-bars .mb .t i { display: block; height: 100%; border-radius: 99px; }
.mini-bars .mb .l { font-size: 10px; color: var(--text-mute); }

.donut-wrap { display: flex; align-items: center; gap: 14px; }
.donut-wrap .legend { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.donut-wrap .legend .li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.donut-wrap .legend .li .nm { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }

.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.day-nav .d { font-size: 15px; font-weight: 650; }

@media (min-width: 640px) {
  .view { padding: 16px 18px 28px; }
  .grid4 { gap: 10px; }
  .tabbar .tab .ico { font-size: 20px; }
}