/* ============================================
 * 观鼎历 · 万年历样式表
 * 设计风格：华为日历 × 传统文化美学
 * 特征：圆润卡片、大面积留白、柔和阴影、昼夜双模
 * ============================================ */

:root {
  --wnl-primary: #45B5AA;
  --wnl-primary-dark: #2D8A7A;
  --wnl-primary-light: rgba(69, 181, 170, 0.12);
  --wnl-gold: #D4A843;
  --wnl-gold-light: #E8C46A;
  --wnl-bg: #ffffff;
  --wnl-card-bg: #ffffff;
  --wnl-text: #1c1c1e;
  --wnl-text-secondary: #5c5c60;
  --wnl-text-light: #9a9aa0;
  --wnl-border: #e6e6e8;
  --wnl-border-light: #f1f1f3;
  --wnl-today: #45B5AA;
  --wnl-today-text: #fff;
  --wnl-selected: #D4A843;
  --wnl-selected-text: #fff;
  --wnl-hover: rgba(69, 181, 170, 0.08);
  --wnl-red: #e06050;
  --wnl-cell-size: 48px;
  --wnl-font: 'Noto Serif SC', 'SimSun', 'STSong', serif;
  --wnl-font-sans: 'Noto Sans SC', 'PingFang SC', -apple-system, sans-serif;
  --wnl-radius: 16px;
  --wnl-radius-sm: 10px;
  --wnl-shadow: 0 2px 16px rgba(0,0,0,0.06);
  --wnl-shadow-lg: 0 4px 24px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --wnl-bg: #101012;
  --wnl-card-bg: #1a1a1c;
  --wnl-text: #efeff1;
  --wnl-text-secondary: #b6b6b8;
  --wnl-text-light: #828284;
  --wnl-border: #2a2a2c;
  --wnl-border-light: #232325;
  --wnl-hover: rgba(69, 181, 170, 0.12);
  --wnl-red: #ff7a6a;
  --wnl-shadow: 0 2px 16px rgba(0,0,0,0.25);
  --wnl-shadow-lg: 0 4px 24px rgba(0,0,0,0.35);
}

/* 万年历统一黑白背景：覆盖 theme.css 的 body 底色与金色点缀叠层，日夜均走 --wnl-* 令牌 */
[data-theme="light"] body,
[data-theme="dark"] body {
  background: var(--wnl-bg);
}
[data-theme="light"] body::before {
  background: none;
}

/* 护眼绿色（默认开启；关闭后回到纯净黑白色）——仅作用于昼模式 */
[data-theme="light"][data-protect="on"] {
  --wnl-bg: #CDE8D1;
  --wnl-card-bg: #D9F0DC;
  --wnl-text: #1c1c1e;
  --wnl-text-secondary: #4a5a4c;
  --wnl-text-light: #7a8a7c;
  --wnl-border: #b8d3bc;
  --wnl-border-light: #c7e2cb;
}

/* ----- 页面容器 ----- */
.wnl-page {
  font-family: var(--wnl-font-sans);
  background: var(--wnl-bg);
  color: var(--wnl-text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  padding-bottom: 40px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ===== 顶部品牌区（今天左 / 观鼎山中 / 齿轮右，三元素） ===== */
.wnl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wnl-card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--wnl-border-light);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s;
  max-width: 480px;
  margin: 0 auto;
  height: auto;
}

.wnl-header-left {
  display: flex;
  align-items: center;
  width: 56px;
}

/* 品牌字：观鼎山（居中，鼎字即高度基准） */
.wnl-header-brand {
  font-family: var(--wnl-font);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--wnl-primary-dark);
  cursor: pointer;
  user-select: none;
}

.wnl-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 56px;
}

/* 右上角设置齿轮 */
.wnl-header-gear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--wnl-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.wnl-header-gear:hover {
  background: var(--wnl-hover);
  color: var(--wnl-primary);
  transform: rotate(45deg);
}

/* ===== 干支栏 ===== */
.wnl-ganzhi-bar {
  text-align: center;
  padding: 10px 20px 0;
  font-size: 0.78rem;
  color: var(--wnl-text-secondary);
  font-family: var(--wnl-font);
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* ===== 品牌大字 ===== */
.wnl-brand {
  text-align: center;
  padding: 2px 20px 0;
  font-family: var(--wnl-font);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--wnl-primary);
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* 抵消末尾 letter-spacing 造成的偏移 */
  user-select: none;
}

/* ===== 年月导航（华为风格） ===== */
.wnl-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 20px 6px;
}

.wnl-nav-arrow {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--wnl-card-bg);
  color: var(--wnl-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: var(--wnl-shadow);
}

.wnl-nav-arrow:hover {
  background: var(--wnl-hover);
  color: var(--wnl-primary);
  transform: scale(1.05);
}

.wnl-nav-arrow:active {
  transform: scale(0.95);
}

.wnl-month-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  min-width: 160px;
}

.wnl-month-year {
  font-size: 0.78rem;
  color: var(--wnl-text-secondary);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.wnl-month-text {
  font-family: var(--wnl-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wnl-text);
  line-height: 1.3;
  transition: color 0.2s;
}

.wnl-month-title-wrap:hover .wnl-month-text {
  color: var(--wnl-primary);
}

/* ===== 星期头 ===== */
.wnl-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 10px 20px 4px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.wnl-weekday {
  padding: 6px 0;
  font-size: 0.75rem;
  color: var(--wnl-text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.wnl-weekday--sun,
.wnl-weekday--sat {
  color: var(--wnl-red);
}

/* ===== 日期网格容器 ===== */
.wnl-grid-wrap {
  overflow: hidden;
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  touch-action: pan-y;
}

.wnl-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 2px 20px;
  transition: opacity 0.25s ease;
}

.wnl-grid--animating {
  opacity: 0.6;
  transform: scale(0.98);
}

/* ===== 日期单元格（华为圆润风格） ===== */
.wnl-cell {
  position: relative;
  min-height: 58px;
  padding: 4px 0 3px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--wnl-border);
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  -webkit-tap-highlight-color: transparent;
}

.wnl-cell:hover {
  background: var(--wnl-hover);
}

.wnl-cell:active {
  transform: scale(0.92);
}

.wnl-cell--other-month {
  opacity: 0.15;
  pointer-events: none;
}

/* 三行结构：第一行 公历/农历（需求8） */
.wnl-cell-row1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.1;
}

.wnl-cell-row1 .wnl-cell-solar {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wnl-text);
  font-family: var(--wnl-font-sans);
}

