/* =====================================================================
   VERDANT · 深绿训练 —— 视觉系统 v1.3
   设计思路：从「深色金属质感」转为「雾面苔绿」——
   保留墨绿主色，通过提亮背景层次、降低玻璃不透明度、加大留白节奏、
   收敛字重对比、把硬边框换成柔和分隔，让界面透气、轻盈而不失专业感。
   ===================================================================== */

/* ---------- 1. 默认主题：苔雾（Moss Mist） ---------- */
:root,
[data-theme="moss"] {
  /* 背景三层：底色 → 抬升面 → 卡片面 */
  --bg: #0E1614;
  --bg-top: #16211D;
  --surface: #18241F;
  --surface-2: #1E2C26;

  --forest: #12291F;
  --forest-2: #1E4636;
  --accent: #57A98A;
  --accent-strong: #6DC0A0;
  --accent-soft: #CFE7DA;
  --accent-wash: rgba(87, 169, 138, 0.14);

  --text: #EEF5F0;
  --text-2: #9FB3A8;
  --text-3: #73897E;

  --danger: #E08272;
  --warn: #DBBA7C;
  --info: #7FA9C4;

  /* 玻璃：更低的填充浓度 + 更细的描边 = 更轻 */
  --glass: rgba(30, 44, 38, 0.58);
  --glass-2: rgba(24, 36, 31, 0.72);
  --glass-line: rgba(206, 231, 218, 0.10);
  --glass-line-strong: rgba(206, 231, 218, 0.18);
  --card-bg: linear-gradient(168deg, rgba(34, 51, 44, 0.86), rgba(24, 36, 31, 0.92));
  --border: var(--glass-line);
  --border-strong: var(--glass-line-strong);
  --divider: rgba(206, 231, 218, 0.07);

  --shadow: 0 14px 34px -26px rgba(0, 0, 0, 0.85);
  --shadow-soft: 0 6px 18px -14px rgba(0, 0, 0, 0.7);
  --glow-a: rgba(87, 169, 138, 0.20);
  --glow-b: rgba(45, 92, 75, 0.26);

  --radius: 22px;
  --radius-sm: 15px;
  --radius-xs: 11px;
  --blur: 14px;

  /* 间距节奏（8 基） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --fs: 16px;
  --lh-tight: 1.25;
  --lh-body: 1.6;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 62px;
  --theme-color: #0E1614;
}

/* ---------- 2. 石材（Slate Stone）—— 中性灰，最冷静 ---------- */
[data-theme="stone"] {
  --bg: #12130F;
  --bg-top: #1B1C17;
  --surface: #1D1E19;
  --surface-2: #262720;

  --forest: #23241C;
  --forest-2: #3A3C2F;
  --accent: #A3A98A;
  --accent-strong: #BFC5A4;
  --accent-soft: #E6E9D9;
  --accent-wash: rgba(163, 169, 138, 0.14);
  --chart-plan: #6E7460;

  --text: #F2F2EA;
  --text-2: #ABA99D;
  --text-3: #7E7D73;

  --danger: #DE8172;
  --warn: #D8B172;
  --info: #93A9B8;

  --glass: rgba(38, 39, 32, 0.58);
  --glass-2: rgba(29, 30, 25, 0.74);
  --glass-line: rgba(242, 242, 234, 0.09);
  --glass-line-strong: rgba(242, 242, 234, 0.17);
  --card-bg: linear-gradient(168deg, rgba(41, 42, 35, 0.86), rgba(29, 30, 25, 0.92));
  --divider: rgba(242, 242, 234, 0.07);

  --glow-a: rgba(163, 169, 138, 0.16);
  --glow-b: rgba(90, 92, 74, 0.22);
  --theme-color: #12130F;

  --shadow: 0 14px 34px -26px rgba(0, 0, 0, 0.85);
  --shadow-soft: 0 6px 18px -14px rgba(0, 0, 0, 0.7);
}

/* ---------- 3. 深松（Pine Deep）—— 原版墨绿的轻盈化 ---------- */
[data-theme="pine"] {
  --bg: #09120E;
  --bg-top: #101E18;
  --surface: #13231C;
  --surface-2: #193027;

  --forest: #122B22;
  --forest-2: #1D4936;
  --accent: #4EAF8B;
  --accent-strong: #6FD0A9;
  --accent-soft: #D8F0E4;
  --accent-wash: rgba(78, 175, 139, 0.15);

  --text: #F1F7F3;
  --text-2: #9CB2A7;
  --text-3: #6E887C;

  --danger: #E4705E;
  --warn: #D9B36B;
  --info: #7FA9C4;

  --glass: rgba(25, 48, 39, 0.60);
  --glass-2: rgba(19, 35, 28, 0.76);
  --glass-line: rgba(216, 240, 228, 0.10);
  --glass-line-strong: rgba(216, 240, 228, 0.19);
  --card-bg: linear-gradient(168deg, rgba(27, 53, 43, 0.88), rgba(19, 35, 28, 0.94));
  --divider: rgba(216, 240, 228, 0.07);

  --glow-a: rgba(78, 175, 139, 0.20);
  --glow-b: rgba(29, 73, 54, 0.30);
  --theme-color: #09120E;

  --shadow: 0 16px 38px -26px rgba(0, 0, 0, 0.92);
  --shadow-soft: 0 6px 18px -14px rgba(0, 0, 0, 0.75);
}

/* ---------- 4. 暮光（Dusk）—— 墨绿 + 暖紫灰，黄昏感 ---------- */
[data-theme="dusk"] {
  --bg: #12111A;
  --bg-top: #1A1824;
  --surface: #1B1926;
  --surface-2: #232030;

  --forest: #232036;
  --forest-2: #363054;
  --accent: #9B8FD6;
  --accent-strong: #B7ACEA;
  --accent-soft: #E4DFF7;
  --accent-wash: rgba(155, 143, 214, 0.15);
  --chart-plan: #6A6396;

  --text: #F1EFF8;
  --text-2: #A9A4C0;
  --text-3: #7C7794;

  --danger: #E58279;
  --warn: #DDB97F;
  --info: #8FB4CE;

  --glass: rgba(35, 32, 48, 0.58);
  --glass-2: rgba(27, 25, 38, 0.76);
  --glass-line: rgba(228, 223, 247, 0.09);
  --glass-line-strong: rgba(228, 223, 247, 0.18);
  --card-bg: linear-gradient(168deg, rgba(38, 35, 52, 0.88), rgba(27, 25, 38, 0.94));
  --divider: rgba(228, 223, 247, 0.07);

  --glow-a: rgba(155, 143, 214, 0.20);
  --glow-b: rgba(70, 62, 110, 0.26);
  --theme-color: #12111A;

  --shadow: 0 14px 34px -26px rgba(0, 0, 0, 0.9);
  --shadow-soft: 0 6px 18px -14px rgba(0, 0, 0, 0.72);
}

/* ---------- 5. 晨雾浅色（Paper Light）—— 白天/户外强光 ---------- */
[data-theme="paper"] {
  --bg: #F4F2EC;
  --bg-top: #FBFAF6;
  --surface: #FFFFFF;
  --surface-2: #F1EFE8;

  --forest: #E3E9E1;
  --forest-2: #C9D8CD;
  --accent: #2F7A5C;
  --accent-strong: #24654A;
  --accent-soft: #1D4F3A;
  --accent-wash: rgba(47, 122, 92, 0.10);

  --text: #1B211E;
  --text-2: #5D6A63;
  --text-3: #8B968F;

  --danger: #C4573F;
  --warn: #A87726;
  --info: #3D6E8C;

  --glass: rgba(255, 255, 255, 0.82);
  --glass-2: rgba(255, 255, 255, 0.9);
  --glass-line: rgba(27, 33, 30, 0.09);
  --glass-line-strong: rgba(27, 33, 30, 0.16);
  --card-bg: linear-gradient(168deg, #FFFFFF, #FAF9F5);
  --divider: rgba(27, 33, 30, 0.07);

  --glow-a: rgba(47, 122, 92, 0.10);
  --glow-b: rgba(201, 216, 205, 0.30);
  --theme-color: #F4F2EC;

  --shadow: 0 10px 26px -20px rgba(27, 33, 30, 0.35);
  --shadow-soft: 0 4px 12px -10px rgba(27, 33, 30, 0.25);
}

/* 玻璃强度档位（在所有主题之上覆盖不透明度） */
[data-glass="off"] { --blur: 0px; --glass: var(--surface); --glass-2: var(--surface-2); }
[data-glass="light"] { --blur: 8px; }
[data-glass="standard"] { --blur: 14px; }

/* ---------- 基础 ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
html { font-size: var(--fs); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 1rem;
  line-height: var(--lh-body);
  letter-spacing: 0.005em;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  transition: background 0.35s ease, color 0.35s ease;
}
body.no-scroll { overflow: hidden; }

/* 背景：顶部一层柔和渐变提亮 + 两团低饱和光晕，比原来更淡更散 */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 46%, var(--bg) 100%);
}
.aurora i {
  position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.5;
  animation: drift 54s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 72vw; height: 72vw; left: -22vw; top: -16vh; background: radial-gradient(circle, var(--glow-b) 0%, transparent 70%); animation-duration: 58s; }
