/* ============================================================
   排班卡 · 样式
   结构：三个标签页（首页 / 待办 / 我的）+ 二级详情
   颜色：全部走变量，跟随系统浅色/深色自动切换
   ============================================================ */

:root {
  --bg1: #F0ECF7;
  --bg2: #DFD9EC;
  --bg3: #D4CDE5;
  --ink: #111114;
  --ink2: #6F6A7C;
  --ink3: #9A94A8;
  --purple: #B79CFF;
  --purple-deep: #8B6CFF;
  --green: #7BD389;
  --red: #FF6B6B;
  --pink: #FF8FB1;

  --glass: rgba(255, 255, 255, 0.72);
  --row-bg: #FCFBFE;
  --row-bg-open: #FFFFFF;
  --chev: #C6C0D4;
  --input-border: #DED8EA;
  --input-bg: #FFFFFF;
  --sep: rgba(60, 50, 90, 0.1);

  /* 卡片自己的色板：浅色模式是白卡，深色模式是深灰（不是纯黑） */
  --c-bg: #FFFFFF;
  --c-ink: #17151E;
  --c-sub: #6E6879;
  --c-dim: #9690A2;
  --c-track: #EDEAF6;
  --c-shadow: 0 10px 28px rgba(40, 30, 90, 0.1);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.38s;
  --safe-top: max(12px, env(safe-area-inset-top, 0px));
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --prog: 0;
}

/* 深色模式：整体压暗，卡片用 #1C1B22 而不是纯黑，避免"黑得刺眼" */
@media (prefers-color-scheme: dark) {
  :root {
    --bg1: #1A1920;
    --bg2: #141319;
    --bg3: #100F14;
    --ink: #F1EFF6;
    --ink2: #A8A2B6;
    --ink3: #7B7587;
    --glass: rgba(255, 255, 255, 0.07);
    --row-bg: #1F1E26;
    --row-bg-open: #272630;
    --chev: #4C4858;
    --input-border: #3B3947;
    --input-bg: #262530;
    --sep: rgba(255, 255, 255, 0.08);

    --c-bg: #232230;
    --c-ink: #F4F2F9;
    --c-sub: #A9A3B8;
    --c-dim: #837D8F;
    --c-track: #33313F;
    --c-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
  }
  body { background: #0D0C11; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg2);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------- 页面容器与转场 ---------- */
.page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(175deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  transition: transform var(--dur) var(--ease), opacity 0.18s ease;
  will-change: transform;
}

/* 标签页：用 visibility 切，保留各自的滚动位置 */
.tabpage {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}
.tabpage.is-active {
  visibility: visible;
  opacity: 1;
}

/* 首页顶部随待办完成度泛绿 */
#pageHome {
  background:
    linear-gradient(180deg,
      rgba(123, 211, 137, calc(var(--prog) * 0.45)) 0%,
      rgba(123, 211, 137, 0) 40%),
    linear-gradient(175deg, var(--bg1), var(--bg2) 55%, var(--bg3));
}
#pageHome::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #08060f;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.tabpage.is-behind { transform: translateX(-26%); }
.tabpage.is-behind::after { opacity: 0.16; }

.page--detail {
  z-index: 6;
  transform: translateX(100%);
}
.page--detail.is-open { transform: none; }

/* ---------- 大标题 ---------- */
.large-title {
  flex: none;
  padding: calc(var(--safe-top) + 12px) 22px 2px;
}
.lt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.large-title h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.2;
}
.sub {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ink2);
  letter-spacing: 0.1px;
}

/* ---------- 滚动区 ---------- */
.list-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(var(--safe-bottom) + 96px);
}

/* ---------- 排班列表 ---------- */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 6px 20px rgba(50, 35, 110, 0.07);
}

.row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.14s var(--ease);
}
.row + .row::before {
  content: "";
  position: absolute;
  left: 61px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--sep);
}
.row.press {
  background: rgba(120, 100, 190, 0.12);
  transform: scale(0.984);
}

