:root {
  --bg1: #fff4fb;
  --bg2: #eef6ff;
  --card: rgba(255, 255, 255, 0.82);
  --card-solid: #ffffff;
  --ink: #5d5566;
  --ink-soft: #9a93a6;
  --pink: #f7a8c4;
  --pink-deep: #ef83ac;
  --mint: #a8e0cf;
  --lav: #c9b6e4;
  --butter: #ffe2a8;
  --peach: #ffc9a8;
  --line: rgba(180, 160, 190, 0.18);
  --shadow: 0 10px 30px rgba(180, 150, 190, 0.18);
  --radius: 18px;
  --scroll: #f7b7d2;
  --scroll-track: #fceaf3;
  --macaron-grad: linear-gradient(135deg, #ffd9ec 0%, #d8ecff 50%, #d6f5e6 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--macaron-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ===== 自定义滚动条（细圆角主题色） ===== */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) var(--scroll-track); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 10px; border: 2px solid var(--scroll-track); }
::-webkit-scrollbar-thumb:hover { background: var(--pink-deep); }

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-x: hidden; /* 防止长文本把页面撑出横向滚动 */
}

/* ===== 去除点击蓝色高亮 / 直角焦点框（保留键盘可达焦点环） ===== */
* { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
/* 仅键盘聚焦时用主题色显示焦点环，鼠标点击不再出现蓝色直角框 */
:focus-visible {
  outline: 2px solid var(--pink-deep);
  outline-offset: 2px;
  border-radius: 10px;
}
/* 可触发动作的元素禁止文本选定高亮（防误选蓝底） */
button, .cal-cell, .clickable, [data-explain], .dir, .zs-card, .yiji, .today-pill, .jump-go {
  -webkit-user-select: none; user-select: none;
}

.layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.panel {
  background: var(--card);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  min-width: 0; /* grid 子元素默认 min-width:auto，长文本会撑破视口 */
}

/* ===== 月历 ===== */
.calendar-panel { display: flex; flex-direction: column; }
.cal-toolbar {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; gap: 8px;
}
.cal-title {
  font-size: 20px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.today-pill {
  border: none; border-radius: 999px; padding: 5px 14px;
  background: var(--mint); color: #2f6b56; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform .15s, filter .15s;
}
.today-pill:hover { filter: brightness(1.05); transform: translateY(-1px); }

.clickable-title { cursor: pointer; user-select: none; }
.clickable-title:active { opacity: .65; }

.jump-panel {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  width: 100%; margin-top: 10px; padding: 8px 10px;
  background: var(--pink-soft, #fff0f6);
  border: 1px solid rgba(214,51,108,.16);
  border-radius: 12px;
}
.jump-panel select {
  font-size: 14px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid rgba(214,51,108,.28); background: #fff; color: var(--ink);
}
.jump-go {
  font-size: 14px; padding: 6px 16px; border: none; border-radius: 8px;
  background: var(--pink, #d6336c); color: #fff; font-weight: 700; cursor: pointer;
}
.jump-go:active { filter: brightness(.95); }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: 6px;
}
.cal-weekdays span:first-child, .cal-weekdays span:last-child { color: var(--pink-deep); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-cell {
  position: relative; aspect-ratio: 1 / 0.92;
  border: 1px solid transparent; border-radius: 14px;
  background: var(--card-solid); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; transition: transform .12s, box-shadow .12s, background .12s;
  font-family: inherit; color: var(--ink);
}
.cal-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(180,150,190,.22); }
.cal-cell.other-month { opacity: .38; background: transparent; }
.cal-cell .solar-num { font-size: 16px; font-weight: 600; }
.cal-cell .lunar-num { font-size: 11px; color: var(--ink-soft); }
.cal-cell .lunar-num.leap { color: var(--pink-deep); }
.cal-cell.today { border-color: var(--pink); }
.cal-cell.selected {
  background: linear-gradient(135deg, var(--pink), var(--lav));
  color: #fff; box-shadow: 0 8px 18px rgba(200,140,200,.4);
}
.cal-cell.selected .lunar-num, .cal-cell.selected .solar-num { color: #fff; }

/* ===== 详情 ===== */
.detail-panel { display: flex; flex-direction: column; gap: 16px; }
.detail-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.d-big {
  font-size: 52px; font-weight: 800; line-height: 1;
  background: var(--macaron-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  min-width: 64px; text-align: center; flex: none;
}
.d-sub { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.d-greg, .d-lunar, .d-ganzhi, .d-zodiac { overflow-wrap: anywhere; }
.d-greg { font-size: 15px; font-weight: 700; }
.d-lunar { font-size: 14px; color: var(--ink); }
.d-ganzhi { font-size: 13px; color: var(--pink-deep); font-weight: 600; }
.d-zodiac { font-size: 13px; color: var(--ink-soft); }

.group-title {
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  letter-spacing: .12em; margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
}
.group-title::before { content: ""; width: 4px; height: 14px; border-radius: 4px; background: var(--pink); }

.yiji-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yiji {
  border: none; border-radius: 14px; padding: 14px; cursor: pointer; text-align: left;
  display: flex; gap: 10px; align-items: flex-start; font-family: inherit; color: var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.yiji.good { background: linear-gradient(135deg, #e7faf1, #d6f5e6); }
.yiji.bad { background: linear-gradient(135deg, #ffeef3, #ffe0e9); }
.yiji:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(180,150,190,.2); }
.yiji-label {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 15px;
}
.yiji.good .yiji-label { background: #4cae86; }
.yiji.bad .yiji-label { background: var(--pink-deep); }
.yiji-text { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }

/* 方位宫格 */
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dir {
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 10px; text-align: center;
}
.dir.clickable { cursor: pointer; transition: border-color .15s, transform .12s; }
.dir.clickable:hover { border-color: var(--pink); transform: translateY(-1px); }
.dir-label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.dir-value { font-size: 15px; font-weight: 700; color: var(--pink-deep); }

/* 值神 */
.zhishen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.zs-card {
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.zs-card.clickable { cursor: pointer; transition: border-color .15s, transform .12s; }
.zs-card.clickable:hover { border-color: var(--mint); transform: translateY(-1px); }
.zs-label { font-size: 12px; color: var(--ink-soft); }
.zs-value { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.zs-value.zs-peng { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.zs-tag {
  align-self: flex-start; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--butter); color: #8a6d2f; font-weight: 700;
}

/* 节气 */
.solar-list { display: flex; flex-direction: column; gap: 8px; }
.solar {
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-size: 13px; color: var(--ink);
}
.solar.clickable { cursor: pointer; }
.solar.clickable:hover { border-color: var(--mint); }
.solar-active {
  background: linear-gradient(135deg, #eaf3ff, #e7faf1);
  border-color: var(--mint); font-weight: 600; color: #2f6b56;
}

/* ===== 页脚 ===== */
.site-footer {
  grid-column: 1 / -1; /* 跨满整行（桌面双栏下也在页面最底部） */
  text-align: center;
  padding: 14px 0 4px;
  font-size: 12px;
}
.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: .5px;
  transition: color .15s;
}
.site-footer a:hover { color: var(--pink-deep); }

/* ===== 弹窗 ===== */
.modal {
  position: fixed; inset: 0; background: rgba(90, 70, 100, .35);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
  backdrop-filter: blur(3px);
}
.modal-content {
  background: #fff; border-radius: 20px; max-width: 460px; width: 100%;
  max-height: 80vh; overflow-y: auto; padding: 22px; position: relative;
  box-shadow: 0 20px 50px rgba(120,90,130,.3);
}
.modal-content h2 { font-size: 17px; margin-bottom: 12px; color: var(--ink); }
.close { position: absolute; top: 14px; right: 16px; font-size: 24px; cursor: pointer; color: var(--ink-soft); }
.close-btn { border: none; background: none; font-size: 24px; cursor: pointer; color: var(--ink-soft); position: absolute; top: 10px; right: 14px; }
.note { font-size: 14px; line-height: 1.8; color: var(--ink); }
.explanation-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.explanation-term { font-weight: 700; color: var(--pink-deep); margin-bottom: 4px; }
.explanation-desc { font-size: 13px; line-height: 1.7; color: var(--ink); }
.card-explanation-text { font-size: 14px; line-height: 1.8; }

/* ===== 平板及以上：双栏 + 节气落在日历下方，平衡左栏留白 ===== */
@media (min-width: 760px) {
  .layout {
    grid-template-columns: minmax(360px, 1fr) 1fr;
    align-items: start;
    grid-template-areas:
      "cal    detail"
      "solar  detail";
  }
  .calendar-panel { grid-area: cal; }
  .detail-panel { grid-area: detail; }
  .solar-section { grid-area: solar; }
  .dir-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 桌面：固定月历 + 详情 ===== */
@media (min-width: 1024px) {
  .layout { grid-template-columns: 420px 1fr; gap: 22px; padding: 28px 18px; }
  .calendar-panel { position: sticky; top: 28px; }
}

/* ===== 手机：详情宫格紧凑，一行两个 ===== */
@media (max-width: 560px) {
  .layout { padding: 12px; gap: 12px; }
  .panel { padding: 14px; border-radius: 16px; }
  .cal-toolbar { margin-bottom: 10px; }
  .cal-title { font-size: 18px; }
  .cal-grid { gap: 4px; }
  .cal-cell { border-radius: 11px; }
  .cal-cell .solar-num { font-size: 15px; }
  .cal-cell .lunar-num { font-size: 10px; }

  .detail-head { gap: 12px; }
  .d-big { font-size: 40px; min-width: 50px; }

  /* 紧凑：方位与值神均一行两个 */
  .dir-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dir { padding: 10px 8px; }
  .zhishen-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .yiji-row { gap: 8px; }
  .yiji { padding: 12px; }

  .group-title { margin-top: 6px; }
}

@media (max-width: 380px) {
  .cal-cell .lunar-num { display: none; }
  .dir-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 休息标记：右上角小圆点（绿=法定休 / 粉=周末） ===== */
.cal-cell { position: relative; }
.cal-dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  pointer-events: none; user-select: none;
}
.cal-dot.rest { background: #2fb380; }       /* 法定节假日休息 */
.cal-dot.weekend { background: #ff9bb8; }    /* 周六/周日休息 */
/* 选中（粉色底）时给圆点加白环，保证可见 */
.cal-cell.selected .cal-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }

/* 详情节假日状态 */
.d-holiday { font-size: 13px; font-weight: 700; margin-top: 3px; min-height: 16px; }
.d-holiday.rest { color: #2fb380; }
.d-holiday.work { color: #8a93a6; }
.d-holiday.weekend { color: var(--ink-soft); font-weight: 600; }