.aurora i:nth-child(2) { width: 84vw; height: 84vw; right: -30vw; top: 18vh; background: radial-gradient(circle, var(--glow-a) 0%, transparent 68%); animation-duration: 72s; animation-delay: -10s; }
.aurora i:nth-child(3) { width: 64vw; height: 64vw; left: 4vw; bottom: -22vh; background: radial-gradient(circle, var(--glow-b) 0%, transparent 72%); animation-duration: 82s; animation-delay: -24s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vw, 2vh, 0) scale(1.06); }
  100% { transform: translate3d(-2vw, -1.5vh, 0) scale(0.97); }
}
[data-motion="reduce"] .aurora i { animation: none !important; }
[data-motion="reduce"] * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }

/* ---------- 布局：更宽的呼吸空间 ---------- */
/* v1.4 响应式容器：按「窗口宽度」分档，不按机型分档（机型判断会被分屏/悬浮窗打断）
   compact  < 600    普通手机竖屏（iPhone 17 Pro 402×874）
   wide     ≥ 600    阔折叠展开态（Pura X Max 内屏 939×664，宽高比 1.41:1）
   roomy    ≥ 860    大屏 / 横屏平板
   容器宽度用 clamp 平滑过渡，避免跨断点时跳变 */
.app {
  max-width: clamp(520px, 100vw, 940px);
  margin: 0 auto;
  /* 底部留白 = 导航实际高度 + 安全区 + 28px 呼吸。
     导航是 fixed 的，如果这里不够，最后一张卡会被压在导航下面（v1.4.1 修） */
  padding: 0 var(--gutter) calc(var(--nav-h) + var(--safe-b) + 34px);
  min-height: 100dvh;
}
/* 窄屏下卡片是「最后一项多留 14px 底边距」的老规则，会让最后一张卡紧贴导航。
   统一改成：块流里最后一张卡不留底边距，由 .app 的 padding 兜住。 */