/* 农历：竖排 */
.wnl-cell-row1 .wnl-cell-lunar {
  font-size: 0.624rem;
  color: var(--wnl-text-light);
  font-family: var(--wnl-font);
  font-weight: 700;
  writing-mode: vertical-rl;
  letter-spacing: 0.02em;
}

.wnl-cell--other .wnl-cell-row1 .wnl-cell-solar,
.wnl-cell-solar--other {
  font-size: 0.8rem;
  color: var(--wnl-text-light);
}

/* 今天：深蓝色方框线略小于日框格（需求9，非圆形） */
.wnl-cell--today {
  border: 1.5px solid var(--wnl-primary-dark);
  border-radius: 8px;
  background: var(--wnl-primary-light);
}

.wnl-cell--today .wnl-cell-solar {
  color: var(--wnl-primary-dark);
  font-weight: 700;
}

/* 选中：金色方框线 */
.wnl-cell--selected {
  border: 1.5px solid var(--wnl-gold);
  border-radius: 8px;
  background: rgba(212, 168, 67, 0.10);
}

.wnl-cell--selected .wnl-cell-solar {
  color: var(--wnl-gold);
  font-weight: 700;
}

/* 朔/望标识：放格子边上（需求9） */
.wnl-cell-shuo {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.5rem;
  color: var(--wnl-red);
  font-weight: 600;
  line-height: 1;
}

/* 节气/节日角标（格子上角） */
.wnl-cell-corner {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.5rem;
  color: var(--wnl-red);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wnl-cell-corner--festival {
  color: #E85D4A;
}

/* 干支（第二行） */
.wnl-cell-ganzhi {
  font-size: 0.625rem;
  color: var(--wnl-text-secondary);
  line-height: 1.15;
  font-family: var(--wnl-font);
  font-weight: 700;
}

/* 斗+建（第三行，星宿首字 + 建除） */
.wnl-cell-doujian {
  font-size: 0.625rem;
  color: var(--wnl-primary);
  line-height: 1.15;
  font-family: var(--wnl-font);
  font-weight: 700;
}

/* ============================================
 * 月视图日格：常规 / 加高 两种状态（A：上下滑切换）
 * 常规（收起）：公历/农历 + 节气/节日；隐藏 干支/宿建
 * 加高（展开）：完整显示全部内容
 * ============================================ */
.wnl-month-grid .wnl-cell {
  min-height: 40px;
  padding: 2px 0;
}
.wnl-month-grid .wnl-cell-ganzhi,
.wnl-month-grid .wnl-cell-doujian {
  display: none;
}
/* 节气/节日：公历农历下方一行（B） */
.wnl-cell-jieqi {
  font-size: 0.52rem;
  font-weight: 600;
  color: var(--wnl-red);
  font-family: var(--wnl-font);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 98%;
  margin: 1px auto 0;
}
.wnl-cell-jieqi--festival {
  color: #E85D4A;
}
/* 加高（展开）：完整显示，格子变高 */
.wnl-month-grid.is-expanded .wnl-cell {
  min-height: 58px;
  padding: 3px 0;
}
.wnl-month-grid.is-expanded .wnl-cell-ganzhi,
.wnl-month-grid.is-expanded .wnl-cell-doujian {
  display: block;
}

/* 深色模式：增强日历格内文字对比度 */
[data-theme="dark"] .wnl-page .wnl-cell--today .wnl-cell-solar {
  color: #6fd0c4;
}
[data-theme="dark"] .wnl-page .wnl-cell--selected .wnl-cell-solar {
  color: var(--wnl-gold-light);
}

/* 节气格（格内氛围） */
.wnl-cell--has-jieqi .wnl-cell-ganzhi {
  color: var(--wnl-gold);
  font-weight: 600;
}

/* 周末红字 */
.wnl-cell[data-day-of-week="0"] .wnl-cell-row1 .wnl-cell-solar,
.wnl-cell[data-day-of-week="6"] .wnl-cell-row1 .wnl-cell-solar {
  color: var(--wnl-red);
}

.wnl-cell--today[data-day-of-week="0"] .wnl-cell-row1 .wnl-cell-solar,
.wnl-cell--today[data-day-of-week="6"] .wnl-cell-row1 .wnl-cell-solar,
.wnl-cell--selected[data-day-of-week="0"] .wnl-cell-row1 .wnl-cell-solar,
.wnl-cell--selected[data-day-of-week="6"] .wnl-cell-row1 .wnl-cell-solar {
  color: var(--wnl-primary-dark);
}

/* ===== 详情面板（华为底部卡片风格） ===== */
.wnl-detail {
  max-width: 480px;
  margin: 10px auto 0;
  padding: 0 20px;
}

.wnl-detail-card {
  background: var(--wnl-card-bg);
  border: 1px solid var(--wnl-border-light);
  border-radius: var(--wnl-radius);
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: var(--wnl-shadow);
  animation: wnl-detail-in 0.35s ease;
}

@keyframes wnl-detail-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 选中日期头部 */
.wnl-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wnl-border-light);
}

.wnl-detail-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wnl-detail-solar {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--wnl-font-sans);
  color: var(--wnl-text);
}

.wnl-detail-lunar {
  font-size: 0.85rem;
  color: var(--wnl-text-secondary);
  font-family: var(--wnl-font);
}

.wnl-detail-luck {
  padding: 3px 14px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--wnl-font);
  white-space: nowrap;
}

.wnl-detail-luck--good {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2e7d32;
}
.wnl-detail-luck--bad {
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
  color: #c62828;
}
.wnl-detail-luck--normal {
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  color: #f57f17;
}

[data-theme="dark"] .wnl-detail-luck--good {
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  color: #a5d6a7;
}
[data-theme="dark"] .wnl-detail-luck--bad {
  background: linear-gradient(135deg, #b71c1c, #c62828);
  color: #ef9a9a;
}
[data-theme="dark"] .wnl-detail-luck--normal {
  background: linear-gradient(135deg, #e65100, #f57f17);
  color: #ffe082;
}

/* 四柱八字 */
.wnl-detail-sizhu {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.wnl-sizhu-item {
  background: var(--wnl-hover);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--wnl-font);
  color: var(--wnl-text);
  border: 1px solid var(--wnl-border-light);
  flex: 1;
  text-align: center;
  min-width: 60px;
}

.wnl-sizhu-label {
  font-size: 0.6rem;
  color: var(--wnl-text-secondary);
  margin-right: 3px;
  font-family: var(--wnl-font-sans);
  font-weight: 500;
}

/* 信息网格 */
.wnl-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.wnl-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--wnl-bg);
  border-radius: var(--wnl-radius-sm);
  transition: background 0.3s;
}

.wnl-info-label {
  font-size: 0.62rem;
  color: var(--wnl-text-secondary);
  font-family: var(--wnl-font-sans);
  font-weight: 500;
}