.badge {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}
/* 徽标配色按类型走，浅色模式浅底深字 */
.badge[data-type="日班"] { background: rgba(107, 112, 220, 0.13); color: #4A4FC0; }
.badge[data-type="夜班"] { background: rgba(206, 98, 89, 0.14); color: #A94740; }
.badge[data-type="下夜班"] { background: rgba(194, 112, 143, 0.14); color: #A05172; }
.badge[data-type="休息"] { background: rgba(94, 155, 120, 0.16); color: #3C7857; }
@media (prefers-color-scheme: dark) {
  /* 深色模式下列表行很暗，浅底深字会糊，换亮字 */
  .badge[data-type="日班"] { background: rgba(140, 145, 255, 0.2); color: #B3B7FF; }
  .badge[data-type="夜班"] { background: rgba(255, 140, 130, 0.2); color: #FFA79E; }
  .badge[data-type="下夜班"] { background: rgba(240, 150, 185, 0.2); color: #F5B0CB; }
  .badge[data-type="休息"] { background: rgba(120, 200, 160, 0.2); color: #9ADBB8; }
}

.row-main { flex: 1; min-width: 0; }
.row-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.row-sub {
  display: block;
  font-size: 12.5px;
  color: var(--ink3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-pill {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--purple-deep);
  padding: 2px 7px;
  border-radius: 7px;
}

.chev {
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.8px solid var(--chev);
  border-bottom: 1.8px solid var(--chev);
  transform: rotate(-45deg);
}

/* ---------- 过期提示 ---------- */
.stale {
  margin: 10px 16px 0;
  background: #FFF1F1;
  border: 1px solid #FFD2D2;
  color: #C0392B;
  font-size: 12px;
  border-radius: 14px;
  padding: 9px 13px;
  line-height: 1.45;
}
@media (prefers-color-scheme: dark) {
  .stale { background: rgba(192, 57, 43, 0.16); border-color: rgba(255, 120, 110, 0.25); color: #FF9C92; }
}
@media (prefers-color-scheme: dark) {
  .diff-note { background: rgba(10, 132, 255, 0.16); border-color: rgba(10, 132, 255, 0.28); color: #6CB4FF; }
}

/* 换表变化提示：信息性，用主题蓝，不用红色告警色 */
.diff-note {
  display: block;
  width: calc(100% - 32px);
  margin: 10px 16px 0;
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.18);
  color: #0064CC;
  font-size: 12px;
  border-radius: 14px;
  padding: 9px 13px;
  line-height: 1.5;
  text-align: left;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.diff-note b { display: block; font-weight: 700; font-size: 12.5px; }
.diff-note span { display: block; opacity: 0.8; margin-top: 2px; }

.foot-note {
  text-align: center;
  font-size: 11px;
  color: var(--ink3);
  margin: 16px 20px 0;
  line-height: 1.7;
}

/* ---------- 现在状态卡 ---------- */
/* 语义：tone-work-*=在班实色左条；tone-*=下次班次淡色整卡标识；tone-none=灰 */
.now-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 14px;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.now-card .now-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.now-card .now-main-txt {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.now-card .now-sub {
  font-size: 12px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-card.tone-work-day { border-left: 4px solid #0071e3; }
.now-card.tone-work-night { border-left: 4px solid #FF3B30; }
.now-card.tone-day {
  box-shadow: inset 0 0 0 1.5px rgba(0, 113, 227, 0.22);
  border-left: 4px solid rgba(0, 113, 227, 0.45);
}
.now-card.tone-night {
  box-shadow: inset 0 0 0 1.5px rgba(255, 59, 48, 0.22);
  border-left: 4px solid rgba(255, 59, 48, 0.45);
}
.now-card.tone-off {
  box-shadow: inset 0 0 0 1.5px rgba(255, 45, 85, 0.22);
  border-left: 4px solid rgba(255, 45, 85, 0.45);
}
.now-card.tone-rest {
  box-shadow: inset 0 0 0 1.5px rgba(52, 199, 89, 0.22);
  border-left: 4px solid rgba(52, 199, 89, 0.45);
}
.now-card.tone-none { border-left: 4px solid #C7C7CC; }

/* ---------- 本月概览 ---------- */
.summary {
  margin: 14px 0 0;
  background: var(--glass);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  overflow: hidden;
}
.summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 13px 16px;
  cursor: pointer;
  text-align: left;
}
.summary-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
}
.summary-brief {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-head .chev { transform: rotate(-45deg); }
.summary-body { padding: 0 16px 14px; }
.summary-grid { display: flex; gap: 8px; }
.summary-cell {
  flex: 1;
  border-radius: 12px;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.summary-cell b { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.summary-cell span { font-size: 11px; color: var(--ink3); }
.summary-cell.day { background: rgba(0, 113, 227, 0.08); }
.summary-cell.day b { color: #0064CC; }
.summary-cell.night { background: rgba(255, 59, 48, 0.08); }
.summary-cell.night b { color: #C4382F; }
.summary-cell.off { background: rgba(255, 45, 85, 0.08); }
.summary-cell.off b { color: #B03050; }
.summary-cell.rest { background: rgba(52, 199, 89, 0.1); }
.summary-cell.rest b { color: #2A7A45; }
.summary-line {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink2);
}

/* ============================================================
   待办
   ============================================================ */
.todo-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.todo-count {
  font-size: 13px;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.todo-count b {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--purple-deep);
}
.todo-count b.roll { animation: rollup 0.3s var(--ease); }
@keyframes rollup {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.todo-count i { font-style: normal; margin: 0 1px; opacity: 0.6; }

/* 进度环：r=13 → 周长 81.68 */
.ring { width: 30px; height: 30px; transform: rotate(-90deg); flex: none; }
.ring circle { fill: none; stroke-width: 3; }
.ring-bg { stroke: rgba(120, 100, 190, 0.2); }
.ring-fg {
  stroke: var(--purple-deep);
  stroke-linecap: round;
  stroke-dasharray: 81.68;
  stroke-dashoffset: 81.68;
  transition: stroke-dashoffset 0.55s var(--ease), stroke 0.4s ease;
}

.add-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--purple-deep);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.16s var(--ease);
}
.add-btn svg { width: 16px; height: 16px; }
.add-btn:active { transform: scale(0.88); }

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 6px 20px rgba(50, 35, 110, 0.07);
}
.todo-list:empty { display: none; }

.todo-row {
  position: relative;
  overflow: hidden;
}
.todo-row + .todo-row .todo-body::before {
  content: "";
  position: absolute;
  left: 52px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--sep);
}

/* 左滑后露出的三个操作（置顶 / 复制到 / 删除），通栏等分 */
.todo-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 156px;
  display: flex;
}
.todo-actions button {
  flex: 1;
  border: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2px;
}
.act-pin { background: #0071e3; }
.act-copy { background: #C9A24A; }
.act-del { background: #FF5A5A; }
.todo-actions button:active { filter: brightness(0.9); }

.todo-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  /* 必须不透光：底下压着紫/红色的左滑按钮，半透明会在行尾透出淡色印子 */
  background: var(--row-bg);
  transition: transform 0.3s var(--ease), background 0.2s;
  will-change: transform;
}
.todo-row.open .todo-body { background: var(--row-bg-open); }

.todo-text {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
  word-break: break-word;
  transition: color 0.25s, opacity 0.25s;
}
.todo-row.done .todo-text {
  color: var(--ink3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.72;
}

.pin-mark {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: var(--purple-deep);
  background: rgba(139, 108, 255, 0.14);
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

/* ---------- 勾选：圆圈 → 对勾 + 粒子 ---------- */
.check {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.8px solid rgba(120, 100, 190, 0.38);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  transition: background 0.22s ease, border-color 0.22s ease;
}
@media (prefers-color-scheme: dark) {
  .check { border-color: rgba(180, 170, 220, 0.35); }
}
.check svg { width: 15px; height: 15px; display: block; }
.check path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 一笔画出来：靠 dash 偏移过渡，不是逐帧 */
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: stroke-dashoffset 0.3s var(--ease) 0.05s;
}
.todo-row.done .check {
  background: var(--green);
  border-color: var(--green);
}
.todo-row.done .check path { stroke-dashoffset: 0; }

.todo-row.just-done .check { animation: pop 0.42s var(--ease); }
@keyframes pop {
  0% { transform: scale(1); }
  28% { transform: scale(0.7); }
  62% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  pointer-events: none;
}
.spark:nth-child(2) { --tx: 19px; --ty: 0px; }
.spark:nth-child(3) { --tx: 13.5px; --ty: 13.5px; }
.spark:nth-child(4) { --tx: 0px; --ty: 19px; }
.spark:nth-child(5) { --tx: -13.5px; --ty: 13.5px; }
.spark:nth-child(6) { --tx: -19px; --ty: 0px; }
.spark:nth-child(7) { --tx: -13.5px; --ty: -13.5px; }
.spark:nth-child(8) { --tx: 0px; --ty: -19px; }
.spark:nth-child(9) { --tx: 13.5px; --ty: -13.5px; }

.todo-row.just-done .spark { animation: burst 0.56s var(--ease) forwards; }
@keyframes burst {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.35); }
  70% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
}

/* ---------- 新增输入行 ---------- */
.todo-add {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--row-bg-open);
  animation: spread 0.4s var(--ease);
}
@keyframes spread {
  from { clip-path: circle(0% at calc(100% - 24px) 0%); opacity: 0.5; }
  to { clip-path: circle(170% at calc(100% - 24px) 0%); opacity: 1; }
}
.todo-add .fake-check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.8px dashed rgba(120, 100, 190, 0.45);
}
.todo-add input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink);
  padding: 2px 0;
}
.todo-add input::placeholder { color: var(--ink3); }

.todo-row.removing { animation: collapse 0.26s var(--ease) forwards; }
@keyframes collapse {
  to { height: 0; opacity: 0; transform: translateX(-24px); }
}

.todo-empty {
  margin: 0;
  padding: 18px 16px;
  font-size: 13px;
  color: var(--ink3);
  text-align: center;
  background: var(--glass);
  border-radius: 18px;
}

.todo-row.done .check.holding { animation: hold 0.45s linear forwards; }
@keyframes hold {
  to { transform: scale(0.86); border-color: #C9A24A; background: #C9A24A; }
}

/* ============================================================
   我的
   ============================================================ */
.group { margin: 0 0 20px; }
.group-title {
  margin: 0 0 7px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink3);
  letter-spacing: 0.8px;
}
.group-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius: 18px;
  padding: 0 15px;
  box-shadow: 0 6px 20px rgba(50, 35, 110, 0.07);
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink);
  min-height: 46px;
}
.set-row + .set-row { border-top: 0.5px solid var(--sep); }
.set-val {
  font-size: 13.5px;
  color: var(--ink2);
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-row input {
  border: 1px solid var(--input-border);
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 15px;
  font-family: inherit;
  width: 92px;
  text-align: center;
  background: var(--input-bg);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.group-hint {
  margin: 7px 4px 0;
  font-size: 11.5px;
  color: var(--ink3);
  line-height: 1.5;
}

/* ============================================================
   底部标签栏（悬浮胶囊）
   ============================================================ */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 10px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 2px;
  width: min(300px, calc(100% - 80px));
  padding: 5px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: 0 8px 28px rgba(40, 30, 80, 0.14), 0 0 0 0.5px rgba(255, 255, 255, 0.6) inset;
  transition: opacity 0.2s ease;
}
@media (prefers-color-scheme: dark) {
  .tabbar {
    background: rgba(38, 36, 48, 0.82);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.07) inset;
  }
}
.tabbar.hidden { opacity: 0; pointer-events: none; }

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 5px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: var(--ink3);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  transition: color 0.18s ease, background 0.22s var(--ease);
}
.tab svg { width: 22px; height: 22px; }
.tab.is-active {
  color: var(--purple-deep);
  background: rgba(139, 108, 255, 0.12);
}
@media (prefers-color-scheme: dark) {
  .tab.is-active { background: rgba(160, 135, 255, 0.18); }
}

/* ============================================================
   二级：详情
   ============================================================ */
.nav {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(var(--safe-top) + 2px) 12px 6px;
  min-height: 44px;
}
.back-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--purple-deep);
  font-size: 16px;
  font-family: inherit;
  padding: 6px 8px 6px 2px;
  border-radius: 10px;
  transition: opacity 0.12s;
}
.back-btn:active { opacity: 0.45; }
.back-btn svg { width: 11px; height: 18px; }
.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(var(--safe-bottom) + 30px);
  overscroll-behavior-y: contain;
}

.pull {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: height 0.28s var(--ease);
}
.pull-text {
  font-size: 11.5px;
  color: var(--ink3);
  padding-bottom: 8px;
  letter-spacing: 0.2px;
}
.pull.spin .spinner { animation: spin 0.8s linear infinite; }
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.6px solid rgba(120, 100, 190, 0.3);
  border-top-color: var(--purple-deep);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-bg);
  color: var(--c-ink);
  border-radius: 26px;
  padding: 17px 18px 16px;
  box-shadow: var(--c-shadow);
  transition: opacity 0.2s ease, transform 0.28s var(--ease), background 0.3s ease;
}
.card.swap { opacity: 0; transform: translateY(6px) scale(0.99); }

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--c-dim);
  letter-spacing: 0.2px;
}
.meta b { color: var(--c-sub); font-weight: 600; }

/* 班次徽标 / 胶囊：颜色跟着卡片明暗走，JS 只负责写 data-type */
.type-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  background: var(--chip-bg, rgba(154, 148, 168, 0.16));
  color: var(--chip-ink, #5F5A6C);
}

.card[data-type="日班"] { --chip-bg: rgba(107, 112, 220, 0.13); --chip-ink: #4A4FC0; }
.card[data-type="夜班"] { --chip-bg: rgba(206, 98, 89, 0.14); --chip-ink: #A94740; }
.card[data-type="下夜班"] { --chip-bg: rgba(194, 112, 143, 0.14); --chip-ink: #A05172; }
.card[data-type="休息"] { --chip-bg: rgba(94, 155, 120, 0.16); --chip-ink: #3C7857; }

@media (prefers-color-scheme: dark) {
  .card[data-type="日班"] { --chip-bg: rgba(140, 145, 255, 0.2); --chip-ink: #B3B7FF; }
  .card[data-type="夜班"] { --chip-bg: rgba(255, 140, 130, 0.2); --chip-ink: #FFA79E; }
  .card[data-type="下夜班"] { --chip-bg: rgba(240, 150, 185, 0.2); --chip-ink: #F5B0CB; }
  .card[data-type="休息"] { --chip-bg: rgba(120, 200, 160, 0.2); --chip-ink: #9ADBB8; }
}

.hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0 13px;
  flex-wrap: wrap;
  min-height: 34px;
}
.seg { display: flex; align-items: baseline; white-space: nowrap; }
.seg small { font-size: 12.5px; color: var(--c-dim); font-weight: 500; margin-right: 6px; }
.seg b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--c-ink);
}
.seg b.tick { animation: tick 0.32s var(--ease); }
@keyframes tick {
  from { opacity: 0.35; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
.mid { font-size: 20px; color: var(--c-dim); letter-spacing: 2px; line-height: 1; }

.track {
  height: 9px;
  border-radius: 9px;
  background: var(--c-track);
  overflow: hidden;
}
.fill {
  height: 100%;
  width: 0%;
  border-radius: 9px;
  background: linear-gradient(90deg, #9C7BFF, #C3ACFF);
  /* 每秒推进一小格，linear 才是匀速爬 */
  transition: width 1s linear;
}
.fill.rest { background: linear-gradient(90deg, #4E9F62, var(--green)); }
.fill.night { background: linear-gradient(90deg, #D64545, #FF8080); }
.fill.off { background: linear-gradient(90deg, #C4567C, var(--pink)); }

.under {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--c-dim);
  margin-top: 7px;
  letter-spacing: 0.2px;
  gap: 8px;
}

.foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 15px;
  gap: 10px;
}
.foot .lines { min-width: 0; }
.foot .l1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foot .l2 {
  font-size: 12.5px;
  color: var(--c-sub);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 15px;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--chip-bg, rgba(154, 148, 168, 0.16));
  color: var(--chip-ink, #5F5A6C);
}

/* ---------- 详情页下方的信息卡 ---------- */
.detail-extra {
  margin: 14px 0 0;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 0 16px;
  box-shadow: 0 6px 18px rgba(50, 35, 110, 0.06);
}
.ex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  color: var(--ink);
  gap: 12px;
}
.ex-row + .ex-row { border-top: 0.5px solid var(--sep); }
.ex-row span:last-child {
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- 详情页：备注 ---------- */
.note-sec { margin: 16px 0 0; }
.note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.note-head .note-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink3);
}
.note-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: none;
  border: 0;
  outline: 0;
  background: var(--glass);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}
.note-input::placeholder { color: var(--ink3); }

.swipe-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink3);
  margin: 14px 0 0;
  letter-spacing: 0.2px;
}

/* ---------- 撤销提示 ---------- */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 88px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(28, 26, 38, 0.94);
  color: #fff;
  font-size: 13.5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(20, 10, 50, 0.22);
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.3s var(--ease);
}
.undo-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.undo-toast button {
  border: 0;
  background: transparent;
  color: var(--purple);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 2px 0 2px 6px;
}
.undo-toast button:active { opacity: 0.6; }

/* ---------- 无障碍 / 宽屏 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (min-width: 520px) {
  body { background: #C9C1DC; }
  .page, .tabbar {
    width: 430px;
    left: calc(50% - 215px);
    right: auto;
    margin: 0 auto;
  }
  .tabbar { left: 50%; transform: translateX(-50%); }
  .page {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 18px 60px rgba(50, 35, 100, 0.18);
  }
}
@media (min-width: 520px) and (prefers-color-scheme: dark) {
  body { background: #08070B; }
  .page { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 60px rgba(0, 0, 0, 0.5); }
}

/* ---------- 团队页 ---------- */
.team-banner {
  font-size: 12px;
  color: var(--ink3);
  padding: 4px 0;
}

.datebar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.datebar::-webkit-scrollbar { width: 0; height: 0; }
.dchip {
  flex: none;
  min-width: 52px;
  padding: 7px 10px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: var(--glass);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
}
.dchip.on {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: #fff;
}
.dchip.today:not(.on) { box-shadow: inset 0 0 0 1.4px var(--purple-deep); }

.day-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding: 0 4px 8px;
}

.tgroup { margin-bottom: 14px; }
.tg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 7px;
}
.tg-name { font-size: 13.5px; font-weight: 700; }
.tg-name.day { color: #0064CC; }
.tg-name.night { color: #C4382F; }
.tg-name.off { color: #B03050; }
.tg-name.rest { color: #2A7A45; }
.tg-name.none { color: var(--ink3); }
.tg-count { font-size: 11.5px; color: var(--ink3); }

.trow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  position: relative;
  cursor: pointer;
}
.trow + .trow::before {
  content: "";
  position: absolute;
  left: 58px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--sep);
}
.trow:active { background: rgba(120, 100, 190, 0.08); }
.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}
.trow-main { flex: 1; min-width: 0; }
.trow-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.trow-name b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live {
  flex: none;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #2A7A45;
  background: rgba(52, 199, 89, 0.14);
  padding: 1px 6px;
  border-radius: 6px;
}
.trow-sub {
  display: block;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 本周覆盖矩阵 */
.matrix { padding: 8px; border-radius: 16px; }
.mrow { display: flex; align-items: stretch; }
.mname {
  flex: none;
  width: 62px;
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcell {
  flex: 1;
  height: 34px;
  margin: 1px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
  cursor: pointer;
}
.mcell.h { height: 24px; font-size: 10.5px; font-weight: 600; cursor: default; }
.mcell.t-日班 { background: rgba(0, 113, 227, 0.08); color: #0064CC; }
.mcell.t-夜班 { background: rgba(255, 59, 48, 0.08); color: #C4382F; }
.mcell.t-下夜班 { background: rgba(255, 45, 85, 0.08); color: #B03050; }
.mcell.t-休息 { background: rgba(52, 199, 89, 0.1); color: #2A7A45; }
/* 今天列的框色跟随格子自己的班次色（比底色深一点） */
.mcell.today { box-shadow: inset 0 0 0 1.4px rgba(118, 118, 128, 0.4); }
.mcell.t-日班.today { box-shadow: inset 0 0 0 1.4px rgba(0, 113, 227, 0.4); }
.mcell.t-夜班.today { box-shadow: inset 0 0 0 1.4px rgba(255, 59, 48, 0.4); }
.mcell.t-下夜班.today { box-shadow: inset 0 0 0 1.4px rgba(255, 45, 85, 0.4); }
.mcell.t-休息.today { box-shadow: inset 0 0 0 1.4px rgba(52, 199, 89, 0.4); }

/* ============================================================
   3.0 新增：人员/周期选择、月历、弹层、按日期分组的待办
   ============================================================ */

.lt-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}

.chip-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: rgba(255, 255, 255, 0.66);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 8px 6px 12px;
  border-radius: 12px;
  max-width: 62%;
  transition: transform 0.14s var(--ease), background 0.14s;
}
.chip-btn svg { width: 14px; height: 14px; opacity: 0.45; flex: none; }
.chip-btn:active { transform: scale(0.96); }
.chip-btn.ghost {
  background: transparent;
  color: var(--ink2);
  font-weight: 500;
  padding: 6px 4px;
}
.chip-btn.ghost svg { width: 13px; height: 13px; }
@media (prefers-color-scheme: dark) {
  .chip-btn { background: rgba(255, 255, 255, 0.1); }
  .chip-btn.ghost { background: transparent; }
}

/* 周/月切换：紧凑 iOS 分段控件 */
.seg-ctrl {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(120, 100, 190, 0.12);
  flex: none;
}
.seg-ctrl button {
  border: 0;
  background: transparent;
  color: var(--ink2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  transition: background 0.18s, color 0.18s;
}
.seg-ctrl button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(40, 30, 80, 0.12);
}
@media (prefers-color-scheme: dark) {
  .seg-ctrl button.on { background: rgba(255, 255, 255, 0.15); }
}

/* ---------- 月历 ---------- */
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  background: var(--glass);
  border-radius: 20px;
  padding: 10px 7px 12px;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 6px 20px rgba(50, 35, 110, 0.07);
}
.cal-wd {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  padding: 2px 0 5px;
}
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 46px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.12s var(--ease);
}
.cal-cell:active { transform: scale(0.93); }
.cal-cell.dim { opacity: 0.24; }
.cal-d {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cal-t { font-size: 9.5px; font-weight: 700; line-height: 1; opacity: 0.85; }
.cal-cell.today { box-shadow: inset 0 0 0 1.6px var(--purple-deep); }

.cal-cell[data-type="日班"] { background: rgba(107, 112, 220, 0.1); }
.cal-cell[data-type="日班"] .cal-t { color: #4A4FC0; }
.cal-cell[data-type="夜班"] { background: rgba(206, 98, 89, 0.11); }
.cal-cell[data-type="夜班"] .cal-t { color: #A94740; }
.cal-cell[data-type="下夜班"] { background: rgba(194, 112, 143, 0.11); }
.cal-cell[data-type="下夜班"] .cal-t { color: #A05172; }
.cal-cell[data-type="休息"] { background: rgba(94, 155, 120, 0.12); }
.cal-cell[data-type="休息"] .cal-t { color: #3C7857; }
@media (prefers-color-scheme: dark) {
  .cal-cell[data-type="日班"] { background: rgba(140, 145, 255, 0.13); }
  .cal-cell[data-type="日班"] .cal-t { color: #B3B7FF; }
  .cal-cell[data-type="夜班"] { background: rgba(255, 140, 130, 0.13); }
  .cal-cell[data-type="夜班"] .cal-t { color: #FFA79E; }
  .cal-cell[data-type="下夜班"] { background: rgba(240, 150, 185, 0.13); }
  .cal-cell[data-type="下夜班"] .cal-t { color: #F5B0CB; }
  .cal-cell[data-type="休息"] { background: rgba(120, 200, 160, 0.13); }
  .cal-cell[data-type="休息"] .cal-t { color: #9ADBB8; }
}

.cal-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink3);
}
.cal-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  margin-right: 4px;
  background: currentColor;
}
.cal-legend [data-type="日班"] { color: #6B70DC; }
.cal-legend [data-type="夜班"] { color: #CE6259; }
.cal-legend [data-type="下夜班"] { color: #C2708F; }
.cal-legend [data-type="休息"] { color: #5E9B78; }

/* ---------- 底部弹层 ---------- */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 8, 20, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}
.sheet-mask.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 41;
  width: min(430px, 100%);
  max-height: 72vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(var(--safe-bottom) + 16px);
  transform: translate(-50%, 101%);
  transition: transform 0.34s var(--ease);
  box-shadow: 0 -8px 30px rgba(40, 30, 80, 0.14);
}
.sheet.open { transform: translate(-50%, 0); }
@media (prefers-color-scheme: dark) {
  .sheet { background: #262530; }
}
.sheet h2 {
  margin: 0 4px 6px;
  font-size: 15px;
  font-weight: 600;
}
.grab {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--input-border);
  margin: 0 auto 12px;
}
.sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15.5px;
  padding: 13px 4px;
  border-bottom: 0.5px solid var(--sep);
  text-align: left;
}
.sheet-item:last-child { border-bottom: 0; }
.sheet-item em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink3);
  flex: none;
}
.sheet-item.on { color: var(--purple-deep); font-weight: 600; }

/* ---------- 待办分组 ---------- */
.todo-group { margin-bottom: 18px; }
.todo-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px 7px;
}
.tg-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.tg-sub { font-size: 11.5px; color: var(--ink3); }

/* ---------- 详情页：这天的待办 ---------- */
.day-todo { margin: 16px 0 0; }
.day-todo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.mini-add {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--purple-deep);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.14s var(--ease);
}
.mini-add svg { width: 13px; height: 13px; }
.mini-add:active { transform: scale(0.88); }
.day-todo-empty {
  margin: 0;
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink3);
  background: var(--glass);
  border-radius: 16px;
}

/* 没排班的那一行 */
.row.empty .row-title { color: var(--ink3); font-weight: 500; }
.badge[data-type=""] { background: rgba(154, 148, 168, 0.14); color: var(--ink3); }

.set-row--btn {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
}

/* ============================================================
   视觉主题：Apple Store 风
   —— 暖白底、近黑字、单一蓝色强调、大留白、去掉玻璃拟态
   放在最后覆盖前面的紫色风格，改配色只改这一段和 :root
   ============================================================ */
:root {
  --bg1: #FFFFFF;
  --bg2: #F5F5F7;
  --bg3: #F5F5F7;
  --ink: #1D1D1F;
  --ink2: #6E6E73;
  --ink3: #86868B;
  --purple: #0071e3;
  --purple-deep: #0071e3;
  --green: #34C759;
  --red: #FF3B30;
  --pink: #FF2D55;
  --glass: #FFFFFF;
  --row-bg: #FFFFFF;
  --row-bg-open: #FFFFFF;
  --chev: #C7C7CC;
  --input-border: #D2D2D7;
  --input-bg: #FFFFFF;
  --sep: rgba(0, 0, 0, 0.07);
  --card-line: rgba(0, 0, 0, 0.05);
  --c-bg: #FFFFFF;
  --c-ink: #1D1D1F;
  --c-sub: #6E6E73;
  --c-dim: #86868B;
  --c-track: #E8E8ED;
  --c-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg1: #000000;
    --bg2: #000000;
    --bg3: #000000;
    --ink: #F5F5F7;
    --ink2: #98989D;
    --ink3: #8E8E93;
    --glass: #1C1C1E;
    --row-bg: #1C1C1E;
    --row-bg-open: #2C2C2E;
    --chev: #48484A;
    --input-border: #3A3A3C;
    --input-bg: #2C2C2E;
    --sep: rgba(255, 255, 255, 0.09);
    --card-line: rgba(255, 255, 255, 0.07);
    --c-bg: #1C1C1E;
    --c-ink: #F5F5F7;
    --c-sub: #A1A1A6;
    --c-dim: #8E8E93;
    --c-track: #2C2C2E;
    --c-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  body { background: #000; }
}

body { background: var(--bg2); }

.page { background: var(--bg2); }

#pageHome {
  background:
    linear-gradient(180deg, rgba(52, 199, 89, calc(var(--prog) * 0.16)) 0%, rgba(52, 199, 89, 0) 32%),
    var(--bg2);
}

/* 标题：更大、字距更紧 */
.large-title { padding: calc(var(--safe-top) + 18px) 22px 2px; }
.large-title h1 { font-size: 34px; font-weight: 700; letter-spacing: -1.1px; }
.sub { margin-top: 4px; font-size: 13px; }

/* 所有卡片：纯色 + 极细描边 + 极淡阴影，去掉毛玻璃 */
.list,
.todo-list,
.group-card,
.cal,
.detail-extra,
.day-todo-empty,
.todo-empty {
  background: var(--glass);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  box-shadow: none;
}

/* 列表行更松 */
.row { padding: 15px 16px; }
.row-title { font-size: 16.5px; font-weight: 600; letter-spacing: -0.2px; }
.row-sub { font-size: 12.5px; margin-top: 3px; }
.badge { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
.row + .row::before { left: 66px; background: var(--sep); }

/* 详情卡 */
.card { border-radius: 20px; }

/* 主按钮 / 强调色统一成 Apple 蓝 */
.now-pill { background: var(--purple-deep); border-radius: 8px; }
.add-btn, .mini-add { background: var(--purple-deep); }
.back-btn { color: var(--purple-deep); }
.tab.is-active { color: var(--purple-deep); background: rgba(0, 113, 227, 0.1); }
.chip-btn { background: rgba(118, 118, 128, 0.09); }
.chip-btn.ghost { background: transparent; }
@media (prefers-color-scheme: dark) {
  .chip-btn { background: rgba(118, 118, 128, 0.22); }
  .chip-btn.ghost { background: transparent; }
  .tab.is-active { background: rgba(10, 132, 255, 0.18); }
}

/* 进度条：改成蓝色系 */
.fill { background: linear-gradient(90deg, #0071e3, #4EA0FF); }
.fill.rest { background: linear-gradient(90deg, #248A3D, #34C759); }
.fill.night { background: linear-gradient(90deg, #C4382F, #FF6B5E); }
.fill.off { background: linear-gradient(90deg, #B03050, #FF6B8A); }

/* 班次色：降饱和、白底淡染 */
.badge[data-type="日班"] { background: rgba(0, 113, 227, 0.1); color: #0064CC; }
.badge[data-type="夜班"] { background: rgba(255, 59, 48, 0.1); color: #C4382F; }
.badge[data-type="下夜班"] { background: rgba(255, 45, 85, 0.09); color: #B03050; }
.badge[data-type="休息"] { background: rgba(52, 199, 89, 0.13); color: #2A7A45; }
.badge[data-type=""] { background: rgba(118, 118, 128, 0.12); color: var(--ink3); }

.card[data-type="日班"] { --chip-bg: rgba(0, 113, 227, 0.1); --chip-ink: #0064CC; }
.card[data-type="夜班"] { --chip-bg: rgba(255, 59, 48, 0.11); --chip-ink: #C4382F; }
.card[data-type="下夜班"] { --chip-bg: rgba(255, 45, 85, 0.1); --chip-ink: #B03050; }
.card[data-type="休息"] { --chip-bg: rgba(52, 199, 89, 0.14); --chip-ink: #2A7A45; }

.cal-cell[data-type="日班"] { background: rgba(0, 113, 227, 0.08); }
.cal-cell[data-type="日班"] .cal-t { color: #0064CC; }
.cal-cell[data-type="夜班"] { background: rgba(255, 59, 48, 0.08); }
.cal-cell[data-type="夜班"] .cal-t { color: #C4382F; }
.cal-cell[data-type="下夜班"] { background: rgba(255, 45, 85, 0.08); }
.cal-cell[data-type="下夜班"] .cal-t { color: #B03050; }
.cal-cell[data-type="休息"] { background: rgba(52, 199, 89, 0.1); }
.cal-cell[data-type="休息"] .cal-t { color: #2A7A45; }
.cal-cell.today { box-shadow: inset 0 0 0 1.6px var(--purple-deep); }

@media (prefers-color-scheme: dark) {
  .badge[data-type="日班"] { background: rgba(10, 132, 255, 0.2); color: #6CB4FF; }
  .badge[data-type="夜班"] { background: rgba(255, 69, 58, 0.2); color: #FF8A80; }
  .badge[data-type="下夜班"] { background: rgba(255, 55, 95, 0.2); color: #FF93B0; }
  .badge[data-type="休息"] { background: rgba(48, 209, 88, 0.2); color: #6EE28A; }
  .badge[data-type=""] { background: rgba(118, 118, 128, 0.24); }

  .card[data-type="日班"] { --chip-bg: rgba(10, 132, 255, 0.2); --chip-ink: #6CB4FF; }
  .card[data-type="夜班"] { --chip-bg: rgba(255, 69, 58, 0.2); --chip-ink: #FF8A80; }
  .card[data-type="下夜班"] { --chip-bg: rgba(255, 55, 95, 0.2); --chip-ink: #FF93B0; }
  .card[data-type="休息"] { --chip-bg: rgba(48, 209, 88, 0.2); --chip-ink: #6EE28A; }

  .cal-cell[data-type="日班"] { background: rgba(10, 132, 255, 0.16); }
  .cal-cell[data-type="日班"] .cal-t { color: #6CB4FF; }
  .cal-cell[data-type="夜班"] { background: rgba(255, 69, 58, 0.16); }
  .cal-cell[data-type="夜班"] .cal-t { color: #FF8A80; }
  .cal-cell[data-type="下夜班"] { background: rgba(255, 55, 95, 0.16); }
  .cal-cell[data-type="下夜班"] .cal-t { color: #FF93B0; }
  .cal-cell[data-type="休息"] { background: rgba(48, 209, 88, 0.16); }
  .cal-cell[data-type="休息"] .cal-t { color: #6EE28A; }
}

.cal-legend [data-type="日班"] { color: #0071e3; }
.cal-legend [data-type="夜班"] { color: #FF3B30; }
.cal-legend [data-type="下夜班"] { color: #FF2D55; }
.cal-legend [data-type="休息"] { color: #34C759; }

/* 底部标签栏：白底细边，弱化"胶囊悬浮"的装饰感 */
.tabbar {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--card-line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  width: min(320px, calc(100% - 72px));
}
@media (prefers-color-scheme: dark) {
  .tabbar {
    background: rgba(28, 28, 30, 0.92);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  }
}
.tab { font-size: 10.5px; font-weight: 500; }
.tab.is-active { font-weight: 600; }

/* 底部说明：两行，居中小字 */
.foot-note { line-height: 1.9; letter-spacing: 0.1px; }
.fn-line { display: block; }

/* 弹层：贴近 iOS 表单 */
.sheet {
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
}
@media (prefers-color-scheme: dark) {
  .sheet { background: #1C1C1E; }
}
.sheet-item { font-size: 16px; padding: 14px 4px; }
.sheet h2 { font-size: 13px; font-weight: 600; color: var(--ink3); letter-spacing: 0.4px; text-transform: uppercase; }

/* 待办圆环 / 计数 */
.todo-count b { color: var(--purple-deep); }
.ring-fg { stroke: var(--purple-deep); }

/* 详情页导航标题 */
.nav-title { font-size: 16.5px; font-weight: 600; letter-spacing: -0.2px; }

/* 分组标题 */
.group-title { text-transform: uppercase; letter-spacing: 0.8px; font-size: 11.5px; }
.tg-title { font-size: 13.5px; }

/* --- 主题微调：把残留的紫色痕迹清掉 --- */
.seg-ctrl { background: rgba(118, 118, 128, 0.12); }
@media (prefers-color-scheme: dark) {
  .seg-ctrl { background: rgba(118, 118, 128, 0.24); }
  .tab.is-active { background: rgba(10, 132, 255, 0.14); }
}
.card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.05); }
@media (prefers-color-scheme: dark) {
  .card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
}
/* 列表卡片之间再多一点呼吸 */
.list-wrap { padding-top: 16px; }
.list { border-radius: 16px; }
.todo-list { border-radius: 16px; }
/* 详情页信息卡和卡片间距拉开一点 */
.detail-extra { margin-top: 16px; }

/* --- 详情卡：工作内容上移成醒目一行 --- */
.work {
  margin: 11px 0 0;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.32;
  color: var(--c-ink);
}
.work[hidden] { display: none; }

/* 底部左区为空时，胶囊贴右 */
.foot { justify-content: flex-end; }
.foot .lines { margin-right: auto; }

/* --- 详情卡：工作内容上移成醒目一行 --- */
.work {
  margin: 11px 0 0;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.32;
  color: var(--c-ink);
}
.work[hidden] { display: none; }

/* 底部左区为空时，胶囊贴右 */
.foot { justify-content: flex-end; }
.foot .lines { margin-right: auto; }

/* --- 防误触缩放：横向手势交给 JS，别让 Safari 当成缩放/长按选中 --- */
.todo-row,
.todo-body,
.todo-actions button,
.row,
.cal-cell,
.cal-legend span,
.tab,
.chip-btn,
.seg-ctrl button,
.check,
.add-btn,
.mini-add,
.sheet-item {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* 输入框必须保留选中和光标 */
.todo-add input,
.set-row input {
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* --- 卡片内间距放松：原来挤在一起，现在更像 Apple 的产品卡 --- */
.card { padding: 20px 20px 18px; }
.meta { font-size: 12.5px; letter-spacing: 0.3px; }
.work { margin-top: 13px; font-size: 18px; }
.hero { margin: 15px 0 16px; }
.under { margin-top: 9px; }
.foot { margin-top: 17px; }
.seg b { font-size: 31px; }

/* 详情页内容间距 */
.detail-extra { margin-top: 16px; }
.detail-extra .ex-row { padding: 13px 0; }
.day-todo { margin-top: 20px; }
.day-todo-head { padding-bottom: 9px; }
.swipe-hint { margin: 12px 0 0; }

/* 首页底部说明：字更淡、更小 */
.foot-note { font-size: 11px; color: var(--ink3); margin: 20px 20px 0; }
.foot-note .fn-line { line-height: 1.8; }
.foot-note .fn-line.dim { opacity: 0.66; }

/* 隐藏滚动条：手机上本来就不显示，桌面上那条带箭头的系统滚动条会压在内容上 */
.list-wrap,
.scroll,
.sheet,
.sheet-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.list-wrap::-webkit-scrollbar,
.scroll::-webkit-scrollbar,
.sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ============================================================
   同步批（P0-6/P1）：视图切换动画 + 新组件深色模式
   放在文件最末，保证覆盖前面所有同权重规则
   ============================================================ */
.list-wrap { transition: transform 0.2s var(--ease); }
.list-wrap.view-swap-l { animation: viewSwapL 0.22s var(--ease); }
.list-wrap.view-swap-r { animation: viewSwapR 0.22s var(--ease); }
@keyframes viewSwapL {
  from { transform: translateX(16px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}
@keyframes viewSwapR {
  from { transform: translateX(-16px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

@media (prefers-color-scheme: dark) {
  /* 主题蓝在暗底用 iOS 亮蓝；顺带修正旧紫色主题残留 */
  :root { --purple-deep: #0A84FF; --purple: #0A84FF; }

  .now-card.tone-work-day { border-left-color: #0A84FF; }
  .now-card.tone-work-night { border-left-color: #FF453A; }
  .now-card.tone-day {
    box-shadow: inset 0 0 0 1.5px rgba(10, 132, 255, 0.3);
    border-left: 4px solid rgba(10, 132, 255, 0.6);
  }
  .now-card.tone-night {
    box-shadow: inset 0 0 0 1.5px rgba(255, 69, 58, 0.3);
    border-left: 4px solid rgba(255, 69, 58, 0.6);
  }
  .now-card.tone-off {
    box-shadow: inset 0 0 0 1.5px rgba(255, 55, 95, 0.3);
    border-left: 4px solid rgba(255, 55, 95, 0.6);
  }
  .now-card.tone-rest {
    box-shadow: inset 0 0 0 1.5px rgba(48, 209, 88, 0.3);
    border-left: 4px solid rgba(48, 209, 88, 0.6);
  }
  .now-card.tone-none { border-left-color: #48484A; }

  .summary-cell.day { background: rgba(10, 132, 255, 0.16); }
  .summary-cell.day b { color: #6CB4FF; }
  .summary-cell.night { background: rgba(255, 69, 58, 0.16); }
  .summary-cell.night b { color: #FF8A80; }
  .summary-cell.off { background: rgba(255, 55, 95, 0.16); }
  .summary-cell.off b { color: #FF93B0; }
  .summary-cell.rest { background: rgba(48, 209, 88, 0.16); }
  .summary-cell.rest b { color: #6EE28A; }

  .dchip.today:not(.on) { box-shadow: inset 0 0 0 1.4px var(--purple-deep); }
  .trow:active { background: rgba(255, 255, 255, 0.06); }
  .tg-name.day { color: #6CB4FF; }
  .tg-name.night { color: #FF8A80; }
  .tg-name.off { color: #FF93B0; }
  .tg-name.rest { color: #6EE28A; }
  .live { color: #6EE28A; background: rgba(48, 209, 88, 0.2); }

  .mcell.t-日班 { background: rgba(10, 132, 255, 0.16); color: #6CB4FF; }
  .mcell.t-夜班 { background: rgba(255, 69, 58, 0.16); color: #FF8A80; }
  .mcell.t-下夜班 { background: rgba(255, 55, 95, 0.16); color: #FF93B0; }
  .mcell.t-休息 { background: rgba(48, 209, 88, 0.16); color: #6EE28A; }
  .mcell.today { box-shadow: inset 0 0 0 1.4px rgba(142, 142, 147, 0.5); }
  .mcell.t-日班.today { box-shadow: inset 0 0 0 1.4px rgba(10, 132, 255, 0.5); }
  .mcell.t-夜班.today { box-shadow: inset 0 0 0 1.4px rgba(255, 69, 58, 0.5); }
  .mcell.t-下夜班.today { box-shadow: inset 0 0 0 1.4px rgba(255, 55, 95, 0.5); }
  .mcell.t-休息.today { box-shadow: inset 0 0 0 1.4px rgba(48, 209, 88, 0.5); }
}

/* ============================================================
   优化批次 2：全局搜索（功能 A）+ 班次分享图（功能 B）
   ============================================================ */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
/* 视觉 32×32，::before 把命中区撑到 44×44 */
.icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.09);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.15s ease;
}
.icon-btn::before { content: ""; position: absolute; inset: -6px; }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:active { background: rgba(118, 118, 128, 0.18); transform: scale(0.92); }

/* 详情导航右侧的分享按钮，与返回键对称 */
.nav-icon-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  color: var(--purple-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.nav-icon-btn svg { width: 21px; height: 21px; }
.nav-icon-btn:active { opacity: 0.45; }

/* ---------- 搜索层 ---------- */
.search-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.24s var(--ease), visibility 0.2s;
}
.search-page.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.search-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 10px;
  flex: none;
}
.search-cancel {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--purple-deep);
  font-family: inherit;
  font-size: 16px;
  padding: 8px 6px;
  cursor: pointer;
}
.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: var(--ink3); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 14px calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.s-group { margin-bottom: 14px; }
.s-head {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink3);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 4px;
}
.s-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  max-height: 56px;
  padding: 8px 14px;
  border: 0;
  background: var(--glass);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.s-group .s-item { border-bottom: 0.5px solid var(--sep); }
.s-group .s-item:first-of-type { border-radius: 12px 12px 0 0; }
.s-group .s-item:last-of-type { border-radius: 0 0 12px 12px; border-bottom: 0; }
.s-group .s-item:only-of-type { border-radius: 12px; }
.s-item:active { background: rgba(120, 100, 190, 0.1); }
.s-item span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-item em {
  flex: none;
  font-style: normal;
  font-size: 12px;
  color: var(--ink3);
}
.s-item .chev { flex: none; }
.s-none {
  margin: 40px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink3);
}

/* ---------- 分享预览层（遮罩永远深色；canvas 图永远浅色） ---------- */
.share-page {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 8, 20, 0.86);
  display: grid;
  place-items: center;
  padding: 20px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.share-page.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.share-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-height: 100%;
}
.share-img {
  display: block;
  width: auto;
  max-width: 86vw;
  max-height: 62vh;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.share-hint {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}
.share-close {
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 34px;
  border-radius: 20px;
}
.share-close:active { background: rgba(255, 255, 255, 0.26); }

@media (prefers-color-scheme: dark) {
  .search-input { background: rgba(118, 118, 128, 0.24); }
  .icon-btn { background: rgba(118, 118, 128, 0.22); }
  .icon-btn:active { background: rgba(255, 255, 255, 0.12); }
  .s-item:active { background: rgba(255, 255, 255, 0.08); }
}

/* ============================================================
   优化批次 3：离线 / 新版本提示条（蓝灰信息色，不用红）
   ============================================================ */
.net-note {
  display: block;
  margin: 10px 16px 0;
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.28);
  color: #0064CC;
  font-size: 12px;
  border-radius: 14px;
  padding: 9px 13px;
  line-height: 1.45;
  text-align: left;
  cursor: default;
  transition: opacity 0.4s ease;
}
.net-note.action { cursor: pointer; border-color: rgba(0, 113, 227, 0.5); font-weight: 600; }
.net-note.fade { opacity: 0; }
.net-note[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
  .net-note {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.3);
    color: #6CB4FF;
  }
}

/* ============================================================
   批次 5：数据体检 / 回滚提示（黄条；红条复用 .stale）
   ============================================================ */
.health-note { text-align: left; }
.warn-note {
  margin: 10px 16px 0;
  background: #FFF8E6;
  border: 1px solid #F0DFAF;
  color: #8A6D1C;
  font-size: 12px;
  border-radius: 14px;
  padding: 9px 13px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.warn-note:active { filter: brightness(0.97); }

@media (prefers-color-scheme: dark) {
  .warn-note {
    background: rgba(255, 204, 0, 0.1);
    border-color: rgba(255, 204, 0, 0.26);
    color: #FFD60A;
  }
}

/* hidden 属性必须真的藏起来：.diff-note/.now-card 等设了 display 的元素
   会压过浏览器对 [hidden] 的默认样式，露出空条 */
[hidden] { display: none !important; }