.auto-2col > *:last-child { margin-bottom: 0 !important; }
:root { --gutter: 16px; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 18px 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--divider);
  margin: 0 calc(-1 * var(--gutter)) 18px;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--bg); }
}
@media (max-width: 360px) { .topbar { margin: 0 -12px 14px; padding-left: 14px; padding-right: 14px; } }
.brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand b { font-size: 0.74rem; letter-spacing: 0.20em; color: var(--accent-soft); font-weight: 600; white-space: nowrap; }
.brand span { font-size: 0.68rem; color: var(--text-3); letter-spacing: 0.10em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 品牌全名较长：极窄屏（≤375）收一点字距，避免和右上头像按钮挤在一起 */
@media (max-width: 400px) {
  .brand b { letter-spacing: 0.12em; font-size: 0.70rem; }
  .brand span { letter-spacing: 0.02em; font-size: 0.63rem; }
}
.icon-btn {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--text);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  font-size: 1.05rem; cursor: pointer; transition: transform 0.16s ease, border-color 0.2s, background 0.2s;
}
.icon-btn:active { transform: scale(0.94); border-color: var(--glass-line-strong); }

/* ---------- 卡片：从「厚金属」改为「磨砂卡片」 ---------- */
.card {
  position: relative; border-radius: var(--radius); border: 1px solid var(--glass-line);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 14px; overflow: hidden;
  isolation: isolate;
}
[data-glass="standard"] .card { backdrop-filter: blur(var(--blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--blur)) saturate(120%); }
[data-glass="light"] .card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* 顶部一道极淡高光，替代原来的大面积渐变内阴影 */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--glass-line-strong) 22%, var(--glass-line-strong) 78%, transparent);
  opacity: 0.7;
}
.card.hero { padding: 20px; }
.card.tap { transition: transform 0.16s ease, box-shadow 0.2s; }
.card.tap:active { transform: scale(0.988); }

/* ---------- 字体层级：拉开对比，标题更轻 ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
.h1 { font-size: 1.42rem; letter-spacing: -0.015em; line-height: var(--lh-tight); }
.h2 { font-size: 1.02rem; letter-spacing: -0.005em; line-height: 1.4; }
.sub { color: var(--text-2); font-size: 0.82rem; line-height: 1.5; }
.tiny { font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.02em; line-height: 1.5; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.num-xl { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid2 > * { min-width: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grid3 > * { min-width: 0; }

/* 数据块：去掉重底色，改为极淡描边 */
.stat { padding: 13px 12px; border-radius: var(--radius-sm); background: var(--accent-wash); border: 1px solid var(--glass-line); }
.stat b { display: block; font-size: 1.18rem; letter-spacing: -0.02em; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.68rem; color: var(--text-2); letter-spacing: 0.04em; }
/* 「10月28日」这类日期在 3 等分窄格里会折成两行，日期部分用 nowrap 让它整体下移也不断行 */
.stat b .nowrap { white-space: nowrap; }