.wnl-info-value {
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--wnl-font);
}

/* 宜忌 */
.wnl-yi-ji {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.wnl-yi, .wnl-ji {
  flex: 1;
}

.wnl-yi-title, .wnl-ji-title {
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: var(--wnl-font-sans);
}

.wnl-yi-title { color: #2e7d32; }
.wnl-ji-title { color: #c62828; }

.wnl-yi-tags, .wnl-ji-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wnl-tag {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-family: var(--wnl-font);
  font-weight: 500;
}

.wnl-tag--yi {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.wnl-tag--ji {
  background: #fce4ec;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

[data-theme="dark"] .wnl-tag--yi {
  background: #1b5e20;
  color: #a5d6a7;
  border-color: #2e7d32;
}
[data-theme="dark"] .wnl-tag--ji {
  background: #b71c1c;
  color: #ef9a9a;
  border-color: #c62828;
}

/* 冲煞 + 星宿 + 建星 + 纳音 */
.wnl-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.wnl-meta-item {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  background: var(--wnl-bg);
  border: 1px solid var(--wnl-border-light);
  font-family: var(--wnl-font);
  color: var(--wnl-text-secondary);
  font-weight: 500;
}

/* 节气标识 */
.wnl-jieqi-detail {
  margin-top: 10px;
  margin-bottom: 10px;
}

.wnl-jieqi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(212,168,67,0.15), rgba(69,181,170,0.1));
  color: var(--wnl-gold);
  border: 1px solid rgba(212,168,67,0.25);
  font-family: var(--wnl-font);
}

/* 子午流注折叠面板 */
.wnl-liuzhu-section {
  margin-top: 12px;
}

.wnl-liuzhu-toggle {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wnl-border-light);
  border-radius: var(--wnl-radius-sm);
  background: var(--wnl-bg);
  color: var(--wnl-text);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wnl-font-sans);
  transition: all 0.2s;
}

.wnl-liuzhu-toggle:hover {
  background: var(--wnl-hover);
  border-color: var(--wnl-primary);
}

.wnl-liuzhu-toggle .wnl-arrow {
  transition: transform 0.3s;
  font-size: 0.65rem;
}

.wnl-liuzhu-toggle--open .wnl-arrow {
  transform: rotate(180deg);
}

.wnl-liuzhu-body {
  display: none;
  padding: 12px 0 0;
}

.wnl-liuzhu-body--open {
  display: block;
}

.wnl-liuzhu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.wnl-liuzhu-item {
  padding: 8px 6px;
  border-radius: var(--wnl-radius-sm);
  background: var(--wnl-bg);
  border: 1px solid var(--wnl-border-light);
  text-align: center;
  font-size: 0.68rem;
  transition: all 0.2s;
}

.wnl-liuzhu-item:hover {
  background: var(--wnl-hover);
  border-color: var(--wnl-primary);
  transform: translateY(-1px);
}

.wnl-liuzhu-time {
  font-size: 0.58rem;
  color: var(--wnl-text-secondary);
  margin-bottom: 2px;
  font-weight: 500;
}

.wnl-liuzhu-name {
  font-weight: 700;
  font-family: var(--wnl-font);
  font-size: 0.72rem;
}

.wnl-liuzhu-action {
  font-size: 0.6rem;
  color: var(--wnl-text-secondary);
  margin-top: 1px;
}

/* 十二建星颜色 */
.wnl-jianchu--good { color: #2e7d32; }
.wnl-jianchu--bad { color: #c62828; }

/* 收藏按钮 */
.wnl-btn-fav {
  width: 32px;
  height: 32px;
  border: 1px solid var(--wnl-border-light);
  border-radius: 50%;
  background: transparent;
  color: var(--wnl-text-secondary);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.wnl-btn-fav:hover {
  color: #e04040;
  border-color: #e04040;
}
.wnl-btn-fav--active {
  color: #e04040;
  border-color: #e04040;
  background: rgba(224,64,64,0.1);
}

/* ===== 页脚 ===== */
.wnl-footer {
  text-align: center;
  padding: 7px 20px 20px;
  font-size: 0.65rem;
  color: var(--wnl-text-light);
  letter-spacing: 0.05em;
}

/* ===== 加载动画 ===== */
.wnl-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  grid-column: 1 / -1;
}

.wnl-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--wnl-border-light);
  border-top-color: var(--wnl-primary);
  border-radius: 50%;
  animation: wnl-spin 0.7s linear infinite;
}

@keyframes wnl-spin {
  to { transform: rotate(360deg); }
}

/* ===== 年选择器下拉 ===== */
.wnl-year-picker {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wnl-card-bg);
  border: 1px solid var(--wnl-border);
  border-radius: var(--wnl-radius);
  box-shadow: var(--wnl-shadow-lg);
  z-index: 60;
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
  min-width: 140px;
  display: none;
  scrollbar-width: thin;
}

.wnl-year-picker::-webkit-scrollbar {
  width: 4px;
}
.wnl-year-picker::-webkit-scrollbar-thumb {
  background: var(--wnl-border);
  border-radius: 2px;
}

.wnl-year-picker--open {
  display: block;
  animation: wnl-picker-in 0.15s ease;
}

@keyframes wnl-picker-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.wnl-year-picker-item {
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 8px;
  text-align: center;
  font-size: 0.9rem;
  font-family: var(--wnl-font-sans);
  transition: all 0.12s;
  color: var(--wnl-text);
}

.wnl-year-picker-item:hover {
  background: var(--wnl-hover);
  color: var(--wnl-primary);
}

.wnl-year-picker-item--active {
  background: var(--wnl-primary);
  color: #fff;
  font-weight: 600;
}

.wnl-year-picker-item--active:hover {
  color: #fff;
}

/* ===== 响应式 ===== */
@media (max-width: 480px) {
  .wnl-page {
    max-width: 100%;
  }

  .wnl-month-text {
    font-size: 1.3rem;
  }

  .wnl-grid {
    padding: 2px 8px;
    gap: 1px;
  }

  .wnl-cell {
    min-height: 46px;
    padding: 4px 0;
  }

  .wnl-cell-lunar {
    font-size: 0.5rem;
  }

  .wnl-weekdays {
    padding: 8px 8px 4px;
  }

  .wnl-detail {
    padding: 0 12px;
  }

  .wnl-detail-card {
    padding: 16px;
  }

  .wnl-info-grid {
    grid-template-columns: 1fr;
  }

  .wnl-liuzhu-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wnl-yi-ji {
    flex-direction: column;
    gap: 8px;
  }

  .wnl-header {
    padding: 0 12px;
    height: auto;
  }

  .wnl-brand {
    font-size: 2rem;
  }

  .wnl-month-nav {
    padding: 10px 12px 4px;
    gap: 12px;
  }

  .wnl-nav-arrow {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 360px) {
  .wnl-liuzhu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wnl-month-text {
    font-size: 1.1rem;
  }
}

/* ============================================
 * V6.1 · 六档视图全新样式
 * 上下双排 Tab 夹主视图区
 * ============================================ */

/* ----- 双排 Tab 栏 ----- */
.wnl-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  max-width: 480px;
  margin: 0 auto;
}

