:root {
  --bg: #f6f8fb;
  --card: #ffffff;
  --border: #e6e9ef;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-soft: #eff4ff;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.05);

  /* 主题色：当前月=淡黄，上下月=淡蓝（格子底色尽量淡） */
  --cur-bg: #fdf6e3;
  --cur-chip: #fcd34d;
  --cur-fg: #7a5c00;
  --edge-bg: #eef5fd;

  /* 状态色（格子底色尽量淡） */
  --legal-bg: #e0f3e8;
  --legal-fg: #137333;
  --legal-line: #34a853;
  --holiday-bg: #eef9f1;
  --holiday-fg: #1e8e4e;
  --holiday-line: #7bc89a;
  --makeup-bg: #fdf0f0;
  --makeup-fg: #c0392b;
  --makeup-line: #e57f7f;
  --weekend-bg: #e9edf2;
  --weekend-fg: #94a3b8;
  --weekend-line: #d2d9e2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.back { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
.back:hover { color: var(--accent); }

.wrap {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 28px 48px;
}

/* 导航（今天 + 年份合并） */
.mg-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
/* 月份按钮 */
.months {
  margin-top: 14px;
}
.months-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.mg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mg-row + .mg-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.mg-year {
  width: 46px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  flex: none;
}
.mg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mbtn {
  min-width: 42px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.mbtn:hover { border-color: var(--accent); color: var(--accent); }
.mbtn.near {
  background: var(--edge-bg);
  border-color: #bcd4f5;
  color: var(--accent);
}
.mbtn.on {
  background: var(--cur-chip);
  border-color: #f0b429;
  color: var(--cur-fg);
  font-weight: 600;
}

.btn {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  padding: 8px 16px; border-radius: 9px; font-size: 14px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }

.spacer { flex: 1 1 auto; }
.status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.status a { color: var(--accent); }

/* 概览 */
.summary {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--text);
}
.summary .num { font-weight: 700; }
.summary .hl-legal { color: var(--legal-fg); }
.summary .hl-makeup { color: var(--makeup-fg); }
.summary .hl-rest { color: var(--muted); }

/* 连续三个月视图：单张整体卡片，所有日期连续排列；每月 1 号用月份标记区分 */
.cal3 {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.cal3 .cal-head { margin-bottom: 10px; }
.cal.cont .cell .name { overflow-wrap: anywhere; }
/* 每月 1 号的月份标记：全高、加粗、类背景水印（加强显示） */
.mo-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: rgba(37, 99, 235, .5);
  pointer-events: none;
  z-index: 0;
}
.mo-mark.on { color: rgba(170, 115, 0, .58); }
.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}
.cal-head span {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 0;
}
.cal-head span.we { color: #d93025; }

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
/* 月份交界行：上月末与新月份首周同处一行（月份「叠加」，无整行空白）。
   该行不做拉伸，新月份首周整格下移，形成上下错开。 */
.cell.mbrow { align-self: start; }
.cell.mstagger { margin-top: 20px; }   /* ≈ 半个方格高（格高 42px） */
.cell {
  position: relative;
  min-height: 42px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  background: #fff;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cell.empty { background: transparent; border-color: transparent; }
.cell .d { font-size: 13px; font-weight: 700; position: relative; z-index: 2; }
.cell .name {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 2;
}
.cell .badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 999px;
  font-weight: 600;
  z-index: 2;
}

/* 月份底色：当前月淡黄，上下月淡蓝（状态色会覆盖） */
.cell.m-cur { background: var(--cur-bg); }
.cell.m-prev, .cell.m-next { background: var(--edge-bg); }

/* 周末底色：普通周末以此区分（置于假日/补班之前，故优先级更低） */
.cell.weekend { background: var(--weekend-bg); border-left-color: var(--weekend-line); }
.badge.rest { background: #eef2f7; color: var(--weekend-fg); }

/* 状态配色（优先级高于月份与周末） */
.cell.holiday { background: var(--holiday-bg); border-left-color: var(--holiday-line); }
.cell.holiday .name { color: var(--holiday-fg); }
.cell.holiday.legal { background: var(--legal-bg); border-left-color: var(--legal-line); }
.cell.holiday.legal .name { color: var(--legal-fg); }

.cell.makeup { background: var(--makeup-bg); border-left-color: var(--makeup-line); }
.cell.makeup .name { color: var(--makeup-fg); }
.badge.work { background: var(--makeup-fg); color: #fff; }

.cell.workday { border-left-color: var(--border); }   /* 工作日跟随月份底色 */

.badge.legal { background: var(--legal-fg); color: #fff; position: relative; margin-top: 6px; align-self: flex-start; z-index: 2; }

/* 今天 */
.cell.today {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
}
.cell.today .d::after {
  content: " 今天";
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

/* 图例 */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 16px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--muted);
}
.legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.legend .lg i {
  width: 14px; height: 14px; border-radius: 4px; display: inline-block;
  border: 1px solid var(--border); border-left-width: 3px;
}
.legend .lg.legal i { background: var(--legal-bg); border-left-color: var(--legal-line); }
.legend .lg.holiday i { background: var(--holiday-bg); border-left-color: var(--holiday-line); }
.legend .lg.makeup i { background: var(--makeup-bg); border-left-color: var(--makeup-line); }
.legend .lg.weekend i { background: var(--weekend-bg); border-left-color: var(--weekend-line); }
.legend .lg.workday i { background: #fff; border-left-color: var(--border); }

/* 清单 */
.list {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
  font-size: 14px;
}
.list h2 { font-size: 15px; margin: 0 0 10px; }
.list ul { list-style: none; margin: 0; padding: 0; }
.list li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.list li:last-child { border-bottom: none; }
.list .tag {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}
.list .tag.h { background: var(--legal-bg); color: var(--legal-fg); }
.list .tag.m { background: var(--makeup-bg); color: var(--makeup-fg); }
.list .date { color: var(--muted); font-size: 13px; white-space: nowrap; }
.list .desc { color: var(--text); }
.list .empty-note { color: var(--muted); }

.footer-note { margin-top: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.footer-note a { color: var(--accent); }

@media (max-width: 600px) {
  .wrap { padding: 12px 10px 32px; }
  .cal3 { padding: 10px; }
  .cal, .cal-head { gap: 3px; }
  .cal-head span { font-size: 12px; padding: 2px 0; }

  .cell {
    min-height: 40px;
    padding: 3px 3px;
    border-left-width: 2px;
    border-radius: 7px;
  }
  .cell .d { font-size: 12px; }
  .cell .name { font-size: 10px; margin-top: 3px; line-height: 1.2; }
  .cell .badge { font-size: 9px; padding: 0 4px; right: 2px; top: 2px; bottom: auto; }
  .cell.today .d::after { content: ""; }   /* 窄屏省略「今天」文字，保留描边 */
  .cell.mstagger { margin-top: 18px; }   /* ≈ 半个方格高（窄屏格高 40px） */

  /* 月份水印在窄格内收小，避免溢出 */
  .mo-mark { font-size: 13px; }

  /* 月份导航：年份独占一行，按钮更紧凑 */
  .mg-year { width: 100%; }
  .mg-btns { gap: 6px; }
  .mbtn { min-width: 0; padding: 6px 9px; font-size: 12px; }

  .summary { font-size: 13px; padding: 12px 14px; }
  .list { font-size: 13px; padding: 14px 14px; }
  .legend { gap: 8px 14px; font-size: 12px; }
}