/* ---------- 标签 ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: 0.68rem; letter-spacing: 0.03em; border: 1px solid var(--glass-line-strong);
  background: var(--accent-wash); color: var(--accent-soft);
  white-space: nowrap;
}
.pill.warn { background: rgba(219, 186, 124, 0.13); border-color: rgba(219, 186, 124, 0.30); color: var(--warn); }
.pill.muted { background: transparent; border-color: var(--glass-line); color: var(--text-3); }
.pill.done { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-soft); }

/* ---------- 按钮：主按钮改为实色，降低"厚重发光" ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--glass-line-strong);
  background: var(--glass); color: var(--text); font-size: 0.94rem; font-weight: 500;
  cursor: pointer; transition: transform 0.14s ease, background 0.2s, border-color 0.2s, color 0.2s;
  width: 100%; font-family: inherit; letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.976); }
.btn.primary {
  background: var(--accent); border-color: transparent; color: #07120D; font-weight: 600;
  box-shadow: var(--shadow-soft);
}
[data-theme="paper"] .btn.primary { color: #FFFFFF; }
.btn.primary:active { background: var(--accent-strong); }
.btn.ghost { background: transparent; border-color: var(--glass-line-strong); color: var(--text); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.sm { min-height: 38px; padding: 0 13px; font-size: 0.83rem; border-radius: var(--radius-xs); width: auto; }
.btn:disabled { opacity: 0.4; }
.btn[disabled] { opacity: 0.42; pointer-events: none; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; }

/* ---------- 表单 ---------- */
input, select, textarea, button { font-family: inherit; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 0.74rem; color: var(--text-2); letter-spacing: 0.03em; }
.input, select.input, textarea.input {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--bg) 62%, transparent); border: 1px solid var(--glass-line); color: var(--text);
  font-size: 1rem; outline: none; transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none; appearance: none;
}
textarea.input { min-height: 76px; resize: vertical; line-height: 1.55; }
.input:focus { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--bg) 82%, transparent); }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* ---------- 分段控件 ---------- */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--glass-line); }
.seg button {
  flex: 1; min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2);
  font-size: 0.82rem; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.seg button.on { background: var(--accent-wash); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- 底部导航 ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--divider);
}
.nav-inner { max-width: clamp(520px, 100vw, 940px); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.nav button {
  border: 0; background: transparent; color: var(--text-3); display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 7px 0 5px; border-radius: 12px; font-size: 0.67rem;
  letter-spacing: 0.03em; cursor: pointer; transition: color 0.2s, background 0.2s; min-height: 48px;
}
.nav button svg { width: 21px; height: 21px; }
.nav button.on { color: var(--text); background: var(--accent-wash); }
.nav button.on svg { stroke: var(--accent-strong); }
[data-theme="paper"] .nav button.on svg { stroke: var(--accent); }

/* ---------- 训练卡片 ---------- */
.ex-card { padding: 16px; }
.ex-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ex-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; }
.ex-meta { font-size: 0.73rem; color: var(--text-2); margin-top: 3px; }
.ex-last { font-size: 0.73rem; color: var(--text-2); margin-top: 9px; padding: 8px 11px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--bg) 45%, transparent); border: 1px dashed var(--glass-line); }
.ex-last b { color: var(--accent-soft); font-weight: 500; }
.ex-last.first-time { background: none; border: 0; padding: 6px 0 0; color: var(--text-3); }