.wnl-tabs--top {
  padding-top: 2px;
}

.wnl-tabs--bottom {
  padding: 7px 16px 6px;
}

/* TAB：字高 1.3 倍、无深色底纹、光标移动时加粗（需求4） */
.wnl-tab {
  flex: 1;
  padding: 2px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--wnl-text-secondary);
  font-family: var(--wnl-font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: all 0.18s ease;
}

.wnl-tab:hover {
  color: var(--wnl-primary);
  font-weight: 700;
}

.wnl-tab.is-active {
  color: var(--wnl-primary);
  font-weight: 700;
}

/* 今天快速按钮（非 TAB）：浅色底纹、无外圈线、小尺寸（需求4） */
.wnl-today-btn {
  border: none;
  border-radius: 12px;
  background: var(--wnl-hover);
  color: var(--wnl-primary-dark);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 10px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.2s;
}

.wnl-today-btn:hover {
  background: var(--wnl-primary-light);
  color: var(--wnl-primary-dark);
  font-weight: 700;
}

/* 头部右侧：今天 + 设置齿轮（观鼎山与小齿轮之间） */
.wnl-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ----- 主视图区 ----- */
.wnl-viewport {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 0;
  touch-action: pan-y;
}

.wnl-view {
  display: none;
  animation: wnlViewFade 0.25s ease;
}

.wnl-view.is-active {
  display: block;
}

@keyframes wnlViewFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.wnl-view-loading {
  text-align: center;
  padding: 60px 0;
  color: var(--wnl-text-secondary);
  font-size: 0.85rem;
}

.wnl-view-error {
  text-align: center;
  padding: 60px 0;
  color: var(--wnl-red);
  font-size: 0.9rem;
}

/* ----- 月视图整体布局（左右单书名号翻页 + 中间主显区，需求5） ----- */
.wnl-month-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 0;
  touch-action: none; /* 捕获纵向滑动：月视图加高/收起 */
}

/* 左右翻页单书名号（需求5：单书名号，放左右边中间；宽度压缩至1/4，让位主视图） */
.wnl-month-nav {
  flex-shrink: 0;
  align-self: center;
  width: 10px;
  height: 44px;
  padding: 0;
  gap: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--wnl-text-light);
  font-family: var(--wnl-font);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.wnl-month-nav:hover {
  color: var(--wnl-primary);
  background: var(--wnl-hover);
}

/* 中间主显区 */
.wnl-month-main {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* 月视图背景 LOGO 水印（设置齿轮可开关）——1:1 完整显示，按视图宽度居中，不放大不缩小 */
.wnl-month-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url('../../素材/品牌/PNG 透明水印.png') center center / 100% auto no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.wnl-month-grid {
  position: relative;
  z-index: 1;
}

/* 月头：年月标题 + 左右节气侧栏（需求6/7） */
.wnl-month-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 0 0;
}

/* 年月标题块（两行，需求7） */
.wnl-month-title-block {
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* 第一行：公历（加粗，与干支等大同体） */
.wnl-month-title {
  font-family: var(--wnl-font);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wnl-text);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* 第二行：干支（不加粗，字号/字体与公历相同，行距=月字半宽） */
.wnl-month-ganzhi {
  font-family: var(--wnl-font);
  font-size: 1.05rem;
  color: var(--wnl-text-secondary);
  font-weight: 400;
  margin-top: 7px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* 左右节气侧栏 */
.wnl-month-side {
  flex-shrink: 0;
  width: 62px;
  display: flex;
  justify-content: center;
}

.wnl-month-side--right {
  justify-content: center;
}

/* 节气侧栏内容（需求6：秋分二字竖排放左，月日横排在上、时分横排在下） */
.wnl-jieqi-side {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 节气名：竖排，字色蓝 */
.wnl-jieqi-side-name {
  writing-mode: vertical-rl;
  font-family: var(--wnl-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: #2a6fdb;
  letter-spacing: 0.1em;
}

/* 月日/时分：横排，日期在上、时分在下；同字宽对齐（MM-DD≈HH:MM） */
.wnl-jieqi-side-when {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wnl-jieqi-side-date,
.wnl-jieqi-side-time {
  font-size: 0.6rem;
  font-family: var(--wnl-font-sans);
  white-space: nowrap;
  color: #2a6fdb;
}

.wnl-jieqi-side-date {
  color: #2a6fdb;
}

.wnl-jieqi-side-time {
  color: #2a6fdb;
}

/* ----- 月视图网格（覆盖旧样式） ----- */
.wnl-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 16px;
  margin-top: 7px;
}

.wnl-cell--other {
  opacity: 0.18;
  pointer-events: none;
}

.wnl-cell-solar--other {
  font-size: 0.8rem;
  color: var(--wnl-text-light);
}

/* ----- 节气交接栏（已移至月头两侧，此处保留兼容） ----- */

/* 节气交接栏：本月2个节气交节时刻，左右各一 */
.wnl-jieqi-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--wnl-border-light);
  border-radius: 12px;
  background: var(--wnl-card-bg);
}

.wnl-jieqi-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--wnl-text-secondary);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.wnl-jieqi-item:last-child {
  justify-content: flex-end;
  text-align: right;
}

.wnl-jieqi-icon {
  color: var(--wnl-red);
  font-size: 0.7rem;
}

.wnl-jieqi-name {
  font-weight: 700;
  color: var(--wnl-red);
  white-space: nowrap;
}

.wnl-jieqi-when {
  color: var(--wnl-text-secondary);
  white-space: nowrap;
}

/* ===== 日视图 · 台历单页效果 ===== */
.wnl-calendar-page {
  position: relative;
  margin: 18px auto;
  max-width: 380px;
  background: var(--wnl-card-bg);
  border-radius: 16px 16px 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 34px 22px 20px;
  border: 1px solid var(--wnl-border-light);
  text-align: center;
}

/* 装订孔（台历顶部的孔） */
.wnl-calendar-holes {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.wnl-calendar-holes span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wnl-border-light);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.wnl-calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wnl-calendar-brand {
  font-family: var(--wnl-font);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wnl-primary);
  letter-spacing: 0.12em;
}

