/* 手机优先：手机上一列；宽屏上面一整条是加视频的表单，下面分左右两栏（左边视频列表，右边训练日历）。
   按钮一律至少 44px 高，手机上好点。 */

:root {
  --bg: #f4f4f6;
  --card: #ffffff;
  --text: #16161a;
  --dim: #6b6b76;
  --line: #dcdce4;
  --accent: #3a6ff7;
  --accent-text: #ffffff;
  --danger: #c1352c;
  --warn-bg: #fff4e0;
  --warn-line: #e8b866;
  --badge-bg: #efe6ff;
  --badge-text: #5b3fb3;

  /* 日历的果冻色：每个时段一种，按时段的排序轮着用。底色浅，字用同色系的深色 */
  --jelly-0: #ffd9e4; --jelly-0-ink: #b0436a; /* 粉 */
  --jelly-1: #ffe3cc; --jelly-1-ink: #a85a24; /* 蜜桃 */
  --jelly-2: #fff1b5; --jelly-2-ink: #876800; /* 柠檬 */
  --jelly-3: #d3f4dd; --jelly-3-ink: #2f7a4b; /* 薄荷 */
  --jelly-4: #d4ebff; --jelly-4-ink: #2c66a0; /* 天蓝 */
  --jelly-5: #e6dcff; --jelly-5-ink: #5a45ad; /* 薰衣草 */
  --jelly-6: #ccf0eb; --jelly-6-ink: #24766d; /* 青柠水 */
  --jelly-7: #f5d9f4; --jelly-7-ink: #8e3d8c; /* 葡萄 */
  --jelly-any: #ececf1; --jelly-any-ink: #5f5f6c; /* 任意时段：灰 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131318;
    --card: #1e1e25;
    --text: #f0f0f4;
    --dim: #9c9caa;
    --line: #34343f;
    --accent: #5b87ff;
    --accent-text: #0d0d12;
    --danger: #ff7a70;
    --warn-bg: #3a2c15;
    --warn-line: #7a5a20;
    --badge-bg: #322a4d;
    --badge-text: #c5b3ff;

    --jelly-0: #4a2633; --jelly-0-ink: #ffb0c8;
    --jelly-1: #4a3020; --jelly-1-ink: #ffc196;
    --jelly-2: #403816; --jelly-2-ink: #f2d46c;
    --jelly-3: #1f3d2a; --jelly-3-ink: #8fe0ab;
    --jelly-4: #1d3449; --jelly-4-ink: #9ccdfa;
    --jelly-5: #322a52; --jelly-5-ink: #c4b3ff;
    --jelly-6: #183d3a; --jelly-6-ink: #84ddd2;
    --jelly-7: #43253f; --jelly-7-ink: #f0a9ec;
    --jelly-any: #2c2c35; --jelly-any-ink: #b0b0bd;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}

main, .topbar { max-width: 1160px; margin: 0 auto; }

@media (min-width: 720px) {
  body { padding-left: 24px; padding-right: 24px; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 12px;
}
.topbar h1 { font-size: 20px; margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.status { color: var(--dim); font-size: 13px; }
.status.error { color: var(--danger); }

/* 手机上一行放不下「标题 + 状态 + 刷新 + 语言」：状态挪到标题下面一行，按钮留在右上角 */
@media (max-width: 480px) {
  .topbar { display: grid; grid-template-columns: 1fr auto auto; column-gap: 8px; row-gap: 0; }
  .topbar-right { display: contents; }
  /* 位置写死：刷新按钮藏起来的时候（打不开的报错页），语言按钮照样贴右边 */
  .topbar h1 { grid-column: 1; grid-row: 1; }
  #refresh { grid-column: 2; grid-row: 1; }
  #lang { grid-column: 3; grid-row: 1; }
  .status { grid-column: 1 / -1; grid-row: 2; }
}

/* ── 卡片与表单 ─────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

label {
  display: block;
  font-size: 13px;
  color: var(--dim);
  margin: 12px 0 6px;
}
label:first-of-type { margin-top: 0; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.row { display: flex; gap: 8px; align-items: stretch; }
.row select { flex: 1; }

button {
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
button.primary {
  width: 100%;
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  font-weight: 600;
}
button.ghost { white-space: nowrap; }
/* 顶栏的语言按钮：不常点，做小一点，手机上顶栏放得下；点按区域仍然 44px 高 */
button.lang { padding: 10px 10px; font-size: 14px; color: var(--dim); }
button.link {
  min-height: 0;
  padding: 6px 8px;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 14px;
}
button.link.danger { color: var(--danger); }


/* ── 加视频的表单 ───────────────────────────── */
/* 手机上一列；宽一点排成两三行，见下面的 grid-template-areas */

.add-form { display: grid; gap: 14px; }
.field { min-width: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.add-form .field > label,
legend {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--dim);
}
/* 平时一行高，粘了多行内容由 fitURLBox 撑高 */
#url { resize: none; overflow: hidden; }

/* 选了按星期 / 按频率才有内容；空着的时候不占地方（也不多出一道行间距） */
.plan-details:empty { display: none; }
.plan-details > :first-child { margin-top: 0; }
.f-save { align-self: end; display: flex; }
.f-save .primary { flex: 1; }

/* 平板：链接一行；标题 | 类别；训练计划 | 保存；计划细节一行 */
@media (min-width: 720px) {
  .add-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "url url" "title cat" "plan save";
    column-gap: 16px;
  }
  .f-url { grid-area: url; }
  .f-title { grid-area: title; }
  .f-cat { grid-area: cat; }
  .f-plan { grid-area: plan; }
  .f-save { grid-area: save; }
  /* 没给 area：自动排到上面几行后面，独占一行 */
  .plan-details { grid-column: 1 / -1; }
}

/* 宽屏两行：链接 | 标题；类别 | 训练计划 | 保存 */
@media (min-width: 960px) {
  .add-form {
    grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "url url title title" "cat plan plan save";
  }
  .f-save { justify-content: flex-end; }
  .f-save .primary { flex: none; min-width: 200px; }
}

/* ── 训练计划编辑器（加视频的表单和列表里的「编辑」共用） ── */

.segmented {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.segmented button {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 12px;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
@media (min-width: 720px) {
  .add-form .segmented { display: inline-flex; }
  .add-form .segmented button { flex: none; padding: 10px 22px; }
}

/* 七天一格一个下拉框：宽屏上一行排满七天，窄的地方自动折行 */
.plan .cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.plan .cells.wide { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan .cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  color: var(--dim);
}
.plan .cell select { color: var(--text); }
/* 「不练」的那几天淡一点，一眼看出哪几天练 */
.plan .cell.off select { color: var(--dim); }
.plan .all-days { margin-top: 8px; }
@media (min-width: 720px) {
  .plan .all-days { width: auto; min-width: 240px; }
  /* 「间隔」和「时段」两格：表单那么宽时别拉满，步进器拉成半页宽很怪 */
  .add-form .plan .cells.wide { grid-template-columns: repeat(2, minmax(0, 280px)); }
}
.plan .new-slot { margin-top: 8px; }

.stepper { display: flex; align-items: stretch; gap: 6px; }
.stepper button { width: 44px; padding: 0; flex: none; }
.stepper output {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  white-space: nowrap;
}

/* ── 提示条 ─────────────────────────────────── */

.banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  white-space: pre-wrap;
}

.gate h2 { margin: 0 0 8px; font-size: 17px; }
.gate p { margin: 0; color: var(--dim); }
.gate code { word-break: break-all; }

/* ── 视频列表 ───────────────────────────────── */

/* minmax(0, 1fr)：不然手机上日历按内容撑宽，整页横着滚（日历自己里面横滚才对） */
.columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* 宽屏：左边列表窄一点（不显示网址了），日历拿剩下的宽度，七天每天差不多 100px */
@media (min-width: 960px) {
  .columns { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: stretch; }
}

/* ── 视频列表那张卡片 ───────────────────────── */

.list-panel { display: flex; flex-direction: column; padding: 0; margin-bottom: 0; overflow: hidden; }
.list-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
}
.list-filter:empty { display: none; }
.list { padding: 12px; }

/* 类别筛选的下拉框占满一行，有高亮时「清除高亮」挤在它右边 */
.list-filter select { flex: 1; width: auto; min-width: 0; }
.list-filter .clear-hl { flex: none; white-space: nowrap; }

/* 宽屏：卡片和右边日历一样高，列表在卡片里自己滚。
   contain: size 让卡片不按内容撑高 —— 这一行有多高由日历说了算，卡片再被 stretch 拉到同样高 */
@media (min-width: 960px) {
  .list-panel { contain: size; min-height: 480px; }
  .list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

.group-title {
  margin: 20px 4px 8px;
  font-size: 13px;
  color: var(--dim);
}
.list > .group-title:first-child { margin-top: 4px; }

.item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}
.item-title { font-weight: 600; word-break: break-word; }
.item-plan { margin-top: 4px; font-size: 14px; }
.item-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--dim);
  word-break: break-all;
}
.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}
.item-actions {
  display: flex;
  gap: 4px;
  margin: 8px -8px -6px;
}
.item-actions .spacer { flex: 1; }
/* 勾了「高亮」的那条：卡片描一圈主题色，和日历上亮着的对得上 */
.item.hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.item-actions .hl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 6px 8px;
  font-size: 14px;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