.set-row {
  display: grid; grid-template-columns: 34px 1fr 1fr 58px 46px; gap: 7px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--divider);
}
.set-row.head { border-top: 0; padding-bottom: 0; font-size: 0.65rem; color: var(--text-3); letter-spacing: 0.03em; }
.set-row .idx { font-size: 0.77rem; color: var(--text-3); text-align: center; }
.set-row input {
  width: 100%; height: 44px; border-radius: var(--radius-xs); text-align: center; font-size: 1rem;
  background: color-mix(in srgb, var(--bg) 58%, transparent); border: 1px solid var(--glass-line); color: var(--text); outline: none;
  font-variant-numeric: tabular-nums;
}
.set-row input:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.set-row.done input { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-wash); color: var(--accent-soft); }
.set-row.warmup .idx { color: var(--warn); }
.check {
  width: 44px; height: 44px; border-radius: var(--radius-xs); border: 1px solid var(--glass-line-strong);
  background: color-mix(in srgb, var(--bg) 50%, transparent); display: grid; place-items: center; cursor: pointer; color: var(--text-3);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.check.on { background: var(--accent); border-color: transparent; color: #07120D; }
[data-theme="paper"] .check.on { color: #FFFFFF; }
.ex-actions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- 计时器条 ---------- */
.rest-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 35;
  padding: 0 14px 10px; pointer-events: none;
}
.rest-inner {
  max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: var(--radius-sm); pointer-events: auto;
  background: var(--surface-2); border: 1px solid var(--glass-line-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.rest-inner b { font-size: 1.22rem; font-variant-numeric: tabular-nums; min-width: 62px; color: var(--accent-strong); }

/* ---------- 图表 ---------- */
.chart-wrap { width: 100%; overflow: hidden; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
/* 图表 viewBox 按 340 宽绘制，宽屏上等比放大会被拉得过高 —— 限制最大高度，
   让宽屏表现为「更宽更扁」而不是「整块放大」 */
@media (min-width: 600px) {
  .chart-wrap { max-height: 260px; }
  svg.chart { max-height: 260px; width: auto; max-width: 100%; margin: 0 auto; }
  .chart-wrap { display: flex; flex-direction: column; align-items: stretch; }
}
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.71rem; color: var(--text-2); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }

/* ---------- 列表 ---------- */
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.plan-row > div { min-width: 0; }
.plan-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--divider); }
.list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.list-item > div { min-width: 0; }
.list-item .tiny { word-break: break-word; }

/* ---------- 日历 ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; }
.cal-grid > * { min-width: 0; }
.cal-head { font-size: 0.65rem; color: var(--text-3); text-align: center; padding-bottom: 5px; }
.cal-cell {
  aspect-ratio: 1 / 1; width: 100%; border-radius: 12px; border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 40%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 0.8rem; color: var(--text-2); cursor: pointer; position: relative; transition: transform 0.12s, background 0.2s; min-width: 0; overflow: hidden;
}
.cal-cell:active { transform: scale(0.94); }
.cal-cell.empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.cal-cell.today { border-color: var(--glass-line-strong); color: var(--text); }
.cal-cell.sel { border-color: var(--accent); background: var(--accent-wash); color: var(--text); }
.cal-cell .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--glass-line-strong); }
.cal-cell.done { background: var(--accent-wash); color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cal-cell.done .dot { background: var(--accent); }
.cal-cell.partial { background: rgba(219, 186, 124, 0.12); border-color: rgba(219, 186, 124, 0.28); }
.cal-cell.partial .dot { background: var(--warn); }
.cal-cell.missed { border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.cal-cell.missed .dot { background: color-mix(in srgb, var(--danger) 60%, transparent); }

/* ---------- 弹层 ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 60; background: rgba(4, 8, 7, 0.58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.2s ease;
}
.sheet {
  width: 100%; max-width: 520px; max-height: 86dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 26px 26px 0 0; padding: 20px 18px calc(22px + var(--safe-b));
  background: var(--surface); border: 1px solid var(--glass-line-strong); border-bottom: 0;
  animation: slideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(28px); opacity: 0.55; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--glass-line-strong); margin: 0 auto 16px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 24px);
  z-index: 90; padding: 11px 17px; border-radius: var(--radius-sm); font-size: 0.84rem;
  background: var(--surface-2); border: 1px solid var(--glass-line-strong); color: var(--text);
  box-shadow: var(--shadow); animation: toastIn 0.24s ease; max-width: 88vw; text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 38px 18px; color: var(--text-2); }
.empty .ring {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  border: 1px dashed var(--glass-line-strong); display: grid; place-items: center; color: var(--accent);
}

/* ---------- 登录 / 账户 ---------- */
.auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 30px 24px calc(30px + var(--safe-b)); max-width: 440px; margin: 0 auto; }
.auth-logo { font-size: 0.72rem; letter-spacing: 0.34em; color: var(--accent-soft); }
.auth-title { font-size: 1.62rem; margin: 12px 0 8px; letter-spacing: -0.02em; line-height: 1.3; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 0.8rem; color: var(--text-2); }
.auth-foot button { background: none; border: 0; color: var(--accent-strong); font-size: 0.8rem; cursor: pointer; padding: 6px; font-family: inherit; }
[data-theme="paper"] .auth-foot button { color: var(--accent); }

/* 账户切换列表 */
.acct-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.acct-item:last-child { border-bottom: 0; }
.acct-ava {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-strong); font-weight: 600; font-size: 0.95rem;
  border: 1px solid var(--glass-line-strong);
}
[data-theme="paper"] .acct-ava { color: var(--accent); }
.acct-main { flex: 1; min-width: 0; }

/* 主题色板选择 */
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-swatch {
  border-radius: var(--radius-sm); border: 1px solid var(--glass-line); background: var(--glass);
  padding: 10px; cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.2s, transform 0.14s;
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.theme-swatch:active { transform: scale(0.98); }
.theme-swatch.on { border-color: var(--accent); background: var(--accent-wash); }
.ts-bars { display: flex; gap: 4px; height: 26px; align-items: flex-end; }
.ts-bars i { flex: 1; border-radius: 5px; display: block; }
.ts-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.ts-desc { font-size: 0.68rem; color: var(--text-3); line-height: 1.4; }

/* ---------- 骨架 / 状态 ---------- */
.skeleton { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--glass-line), var(--glass-line-strong), var(--glass-line)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.save-state { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 80; font-size: 0.7rem; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--glass-line-strong); color: var(--text-2); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.save-state.show { opacity: 1; }
.save-state.kind-saved { border-color: var(--accent); color: var(--accent); }
.save-state.kind-error, .save-state.kind-conflict { border-color: var(--warn); color: var(--warn); }
.save-state.kind-local { border-color: var(--text-3); color: var(--text-3); }
.save-state.kind-saving { border-color: var(--text-3); color: var(--text-3); }

.divider { height: 1px; background: var(--divider); margin: 14px 0; }
.hint { font-size: 0.76rem; color: var(--text-2); line-height: 1.65; }
.note-box { font-size: 0.76rem; color: var(--text-2); padding: 11px 13px; border-radius: var(--radius-xs); background: rgba(219, 186, 124, 0.07); border: 1px solid rgba(219, 186, 124, 0.20); line-height: 1.65; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 360px) {
  :root { --fs: 15px; --gutter: 12px; }
  .set-row { grid-template-columns: 28px 1fr 1fr 52px 42px; gap: 5px; }
  .card { padding: 16px; }
}

/* =====================================================================
   响应式：阔折叠 / 大屏（v1.4）
   依据华为官方窗口尺寸：
     Pura X Max 内屏 939×664vp（宽高比 1.41:1）→ 横向宽窗口
     Pura X Max 外屏 459×672vp → 普通竖屏，走 compact
     Pura X     内屏 707×440vp（1.61:1）
   —— 判定只用窗口宽度 + 宽高比，不用 UA 机型。分屏、悬浮窗、横屏都能正确落到对应档位。
   ===================================================================== */

@media (max-width: 430px) {
  /* 「10月28日」在 3 等分窄格（每格仅约 90–110px）里会折成两行。
     402px（iPhone 17 Pro）与 459px（Pura X Max 外屏）这一档都要收一点字号。
     实测 430px 以下收字号后可以一行放下，430px 以上空间足够，保持原样。 */
  .grid3 { gap: 8px; }
  .stat { padding: 12px 10px; }
  .stat b { font-size: 1.04rem; }
  .stat span { font-size: 0.64rem; letter-spacing: 0.02em; }
}

/* 形态选择器：同时支持「窗口宽度自动」和「用户手动指定」。
   用 :where() 保持低优先级，真机媒体查询优先。
   html[data-form] 由 js/formfactor.js 写入。
   --------------------------------------------------------------------- */
:where(html[data-form="wide"]) .app,
:where(html[data-form="roomy"]) .app { max-width: 940px; }

:where(html[data-form="wide"]),
:where(html[data-form="roomy"]) { --gutter: 20px; }

:where(html[data-form="wide"]) .auto-2col,
:where(html[data-form="roomy"]) .auto-2col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;
}
:where(html[data-form="wide"]) .auto-2col > *,
:where(html[data-form="roomy"]) .auto-2col > * { margin-bottom: 0 !important; min-width: 0; }
:where(html[data-form="wide"]) .auto-2col > .span-2,
:where(html[data-form="roomy"]) .auto-2col > .span-2 { grid-column: 1 / -1; }