.wnl-calendar-head {
  padding: 12px 0 14px;
  border-bottom: 1px dashed var(--wnl-border-light);
}

.wnl-calendar-solar {
  font-family: var(--wnl-font-sans);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--wnl-text);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.wnl-calendar-week {
  font-size: 0.85rem;
  color: var(--wnl-text-secondary);
  margin-top: 4px;
}

.wnl-calendar-lunar {
  font-family: var(--wnl-font);
  font-size: 0.9rem;
  color: var(--wnl-primary);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.wnl-day-jieqi {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--wnl-red);
  font-weight: 600;
}

.wnl-calendar-sizhu {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 10px;
}

.wnl-calendar-sizhu .wnl-sizhu-item {
  min-width: 58px;
}

.wnl-calendar-meta {
  font-size: 0.72rem;
  color: var(--wnl-text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}

.wnl-calendar-yiji {
  background: var(--wnl-hover);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.wnl-calendar-yiji-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--wnl-text);
  margin-bottom: 6px;
}

.wnl-calendar-jianchu {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--wnl-primary);
  color: #fff;
  font-size: 0.68rem;
  margin-left: 4px;
}

.wnl-calendar-note {
  font-size: 0.72rem;
  color: var(--wnl-text-light);
  line-height: 1.6;
}

/* ===== 十二时辰吉凶 + 子午流柱 ===== */
.wnl-shichen-block {
  margin: 12px 0;
}

.wnl-shichen-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--wnl-text);
  margin-bottom: 8px;
}

.wnl-settings-btn {
  border: none;
  background: var(--wnl-hover);
  color: var(--wnl-text-secondary);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.wnl-settings-btn:hover {
  background: var(--wnl-primary);
  color: #fff;
}

.wnl-shichen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.wnl-shichen-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid var(--wnl-border-light);
  border-radius: 8px;
  background: var(--wnl-hover);
  font-size: 0.68rem;
  flex-wrap: wrap;
}

.wnl-shichen-branch {
  font-weight: 700;
  color: var(--wnl-text);
  font-family: var(--wnl-font);
}

.wnl-shichen-ganzhi {
  color: var(--wnl-text-secondary);
  font-family: var(--wnl-font);
}

.wnl-shichen-god {
  color: var(--wnl-primary);
  font-weight: 600;
}

.wnl-shichen-fortune--ji {
  color: #4CAF50;
  font-weight: 700;
}

.wnl-shichen-fortune--xiong {
  color: #FF6B6B;
  font-weight: 700;
}

.wnl-shichen-range {
  color: var(--wnl-text-light);
  font-size: 0.6rem;
}

.wnl-shichen-meridian {
  color: var(--wnl-primary);
  font-size: 0.62rem;
  width: 100%;
  text-align: center;
  padding-top: 2px;
  border-top: 1px dashed var(--wnl-border-light);
}

/* 勾选项面板（显隐设置） */
.wnl-settings-panel {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--wnl-border-light);
  border-radius: 12px;
  background: var(--wnl-hover);
  text-align: left;
}

.wnl-settings-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--wnl-text);
  margin-bottom: 8px;
}

.wnl-settings-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--wnl-text-secondary);
  margin: 0 10px 6px 0;
  cursor: pointer;
}

.wnl-settings-item input {
  accent-color: var(--wnl-primary);
}

/* ----- 月视图导航栏（旧版，已由单书名号布局取代） ----- */
.wnl-month-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 16px 4px;
}

.wnl-nav-arrow--small {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--wnl-card-bg);
  color: var(--wnl-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s;
  box-shadow: var(--wnl-shadow);
  flex-shrink: 0;
}

.wnl-nav-arrow--small:hover {
  background: var(--wnl-primary);
  color: #fff;
}

.wnl-weekdays {
  grid-template-columns: repeat(7, 1fr);
  padding: 7px 16px 0;
}

.wnl-weekday--weekend {
  color: var(--wnl-red);
}

/* ----- 日视图卡片 ----- */
.wnl-day-card {
  background: var(--wnl-card-bg);
  border-radius: var(--wnl-radius);
  box-shadow: var(--wnl-shadow);
  padding: 14px 16px;
  margin: 0 12px 10px;
}

.wnl-day-card--head {
  padding: 16px;
}

.wnl-day-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wnl-day-head-main {
  flex: 1;
  text-align: center;
}

.wnl-day-head-solar {
  font-family: var(--wnl-font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-day-head-lunar {
  font-size: 0.85rem;
  color: var(--wnl-text-secondary);
  margin-top: 4px;
  font-family: var(--wnl-font);
}

.wnl-day-jieqi {
  text-align: center;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--wnl-red);
  font-weight: 600;
}

.wnl-day-nav {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--wnl-hover);
  color: var(--wnl-primary);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.wnl-day-nav:hover {
  background: var(--wnl-primary);
  color: #fff;
}

.wnl-day-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wnl-text);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.wnl-sizhu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.wnl-sizhu-item {
  text-align: center;
  padding: 8px 4px;
  background: var(--wnl-border-light);
  border-radius: 8px;
}

.wnl-sizhu-label {
  font-size: 0.62rem;
  color: var(--wnl-text-secondary);
  margin-bottom: 4px;
}

.wnl-sizhu-val {
  font-family: var(--wnl-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-sizhu-kw {
  margin-top: 4px;
  font-size: 0.6rem;
  color: var(--wnl-text-secondary);
  background: var(--wnl-border-light);
  border-radius: 4px;
  padding: 1px 4px;
  display: inline-block;
}

.wnl-day-nayin,
.wnl-day-meta {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--wnl-text-secondary);
}

.wnl-day-pair {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--wnl-border-light);
  font-size: 0.82rem;
}

.wnl-day-pair-label {
  color: var(--wnl-text-secondary);
}

.wnl-day-note {
  font-size: 0.7rem;
  color: var(--wnl-text-light);
  margin-top: 8px;
  line-height: 1.5;
}

