/* ==========================================================================
   训练日记 · 共用样式（设计系统）
   所有页面都用这一套，别再各写各的，否则弹层那种「样式没生效」的坑还会再犯。
   ========================================================================== */

:root {
  /* 颜色 */
  --bg:        #070C16;
  --bg-soft:   #0B1220;
  --panel:     #101B2D;
  --panel-2:   #16233A;
  --panel-3:   #1C2C47;
  --line:      #22344F;
  --line-soft: rgba(34, 52, 79, .55);

  --fg:        #E8F0FA;
  --fg-dim:    #93A8C6;
  --fg-mute:   #64799A;

  --accent:    #22D3EE;
  --accent-2:  #0EA5C4;
  --accent-ink:#052029;
  --ok:        #34D399;
  --warn:      #F5A524;
  --danger:    #FB5C7D;
  --work:      #FF5C7A;
  --rest:      #4C8DF6;

  /* 尺寸 */
  --r-sm: 9px;
  --r:    13px;
  --r-lg: 18px;
  --nav-h: 62px;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 6px 20px rgba(0,0,0,.35);
  --sh-3: 0 18px 50px rgba(0,0,0,.55);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------------------------------------------------------------- 布局 */

.page { max-width: 760px; margin: 0 auto; padding: 0 0 28px; }
.wrap { padding: 0 16px; }

.head { padding: 24px 16px 6px; }
.head h1 { font-size: 25px; line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.2px; }
.head .sub { color: var(--fg-dim); font-size: 13px; margin-top: 5px; }

/* 【hidden 必须真的隐藏】
   浏览器默认的 [hidden]{display:none} 是 UA 样式，优先级低于作者样式 ——
   只要某个类写了 display（.card 是 block、.sec 是 flex），
   el.hidden = true 就完全不起作用，元素照旧显示。
   2026-10-18 巡检踩到：设置页给佳明用户隐藏「高驰账号」卡时，
   属性确实设上了（JS 读得到 hidden=true），但卡片还在屏幕上。
   下面这条把 hidden 统一钉死，以后别再用 display-fix 单点补。 */
[hidden] { display: none !important; }

.sec {
  font-size: 12px; font-weight: 600; letter-spacing: .6px;
  color: var(--fg-mute); text-transform: none;
  margin: 26px 16px 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.sec .act { font-size: 13px; color: var(--accent); font-weight: 500; cursor: pointer; letter-spacing: 0; }
.sec .act:hover { text-decoration: underline; }

  /* 纯状态文字，例如「3 条未读」「共 917 天」。
     别用 .act —— 那个带 cursor:pointer 和悬停下划线，看着像能点，
     结果点下去没反应。这里明确不可点。 */
  .sec .cnt {
    font-size: 12.5px; color: var(--fg-mute); font-weight: 400;
    cursor: default; letter-spacing: 0;
  }

/* ---------------------------------------------------------------- 卡片 */

.card {
  display: block;                 /* <a> 默认是 inline，不写这条 margin 会失效、宽度撑满 */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin: 0 16px 10px;
  padding: 16px;
  box-shadow: var(--sh-1);
  color: inherit;
  text-decoration: none;
}
.card.pad0 { padding: 0; overflow: hidden; }
.card.tap { cursor: pointer; transition: border-color .15s, transform .1s, background .15s; }
.card.tap:hover { border-color: rgba(34,211,238,.5); background: var(--panel-2); }
.card.tap:active { transform: scale(.995); }

/* 列表行 */
.item { display: flex; align-items: center; gap: 13px; }
.item + .item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ico {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ico.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.mid { flex: 1; min-width: 0; }
.t1 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.t2 { font-size: 12.5px; color: var(--fg-dim); margin-top: 2px; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end { text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.big { font-size: 17px; font-weight: 700; }
.big small { font-size: 11px; font-weight: 400; color: var(--fg-dim); margin-left: 2px; }

/* ---------------------------------------------------------------- 按钮 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 16px; font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.btn:hover:not(:disabled) { border-color: rgba(34,211,238,.55); color: var(--accent); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn.pri:hover:not(:disabled) { background: #3DDDF5; border-color: #3DDDF5; color: var(--accent-ink); }
.btn.danger { color: var(--danger); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.row2 { display: flex; gap: 10px; }
.row2 .btn { flex: 1; }
.row3 { display: flex; gap: 8px; }
.row3 .btn { flex: 1; }

/* ---------------------------------------------------------------- 表单 */

.field { margin-top: 15px; }
.field:first-child { margin-top: 0; }
.field label { display: block; font-size: 12.5px; color: var(--fg-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 13px; font-size: 15px; font-family: inherit; line-height: 1.4;
  transition: border-color .15s, background .15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--panel-3);
}
.field textarea { resize: vertical; min-height: 84px; }
.hint { font-size: 12px; color: var(--fg-mute); margin-top: 7px; line-height: 1.65; }
.err {
  background: rgba(251,92,125,.1); border: 1px solid rgba(251,92,125,.35);
  color: #FFB3C4; border-radius: var(--r-sm); padding: 11px 14px;
  font-size: 13px; margin-top: 14px; display: none;
}
.err.on { display: block; }

/* 头像选择 */
.avpick { display: flex; gap: 8px; flex-wrap: wrap; }
.avpick button {
  width: 46px; height: 46px; padding: 0; font-size: 22px; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; transition: .15s;
}
.avpick button:hover { border-color: rgba(34,211,238,.5); }
.avpick button.on { border-color: var(--accent); background: rgba(34,211,238,.14); }

/* ---------------------------------------------------------------- 弹层
   统一用 .overlay + .overlay.on。position 一定是 fixed，
   免得再出现「选择器写错导致弹层掉到页面底部」的问题。            */

.overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(3,7,14,.74);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, visibility .2s;
}
.overlay.on { opacity: 1; visibility: visible; pointer-events: auto; }

.dialog {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width: 100%; max-width: 460px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(12px) scale(.98); transition: transform .22s;
}
.overlay.on .dialog { transform: none; }
.dialog.wide { max-width: 560px; }

.dhead {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px 15px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.dhead .tt { flex: 1; min-width: 0; }
.dhead h3 { margin: 0; font-size: 17px; font-weight: 600; }
.dhead .sub { font-size: 12.5px; color: var(--fg-dim); margin-top: 3px; }
.dclose {
  background: none; border: none; color: var(--fg-dim); font-size: 19px;
  line-height: 1; padding: 4px 9px; margin: -2px -4px 0 0; cursor: pointer;
  border-radius: 9px; font-family: inherit; transition: .15s;
}
.dclose:hover { color: var(--fg); background: var(--panel-2); }

.dbody { padding: 18px; overflow-y: auto; flex: 1 1 auto; }
.dbody.flush { padding: 0; }
.dfoot {
  padding: 14px 18px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; flex: 0 0 auto; background: var(--panel);
}
.dfoot .btn { flex: 1; }

  /* 手机端弹窗定位。

     早先是「一律贴底」的 bottom sheet，结果矮弹窗（添加时段、确认框）
     只有 290px 高却贴在 844px 屏幕的最下面，上面三分之二全空着，
     看着像画错了，手指也够不着上面。

     改成自适应：默认居中；内容高过屏幕 62% 才切成底部抽屉 ——
     那种情况下它本来就几乎铺满，贴底反而方便。
     切换由 ui.js 的 modal() 量完高度加 .sheet 类来完成。 */
  @media (max-width: 560px) {
    .overlay { padding: 14px; align-items: center; }
    .dialog {
      max-width: none; max-height: 84vh;
      transform: translateY(16px) scale(.98);
    }
    .overlay.on .dialog { transform: none; }

    /* 高内容 → 底部抽屉 */
    .overlay.sheet { padding: 0; align-items: flex-end; }
    .overlay.sheet .dialog {
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      border-bottom: none; max-height: 92vh;
      transform: translateY(24px);
    }
    .overlay.sheet.on .dialog { transform: none; }

    /* 底部抽屉的按钮别贴着 home 指示条 */
    .overlay.sheet .dfoot {
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
  }

/* 可滚动列表（动作选择等） */
.picker { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.picker .grp {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--fg-dim);
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  padding: 8px 18px; border-bottom: 1px solid var(--line-soft);
}
.picker .opt {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background .12s;
}
.picker .opt:hover { background: var(--panel-2); }
.picker .opt:active { background: var(--panel-3); }
.picker .opt .n { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.picker .opt .m { font-size: 12px; color: var(--fg-dim); flex: 0 0 auto; }

/* ---------------------------------------------------------------- 标签 */

.tag {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .2px; flex: 0 0 auto;
}
.tag.iv  { background: rgba(255,92,122,.16); color: var(--work); }
.tag.me  { background: rgba(34,211,238,.15);  color: var(--accent); }
.tag.ok  { background: rgba(52,211,153,.15);  color: var(--ok); }
.tag.no  { background: rgba(147,168,198,.14); color: var(--fg-dim); }
.tag.est { background: rgba(245,165,36,.14);  color: var(--warn); }

/* ---------------------------------------------------------------- 表格 */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th {
  background: var(--panel-2); color: var(--fg-dim); font-weight: 500;
  font-size: 11.5px; text-align: right; padding: 11px 8px; white-space: nowrap;
}
.tbl th:first-child { text-align: left; padding-left: 18px; }
.tbl th:last-child  { padding-right: 18px; }
.tbl td { text-align: right; padding: 12px 8px; border-bottom: 1px solid var(--line-soft); }
.tbl td:first-child { text-align: left; padding-left: 18px; font-weight: 600; }
.tbl td:last-child  { padding-right: 18px; }
.tbl tr.work td:first-child { color: var(--work); }
.tbl tr.rest td:first-child { color: var(--rest); }
.tbl tr.total td { font-weight: 700; background: var(--panel-2); }
.tbl tr.total td:first-child { color: var(--fg); }

/* 数据格 */
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden;
}
.grid .c { background: var(--panel); padding: 14px 8px; text-align: center; }
.grid .c .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.grid .c .v small { font-size: 10.5px; font-weight: 400; color: var(--fg-dim); margin-left: 2px; }
.grid .c .k { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }

/* ---------------------------------------------------------------- 状态 */

.empty { padding: 54px 26px; text-align: center; color: var(--fg-dim); font-size: 14px; line-height: 1.9; }
.empty .e-ico { font-size: 34px; margin-bottom: 10px; opacity: .7; }
.empty .e-sub { font-size: 12.5px; color: var(--fg-mute); }

.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bar { height: 4px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }

.note {
  background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.22);
  color: #9FD8E6; border-radius: var(--r-sm); padding: 11px 14px;
  font-size: 12.5px; line-height: 1.7;
}
.note.warn { background: rgba(245,165,36,.1); border-color: rgba(245,165,36,.3); color: #F3C77A; }

/* ---------------------------------------------------------------- 底部导航 */

#bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; background: rgba(11,18,32,.94);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#bnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 8px; text-decoration: none; color: var(--fg-mute);
  font-size: 10.5px; transition: color .15s;
}
#bnav a .i { font-size: 19px; line-height: 1.05; filter: grayscale(1) opacity(.55); transition: filter .15s; }
#bnav a.on { color: var(--accent); }
#bnav a.on .i { filter: none; }
#bnav a { position: relative; }
/* 未读小红点 */
#bnav a .nbadge {
  position: absolute; top: 4px; left: 50%; margin-left: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  font-style: normal; line-height: 16px; text-align: center;
  border-radius: 8px; box-shadow: 0 0 0 2px rgba(11,18,32,.9);
}

/* ---------------------------------------------------------------- 浮层提示 */

#toast {
  position: fixed; left: 50%; z-index: 400;
  bottom: calc(var(--nav-h) + 26px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  background: #1E2E47; border: 1px solid var(--line);
  color: var(--fg); padding: 12px 20px; border-radius: 12px;
  font-size: 13.5px; box-shadow: var(--sh-2);
  opacity: 0; transition: opacity .22s, transform .22s;
  pointer-events: none; max-width: min(88vw, 420px); text-align: center;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- 点赞 / 评论
   折叠态就是一条窄窄的互动条，点评论才展开面板 —— 省版面。 */

.ibar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 2px;
}
.ibar .ibtn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--line); border-radius: 20px;
  color: var(--fg-dim); padding: 9px 15px; font-size: 13px;   /* 手机上要够 36px 高才点得准 */
  font-family: inherit; cursor: pointer; transition: .15s;
  font-variant-numeric: tabular-nums;
}
.ibar .ibtn:hover { border-color: rgba(34,211,238,.5); color: var(--accent); }
.ibar .ibtn .ic { font-size: 13px; line-height: 1; }
.ibar .ibtn.like.on { border-color: rgba(251,92,125,.55); color: var(--danger); background: rgba(251,92,125,.1); }
.ibar .ibtn.on { border-color: var(--accent); color: var(--accent); background: rgba(34,211,238,.1); }
.ibar .ibtn .n:empty { display: none; }
.ibar .spacer { flex: 1; }
.ibar .ilikers { font-size: 12px; color: var(--fg-mute); }
.ibar .ilikers b { color: var(--fg-dim); font-weight: 500; }

/* 展开的面板 */
.ipanel {
  margin: 8px 16px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.ipanel .ilikes {
  padding: 11px 14px; font-size: 12.5px; color: var(--fg-dim);
  border-bottom: 1px solid var(--line-soft);
}
.ipanel .ilikes .ic { color: var(--danger); }
.ipanel .icmts { padding: 4px 14px; max-height: 340px; overflow-y: auto; }
.ipanel .iempty { padding: 18px 0; text-align: center; font-size: 13px; color: var(--fg-mute); }

.icmt { display: flex; gap: 10px; padding: 11px 0; }
.icmt + .icmt { border-top: 1px solid var(--line-soft); }
.icmt .iav {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.icmt .ibody { flex: 1; min-width: 0; }
.icmt .ihead { display: flex; align-items: baseline; gap: 8px; }
.icmt .ihead b { font-size: 13px; font-weight: 600; }
.icmt .ihead .itime { font-size: 11px; color: var(--fg-mute); }
.icmt .itext { font-size: 13.5px; color: var(--fg); margin-top: 3px; line-height: 1.65; word-break: break-word; white-space: pre-wrap; }
.icmt .itext .at { color: var(--accent); }
.icmt .iacts { margin-top: 5px; display: flex; gap: 14px; }
.icmt .iacts button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--fg-mute); font-family: inherit;
}
.icmt .iacts button:hover { color: var(--accent); }
.icmt .iacts button.danger:hover { color: var(--danger); }

/* 回复：缩进 + 左侧竖线 */
.icmt .ireplies { margin-top: 9px; padding-left: 11px; border-left: 2px solid var(--line); }
.icmt .ireplies .icmt { padding: 7px 0; }
.icmt .ireplies .icmt + .icmt { border-top: none; }
.icmt .ireplies .iav { width: 26px; height: 26px; font-size: 13px; }
.icmt .ireplies .itext { font-size: 13px; }

.ipanel .iinput {
  display: flex; gap: 8px; padding: 11px 14px;
  border-top: 1px solid var(--line); background: var(--panel-2);
}
.ipanel .iinput input {
  flex: 1; min-width: 0; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 12px; font-size: 13.5px; font-family: inherit;
}
.ipanel .iinput input:focus { outline: none; border-color: var(--accent); }
.ipanel .iinput button {
  flex: 0 0 auto; background: var(--accent); border: none; color: var(--accent-ink);
  border-radius: 9px; padding: 9px 16px; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.ipanel .iinput button:disabled { opacity: .4; cursor: not-allowed; }
.ipanel .ireplying {
  padding: 7px 14px; font-size: 12px; color: var(--accent);
  background: rgba(34,211,238,.07); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.ipanel .ireplying button {
  background: none; border: none; color: var(--fg-mute); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; font-family: inherit;
}

/* 虚拟列表的分块容器。不设样式，只用来分隔渲染单元。 */
.vchunk { display: block; }


/* ---------------------------------------------------------------- 手机上禁止输入框放大

   iOS Safari 有个行为：输入框的 font-size 小于 16px 时，一聚焦就自动放大整个页面，
   而且松手后不会自己缩回去 —— 用户看到的就是「点一下输入框，界面一下子变大了」。

   站内原本有三处小于 16px：主表单 15px、评论框 13.5px、时段名 13.5px。
   全部提到 16px 是最省事也最正确的做法（不要用 user-scalable=no 去堵，
   那会连用户自己想放大都放不了，是无障碍问题）。

   !important 是因为页面自己的 <style> 在 ui.css 之后加载，同权重会盖掉这里。 */
@media (max-width: 560px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}


/* ================================================================ 训练负荷 */

.ldload, .ldempty {
  padding: 34px 18px; text-align: center; color: var(--fg-mute); font-size: 14px;
  line-height: 1.9;
}
.ldempty .dim { color: var(--fg-mute); font-size: 12.5px; }

/* 日期导航 */
.ldnav {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
}
.ldnb {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--fg-dim);
  border-radius: 8px; padding: 5px 11px; font-size: 15px; line-height: 1;
  font-family: inherit; cursor: pointer;
}
.ldnb:hover { border-color: var(--accent); color: var(--accent); }
.ldnd { flex: 1; text-align: center; font-size: 14px; font-weight: 600; }

/* 标签页 */
.ldtabs { display: flex; border-bottom: 1px solid var(--line-soft); }
.ldtabs button {
  flex: 1; background: none; border: none; color: var(--fg-mute);
  padding: 12px 0; font-size: 13.5px; font-family: inherit; cursor: pointer;
  border-bottom: 2px solid transparent; transition: .15s;
}
.ldtabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* 每条训练 */
.ldw { border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.ldwh {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 13px 16px 8px;
}
.ldwn { font-size: 14.5px; font-weight: 600; }
.ldwt { font-size: 12.5px; color: var(--fg-mute); }
.ldtag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--panel-2); color: var(--fg-mute);
}
.ldtag.fix { background: rgba(34,211,238,.15); color: var(--accent); }
.ldwl { margin-left: auto; font-size: 12.5px; color: var(--fg-dim); }
.ldwl b { color: var(--fg); font-weight: 600; }

/* 分段列表 */
.ldgh {
  padding: 8px 16px 4px; font-size: 12px; color: var(--fg-mute);
}
.ldgl { padding: 0 16px; }
.ldgr {
  display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 13px;
}
.ldgi { width: 18px; color: var(--fg-mute); font-size: 11.5px; text-align: right; flex: 0 0 auto; }
.ldgr input {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  color: var(--fg); font-family: inherit; font-size: 13px; padding: 5px 6px;
  text-align: right; min-width: 0;
}
.ldgr input:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.ldgr .ldgd { width: 54px; }
.ldgr .ldgt { width: 58px; }
.ldgu { color: var(--fg-mute); font-size: 11px; }
.ldgp { flex: 1; text-align: right; color: var(--fg-dim); font-size: 12.5px; padding-right: 4px; }
.ldgs {
  border: 1px solid var(--line); border-radius: 6px; background: none;
  font-size: 11.5px; font-family: inherit; padding: 3px 8px; cursor: pointer;
  color: var(--fg-mute); flex: 0 0 auto;
}
.ldgs.work { color: var(--accent); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.1); }
.ldgx {
  border: none; background: none; color: var(--fg-mute); font-size: 14px;
  cursor: pointer; padding: 2px 5px; flex: 0 0 auto;
}
.ldgx:hover { color: var(--danger); }
.ldgadd { display: flex; gap: 10px; padding: 10px 16px 12px; }
.ldga {
  background: none; border: 1px dashed var(--line); color: var(--fg-mute);
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-family: inherit;
  cursor: pointer;
}
.ldga:hover { border-color: var(--accent); color: var(--accent); }

.ldtip {
  padding: 14px 16px; font-size: 12px; color: var(--fg-mute); line-height: 1.8;
}

/* 底部合计 */
.ldfoot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.ldsum { flex: 1; min-width: 160px; }
.ldsline { display: flex; gap: 14px; align-items: baseline; font-size: 13px; color: var(--fg-dim); }
.ldsline b { font-size: 15px; color: var(--fg); font-weight: 600; }
.ldsb.hi b { color: #fb923c; }
.ldsc { font-size: 11.5px; color: var(--fg-mute); }
.ldsbar {
  display: flex; height: 5px; border-radius: 3px; overflow: hidden;
  margin-top: 7px; background: var(--panel-2);
}
.ldsbar i { display: block; }
.ldbtns { display: flex; gap: 10px; }

/* 趋势图 */
.ldchart { padding: 14px 16px 4px; border-bottom: 1px solid var(--line-soft); }
.ldct { font-size: 12.5px; color: var(--fg-dim); margin-bottom: 10px; }
.ldcbox {
  position: relative; height: 110px; background: var(--panel-2);
  border-radius: 8px; overflow: hidden;
}
.ldbar {
  position: absolute; bottom: 0; width: 5px; margin-left: -2.5px;
  background: rgba(34,211,238,.42); border-radius: 2px 2px 0 0;
}
.ldbar.off { background: rgba(148,163,184,.13); height: 3px !important; }
.ldbar.an { background: rgba(244,114,182,.38); }
/* 这层 SVG 铺满整个图，如果不关掉 pointer-events 会把柱子的点击全吃掉
   —— 表现就是「柱子点了没反应」 */
.ldline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ldcleg {
  display: flex; gap: 14px; font-size: 11px; color: var(--fg-mute);
  margin-top: 8px; flex-wrap: wrap;
}
.ldcleg i {
  display: inline-block; width: 9px; height: 3px; border-radius: 2px;
  margin-right: 4px; vertical-align: middle;
}
.ldcleg i.sq { width: 7px; height: 7px; border-radius: 2px; }

.ldzsum { padding: 14px 16px; }
.ldzr { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.ldzn { flex: 1; }
.ldzn i {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 8px; vertical-align: middle;
}
.ldzv { color: var(--fg); font-variant-numeric: tabular-nums; }
.ldzp { color: var(--fg-mute); font-size: 12px; width: 46px; text-align: right; }

/* 今天页 / 日志页的入口按钮 */
.ldentry {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); color: var(--fg-dim);
  border-radius: 9px; padding: 8px 14px; font-size: 13px; font-family: inherit;
  cursor: pointer; transition: .15s;
}
.ldentry:hover { border-color: var(--accent); color: var(--accent); }
.ldentry b { color: var(--accent); font-weight: 600; }


/* ---------------- 趋势图 v2 ---------------- */

/* 时间范围切换 */
.ldrange {
  display: flex; gap: 6px; padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line-soft); overflow-x: auto;
}
.ldrange button {
  flex: 1; min-width: 52px; padding: 7px 4px; font-size: 13px; font-family: inherit;
  background: var(--panel-2); color: var(--fg-mute); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; transition: .15s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.ldrange button.on {
  background: rgba(34,211,238,.13); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}

/* 概览四个数 */
.ldstat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.lds { background: var(--panel); padding: 13px 16px; }
.ldsv { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ldsl { font-size: 12px; color: var(--fg-dim); margin-top: 3px; }
.ldss { font-size: 11px; color: var(--fg-mute); margin-top: 2px; }

/* 图表区 */
.ldref { color: var(--fg-mute); font-size: 11.5px; }
.ldref b { color: var(--accent); font-weight: 600; }

.ldband { position: absolute; left: 0; right: 0; pointer-events: none; }
.ldband.lo { bottom: 0; background: rgba(96,165,250,.07); }
.ldband.hi { top: 0; background: rgba(251,146,60,.08); }
.ldrefline {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed rgba(148,163,184,.5); pointer-events: none;
}
.ldrefline span {
  position: absolute; right: 5px; top: -14px; font-size: 10px;
  color: var(--fg-mute); background: var(--panel-2); padding: 0 4px; border-radius: 3px;
}
.ldbar { cursor: pointer; transition: filter .12s; }
.ldbar:hover { filter: brightness(1.5); }
.ldcleg .sep { color: var(--line); }

/* 每天明细 */
.ldzdays { padding: 14px 16px 6px; border-top: 1px solid var(--line-soft); }
.ldday {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  font-size: 12.5px; border-top: 1px solid var(--line-soft);
}
.lddd { width: 42px; color: var(--fg-mute); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.lddg {
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  color: #0b1220; font-weight: 600; flex: 0 0 auto;
}
.ldda { color: var(--fg-dim); }
.ldda b { color: var(--fg); font-weight: 600; }
.lddan { flex: 1; text-align: right; }
.lddk { color: var(--fg-mute); font-size: 11.5px; width: 92px; text-align: right; flex: 0 0 auto; }

/* 日期选择器：把原生 date input 藏在文字底下，点文字就弹系统的选择器 */
.ldnpick { flex: 1; position: relative; text-align: center; cursor: pointer; }
.ldnpick input[type=date] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; font-size: 16px;
}
.ldnpick:hover .ldnd { color: var(--accent); }


/* 内容很长的弹层（比如负荷趋势）：占满可用高度，让内部滚动 */
.dialog.tall { max-height: 92vh; height: 92vh; }
@media (max-width: 560px) {
  .overlay.sheet .dialog.tall { height: 92vh; max-height: 92vh; }
}


/* 每天明细的表头 */
.lddh {
  display: flex; align-items: center; gap: 8px; padding: 6px 0 4px;
  font-size: 10.5px; color: var(--fg-mute); border-top: none;
}
.lddh .lddd { width: 42px; flex: 0 0 auto; }
.lddh .lddgh { font-size: 10.5px; }
.lddh .ldda { flex: 1; }
.lddh .lddan { width: 58px; text-align: right; flex: 0 0 auto; }

/* 明细行里再加一列，调一下宽度 */
.ldday .lddan { flex: 0 0 auto; width: 58px; text-align: right; }
.ldday .lddan b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ldday .ldda { flex: 1; }
.ldday .ldda b { font-variant-numeric: tabular-nums; }


/* ---------------- 折线图 ---------------- */
.ldnav2 {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
}
.ldnd2 { flex: 1; text-align: center; font-size: 14px; font-weight: 600; }
.ldnb:disabled { opacity: .35; cursor: default; }
.ldnb:disabled:hover { border-color: var(--line); color: var(--fg-dim); }

.lcline { overflow: visible; }
.lcline svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ldpt {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  margin: -4px 0 0 -4px; cursor: pointer; border: 1.5px solid var(--panel);
  transition: transform .12s; z-index: 2;
}
.ldpt:hover { transform: scale(1.7); }
.ldpt.off { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #475569 !important; opacity: .5; }
.ldxaxis {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 10.5px; color: var(--fg-mute);
}

/* 上期对比 */
.ldd { font-size: 11px; font-weight: 600; margin-left: 4px; }
.ldd.up { color: #fb923c; }
.ldd.down { color: #60a5fa; }
.ldd.flat { color: var(--fg-mute); font-weight: 400; }

/* 概览里的对比标签要跟标题一行 */
.ldsl { display: flex; align-items: baseline; }


/* 横轴标签：绝对定位到数据点的真实位置（之前用 space-between 对不齐） */
.ldxaxis { position: relative; height: 14px; margin-top: 7px; }
.ldxaxis span {
  position: absolute; top: 0; white-space: nowrap;
  font-size: 10.5px; color: var(--fg-mute);
}

/* 图上的浮动提示：鼠标移上去就出，不用点 */
.ldtip2 {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(15, 23, 42, .96); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; line-height: 1.7;
  white-space: nowrap; color: var(--fg-dim);
  opacity: 0; transition: opacity .12s;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.ldtip2.on { opacity: 1; transform: translateY(0); }
.ldtip2 b { color: var(--fg); font-weight: 600; }
.ldtip2 span { display: block; }
.ldtip2 span b { color: var(--fg); }


/* 堆叠柱：下面有氧、上面无氧 */
.ldbars { overflow: visible; }
/* 必须给 height:100% ——
   子元素用的是百分比高度，如果父容器 height:auto，
   百分比就失去参照，整根柱子会塌成 0 高度（之前就是这个 bug，
   柱子在 DOM 里但看不见）。 */
.ldstk {
  position: absolute; bottom: 0; height: 100%;
  display: flex; flex-direction: column;
  justify-content: flex-end; cursor: pointer; z-index: 1;
  border-radius: 2px 2px 0 0;
}
.ldstk b { display: block; width: 100%; transition: filter .12s; }
.ldstk:hover b { filter: brightness(1.35); }

/* 日期选择器：加个看得见的日历图标，不然用户不知道能点 */
.ldnpick .cal {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 11px; opacity: .6; pointer-events: none; line-height: 1;
}
.ldnpick:hover .cal { opacity: 1; }


/* 补全分圈数据的进度条 */
.dfstat { font-size: 13px; }
.dfbar {
  height: 8px; background: var(--panel-2); border-radius: 4px;
  overflow: hidden; margin-bottom: 8px;
}
.dfbar i {
  display: block; height: 100%; background: var(--accent);
  border-radius: 4px; transition: width .4s;
}
.dfrow { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; }
.dfrow.dim { color: var(--fg-mute); font-size: 11.5px; }
.dfrow b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }


/* 明细表：有氧 / 无氧 两列分开 */
.lddz {
  width: 42px; text-align: right; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.lddz.ae { color: #22d3ee; }
.lddz.an { color: #f472b6; }
.lddz b { color: inherit; font-weight: 600; }
.ldday .lddan { width: 54px; }
.lddh .lddz { font-size: 10.5px; }
.lddh .lddan { width: 54px; }


/* ---------------- 力量热力图 ---------------- */
.heatwrap {
  padding: 12px 14px 4px; border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
.heatbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.heatbar > b { font-size: 14px; }
.heatrange { display: flex; gap: 5px; }
.heatrange button {
  padding: 5px 11px; font-size: 12px; font-family: inherit;
  background: var(--panel-2); color: var(--fg-mute); cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; transition: .15s;
  -webkit-tap-highlight-color: transparent;
}
.heatrange button.on {
  background: rgba(34,211,238,.13); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.hm-load { padding: 24px; text-align: center; color: var(--fg-mute); font-size: 13px; }

.hm-top {
  display: flex; gap: 1px; background: var(--line-soft);
  border-radius: 8px; overflow: hidden; margin: 12px 16px 14px;
}
.hm-top > div {
  flex: 1; background: var(--panel-2); padding: 9px 6px; text-align: center;
}
.hm-top b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.hm-top span { font-size: 10.5px; color: var(--fg-mute); }

/* 人体图：一张大图，点右上角翻面（照 COROS，2026-10-18） */
.hm-body { padding: 2px 16px 0; }
.hm-figbox { position: relative; max-width: 236px; margin: 0 auto; }
.hm-fig svg { width: 100%; height: auto; display: block; }
.hm-flip {
  position: absolute; right: 0; top: 0; z-index: 2;
  padding: 5px 11px; font-size: 11.5px; font-family: inherit;
  background: rgba(11,18,32,.88); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 20px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hm-flip:hover { background: rgba(34,211,238,.16); }
.hm-sil { fill: rgba(148,163,184,.14); }
.hm-mus { cursor: pointer; }
.hm-mus .sh { stroke: rgba(9,14,24,.5); stroke-width: .5; }
.hm-mus:hover .sh { filter: brightness(1.35); }
.hm-mus.sel .sh { stroke: #fff; stroke-width: 1.2; }
.hm-num {
  font-size: 9px; font-weight: 700; fill: #fff;
  stroke: rgba(7,12,22,.92); stroke-width: 1.7; paint-order: stroke;
  pointer-events: none;
}
/* 三位数组数：肌肉块只有十几个单位宽，照 9px 写会溢出去 */
.hm-num.sm { font-size: 7px; stroke-width: 1.4; }
    .hm-num.sec { fill: #e8a45c; font-weight: 700; font-size: 8px; }
.hm-vt { text-align: center; font-size: 11.5px; color: var(--fg-dim); margin-top: 3px; }
.hm-vt span { margin-left: 9px; font-size: 10.5px; color: var(--fg-mute); }
.hm-legend {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 3px; font-size: 10.5px; color: var(--fg-mute); margin-top: 8px;
}
/* 6 档色阶：每档方块 + 下面的组数标签（组/周） */
.hm-legend .hm-scale { display: flex; flex-wrap: wrap; gap: 3px 5px; }
.hm-legend .hm-scale > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 26px; }
.hm-legend i { width: 100%; height: 8px; border-radius: 2px; display: block; }
.hm-legend em { font-style: normal; font-size: 8px; line-height: 1; white-space: nowrap; }
.hm-legend span { margin: 0 4px; }
.hm-legend b { font-weight: 400; margin-left: 8px; opacity: .85; }

/* 点肌群后的气泡（2026-10-18）：手机上详情在屏幕外，改成直接弹在区域旁边 */
.hm-tip {
  position: absolute; z-index: 6; min-width: 128px; max-width: 200px;
  padding: 8px 10px 7px; border-radius: 10px;
  background: #111a2b; border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  font-size: 12px; line-height: 1.5; color: var(--fg);
  pointer-events: auto;
}
.hm-tip b { font-size: 13px; font-weight: 700; }
.hm-tip .hm-tip-x {
  float: right; margin-left: 8px; font-style: normal; cursor: pointer;
  color: var(--fg-mute); font-size: 15px; line-height: 1;
}
.hm-tip-r { margin-top: 1px; }
.hm-tip-r em { font-style: normal; font-size: 19px; font-weight: 700; color: var(--accent); }
.hm-tip-s { color: var(--fg-dim); }
.hm-tip-sec { margin-left: 5px; font-size: 10px; color: #e8a45c; }
.hm-tip-d { color: var(--fg-mute); font-size: 11px; margin-top: 2px; }

/* 15 块肌肉卡片 */
.hm-parts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px; padding: 10px 16px 8px;
}
.hm-card {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 10px 11px; cursor: pointer; transition: .15s;
}
.hm-card:hover { border-color: var(--accent); }
/* 选了某个部位（下面的明细只剩它）—— 卡片描边高亮 */
.hm-card.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* 筛选提示条：只看「臀」　[显示全部] */
.hm-filter {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 7px 11px;
  background: var(--panel-2); border: 1px solid var(--accent);
  border-radius: 8px; font-size: 13px;
}
.hm-filter button {
  margin-left: auto; padding: 3px 10px; font-size: 12px;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line-soft); border-radius: 6px; cursor: pointer;
}
.hm-filter button:hover { border-color: var(--accent); }
.hm-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.hm-hd i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.hm-hd b { flex: 1; font-size: 13.5px; }
.hm-add {
  width: 22px; height: 22px; padding: 0; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg-mute); cursor: pointer; font-size: 13px; line-height: 1;
  font-family: inherit;
}
.hm-add:hover { border-color: var(--accent); color: var(--accent); }
.hm-nums { display: flex; gap: 10px; font-size: 11px; color: var(--fg-mute); }
.hm-nums b { color: var(--fg); font-size: 13px; font-variant-numeric: tabular-nums; }
.hm-sub {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 10.5px; color: var(--fg-mute); margin-top: 5px;
}
.hm-last { font-size: 10.5px; color: var(--fg-dim); margin-top: 3px; }

@media (max-width: 560px) {
  .hm-parts { grid-template-columns: 1fr 1fr; }
  .hm-figbox { max-width: 212px; }
}

/* 热力图的动作明细 */
.hm-detail { padding: 12px 16px 18px; border-top: 1px solid var(--line-soft); }
.hm-dp { margin-bottom: 14px; }
.hm-dph {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
}
.hm-dph i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.hm-dph b { font-size: 14px; }
.hm-dph span { font-size: 11.5px; color: var(--fg-mute); }
.hm-dt, .hm-dr {
  display: grid; grid-template-columns: 1fr 44px 56px 60px 52px;
  gap: 6px; align-items: center; padding: 6px 0;
}
.hm-dt { font-size: 10.5px; color: var(--fg-mute); border-bottom: 1px solid var(--line-soft); }
.hm-dt span:not(:first-child), .hm-dr span:not(:first-child) { text-align: right; }
.hm-dr { font-size: 12.5px; border-bottom: 1px solid rgba(148,163,184,.07); }
.hm-dn { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.hm-dn i {
  font-style: normal; font-size: 10px; color: var(--fg-mute);
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px; flex: 0 0 auto;
}
.hm-dr b { color: var(--accent); font-weight: 600; }

/* ---------------- 视频播放 ---------------- */

/* 容器限高：竖屏视频在手机上很高，不限的话会把弹层撑爆，
   底部的播放控制条就被挤出屏幕了 —— 看着就像「播不了」。 */
.vwrap {
  background: #000; position: relative;
  max-height: 74vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* 手机弹层是贴着屏幕底边的，播放控制条就在最底下一行 ——
     iOS Safari 的底部工具栏会把它盖住。留出安全边距。 */
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
.vplay {
  width: 100%; height: auto; max-height: 72vh;
  display: block; background: #000; object-fit: contain;
}
.vfallback {
  padding: 12px 16px; font-size: 13px; color: var(--fg-dim);
  text-align: center; background: var(--panel-2); width: 100%;
}
.vfallback a { color: var(--accent); }
.vfallback[hidden] { display: none; }

@media (max-width: 560px) {
  .vwrap { max-height: 64vh; }
  .vplay { max-height: 62vh; }
}


/* 日志页头部那两个按钮：并排、有间距、窄屏换行不挤在一起 */
.ldentries { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* 日志页头部这两个按钮做紧凑一点 —— 它们多占一点高度，
   下面的第一张卡片就会被固定底栏盖住 */
.ldentries .ldentry { padding: 6px 11px; font-size: 12.5px; line-height: 1.1; }
/* 日志页头部的按钮组不额外撑高 */
.ldentries { margin: 0; }


/* 国产浏览器的视频提示条 */
.x5tip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(251,146,60,.12);
  border-top: 1px solid rgba(251,146,60,.3);
  font-size: 12.5px; color: #fdba74; width: 100%;
}
.x5tip button {
  padding: 5px 10px; font-size: 12px; font-family: inherit;
  background: transparent; border: 1px solid rgba(251,146,60,.5);
  color: #fdba74; border-radius: 7px; cursor: pointer; flex: 0 0 auto;
}
.x5tip button:hover { background: rgba(251,146,60,.15); }


/* ---------------- 今日状态登记 ---------------- */
.wellness { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.wn-load { padding: 22px; text-align: center; color: var(--fg-mute); font-size: 13px; }

/* 7 天日期条：缺哪天一眼看见 */
.wn-strip { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.wn-day {
  flex: 1; min-width: 0; padding: 7px 2px; font-family: inherit; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  -webkit-tap-highlight-color: transparent; transition: .15s;
}
.wn-day b { font-size: 10.5px; color: var(--fg-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.wn-day i { font-size: 9.5px; font-style: normal; color: var(--fg-mute); }
.wn-day.has { border-color: rgba(34,211,238,.45); }
.wn-day.has i { color: var(--accent); }
.wn-day.today { border-color: var(--accent); }
.wn-day.on { background: rgba(34,211,238,.14); border-color: var(--accent); }
.wn-day.on b { color: var(--accent); font-weight: 600; }

.wn-form { padding: 12px 14px 14px; }
.wn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; }
.wn-row > label { width: 62px; flex: 0 0 auto; font-size: 12.5px; color: var(--fg-dim); }
.wn-tip { font-size: 10.5px; color: var(--fg-mute); }

.wn-scale { display: flex; gap: 4px; }
.wn-scale button {
  width: 28px; height: 28px; padding: 0; font-family: inherit; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  color: var(--fg-mute); cursor: pointer; transition: .12s;
  -webkit-tap-highlight-color: transparent;
}
.wn-scale button.on { background: var(--accent); border-color: var(--accent); color: #08131a; font-weight: 700; }

/* 酸痛：8 个部位，两列 */
.wn-sore { align-items: flex-start; }
.wn-parts { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; min-width: 0; }
.wn-part { display: flex; align-items: center; gap: 6px; }
.wn-part > span { width: 30px; font-size: 11.5px; color: var(--fg-mute); flex: 0 0 auto; }
.wn-part .wn-scale { flex: 1; }
.wn-part .wn-scale button { flex: 1; width: auto; height: 22px; font-size: 11px; }

.wn-pain {
  padding: 5px 12px; font-family: inherit; font-size: 12.5px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: var(--fg-mute);
}
.wn-pain.on { background: rgba(239,68,68,.16); border-color: #ef4444; color: #fca5a5; }
.wn-painsite, .wn-note {
  flex: 1; min-width: 120px; padding: 6px 10px; font-family: inherit; font-size: 16px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: var(--fg);
}

.wn-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.wn-hint { font-size: 11.5px; color: #fca5a5; }
.wn-hint.ok { color: var(--accent); }

/* 每次训练的 RPE */
.wn-rpe { border-top: 1px solid var(--line-soft); padding: 12px 14px 14px; }
.wn-rt { font-size: 12.5px; color: var(--fg-dim); margin-bottom: 8px; }
.wn-rrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
.wn-rn { flex: 1; min-width: 110px; font-size: 12.5px; color: var(--fg-dim); }
.wn-rn i { font-style: normal; color: var(--fg-mute); font-size: 11px; margin-left: 5px; }
.wn-rb { display: flex; gap: 3px; }
.wn-rb button {
  width: 24px; height: 24px; padding: 0; font-family: inherit; font-size: 11.5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg-mute); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wn-rb button.on { background: #fb923c; border-color: #fb923c; color: #1a1005; font-weight: 700; }
.wn-rs { width: 66px; text-align: right; font-size: 11.5px; color: var(--fg-mute); flex: 0 0 auto; }

@media (max-width: 560px) {
  .wn-day b { font-size: 9.5px; }
  .wn-part .wn-scale button { height: 20px; font-size: 10px; }
  .wn-rb button { width: 21px; height: 21px; font-size: 10.5px; }
}


/* ---------------- 日志页：负荷与状态趋势 ---------------- */
.statline { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.sl-load, .sl-empty { padding: 22px 16px; text-align: center; color: var(--fg-mute); font-size: 13px; line-height: 1.7; }
.sl-empty span { font-size: 12px; opacity: .8; }

.sl-range { display: flex; gap: 6px; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); }
.sl-range button {
  flex: 1; padding: 7px 4px; font-size: 12.5px; font-family: inherit;
  background: var(--panel-2); color: var(--fg-mute); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; transition: .15s;
  -webkit-tap-highlight-color: transparent;
}
.sl-range button.on { background: rgba(34,211,238,.13); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.sl-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); }
.sl-top > div { background: var(--panel-2); padding: 7px 4px; text-align: center; }
.sl-top b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.sl-top span { font-size: 10px; color: var(--fg-mute); }

.sl-sec { padding: 10px 14px 12px; border-top: 1px solid var(--line-soft); }
.sl-t { font-size: 13px; margin-bottom: 7px; }
.sl-sub { font-size: 11px; color: var(--fg-mute); }

.sl-box { position: relative; height: 88px; background: var(--panel-2); border-radius: 8px; overflow: visible; }
.sl-box svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sl-bar { position: absolute; bottom: 0; border-radius: 2px 2px 0 0; cursor: pointer; }
.sl-bar:hover { filter: brightness(1.4); }
.sl-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  margin: -3px 0 0 -3px; pointer-events: none; border: 1px solid var(--panel-2); z-index: 2;
}
.sl-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(148,163,184,.45); pointer-events: none; }
.sl-ref span {
  position: absolute; right: 5px; top: -13px; font-size: 9.5px; color: var(--fg-mute);
  background: var(--panel-2); padding: 0 4px; border-radius: 3px;
}
.sl-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(148,163,184,.09); pointer-events: none; }
.sl-grid span { position: absolute; left: 3px; top: -7px; font-size: 9px; color: var(--fg-mute); }

.sl-tip {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap;
  background: rgba(15,23,42,.96); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; line-height: 1.6; color: var(--fg-dim);
  opacity: 0; transition: opacity .12s;
  /* 【位置由 JS 按鼠标坐标设】
     原来这里是 bottom: calc(100% + 6px) —— 把提示框钉在容器顶上，
     鼠标在哪它都不动（用户说「不跟手、太上面了」）。 */
  top: 0; left: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.sl-tip.on { opacity: 1; }
.sl-tip b { color: var(--fg); }
.sl-tip span { display: block; }

.sl-x { position: relative; height: 13px; margin-top: 6px; }
.sl-x span { position: absolute; top: 0; font-size: 10px; color: var(--fg-mute); white-space: nowrap; }

.sl-leg { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--fg-mute); flex-wrap: wrap; }
.sl-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.sl-leg .sep { color: var(--line); }

.sl-avg { display: flex; gap: 12px; margin-top: 5px; font-size: 11.5px; color: var(--fg-dim); flex-wrap: wrap; }
.sl-avg span:first-child { color: var(--fg-mute); }

/* 今日状态：单日头部 + 填了/未填 徽章 */
.wn-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
}
.wn-hd { font-size: 13.5px; font-weight: 600; }
.wn-badge { font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.wn-badge.ok { background: rgba(34,211,238,.15); color: var(--accent); }
.wn-badge.no { background: rgba(148,163,184,.13); color: var(--fg-mute); }
.wn-hintline { font-size: 11px; color: var(--fg-mute); }

/* 日志页趋势卡：周期标题 */
.sl-head {
  padding: 11px 14px; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--line-soft); color: var(--fg-dim);
}

/* ---------------- 异常提示 ---------------- */
.alerts { margin-bottom: 14px; }
.al-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.al-t { font-size: 13.5px; font-weight: 600; }
.al-n { font-size: 11.5px; color: var(--fg-mute); }

.al-item {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 7px; cursor: pointer;
  transition: border-color .15s;
}
.al-item.high { border-left-color: #fb923c; }
.al-item.mid { border-left-color: #60a5fa; }
.al-item:hover { border-color: var(--accent); }

.al-row { display: flex; align-items: center; gap: 7px; }
.al-ico { font-size: 14px; flex: 0 0 auto; }
.al-title { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; }
.al-date { font-size: 11px; color: var(--fg-mute); flex: 0 0 auto; }
.al-detail { font-size: 12px; color: var(--fg-dim); margin-top: 5px; line-height: 1.6; }

/* 「为什么报」默认收起，点一下展开 —— 不展开时卡片只占两行，不吵 */
.al-why {
  display: none; font-size: 11.5px; color: var(--fg-mute);
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft);
  line-height: 1.7;
}
.al-item.open .al-why { display: block; }
.al-why b { color: var(--fg-dim); font-weight: 600; }

.al-foot {
  font-size: 11px; color: var(--fg-mute); line-height: 1.6;
  padding: 4px 2px 0;
}


/* 一键拉取全员（管理员才显示） */
#syncAllBox { display: flex; }
#syncAllBox .btn { flex: 1; }

/* 速度课快速填充 */
.qfill { background: var(--panel-2); border-radius: 9px; padding: 10px 11px; }
.qfrow { display: flex; gap: 6px; align-items: center; }
.qfrow input {
  flex: 1; min-width: 0; padding: 7px 8px; font-size: 12.5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  color: var(--fg); font-family: inherit;
}
.qfrow .btn { flex: 0 0 auto; white-space: nowrap; }
.qfrow .hint { font-size: 11px; }

/* 快速填充：每格带常驻小标签 */
.qfcell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qfcell > span { font-size: 10px; color: var(--fg-mute); white-space: nowrap; }
.qfcell > input {
  width: 100%; padding: 7px 8px; font-size: 12.5px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  color: var(--fg); font-family: inherit; font-variant-numeric: tabular-nums;
}


/* ---------------- 速度暴露 ---------------- */
.sp-period { font-size: 11px; color: var(--fg-mute); font-weight: 400; margin-left: 6px; }
.sp-empty { padding: 22px 16px; text-align: center; color: var(--fg-mute); font-size: 13px; line-height: 1.8; }
.sp-empty span { font-size: 11.5px; opacity: .8; }

.sp-rows { padding: 6px 0 2px; }
.sp-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 10px; align-items: center; padding: 9px 14px 7px;
}
.sp-row.off { opacity: .38; }
.sp-name b { font-size: 13px; font-weight: 600; }
.sp-name span { display: block; font-size: 10.5px; color: var(--fg-mute); margin-top: 1px; }
.sp-num, .sp-dist, .sp-fast {
  font-size: 13px; font-variant-numeric: tabular-nums; text-align: right;
  min-width: 52px;
}
.sp-num { font-weight: 600; }
.sp-dist { color: var(--fg-dim); }
.sp-fast { color: var(--accent); }
.sp-row small { font-size: 9.5px; color: var(--fg-mute); font-weight: 400; }

.sp-bar { position: relative; height: 14px; margin: 0 14px 8px; }
.sp-bar i {
  position: absolute; left: 0; top: 3px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(34,211,238,.5), var(--accent));
}
.sp-bar span {
  position: absolute; left: 0; top: -1px; font-size: 10px; color: var(--fg-mute);
  padding-left: 0; opacity: 0;
}
.sp-row + .sp-bar + .sp-row { border-top: 1px solid var(--line-soft); }
.sp-bar { border-bottom: 1px solid var(--line-soft); }

.sp-fast800 {
  padding: 10px 14px; font-size: 12.5px; color: var(--fg-dim);
  border-top: 1px solid var(--line-soft); background: var(--panel-2);
}
.sp-fast800 b { color: var(--fg); font-variant-numeric: tabular-nums; }

.sp-gap { padding: 11px 14px; font-size: 12.5px; }
.sp-gap b { font-variant-numeric: tabular-nums; }
.sp-gap .warn { color: #fb923c; font-weight: 600; }
.sp-gap .note { color: var(--fg-mute); }

.sp-mss {
  padding: 9px 14px; font-size: 11.5px; color: var(--fg-mute);
  border-top: 1px solid var(--line-soft);
}
.sp-mss b { color: var(--fg-dim); }
.sp-mss a { color: var(--accent); }

.sp-foot {
  padding: 10px 14px 12px; font-size: 11px; color: var(--fg-mute);
  line-height: 1.7; border-top: 1px solid var(--line-soft);
}
.sp-foot b { color: var(--fg-dim); }


/* RIR 选择（还能再做几次） */
.rirrow { display: flex; gap: 5px; }
.rirbtn {
  flex: 1; padding: 8px 2px; font-size: 12.5px; font-family: inherit;
  background: var(--panel-2); color: var(--fg-mute); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; transition: .15s;
  -webkit-tap-highlight-color: transparent;
}
.rirbtn.on { background: rgba(34,211,238,.15); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.rirbtn[data-r="0"].on { background: rgba(251,146,60,.18); border-color: #fb923c; color: #fb923c; }
.rirbtn[data-r="1"].on { background: rgba(250,204,21,.15); border-color: #facc15; color: #facc15; }

/* 动作库：部位多选 */
.pgrid { display: flex; flex-wrap: wrap; gap: 5px; }
.pbtn {
  padding: 7px 11px; font-size: 12.5px; font-family: inherit;
  background: var(--panel-2); color: var(--fg-mute); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; transition: .15s;
  -webkit-tap-highlight-color: transparent;
}
.pbtn.on { background: rgba(34,211,238,.15); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* 热力图部位卡片上的「练到什么程度」 */
.hm-rir {
  margin-left: auto; font-size: 10.5px; padding: 2px 7px;
  border-radius: 20px; font-weight: 600; flex: 0 0 auto;
}
.hm-rir.easy { background: rgba(148,163,184,.15); color: var(--fg-mute); }
.hm-rir.mid  { background: rgba(34,211,238,.15); color: var(--accent); }
.hm-rir.hard { background: rgba(250,204,21,.15); color: #facc15; }
.hm-rir.fail { background: rgba(251,146,60,.18); color: #fb923c; }
.hm-hd { display: flex; align-items: center; gap: 6px; }


/* 酸痛三档 */
.wn-sorepick { display: flex; gap: 4px; }
.wn-sorepick button {
  flex: 1; padding: 6px 4px; font-size: 11.5px; font-family: inherit;
  background: var(--panel-2); color: var(--fg-mute); cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; transition: .15s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.wn-sorepick button.on { background: rgba(34,211,238,.15); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* 「微酸」和「很酸」给点颜色，一眼看出哪块不舒服 */
.wn-sorepick button.on[data-v="2"] { background: rgba(250,204,21,.15); border-color: #facc15; color: #facc15; }
.wn-sorepick button.on[data-v="3"] { background: rgba(251,146,60,.18); border-color: #fb923c; color: #fb923c; }


/* 速度暴露：和上期的差值 */
.sp-diff { font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.sp-diff .up { color: var(--accent); }
.sp-diff .down { color: var(--fg-mute); }
.sp-diff .same { color: var(--line); }
.sp-prev { padding: 6px 14px 0; font-size: 10.5px; color: var(--fg-mute); }
.sp-row { grid-template-columns: 1fr auto auto auto; }


/* ================================================================ 训练课型选择器 */
.tp-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tp-cat {
  padding: 6px 11px; font-size: 13px; cursor: pointer;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line-soft); border-radius: 999px;
}
.tp-cat:hover { border-color: var(--accent); }
.tp-cat.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.tp-list { display: grid; gap: 6px; margin-bottom: 12px; }
.tp-item {
  text-align: left; padding: 9px 12px; cursor: pointer;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line-soft); border-radius: 9px;
}
.tp-item:hover { border-color: var(--accent); }
.tp-item.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tp-n { font-size: 14px; font-weight: 600; }
.tp-d { font-size: 12.5px; opacity: .72; margin-top: 3px; line-height: 1.5; }
.tp-hint { font-size: 13px; opacity: .6; padding: 14px 0; }
.tp-info {
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 11px 13px; background: var(--panel-2);
}
.tp-row { display: flex; gap: 9px; font-size: 13px; line-height: 1.65; margin-bottom: 5px; }
.tp-row b { flex: 0 0 62px; opacity: .6; font-weight: 500; }
.tp-row span { flex: 1; }
.tp-warn span { color: var(--warn, #d9822b); }
.tp-tip { font-size: 12px; opacity: .55; margin-top: 8px; }

/* ================================================================ 训练课型那一行 */
.stype {
  margin: 16px 18px 0; padding: 11px 13px;
  border: 1px dashed var(--line-soft); border-radius: 10px;
}
.stype-on { border-style: solid; border-color: var(--accent); }
.stype-hd { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.stype-hd b { flex: 0 0 auto; font-weight: 600; }
.stype-hd span { flex: 1; }
.stype-hd span.dim, .stype-note.dim { opacity: .6; }
.stype-hd button {
  flex: 0 0 auto; padding: 4px 12px; font-size: 12.5px; cursor: pointer;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line-soft); border-radius: 7px;
}
.stype-hd button:hover { border-color: var(--accent); }
.stype-note { font-size: 12.5px; opacity: .75; margin-top: 6px; line-height: 1.6; }
.stype-ex { font-size: 12.5px; opacity: .6; margin-top: 4px; line-height: 1.6; }

/* 训练列表里的课型标签 —— 一眼看出这堂是什么课，不用点开。
   颜色跟一级分类走，和统计块/选择器一致：
   看到橙色就知道是阈值课，不用读字。 */
.stype-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 3px 10px 3px 8px;
  font-size: 11.5px; line-height: 1.6;
  background: var(--panel-2); color: var(--fg-dim);
  border: 1px solid var(--line-soft); border-radius: 999px;
}
.stype-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}
.stype-tag[data-ci="0"]::before  { background: #4aa3df; }
.stype-tag[data-ci="1"]::before  { background: #e08a3c; }
.stype-tag[data-ci="2"]::before  { background: #d95f5f; }
.stype-tag[data-ci="3"]::before  { background: #b06fd0; }
.stype-tag[data-ci="4"]::before  { background: #3fb98a; }
.stype-tag[data-ci="5"]::before  { background: #c9a227; }
.stype-tag[data-ci="6"]::before  { background: #7a8cd6; }
.stype-tag[data-ci="7"]::before  { background: #55a8a0; }
.stype-tag[data-ci="8"]::before  { background: #cf7a9b; }
.stype-tag[data-ci="9"]::before  { background: #6aa84f; }
.stype-tag[data-ci="10"]::before { background: #a0785a; }
.stype-tag[data-ci="11"]::before { background: #5b7fa6; }
/* 文字也沾一点那个色，但别太深 */
.stype-tag[data-ci="0"]  { color: #7fc0e8; }
.stype-tag[data-ci="1"]  { color: #eaa96b; }
.stype-tag[data-ci="2"]  { color: #e88a8a; }
.stype-tag[data-ci="3"]  { color: #c795e0; }
.stype-tag[data-ci="4"]  { color: #6fcfab; }
.stype-tag[data-ci="5"]  { color: #d9ba55; }
.stype-tag[data-ci="6"]  { color: #9fadde; }
.stype-tag[data-ci="7"]  { color: #7fc0ba; }
.stype-tag[data-ci="8"]  { color: #dfa0b8; }
.stype-tag[data-ci="9"]  { color: #93c47d; }
.stype-tag[data-ci="10"] { color: #bf9b82; }
.stype-tag[data-ci="11"] { color: #8aa8c4; }
.stype-tag[data-ci="0"]  { border-color: rgba(74,163,223,.35); }
.stype-tag[data-ci="1"]  { border-color: rgba(224,138,60,.35); }
.stype-tag[data-ci="2"]  { border-color: rgba(217,95,95,.35); }
.stype-tag[data-ci="3"]  { border-color: rgba(176,111,208,.35); }
.stype-tag[data-ci="4"]  { border-color: rgba(63,185,138,.35); }
.stype-tag[data-ci="5"]  { border-color: rgba(201,162,39,.35); }
.stype-tag[data-ci="6"]  { border-color: rgba(122,140,214,.35); }
.stype-tag[data-ci="7"]  { border-color: rgba(85,168,160,.35); }
.stype-tag[data-ci="8"]  { border-color: rgba(207,122,155,.35); }
.stype-tag[data-ci="9"]  { border-color: rgba(106,168,79,.35); }
.stype-tag[data-ci="10"] { border-color: rgba(160,120,90,.35); }
.stype-tag[data-ci="11"] { border-color: rgba(91,127,166,.35); }

/* ================================================================ 按课型统计 */
.st-sum {
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  padding: 12px 15px; font-size: 13px;
}
.st-sum b { font-size: 17px; font-weight: 700; margin-right: 2px; }
.st-sum .dim { opacity: .55; }

.st-cat { border-bottom: 1px solid var(--line-soft); }
.st-cat:last-child { border-bottom: 0; }
.st-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px; cursor: pointer; transition: .12s;
}
.st-row:hover { background: var(--panel-2); }
.st-n { flex: 0 0 38%; font-size: 13.5px; }
.st-l1 .st-n { font-weight: 600; }
.st-l2 { padding-left: 28px; }
.st-l2 .st-n { font-size: 12.5px; opacity: .82; }
/* 二级课型默认收起，点一级展开 —— 105 个全铺开会太长 */
.st-l2 { display: none; }
.st-cat.open .st-l2 { display: flex; }

.st-bar { flex: 1; height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; min-width: 40px; }
.st-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.st-l2 .st-bar i { opacity: .55; }
.st-v { flex: 0 0 auto; font-size: 12.5px; opacity: .8; }
.st-v b { font-weight: 700; }
.st-p { flex: 0 0 46px; text-align: right; font-size: 12px; opacity: .6; }

/* ================================================================
   课型明细弹层 —— 一行一张小卡片
   ================================================================
   原来是「日期 运动名 距离」三块平铺 + 一条淡分隔线，
   扫起来分不清行。现在：
     · 左边一条分类色竖条，颜色和课型标签一致
     · 日期加粗、运动名在下面
     · 距离用大字号靠右，下面一行小字放时长/配速/心率
     · 悬停整行浮起
   ================================================================ */
.wt-list { padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 8px; }

.wt-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 20px;
  background: var(--panel-2);
  border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; transition: .13s; overflow: hidden;
}
.wt-row:hover { border-color: var(--accent); transform: translateY(-1px); }

/* 左边那条分类色竖条 */
.wt-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: 0 2px 2px 0;
}
.wt-l { flex: 1; min-width: 0; }
.wt-d { font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.wt-s { font-size: 12.5px; opacity: .6; margin-top: 3px; }
.wt-s .tag { margin-left: 6px; }

.wt-r { flex: 0 0 auto; text-align: right; }
.wt-km { font-size: 17px; font-weight: 700; line-height: 1.2; }
.wt-km small { font-size: 11px; font-weight: 400; opacity: .55; margin-left: 2px; }
.wt-sub { font-size: 11.5px; opacity: .55; margin-top: 3px; }

/* 分类配色：竖条和悬停边框都跟着走 */
.wt-row[data-ci="0"]  .wt-bar { background: #4aa3df; } .wt-row[data-ci="0"]:hover  { border-color: #4aa3df; }
.wt-row[data-ci="1"]  .wt-bar { background: #e08a3c; } .wt-row[data-ci="1"]:hover  { border-color: #e08a3c; }
.wt-row[data-ci="2"]  .wt-bar { background: #d95f5f; } .wt-row[data-ci="2"]:hover  { border-color: #d95f5f; }
.wt-row[data-ci="3"]  .wt-bar { background: #b06fd0; } .wt-row[data-ci="3"]:hover  { border-color: #b06fd0; }
.wt-row[data-ci="4"]  .wt-bar { background: #3fb98a; } .wt-row[data-ci="4"]:hover  { border-color: #3fb98a; }
.wt-row[data-ci="5"]  .wt-bar { background: #c9a227; } .wt-row[data-ci="5"]:hover  { border-color: #c9a227; }
.wt-row[data-ci="6"]  .wt-bar { background: #7a8cd6; } .wt-row[data-ci="6"]:hover  { border-color: #7a8cd6; }
.wt-row[data-ci="7"]  .wt-bar { background: #55a8a0; } .wt-row[data-ci="7"]:hover  { border-color: #55a8a0; }
.wt-row[data-ci="8"]  .wt-bar { background: #cf7a9b; } .wt-row[data-ci="8"]:hover  { border-color: #cf7a9b; }
.wt-row[data-ci="9"]  .wt-bar { background: #6aa84f; } .wt-row[data-ci="9"]:hover  { border-color: #6aa84f; }
.wt-row[data-ci="10"] .wt-bar { background: #a0785a; } .wt-row[data-ci="10"]:hover { border-color: #a0785a; }
.wt-row[data-ci="11"] .wt-bar { background: #5b7fa6; } .wt-row[data-ci="11"]:hover { border-color: #5b7fa6; }

/* 「按课型」标题右边的小按钮 */
.sec-act {
  margin-left: auto; padding: 4px 11px; font-size: 12.5px; cursor: pointer;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line-soft); border-radius: 7px;
}
.sec-act:hover { border-color: var(--accent); }
.sec { display: flex; align-items: center; gap: 8px; }

/* ================================================================ 按课型 · 布局打磨 */

/* 搜索框 */
.st-search { padding: 0 0 8px; }
.st-search input {
  width: 100%; padding: 8px 12px; font-size: 13.5px;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line-soft); border-radius: 8px;
}
.st-search input:focus { outline: none; border-color: var(--accent); }
.st-search input::placeholder { color: var(--fg-mute); }

/* 一级分类的小色点 —— 12 个分类一眼分辨 */
.st-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-right: 2px;
}
/* 每个一级分类一个色相（按出现顺序） */
.st-cat[data-ci="0"]  .st-dot, .st-cat[data-ci="0"]  .st-bar i { background: #4aa3df; }
.st-cat[data-ci="1"]  .st-dot, .st-cat[data-ci="1"]  .st-bar i { background: #e08a3c; }
.st-cat[data-ci="2"]  .st-dot, .st-cat[data-ci="2"]  .st-bar i { background: #d95f5f; }
.st-cat[data-ci="3"]  .st-dot, .st-cat[data-ci="3"]  .st-bar i { background: #b06fd0; }
.st-cat[data-ci="4"]  .st-dot, .st-cat[data-ci="4"]  .st-bar i { background: #3fb98a; }
.st-cat[data-ci="5"]  .st-dot, .st-cat[data-ci="5"]  .st-bar i { background: #c9a227; }
.st-cat[data-ci="6"]  .st-dot, .st-cat[data-ci="6"]  .st-bar i { background: #7a8cd6; }
.st-cat[data-ci="7"]  .st-dot, .st-cat[data-ci="7"]  .st-bar i { background: #55a8a0; }
.st-cat[data-ci="8"]  .st-dot, .st-cat[data-ci="8"]  .st-bar i { background: #cf7a9b; }
.st-cat[data-ci="9"]  .st-dot, .st-cat[data-ci="9"]  .st-bar i { background: #6aa84f; }
.st-cat[data-ci="10"] .st-dot, .st-cat[data-ci="10"] .st-bar i { background: #a0785a; }
.st-cat[data-ci="11"] .st-dot, .st-cat[data-ci="11"] .st-bar i { background: #5b7fa6; }

/* 展开的二级行：缩进更明显，条形图淡一点 */
.st-l2 { padding-left: 34px; }
.st-l2 .st-bar i { opacity: .5; }
/* 一级行展开时给它一个底色，知道现在在哪一组 */
.st-cat.open > .st-l1 { background: var(--panel-2); }

/* ================================================================ 课型选择器 · 左右两栏 */
.tp-wrap { display: flex; gap: 0; min-height: 300px; }

/* 左栏：一级分类竖排 */
.tp-cats {
  flex: 0 0 190px; display: flex; flex-direction: column;
  border-right: 1px solid var(--line-soft); padding-right: 10px;
}
.tp-cat {
  display: flex; align-items: center; gap: 8px;
  text-align: left; padding: 9px 10px; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--fg-dim);
  border: 0; border-radius: 8px; transition: .12s;
}
.tp-cat:hover { background: var(--panel-2); color: var(--fg); }
.tp-cat.on { background: var(--panel-2); color: var(--fg); font-weight: 600; }
.tp-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .5; }
.tp-cat.on .tp-dot { opacity: 1; }
.tp-cn { flex: 1; line-height: 1.4; }
.tp-cc { flex: 0 0 auto; font-size: 11px; opacity: .45; }

/* 一级分类配色（和统计块一套） */
.tp-cat[data-ci="0"]  .tp-dot { background: #4aa3df; }
.tp-cat[data-ci="1"]  .tp-dot { background: #e08a3c; }
.tp-cat[data-ci="2"]  .tp-dot { background: #d95f5f; }
.tp-cat[data-ci="3"]  .tp-dot { background: #b06fd0; }
.tp-cat[data-ci="4"]  .tp-dot { background: #3fb98a; }
.tp-cat[data-ci="5"]  .tp-dot { background: #c9a227; }
.tp-cat[data-ci="6"]  .tp-dot { background: #7a8cd6; }
.tp-cat[data-ci="7"]  .tp-dot { background: #55a8a0; }
.tp-cat[data-ci="8"]  .tp-dot { background: #cf7a9b; }
.tp-cat[data-ci="9"]  .tp-dot { background: #6aa84f; }
.tp-cat[data-ci="10"] .tp-dot { background: #a0785a; }
.tp-cat[data-ci="11"] .tp-dot { background: #5b7fa6; }

/* 右栏：二级课型 */
.tp-right { flex: 1; min-width: 0; padding-left: 12px; display: flex; flex-direction: column; }
.tp-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 46vh; }
.tp-item {
  position: relative; text-align: left; padding: 9px 12px 9px 30px; cursor: pointer;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid transparent; border-radius: 8px; transition: .12s;
}
.tp-item:hover { border-color: var(--line); }
.tp-item.on { border-color: var(--accent); }
.tp-ck {
  position: absolute; left: 10px; top: 9px;
  color: var(--accent); font-size: 13px; font-weight: 700;
}
.tp-n { display: block; font-size: 13.5px; font-weight: 600; }
.tp-d { display: block; font-size: 12px; opacity: .62; margin-top: 3px; line-height: 1.5; }

/* 选中的课型详情 */
.tp-info {
  margin-top: 10px; padding: 11px 13px;
  border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-2);
}
.tp-row { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.65; margin-bottom: 5px; }
.tp-row b { flex: 0 0 62px; opacity: .6; font-weight: 500; }
.tp-row span { flex: 1; }
.tp-warn span { color: var(--warn, #d9822b); }
.tp-tip { font-size: 11.5px; opacity: .5; margin-top: 7px; }
.tp-hint { font-size: 13px; opacity: .55; padding: 30px 0; text-align: center; }

/* 手机：上下排 */
@media (max-width: 560px) {
  .tp-wrap { flex-direction: column; min-height: 0; }
  .tp-cats {
    flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line-soft);
    padding: 0 0 9px; margin-bottom: 10px; gap: 6px;
  }
  .tp-cat { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; padding: 6px 10px; }
  .tp-cc { display: none; }
  .tp-right { padding-left: 0; }
  .tp-list { max-height: none; }
}

/* 负荷趋势的类型列 —— 用课型时跟分类配色走 */
.lddg-t { color: #0b1220; font-weight: 600; }
.lddg-t[data-ci="0"]  { background: #4aa3df; }
.lddg-t[data-ci="1"]  { background: #e08a3c; }
.lddg-t[data-ci="2"]  { background: #d95f5f; }
.lddg-t[data-ci="3"]  { background: #b06fd0; }
.lddg-t[data-ci="4"]  { background: #3fb98a; }
.lddg-t[data-ci="5"]  { background: #c9a227; }
.lddg-t[data-ci="6"]  { background: #7a8cd6; }
.lddg-t[data-ci="7"]  { background: #55a8a0; }
.lddg-t[data-ci="8"]  { background: #cf7a9b; }
.lddg-t[data-ci="9"]  { background: #6aa84f; }
.lddg-t[data-ci="10"] { background: #a0785a; }
.lddg-t[data-ci="11"] { background: #5b7fa6; }

/* ================================================================ 训练日历 */
.cal-card { padding: 12px 14px 14px; }
.cal-wk {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 6px;
}
.cal-wk span {
  text-align: center; font-size: 11.5px; opacity: .5; padding: 2px 0;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-d {
  position: relative; aspect-ratio: 1 / 1; min-height: 38px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-radius: 8px; cursor: default;
  border: 1px solid transparent; transition: .12s;
}
.cal-d.out { opacity: .22; }
.cal-d.has { background: var(--panel-2); cursor: pointer; }
.cal-d.has:hover { border-color: var(--accent); }
.cal-d.today { border-color: var(--fg-mute); }
.cal-n { font-size: 12px; opacity: .8; line-height: 1; }
.cal-d.has .cal-n { opacity: 1; font-weight: 600; }
.cal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); display: block;
}
.cal-dot.cal-none { background: transparent; border: 1.5px solid var(--fg-mute); }
.cal-c { font-size: 9.5px; opacity: .45; line-height: 1; }

/* 分类配色（和日志页标签、统计块、负荷趋势一致） */
.cal-dot[data-ci="0"]  { background: #4aa3df; }
.cal-dot[data-ci="1"]  { background: #e08a3c; }
.cal-dot[data-ci="2"]  { background: #d95f5f; }
.cal-dot[data-ci="3"]  { background: #b06fd0; }
.cal-dot[data-ci="4"]  { background: #3fb98a; }
.cal-dot[data-ci="5"]  { background: #c9a227; }
.cal-dot[data-ci="6"]  { background: #7a8cd6; }
.cal-dot[data-ci="7"]  { background: #55a8a0; }
.cal-dot[data-ci="8"]  { background: #cf7a9b; }
.cal-dot[data-ci="9"]  { background: #6aa84f; }
.cal-dot[data-ci="10"] { background: #a0785a; }
.cal-dot[data-ci="11"] { background: #5b7fa6; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft);
}
.cal-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; opacity: .75;
}

/* ================================================================ 日志页标签 */
.ltabs {
  display: flex; gap: 4px; margin: 12px 0 4px;
  border-bottom: 1px solid var(--line-soft);
}
.ltabs button {
  flex: 1; min-width: 0; padding: 9px 6px; font-size: 13.5px; cursor: pointer;
  background: transparent; color: var(--fg-dim);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: .12s;
}
.ltabs button:hover { color: var(--fg); }
.ltabs button.on { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.lpane { padding-top: 4px; }

/* 头部「⋯」菜单 */
.head-more { position: relative; flex: 0 0 auto; }
.more-btn {
  width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1;
  background: var(--panel-2); color: var(--fg-dim);
  border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer;
}
.more-btn:hover { color: var(--fg); border-color: var(--accent); }
.more-menu {
  position: absolute; right: 0; top: 38px; z-index: 50;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; min-width: 132px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.more-menu .ldentry { width: 100%; text-align: left; }

/* ================================================================ 年视图紧凑日历 */
.cal-y { padding: 10px 12px 12px; overflow-x: auto; }
.cal-yhead {
  display: flex; align-items: center; gap: 0;
  font-size: 9.5px; opacity: .4; margin-bottom: 4px;
}
.cal-yhead > span:first-child { flex: 0 0 34px; }
.cal-yhead .cal-yd {
  flex: 0 0 auto; width: 5.8%; text-align: left;
}
.cal-yrow { display: flex; align-items: center; margin-bottom: 3px; }
.cal-ym {
  flex: 0 0 34px; font-size: 10.5px; opacity: .55;
}
.cal-ycells { display: flex; flex: 1; gap: 2px; }
.cal-yc {
  flex: 1 1 0; min-width: 4px; height: 11px; border-radius: 2px;
  background: var(--panel-2); display: block;
}
.cal-yc.has { cursor: pointer; }
.cal-yc.has:hover { outline: 1.5px solid var(--fg-mute); }
.cal-yc.none { background: transparent; border: 1px solid var(--fg-mute); }
/* 分类配色 */
.cal-yc[data-ci="0"]  { background: #4aa3df; }
.cal-yc[data-ci="1"]  { background: #e08a3c; }
.cal-yc[data-ci="2"]  { background: #d95f5f; }
.cal-yc[data-ci="3"]  { background: #b06fd0; }
.cal-yc[data-ci="4"]  { background: #3fb98a; }
.cal-yc[data-ci="5"]  { background: #c9a227; }
.cal-yc[data-ci="6"]  { background: #7a8cd6; }
.cal-yc[data-ci="7"]  { background: #55a8a0; }
.cal-yc[data-ci="8"]  { background: #cf7a9b; }
.cal-yc[data-ci="9"]  { background: #6aa84f; }
.cal-yc[data-ci="10"] { background: #a0785a; }
.cal-yc[data-ci="11"] { background: #5b7fa6; }

/* 速度暴露里那句小字说明 */
.sp-legend { font-size: 11px; opacity: .5; }

/* 速度暴露和下面拉开 —— 原来贴太近了，两块内容容易看成一块 */
#speedBox { margin-bottom: 22px; }
#statBox { margin-bottom: 18px; }
.speed-card, .sp-card { margin-bottom: 6px; }

/* ================================================================ 最快一段
   放速度暴露卡片最上面。左边说明是什么，右边配速大字，点一下跳那堂课 */
.sp-top {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft); border-left: 3px solid #4aa3df;
  border-radius: 9px; cursor: pointer; transition: .13s;
}
.sp-top:hover { border-color: #4aa3df; transform: translateY(-1px); }
.sp-top-l { flex: 1; min-width: 0; }
.sp-top-t { font-size: 13.5px; font-weight: 600; }
.sp-top-s { font-size: 11.5px; opacity: .55; margin-top: 3px; }
.sp-top-r { flex: 0 0 auto; text-align: right; }
.sp-top-v { font-size: 18px; font-weight: 700; line-height: 1.2; color: #7fc0e8; }
.sp-top-v small { font-size: 11px; font-weight: 400; opacity: .55; margin-left: 2px; }
.sp-top-m { font-size: 11px; opacity: .5; margin-top: 3px; }
.sp-top-a { flex: 0 0 auto; font-size: 18px; opacity: .3; }

/* ================================================================
   速度暴露 · 可读性调整
   ================================================================
   用户反馈：字号小、颜色和背景太像、说明太多看着杂。
   这里是【覆盖规则】—— 不动上面的原始定义，要回退删掉这段即可。
   ================================================================ */

/* ---- 三行：字号加大、层级拉开 ---- */
.sp-row { padding: 13px 0; }
.sp-name b { font-size: 15px; font-weight: 600; color: var(--fg); }
.sp-name span { font-size: 12.5px; opacity: .6; margin-top: 3px; }

/* 次数和米数：原来用暗色，现在用主文字色 + 加大 */
.sp-num {
  font-size: 20px; font-weight: 700; color: var(--fg);
  letter-spacing: -.2px;
}
.sp-num small { font-size: 11.5px; font-weight: 400; opacity: .55; margin-left: 2px; }
.sp-dist {
  font-size: 17px; font-weight: 600; color: var(--fg);
  opacity: .92;
}
.sp-dist small { font-size: 11px; font-weight: 400; opacity: .5; margin-left: 2px; }

/* 和上期的差值：加大一点，颜色也更明确 */
.sp-diff { font-size: 14px; font-weight: 600; }
.sp-diff .up { color: #3fb98a; }
.sp-diff .down { color: #e08a3c; }
.sp-diff .same { color: var(--fg-dim); }

/* 没练的那条压暗，但别看不见 */
.sp-row.off .sp-name b { opacity: .35; }
.sp-row.off .sp-num, .sp-row.off .sp-dist { opacity: .3; }

/* ---- 其他行也顺带放大 ---- */
.sp-gap { font-size: 14px; padding: 11px 0; }
.sp-mss { font-size: 13px; }
.sp-prev { font-size: 12.5px; opacity: .7; }

/* ---- 底部那段长说明：收起来 ---- */
.sp-foot {
  font-size: 12px; line-height: 1.75; opacity: .55;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px; margin-top: 10px;
}
/* 折叠时只留一行，展开才全显示 */
.sp-foot-fold {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-foot-more {
  display: inline-block; margin-top: 6px; font-size: 12px;
  color: var(--accent); cursor: pointer; opacity: .9;
}
.sp-foot-more:hover { text-decoration: underline; }

/* ================================================================ 负荷趋势图的标注 */


/* 横轴标满时字要小一号，不然挤 */
.ldxaxis.ldx-full span { font-size: 10px; opacity: .6; }

/* ================================================================ 图表标注 · 修正版 */

/* 柱顶数值（按柱高定位，现在位置才对）。
   .ldstk 是 bottom:0 + height:100%，所以这里的 bottom:X% 就是柱子顶部。 */
.ldstk-v {
  position: absolute; left: 50%; transform: translateX(-50%);
  margin-bottom: 4px;                       /* 和柱顶留一点缝 */
  font-size: 11px; font-weight: 600;
  color: var(--fg); opacity: .9; white-space: nowrap;
  pointer-events: none;
}

/* 折线图点上的数值 */
.ldpt-v {
  position: absolute; transform: translate(-50%, -160%);
  font-size: 10.5px; font-weight: 600;
  color: var(--fg); opacity: .8; white-space: nowrap;
  pointer-events: none;
}

/* ================================================================
   速度暴露这一块的排版
   ================================================================
   用户反馈：内容贴着边、和下面的图快卡到一起了。
   ================================================================ */

/* 卡片内部留白（原来贴边） */
#speedBox .sl-head,
#speedBox .sp-rows,
#speedBox .sp-prev,
#speedBox .sp-gap,
#speedBox .sp-mss,
#speedBox .sp-foot { padding-left: 16px; padding-right: 16px; }
#speedBox .sp-top { margin-left: 16px; margin-right: 16px; }

/* 最上面那条「最快一段」和卡片顶留点空 */
#speedBox .sp-top { margin-top: 14px; }
#speedBox .sl-head { padding-top: 14px; padding-bottom: 10px; }

/* 和下面的图拉开 —— 三张图紧跟着速度暴露，原来几乎贴住 */
#speedBox { margin-bottom: 30px; }
#speedBox + .sec, #speedBox + div { margin-top: 8px; }
/* 概览里速度暴露后面那三张图的容器 */
#stats .ldcbox:first-child, #stats .ldchart:first-child { margin-top: 6px; }

/* ================================================================ 负荷明细表 */

/* 表头里的小单位 */
.lddh small { font-size: 9px; opacity: .45; margin-left: 2px; font-weight: 400; }

/* 课型标签：限宽 + 省略号（课型名最长 12 个字，会撑歪整行） */
.lddg {
  max-width: 124px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block;
  vertical-align: middle;
}

/* 没标课型时显示的是旧的「有氧/速度/混合」—— 虚线边框区分开，
   让人一眼知道那不是课型 */
.lddg-old { border: 1px dashed rgba(255,255,255,.35); }

/* 总负荷的算法说明 */
.ldznote {
  margin-top: 12px; padding: 10px 13px;
  background: var(--panel-2); border-radius: 8px;
  font-size: 12px; line-height: 1.75; opacity: .75;
}
.ldznote b { color: var(--fg); font-weight: 600; }

/* ================================================================ 柱顶数值
   首尾的内边对齐【撤掉了】——
   真正的问题在柱子的横坐标（改成内缩半个柱宽就好了），
   柱子已经完整在容器里，标签统一居中即可，靠边反而显得歪。 */
.ldcbox.ldbars { padding-left: 2px; padding-right: 2px; }

/* ================================================================ 明细表列对齐
   「课型」这列原来没定宽，徽章文字一长就把后面的列全推走。
   给它和表头都定成同一个宽度，两边就对齐了。 */
.lddgh, .lddgc {
  flex: 0 0 128px; width: 128px;
  overflow: hidden;
}
.lddgc { display: flex; align-items: center; }
/* 徽章自己在容器里保持自适应宽度，超出就用省略号 */
.lddgc .lddg {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block;
}
/* 表头那列的字对齐左边，和徽章起始位置一致 */
.lddgh { display: flex; align-items: center; }

/* 顺带把数值列也统一一下，让表头「有氧分」和数据对得上 */
.lddh .lddz { font-size: 10.5px; }
.lddh .lddz small { margin-left: 2px; }

/* 内部负荷柱顶的数值。.sl-bar 是绝对定位的柱子，bottom:X% 就是柱顶。 */
.sl-bar-v {
  /* 【贴到柱子顶部之上】
     .sl-bar-v 的父元素是柱子（.sl-bar，绝对定位）——
     所以这里的百分比是相对【柱子高度】算的。
     bottom:100% = 柱子顶部；再往上 4px 是间隙。
     下面那行是给不支持 calc 的环境的兜底。 */
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 100% !important;
  margin-bottom: 4px;
  font-size: 11px; font-weight: 700;
  color: var(--fg); opacity: .95; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  pointer-events: none;
}

/* 横坐标标满时字小一号，不然挤 */
.sl-x.sl-x-full span { font-size: 10.5px; }

/* ================================================================ 每日状态的图例开关
   点一下只看那条线，再点恢复。被点掉的压暗 + 划掉。 */
.sl-lg {
  cursor: pointer; padding: 2px 7px; border-radius: 999px;
  border: 1px solid transparent; transition: .12s; user-select: none;
}
.sl-lg:hover { border-color: var(--line); background: var(--panel-2); }
.sl-lg.off { opacity: .35; text-decoration: line-through; }
.sl-lg-hint { font-size: 10.5px; opacity: .35; margin-left: 4px; }

/* 悬停某条图例时，其他图例也淡掉 —— 和线一致 */
.sl-lg.dim { opacity: .3; }
/* 线和点的淡出要有过渡，不然闪 */
#statBox .sl-dot, #statBox svg path { transition: opacity .12s; }

/* ================================================================ 图表交互光标
   鼠标移到图表上时给个提示：这里能交互（悬停看数值）。
   crosshair 比 pointer 合适 —— pointer 一般表示「可以点开」，
   而这里主要是悬停查看，点只是顺带。 */
.sl-box { cursor: crosshair; }
.sl-box .sl-dot, .sl-box .sl-bar { cursor: crosshair; }
/* 图例是能点的，用 pointer */
.sl-lg { cursor: pointer; }

/* ================================================================ 同步范围选择（.pick）
   「同步高驰」那个弹窗用的 class 是 .pick，
   而通用的选择器样式写在 .picker 下（少个 er），所以一直没生效，
   看起来就是一行行纯文本。

   这个列表每项是【标题 + 说明】两行，和通用 picker 的
   「左边名字、右边值」不同，所以单独写一套竖排的。 */

.pick { padding: 2px 0 4px; }

.pick .opt {
  padding: 12px 18px 12px 15px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
  position: relative;
}
.pick .opt + .opt { border-top: 1px solid var(--line-soft); }

.pick .opt:hover {
  background: var(--panel-2);
  border-left-color: var(--accent);
}
.pick .opt:active { background: var(--panel-3); }

.pick .opt .n {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
}
.pick .opt .m {
  font-size: 11.5px;
  color: var(--fg-mute);
  line-height: 1.45;
  margin-top: 3px;
}

/* 最后一项「全部历史」是推荐项，标一下 */
.pick .opt:last-child .n {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pick .opt:last-child .n::after {
  content: '推荐';
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #0b1220;
  background: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
}

/* 箭头提示（hover 时往右挪一点） */
.pick .opt::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid var(--fg-mute);
  border-bottom: 1.5px solid var(--fg-mute);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity .12s, transform .12s;
}
.pick .opt:hover::after {
  opacity: .7;
  transform: rotate(-45deg) translateX(2px);
}
/* 最后一项的「推荐」标签会和箭头抢位置，给它让开 */
.pick .opt:last-child::after { display: none; }

/* ================================================================ 肌肉酸痛（新版）
   整体 0~3 + 条件式 5 大区域多选。

   原来是 12 个部位 × 3 档 = 36 个按钮，每天点太累；
   现在选「无明显酸痛」时只有 4 个按钮，选了 1~3 才展开区域。 */

.wn-sorebody { flex: 1; min-width: 0; }

/* 整体酸痛 0~3 —— 和 1~5 量表长得一样，但按钮文字更长，允许换行 */
.wn-sorelevel {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wn-sorelevel button {
  min-width: 0; padding: 6px 11px; font-size: 12.5px;
}

/* 区域选择块 */
.wn-regionwrap { margin-top: 9px; }

.wn-regiontip {
  font-size: 11px;
  color: var(--fg-mute);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* 5 大区域：胶囊按钮，多选 */
.wn-regions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wn-regions button {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  cursor: pointer;
  transition: .12s;
  white-space: nowrap;
}
.wn-regions button:hover { border-color: rgba(34,211,238,.45); color: var(--fg); }
.wn-regions button.on {
  background: rgba(34,211,238,.16);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
/* 选中时左边加个勾 */
.wn-regions button.on::before {
  content: '✓ ';
  font-size: 11px;
}

/* ================================================================ 身体恢复趋势（酸痛）
   单独一块，和「负荷与状态」分开 —— 那三条是 1~5，酸痛是 0~3。 */

.soretrend {
  margin: 14px 16px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px;
}

.sr-head { display: flex; align-items: center; gap: 10px; }
.sr-title { font-size: 14px; font-weight: 700; color: var(--fg); flex: 1; }
.sr-sw { display: flex; gap: 4px; }
.sr-sw button {
  padding: 4px 10px; font-size: 11.5px; border-radius: 7px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--fg-dim); cursor: pointer; transition: .12s;
}
.sr-sw button:hover { border-color: rgba(34,211,238,.45); }
.sr-sw button.on {
  background: rgba(34,211,238,.16); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}

.sr-sub { font-size: 11px; color: var(--fg-mute); margin: 5px 0 4px; }
.sr-sub b { color: var(--fg-dim); font-weight: 600; }

.sr-sec { margin-top: 14px; margin-bottom: 12px; }
/* 折线图那块额外多留一点，装横轴日期 */
.sr-sec:first-of-type { padding-bottom: 20px; }
.sr-st {
  font-size: 12.5px; font-weight: 600; color: var(--fg-dim);
  margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px;
}
.sr-sth { font-size: 10.5px; color: var(--fg-mute); font-weight: 400; }

.sr-load, .sr-empty {
  font-size: 11.5px; color: var(--fg-mute);
  padding: 18px 0; text-align: center;
}

/* ---------- 折线图 ---------- */
.sr-plot { display: flex; gap: 6px; }
.sr-yaxis {
  position: relative; width: 14px; height: 140px; flex: 0 0 auto;
}
.sr-yaxis span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 10px; color: var(--fg-mute); line-height: 1;
}
.sr-area { position: relative; flex: 1; height: 140px; min-width: 0; }
.sr-area svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.sr-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  margin: -3.5px 0 0 -3.5px; z-index: 2; cursor: pointer;
  border: 1px solid var(--panel); transition: transform .1s;
}
.sr-dot:hover { transform: scale(1.6); }

/* 中断标记：一条淡色竖线，表示「这天没填」 */
.sr-gap {
  position: absolute; top: 8%; height: 84%; width: 1px;
  margin-left: -.5px;
  background: repeating-linear-gradient(to bottom,
    rgba(148,163,184,.32) 0 3px, transparent 3px 6px);
  pointer-events: none;
}

.sr-xlab { position: absolute; left: 0; right: 0; bottom: -16px; height: 16px; }
/* 折线图下面要给横轴日期留出空间，不然会压到下一块的标题 */
.sr-sec:has(.sr-plot) { padding-bottom: 22px; }
.sr-xlab span {
  position: absolute; transform: translateX(-50%);
  font-size: 9.5px; color: var(--fg-mute); white-space: nowrap;
}

/* 悬停提示 */
.sr-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -100%);
  background: rgba(15,23,42,.97); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 9px; font-size: 11px;
  color: var(--fg-dim); white-space: nowrap;
  opacity: 0; transition: opacity .1s; margin-top: -10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.sr-tip.on { opacity: 1; }
.sr-tip b { color: var(--fg); display: block; }
.sr-tip span { display: block; }

/* ---------- 部位频次条 ---------- */
.sr-bars { display: flex; flex-direction: column; gap: 6px; }
.sr-bar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.sr-bl { width: 76px; flex: 0 0 auto; color: var(--fg-dim); }
.sr-bt {
  flex: 1; height: 14px; background: var(--panel-2);
  border-radius: 4px; overflow: hidden; min-width: 0;
}
.sr-bt i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, rgba(34,211,238,.55), rgba(34,211,238,.9));
  transition: width .25s;
}
.sr-bv { width: 38px; flex: 0 0 auto; text-align: right; color: var(--fg); font-weight: 600; }

.sr-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--fg-mute);
}
.sr-foot b { color: var(--fg-dim); font-weight: 600; }

/* 手机上：横轴标签小一号，部位名短一点 */
@media (max-width: 480px) {
  .sr-bl { width: 66px; font-size: 11px; }
  .sr-xlab span { font-size: 9px; }
  .sr-sw button { padding: 4px 8px; font-size: 11px; }
}

/* ================================================================ 三条线的点形状
   疲劳/意愿/睡眠 都是 1~5，数值相同时点的位置完全重合。
   用形状区分：重合时能看出「这里有 3 个数据」而不是 1 个。

   圆形/方形/菱形都是纯 CSS，不用 SVG。 */

/* 疲劳：圆形（默认就是，不用改） */
#statBox .sl-sh-fatigue { border-radius: 50%; }

/* 意愿：方形 */
#statBox .sl-sh-mood { border-radius: 1px; }

/* 睡眠：菱形 */
#statBox .sl-sh-sleep {
  border-radius: 1px;
  transform: rotate(45deg);
}

/* 悬停时放大 —— 菱形要保留旋转 */
#statBox .sl-sh-sleep:hover { transform: rotate(45deg) scale(1.5); }

/* 点稍微大一点，形状才看得出来 */
#statBox .sl-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
/* 被图例点掉的线，点也跟着淡 */
#statBox .sl-dot { transition: opacity .12s; }

/* 图例里的形状，和图上三条线的点一致 */
.sl-lgi { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; }
.sl-lgi-c { border-radius: 50%; }
.sl-lgi-s { border-radius: 1px; }
.sl-lgi-d { border-radius: 1px; transform: rotate(45deg); }

/* ================================================================ 每日状态：重合的同心画法
   疲劳/意愿/睡眠 都是 1~5，数值相同时三个点位置完全重合。
   用【大小不同的同心层 + 外层空心】画，重合时像个靶子，一眼看出有几层。

   为什么不用形状（圆/方/菱）：
     三个点在同一位置，后画的会盖住先画的 —— 图上还是只看到最上面那个。

   为什么不做横向错开：
     错开会让点偏离真实数值位置，趋势图最忌讳这个。 */

/* 疲劳：最外层，空心橙环 */
#statBox .sl-dot.sl-sh-fatigue {
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: transparent !important;      /* 覆盖 HTML 里的内联 background */
  border: 1.8px solid #fb923c;
  border-radius: 50%;
  z-index: 2;
}

/* 意愿：中间层，空心青环 */
#statBox .sl-dot.sl-sh-mood {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: transparent !important;
  border: 1.6px solid #22d3ee;
  border-radius: 50%;
  z-index: 3;
}

/* 睡眠：最内层，实心蓝点（保留形状）
   之前给它做过 rotate(45deg) 的菱形 —— 同心画法下菱形会歪，
   改回小圆点更干净。 */
#statBox .sl-dot.sl-sh-sleep {
  width: 4.5px; height: 4.5px;
  margin: -2.25px 0 0 -2.25px;
  background: #60a5fa !important;
  border: none;
  border-radius: 50%;
  transform: none;
  z-index: 4;
}
#statBox .sl-dot.sl-sh-sleep:hover { transform: scale(1.6); }

/* 悬停时三层的放大节奏一致，别一个放大一个不动 */
#statBox .sl-dot.sl-sh-fatigue:hover { transform: scale(1.25); }
#statBox .sl-dot.sl-sh-mood:hover { transform: scale(1.35); }

/* 图例也用同样的语言：外层环 + 内层点 */
.sl-lgi-c {
  border-radius: 50%;
  background: transparent !important;
  border: 1.8px solid #fb923c;
  width: 9px; height: 9px;
}
.sl-lgi-s {
  border-radius: 50%;
  background: transparent !important;
  border: 1.6px solid #22d3ee;
  width: 6px; height: 6px;
}
.sl-lgi-d {
  border-radius: 50%;
  background: #60a5fa !important;
  width: 4px; height: 4px;
  transform: none;
}

/* ================================================================ 高驰自动指标卡片
   放在「每日状态」表单上面：先看客观数据，再填主观感受。 */

.hc {
  margin: 0 0 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
}
.hc-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--fg-dim); font-weight: 600;
  margin-bottom: 8px; gap: 8px;
}
.hc-h > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-t {
  font-size: 10.5px; color: var(--fg-mute); font-weight: 400;
  /* 不让它被挤掉 —— 原来「12:52 更新」的「新」字被切了 */
  flex: 0 0 auto; white-space: nowrap; margin-left: 8px;
}
.hc-empty { font-size: 11px; color: var(--fg-mute); padding: 6px 0 2px; }

.hc-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hc-c { min-width: 0; }
.hc-l { font-size: 10px; color: var(--fg-mute); margin-bottom: 2px; }
.hc-v {
  font-size: 16px; font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.hc-v em {
  display: block; font-style: normal;
  font-size: 9.5px; font-weight: 400; color: var(--fg-mute);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* HRV 低于基线 —— 唯一需要警示的 */
.hc-c.bad .hc-v { color: #fb923c; }
.hc-c.bad .hc-v em { color: #fb923c; }
.hc-c.good .hc-v { color: #4ade80; }

@media (max-width: 380px) {
  .hc-g { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .hc-v { font-size: 14px; }
}

/* 心率图上的常驻数值 —— 不用悬停也看得见 */
.sr-pv {
  position: absolute; transform: translate(-50%, -175%);
  font-size: 9px; font-style: normal; font-weight: 600;
  color: var(--fg-dim); white-space: nowrap;
  pointer-events: none; z-index: 3;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
/* 提示框现在按鼠标坐标定位，去掉原来那个 -100% 的位移 */
.sr-tip { transform: none; margin-top: 0; }

/* 多线图例 */
.sr-leg {
  display: flex; gap: 14px; margin-top: 20px;
  font-size: 10.5px; color: var(--fg-mute);
}
.sr-leg i {
  display: inline-block; width: 9px; height: 3px; border-radius: 2px;
  margin-right: 5px; vertical-align: 2px;
}
/* 多线图的统计行 */
.sr-fs {
  margin-top: 22px; font-size: 11px; color: var(--fg-mute);
}
.sr-fs b { color: var(--fg-dim); font-weight: 700; }

/* 差值判断 */
.sr-j.ok { color: #4ade80; font-weight: 600; }
.sr-j.warn { color: #fb923c; font-weight: 700; }
.sr-why { display: block; margin-top: 3px; font-size: 10.5px; color: var(--fg-mute); }

/* 提示框里的差值那行 */
.sr-tipd { color: #c084fc !important; font-weight: 600; }

/* 三档状态：绿 = 恢复好（橙 = 疲劳，ok = 正常用默认灰） */
.sr-j.good { color: #4ade80; font-weight: 700; }

/* ================================================================ 课型选择器：搜索 + 最近
   105 个课型分 12 类，每次翻分类太慢 —— 加个搜索框和最近用过的。 */

.tp-search { position: relative; margin-bottom: 10px; }
.tp-search input {
  width: 100%; box-sizing: border-box;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 32px 9px 11px;
  color: var(--fg); font-size: 13px; outline: none;
}
.tp-search input:focus { border-color: var(--accent); }
.tp-search input::-webkit-search-cancel-button { display: none; }
.tp-search button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--panel-3); color: var(--fg-mute);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.tp-search button:hover { color: var(--fg); }

.tp-recent {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tp-rl { font-size: 10.5px; color: var(--fg-mute); margin-right: 2px; }
.tp-rt {
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--fg-dim); border-radius: 7px;
  padding: 5px 9px; font-size: 11.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.tp-rt em { font-style: normal; font-size: 9.5px; color: var(--fg-mute); }
.tp-rt:hover { border-color: var(--accent); }
.tp-rt.on { border-color: var(--accent); color: var(--accent); }

/* 搜索结果里显示它属于哪个分类 */
.tp-cat2 {
  font-style: normal; font-size: 9.5px; color: var(--fg-mute);
  margin-left: 6px;
}

/* 窄屏时一级分类是横排可滑动的 —— 把滚动条藏起来，看着干净 */
.tp-cats { scrollbar-width: none; -ms-overflow-style: none; }
.tp-cats::-webkit-scrollbar { display: none; height: 0; }

/* 一天多个课型：几个小点横排，右上角标个数 */
.cal-dots { display: inline-flex; gap: 2px; align-items: center; }
.cal-dots .cal-dot { margin: 0; }
.cal-num {
  font-size: 8px; color: var(--fg-mute); line-height: 1;
  margin-left: 1px; vertical-align: super;
}

/* 一天多课时，超出两个的用 +N 兜住 */
.lddgc { display: inline-flex; gap: 3px; align-items: center; }
.lddge { font-size: 9.5px; color: var(--fg-mute); }

/* ================================================================ 训练结构
   详情弹层里，分圈原始表之前的一块：等距间歇 / 变速跑 / 匀速跑 */

.wiv {
  margin: 16px 18px 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 13px;
}
.wiv-h {
  font-size: 13px; color: var(--fg-dim); margin-bottom: 7px;
}
.wiv-h b { color: var(--fg); font-size: 15px; font-weight: 700; }
.wiv-m {
  font-size: 11.5px; color: var(--fg-mute); line-height: 1.7;
}
.wiv-m b { color: var(--fg-dim); font-weight: 700; }
.wiv-dim { color: var(--fg-mute); }
.wiv-fade { color: #fb923c; font-weight: 600; }

.wiv-t { margin-top: 9px; }
.wiv-t th { font-size: 10px; }
.wiv-t td { font-size: 12px; padding-top: 5px; padding-bottom: 5px; }
.wiv-r { color: var(--fg-mute); }

/* ================================================================ 距离校正
   详情页顶部提示条 + 校正对话框 */

.fx {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 18px 0; padding: 10px 12px;
  background: rgba(251,146,60,.10);
  border: 1px solid rgba(251,146,60,.32);
  border-radius: 10px;
  font-size: 11.5px; line-height: 1.6;
}
.fx-done {
  background: rgba(74,222,128,.08);
  border-color: rgba(74,222,128,.28);
}
.fx-i { flex: 0 0 auto; font-size: 13px; }
.fx-t { flex: 1; color: var(--fg-dim); min-width: 0; }
.fx-b {
  flex: 0 0 auto;
  border: 1px solid rgba(251,146,60,.6); background: transparent;
  color: #fb923c; border-radius: 7px; padding: 5px 11px;
  font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.fx-done .fx-b { border-color: rgba(74,222,128,.5); color: #4ade80; }
.fx-b:hover { background: rgba(251,146,60,.14); }

/* 校正对话框 */
.fxt table { width: 100%; }
.fxt th { font-size: 10px; white-space: nowrap; }
.fxt td { font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
.fxt select {
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--fg); border-radius: 7px; padding: 4px 7px;
  font-size: 12px; width: 100%; max-width: 96px;
}
.fxt select:focus { border-color: var(--accent); outline: none; }
.fxt tr.fxc td { color: #4ade80; }
.fxs {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--fg-dim); line-height: 1.8;
}
.fxs b { color: var(--fg); }
.fxn { margin-top: 6px; font-size: 10.5px; color: var(--fg-mute); }

/* 列表卡片上的「⏱ 校正距离」小按钮 —— 不抢眼，但找得到 */
.fx-mini {
  margin-top: 6px; display: inline-block;
  border: 1px dashed var(--line);
  background: transparent; color: var(--fg-mute);
  border-radius: 6px; padding: 3px 8px;
  font-size: 10.5px; cursor: pointer;
}
.fx-mini:hover { border-color: var(--accent); color: var(--accent); }

/* 已校正的小按钮：绿边，后面跟个「重新校正」 */
.fx-mini-done {
  border-style: solid;
  border-color: rgba(74,222,128,.35);
  color: #4ade80;
}

/* 手机上的校正列表：6 列表格在 375px 宽度下米数会被挤掉，
   改成「每段一张小卡、两行」。桌面端仍用表格。 */
.fxc-list { margin: 2px 0 0; }
.fxc-card {
  border-top: 1px solid var(--line-soft);
  padding: 9px 0 10px;
}
.fxc-card:first-child { border-top: none; padding-top: 2px; }
.fxc-card .l1 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--fg-dim); line-height: 1.5;
}
.fxc-card .l1 .n { color: var(--fg); font-weight: 600; flex: 0 0 auto; }
.fxc-card .l1 .rec { color: var(--fg); font-size: 13px; }
.fxc-card.changed .l1 .rec { color: #4ade80; }
.fxc-card .l2 {
  display: flex; align-items: center; gap: 10px; margin-top: 7px;
}
.fxc-card .l2 select {
  flex: 0 1 118px; max-width: 118px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--fg); border-radius: 7px; padding: 6px 8px; font-size: 13px;
}
.fxc-card .l2 select:focus { border-color: var(--accent); outline: none; }
.fxc-card .l2 .np { font-size: 12px; color: #4ade80; white-space: nowrap; }
/* 「离最近整距离差多少」—— 解释为什么有的段会被预选 */
.fxc-card .l2 .off { font-size: 11px; color: var(--fg-mute); margin-left: auto; white-space: nowrap; }
.fxc-card .l2 .off.far { color: #fb923c; }
.offlb { display: block; font-size: 10px; color: var(--fg-mute); margin-top: 2px; white-space: nowrap; }
.fx-mini-done span { color: var(--fg-mute); margin-left: 4px; }
.fx-mini-done:hover { border-color: #4ade80; color: #4ade80; }

/* 训练详情底部的导出按钮 */
.wxbar {
  margin: 20px 18px 4px; padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* 导出范围对话框 */
.expf { font-size: 13px; }
.expf > label {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
}
.expf > label span { flex: 0 0 26px; color: var(--fg-mute); font-size: 12px; }
.expf input[type="date"] {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--fg); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.expf input[type="date"]:focus { border-color: var(--accent); outline: none; }
.expopt {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.expopt .ck {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-dim); cursor: pointer;
}
.expopt .ck input { accent-color: var(--accent); }
.exph { margin-top: 12px; font-size: 10.5px; color: var(--fg-mute); line-height: 1.6; }

/* 顶部「导出」按钮：和标签同一行，靠右 */
.ltabs { display: flex; align-items: center; }
.ltabs-exp {
  margin-left: auto;
  border: 1px dashed var(--line); background: transparent;
  color: var(--fg-mute); border-radius: 8px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.ltabs-exp:hover { border-color: var(--accent); color: var(--accent); }

/* ================================================================ 图上的数值
   窄屏默认隐藏（28 个数字挤在一起看不清），右上角「数值」开关控制 */

.sr-noval .sr-pv { display: none; }

/* 数值加白描边 —— 压在折线上也能读 */
.sr-pv {
  text-shadow: 0 0 3px rgba(11,18,32,.95), 0 1px 2px rgba(11,18,32,.9);
  font-weight: 700;
}

@media (max-width: 560px) {
  .sr-pv { font-size: 8px; letter-spacing: -.2px; }
  .sr-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
}

/* 「数值」开关按钮 */
.sr-valbtn {
  flex: 0 0 auto; margin-left: 6px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--fg-mute); border-radius: 7px;
  padding: 4px 9px; font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.sr-valbtn.on { border-color: var(--accent); color: var(--accent); }

/* 数值开关那一行 */
.sr-valsw { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; }
.sr-valhint { font-size: 10.5px; color: var(--fg-mute); }

/* 今天页详情里引导去日志页的提示条 */
.today-go { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 18px 0; padding:9px 12px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; font-size:11.5px; color:var(--fg-mute); }
.today-go .btn { padding:5px 12px; font-size:11.5px; flex:0 0 auto; }

/* ================================================================ 底部抽屉要能滚
   手机屏窄时 U.modal 会把弹层贴到底部（抽屉样式）。
   内容多的弹层（比如距离校正：一屏放不下十几行）以前滚不动 ✗
   给 .dbody 加最大高度和滚动 ✓ */

.dialog .dbody { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dialog { max-height: 92vh; display: flex; flex-direction: column; }
.dialog .dbody { flex: 1 1 auto; min-height: 0; }
.dialog .dhead, .dialog .dfoot { flex: 0 0 auto; }

@media (max-width: 560px) {
  .dialog { max-height: 88vh; }
  .dialog .dbody { max-height: calc(88vh - 120px); }
}

/* ================================================================ 弹层居中，不贴底
   手机上 U.modal 会把高内容贴到底部（抽屉样式），
   但那个样子不好看，还固定不动 ✗
   统一改成居中，上下留白，内容多了自己滚 ✓ */

@media (max-width: 560px) {
  .overlay.sheet { align-items: center; padding: 14px; }
  .overlay.sheet .dialog {
    border-radius: var(--r-lg);
    border-bottom: 1px solid var(--line);
    max-height: 86vh;
    transform: translateY(14px) scale(.98);
  }
  .overlay.sheet.on .dialog { transform: none; }
  .overlay.sheet .dfoot { padding-bottom: 14px; }
}

/* 校正对话框里的「自定义距离」输入框 */
.fxc-in {
  width: 86px; margin-left: 6px; padding: 5px 8px;
  font-size: 13px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
}
.fxc-in:focus { outline: none; border-color: var(--accent); }
.fxc-card .l2 .fxc-in { margin-left: 8px; }

/* 课型推荐 chips */
.stype-sug { margin-top: 8px; }
.stype-sug:empty { display: none; }
.sug-hd { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.sug-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sug-b {
  padding: 7px 12px; border-radius: 999px; font-size: 13.5px;
  border: 1px solid var(--accent); color: var(--accent);
  background: rgba(56,189,248,.10); cursor: pointer;
}
.sug-b:active { transform: scale(.97); }
.sug-why { font-size: 11.5px; margin-top: 6px; }

/* 力量记录：每组一行 */
.setsbox { display: flex; flex-direction: column; gap: 6px; }
.setrow { display: flex; align-items: center; gap: 6px; }
.setrow .sn {
  width: 20px; flex: none; text-align: center; font-size: 12.5px;
  color: var(--fg-mute); font-weight: 600;
}
.setrow .si {
  flex: 1; min-width: 0; padding: 7px 9px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--fg);
}
.setrow .si:focus { outline: none; border-color: var(--accent); }
.setrow .sx { font-size: 12px; color: var(--fg-mute); flex: none; }
.setrow .sdel {
  width: 26px; height: 26px; flex: none; border: none; border-radius: 7px;
  background: rgba(248,113,113,.12); color: #f87171; font-size: 15px; line-height: 1;
}
.setrow .sdelph { width: 26px; flex: none; }
.addset {
  margin-top: 2px; padding: 8px; border-radius: 9px; font-size: 13.5px;
  border: 1px dashed var(--line); background: transparent; color: var(--accent);
}
.sethint { font-size: 11.5px; color: var(--fg-mute); margin-top: 6px; }
.setsline {
  font-size: 12px; color: var(--fg-mute); margin-top: 3px; line-height: 1.6;
}
.setsline b { color: var(--accent); font-weight: 600; margin-right: 2px; }
.setsline .kg { color: var(--fg); }

/* ---- 閫夋嫨鍔ㄤ綔锛堢収 COROS 鐨勫舰鎬侊細宸︽爮 + 鎷奸煶鍒嗙粍 + A-Z 绱㈠紩锛?--- */
.pk { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pk-top { padding: 10px 14px 6px; }
.pk-top input {
  width: 100%; padding: 11px 14px; font-size: 15px; font-family: inherit;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
}
.pk-top input:focus { outline: none; border-color: var(--accent); }
.pk-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.pk-tabs button {
  flex: 1; padding: 10px 4px; font-size: 13.5px; background: transparent;
  border: none; border-bottom: 2px solid transparent; color: var(--fg-mute);
}
.pk-tabs button.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.pk-body { display: flex; min-height: 0; flex: 1; position: relative; }
.pk-rail {
  width: 84px; flex: none; overflow-y: auto; background: var(--panel-2);
  border-right: 1px solid var(--line);
}
.pk-rail button {
  display: block; width: 100%; padding: 12px 6px; font-size: 12.5px;
  background: transparent; border: none; color: var(--fg-mute); text-align: center;
}
.pk-rail button.on { color: var(--accent); background: var(--panel); font-weight: 600; }
.pk-list { flex: 1; overflow-y: auto; position: relative; min-width: 0; }
.pk-ltr {
  position: sticky; top: 0; z-index: 1; padding: 5px 14px;
  font-size: 11.5px; font-weight: 700; color: var(--fg-mute);
  background: #070C16;
}
.pk-row { display: flex; align-items: center; gap: 10px; padding: 11px 26px 11px 14px; border-bottom: 1px solid var(--line-soft); }
.pk-row:active { background: var(--panel-2); }
.pk-n { font-size: 14.5px; flex: 1; min-width: 0; }
.pk-m { font-size: 11.5px; color: var(--fg-mute); flex: none; max-width: 46%; text-align: right; }
.pk-idx { position: absolute; right: 7px; top: 10px; display: flex; flex-direction: column; gap: 0; z-index: 2; }
.pk-idx button {
  width: 14px; height: 13px; padding: 0; font-size: 9.5px; line-height: 13px;
  background: transparent; border: none; color: var(--fg-mute); text-align: center;
}
.exsheet { padding: 4px 0 2px; }
.exsheet .k { font-size: 12px; color: var(--fg-mute); margin-top: 10px; }
.exsheet .v { font-size: 14px; line-height: 1.75; margin-top: 2px; }
.exmeta { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.exmeta div { display: flex; gap: 10px; font-size: 13px; padding: 4px 0; }
.exmeta span { color: var(--fg-mute); width: 68px; flex: none; }


/* 人体图的轮廓再描一道细线，低亮度下更容易看清边界
   （原来这里还有一条重复的 .hm-num 规则，把字号压到 6.4px，
    后来重做热力图时已经在上面统一了，这里清掉） */
.hm-sil ellipse, .hm-sil path { stroke: rgba(148,163,184,.25); stroke-width: .5; }


/* 动作详情里的三段式说明 */
.intro3 { margin: 8px 0 4px; }
.intro3 .i3 { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; line-height: 1.7; }
.intro3 .i3 span { flex: none; width: 56px; color: var(--fg-mute); font-size: 12px; }

/* 动作示范图（起始 / 结束两帧，来自开源动作库） */
.eximgs {
  display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap;
}
.eximgs figure { flex: 1 1 0; min-width: 0; max-width: 280px; margin: 0; }
.eximgs img {
  width: 100%; display: block; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  aspect-ratio: 3 / 2; object-fit: cover;
}
.eximgs figcaption {
  text-align: center; font-size: 10.5px; color: var(--fg-mute); margin-top: 4px;
}

/* 示范动图（高驰动作动画，2 秒循环）。
   16:9 是原片的比例；动图比两张静止帧更直观，所以有动图就不显示 eximgs */
.exclip { margin: 0 0 14px; }
.exclip video {
  width: 100%; display: block; border-radius: 10px;
  background: #0f1720; border: 1px solid var(--line-soft);
  aspect-ratio: 16 / 9; object-fit: contain;
}
/* 多机位切换（高驰每个动作 5 个机位：正面 / 侧面 / 背面…） */
.exangles { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.exangles button {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--fg-mute);
  font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0;
}
.exangles button.on { background: var(--accent); border-color: var(--accent); color: #04202a; }
.exang-t { font-size: 11px; color: var(--fg-mute); margin-left: 2px; }

/* ---------- 力量记录：动作详情里的「本次记录」（2026-10-19） ----------
   今天页 / 日志页共用（public/strength.js） */
.exrec { margin: 4px 16px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.exrec-h {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: var(--panel-2); font-size: 12.5px; color: var(--fg-dim); font-weight: 600;
}
.exrec-n { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.exrec-r {
  display: grid; grid-template-columns: 30px 1fr 1fr; align-items: center;
  padding: 7px 13px; font-size: 13px; border-top: 1px solid var(--line);
}
.exrec-r .rn { color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.exrec-r .rv, .exrec-r .rw { font-variant-numeric: tabular-nums; }
.exrec-r small { font-size: 11px; color: var(--fg-mute); margin-left: 1px; }
.exrec-f { padding: 7px 13px; font-size: 12px; color: var(--fg-mute); border-top: 1px solid var(--line); }
/* ---------- 力量训练：动作排序（2026-10-19） ---------- */
.exmv { display: flex; gap: 6px; }
.mvbtn {
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--fg-dim);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.mvbtn:active { background: var(--accent); border-color: var(--accent); color: #04202a; }
/* 排序时把「看示范/修改/删除」收起来 —— 一行放不下，也容易点错 */
#strength.sorting .exacts { display: none; }
#strength.sorting .ex { cursor: default; }