/* 三列只在真正宽的地方用（≥1100px）。939px 的阔折叠展开态用两列更舒服：
   三列时每列仅 ~300px，卡片比手机竖屏还窄，反而更难读。 */
@media (min-width: 1100px) {
  :where(html[data-form="roomy"]) .auto-2col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  :where(html[data-form="roomy"]) .auto-2col > .span-2 { grid-column: span 2; }
}

/* 训练页双列 */
:where(html[data-form="wide"]) .train-list,
:where(html[data-form="roomy"]) .train-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;
}
:where(html[data-form="wide"]) .train-list > .ex-card,
:where(html[data-form="roomy"]) .train-list > .ex-card { margin-bottom: 0; }

/* 弹层在宽形态下改成居中卡片 */
:where(html[data-form="wide"]) .sheet-mask,
:where(html[data-form="roomy"]) .sheet-mask { align-items: center; padding: 24px; }
:where(html[data-form="wide"]) .sheet,
:where(html[data-form="roomy"]) .sheet {
  max-width: 520px; border-radius: 24px; border-bottom: 1px solid var(--glass-line-strong);
  max-height: min(86dvh, 780px);
}
:where(html[data-form="wide"]) .sheet-handle,
:where(html[data-form="roomy"]) .sheet-handle { display: none; }

/* 设备形态展示 */
.dev-info { padding: 11px 13px; border-radius: var(--radius-xs); background: var(--accent-wash); border: 1px solid var(--glass-line); }
.dev-preview { margin-top: 12px; display: flex; justify-content: center; }
.dev-grid { display: grid; gap: 5px; width: 100%; max-width: 220px; padding: 8px; border-radius: 10px; border: 1px dashed var(--glass-line-strong); }
.dev-grid i { display: block; height: 26px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 32%, transparent); }
.dev-grid.cols-1 { grid-template-columns: 1fr; }
.dev-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 260px; }
.dev-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 300px; }