.wnl-day-jianchu {
  display: inline-block;
  padding: 3px 10px;
  background: var(--wnl-primary-light);
  color: var(--wnl-primary);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.wnl-day-yiji {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wnl-day-yi,
.wnl-day-ji {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.wnl-yiji-tag {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
}

.wnl-yiji-tag--yi {
  background: #4CAF50;
}

.wnl-yiji-tag--ji {
  background: var(--wnl-red);
}

.wnl-day-card--locked {
  opacity: 0.75;
}

.wnl-lock {
  font-size: 0.7rem;
}

.wnl-day-locked-hint {
  font-size: 0.75rem;
  color: var(--wnl-text-light);
  text-align: center;
  padding: 8px 0;
}

/* ----- 年视图 ----- */
.wnl-year-top {
  position: relative;
  text-align: center;
  padding: 4px 12px 8px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* 换年柱方式文字：位于 2026年·丙午年 左侧空区、正月份上方（跟随齿轮设置） */
.wnl-year-switch {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--wnl-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wnl-primary);
  white-space: nowrap;
  user-select: none;
}

.wnl-year-title {
  font-family: var(--wnl-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-year-info {
  font-size: 0.72rem;
  color: var(--wnl-primary);
  margin-top: 4px;
}

.wnl-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 12px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* 年视图 3×4 主体：背景 LOGO 水印（1:1 正方形，复用 monthlogo 开关；只显示上部鼎形） */
.wnl-year-main {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.wnl-year-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url('../../素材/品牌/PNG 透明水印.png') center center / 100% auto no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* 月份卡片半透明，透出背景 LOGO */
.wnl-year-main .wnl-year-month {
  background: color-mix(in srgb, var(--wnl-card-bg) 62%, transparent);
  backdrop-filter: none;
}

.wnl-year-month {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--wnl-card-bg);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--wnl-shadow);
  cursor: pointer;
  border: 1px solid transparent;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.wnl-year-month.is-selected {
  border-color: var(--wnl-primary);
  box-shadow: var(--wnl-shadow-lg);
}
/* 农历月支背景：粉红隶书大字，铺满月块区，置于内容下层 */
.wnl-year-zhi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'LiSu', '隶书', 'STLiti', var(--wnl-font), serif;
  font-size: 4.2rem;
  line-height: 1;
  color: #F7A8BB;
  opacity: 0.32;
  pointer-events: none;
  z-index: -1;
  white-space: nowrap;
  user-select: none;
}
.wnl-year-day.is-today {
  /* 今天：浅蓝色圆底纹 */
  color: #fff;
  font-weight: 700;
  background: #7EC8F7;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  justify-self: center;
  align-self: center;
  box-sizing: border-box;
}
.wnl-year-day--blank {
  visibility: hidden;
}
/* 年视图翻页动画（左右滑动换年时，月块依次滑入） */
@keyframes wnl-year-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.wnl-year-grid {
  animation: wnl-year-in 0.28s ease;
}

/* 月视图：展开/收起开关（空位放显隐开关，解决加高与纵滑动冲突） */
.wnl-expand-toggle {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  padding: 3px 8px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--wnl-text-secondary);
  background: var(--wnl-card-bg);
  border: 1px solid var(--wnl-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.wnl-expand-toggle:hover {
  color: var(--wnl-primary);
  border-color: var(--wnl-primary);
}
.wnl-expand-toggle.is-on {
  background: var(--wnl-primary);
  border-color: var(--wnl-primary);
  color: #fff;
}

.wnl-year-month-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wnl-primary);
  text-align: center;
  margin-bottom: 6px;
  font-family: var(--wnl-font);
}

.wnl-year-month-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

/* 月块主体：左周序号 + 右(星期头+日期格)，行高对齐 */
.wnl-year-month-body {
  display: flex;
  gap: 3px;
}
.wnl-year-cal {
  flex: 1;
  min-width: 0;
}
.wnl-year-weeks {
  width: 26px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 13px; /* 略过星期头一行 + 行距 */
  border-right: 1px solid var(--wnl-border-light);
  margin-right: 2px;
}
.wnl-year-weeknum {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--wnl-primary-dark);
  text-align: center;
  line-height: 12px;
  height: 12px;
  white-space: nowrap;
  background: var(--wnl-primary-light);
  border-radius: 3px;
}
.wnl-year-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  border-bottom: 1px solid var(--wnl-border-light);
  margin-bottom: 1px;
}
.wnl-year-dowc {
  font-size: 0.42rem;
  color: var(--wnl-text-light);
  text-align: center;
  line-height: 12px;
  height: 12px;
}

.wnl-year-day {
  font-size: 0.5rem;
  line-height: 12px;
  height: 12px;
  color: var(--wnl-text-secondary);
  text-align: center;
}

/* 特殊日日期格：角标徽标 + 数字，淡色底 */
.wnl-year-day.is-sp {
  position: relative;
  color: var(--wnl-text);
}
.wnl-year-day.is-sp .ym-num {
  font-style: normal;
}
.wnl-year-day .ym-badge {
  position: absolute;
  top: -1px;
  right: 0;
  font-size: 0.44rem;
  line-height: 1;
  font-style: normal;
  pointer-events: none;
  z-index: 2;
}
.wnl-year-day.is-sp--lichun .ym-badge { color: var(--wnl-gold-light); }
.wnl-year-day.is-sp--xiazhi .ym-badge { color: var(--wnl-text-light); }
.wnl-year-day.is-sp--dongzhi .ym-badge { color: var(--wnl-gold); }
.wnl-year-day.is-sp--xinnian .ym-badge { color: var(--wnl-red); }
.wnl-year-day.is-sp--lichun { background: rgba(212, 168, 67, 0.16); }
.wnl-year-day.is-sp--xiazhi { background: rgba(90, 90, 96, 0.12); }
.wnl-year-day.is-sp--dongzhi { background: rgba(69, 181, 170, 0.16); }
.wnl-year-day.is-sp--xinnian { background: rgba(224, 96, 80, 0.16); }

/* 特殊日明细面板 */
.wnl-year-sp {
  max-width: 380px;
  margin: 0 auto;
  padding: 6px 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.wnl-year-sp-load {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.68rem;
  color: var(--wnl-text-light);
}
.wnl-year-sp-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 5px;
  font-size: 0.7rem;
  color: var(--wnl-text-secondary);
  background: var(--wnl-card-bg);
  border: 1px solid var(--wnl-border-light);
  border-radius: 8px;
  padding: 4px 6px;
  line-height: 1.3;
}
.wnl-year-sp-item .sp-mark {
  font-style: normal;
  font-weight: 800;
}
.wnl-year-sp-item.is-lichun .sp-mark { color: var(--wnl-gold-light); }
.wnl-year-sp-item.is-xiazhi .sp-mark { color: var(--wnl-text-light); }
.wnl-year-sp-item.is-dongzhi .sp-mark { color: var(--wnl-gold); }
.wnl-year-sp-item.is-xinnian .sp-mark { color: var(--wnl-red); }
.wnl-year-sp-item .sp-lab { font-weight: 600; color: var(--wnl-text); }
.wnl-year-sp-item .sp-date { color: var(--wnl-primary-dark); }
.wnl-year-sp-item .sp-gz { color: var(--wnl-primary); width: 100%; font-size: 0.66rem; }

.wnl-year-legend {
  text-align: center;
  font-size: 0.68rem;
  color: var(--wnl-text-light);
  padding: 8px 0;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* ----- 周视图 ----- */
.wnl-week-top {
  text-align: center;
  padding: 4px 12px 8px;
}

.wnl-week-range {
  font-family: var(--wnl-font);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-week-sanyuan {
  font-size: 0.72rem;
  color: var(--wnl-primary);
  margin-top: 4px;
}

/* 华为日历风格：本周7天每日清单 */
.wnl-week-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px 16px;
}

.wnl-week-card {
  background: var(--wnl-card-bg);
  border: 1px solid var(--wnl-border-light);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--wnl-shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.wnl-week-card:active {
  transform: scale(0.99);
}

.wnl-week-card.is-today {
  border-color: var(--wnl-primary);
  box-shadow: 0 0 0 1px var(--wnl-primary), var(--wnl-shadow);
}

.wnl-week-card.is-weekend .wnl-week-card-wd,
.wnl-week-card.is-weekend .wnl-week-card-date {
  color: var(--wnl-red);
}

.wnl-week-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.wnl-week-card-wd {
  font-family: var(--wnl-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-week-card-date {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-week-card-lunar {
  font-size: 0.7rem;
  color: var(--wnl-text-secondary);
}

.wnl-week-card-gz {
  font-size: 0.68rem;
  color: var(--wnl-text-light);
}

.wnl-week-card-today {
  margin-left: auto;
  font-size: 0.62rem;
  color: #fff;
  background: var(--wnl-primary);
  border-radius: 6px;
  padding: 1px 7px;
}

.wnl-week-card-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wnl-week-item {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--wnl-text);
}

.wnl-week-item--jieqi {
  color: var(--wnl-primary);
  font-weight: 600;
}

.wnl-week-item--festival {
  color: var(--wnl-red);
  font-weight: 600;
}

.wnl-week-item--meta {
  color: var(--wnl-text-secondary);
  font-size: 0.72rem;
}

.wnl-week-item--empty {
  color: var(--wnl-text-light);
  font-size: 0.72rem;
}

.wnl-week-tag {
  display: inline-block;
  font-size: 0.66rem;
  border-radius: 4px;
  padding: 0 5px;
  margin-right: 6px;
  font-weight: 600;
}

.wnl-week-tag--yi {
  background: var(--wnl-primary-light);
  color: var(--wnl-primary-dark);
}

.wnl-week-tag--ji {
  background: rgba(224, 96, 80, 0.14);
  color: var(--wnl-red);
}

.wnl-week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 4px 12px;
}

.wnl-week-day {
  text-align: center;
  padding: 8px 2px;
  background: var(--wnl-card-bg);
  border-radius: 10px;
  box-shadow: var(--wnl-shadow);
}

.wnl-week-day.is-today {
  background: var(--wnl-primary);
}

.wnl-week-day.is-today .wnl-week-day-wd,
.wnl-week-day.is-today .wnl-week-day-num,
.wnl-week-day.is-today .wnl-week-day-lunar,
.wnl-week-day.is-today .wnl-week-day-gz {
  color: #fff;
}

.wnl-week-day-wd {
  font-size: 0.68rem;
  color: var(--wnl-text-secondary);
}

.wnl-week-day-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wnl-text);
  margin: 2px 0;
}

.wnl-week-day-lunar {
  font-size: 0.55rem;
  color: var(--wnl-text-secondary);
}

.wnl-week-day-gz {
  font-size: 0.5rem;
  color: var(--wnl-text-light);
}

.wnl-week-timeline {
  padding: 8px 24px 8px 48px;
}

.wnl-week-hour {
  height: 34px;
  border-bottom: 1px solid var(--wnl-border-light);
  position: relative;
}

.wnl-week-hour-label {
  position: absolute;
  left: -24px;
  font-size: 0.6rem;
  color: var(--wnl-text-light);
  top: -4px;
}

.wnl-week-guas {
  display: flex;
  justify-content: space-around;
  padding: 4px 12px 12px;
}

.wnl-week-gua {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wnl-week-gua-name {
  font-size: 0.68rem;
  color: var(--wnl-text-secondary);
}

.wnl-week-gua-sym {
  font-size: 1.3rem;
  color: var(--wnl-primary);
}

/* ----- 月相视图（布局参考月视图：翻页符+月头+星期行+7列网格） ----- */
.wnl-month-grid .wnl-moon-day {
  min-height: 52px;
  padding: 2px 0;
}

/* 月相行：图标 + 名称 */
.wnl-moon-phase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 1px;
  line-height: 1.1;
}

.wnl-moon-icon {
  font-size: 1rem;
  line-height: 1;
}

.wnl-moon-name {
  font-size: 0.52rem;
  color: var(--wnl-primary);
  font-family: var(--wnl-font);
  font-weight: 600;
  white-space: nowrap;
}

/* 照明百分比 */
.wnl-moon-illum {
  font-size: 0.48rem;
  color: var(--wnl-text-light);
  font-family: var(--wnl-font);
  text-align: center;
  line-height: 1.1;
  margin-top: 1px;
}

/* 今天格：图标描边 */
.wnl-moon-day.wnl-cell--today .wnl-moon-icon {
  box-shadow: 0 0 0 2px var(--wnl-primary);
  border-radius: 50%;
}

/* ----- ③九运视图 ----- */
.wnl-jiuyun-top {
  text-align: center;
  padding: 4px 12px 8px;
}

.wnl-jiuyun-title {
  font-family: var(--wnl-font);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-jiuyun-sub {
  font-size: 0.75rem;
  color: var(--wnl-primary);
  margin-top: 4px;
}

.wnl-jiuyun-sanyuan {
  display: flex;
  gap: 8px;
  padding: 4px 12px;
}

.wnl-jiuyun-yuan {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  background: var(--wnl-card-bg);
  border-radius: 10px;
  box-shadow: var(--wnl-shadow);
  border: 1.5px solid transparent;
}

.wnl-jiuyun-yuan.is-active {
  border-color: var(--wnl-primary);
  background: var(--wnl-primary-light);
}

.wnl-jiuyun-yuan-name {
  font-family: var(--wnl-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-jiuyun-yuan-range {
  font-size: 0.62rem;
  color: var(--wnl-text-secondary);
  margin-top: 2px;
}

.wnl-jiuyun-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 12px;
}

.wnl-jiuyun-yun {
  text-align: center;
  padding: 10px 4px;
  background: var(--wnl-card-bg);
  border-radius: 10px;
  box-shadow: var(--wnl-shadow);
}

.wnl-jiuyun-yun.is-current {
  background: var(--wnl-primary);
}

.wnl-jiuyun-yun.is-current .wnl-jiuyun-yun-name,
.wnl-jiuyun-yun.is-current .wnl-jiuyun-yun-range {
  color: #fff;
}

.wnl-jiuyun-yun-name {
  font-family: var(--wnl-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--wnl-text);
}

.wnl-jiuyun-yun-range {
  font-size: 0.55rem;
  color: var(--wnl-text-secondary);
  margin-top: 2px;
}

.wnl-jiuyun-detail {
  margin: 4px 12px;
  background: var(--wnl-card-bg);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--wnl-shadow);
}

.wnl-jiuyun-detail-title {
  font-family: var(--wnl-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wnl-primary);
  margin-bottom: 8px;
}

.wnl-jiuyun-detail-row {
  font-size: 0.8rem;
  color: var(--wnl-text-secondary);
  padding: 3px 0;
}

.wnl-jiuyun-table {
  margin: 4px 12px 12px;
  background: var(--wnl-card-bg);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--wnl-shadow);
}

.wnl-jiuyun-table-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wnl-text);
  margin-bottom: 8px;
}