.hl-toggle input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.item.hl .hl-toggle { color: var(--accent); }
.item a.open { color: var(--accent); font-size: 14px; padding: 6px 8px; text-decoration: none; }

.empty { color: var(--dim); text-align: center; padding: 28px 0; }

/* 列表里就地编辑：训练计划那块和上面的标题、类别隔开一点 */
.item fieldset { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }

/* ── 训练日历（calendar.js） ───────────────────── */

.jelly-0 { --jelly: var(--jelly-0); --jelly-ink: var(--jelly-0-ink); }
.jelly-1 { --jelly: var(--jelly-1); --jelly-ink: var(--jelly-1-ink); }
.jelly-2 { --jelly: var(--jelly-2); --jelly-ink: var(--jelly-2-ink); }
.jelly-3 { --jelly: var(--jelly-3); --jelly-ink: var(--jelly-3-ink); }
.jelly-4 { --jelly: var(--jelly-4); --jelly-ink: var(--jelly-4-ink); }
.jelly-5 { --jelly: var(--jelly-5); --jelly-ink: var(--jelly-5-ink); }
.jelly-6 { --jelly: var(--jelly-6); --jelly-ink: var(--jelly-6-ink); }
.jelly-7 { --jelly: var(--jelly-7); --jelly-ink: var(--jelly-7-ink); }
.jelly-any { --jelly: var(--jelly-any); --jelly-ink: var(--jelly-any-ink); }