/* 中屏（600–859）：卡片两列，不再是一根长条 */
@media (min-width: 600px) {
  :root { --gutter: 20px; }
  .app { max-width: 900px; }

  /* 内容区自动切成两列：卡片类自动成块，宽度不够的自动跨满 */
  .auto-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  .auto-2col > * { margin-bottom: 0 !important; min-width: 0; }
  .auto-2col > .span-2 { grid-column: 1 / -1; }

  /* 顶部栏在宽屏上不必贴满，内容对齐 */
  .topbar { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  /* 日期 + 计划徽标在同一行，不要因为列窄而换行 */
  .row.between { flex-wrap: wrap; row-gap: 6px; }

  /* 弹层在宽屏上改成居中卡片，而不是拉满全宽的底部抽屉 */
  .sheet-mask { align-items: center; padding: 24px; }
  .sheet {
    max-width: 520px; border-radius: 24px; border-bottom: 1px solid var(--glass-line-strong);
    max-height: min(86dvh, 780px);
    animation: sheetPop 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sheet-handle { display: none; }
  @keyframes sheetPop { from { transform: scale(0.96) translateY(10px); opacity: 0.6; } to { transform: none; opacity: 1; } }

  /* Toast 在宽屏不压住导航 */
  .toast { bottom: 28px; max-width: 60vw; }
}

/* 大屏（≥1100）：三列 + 更大的字号 */
@media (min-width: 1100px) {
  .app { max-width: 1120px; }
  .auto-2col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .auto-2col > .span-2 { grid-column: span 2; }
  .card { padding: 20px; }
  .h1 { font-size: 1.6rem; }
}

/* 阔折叠展开态（600–1099）：保持两列，但放大字号、放宽卡片内边距 */
@media (min-width: 600px) and (max-width: 1099px) {
  .card { padding: 20px; }
  .h1 { font-size: 1.55rem; }
  .h2 { font-size: 1.02rem; }
  .stat b { font-size: 1.34rem; }
  /* 三块数据卡在宽屏上不必竖排挤在一起 */
  .grid3 { gap: 12px; }
  .stat { padding: 15px 14px; }
}

/* 底部导航在宽屏上不要铺满整行 —— 4 个图标散在 939px 上很难看 */
@media (min-width: 600px) {
  .nav { padding-left: max(12px, calc((100vw - 620px) / 2)); padding-right: max(12px, calc((100vw - 620px) / 2)); }
  .nav-inner { max-width: 620px; }
  .nav button { min-height: 54px; font-size: 0.72rem; }
  .nav button svg { width: 22px; height: 22px; }
}

/* 阔折叠展开态（宽 ≥ 600 且接近方形）：训练页改成「顶部信息 + 双列动作卡」 */
@media (min-width: 600px) {
  .train-layout { display: block; }
  .train-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  .train-list > .ex-card { margin-bottom: 0; }
  /* 卡片内的组数表格在窄列里需要更紧的间距 */
  .train-list .set-row { gap: 6px; }
}

/* 阔折叠展开态比较矮（939×664 减去浏览器栏实际约 560px 高）。
   双列时每个动作卡约 440px 宽，比手机竖屏（390px）还宽一点点，
   组数行的 5 列比例按卡片宽度微调即可，不需要另起一套结构。 */
@media (min-width: 600px) {
  .train-list .set-row { grid-template-columns: 30px 1fr 1fr 54px 44px; }
}

/* 横屏手机（高度很小）：压缩顶部栏与底部导航，避免内容被挤没 */
@media (max-height: 500px) and (min-width: 600px) {
  .topbar { padding-top: 8px; padding-bottom: 8px; margin-bottom: 12px; }
  .nav { padding-top: 4px; padding-bottom: 4px; }
  .nav button { min-height: 42px; }
}

/* 视口分段 API（Chromium 138+，折叠屏半折叠时铰链可见）——避让折痕 */
@media (horizontal-viewport-segments: 2) {
  .app {
    display: grid;
    grid-template-columns:
      env(viewport-segment-width 0 0)
      env(viewport-segment-width 1 0);
    column-gap: 20px;
    max-width: none;
  }
  .app > .topbar { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.fade-in { animation: pageIn 0.26s ease; }
@keyframes pageIn { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ================= 动作选择器 ================= */
.picker { display: flex; flex-direction: column; min-height: 0; }
.picker .input { margin-bottom: 10px; }
.chip-scroll {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 0 11px; scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; font-size: 0.73rem; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: transparent;
  color: var(--text-2); font-family: inherit; cursor: pointer; white-space: nowrap;
  min-height: 32px; transition: all 0.16s;
}
.chip.on { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-soft); }
[data-theme="paper"] .chip.on { color: var(--accent); }
.chip-sep { flex: 0 0 auto; width: 1px; align-self: center; height: 16px; background: var(--divider); }

.picker-list { max-height: 52dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 6px; }
.picker-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 11px;
  border-radius: var(--radius-xs); border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 40%, transparent); cursor: pointer; transition: all 0.14s;
}
.picker-item.on { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: var(--accent-wash); }
.pi-main { flex: 1; min-width: 0; }
.pi-name { font-size: 0.9rem; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pi-meta { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; }
.pi-alias { color: var(--text-3); }
.picker-empty { text-align: center; padding: 28px 12px; font-size: 0.84rem; }
.picker-foot { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--divider); }
.picker-hint { font-size: 0.72rem; color: var(--text-2); line-height: 1.55; margin-bottom: 9px; }
.star-btn { width: 34px; height: 34px; font-size: 0.95rem; color: var(--warn); flex: 0 0 auto; }
.star { color: var(--warn); font-size: 0.8rem; }

/* 标签 */
.tag {
  display: inline-block; font-size: 0.62rem; line-height: 1.6; padding: 0 7px;
  border-radius: 6px; background: var(--accent-wash); color: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); vertical-align: middle;
}
[data-theme="paper"] .tag { color: var(--accent); }
.tag.custom { background: rgba(219, 186, 124, 0.12); border-color: rgba(219, 186, 124, 0.32); color: var(--warn); }
.tag.extra { background: transparent; border-color: var(--glass-line-strong); color: var(--text-2); }
.ex-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.ex-tags:empty { display: none; }

/* 组数三口径 */
.set-counts {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline;
  font-size: 0.7rem; color: var(--text-2); margin-top: 8px;
  padding: 6px 9px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 35%, transparent);
}
.set-counts b { color: var(--accent-soft); font-weight: 600; }
[data-theme="paper"] .set-counts b { color: var(--accent); }
.set-counts .sep { opacity: 0.35; }
.set-counts .ok b { color: var(--accent); }