.wnl-jiuyun-table-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.wnl-jiuyun-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--wnl-text-secondary);
  padding: 5px 8px;
  background: var(--wnl-border-light);
  border-radius: 6px;
}

.wnl-jiuyun-row.is-current {
  background: var(--wnl-primary);
  color: #fff;
  font-weight: 600;
}

/* ============================================
 * 全局历法规则设置面板（右上角齿轮，需求2）
 * ============================================ */
.wnl-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
}

.wnl-settings-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.wnl-settings-panel-main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 320px;
  max-width: 88vw;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--wnl-card-bg);
  border: 1px solid var(--wnl-border);
  border-radius: 18px;
  box-shadow: var(--wnl-shadow-lg);
  padding: 18px 20px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s;
}

.wnl-settings-panel-main.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.wnl-settings-panel-main .wnl-settings-title {
  font-family: var(--wnl-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--wnl-text);
  text-align: center;
  margin-bottom: 12px;
}

.wnl-settings-panel-main .wnl-settings-group {
  margin-bottom: 12px;
}

.wnl-settings-panel-main .wnl-settings-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wnl-primary-dark);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.wnl-settings-panel-main .wnl-settings-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--wnl-text-secondary);
  margin: 0 12px 8px 0;
  cursor: pointer;
}

.wnl-settings-panel-main .wnl-settings-item input {
  accent-color: var(--wnl-primary);
}

