/* ============================================================
   云创记 · 接单日历
   Blue & white palette — clean, cool, full-bleed layout.
   ============================================================ */

:root {
  --paper: #f6f9ff;
  --paper-2: #eaf1fc;
  --surface: #ffffff;

  --ink: #2a3a52;
  --ink-2: #5f7292;
  --ink-3: #9aabc4;

  --line: #e3ecfa;
  --line-soft: #f0f6ff;
  --card-line: #dfe9f8;

  --blue: #5b8def;
  --blue-deep: #3d6fd9;
  --blue-soft: #e8f0ff;
  --blue-line: #cfe0fb;

  --cyan: #3aa8d8;
  --teal: #3fb08f;
  --danger: #e0736b;

  --radius-lg: 18px;
  --radius-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(91, 141, 239, 0.07);
  --shadow: 0 1px 2px rgba(91, 141, 239, 0.05), 0 16px 34px -26px rgba(91, 141, 239, 0.4);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC",
    "Noto Serif CJK SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    radial-gradient(820px 420px at 4% -12%, #dbe9ff 0%, rgba(219, 233, 255, 0) 62%),
    radial-gradient(760px 400px at 98% -8%, #e4e0ff 0%, rgba(228, 224, 255, 0) 60%),
    radial-gradient(700px 380px at 50% 112%, #d9f4ec 0%, rgba(217, 244, 236, 0) 66%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

button, select, input { font-family: inherit; color: inherit; }

/* ---------------- shell ---------------- */

.app {
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------------- top bar ---------------- */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 5px 10px rgba(27, 107, 255, 0.35));
}

.brand-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand-text strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand-text em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
}

.remain {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.remain-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  align-self: center;
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.remain b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.remain.is-clear b { color: var(--teal); }
.remain.is-clear .remain-dot { background: var(--teal); box-shadow: 0 0 0 3px #ccfbf1; }
.remain-label { font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.02em; }

/* ---------------- toolbar ---------------- */

.toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  flex: 0 0 auto;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 15px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.seg-btn.is-active {
  background: var(--surface);
  color: var(--blue-deep);
  box-shadow: 0 1px 3px rgba(91, 141, 239, 0.16), inset 0 0 0 1px var(--blue-line);
}
.seg-btn:not(.is-active):hover { color: var(--ink); }

.period {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  min-width: 0;
}
.period-title {
  margin: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.period-title:hover { color: var(--blue-deep); background: var(--blue-soft); }
.period-title:focus-visible { outline: 2px solid var(--blue-line); outline-offset: 2px; }

.nav-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-btn:hover { background: var(--surface); border-color: var(--line); color: var(--blue-deep); }
.nav-btn:active { transform: scale(0.94); }

.today-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.today-btn:hover { color: var(--blue); border-color: var(--blue-line); }
.today-btn:active { transform: scale(0.97); }

.app.is-list .period,
.app.is-list .today-btn { display: none; }

.progress {
  flex: 0 0 auto;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a8c8ff 0%, #5b8def 55%, #8fd9c4 100%);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------- stage ---------------- */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: stretch;
}
.stage.is-week { grid-template-columns: minmax(0, 1fr) 340px; }
.stage.is-list,
.stage.is-stats { display: block; overflow-y: auto; min-height: 0; }
.stage.is-list::-webkit-scrollbar,
.stage.is-stats::-webkit-scrollbar { width: 7px; }
.stage.is-list::-webkit-scrollbar-thumb,
.stage.is-stats::-webkit-scrollbar-thumb { background: #d8e5f5; border-radius: 4px; }

/* 窗口很矮时（小窗 / 分屏 / 高缩放）允许滚动，避免月历、周历被裁掉看不到 */
@media (min-width: 901px) {
  .stage { overflow-y: auto; scrollbar-width: thin; }
  .stage > .card { min-height: 430px; }
}

/* 渲染兜底提示（脚本版本错配时不再白屏） */
.render-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
}
.render-error .re-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.render-error .re-sub { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.render-error .re-btn {
  margin-top: 6px;
  appearance: none;
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 12.5px;
  cursor: pointer;
}
.render-error .re-btn:hover { background: #dbe9ff; }
.render-error .re-detail { margin: 10px 0 0; font-size: 11px; color: #b8c6d9; }

.card {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  min-height: 0;
}

/* ---------------- month view ---------------- */

.calendar {
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 2px;
  flex: 0 0 auto;
}
.weekday-row span {
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  padding: 3px 0;
}
.weekday-row span.is-weekend { color: #9db4d0; }

.grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(58px, 1fr);
  gap: 4px;
}

.cell {
  appearance: none;
  position: relative;
  border: 1px solid #eef4fb;
  background: transparent;
  border-radius: 11px;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 6px 5px 5px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: background 0.16s ease, border-color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.cell:hover { background: #f7fbff; border-color: var(--blue-line); }

.cell-num {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.3;
  padding-left: 1px;
  transition: color 0.16s ease;
}
.cell.is-weekend .cell-num { color: var(--ink-2); }
.cell.is-out .cell-num { color: #c3d2e4; }
.cell.is-out .cell-events { opacity: 0.45; }

.cell-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.ev {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--c-bg, #b7cbe6);
  color: var(--c-fg, #1b3352);
  overflow: hidden;
  flex: 0 0 auto;
  line-height: 1.3;
  box-shadow: inset 3px 0 0 var(--sc, transparent), 0 1px 2px rgba(42, 58, 82, 0.14);
}
.ev-top {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  overflow: hidden;
  white-space: nowrap;
}
.ev-meta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.ev-meta:last-child { flex: 1 1 auto; }
.ev-ico { flex: 0 0 auto; opacity: 0.75; }
.ev-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 9px;
  line-height: 1.5;
  color: #0b2444;
  background: rgba(255, 255, 255, 0.66);
  border-radius: 3px;
  padding: 0 3px;
  margin-left: -1px;
}
.ev-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev.is-done { opacity: 0.72; }
.ev.is-done .ev-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.ev.is-one-line { flex-direction: row; align-items: center; justify-content: flex-start; gap: 3px; padding: 1px 4px; }
.ev-dot {
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.ev.is-one-line .ev-title { flex: 1 1 auto; font-size: 9.5px; line-height: 1.35; }
.ev-bar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
}

.cell-count {
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: 9px;
  line-height: 1;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.cell.is-selected {
  background: #f2f8ff;
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.cell.is-selected .cell-num { color: var(--blue-deep); font-weight: 700; }

/* 今天：整格明显的色块 + 日期本身做成实心色块（有任务时也不会被盖住） */
.cell.is-today {
  background: #dcebff;
  border-color: #9dc7ff;
}
.cell.is-today .cell-num {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 19px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.cell.is-today.is-selected {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

/* ---------------- week grid ---------------- */

.weekgrid {
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wg-head,
.wg-row {
  display: grid;
  grid-template-columns: 48px repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.wg-head { flex: 0 0 auto; margin-bottom: 4px; }

.wg-day {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 5px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wg-day:hover { background: #f7fbff; }
.wg-day.is-sel { background: var(--blue-soft); border-color: var(--blue-line); }
.wg-wd { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.wg-num {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* 今天：整格色块 + 日期本身做成实心色块 */
.wg-day.is-today { background: #dcebff; }
.wg-day.is-today .wg-wd { color: var(--blue-deep); }
.wg-day.is-today .wg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
}

.wg-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.wg-label {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px 6px 0 0;
}

.wg-cell {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  border: 1px solid #eef4fb;
  border-radius: 10px;
  background: #fbfdff;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  min-height: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wg-cell:hover { background: #f5faff; border-color: var(--blue-line); }
.wg-cell.is-sel { border-color: var(--blue-line); background: #f4f9ff; }
.wg-cell.is-today { background: #f8fcff; }

/* ---------------- year view ---------------- */

.stage.is-year { grid-template-columns: minmax(0, 1fr); }

.yearview {
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.yr-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.yr-month {
  appearance: none;
  border: 1px solid var(--line);
  background: #fdfefe;
  border-radius: 12px;
  padding: 7px 8px 6px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.yr-month.is-current { border-color: var(--blue-line); background: #fbfdff; }
.yr-month.is-current .yr-title { color: var(--blue-deep); }
.yr-month:hover {
  border-color: var(--blue-line);
  background: #f7fbff;
  box-shadow: 0 6px 16px -12px rgba(91, 141, 239, 0.8);
}

.yr-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.yr-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1px;
}
.yr-week i {
  font-style: normal;
  font-size: 8px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.4;
}

.yr-days {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 1px;
}

.yr-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 4px;
  min-height: 0;
  overflow: hidden;
}
.yr-day b {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.yr-day.is-out b { color: #cfdbeb; }
.yr-day.is-today { background: var(--blue-soft); }
.yr-day.is-today b { color: var(--blue-deep); font-weight: 700; }

.yr-dots { display: flex; gap: 2px; }
.yr-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; opacity: 0.8; }

/* ---------------- day panel ---------------- */

.daypanel {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.dp-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.dp-left { display: flex; align-items: baseline; gap: 9px; }
.dp-num {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dp-meta { display: flex; flex-direction: column; gap: 2px; }
.dp-wd { font-size: 12px; color: var(--ink); font-weight: 500; }
.dp-rel { font-size: 10.5px; color: var(--blue); letter-spacing: 0.04em; }
.dp-rel.is-muted { color: var(--ink-3); }

.dp-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  line-height: 1.6;
}
.dp-count b { color: var(--blue); font-weight: 600; }

.dp-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -6px;
  padding-right: 6px;
}
.dp-scroll::-webkit-scrollbar { width: 6px; }
.dp-scroll::-webkit-scrollbar-thumb { background: #dfe9f6; border-radius: 3px; }

/* ---------------- tasks ---------------- */

.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.task.is-new { animation: taskIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.task:last-child { border-bottom: 0; }

@keyframes taskIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

.task.is-removing { animation: taskOut 0.18s ease forwards; pointer-events: none; }
@keyframes taskOut { to { opacity: 0; transform: translateX(6px); } }

.status-btn {
  appearance: none;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--sc);
  background: conic-gradient(var(--sc) 0 var(--p), transparent var(--p));
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.status-btn:hover { filter: brightness(1.05) saturate(1.1); }
.status-btn:active { transform: scale(0.88); }

.task-main { flex: 1 1 auto; min-width: 0; }

.task-title {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
  cursor: pointer;
}
.task.is-done .task-title {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: #c9d6e6;
  text-decoration-thickness: 1px;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.status-pill {
  font-size: 10px;
  line-height: 1.7;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--c-bg, #eef2f8);
  color: var(--c-fg, #7c8ba1);
  white-space: nowrap;
}

.chip {
  font-size: 10.5px;
  line-height: 1.6;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-bg, #eef2f8);
  color: var(--c-fg, #7c8ba1);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip.is-plat { border: 1px dashed rgba(91, 141, 239, 0.25); }
.task.is-done .chip { opacity: 0.55; }

.meta-item {
  font-size: 11px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meta-item.is-price { color: var(--blue); font-weight: 500; }
.task.is-done .meta-item { opacity: 0.55; }

.task-del {
  appearance: none;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -3px -4px 0 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.task-del:hover { opacity: 1; background: #eaf1ff; color: var(--blue); }

@media (hover: hover) {
  .task-del { opacity: 0; }
  .task:hover .task-del { opacity: 0.5; }
  .task:hover .task-del:hover { opacity: 1; }
}

/* ---------------- composer ---------------- */

.composer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.composer.is-shake { animation: shake 0.32s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-4px); }
  55% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

.cmp-row { display: flex; gap: 7px; }
.cmp-row > .cmp-field { flex: 1 1 0; min-width: 0; }
.cmp-row > .cmp-field.is-narrow { flex: 0 0 92px; }

.cmp-field {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 9px;
  min-width: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.cmp-field:focus-within {
  background: var(--surface);
  border-color: var(--blue-line);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.cmp-prefix { font-size: 12px; color: var(--ink-3); flex: 0 0 auto; }

.cmp-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  padding: 7px 0;
  -webkit-appearance: none;
  appearance: none;
}
.cmp-input::placeholder { color: var(--ink-3); font-size: 12.5px; }

.cmp-select {
  cursor: pointer;
  padding-right: 14px;
  font-variant-numeric: tabular-nums;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2393a3b8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 9px 6px;
}
.cmp-select.is-empty { color: var(--ink-3); font-size: 12.5px; }
.cmp-select option { color: var(--ink); font-size: 15px; }

.cmp-date {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding-right: 2px;
}
.cmp-date.is-empty { color: var(--ink-3); }
.cmp-date::-webkit-calendar-picker-indicator {
  opacity: 0.3;
  cursor: pointer;
  margin-left: -2px;
}

/* 客户 / 平台 chips */
.cmp-chips { display: flex; align-items: center; gap: 6px; }
.cmp-tag {
  flex: 0 0 auto;
  width: 24px;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cmp-chips-scroll {
  flex: 1 1 auto;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.cmp-chips-scroll::-webkit-scrollbar { display: none; }

.client-chip {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  line-height: 1.35;
  background: var(--c-bg, #eef2f8);
  color: var(--c-fg, #7c8ba1);
  cursor: pointer;
  white-space: nowrap;
  max-width: 124px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: box-shadow 0.16s ease, transform 0.12s ease;
}
.client-chip:hover { filter: brightness(0.985); }
.client-chip:active { transform: scale(0.97); }
.client-chip.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c-fg, #7c8ba1); }

.chip-add {
  appearance: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed #cfdcec;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.chip-add:hover { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }

.cmp-new { display: block; }
.cmp-new[hidden] { display: none; }
.cmp-new .cmp-input {
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 14px;
}
.cmp-new .cmp-input:focus { background: #fff; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); }

.cmp-submit {
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  height: 36px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #7fa9f5 0%, #5b8def 55%, #3d6fd9 100%);
  cursor: pointer;
  box-shadow: 0 8px 16px -10px rgba(91, 141, 239, 0.9);
  transition: filter 0.16s ease, transform 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cmp-submit:hover { filter: brightness(1.05); }
.cmp-submit:active { transform: scale(0.96); }

/* ---------------- list view ---------------- */

.listview {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  min-height: calc(100dvh - 200px);
}

.filters {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.flt {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.flt b { font-size: 10.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flt:hover { border-color: var(--blue-line); color: var(--blue-deep); }
.flt.is-on { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); }
.flt.is-on b { color: var(--blue-deep); }

.list-body { flex: 1 1 auto; padding: 2px 8px 18px; }

.grp-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 6px;
  font-size: 11.5px;
  color: var(--ink-2);
  background: linear-gradient(#fff 72%, rgba(255, 255, 255, 0));
  backdrop-filter: blur(4px);
}
.grp-tag { color: var(--blue); font-size: 10px; letter-spacing: 0.04em; }

.li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  transition: background 0.14s ease;
}
.li:hover { background: #f7fbff; }
.li .status-btn { margin-top: 2px; }

.li-main {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.li-title {
  font-size: 13.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-price {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;
  font-size: 12.5px;
  color: var(--blue);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.li-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.li-deadline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.li-deadline.is-soon { color: #b45309; }
.li-deadline.is-over { color: var(--danger); }
.li-deadline.is-done { opacity: 0.55; }

.li.is-done .li-title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: #c9d6e6; }
.li.is-done .li-price { opacity: 0.55; }

/* ---------------- stats ---------------- */

.stats {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}

.st-bar { display: flex; align-items: center; gap: 12px; }
.st-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.st-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 16px;
  font-size: 12px;
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.st-toggle button.is-on {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: 0 1px 3px rgba(91, 141, 239, 0.16), inset 0 0 0 1px var(--blue-line);
}
.st-hint { font-size: 11px; color: var(--ink-3); }

.st-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.st-card {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-sm);
}
.st-card b {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.st-card span { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.st-card.is-money b { color: var(--blue); }

.st-block { padding: 14px 16px 16px; }
.st-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.st-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.st-head span { font-size: 11px; color: var(--ink-3); }

.chart { display: flex; align-items: flex-end; gap: 12px; height: 140px; padding: 0 4px; }
.ch-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 100%;
}
.ch-num { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-bar {
  width: 100%;
  max-width: 46px;
  background: linear-gradient(180deg, #a8c8ff 0%, #5b8def 100%);
  border-radius: 6px 6px 3px 3px;
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-x { font-size: 10.5px; color: var(--ink-3); }

.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.rk-line { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.rk-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.rk-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rk-money { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.rk-pct { color: var(--ink-3); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.rk-bar { height: 5px; background: var(--line-soft); border-radius: 3px; margin: 6px 0 4px; overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: 3px; }
.rk-sub { font-size: 10px; color: var(--ink-3); }
.rk-empty { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }

.orders { list-style: none; margin: 0; padding: 0; }
.or {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 78px 62px;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  border-radius: 8px;
}
.or:hover { background: #f7fbff; }
.or-date { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.or-title { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-tags { display: flex; gap: 4px; }
.or-money { font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.or-money.is-settled { color: var(--ink); font-weight: 600; }
.or-state {
  font-size: 10px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  text-align: center;
  white-space: nowrap;
}
.or-state.is-done { color: var(--teal); border-color: #b9e6dd; background: #ecfbf7; }
.or-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--ink-3); }

/* ---------------- drawer ---------------- */

.drawer-layer { position: fixed; inset: 0; z-index: 95; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 58, 82, 0.26);
  animation: fadeIn 0.2s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 384px;
  max-width: 94vw;
  background: var(--surface);
  border-left: 1px solid var(--card-line);
  box-shadow: -24px 0 60px -34px rgba(91, 141, 239, 0.5);
  padding: 18px 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slideIn {
  from { transform: translateX(28px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

.dw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dw-eyebrow { font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-3); }
.dw-close {
  appearance: none;
  border: 0;
  background: transparent;
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dw-close:hover { background: var(--paper-2); color: var(--ink); }

.dw-title {
  margin: 4px 0 14px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.dw-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dw-pill {
  appearance: none;
  border: 1px solid transparent;
  background: var(--c-bg, #eef2f8);
  color: var(--c-fg, #7c8ba1);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: box-shadow 0.16s ease, transform 0.12s ease;
}
.dw-pill:active { transform: scale(0.97); }
.dw-pill.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c-fg, #7c8ba1); font-weight: 600; }

.dw-rows { margin: 0; display: flex; flex-direction: column; }
.dw-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  min-height: 44px;
}
.dw-rows > div:last-child { border-bottom: 0; }
.dw-rows dt { font-size: 12px; color: var(--ink-3); flex: 0 0 auto; }
.dw-rows dd { margin: 0; font-size: 13px; color: var(--ink); text-align: right; min-width: 0; }
.dw-none { color: var(--ink-3); font-size: 12.5px; }
.dw-price { color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-settled { color: var(--teal); font-weight: 500; }
.dw-dim { color: var(--ink-3); font-size: 12px; }
.dw-deadline { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.dw-date {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-2);
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.dw-date:focus { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); background: #fff; }
.dw-time { cursor: pointer; padding-right: 4px; }

.dw-actions { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; }
.dw-edit, .dw-del {
  appearance: none;
  border-radius: 11px;
  padding: 10px 14px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dw-edit {
  flex: 1 1 auto;
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-weight: 600;
}
.dw-edit:hover { background: #dbe9ff; }
.dw-del {
  flex: 0 0 auto;
  border: 1px solid #f3d6d5;
  background: transparent;
  color: var(--danger);
}
.dw-del:hover { background: #fdf0ef; }

/* 编辑表单 */
.dw-form { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.dw-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dw-field > span { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.dw-field-pair { display: flex; gap: 8px; }
.dw-field-pair > .dw-field { flex: 1 1 0; min-width: 0; }
.dw-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  padding: 9px 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.dw-input:focus {
  border-color: var(--blue-line);
  box-shadow: 0 0 0 3px var(--blue-soft);
  background: var(--surface);
}
select.dw-input { cursor: pointer; }
.dw-form .dw-actions { padding-top: 8px; }
.dw-cancel {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  border-radius: 11px;
  padding: 10px 16px;
  font-size: 12.5px;
  cursor: pointer;
}
.dw-cancel:hover { background: var(--paper-2); }
.dw-save {
  appearance: none;
  flex: 1 1 auto;
  border: 1px solid var(--blue-deep);
  background: var(--blue);
  color: #fff;
  border-radius: 11px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.16s ease;
}
.dw-save:hover { filter: brightness(1.06); }
.dw-form.is-shake { animation: shake 0.32s ease; }

/* ---------------- status menu ---------------- */

.menu-layer { position: fixed; inset: 0; z-index: 90; }
.menu-backdrop { position: absolute; inset: 0; }
.menu-layer.is-sheet .menu-backdrop {
  background: rgba(42, 58, 82, 0.26);
  animation: fadeIn 0.18s ease both;
}

.status-menu {
  position: fixed;
  z-index: 91;
  min-width: 150px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(91, 141, 239, 0.08), 0 20px 44px -18px rgba(91, 141, 239, 0.4);
  animation: menuIn 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.sm-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.sm-item:hover { background: var(--paper-2); }
.sm-item.is-on { background: var(--blue-soft); color: var(--blue-deep); font-weight: 500; }
.sm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sm-check { margin-left: auto; display: inline-flex; color: var(--blue-deep); }

.sm-head { font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; padding: 6px 10px 8px; }

.status-menu.is-sheet {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  top: auto;
  padding: 8px;
  animation: sheetIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.status-menu.is-sheet .sm-item { padding: 12px; font-size: 14px; }

/* ---------------- empty state ---------------- */

.empty { padding: 26px 8px 30px; text-align: center; color: var(--ink-3); }
.empty svg { opacity: 0.6; margin-bottom: 10px; }
.empty p { margin: 0; font-size: 12.5px; line-height: 1.7; }
.empty p + p { font-size: 11.5px; margin-top: 3px; color: #b6c4d6; }

/* ---------------- footer / toast ---------------- */

.foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.foot-dot { width: 4px; height: 4px; border-radius: 50%; background: #c6d4e6; }
.foot-dot.is-live { background: var(--teal); box-shadow: 0 0 0 3px #ccfbf1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  background: #2a3a52;
  color: #fff;
  font-size: 12.5px;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
  max-width: calc(100vw - 40px);
  text-align: center;
  z-index: 60;
  box-shadow: 0 12px 30px -14px rgba(42, 58, 82, 0.8);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ================= 顶栏右侧 / 设置入口 ================= */

.topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }

.icon-btn {
  appearance: none;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.icon-btn:hover { color: var(--blue); border-color: var(--blue-line); }
.icon-btn:active { transform: scale(0.94); }

/* ================= 设置面板 ================= */

.set-layer {
  position: fixed; inset: 0; z-index: 80;
  display: flex; justify-content: flex-end;
}
.set-backdrop {
  position: absolute; inset: 0;
  background: rgba(16, 27, 44, 0.34);
  animation: fadeIn 0.2s ease both;
}
.settings {
  position: relative;
  width: min(430px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--card-line);
  box-shadow: -24px 0 60px -34px rgba(24, 44, 74, 0.5);
  animation: setIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes setIn { from { transform: translateX(26px); opacity: 0.55; } to { transform: none; opacity: 1; } }

.set-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.set-title h3 { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.set-title p { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-3); }
.set-close {
  appearance: none; flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
}
.set-close:hover { background: var(--line-soft); }

.set-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px 26px;
  display: flex; flex-direction: column; gap: 20px;
  scrollbar-width: thin;
}
.set-block h4 {
  margin: 0 0 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.set-block h4 span { font-size: 10.5px; font-weight: 400; color: var(--ink-3); }

.set-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.set-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--paper);
}
.set-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.set-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-empty { font-size: 11.5px; color: var(--ink-3); padding: 8px 2px; }

.set-color {
  appearance: none;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: var(--sw, #5b8def);
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.set-color:hover { transform: scale(1.08); box-shadow: 0 0 0 3px var(--blue-soft); }
.set-color:active { transform: scale(0.96); }
.set-tip { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }

.set-feebox { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--ink-2); }
.set-fee {
  width: 50px;
  padding: 3px 5px;
  font-size: 11.5px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.set-del {
  appearance: none; flex: 0 0 auto;
  border: 0; background: transparent;
  color: var(--ink-3);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  cursor: pointer;
}
.set-del:hover { color: var(--danger); background: rgba(224, 115, 107, 0.12); }

.set-add { display: flex; align-items: center; gap: 6px; }
.set-input {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}
.set-input:focus { outline: none; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); }
.set-submit {
  appearance: none; flex: 0 0 auto;
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.set-submit:hover { background: #dbe9ff; }

.set-theme {
  display: flex; gap: 4px;
  padding: 4px;
  width: max-content;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--paper);
}
.set-theme button {
  appearance: none; border: 0; background: transparent;
  padding: 6px 20px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.set-theme button.is-on {
  background: var(--surface);
  color: var(--blue-deep);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* 统计卡里的手续费小字 */
.st-card .st-sub { font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* ================= 调色板浮层 ================= */

.swatch-layer { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; }
.swatch-backdrop {
  position: absolute; inset: 0;
  background: rgba(30, 44, 66, 0.34);
  animation: fadeIn 0.16s ease both;
}
.swatch-pop {
  position: relative; z-index: 1;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(40, 70, 120, 0.5);
  padding: 16px;
  animation: popIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes popIn {
  from { transform: translateY(8px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.swatch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.swatch-head b { font-size: 13px; color: var(--ink); font-weight: 600; }
.swatch-close {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-3); width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
}
.swatch-close:hover { background: var(--paper-2); color: var(--ink); }

.swatch-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.swatch-cell {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 100%; aspect-ratio: 1; border-radius: 10px;
  background: var(--sw);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease;
}
.swatch-cell:hover { transform: translateY(-1px) scale(1.06); }
.swatch-cell.is-on::after {
  content: '';
  position: absolute; inset: 0; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw);
}

.swatch-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.swatch-custom {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
}
.swatch-custom:hover { background: var(--paper-2); }
.swatch-custom-dot {
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--sw, #5b8def);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
}
.swatch-custom input[type='color'] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; cursor: pointer;
}
.swatch-hint { font-size: 10.5px; color: var(--ink-3); }

/* 顶栏夜间按钮激活态：夜间模式下图标是太阳，用暖色点缀 */
.icon-btn.is-on { color: #e8a63c; }
.icon-btn.is-on:hover { color: #d99426; border-color: rgba(232, 166, 60, 0.45); }

/* ================= 夜间模式 ================= */

:root[data-theme='dark'] {
  --paper: #0d1626;
  --paper-2: #111e31;
  --surface: #16233a;

  --ink: #e6eefb;
  --ink-2: #a9bbd4;
  --ink-3: #7186a3;

  --line: #24344d;
  --line-soft: #1b2941;
  --card-line: #22324a;

  --blue: #6ea0ff;
  --blue-deep: #93b8ff;
  --blue-soft: #1b2b47;
  --blue-line: #2c4570;

  --cyan: #58b8e0;
  --teal: #4cc4a4;
  --danger: #ef8a82;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

:root[data-theme='dark'] body {
  background-color: var(--paper);
  background-image:
    radial-gradient(820px 420px at 4% -12%, #16294a 0%, rgba(22, 41, 74, 0) 62%),
    radial-gradient(760px 400px at 98% -8%, #241f45 0%, rgba(36, 31, 69, 0) 60%),
    radial-gradient(700px 380px at 50% 112%, #12302c 0%, rgba(18, 48, 44, 0) 66%);
}

:root[data-theme='dark'] .cell { border-color: #1f2f47; }
:root[data-theme='dark'] .cell:hover { background: #1a2941; }
:root[data-theme='dark'] .cell.is-today { background: #1b3152; border-color: #35598c; }
:root[data-theme='dark'] .cell.is-out .cell-num { color: #46586f; }
:root[data-theme='dark'] .cell.is-weekend .cell-num { color: #9db0c9; }
/* 放在 weekend 之后，避免被它的数字颜色覆盖 */
:root[data-theme='dark'] .cell.is-today .cell-num,
:root[data-theme='dark'] .cell.is-today.is-weekend .cell-num { color: #0b1a30; }
:root[data-theme='dark'] .cell-count { background: #1c2f4c; color: #9dc0ff; }

:root[data-theme='dark'] .wg-cell { background: #131f33; border-color: #1f2f47; }
:root[data-theme='dark'] .wg-cell:hover { background: #1a2941; }
:root[data-theme='dark'] .wg-cell.is-sel { background: #17263e; }
:root[data-theme='dark'] .wg-cell.is-today { background: #16263f; }
:root[data-theme='dark'] .wg-day:hover { background: #1a2941; }
:root[data-theme='dark'] .wg-day.is-today { background: #1b3152; }
:root[data-theme='dark'] .wg-day.is-today .wg-wd { color: #9dc0ff; }
:root[data-theme='dark'] .wg-day.is-today .wg-num { color: #0b1a30; }

:root[data-theme='dark'] .ev-time { background: rgba(6, 14, 26, 0.55); color: #d7e6ff; }
:root[data-theme='dark'] .yr-month { background: #131f33; }
:root[data-theme='dark'] .yr-month.is-current { background: #17263e; }
:root[data-theme='dark'] .yr-month:hover { background: #1a2941; }
:root[data-theme='dark'] .yr-day.is-out b { color: #46586f; }
:root[data-theme='dark'] .progress { background: #1e2c43; }
:root[data-theme='dark'] .remain.is-clear .remain-dot { box-shadow: 0 0 0 3px #14342e; }
:root[data-theme='dark'] .set-submit:hover { background: #24395c; }
:root[data-theme='dark'] .st-card.is-money b { color: var(--blue); }
:root[data-theme='dark'] .or-state.is-done { background: #14342e; color: #6fd3b8; }

/* 待办 / 统计列表在夜间：分组吸顶条与悬停不再用白底 */
:root[data-theme='dark'] .grp-head {
  background: linear-gradient(var(--surface) 72%, rgba(22, 35, 58, 0));
}
:root[data-theme='dark'] .li:hover,
:root[data-theme='dark'] .or:hover { background: #1a2941; }
:root[data-theme='dark'] .li.is-done .li-title,
:root[data-theme='dark'] .task.is-done .task-title {
  color: #8ba0bd;
  text-decoration-color: #3d5473;
}
:root[data-theme='dark'] .st-toggle button.is-on {
  background: #1b2b47;
  color: var(--blue-deep);
  box-shadow: inset 0 0 0 1px var(--blue-line);
}
:root[data-theme='dark'] .dw-date:focus,
:root[data-theme='dark'] .dw-input:focus,
:root[data-theme='dark'] .cmp-new .cmp-input:focus { background: #16233a; }
:root[data-theme='dark'] .dw-edit:hover { background: #24395c; }
:root[data-theme='dark'] .dw-del:hover { background: rgba(239, 138, 130, 0.14); }
:root[data-theme='dark'] .dw-cancel:hover { background: #1b2941; }
:root[data-theme='dark'] .set-color { border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }

/* ---------------- responsive ---------------- */

@media (max-width: 1080px) {
  .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-two { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100dvh; padding: 16px 12px 32px; gap: 12px; }
  .stage { display: flex; flex-direction: column; gap: 12px; }
  .stage.is-list,
  .stage.is-stats { overflow: visible; }
  .grid { grid-auto-rows: minmax(64px, auto); }
  .daypanel { overflow: visible; }
  .dp-scroll { overflow: visible; margin-right: 0; padding-right: 0; }
  .listview { min-height: 60vh; }
  .list-body { overflow: visible; }

  .yearview { padding: 8px; }
  .yr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(178px, auto);
    gap: 8px;
  }
  .yr-day b { font-size: 10px; }
  .yr-week i { font-size: 8.5px; }

  .weekgrid { padding: 8px; overflow-x: auto; overflow-y: hidden; }
  .wg-head, .wg-body { min-width: 680px; }
  .wg-head, .wg-row { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .wg-body { gap: 3px; }
  .wg-cell { padding: 5px; min-height: 78px; }
  .wg-label { font-size: 9.5px; padding: 6px 4px 0 0; }

  .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    max-height: 86vh;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px -34px rgba(91, 141, 239, 0.5);
    animation: sheetIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@media (max-width: 560px) {
  .app { padding: 14px 10px 26px; gap: 10px; }
  .brand-mark { width: 29px; height: 29px; }
  .brand-text strong { font-size: 15.5px; }
  .brand-text em { display: none; }
  .remain { padding: 5px 11px 5px 9px; gap: 5px; }
  .remain b { font-size: 15px; }
  .remain-label { font-size: 10.5px; }

  .toolbar { gap: 8px; }
  .segmented { order: 1; }
  .seg-btn { padding: 5px 11px; font-size: 12px; }
  .today-btn { order: 2; margin-left: auto; padding: 5px 11px; font-size: 11.5px; }
  .period { order: 3; flex: 1 0 100%; justify-content: center; margin: 2px 0 0; }
  .period-title { font-size: 16px; padding: 0 2px; flex: 0 1 auto; text-align: center; }
  .nav-btn { width: 26px; height: 26px; }

  .calendar { padding: 8px 6px 6px; border-radius: 16px; }
  .weekday-row { gap: 2px; }
  .grid { gap: 2px; grid-auto-rows: minmax(60px, auto); }
  .cell { border-radius: 9px; padding: 4px 3px; gap: 2px; }
  .cell-num { font-size: 11px; }
  .cell-count {
    top: 3px; right: 4px;
    font-size: 9px;
    color: var(--blue-deep);
    background: var(--blue-soft);
    border-radius: 999px;
    padding: 1px 4px;
  }
  .cell-events { gap: 2px; }
  .ev.is-one-line { padding: 1px 2px; gap: 0; }
  .ev.is-one-line .ev-title { font-size: 9px; letter-spacing: -0.02em; }
  .ev-time { font-size: 9.5px; }
  .ev-bar { width: 5px; height: 5px; border-radius: 50%; }

  .daypanel { padding: 14px 12px 12px; border-radius: 16px; }
  .dp-num { font-size: 24px; }

  .listview { border-radius: 16px; }
  .filters { padding: 10px; gap: 5px; }
  .flt { padding: 5px 10px; font-size: 11.5px; }
  .list-body { padding: 0 4px 14px; }
  .li { padding: 9px 8px; }
  .li-title { font-size: 13px; }

  .stats { gap: 10px; }
  .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-card { padding: 12px 14px; }
  .st-card b { font-size: 20px; }
  .st-block { padding: 12px 12px 14px; }
  .chart { height: 120px; gap: 8px; }
  .or { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; }
  .or-tags { display: none; }
  .or-state { display: none; }

  /* 手机周历：7 天一次看全，不再横向滑动 */
  .weekgrid { overflow: visible; padding: 6px; }
  .wg-head, .wg-body { min-width: 0; }
  .wg-head, .wg-row { grid-template-columns: 18px repeat(7, minmax(0, 1fr)); gap: 2px; }
  .wg-body { grid-template-rows: repeat(3, minmax(56px, auto)); gap: 2px; }
  .wg-num { font-size: 13px; }
  .wg-wd { font-size: 8.5px; letter-spacing: 0; }
  .wg-day { padding: 3px 0 4px; border-radius: 8px; }
  .wg-label { font-size: 8.5px; padding: 4px 1px 0 0; letter-spacing: 0; }
  .wg-cell { padding: 2px; border-radius: 7px; gap: 1px; overflow: visible; }
  .wg-cell .ev { padding: 1px 2px; border-radius: 4px; }
  .wg-cell .ev-title {
    font-size: 8.5px;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* 设置面板：手机从底部弹出 */
  .set-layer { align-items: flex-end; }
  .settings {
    width: 100%;
    height: min(90vh, 100%);
    border-left: 0;
    border-radius: 18px 18px 0 0;
    animation: sheetIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .set-head { padding: 14px 16px 10px; }
  .set-body { padding: 12px 16px 24px; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ================= 分享 · 只读 · 权限 ================= */

/* hidden 属性优先于组件自身的 display */
[hidden] { display: none !important; }

.ro-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 22px 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff6e8;
  border: 1px solid #f2ddb8;
  color: #8a5a12;
  font-size: 12.5px;
  line-height: 1.5;
}
.ro-bar.is-editor {
  background: var(--blue-soft);
  border-color: var(--blue-line);
  color: var(--blue-deep);
}
.ro-bar b { font-weight: 600; }
.ro-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8a63c; flex: 0 0 auto; }
.ro-bar.is-editor .ro-dot { background: var(--blue); }
.ro-apply {
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}
.ro-apply:hover { background: rgba(232, 166, 60, 0.12); }

/* 只读替代条 */
.cmp-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-3);
}
.cmp-readonly-btn {
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  cursor: pointer;
}
.cmp-readonly-btn:hover { background: #dbe9ff; }

/* 只读时的静态元素 */
.status-btn.is-static { cursor: default; }
.status-btn.is-static:hover { transform: none; box-shadow: none; }
.set-color.is-flat { pointer-events: none; }
.set-feetext { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dw-pill.is-static { cursor: default; }
.dw-apply {
  flex: 1 1 auto;
  appearance: none;
  border: 1px solid var(--blue-deep);
  background: var(--blue);
  color: #fff;
  border-radius: 11px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* 名字输入卡片 */
.gate-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 30, 48, 0.5);
  animation: fadeIn 0.18s ease both;
}
.gate-card {
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 30px 70px -30px rgba(20, 40, 80, 0.6);
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gate-card h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.4;
}
.gate-card p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.gate-card b { color: var(--ink); }
.gate-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper-2);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
}
.gate-input:focus { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); background: var(--surface); }
.gate-submit {
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--blue-deep);
  background: var(--blue);
  color: #fff;
  border-radius: 11px;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gate-submit:disabled { opacity: 0.65; cursor: default; }
.gate-err { color: var(--danger); font-size: 11.5px; margin: 10px 0 0; }

/* 分享面板 */
.share-linkbox { display: flex; gap: 6px; align-items: stretch; }
.share-link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: inherit;
}
.share-copy {
  flex: 0 0 auto;
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.share-copy:hover { background: #dbe9ff; }
.share-tip { font-size: 11px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.65; }

/* 自定义链接后缀 */
.share-edit { margin-top: 12px; }
.share-edit-label {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.share-edit-label em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-4, var(--ink-3));
  opacity: 0.75;
  margin-left: 4px;
}
.share-edit .set-input { font-size: 12.5px; letter-spacing: 0.02em; }
.share-edit .set-submit:disabled { opacity: 0.6; cursor: default; }
.share-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-deep);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  flex: 0 0 auto;
}
.share-ok {
  flex: 0 0 auto;
  border: 1px solid var(--blue-deep);
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
}
.share-stop {
  width: 100%;
  border: 1px solid #f3d6d5;
  background: transparent;
  color: var(--danger);
  border-radius: 10px;
  padding: 9px;
  font-size: 12px;
  cursor: pointer;
}
.share-stop:hover { background: #fdf0ef; }
.set-name em { font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-left: 6px; }

/* 夜间适配 */
:root[data-theme='dark'] .ro-bar { background: #2a2114; border-color: #4a3a1d; color: #e8b661; }
:root[data-theme='dark'] .ro-bar.is-editor { background: #1b2b47; border-color: #2c4570; color: var(--blue-deep); }
:root[data-theme='dark'] .ro-apply:hover { background: rgba(232, 182, 97, 0.16); }
:root[data-theme='dark'] .cmp-readonly-btn:hover,
:root[data-theme='dark'] .share-copy:hover { background: #24395c; }
:root[data-theme='dark'] .share-stop { border-color: rgba(239, 138, 130, 0.3); background: transparent; }
:root[data-theme='dark'] .share-stop:hover { background: rgba(239, 138, 130, 0.14); }

@media (max-width: 860px) {
  .ro-bar { margin: 0 12px 6px; font-size: 12px; padding: 7px 10px; }
  .ro-apply { padding: 4px 9px; font-size: 11px; }
  .gate-card { padding: 20px 18px; }
}

.ro-pending {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* 设备同步码 */
.sync-row { display: flex; align-items: center; gap: 8px; }
.sync-code {
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
}
.sync-copy {
  flex: 0 0 auto;
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
}
.sync-copy:hover { background: #dbe9ff; }
:root[data-theme='dark'] .sync-copy:hover { background: #24395c; }

/* ============================================================
   v2 皮肤 —— 卡片式蓝白（2026-10-31）
   顶部栏/工具栏卡片化，卡片更大更圆，任务色块更鲜艳
   ============================================================ */

:root {
  --paper: #f2f6fd;
  --paper-2: #e9f0fb;
  --surface: #ffffff;

  --ink: #17233a;
  --ink-2: #5b6b85;
  --ink-3: #94a3b8;

  --line: #e6edf7;
  --line-soft: #f2f6fd;
  --card-line: #eaf0f9;

  --blue: #4c7df0;
  --blue-deep: #2f5fd0;
  --blue-soft: #eaf1ff;
  --blue-line: #d3e2ff;

  --cyan: #2fa8d8;
  --teal: #34b18c;
  --danger: #e2695f;

  --radius-lg: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(23, 35, 58, 0.05);
  --shadow: 0 2px 4px rgba(23, 35, 58, 0.035), 0 18px 40px -30px rgba(23, 35, 58, 0.38);

  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 560px at 10% -12%, #dbe8ff 0%, rgba(219, 232, 255, 0) 62%),
    radial-gradient(940px 500px at 94% -8%, #e7e1ff 0%, rgba(231, 225, 255) 0%, rgba(231, 225, 255, 0) 60%),
    radial-gradient(900px 520px at 50% 112%, #ddf5ec 0%, rgba(221, 245, 236, 0) 64%);
}

.app { padding: 14px 18px 12px; gap: 12px; }

/* 顶栏 / 工具栏卡片化 */
.topbar {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 10px 14px;
}

.toolbar {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 8px 14px;
}

.segmented { background: #f2f6fd; border-color: transparent; }
.seg-btn { padding: 7px 17px; font-weight: 600; }
.seg-btn.is-active {
  background: linear-gradient(135deg, #4c7df0, #6f7bf2);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(76, 125, 240, 0.95);
}
.seg-btn.is-active { box-shadow: 0 8px 18px -10px rgba(76, 125, 240, 0.95), inset 0 0 0 0 transparent; }

.period-title { font-size: 18px; font-weight: 700; }
.today-btn { font-weight: 600; }
.today-btn:hover { background: var(--blue-soft); }

.card {
  border-radius: var(--radius-lg);
  border-color: var(--card-line);
  box-shadow: var(--shadow);
}

.progress { height: 4px; background: #eef3fb; }

.icon-btn { border-radius: 11px; }

/* ---------------- 周视图：时间轴 + 右侧栏 ---------------- */

.stage.is-week { grid-template-columns: minmax(0, 1fr) 332px; gap: 14px; }

.wk-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.wk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.wk-top-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wk-top-left h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.wk-range { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.wk-legend { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.wk-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }
.wk-legend i { width: 8px; height: 8px; border-radius: 3px; display: block; }

.wk-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.wk-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.wk-scroll::-webkit-scrollbar-thumb { background: #dbe6f5; border-radius: 4px; }

.wk-inner { display: flex; align-items: stretch; min-width: 700px; }

.wk-gutter { flex: 0 0 60px; position: sticky; left: 0; z-index: 4; background: var(--surface); }
.wk-gutter-head { height: 58px; }
.wk-hour { position: relative; }
.wk-hour span {
  position: absolute;
  top: 0;
  right: 9px;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  padding: 0 2px;
}

.wk-daywrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-soft);
}

.wk-dayhead {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  cursor: pointer;
}
.wk-wd { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em; }
.wk-num {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 0.18s ease, color 0.18s ease;
}
.wk-count {
  position: absolute;
  top: 6px;
  right: 7px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #eef3fb;
  color: var(--ink-3);
  font-size: 9.5px;
  line-height: 15px;
  text-align: center;
}
.wk-count:empty { display: none; }

.wk-dayhead.is-today .wk-wd { color: var(--blue-deep); }
.wk-dayhead.is-today .wk-num {
  background: linear-gradient(135deg, #4c7df0, #7b6cf6);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(76, 125, 240, 0.95);
}
.wk-dayhead.is-sel { background: #f4f8ff; }

.wk-col { position: relative; flex: 1 1 auto; cursor: pointer; background: var(--surface); }
.wk-col.is-today { background: #f7faff; }
.wk-col.is-sel { background: #f1f6ff; }

.wk-lines { position: absolute; inset: 0; pointer-events: none; }
.wk-line { border-top: 1px dashed #f0f4fb; }

.wk-ev {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px 5px 10px;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-fg);
  box-shadow: inset 3px 0 0 var(--sc), 0 6px 14px -10px rgba(23, 35, 58, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wk-ev:hover {
  transform: translateY(-1px);
  box-shadow: inset 3px 0 0 var(--sc), 0 12px 22px -14px rgba(23, 35, 58, 0.6);
}
.wk-ev.is-done { opacity: 0.7; }
.wk-ev.is-done .wk-ev-title { text-decoration: line-through; }
.wk-ev-time { font-size: 10px; font-weight: 700; opacity: 0.85; letter-spacing: 0.02em; }
.wk-ev-title { font-size: 12px; font-weight: 700; line-height: 1.25; }
.wk-ev-client { font-size: 10px; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-untimed {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-top: 1px dashed var(--line-soft);
  flex: 0 0 auto;
}
.wk-untimed-chip {
  border: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 7px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧栏 */
.wk-rail { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.wk-rail::-webkit-scrollbar { width: 6px; }
.wk-rail::-webkit-scrollbar-thumb { background: #dfe8f6; border-radius: 3px; }

.mini-card { padding: 12px 12px 10px; flex: 0 0 auto; }
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mc-title { font-size: 13px; font-weight: 700; }
.mc-nav { display: inline-flex; gap: 2px; }
.mc-nav button {
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: var(--ink-2); font-size: 15px; line-height: 1;
  border-radius: 7px; cursor: pointer;
}
.mc-nav button:hover { background: var(--blue-soft); color: var(--blue-deep); }
.mc-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 9.5px; color: var(--ink-3); margin-bottom: 2px; }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mc-day {
  position: relative;
  height: 33px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease;
}
.mc-day:hover { background: #f3f7ff; }
.mc-day.is-out { color: #c8d3e3; }
.mc-day.is-sel { background: #e9f1ff; }
.mc-day.is-today b {
  background: linear-gradient(135deg, #4c7df0, #7b6cf6);
  color: #fff;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 11px;
}
.mc-dots { display: flex; gap: 2px; margin-top: 1px; height: 3px; }
.mc-dots em { width: 3px; height: 3px; border-radius: 50%; display: block; }

.done-card, .add-card { padding: 12px 14px 14px; flex: 0 0 auto; }
.add-card { flex: 1 1 auto; min-height: 0; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.rail-head b { font-size: 13px; font-weight: 700; }
.rail-head span { font-size: 10.5px; color: var(--ink-3); }

.done-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow: auto; }
.done-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #f5faf8;
  cursor: pointer;
}
.done-row:hover { background: #eef8f4; }
.done-tick {
  width: 16px; height: 16px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid; place-items: center;
}
.done-tick svg { width: 10px; height: 10px; }
.done-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: line-through;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.done-time { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.done-empty { margin: 0; padding: 10px 2px 6px; font-size: 11.5px; color: var(--ink-3); }

.add-card .composer { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* ---------------- 导出图片 ---------------- */

.exp-layer { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 22px; }
.exp-backdrop { position: absolute; inset: 0; background: rgba(15, 26, 45, 0.44); backdrop-filter: blur(3px); }
.exp-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 34px 80px -34px rgba(14, 28, 56, 0.6);
  overflow: hidden;
}
.exp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.exp-head h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; }
.exp-head p { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.exp-close {
  border: 0; background: transparent; color: var(--ink-2);
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
}
.exp-close:hover { background: #f2f6fd; }

.exp-tabs {
  display: inline-flex; gap: 3px; padding: 4px; margin: 4px 20px 10px;
  background: #f2f6fd; border-radius: 999px; align-self: flex-start;
}
.exp-tab {
  border: 0; background: transparent; padding: 6px 15px;
  border-radius: 999px; font-size: 12px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.exp-tab:hover { color: var(--ink); }
.exp-tab.is-on { background: #fff; color: var(--blue-deep); font-weight: 700; box-shadow: 0 1px 3px rgba(76, 125, 240, 0.22); }

.exp-range { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px; }
.exp-dash { font-size: 11.5px; color: var(--ink-3); }
.exp-date {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 10px; font-size: 12px; background: #fff; color: var(--ink);
}
.exp-meta { margin: 0 20px 10px; font-size: 11.5px; color: var(--ink-3); }

.exp-preview { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 20px 8px; background: #f7f9fd; }
.exp-preview canvas { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 30px -20px rgba(22, 35, 58, 0.55); }

.exp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 16px; }
.exp-tip { font-size: 11px; color: var(--ink-3); }
.exp-download {
  border: 0; padding: 9px 22px; border-radius: 999px;
  background: linear-gradient(135deg, #4c7df0, #7b6cf6);
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(76, 125, 240, 0.95);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.exp-download:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(76, 125, 240, 1); }
.exp-download:active { transform: scale(0.98); }

/* ---------------- 夜间模式补丁 ---------------- */

:root[data-theme='dark'] .topbar,
:root[data-theme='dark'] .toolbar { background: #101c2e; border-color: #1c2c44; }
:root[data-theme='dark'] .segmented { background: #16233a; }
:root[data-theme='dark'] .seg-btn.is-active { background: linear-gradient(135deg, #3f6fe0, #6a5cf0); color: #fff; }
:root[data-theme='dark'] .wk-dayhead,
:root[data-theme='dark'] .wk-gutter,
:root[data-theme='dark'] .wk-col { background: #101c2e; }
:root[data-theme='dark'] .wk-col.is-today { background: #14243a; }
:root[data-theme='dark'] .wk-col.is-sel { background: #17273f; }
:root[data-theme='dark'] .wk-dayhead.is-sel { background: #17273f; }
:root[data-theme='dark'] .wk-line { border-top-color: #1a2a42; }
:root[data-theme='dark'] .wk-hour span { background: #101c2e; color: #7d90aa; }
:root[data-theme='dark'] .wk-count { background: #1b2b44; color: #8fa2bc; }
:root[data-theme='dark'] .wk-ev { box-shadow: inset 3px 0 0 var(--sc), 0 6px 14px -10px rgba(0, 0, 0, 0.8); }
:root[data-theme='dark'] .mini-card,
:root[data-theme='dark'] .done-card,
:root[data-theme='dark'] .add-card { background: #101c2e; }
:root[data-theme='dark'] .mc-day { color: #cfe0f7; }
:root[data-theme='dark'] .mc-day.is-out { color: #4d6180; }
:root[data-theme='dark'] .mc-day.is-sel { background: #1d3050; }
:root[data-theme='dark'] .mc-day:hover { background: #18273e; }
:root[data-theme='dark'] .done-row { background: #14243a; }
:root[data-theme='dark'] .exp-panel { background: #101c2e; }
:root[data-theme='dark'] .exp-tabs { background: #16233a; }
:root[data-theme='dark'] .exp-tab.is-on { background: #1d3050; color: #9dc0ff; }
:root[data-theme='dark'] .exp-preview { background: #0c1626; }
:root[data-theme='dark'] .exp-date { background: #16233a; border-color: #22334d; color: #dbe8fa; }

/* ---------------- 窄屏 ---------------- */

@media (max-width: 1100px) {
  .stage.is-week { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
  .app { padding: 10px 10px 8px; gap: 9px; }
  .topbar, .toolbar { padding: 8px 11px; border-radius: 16px; }
  .stage.is-week { display: flex; flex-direction: column; overflow-y: auto; gap: 10px; }
  .wk-card { flex: 0 0 auto; min-height: 520px; }
  .wk-rail { flex: 0 0 auto; overflow: visible; }
  .wk-legend { display: none; }
  .wk-inner { min-width: 660px; }
  .exp-layer { padding: 12px; }
  .exp-panel { max-height: 94vh; }
}

/* ---------------- v2 修补：月历不被裁切 / 右栏表单完整 ---------------- */

.calendar { overflow-y: auto; }
.calendar::-webkit-scrollbar { width: 6px; }
.calendar::-webkit-scrollbar-thumb { background: #dfe8f6; border-radius: 3px; }
.grid { grid-auto-rows: minmax(86px, 1fr); }

.add-card { flex: 0 0 auto; }
.add-card .composer { margin-top: 2px; padding-top: 8px; gap: 6px; }
.add-card .cmp-field { padding: 5px 9px; }
.add-card .cmp-input { font-size: 12.5px; }
.add-card .cmp-submit { padding: 7px 14px; font-size: 12.5px; }
.add-card .client-chips { gap: 5px; }

@media (max-width: 900px) {
  .grid { grid-auto-rows: minmax(72px, 1fr); }
}

/* 右栏更紧凑，保证「添加任务」在小屏也能看到按钮 */
.mini-card { padding: 10px 10px 8px; }
.mc-day { height: 28px; }
.mc-head { margin-bottom: 4px; }
.done-card, .add-card { padding: 10px 12px 12px; }
.rail-head { margin-bottom: 7px; }
.done-list { max-height: 140px; }
.add-card .composer { gap: 5px; }
.wk-hour:first-child span { transform: translateY(2px); }

/* ============================================================
   v3 皮肤 —— 暖白 + 柔和色块 + 左侧导航（参考「达·到」风格）
   ============================================================ */

:root {
  --paper: #f7f7f4;
  --paper-2: #f1f0ea;
  --surface: #ffffff;

  --ink: #1b1b18;
  --ink-2: #6b6b64;
  --ink-3: #a6a69d;

  --line: #eceae4;
  --line-soft: #f4f3ee;
  --card-line: #eeede6;

  --blue: #24241f;
  --blue-deep: #111110;
  --blue-soft: #f2f1ec;
  --blue-line: #e4e2da;

  --cyan: #3f8fa8;
  --teal: #3f9e7c;
  --danger: #cf6a5f;

  --radius-lg: 18px;
  --radius-sm: 11px;
  --shadow-sm: 0 1px 1px rgba(28, 28, 22, 0.03);
  --shadow: 0 1px 2px rgba(28, 28, 22, 0.035);
}

body {
  background-color: var(--paper);
  background-image: none;
}

/* ---------------- 布局：左侧导航 + 右侧主区 ---------------- */

.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

.sidebar {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px 14px;
  border-right: 1px solid var(--line);
  background: transparent;
  min-height: 0;
}

.side-spacer { flex: 1 1 auto; min-height: 8px; }

.brand { padding: 0 4px 2px; }
.brand-mark { width: 30px; height: 30px; filter: none; box-shadow: none; }
.brand-text strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.brand-text em { font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.side-nav .seg-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  box-shadow: none;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.side-nav .seg-btn svg { flex: 0 0 auto; opacity: 0.75; }
.side-nav .seg-btn:hover { background: var(--paper-2); color: var(--ink); }
.side-nav .seg-btn.is-active {
  background: #ece7fa;
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
.side-nav .seg-btn.is-active svg { opacity: 1; }

.sidebar .remain {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  box-shadow: none;
}
.sidebar .remain b { font-size: 15px; font-weight: 700; }
.sidebar .remain-label { font-size: 11px; color: var(--ink-3); }
.sidebar .remain-dot { width: 5px; height: 5px; box-shadow: none; }

.side-actions { display: flex; gap: 4px; }
.icon-btn {
  width: 30px; height: 30px;
  border-radius: 9px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.icon-btn.is-on { background: var(--paper-2); color: var(--ink); }

.main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 10px;
  min-height: 0;
}

/* 顶部：期间导航 */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.period { margin-right: 0; gap: 2px; }
.period-title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; padding: 0 4px; }
.period-title:hover { background: var(--paper-2); color: var(--ink); }
.nav-btn { width: 26px; height: 26px; border-radius: 8px; color: var(--ink-3); }
.nav-btn:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }

.today-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  box-shadow: none;
}
.today-btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--line); }

.progress { height: 3px; background: #ebe9e3; border-radius: 999px; }
.progress i { background: #2b2b26; }

.foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--ink-3);
  padding: 2px 2px 0;
}
.foot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.foot-dot.is-live { background: var(--teal); }

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

.card {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 28, 22, 0.03);
}

/* ---------------- 周视图 ---------------- */

.stage.is-week { grid-template-columns: minmax(0, 1fr) 322px; gap: 14px; }

.wk-card { border-radius: 18px; }
.wk-top { padding: 14px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.wk-top-left { gap: 8px; }
.wk-top-left h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.wk-range { font-size: 11px; color: var(--ink-3); }
.wk-legend span { font-size: 10.5px; color: var(--ink-3); }
.wk-legend i { width: 7px; height: 7px; border-radius: 50%; }

.wk-dayhead { border-bottom: 1px solid var(--line-soft); }
.wk-wd { font-size: 10px; color: var(--ink-3); }
.wk-num { font-size: 16px; font-weight: 700; }
.wk-dayhead.is-today .wk-num {
  background: #1f1f1b;
  color: #fff;
  box-shadow: none;
}
.wk-dayhead.is-today .wk-wd { color: var(--ink); }
.wk-dayhead.is-sel { background: #faf9f5; }
.wk-col.is-today { background: #fbfaf6; }
.wk-col.is-sel { background: #faf9f4; }
.wk-count { background: var(--paper-2); color: var(--ink-3); }

.wk-line { border-top: 1px solid #f5f4ef; }
.wk-hour span { background: var(--surface); color: var(--ink-3); font-size: 10px; }

/* 每天完成度细条 */
.wk-prog {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: #efeee8;
  overflow: hidden;
}
.wk-prog i { display: block; height: 100%; background: #2b2b26; border-radius: 999px; }

.wk-ev {
  border-radius: 9px;
  padding: 5px 8px 5px 10px;
  box-shadow: inset 3px 0 0 var(--sc);
  border: 1px solid rgba(28, 28, 22, 0.045);
}
.wk-ev:hover { box-shadow: inset 3px 0 0 var(--sc), 0 4px 12px -8px rgba(28, 28, 22, 0.5); }
.wk-ev-time { font-size: 9.5px; font-weight: 700; opacity: 0.7; }
.wk-ev-title { font-size: 11.5px; font-weight: 600; }
.wk-ev-client { font-size: 9.5px; opacity: 0.62; }

.wk-untimed-chip { border-radius: 6px; font-weight: 500; }

/* 右栏 */
.mini-card { padding: 12px 12px 10px; border-radius: 18px; }
.mc-title { font-size: 12.5px; font-weight: 600; }
.mc-week { font-size: 9px; color: var(--ink-3); }
.mc-day { height: 27px; font-size: 11px; border-radius: 8px; }
.mc-day.is-sel { background: #f1efea; }
.mc-day.is-today b { background: #1f1f1b; color: #fff; box-shadow: none; }
.mc-day:hover { background: #f6f5f0; }
.mc-dots em { width: 3px; height: 3px; opacity: 0.75; }

.done-card, .add-card { border-radius: 18px; padding: 12px 14px 14px; }
.rail-head b { font-size: 12.5px; font-weight: 600; }
.rail-head span { font-size: 10px; color: var(--ink-3); }
.done-row { background: #f7f6f1; border-radius: 9px; }
.done-row:hover { background: #f1f0ea; }
.done-tick { background: #dff2e9; color: #2f7d60; }
.done-name { color: var(--ink-2); font-size: 11.5px; }
.done-empty { font-size: 11px; color: var(--ink-3); }

.add-card .cmp-field { background: #f8f7f3; border-radius: 9px; }
.add-card .cmp-submit {
  background: #1f1f1b;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
}
.add-card .cmp-submit:hover { background: #000; }
.add-card .client-chip { background: #f6f5f0; border-color: transparent; color: var(--ink-2); }
.add-card .client-chip.is-on { background: #ece7fa; color: var(--ink); border-color: #ded5f5; }

/* ---------------- 月历 ---------------- */

.calendar { padding: 12px 14px 10px; }
.weekday-row span { font-size: 10.5px; color: var(--ink-3); font-weight: 500; }
.cell { border-color: transparent; border-radius: 12px; }
.cell:hover { background: #faf9f5; }
.cell.is-today { background: #fbfaf5; }
.cell-num { font-weight: 600; }
.ev { border-radius: 7px; border: 1px solid rgba(28, 28, 22, 0.04); }

/* ---------------- 导出面板 ---------------- */

.exp-panel { border-radius: 20px; }
.exp-download { background: #1f1f1b; box-shadow: none; }
.exp-download:hover { background: #000; box-shadow: none; }
.exp-tabs { background: #f2f1ec; }
.exp-tab.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(28, 28, 22, 0.08); }
.exp-preview { background: #f7f6f2; }
.exp-close:hover { background: #f2f1ec; }
.exp-date { border-color: var(--line); }

/* ---------------- 设置 / 分享面板沿用暖色 ---------------- */
.settings { background: var(--surface); }
.set-head h3 { font-weight: 700; }
.set-submit { background: #1f1f1b; color: #fff; }

/* ---------------- 夜间模式 ---------------- */

:root[data-theme='dark'] {
  --paper: #131311;
  --paper-2: #1d1d19;
  --surface: #191917;
  --ink: #ecebe4;
  --ink-2: #a3a29a;
  --ink-3: #6e6d66;
  --line: #2a2a25;
  --line-soft: #232320;
  --card-line: #2a2a25;
}
:root[data-theme='dark'] body { background-image: none; }
:root[data-theme='dark'] .side-nav .seg-btn.is-active { background: #2a2740; color: #f0eefb; }
:root[data-theme='dark'] .sidebar .remain { background: #191917; }
:root[data-theme='dark'] .today-btn { background: #191917; }
:root[data-theme='dark'] .wk-dayhead.is-today .wk-num { background: #f0efe8; color: #161613; }
:root[data-theme='dark'] .mc-day.is-today b { background: #f0efe8; color: #161613; }
:root[data-theme='dark'] .wk-line { border-top-color: #242420; }
:root[data-theme='dark'] .wk-prog { background: #26261f; }
:root[data-theme='dark'] .wk-prog i { background: #e8e6dd; }
:root[data-theme='dark'] .done-row { background: #1f1f1b; }
:root[data-theme='dark'] .add-card .cmp-field { background: #1f1f1b; }
:root[data-theme='dark'] .add-card .cmp-submit { background: #f0efe8; color: #161613; }
:root[data-theme='dark'] .exp-download { background: #f0efe8; color: #161613; }
:root[data-theme='dark'] .cell:hover { background: #1d1d19; }
:root[data-theme='dark'] .exp-preview { background: #141412; }

/* ---------------- 窄屏：侧栏变顶栏 ---------------- */

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand { order: 1; }
  .side-actions { order: 2; margin-left: auto; }
  .sidebar .remain { order: 3; }
  .side-spacer { display: none; }
  .side-nav {
    order: 4;
    flex: 1 0 100%;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
  }
  .side-nav .seg-btn { width: auto; padding: 6px 12px; border-radius: 999px; font-size: 12px; }
  .side-nav .seg-btn svg { display: none; }
  .main { padding: 10px 12px 8px; gap: 8px; }
  .period-title { font-size: 18px; }
  .stage.is-week { display: flex; flex-direction: column; overflow-y: auto; gap: 10px; }
}

/* 顶栏在窄屏下的顺序修正（旧版 toolbar 的 order 规则会串味） */
.today-btn { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 900px) {
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar .period { order: 1; flex: 1 1 auto; min-width: 0; justify-content: flex-start; margin: 0; }
  .topbar .today-btn { order: 2; margin-left: 0; }
  .side-nav .seg-btn { order: 0; }
}

/* 选中态改成柔和描边，别用纯黑硬边 */
.cell.is-selected {
  background: #faf8ff;
  border-color: #ddd5f3;
  box-shadow: inset 0 0 0 1px #ddd5f3;
}
.cell.is-selected .cell-num { color: #4a3a78; }
.cell.is-today {
  background: #fbfaf6;
  border-color: #e8e5dc;
}
.cell.is-today .cell-num {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: #1f1f1b;
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
}
.cell.is-today.is-selected {
  border-color: #d9d0f0;
  box-shadow: inset 0 0 0 1px #d9d0f0;
  background: #faf8ff;
}

/* ============================================================
   v4 —— 回到顶部布局 + logo 蓝渐变主色 + 节假日 + 色块自选
   ============================================================ */

:root {
  --blue: #4c7df0;
  --blue-deep: #2f5fd0;
  --blue-soft: #eef3fe;
  --blue-line: #d8e4fb;
  --grad: linear-gradient(135deg, #6f9df8 0%, #3d6fd9 100%);
  --grad-soft: linear-gradient(135deg, #eaf1ff 0%, #dfe9ff 100%);
}

body { background-color: #f4f5f8; background-image: none; }

.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 10px;
  margin: 0 auto;
}

/* 顶栏：品牌左、按钮右，不套卡片 */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.topbar-right { display: flex; align-items: center; gap: 8px; }

.brand-mark { filter: drop-shadow(0 6px 12px rgba(61, 111, 217, 0.35)); }
.brand-text strong { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.topbar .remain {
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  box-shadow: 0 1px 2px rgba(23, 35, 58, 0.04);
  margin-right: 4px;
}
.topbar .remain b { font-size: 16px; font-weight: 700; }
.topbar .remain-dot { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.topbar .remain.is-clear .remain-dot { background: var(--teal); box-shadow: 0 0 0 3px #d9f2ea; }
.topbar .remain.is-clear b { color: var(--teal); }

.icon-btn {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #5b6b85;
}
.icon-btn:hover { background: #fff; border-color: #eceff5; color: var(--blue-deep); }
.icon-btn.is-on { background: #fff; border-color: #eceff5; color: var(--blue-deep); }

/* 工具栏：白色卡片，蓝色渐变选中胶囊 */
.toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(23, 35, 58, 0.04);
  padding: 8px 14px;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: #f3f5fa;
  border: 0;
  border-radius: 999px;
}
.seg-btn {
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7b93;
  background: transparent;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 16px -9px rgba(61, 111, 217, 0.95);
}

.period { margin-right: auto; margin-left: 4px; }
.period-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.period-title:hover { background: var(--blue-soft); color: var(--blue-deep); }
.nav-btn:hover { color: var(--blue-deep); }

.today-btn {
  background: #fff;
  border: 1px solid #e6eaf2;
  color: #5b6b85;
  font-weight: 600;
}
.today-btn:hover { color: var(--blue-deep); border-color: var(--blue-line); background: var(--blue-soft); }

.progress { height: 4px; background: #e9edf5; }
.progress i { background: var(--grad); }

.card { border-color: #eceff5; box-shadow: 0 1px 2px rgba(23, 35, 58, 0.04); }

.foot { justify-content: center; }

/* 周视图 */
.stage.is-week { grid-template-columns: minmax(0, 1fr) 332px; gap: 14px; }
.wk-dayhead.is-today .wk-num { background: var(--grad); color: #fff; box-shadow: 0 8px 16px -8px rgba(61, 111, 217, 0.95); }
.wk-dayhead.is-today .wk-wd { color: var(--blue-deep); }
.mc-day.is-today b { background: var(--grad); color: #fff; }
.mc-day.is-sel { background: var(--blue-soft); }
.wk-prog i { background: var(--grad); }
.add-card .cmp-submit { background: var(--grad); color: #fff; }
.add-card .cmp-submit:hover { filter: brightness(1.04); }
.add-card .cmp-field { background: #f5f7fb; }
.add-card .client-chip.is-on { background: var(--blue-soft); color: var(--blue-deep); border-color: var(--blue-line); }

/* 月历：星期标题更清楚 */
.weekday-row span {
  font-size: 12px;
  font-weight: 600;
  color: #5b6b85;
  letter-spacing: 0.02em;
}
.weekday-row span.is-weekend { color: #8b9ab3; }

/* 今天 / 选中 */
.cell.is-today { background: #f7faff; border-color: #dfe8fb; }
.cell.is-today .cell-num { background: var(--grad); color: #fff; }
.cell.is-selected { background: #f4f8ff; border-color: #c9dbfb; box-shadow: inset 0 0 0 1px #c9dbfb; }
.cell.is-selected .cell-num { color: var(--blue-deep); }
.cell.is-today.is-selected { border-color: #b9d1fb; box-shadow: inset 0 0 0 1px #b9d1fb; background: #f4f8ff; }

/* 节假日 */
.cell-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cell-holiday {
  font-size: 9px;
  font-weight: 700;
  color: #d9534f;
  background: #fdeceb;
  border-radius: 5px;
  padding: 1px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-work {
  font-size: 9px;
  font-weight: 700;
  color: #8a8f99;
  background: #eef0f4;
  border-radius: 5px;
  padding: 1px 3px;
}
.cell.is-holiday .cell-num { color: #d9534f; }
.cell.is-holiday.is-out .cell-holiday { opacity: 0.45; }

/* 新增任务里的色块选择 */
.cmp-colors { display: flex; align-items: center; gap: 9px; }
.cmp-colors-label { font-size: 11px; color: #8b9ab3; flex: 0 0 auto; }
.cmp-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.cmp-swatch {
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 0;
  background: var(--sw);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(23, 35, 58, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cmp-swatch:hover { transform: scale(1.12); }
.cmp-swatch.is-on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--blue);
  transform: scale(1.06);
}

/* 导出按钮蓝色渐变 */
.exp-download { background: var(--grad); box-shadow: 0 10px 20px -12px rgba(61, 111, 217, 0.95); }
.exp-download:hover { background: var(--grad); filter: brightness(1.05); box-shadow: 0 10px 20px -12px rgba(61, 111, 217, 1); }
.exp-tab.is-on { color: var(--blue-deep); }

/* 夜间模式：蓝色主色保留 */
:root[data-theme='dark'] .topbar .remain,
:root[data-theme='dark'] .toolbar,
:root[data-theme='dark'] .icon-btn:hover,
:root[data-theme='dark'] .icon-btn.is-on,
:root[data-theme='dark'] .today-btn { background: #191917; border-color: #2a2a25; }
:root[data-theme='dark'] .segmented { background: #22221e; }
:root[data-theme='dark'] .seg-btn.is-active { background: var(--grad); }
:root[data-theme='dark'] .add-card .cmp-field { background: #1f1f1b; }
:root[data-theme='dark'] .cell-holiday { background: #3a2220; color: #f0908a; }
:root[data-theme='dark'] .cell-work { background: #26261f; color: #9a998f; }
:root[data-theme='dark'] .cell.is-today { background: #1b1d22; border-color: #26303f; }

@media (max-width: 900px) {
  .app { padding: 10px 10px 8px; gap: 8px; }
  .topbar .remain { padding: 5px 10px; }
  .topbar .remain-label { display: none; }
  .toolbar { padding: 7px 10px; border-radius: 16px; gap: 8px; }
  .seg-btn { padding: 6px 13px; font-size: 12px; }
  .period-title { font-size: 16px; }
  .cell-holiday { font-size: 8px; padding: 0 3px; }
}

/* 月历行高固定为能放下两个色块的高度，放不下就让卡片内部滚动，避免最后一行被裁 */
.calendar { overflow-y: auto; }
.grid { flex: 0 0 auto; grid-auto-rows: minmax(96px, auto); }
.cell-head { flex-wrap: nowrap; }
.cell-holiday { margin-left: 1px; }
.cell-num { flex: 0 0 auto; }

/* ============================================================
   v5 —— 实心任务色块 + 周表头蓝色填充 + 表单重排 + 迷你月历圆点
   ============================================================ */

/* 月历铺满：行高随高度伸展 */
.grid { flex: 1 1 auto; grid-auto-rows: minmax(96px, 1fr); }

/* 任务块：实心色 + 白色粗体 */
.cell .ev {
  background: var(--c-bg);
  color: #fff;
  border: 0;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.5);
  border-radius: 7px;
  padding: 3px 6px 3px 8px;
}
.cell .ev .ev-title {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.cell .ev .ev-meta { color: rgba(255, 255, 255, 0.94); font-size: 9.5px; }
.cell .ev .ev-time {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 3px;
}
.cell .ev .ev-meta svg { opacity: 0.9; }
.cell .ev.is-done { opacity: 0.62; }

/* 周视图任务块：左侧状态条改成半透明白 */
.wk-ev { box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.45); border: 0; }
.wk-ev:hover { box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.55), 0 8px 18px -10px rgba(23, 35, 58, 0.45); }
.wk-ev .wk-ev-time { color: rgba(255, 255, 255, 0.92); }
.wk-ev .wk-ev-title { color: #fff; font-weight: 700; }
.wk-ev .wk-ev-client { color: rgba(255, 255, 255, 0.82); }

/* 周表头：蓝色填充，白字；今天反白 + 蓝色粗体 */
.wk-dayhead {
  background: var(--grad);
  border-bottom: 0;
}
.wk-dayhead .wk-wd { color: rgba(255, 255, 255, 0.92); }
.wk-dayhead .wk-num { color: #fff; background: transparent; box-shadow: none; font-weight: 700; }
.wk-dayhead .wk-count { background: rgba(255, 255, 255, 0.3); color: #fff; }
.wk-dayhead .wk-prog { background: rgba(255, 255, 255, 0.32); }
.wk-dayhead .wk-prog i { background: #fff; }
.wk-dayhead.is-sel { background: linear-gradient(135deg, #5b8ff5 0%, #2f5fd0 100%); }

.wk-dayhead.is-today {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--blue-line), inset 0 -3px 0 var(--blue);
}
.wk-dayhead.is-today .wk-wd { color: var(--blue-deep); font-weight: 700; }
.wk-dayhead.is-today .wk-num {
  color: var(--blue-deep);
  font-weight: 800;
  background: transparent;
  box-shadow: none;
}
.wk-dayhead.is-today .wk-count { background: var(--blue-soft); color: var(--blue-deep); }
.wk-dayhead.is-today .wk-prog { background: #e3ecfb; }
.wk-dayhead.is-today .wk-prog i { background: var(--blue); }

/* 选中的日期：蓝底白字 */
.cell.is-selected .cell-num,
.cell.is-today.is-selected .cell-num {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--grad);
  color: #fff !important;
  border-radius: 7px;
  font-weight: 700;
}
.cell.is-holiday.is-selected .cell-num { background: var(--grad); color: #fff !important; }

/* 表单：文字前缀 + 自定义取色 */
.cmp-word {
  font-size: 10.5px;
  font-weight: 600;
  color: #8b9ab3;
  white-space: nowrap;
  flex: 0 0 auto;
  letter-spacing: 0.01em;
}
.cmp-custom {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  cursor: pointer;
  background: conic-gradient(#ef5350, #f5a524, #84cc16, #10b981, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef5350);
  box-shadow: inset 0 0 0 1px rgba(23, 35, 58, 0.1);
  display: grid;
  place-items: center;
}
.cmp-custom input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.cmp-custom-plus {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.cmp-colors { flex-wrap: wrap; }
.cmp-swatches { flex: 1 1 auto; }

/* 迷你月历：每个任务一个小圆点 */
.mc-dots { gap: 2px; height: 5px; margin-top: 2px; }
.mc-dots em { width: 4px; height: 4px; border-radius: 50%; }

/* 窄屏 */
@media (max-width: 900px) {
  .grid { grid-auto-rows: minmax(72px, 1fr); }
  .wk-dayhead .wk-num { font-size: 15px; }
}

/* 右栏表单再紧凑一档，保证「添加」按钮露出来 */
.add-card .composer { gap: 4px; }
.add-card .cmp-field { padding: 4px 8px; }
.add-card .cmp-input { font-size: 12px; }
.add-card .cmp-word { font-size: 9.5px; }
.add-card .cmp-swatch { width: 14px; height: 14px; border-radius: 5px; }
.add-card .cmp-swatches { gap: 4px; }
.add-card .cmp-custom { width: 14px; height: 14px; border-radius: 5px; }
.add-card .cmp-custom-plus { font-size: 10px; }
.add-card .cmp-submit { padding: 6px 14px; font-size: 12px; }
.add-card .client-chip { font-size: 11px; padding: 3px 8px; }

/* ============================================================
   v6 —— 周表头圆角卡片 + 月历块顶部信息条 + 编辑面板色块
   ============================================================ */

.wk-gutter-head { height: 64px; }
.wk-dayhead {
  height: 54px;
  flex: 0 0 54px;
  margin: 6px 4px 4px;
  border-radius: 12px;
  box-shadow: 0 8px 16px -12px rgba(61, 111, 217, 0.95);
}
.wk-dayhead.is-today {
  box-shadow: 0 0 0 1px var(--blue-line), 0 8px 16px -12px rgba(61, 111, 217, 0.5);
}
.wk-dayhead .wk-num { font-size: 15px; }
.wk-dayhead .wk-count { top: 4px; right: 6px; }
.wk-dayhead .wk-prog { left: 18%; right: 18%; bottom: 6px; }

/* 月历块：时间/客户那一条白色底，横跨整行 */
.cell .ev .ev-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 1px 5px;
  margin-bottom: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.28);
}
.cell .ev .ev-time { background: transparent; padding: 0; font-weight: 700; }
.cell .ev .ev-meta { color: #fff; min-width: 0; }
.cell .ev .ev-client {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 编辑面板里的色块选择 */
.dw-colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 2px; }
.dw-swatch {
  width: 20px; height: 20px;
  border: 0; padding: 0;
  border-radius: 6px;
  background: var(--sw);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(23, 35, 58, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dw-swatch:hover { transform: scale(1.1); }
.dw-swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--blue); transform: scale(1.05); }
.dw-custom {
  position: relative;
  width: 20px; height: 20px;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: conic-gradient(#ef5350, #f5a524, #84cc16, #10b981, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef5350);
  box-shadow: inset 0 0 0 1px rgba(23, 35, 58, 0.1);
}
.dw-custom input[type='color'] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.dw-custom span {
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 时间轴变矮后，块内文字收紧 */
.wk-ev { padding: 3px 7px 3px 9px; gap: 0; }
.wk-ev-title { line-height: 1.2; }
.wk-ev-client { display: none; }
@media (min-height: 780px) {
  .wk-ev-client { display: block; }
}

/* ============================================================
   v7 —— 色块加深 + 日面板头部重排 + 日期分隔线 + 24 小时轴
   ============================================================ */

/* 完成态别太淡，保留可读性 */
.cell .ev.is-done { opacity: 0.82; }
.wk-ev.is-done { opacity: 0.78; }

/* 24 小时轴：刻度字更小，块内只留标题 */
.wk-hour span { font-size: 9px; right: 6px; }
.wk-ev.is-dense { padding: 1px 6px 1px 8px; justify-content: center; }
.wk-ev.is-dense .wk-ev-title { font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ev .wk-ev-title { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); }

/* 月历：日期下面一条淡分隔线 */
.cell-head {
  width: 100%;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #f1f4fa;
}

/* 日面板头部重排 */
.dp-head {
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f4f9;
  margin-bottom: 4px;
}
.dp-left { align-items: center; gap: 11px; }
.dp-num {
  font-size: 32px;
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.dp-meta { gap: 5px; }
.dp-wd { font-size: 12px; font-weight: 500; color: #6b7b93; }
.dp-rel {
  display: inline-block;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--blue-deep);
  background: var(--blue-soft);
  padding: 1px 7px;
  border-radius: 6px;
  letter-spacing: 0.01em;
}
.dp-rel.is-muted { color: #8b9ab3; background: #f2f4f9; }
.dp-count { text-align: right; line-height: 1.4; }

/* 月历块再收紧一点，保证 96px 格子里能放下两块 */
.cell .ev { padding: 2px 5px 2px 7px; border-radius: 6px; }
.cell .ev .ev-top { padding: 0 4px; margin-bottom: 1px; gap: 5px; }
.cell .ev .ev-meta { font-size: 9px; }
.cell .ev .ev-title { font-size: 10.5px; line-height: 1.25; }
.cell-head { padding-bottom: 3px; margin-bottom: 3px; }
.cell .cell-events { gap: 3px; }

/* 行高下限抬到 110，保证两块任务完整显示；窗口矮时日历内部滚动 */
.grid { grid-auto-rows: minmax(110px, 1fr); }

/* 周视图任务块：任务名 + 时间并排一行，超出省略 */
.wk-ev,
.wk-ev.is-dense {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 7px 0 9px;
  overflow: hidden;
}
.wk-ev .wk-ev-title,
.wk-ev.is-dense .wk-ev-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-ev .wk-ev-time {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.9;
  white-space: nowrap;
}
.wk-ev .wk-ev-client { display: none; }

/* 时间轴最后一行别贴着卡片底边 */
.wk-inner { padding-bottom: 8px; }

/* 时间区间：日期 + 开始 + 结束 三列 */
.cmp-row > .cmp-field.is-time { flex: 0 1 82px; min-width: 0; }
.dw-field-pair.is-trio { grid-template-columns: 1fr 1fr 1fr; }
.add-card .cmp-row > .cmp-field.is-time { flex: 0 1 74px; }
.wk-ev .wk-ev-time { font-size: 9px; letter-spacing: -0.01em; }

/* 长时间块：文字靠上，不要垂直居中 */
.wk-ev { align-items: flex-start; padding-top: 4px; padding-bottom: 2px; }
.wk-ev.is-dense { align-items: center; padding-top: 0; padding-bottom: 0; }

/* ============================================================
   v8 —— 周表头加高 + 上午/下午/晚上三段 + 状态图标
   ============================================================ */

.wk-gutter-head { height: 80px; }
.wk-dayhead {
  height: 68px;
  flex: 0 0 68px;
  margin: 6px 4px 6px;
  border-radius: 14px;
  justify-content: center;
  gap: 2px;
}
.wk-dayhead .wk-wd { font-size: 11px; }
.wk-dayhead .wk-num { font-size: 17px; }
.wk-dayhead .wk-count { top: 5px; right: 7px; }
.wk-dayhead .wk-prog { bottom: 8px; left: 16%; right: 16%; }

/* 三段背景 */
.wk-col { isolation: isolate; }
.wk-band {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  border-top: 1px solid rgba(23, 35, 58, 0.04);
}
.wk-lines { z-index: 1; }
.wk-ev { z-index: 5; }

/* 左侧时段标签 */
.wk-bandlabel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 6px 8px 0 0;
  gap: 1px;
  border-top: 1px solid rgba(23, 35, 58, 0.05);
}
.wk-band-name {
  font-size: 11px;
  font-weight: 700;
  color: #5b6b85;
  letter-spacing: 0.02em;
}
.wk-band-range {
  font-size: 9px;
  color: #a6b0c2;
  font-variant-numeric: tabular-nums;
}

/* 状态图标：圆角矩形填充 */
.wk-ev-status {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--sc);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}
.wk-ev-status svg { display: block; }
.wk-ev.is-dense { gap: 5px; }

/* ============================================================
   v9 —— 去掉页面滚动 + 时段底色加强 + 任务块两行排版
   ============================================================ */

.stage.is-week { overflow: hidden; }
.app { overflow: hidden; }
body { overflow: hidden; }

/* 高块：第一行 状态白条 + 时间条，第二行 任务名 */
.wk-ev.is-tall {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  padding: 5px 7px 4px 9px;
}
.wk-ev-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wk-ev-status {
  flex: 0 0 auto;
  background: #ffffff;
  color: var(--sc);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(23, 35, 58, 0.12);
}
.wk-ev.is-tall .wk-ev-time {
  background: rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  color: #fff;
  flex: 0 0 auto;
}
.wk-ev.is-tall .wk-ev-title {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 矮块维持一行：小图标 + 名称 + 时间 */
.wk-ev.is-dense { flex-direction: row; align-items: center; gap: 5px; padding: 0 6px 0 8px; }
.wk-ev.is-dense .wk-ev-title { flex: 1 1 auto; min-width: 0; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ev.is-dense .wk-ev-time { font-size: 9px; flex: 0 0 auto; }

/* 窄屏仍然允许纵向滚动，别被上面的 overflow:hidden 锁死 */
@media (max-width: 900px) {
  .stage.is-week { overflow-y: auto; overflow-x: hidden; }
  .app { overflow: visible; }
}

/* 状态条 + 时间条：一行放下，别换行 */
.wk-ev.is-tall .wk-ev-head { flex-wrap: nowrap; overflow: hidden; gap: 3px; }
.wk-ev.is-tall .wk-ev-status,
.wk-ev.is-tall .wk-ev-time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  font-size: 8.5px;
  line-height: 13px;
}
.wk-ev.is-tall .wk-ev-time { flex: 0 1 auto; min-width: 0; }
.wk-ev.is-tall .wk-ev-title { margin-top: 1px; font-size: 11.5px; }

/* 高块里的状态条是「白底文字」，不是小方块图标 */
.wk-ev.is-tall .wk-ev-status {
  width: auto;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--sc);
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(23, 35, 58, 0.14);
}

/* 状态/时间条字号微调 */
.wk-ev.is-tall .wk-ev-status,
.wk-ev.is-tall .wk-ev-time { font-size: 9px; line-height: 14px; height: 14px; }
.wk-ev.is-tall .wk-ev-status { height: 14px; }
.wk-ev.is-tall .wk-ev-title { font-size: 12px; margin-top: 2px; }

/* ============================================================
   v10 —— 周历竖线分隔 + 月历格线 + 去掉深色模式
   ============================================================ */

/* 周视图：每一天之间一条清晰的竖线 */
.wk-daywrap { border-left: 1px solid #e6ecf6; }
.wk-daywrap:first-of-type { border-left: 0; }
.wk-daywrap:last-child { border-right: 1px solid #e6ecf6; }
.wk-gutter { border-right: 1px solid #e6ecf6; }

/* 月历：每个日期格子都用线框起来 */
.grid { gap: 6px; }
.cell {
  border: 1px solid #e8eef8;
  border-radius: 10px;
  background: #fff;
}
.cell.is-out { background: #fbfbf9; border-color: #f0f2f6; }
.cell:hover { border-color: #d8e3f5; background: #fafcff; }
.cell.is-today { border-color: #c9dbfb; background: #f8fbff; }
.cell.is-selected { border-color: #b9d1fb; background: #f5f9ff; }
.cell.is-today.is-selected { border-color: #a9c6fa; }
.cell.is-holiday { border-color: #f6ded9; }

/* 深色模式已下线，强制浅色 */
:root[data-theme='dark'] {
  --paper: #f4f5f8;
  --paper-2: #eef1f6;
  --surface: #ffffff;
  --ink: #1b1b18;
  --ink-2: #6b6b64;
  --ink-3: #a6a69d;
  --line: #eceae4;
  --line-soft: #f4f3ee;
  --card-line: #eeede6;
}

/* ============================================================
   v11 —— 下线周视图 + 去 logo + 月历排版调整
   ============================================================ */

/* 无 logo 后品牌只留文字 */
.brand { gap: 0; }
.brand-text strong { font-size: 18px; }
.brand-text em { font-size: 10.5px; }

/* 星期行：每个字一个圆角色块，周末红色 */
.weekday-row { gap: 6px; margin-bottom: 6px; }
.weekday-row span {
  display: block;
  padding: 6px 0;
  border-radius: 9px;
  background: #f3f6fc;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6b85;
  text-align: center;
  letter-spacing: 0.04em;
}
.weekday-row span.is-weekend {
  color: #e05252;
  background: #fdf1f0;
}

/* 日期数字更大 */
.cell-num { font-size: 18px; font-weight: 700; color: var(--ink); }
.cell.is-out .cell-num { font-size: 16px; }

/* 去掉日期下面那条分隔线 */
.cell-head { border-bottom: 0; padding-bottom: 2px; margin-bottom: 2px; }

/* 格子边框加深 */
.cell { border-color: #dde5f1; }
.cell.is-out { border-color: #e9edf4; }
.cell:hover { border-color: #c9d8ee; }
.cell.is-today { border-color: #a9c6fa; }
.cell.is-selected { border-color: #9dbcf7; }
.cell.is-today.is-selected { border-color: #8fb2f6; }
.cell.is-holiday { border-color: #f3cfc9; }

/* ============================================================
   v12 —— 日期数字层级 + 选中态（深灰边框 + 圆形日期）
   ============================================================ */

/* 普通日期：小一号、细一点 */
.cell-num {
  font-size: 15px;
  font-weight: 500;
  color: #6b7787;
  letter-spacing: 0.01em;
}
.cell.is-out .cell-num { font-size: 14px; color: #b7c0cd; font-weight: 400; }
.cell.is-weekend .cell-num { color: #7b8798; }
.cell.is-holiday .cell-num { color: #d9534f; font-weight: 600; }

/* 今天：保持大号粗体 + 蓝底 */
.cell.is-today .cell-num,
.cell.is-today.is-selected .cell-num {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  height: 27px;
  padding: 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  border-radius: 8px;
}

/* 选中的其他日期：深灰描边 + 圆形日期底 */
.cell.is-selected {
  border-color: #8b95a5;
  box-shadow: inset 0 0 0 1px #8b95a5;
  background: #fbfcfe;
}
.cell.is-selected:not(.is-today) .cell-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #5b6473;
  border-radius: 50%;
}
.cell.is-selected:not(.is-today).is-holiday .cell-num { color: #fff; background: #5b6473; }
.cell.is-selected:not(.is-today) .cell-head { align-items: center; }

/* ============================================================
   v13 —— 选中细线 / 今天粗线深色 / 今天日期圆形
   ============================================================ */

/* 选中的其他日期：细线，不再叠加内描边 */
.cell.is-selected:not(.is-today) {
  border-width: 1px;
  border-color: #b9c2d0;
  box-shadow: none;
  background: #fbfcfe;
}

/* 今天：边框加粗、颜色加深 */
.cell.is-today,
.cell.is-today.is-selected {
  border-width: 2px;
  border-color: #2f5fd0;
  box-shadow: none;
  background: #f7faff;
}

/* 今天的日期：圆形 */
.cell.is-today .cell-num,
.cell.is-today.is-selected .cell-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  border-radius: 50%;
}

/* ============================================================
   v14 —— 月历任务块：任务名 + 三个胶囊；格子右上角小圆点
   ============================================================ */

.cell .ev {
  padding: 5px 7px 6px 8px;
  border-radius: 7px;
  gap: 0;
  justify-content: flex-start;
}
.cell .ev .ev-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.cell .ev .ev-pills {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.cell .ev .ev-pill {
  flex: 0 0 auto;
  font-size: 8.5px;
  line-height: 13px;
  padding: 0 5px;
  border-radius: 4px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell .ev .ev-pill.is-time,
.cell .ev .ev-pill.is-client {
  background: #fff;
  color: var(--c-bg);
}
.cell .ev .ev-pill.is-status {
  background: var(--sc);
  color: #fff;
}
.cell .ev.is-done .ev-pill.is-status { opacity: 0.95; }

/* 格子右上角：任务色小圆点 */
.cell-dots {
  position: absolute;
  top: 9px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.cell-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cell-dots b {
  font-size: 9px;
  font-weight: 700;
  color: #9aa5b5;
  line-height: 1;
}
.cell.is-today .cell-dots b,
.cell.is-selected .cell-dots b { color: #6b7787; }

/* 月历块再收紧，保证一格放得下两块（含胶囊行） */
.grid { grid-auto-rows: minmax(118px, 1fr); }
.cell .ev { padding: 4px 6px 5px 7px; }
.cell .ev .ev-title { font-size: 11.5px; }
.cell .ev .ev-pills { margin-top: 3px; gap: 2px; }
.cell .ev .ev-pill { font-size: 8px; line-height: 12px; padding: 0 4px; }
.cell-head { padding-bottom: 2px; margin-bottom: 2px; }

/* 每格只放一个任务块，其余用右上角圆点 + N 表示；行高回到能一屏放下的尺寸 */
.grid { grid-auto-rows: minmax(92px, 1fr); }

/* ============================================================
   v15 —— 严格对齐设计稿：细淡边框 / 浅蓝今天 / 空格提示 / 格子内滚动
   ============================================================ */

/* 格子：细淡边框 */
.cell {
  border-width: 1px;
  border-color: #ebf0f8;
  background: #fff;
  padding: 8px 9px 8px;
}
.cell.is-out { border-color: #f2f4f8; background: #fdfdfc; }
.cell:hover { border-color: #dde7f6; background: #fcfdff; }

/* 今天：浅蓝渐变 + 淡蓝描边 + 蓝色圆形日期 */
.cell.is-today {
  background: linear-gradient(150deg, #eaf2ff 0%, #f6faff 55%, #fdfeff 100%);
  border-color: #c6d8f8;
  border-width: 1px;
}
.cell.is-today .cell-num,
.cell.is-today.is-selected .cell-num {
  width: 30px;
  height: 30px;
  min-width: 30px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, #6f9df8 0%, #4c7df0 100%);
  border-radius: 50%;
}

/* 选中的其他日期：保持深灰圆 + 细灰边 */
.cell.is-selected:not(.is-today) { border-color: #cfd8e6; }
.cell.is-selected:not(.is-today) .cell-num {
  width: 28px; height: 28px; min-width: 28px;
  font-size: 15px;
  background: #5b6473;
}

/* 日期数字 */
.cell-num { font-size: 15px; font-weight: 500; color: #8a93a3; }
.cell.is-out .cell-num { font-size: 14px; color: #c2cad6; }

/* 当天无安排 */
.cell-empty {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 40px;
  bottom: 8px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 500;
  color: #6b8fd8;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* 任务区：全部显示，放不下就滚动 */
.cell-events {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin-right: -4px;
  padding-right: 4px;
}
.cell-events::-webkit-scrollbar { width: 4px; }
.cell-events::-webkit-scrollbar-thumb { background: #d8e2f2; border-radius: 2px; }
.cell-events::-webkit-scrollbar-track { background: transparent; }

/* 任务块字号加大 */
.cell .ev { padding: 6px 8px 7px 9px; border-radius: 8px; }
.cell .ev .ev-title { font-size: 14px; font-weight: 700; line-height: 1.25; }
.cell .ev .ev-pills { margin-top: 4px; gap: 3px; }
.cell .ev .ev-pill { font-size: 10.5px; line-height: 16px; padding: 0 6px; border-radius: 5px; }

/* 任务块不压缩，超出让容器滚；禁止横向滚动 */
.cell-events { overflow-x: hidden; }
.cell-events > .ev { flex: 0 0 auto; }
.cell .ev .ev-pills { overflow: hidden; }
.cell .ev .ev-pill.is-client { flex: 0 1 auto; min-width: 0; }
.cell .ev .ev-title { font-size: 13.5px; }
.cell .ev .ev-pill { font-size: 10px; line-height: 15px; padding: 0 5px; }

/* 格子内更紧凑，保证一块完整 + 细滚动条 */
.cell { padding: 6px 7px 6px 8px; }
.cell-head { margin-bottom: 2px; }
.cell.is-today .cell-num,
.cell.is-today.is-selected .cell-num { width: 28px; height: 28px; min-width: 28px; font-size: 17px; }
.cell-empty { top: 38px; }
.cell-events { scrollbar-width: auto; margin-right: -6px; padding-right: 6px; }
.cell-events::-webkit-scrollbar { width: 4px; }
.cell-events::-webkit-scrollbar-button { display: none; height: 0; }
.cell .ev { padding: 5px 7px 6px 8px; }
.cell .ev .ev-pills { margin-top: 3px; gap: 2px; }
.cell .ev .ev-pill { font-size: 9px; line-height: 14px; padding: 0 4px; }

/* 胶囊放不下就换行，保证三个信息都完整 */
.cell .ev .ev-pills { flex-wrap: wrap; row-gap: 3px; }
.cell .ev .ev-pill { flex: 0 0 auto; font-size: 9.5px; line-height: 15px; padding: 0 5px; }
.cell .ev .ev-pill.is-client { max-width: 100%; }

/* 今天 + 选中：也用浅蓝渐变细边（覆盖早期 2px 深蓝规则） */
.cell.is-today.is-selected {
  background: linear-gradient(150deg, #eaf2ff 0%, #f6faff 55%, #fdfeff 100%);
  border-width: 1px;
  border-color: #c6d8f8;
  box-shadow: none;
}

/* 再挤出 4px，让单个任务块完整显示 */
.cell { padding: 5px 7px 5px 8px; }
.cell-head { margin-bottom: 0; }
.cell-empty { top: 36px; }

/* ============================================================
   v16 —— 日期+农历居中 / 边框加深 / 去掉选中灰圆 / 只有今天提示空
   ============================================================ */

.cell-head {
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 2px;
}
.cell-num { font-size: 14px; font-weight: 600; color: #6b7787; }
.cell.is-out .cell-num { font-size: 13px; color: #b9c2d0; }
.cell-lunar {
  font-size: 11px;
  font-weight: 400;
  color: #a3aebf;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cell-lunar.is-holiday { color: #d9534f; font-weight: 600; }
.cell.is-holiday .cell-num { color: #d9534f; }

/* 其他日期边框再深一点 */
.cell { border-color: #dfe7f3; }
.cell.is-out { border-color: #eaeff6; }

/* 点击其他日期不再出现灰色圆 */
.cell.is-selected:not(.is-today) .cell-num {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #6b7787;
  background: transparent;
  border-radius: 0;
}
.cell.is-selected:not(.is-today).is-holiday .cell-num { color: #d9534f; background: transparent; }
.cell.is-selected:not(.is-today) .cell-head { align-items: baseline; }

/* ============================================================
   v17 —— 日期更小更细更深 / 今天圆圈缩小 / 选中数字可见 / 块更矮
   ============================================================ */

/* 头部整体垂直居中 */
.cell-head { align-items: center; justify-content: center; gap: 3px; }
.cell-num { font-size: 13px; font-weight: 500; color: #55617a; }
.cell.is-out .cell-num { font-size: 12.5px; color: #b0b9c8; }
.cell-lunar { font-size: 10.5px; color: #9aa6b8; }
.cell-lunar.is-holiday { font-size: 10.5px; color: #d9534f; }

/* 今天：更小的圆 */
.cell.is-today .cell-num,
.cell.is-today.is-selected .cell-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(140deg, #6f9df8 0%, #4c7df0 100%);
  border-radius: 50%;
}

/* 选中的其他日期：数字照常显示（覆盖早期的白色 !important） */
.cell.is-selected:not(.is-today) .cell-num {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #55617a !important;
  background: transparent;
  border-radius: 0;
}
.cell.is-selected:not(.is-today).is-holiday .cell-num { color: #d9534f !important; }

/* 任务块更矮 */
.cell .ev { padding: 4px 6px 4px 7px; border-radius: 7px; }
.cell .ev .ev-title { font-size: 12px; font-weight: 700; line-height: 1.2; }
.cell .ev .ev-pills { margin-top: 2px; gap: 2px; }
.cell .ev .ev-pill { font-size: 9px; line-height: 13px; padding: 0 4px; border-radius: 4px; }

/* 胶囊强制一行，客户名过长就省略，保证块够矮 */
.cell .ev .ev-pills { flex-wrap: nowrap; }
.cell .ev .ev-pill.is-time,
.cell .ev .ev-pill.is-status { flex: 0 0 auto; }
.cell .ev .ev-pill.is-client {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 周末日期数字与平时同色，不再偏浅 */
.cell.is-weekend .cell-num { color: #55617a; }
.cell.is-weekend.is-out .cell-num { color: #b0b9c8; }
.cell.is-weekend.is-holiday .cell-num { color: #d9534f; }

/* ============================================================
   v18 —— 删除确认弹窗
   ============================================================ */

.cfm-layer {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cfm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 45, 0.38);
  backdrop-filter: blur(3px);
}
.cfm-card {
  position: relative;
  width: min(360px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 70px -30px rgba(14, 28, 56, 0.55);
  text-align: center;
}
.cfm-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1b1b18;
}
.cfm-card p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7787;
  word-break: break-all;
}
.cfm-actions { display: flex; gap: 10px; }
.cfm-actions button {
  flex: 1 1 0;
  border: 0;
  border-radius: 999px;
  padding: 10px 0;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.cfm-cancel {
  background: #f2f4f8;
  color: #5b6b85;
}
.cfm-cancel:hover { background: #e9edf4; }
.cfm-ok {
  background: linear-gradient(135deg, #f0715f, #e0483a);
  color: #fff;
  box-shadow: 0 10px 20px -12px rgba(224, 72, 58, 0.9);
}
.cfm-ok:hover { filter: brightness(1.05); }

/* ============================================================
   v19 —— 右上角按钮改成圆形 + 淡投影
   ============================================================ */

.topbar .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eef1f7;
  color: #5b6b85;
  box-shadow: 0 2px 6px rgba(23, 35, 58, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.topbar .icon-btn:hover {
  background: #fff;
  border-color: #e3e9f4;
  color: var(--blue-deep);
  box-shadow: 0 6px 14px rgba(23, 35, 58, 0.12);
  transform: translateY(-1px);
}
.topbar .icon-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(23, 35, 58, 0.08); }
.topbar .icon-btn svg { display: block; }

/* ============================================================
   v20 —— 客户头像：设置里可粘贴/选图，任务里带白框头像
   ============================================================ */

/* 设置里：色块变成头像 */
.set-color { overflow: hidden; position: relative; }
.set-color.has-avatar { box-shadow: inset 0 0 0 1px rgba(23, 35, 58, 0.08); }
.set-color.has-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.set-avatar-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #e6ebf3;
  background: #fff;
  color: #7b8798;
  border-radius: 8px;
  cursor: pointer;
  margin-left: 4px;
}
.set-avatar-btn:hover { color: var(--blue-deep); border-color: var(--blue-line); background: var(--blue-soft); }

/* 头像选择弹窗 */
.av-layer {
  position: fixed;
  inset: 0;
  z-index: 170;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.av-backdrop { position: absolute; inset: 0; background: rgba(15, 26, 45, 0.4); backdrop-filter: blur(3px); }
.av-card {
  position: relative;
  width: min(330px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 30px 70px -30px rgba(14, 28, 56, 0.55);
}
.av-card h3 { margin: 0 0 14px; font-size: 14.5px; font-weight: 700; color: #1b1b18; }
.av-preview {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #f4f6fa;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px -8px rgba(23, 35, 58, 0.4);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #a3aebf;
  font-size: 12px;
}
.av-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-tip { margin: 0 0 14px; font-size: 11.5px; line-height: 1.6; color: #8b9ab3; }
.av-tip b { color: #5b6b85; }
.av-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.av-actions button {
  flex: 1 1 0;
  border: 0;
  border-radius: 999px;
  padding: 9px 0;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.av-pick { background: var(--grad); color: #fff; }
.av-clear { background: #f2f4f8; color: #5b6b85; }
.av-clear:disabled { opacity: 0.45; cursor: not-allowed; }
.av-foot .av-done {
  width: 100%;
  border: 1px solid #e6ebf3;
  background: #fff;
  border-radius: 999px;
  padding: 9px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6b85;
  cursor: pointer;
}
.av-foot .av-done:hover { background: #f7f9fd; }

/* 月历块里的客户头像 */
.cell .ev .ev-pill.is-client.has-avatar {
  background: transparent;
  color: #fff;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ev-avatar {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  display: block;
}
.cell .ev .ev-pill.is-client.has-avatar .ev-client-name {
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   v21 —— 客户名圆角框 / 状态移到右下角 / 时间显示完整
   ============================================================ */

/* 客户胶囊：始终白底圆角（有头像也一样） */
.cell .ev .ev-pill.is-client,
.cell .ev .ev-pill.is-client.has-avatar {
  background: #fff;
  color: var(--c-bg);
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  overflow: hidden;
}
.cell .ev .ev-pill.is-client.has-avatar .ev-client-name {
  color: var(--c-bg);
  font-weight: 700;
}
.cell .ev .ev-pill.is-client .ev-avatar {
  width: 14px;
  height: 14px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* 状态：胶囊行最右侧 */
.cell .ev .ev-status {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 9px;
  line-height: 13px;
  padding: 0 5px;
  border-radius: 4px;
  font-weight: 700;
  color: #fff;
  background: var(--sc);
  white-space: nowrap;
}

/* 时间用完整区间，字号略小一点腾空间 */
.cell .ev .ev-pill.is-time { font-size: 8.5px; padding: 0 4px; }

/* 三个元素挤在一行：时间/状态字号再收一点，客户名保底宽度 */
.cell .ev .ev-pill.is-time { font-size: 8px; padding: 0 4px; }
.cell .ev .ev-status { font-size: 8.5px; padding: 0 4px; }
.cell .ev .ev-pill.is-client { min-width: 34px; }
.cell .ev .ev-pills { gap: 3px; }

/* 状态放不下就换到第二行并右对齐 —— 即「右下角」 */
.cell .ev .ev-pills { flex-wrap: wrap; row-gap: 2px; }
.cell .ev .ev-status { margin-left: auto; }

/* ============================================================
   v7 —— 色块改圆形 + 客户/平台 chips 多了自动换行（不再被裁）
   ============================================================ */

/* 1) 色块：圆角矩形 → 正圆（新增任务面板 + 编辑抽屉 + 自定义取色） */
.cmp-swatch,
.add-card .cmp-swatch,
.dw-swatch,
.cmp-custom,
.add-card .cmp-custom,
.dw-custom { border-radius: 50%; }

/* 选中态的外环也跟着变圆，避免出现「圆块 + 方环」 */
.cmp-swatch.is-on,
.dw-swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--blue); }

/* 2) 客户 / 平台 chips：原来是横向滚动且隐藏滚动条，后面的客户等于消失了。
      改成自动换行，多行平铺，全部可见；极端多时纵向滚动并露出细滚动条。 */
.cmp-chips { align-items: flex-start; }
.cmp-tag { padding-top: 4px; }

.cmp-chips-scroll {
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 200px;          /* 约 7 行，20 个客户以内都全显示，再多才滚动 */
  row-gap: 5px;
  padding-right: 3px;
}
.cmp-chips-scroll::-webkit-scrollbar { display: block; width: 5px; height: 5px; }
.cmp-chips-scroll::-webkit-scrollbar-thumb { background: #dbe6f6; border-radius: 3px; }
.cmp-chips-scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   v8 —— 客户行可折叠 + 搜索；设置里的「重置所有数据」
   ============================================================ */

/* 1) 客户 / 平台行：标签 + 主体（搜索框 / chips / 展开按钮） + 新增按钮 */
.cmp-chips-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 收起状态：只留前 6 个（永远整行，不会切一半），点「全部 N 个客户」再展开 */
.cmp-chips[data-collapsed='1'] .cmp-chips-scroll { overflow-y: hidden; }
.cmp-chips[data-collapsed='1'] .client-chip:nth-child(n + 7) { display: none; }

/* 搜索框 */
.cmp-chips-search {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  border-radius: 999px;
  color: var(--blue-deep);
}
.cmp-chips-search[hidden] { display: none; }
.cmp-chips-search svg { flex: 0 0 auto; opacity: 0.75; }
.cmp-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink);
  padding: 1px 0;
}
.cmp-search-input::placeholder { color: var(--ink-3); }
.cmp-search-input::-webkit-search-cancel-button { display: none; }

/* 没有匹配的客户 */
.cmp-chips-empty {
  margin: 0;
  font-size: 10.5px;
  color: var(--ink-3);
  padding: 1px 2px;
}
.cmp-chips-empty[hidden] { display: none; }

/* 「全部 N 个客户 / 收起」 */
.chip-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  padding: 1px 2px;
  margin-top: -1px;
  font-family: inherit;
  font-size: 10.5px;
  color: var(--blue-deep);
  cursor: pointer;
  border-radius: 6px;
}
.chip-more:hover { color: var(--blue); }
.chip-more-ico { transition: transform 0.16s ease; }
.chip-more.is-open .chip-more-ico { transform: rotate(180deg); }

/* 2) 设置里的「重置所有数据」 */
.set-danger h4 { color: #c2544c; }
.set-reset {
  margin-top: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #f0c9c4;
  background: #fff5f3;
  color: #c2544c;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.set-reset:hover { background: #ffe9e4; border-color: #e9b1a9; }
.set-reset:active { transform: translateY(1px); }

/* ============================================================
   v9 —— 至尊客户（置顶 + 折扣）与任务折扣
   ============================================================ */

/* 1) 新增任务里的折扣下拉：贴在价格输入框右侧的小药丸 */
.cmp-discount {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  max-width: 62px;
  padding: 3px 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue-deep);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--blue-line);
  transition: color 0.16s ease, box-shadow 0.16s ease;
}
.cmp-discount.is-off {
  color: var(--ink-3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cmp-discount:hover { box-shadow: inset 0 0 0 1px var(--blue); }

/* 2) 客户 chip 上的小皇冠 */
.chip-crown {
  display: inline-flex;
  align-items: center;
  vertical-align: -1px;
  margin-right: 2px;
  color: #d99a1c;
  opacity: 0.95;
}
.chip-crown svg { width: 8px; height: 8px; }

/* 3) 任务价格旁的折扣小标 */
.price-off {
  display: inline-block;
  margin-left: 3px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(61, 111, 217, 0.1);
  color: var(--blue-deep);
  font-style: normal;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
}
.li-price .price-off { font-size: 8.5px; margin-left: 4px; }

/* 4) 详情抽屉里的折扣说明 */
.dw-off {
  margin-left: 7px;
  font-size: 10.5px;
  color: var(--ink-3);
}

/* 5) 设置里的至尊开关与折扣下拉 */
.set-row.is-vip {
  background: #fffdf5;
  border-color: #f2e4c6;
}
.set-vip {
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}
.set-vip:hover { color: #d99a1c; background: #fdf3dc; }
.set-vip.is-on { color: #d99a1c; background: #fdf1d6; }
.set-vip svg { width: 13px; height: 13px; }

.set-discbox { flex: 0 0 auto; display: inline-flex; }
.set-discount {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #f0e0bd;
  background: #fffaf0;
  color: #a9761b;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 7px;
  cursor: pointer;
  outline: none;
}
.set-discount:hover { border-color: #e3c98d; }

.set-vip-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: #d99a1c;
  vertical-align: -1px;
}
.set-vip-mark svg { width: 11px; height: 11px; }
.set-disc-text { flex: 0 0 auto; font-size: 10.5px; color: #a9761b; }

/* 移动端：舞台整体可滚动，日面板按内容自然撑开，
   否则「添加任务」表单会溢出面板、压住上面的任务列表 */
@media (max-width: 900px) {
  .stage { overflow-y: auto; }
  .stage > .calendar,
  .stage > .daypanel { flex: 0 0 auto; }
}

/* ============================================================
   v10 —— 手机端月历重做：格子只有 43px 宽，塞不下任务标题，
            改成「日期 + 彩色圆点」，任务详情交给下面的日面板
   ============================================================ */

@media (max-width: 560px) {
  /* 顶栏：品牌回到左边（.brand{order:1} 是旧侧栏布局残留，会把品牌挤到右边） */
  .topbar .brand { order: 0; }
  .topbar-right { order: 1; }

  /* 月历格子 */
  .calendar { padding: 7px 6px 6px; }
  .weekday-row { margin-bottom: 4px; }
  .grid { gap: 2px; grid-auto-rows: minmax(54px, 1fr); }

  .cell {
    padding: 4px 2px 5px;
    border-radius: 9px;
    gap: 0;
  }
  .cell-head { justify-content: center; margin-bottom: 0; gap: 0; }
  .cell-num { font-size: 14px; padding-left: 0; }
  .cell.is-out .cell-num { font-size: 13px; }
  .cell.is-today .cell-num,
  .cell.is-today.is-selected .cell-num {
    width: 23px; height: 23px; min-width: 23px;
    font-size: 13px;
  }

  /* 农历 / 节假日名 / 任务块 / 空态提示：43px 里全放不下，隐藏 */
  .cell-lunar,
  .cell-events,
  .cell-empty { display: none; }

  /* 圆点移到底部居中，代表当天有几单 */
  .cell-dots {
    position: static;
    margin-top: auto;
    justify-content: center;
    gap: 2px;
    min-height: 6px;
  }
  .cell-dots i { width: 4px; height: 4px; box-shadow: none; }
  .cell-dots b { font-size: 7.5px; color: var(--ink-3); font-weight: 600; }

  .cell-work { font-size: 7px; padding: 0 2px; border-radius: 3px; }

  /* 统计页「本月 / 全部」不要被挤成竖排 */
  .st-toggle button { white-space: nowrap; }
}

/* 手机端整页滚动条隐藏（触摸滚动不需要可见滚动条，露出反而像一条黑线） */
@media (max-width: 900px) {
  .stage { scrollbar-width: none; }
  .stage::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* 手机端：待办 / 统计页在 ≤900px 被设成 overflow:visible，
   内容超出舞台后既滚不动也被 .app 裁掉 —— 恢复成舞台内部滚动 */
@media (max-width: 900px) {
  .stage.is-list,
  .stage.is-stats {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 12px;
  }
}

/* ============================================================
   v12 —— 任务卡片化（桌面 + 手机统一）
     · 卡片：任务色 9% 浅底 + 左侧 3px 色条
     · 圆圈：边框颜色 = 任务进度（灰=未开始 / 橙=进行中 / 蓝=初稿 / 绿=完成打勾）
     · 第一行：任务名 + 右侧时间胶囊；第二行：截至交付
     · 添加任务收进「⊕ 添加行程」按钮，点一下再展开
   ============================================================ */

/* ---------- 添加行程 ---------- */
.composer-wrap { flex: 0 0 auto; display: none; }
.daypanel.is-adding .composer-wrap,
.add-card.is-adding .composer-wrap { display: block; }

.add-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6ea2f7 0%, #3d6fd9 100%);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px -12px rgba(61, 111, 217, 0.95);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.add-cta:hover { filter: brightness(1.04); }
.add-cta:active { transform: translateY(1px); }
.add-cta.is-open {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: inset 0 0 0 1.5px var(--blue-line);
}
.add-cta-ico { flex: 0 0 auto; }

/* ---------- 任务卡片 ---------- */
.tasks { gap: 9px; }

.task {
  padding: 11px 12px;
  border-bottom: 0;
  border-radius: 13px;
  background: var(--tc-soft, #f6f9ff);
  border-left: 3px solid var(--tc, #5b8def);
  align-items: center;
  gap: 9px;
}
.task.is-done { opacity: 0.72; }

/* 圆圈 = 进度：空心环，颜色取 --sc */
.task .status-btn {
  width: 21px;
  height: 21px;
  margin-top: 0;
  border: 2px solid var(--sc, #9aa5b5);
  background: #fff;
}
.task .status-btn.is-done {
  background: var(--sc, #10b981);
  border-color: var(--sc, #10b981);
}

/* 第一行：名称 + 时间胶囊；第二行：截至交付 */
.task-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
}
.task-title {
  grid-column: 1;
  grid-row: 1;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.task-time {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tc-pill, #eef4ff);
  color: var(--tc, #3d6fd9);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.task-time svg { width: 10px; height: 10px; }
.task-sub {
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
}
.task-meta,
.task-del { display: none; }

/* 桌面端：面板被拉伸时，让「添加行程」沉到最底部 */
@media (min-width: 561px) {
  .daypanel .add-cta { margin-top: auto; }
  .daypanel .dp-scroll { padding-bottom: 12px; }
}

/* ============================================================
   v13 —— 添加行程弹窗（客户 / 平台下拉选择 + 就地新增）
   ============================================================ */

.am-layer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.am-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 44, 74, 0.26);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: amFade 0.18s ease both;
}
.am-card {
  position: relative;
  width: min(520px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -32px rgba(24, 44, 74, 0.5), 0 2px 8px rgba(24, 44, 74, 0.05);
  animation: amIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes amFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes amIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.am-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 13px;
  border-bottom: 1px solid var(--line-soft);
}
.am-headtext h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.am-headtext p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}
.am-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.am-close:hover { background: var(--paper-2); color: var(--ink); }

/* 表单本体：覆盖 .composer 的老样式 */
.am-form,
.am-form.composer {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 0;
  padding: 16px 20px 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  scrollbar-width: thin;
}

.am-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.am-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.am-input {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper-2);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.am-input::placeholder { color: var(--ink-3); }
.am-input:focus {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.14);
}

.am-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 4.4 6 7.8l3.4-3.4' fill='none' stroke='%238a93a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
}

.am-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.am-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.am-row .am-input { flex: 1 1 0; }
.am-row .am-select { flex: 0 0 92px; }
.am-dash {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ink-3);
}

/* 「＋ 添加客户 / 平台」小按钮 */
.am-addbtn {
  align-self: flex-start;
  margin-top: 1px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue-deep);
  cursor: pointer;
}
.am-addbtn:hover { color: var(--blue); text-decoration: underline; }
.am-addbtn[hidden] { display: none; }

.am-newbox {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  animation: amFade 0.16s ease both;
}
.am-newbox[hidden] { display: none; }
.am-newbox .am-input { flex: 1 1 auto; }
.am-ok {
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.am-money {
  position: relative;
  display: flex;
  align-items: center;
}
.am-yen {
  position: absolute;
  left: 12px;
  font-size: 13px;
  color: var(--ink-3);
  pointer-events: none;
}
.am-money .am-input { padding-left: 25px; }

.am-preview {
  margin: -3px 0 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-2);
}
.am-preview[hidden] { display: none; }
.am-preview b {
  font-size: 16px;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}
.am-preview span { font-size: 11px; color: var(--ink-3); }

/* 弹窗里的色块行 */
.am-form .cmp-colors { margin: 0; }
.am-form .cmp-swatches { gap: 7px; }

.am-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin-top: 2px;
  padding: 14px 0 20px;
  background: #fff;
  border-top: 1px solid var(--line-soft);
}
.am-cancel {
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.am-cancel:hover { background: var(--paper-2); }
.am-submit {
  flex: 1 1 auto;
  padding: 11px 18px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #6ea2f7 0%, #3d6fd9 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(61, 111, 217, 0.9);
}
.am-submit:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .am-layer { align-items: flex-end; padding: 0; }
  .am-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }
  .am-pair { grid-template-columns: 1fr; gap: 13px; }
  .am-row .am-select { flex: 0 0 84px; }
  .am-head { padding: 16px 18px 12px; }
  .am-form, .am-form.composer { padding: 14px 18px 0; }
  .am-foot { padding: 12px 0 18px; }
}

/* 弹窗内色块换行 + 手机端「添加客户/平台」加大点击区 */
.am-form .cmp-swatches { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 560px) {
  .am-addbtn { padding: 7px 0; font-size: 12px; }
  .am-form .cmp-swatches { row-gap: 10px; }
}

/* ============================================================
   v14 —— 弹窗配色调整：卡片纯白，选项框 #e4e4e4 淡灰
   ============================================================ */
.am-card { background: #ffffff; }
.am-input {
  /* 用 background-color，别用 background 简写，否则会把下拉箭头的背景图一起清掉 */
  background-color: #e4e4e4;
  border-color: transparent;
}
.am-input::placeholder { color: #8b9099; }
.am-input:focus {
  background-color: #e4e4e4;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.16);
}
.am-head,
.am-foot { background: #ffffff; }

/* ============================================================
   v15 —— 自绘下拉框（替代原生 select，弹窗里用）
   ============================================================ */

.ui-sel { position: relative; min-width: 0; }

.ui-sel-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background-color: #e4e4e4;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.ui-sel-btn:hover { background-color: #dcdcdc; }
.ui-sel-btn[aria-expanded='true'] {
  background-color: #e4e4e4;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.16);
}
.ui-sel-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-sel-text.is-empty { color: #8b9099; }
.ui-sel-chev {
  flex: 0 0 auto;
  color: #8b9099;
  transition: transform 0.18s ease;
}
.ui-sel-btn[aria-expanded='true'] .ui-sel-chev { transform: rotate(180deg); }

/* 浮层：挂到 body 上，fixed 定位 */
.ui-sel-pop {
  box-sizing: border-box;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(24, 44, 74, 0.3), 0 2px 6px rgba(24, 44, 74, 0.05);
  overscroll-behavior: contain;
  animation: uiPopIn 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ui-sel-pop[hidden] { display: none; }
.ui-sel-pop.is-up { animation-name: uiPopUp; }
@keyframes uiPopIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}
@keyframes uiPopUp {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.ui-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ui-opt:hover { background: #f3f5f8; }
.ui-opt.is-on {
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-weight: 600;
}
.ui-opt-tag {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
}
.ui-opt.is-on .ui-opt-tag { color: var(--blue); }

/* 时间 / 折扣：多列网格，比一长条好点 */
.ui-sel-pop.is-grid:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.ui-sel-pop.is-grid .ui-opt {
  justify-content: center;
  padding: 7px 4px;
  font-size: 12.5px;
}
.ui-sel-pop.is-grid .ui-opt-tag { display: none; }

/* 排期时间那一行：日期 + 两个时间下拉 */
.am-row .ui-sel { flex: 0 0 92px; }
@media (max-width: 560px) {
  .am-row .ui-sel { flex: 0 0 84px; }
}

/* 时间 / 折扣网格：单元格加高一点，别挤成一条线 */
.ui-sel-pop.is-grid .ui-opt {
  min-height: 32px;
  padding: 6px 4px;
}
.ui-sel-pop.is-grid { gap: 3px; }

/* ============================================================
   v16 —— 任务详情 / 编辑改成弹窗
   ============================================================ */

.dw-card { width: min(460px, 100%); }

.am-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 6px;
  scrollbar-width: thin;
}

.dw-body .dw-title {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
}
.dw-card .dw-pills { margin-bottom: 8px; }

.dw-card .dw-rows > div {
  min-height: 0;
  padding: 10px 0;
  align-items: center;
}
.dw-card .dw-rows dt {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ink-3);
}
.dw-card .dw-rows dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  font-size: 13px;
  color: var(--ink);
}
.dw-card .dw-rows > div:last-child { border-bottom: 0; }

.dw-foot { padding: 14px 0 20px; }
.dw-foot .dw-edit,
.dw-foot .dw-del,
.dw-foot .dw-apply,
.dw-foot .dw-cancel { height: 44px; font-size: 13.5px; }
.dw-foot .dw-edit { flex: 1 1 auto; }
.dw-foot .dw-del { flex: 0 0 96px; }
.dw-foot .dw-cancel { flex: 0 0 auto; padding: 0 22px; border-radius: 11px; }
.dw-foot .dw-save {
  flex: 1 1 auto;
  height: 44px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #6ea2f7 0%, #3d6fd9 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(61, 111, 217, 0.9);
}

/* 编辑表单的输入框跟添加弹窗统一成淡灰 */
.dw-card .dw-input {
  background-color: #e4e4e4;
  border-color: transparent;
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 13.5px;
}
.dw-card .dw-input:focus {
  background-color: #e4e4e4;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.16);
}
.dw-card .dw-date {
  background-color: #e4e4e4;
  border-color: transparent;
  border-radius: 9px;
}

/* ============================================================
   v17 —— 详情弹窗细节：日程彩色标注 / 预计金额 / 底部按钮收小居中
   ============================================================ */

.dw-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.dw-chip.is-time {
  background: #e8f7f0;
  color: #1c8a68;
}
.dw-sched {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.dw-estimate {
  color: var(--ink-2) !important;
  font-weight: 400;
  font-size: 12.5px;
}

/* 底部两个按钮：收小、居中 */
.dw-foot {
  justify-content: center;
  gap: 10px;
}
.dw-foot .dw-edit,
.dw-foot .dw-del,
.dw-foot .dw-apply {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 22px;
  font-size: 13px;
  border-radius: 10px;
}
.dw-foot .dw-edit svg { width: 12px; height: 12px; }

/* ============================================================
   v18 —— 任务卡片的圆圈改成「进度扇形填充」
   未开始=空白 / 进行中=1/3 橙 / 初稿=2/3 蓝 / 延期=整圈红 / 完成=绿+勾
   ============================================================ */
.task .status-btn {
  background: conic-gradient(var(--sc, #9aa5b5) 0 var(--p, 0%), #fff var(--p, 0%) 100%);
}
.task .status-btn.is-done {
  background: var(--sc, #10b981);
}

/* ============================================================
   v19 —— 设置里的「备份与恢复」
   ============================================================ */
.set-backup-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.set-backup {
  appearance: none;
  flex: 1 1 0;
  min-width: 110px;
  padding: 10px 14px;
  border: 1px solid var(--blue-line);
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.set-backup:hover { background: #dfeaff; }
.set-backup.is-ghost {
  background: #fff;
  color: var(--ink-2);
  border-color: var(--line);
}
.set-backup.is-ghost:hover { background: var(--paper-2); }