/* 训练页入口 */
.add-entry {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--divider);
}
.add-entry .tiny { flex: 1; min-width: 120px; font-size: 0.7rem; color: var(--text-3); }
.plan-link { margin-top: 14px; }

/* 表单 */
.form .field { margin-bottom: 12px; }
.chk-line { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--text); min-height: 44px; }
.chk-line input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

/* 从今日动作跳转时的目标动作高亮 */
.ex-focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-wash), var(--shadow) !important;
  animation: focusPulse 1.1s ease-out 2;
}
@keyframes focusPulse {
  0% { box-shadow: 0 0 0 0 var(--accent-wash), var(--shadow); }
  60% { box-shadow: 0 0 0 7px transparent, var(--shadow); }
  100% { box-shadow: 0 0 0 2px var(--accent-wash), var(--shadow); }
}

/* =====================================================================
   动作示意图（v1.5）
   自绘 SVG 线条动画，两帧交替。颜色全部取自主题变量，
   所以换配色时示意图会跟着一起换。
   ===================================================================== */
.ex-fig {
  width: 100%; height: auto; display: block;
  overflow: visible;
}
/* 人体线条：先画一层深色底衬再画亮色，压在器械上也看得清边界 */
.ex-fig .fig-body { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
/* 浅色主题下用浅色描边，不然一圈黑边显得脏 */
[data-theme="paper"] .ex-fig .fig-body { filter: drop-shadow(0 1px 1px rgba(20,40,30,0.18)); }
.ex-fig .fig-bone { fill: none; stroke: var(--accent-soft); stroke-width: 5; }
.ex-fig .fig-head { fill: color-mix(in srgb, var(--bg) 70%, transparent); stroke: var(--accent-soft); stroke-width: 3.2; }
.ex-fig .fig-joint { fill: color-mix(in srgb, var(--accent-soft) 85%, transparent); }
.ex-fig .fig-bar { fill: color-mix(in srgb, var(--text) 58%, transparent); }
.ex-fig .fig-plate { fill: color-mix(in srgb, var(--text) 38%, transparent); }
.ex-fig .fig-bench { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.ex-fig .fig-rig { stroke: color-mix(in srgb, var(--text-3) 55%, transparent); stroke-width: 2.5; fill: none; }
.ex-fig .fig-ground { stroke: color-mix(in srgb, var(--text-3) 34%, transparent); stroke-width: 2; stroke-dasharray: 5 6; }
.ex-fig .fig-cable { stroke: color-mix(in srgb, var(--accent) 62%, transparent); stroke-width: 2; }
.ex-fig .fig-weight { fill: color-mix(in srgb, var(--accent) 26%, transparent); }
.ex-fig .fig-arc { stroke: color-mix(in srgb, var(--accent) 46%, transparent); stroke-width: 2; stroke-dasharray: 4 5; }

/* 两帧交替：4.2 秒一个来回，先停 0.6 秒看清起始位 */
.ex-fig .fig-frame { transform-origin: 120px 100px; }
.ex-fig .fig-frame.fa { animation: figA 4.2s ease-in-out infinite; }
.ex-fig .fig-frame.fb { animation: figB 4.2s ease-in-out infinite; opacity: 0; }
@keyframes figA {
  0%, 12% { opacity: 1; }
  50%, 62% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes figB {
  0%, 12% { opacity: 0; }
  50%, 62% { opacity: 1; }
  100% { opacity: 0; }
}
.ex-fig.static .fa { animation: none; opacity: 1; }
.ex-fig.static .fb { display: none; }

/* 舞台：一块带内衬的底，图不会悬空 */
.fig-stage {
  position: relative; border-radius: var(--radius-sm); padding: 10px 8px 6px;
  background: radial-gradient(120% 90% at 50% 12%, var(--accent-wash), color-mix(in srgb, var(--bg) 62%, transparent));
  border: 1px solid var(--glass-line); cursor: zoom-in;
}
.fig-stage.big { margin-top: 8px; cursor: default; }
.fig-stage.big .ex-fig { max-height: 52dvh; margin: 0 auto; }

/* 提示条 */
.fig-tip {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-xs);
  background: var(--accent-wash); border: 1px solid var(--glass-line);
  font-size: 0.78rem; line-height: 1.55; color: var(--text-2);
}

/* 训练页的「问号」小按钮：刻意低调，只有 22px，颜色接近次要文字 */
.fig-btn {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin-left: 6px;
  display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--glass-line); background: transparent;
  color: var(--text-3); cursor: pointer; transition: color 0.16s, border-color 0.16s, background 0.16s;
  vertical-align: middle;
}
.fig-btn svg { width: 13px; height: 13px; }
.fig-btn:hover, .fig-btn:focus-visible { color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-wash); }
/* 触摸设备没有 hover，给一个刚好能被看见的底色 */
@media (hover: none) { .fig-btn { color: var(--text-2); border-color: var(--glass-line-strong); } }

/* 首页「今日动作」行：点击整行进训练，右侧留一个不明显的小图示入口 */
.plan-row .fig-btn { margin-left: 8px; }