/* 模式行内联的护眼绿色勾选框（放在"模式"右侧空区） */
.wnl-settings-panel-main .wnl-settings-item--inline {
  margin: 0;
  white-space: nowrap;
}

/* 四柱设置：行 + 标签 + 下拉 + 说明 */
.wnl-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.wnl-settings-label {
  flex-shrink: 0;
  width: 34px;
  font-size: 0.78rem;
  color: var(--wnl-text);
  font-weight: 600;
}

.wnl-settings-row .wnl-settings-select {
  min-width: 118px;
}

.wnl-settings-desc {
  flex: 1;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--wnl-text-secondary);
}

/* 模式（主题）下拉 */
.wnl-settings-group--row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wnl-settings-group--row .wnl-settings-group-title {
  margin-bottom: 0;
  white-space: nowrap;
}

.wnl-settings-select {
  min-width: 96px;
  padding: 5px 8px;
  border: 1px solid var(--wnl-border);
  border-radius: 8px;
  background: var(--wnl-card-bg);
  color: var(--wnl-text);
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
}

.wnl-settings-select:focus {
  border-color: var(--wnl-primary);
}

.wnl-settings-close {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 0;
  border: none;
  border-radius: 10px;
  background: var(--wnl-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.wnl-settings-close:hover {
  background: var(--wnl-primary-dark);
}

/* ----- 日视图 · 三元九运信息条（需求7） ----- */
.wnl-calendar-sanyuan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 6px 10px;
  background: var(--wnl-primary-light);
  border-radius: 8px;
  flex-wrap: wrap;
}

.wnl-sanyuan-main {
  font-family: var(--wnl-font);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--wnl-primary-dark);
}

.wnl-sanyuan-star {
  font-size: 0.72rem;
  color: var(--wnl-text-secondary);
}

/* ============================================
 * 年月日时滚轮选择入口（月视图 + 日视图常驻）
 * 三历法：公历 / 农历 / 干支历 | 真太阳时 | 行政城市
 * ============================================ */
.wnl-wheels {
  background: var(--wnl-card-bg);
  border-bottom: 1px solid var(--wnl-border-light);
  padding: 8px 12px 10px;
}

/* 三历法 Tab */
.wnl-wheels-modes {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.wnl-wheels-mode {
  flex: 1;
  padding: 6px 0;
  border: 1px solid var(--wnl-border);
  border-radius: 8px;
  background: transparent;
  color: var(--wnl-text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}
.wnl-wheels-mode.is-active {
  background: var(--wnl-primary);
  border-color: var(--wnl-primary);
  color: #fff;
  font-weight: 600;
}

/* 滚轮列 */
.wnl-wheels-cols {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 6px;
}
.wnl-wheel-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wnl-wheel {
  position: relative;
  flex: 1;
  height: 132px;
  overflow: hidden;
  border: 1px solid var(--wnl-border-light);
  border-radius: 10px;
  background: var(--wnl-bg);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.wnl-wheel-list {
  position: absolute;
  left: 0; right: 0; top: 0;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.wnl-wheel-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--wnl-text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.wnl-wheel-item.is-active {
  color: var(--wnl-primary-dark);
  font-weight: 700;
  font-size: 1.05rem;
}
.wnl-wheel-label {
  text-align: center;
  font-size: 0.62rem;
  color: var(--wnl-text-light);
  margin-top: 4px;
  line-height: 1.2;
}

/* 滚轮中心高亮线 */
.wnl-wheel::before {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  top: 43px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid var(--wnl-border);
  background: var(--wnl-hover);
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

/* 真太阳时 + 城市 + 跳转 */
.wnl-wheels-opts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.wnl-wheels-opt-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--wnl-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.wnl-wheels-opt-label input {
  accent-color: var(--wnl-primary);
}
.wnl-wheels-city {
  flex: 1;
  min-width: 90px;
  padding: 4px 6px;
  border: 1px solid var(--wnl-border);
  border-radius: 8px;
  background: var(--wnl-card-bg);
  color: var(--wnl-text);
  font-size: 0.78rem;
  cursor: pointer;
}
.wnl-wheels-go {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: var(--wnl-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.wnl-wheels-go:hover {
  background: var(--wnl-primary-dark);
}