.calendar { padding: 14px; margin-bottom: 0; }

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav button { width: 44px; padding: 0; font-size: 20px; line-height: 1; }
.cal-title { margin: 0 6px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.cal-tools { display: flex; align-items: center; gap: 8px; }
.cal-tools .segmented { display: inline-flex; }
.cal-tools .segmented button { flex: none; padding: 10px 16px; }

/* 周视图：七列各堆各的色块，高度各算各的。窄了就横着滚，每天至少 84px，不然标题挤成一字一行 */
.cal-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 2px; }
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(84px, 1fr));
  gap: 6px;
  align-items: start;
}
.cal-day { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cal-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.3;
}
.cal-date {
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 999px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.cal-day.past .cal-date { color: var(--dim); font-weight: 500; }
.cal-day.today .cal-dow { color: var(--accent); font-weight: 600; }
.cal-day.today .cal-date { background: var(--accent); color: var(--accent-text); }

.cal-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 8px;
  border-radius: 10px;
  background: var(--jelly);
  /* 果冻感：顶上一道亮边 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  min-width: 0;
}
@media (prefers-color-scheme: dark) {
  .cal-block { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
}
.cal-slot {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--jelly-ink);
  overflow-wrap: anywhere;
}
/* 空的那块：短短一行「时段 · 空」，颜色淡一档，有内容的块才显眼 */
.cal-block.is-empty {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 6px;
  padding: 5px 8px;
  opacity: .5;
}
.cal-empty { font-size: 11px; color: var(--jelly-ink); }
.cal-item { min-width: 0; }
.cal-item-title {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
  /* 标题最多三行，悬停看全的 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-item-dur { margin-top: 1px; font-size: 11px; color: var(--jelly-ink); }

/* 月视图：周视图的迷你版，每天一小摞有安排的色块（空的不画），只留日期不写字 */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-month-dow { text-align: center; font-size: 12px; color: var(--dim); padding-bottom: 2px; }
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  padding: 4px 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  text-align: center;
}
.cal-cell:hover { border-color: var(--line); }
.cal-cell.out { opacity: .35; }
.cal-num { font-size: 12px; line-height: 18px; color: var(--text); }
.cal-cell.today .cal-num {
  align-self: center;
  min-width: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.cal-mini { display: flex; flex-direction: column; gap: 2px; }
.cal-mini span {
  display: block;
  border-radius: 3px;
  /* 没有字，光是果冻底色太淡，掺一点同色系的深色 */
  background: var(--jelly);
  background: color-mix(in srgb, var(--jelly) 78%, var(--jelly-ink));
}

/* 高亮：勾了的视频所在的块描一圈同色系深色，其余的块变淡。放最后，压过空块自己那档淡 */
.cal-block, .cal-mini span { transition: opacity .15s; }
.cal-block.dim, .cal-mini span.dim { opacity: .22; }
.cal-block.hl { box-shadow: 0 0 0 2px var(--jelly-ink); }
.cal-item.hl .cal-item-title { font-weight: 700; }
.cal-mini span.hl { box-shadow: 0 0 0 1.5px var(--jelly-ink); }