:root {
  --bg: #ffffff;
  --panel: #f7f7f8;
  --text: #000000;
  --muted: #666666;
  --accent: #0ea5e9;
  --today: #2563eb;
  --festival: #b45309;
  --other: #999999;
  --grid: #e5e7eb;
  --selected: #87cefa;
  --selected-legal: #fff3bf;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei","Noto Sans CJK SC",sans-serif;
  font-size: 18px;
}

.calendar-app {
  max-width: 960px;
  margin: 24px auto;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--grid);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar button, .toolbar select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--grid);
  padding: 8px 12px;
  border-radius: 8px;
}
.toolbar button:hover, .toolbar select:hover { border-color: #cbd5e1; }
.toolbar .selectors { margin-left: auto; display: flex; gap: 8px; }

.meta { margin: 12px 2px 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.meta-date { font-weight: 600; }
.meta-extra { color: var(--muted); }

table.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.calendar thead th {
  color: var(--muted);
  font-weight: 600;
  padding: 8px 0;
}
table.calendar tbody td {
  border-top: 1px solid var(--grid);
  border-left: 1px solid var(--grid);
  vertical-align: top;
  height: 110px;
  padding: 6px;
}
/* 周末（周日/周六）文字红色 */
table.calendar tbody td:nth-child(1) .solar,
table.calendar tbody td:nth-child(1) .lunar,
table.calendar tbody td:nth-child(7) .solar,
table.calendar tbody td:nth-child(7) .lunar { color: #ff0000; }
table.calendar tbody tr td:last-child { border-right: 1px solid var(--grid); }
table.calendar tbody tr:last-child td { border-bottom: 1px solid var(--grid); }

.cell {
  position: relative;
  height: 100%;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cell:hover { background: rgba(2,132,199,0.06); }

.cell .solar { font-size: 34px; font-weight: 700; color: #000000; }
.cell .lunar { font-size: 14px; color: #000000; }
.cell .marks { margin-top: auto; font-size: 13px; color: var(--festival); }

.is-today .solar { color: var(--today); }
.is-festival .lunar, .is-festival .solar { color: var(--festival); }
.is-other { color: var(--other); }
/* 选中日期天蓝色背景 */
.is-selected .cell { background: var(--selected); }
/* 今天米黄色背景 */
.is-today .cell { background: var(--selected-legal); }
/* 法定节假日米黄色背景 */
.is-legal .cell { background: var(--selected-legal); }

.legend { margin-top: 12px; display: flex; gap: 12px; color: var(--muted); }
.legend .tag { display: inline-flex; align-items: center; gap: 6px; }
.legend .tag::before { content: " "; width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend .tag-today::before { background: var(--today); }
.legend .tag-festival::before { background: var(--festival); }
.legend .tag-other::before { background: var(--other); }

/* 详情面板 */
.details {
  margin-top: 16px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--grid);
  border-radius: 10px;
}
.details-title { font-weight: 700; margin-bottom: 8px; color: #000000; }
.detail-row { display: grid; grid-template-columns: 80px 1fr; padding: 6px 0; border-top: 1px dashed var(--grid); }
.detail-row:first-of-type { border-top: none; }
.detail-row .label { color: var(--muted); }

@media (max-width: 720px) {
  table.calendar tbody td { height: 80px; padding: 4px; }
  .cell .lunar { display: none; }
}