/**
 * 万年历 - 工具页专属样式
 * 结构：英雄区当日黄历速览（朱砂色带 + 星空，样式照搬黄历站 top-dark/hl-hero）
 *       → 月历板（7列网格，节气绿/节日红/今天蓝底/查看日蓝框/跨月淡化，工具站自建保持科技蓝）
 *       日期页另有：黄历信息、时辰吉凶（details 折叠）
 */

/* ============================================
   英雄区：当日黄历速览（结构照搬黄历站，配色用工具站自己的英雄区色）
   蓝青渐变（全站 gj-hero 同款）+ hero-stars.js 星空粒子画布
   ============================================ */
.top-dark { background: linear-gradient(135deg, #1e40af 0%, #0f766e 100%); }

/* 星空画布（common/js/hero-stars.js 插入）：压在色带底色与内容之间 */
.hero-stars-host {
  position: relative;
  z-index: 0;
}

.hero-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hl-hero {
  padding: calc(3.6 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  text-align: center;
}

/* 日期区：农历 / 公历 / 干支三行 + 左右切换箭头同处一个定位区 */
.hl-hero-top { position: relative; }

/* 前后一天箭头：CSS 画（右+下边框旋转 45°） */
.hl-arrow {
  position: absolute;
  top: 50%;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  transform: translateY(-50%);
}

.hl-arrow.prev { left: 0; }
.hl-arrow.next { right: 0; }

.hl-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(3.2 * var(--u));
  height: calc(3.2 * var(--u));
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.9);
  border-width: 0 calc(0.55 * var(--u)) calc(0.55 * var(--u)) 0;
}

.hl-arrow.prev::after { transform: translate(-50%, -50%) rotate(135deg); }
.hl-arrow.next::after { transform: translate(-50%, -50%) rotate(-45deg); }

.hl-arrow:active::after { border-color: #fff; }

/* 上：农历（小字，白） */
.hl-lunar {
  display: block;
  font-size: calc(3.8 * var(--u));
  color: rgba(255, 255, 255, 0.85);
}

/* 中：公历（大字，白） */
.hl-solar {
  display: block;
  font-size: calc(8.5 * var(--u));
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: calc(0.2 * var(--u));
  color: #fff;
  white-space: nowrap;
}

/* 下：干支与星期 */
.hl-ganzhi {
  display: block;
  font-size: calc(3.8 * var(--u));
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

/* ---------- 宜 / 忌 卡片（浮在英雄区色带上） ---------- */
.hl-yj {
  margin-top: calc(3 * var(--u));
  padding: calc(3 * var(--u)) calc(4 * var(--u));
  border-radius: calc(2.6 * var(--u));
  background: rgba(255, 255, 255, 0.12);
  text-align: left;
}

.hl-yj dl {
  display: flex;
  align-items: flex-start;
}

.hl-yj dl + dl { margin-top: calc(2 * var(--u)); }

.hl-yj dt {
  flex-shrink: 0;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  margin-right: calc(2 * var(--u));
  border-radius: calc(2 * var(--u));
  text-align: center;
  line-height: calc(7 * var(--u));
  font-size: calc(3.8 * var(--u));
  font-weight: 700;
  color: #fff;
}

.hl-yj dt.yj-yi { background: linear-gradient(135deg, #4CC38A, #35A874); }
.hl-yj dt.yj-ji { background: linear-gradient(135deg, #EE6A76, #D93A4A); }

.hl-yj dd {
  flex: 1;
  min-width: 0;
  font-size: calc(3.8 * var(--u));
  line-height: calc(7 * var(--u));
  color: #fff;
}

.hl-yj dd span { margin-right: calc(2 * var(--u)); }

/* 工具主页专用：查看今日完整黄历入口（黄历站首页即详情页无此件；
   工具站首页是月历聚合页，宜忌卡后补一行白色小链接通向当日详情页） */
.hl-hero-go {
  display: block;
  margin-top: calc(2.6 * var(--u));
  text-align: center;
  font-size: calc(3.2 * var(--u));
  color: #fff;
}

.hl-hero-go .bi {
  font-size: calc(2.8 * var(--u));
  vertical-align: -0.08em;
}

/* 视觉隐藏但保留给屏幕阅读器与搜索引擎（给 <h1> 补语义前缀，照搬黄历站） */
.sr-only {
  position: absolute;
  width: calc(0.1 * var(--u));
  height: calc(0.1 * var(--u));
  margin: calc(-0.1 * var(--u));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 工具区 ---------- */
.wnl-tool {
  padding-top: calc(4 * var(--u)); /* 30px */
  padding-bottom: calc(2 * var(--u));
}

/* ---------- 本月黄历（整月日历网格，样式照搬黄历站：节气绿、节日红、今日朱红底反白、跨月淡化） ---------- */
.wnl-cal {
  background: #fff;
  border-radius: calc(2.6 * var(--u));
  padding: calc(2.4 * var(--u)) calc(0.6 * var(--u)) calc(1.6 * var(--u));
  border: calc(0.15 * var(--u)) solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(37, 99, 235, 0.08);
}

/* 月份切换条（左右箭头 + 当前月前后 3 个月，当前月标红） */
.wnl-cal-bar {
  display: flex;
  align-items: center;
  padding: 0 calc(1.4 * var(--u)) calc(2.2 * var(--u));
  border-bottom: calc(0.15 * var(--u)) solid #F0F0F0;
}

.wnl-cal-nav {
  position: relative;
  flex-shrink: 0;
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
}

.wnl-cal-nav::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1.6 * var(--u));
  height: calc(1.6 * var(--u));
  border-left: calc(0.4 * var(--u)) solid #333;
  border-bottom: calc(0.4 * var(--u)) solid #333;
  transform: translate(-40%, -50%) rotate(45deg);
}

.wnl-cal-nav.next::after { transform: translate(-60%, -50%) rotate(-135deg); }

.wnl-cal-months {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: calc(1.4 * var(--u));
  padding-left: calc(1.4 * var(--u));
  border-left: calc(0.15 * var(--u)) solid #F0F0F0;
}

.wnl-cal-months a {
  font-size: calc(3.5 * var(--u));
  color: #666;
  white-space: nowrap;
  text-decoration: none;
}

.wnl-cal-months a.cur {
  color: #2563eb;
  font-weight: 600;
}

/* 星期表头（周一为第一列） */
.wnl-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: calc(7.4 * var(--u));
  align-items: center;
}

.wnl-cal-week i {
  text-align: center;
  font-style: normal;
  font-size: calc(2.9 * var(--u));
  color: #999;
}

/* 日期格子：日号 + 农历上下两行 */
.wnl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.wnl-cal-cell {
  height: calc(12.3 * var(--u));
  margin: 0 calc(0.75 * var(--u));
  border-radius: calc(1 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.wnl-cal-cell b {
  font-size: calc(4.4 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: #333;
}

.wnl-cal-cell span {
  margin-top: calc(1.3 * var(--u));
  max-width: 100%;
  font-size: calc(3.1 * var(--u));
  line-height: 1;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 节气：绿 / 节日：红 */
.wnl-cal-cell span.jq { color: #2E9E5B; }
.wnl-cal-cell span.jr { color: #D03D3D; }

/* 今日：整格主题蓝实底（渐变只留给英雄区一处，避免焦点重复），日号与节气/节日名转白 */
.wnl-cal-cell.cur {
  background: #2563eb;
}

.wnl-cal-cell.cur b,
.wnl-cal-cell.cur span,
.wnl-cal-cell.cur span.jq,
.wnl-cal-cell.cur span.jr { color: #fff; }

/* 正在查看的这一天（翻到别的月份时用，避免整月没有任何标记；今天用 .cur） */
.wnl-cal-cell.view {
  box-shadow: inset 0 0 0 calc(0.35 * var(--u)) rgba(37, 99, 235, 0.5);
}

/* 跨月日期（上月尾 / 下月头）整体淡化 */
.wnl-cal-cell.prev,
.wnl-cal-cell.next { opacity: 0.3; }

/* 图例（色值与格子标注对齐） */
.wnl-cal-legend {
  margin-top: calc(1.6 * var(--u));
  padding-top: calc(1.6 * var(--u));
  border-top: calc(0.15 * var(--u)) solid #F0F0F0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(1 * var(--u)) calc(2.4 * var(--u));
  font-size: calc(2.6 * var(--u));
  color: #999;
}

.wnl-cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: calc(0.6 * var(--u));
}

.wnl-cal-legend .dot {
  width: calc(1.2 * var(--u));
  height: calc(1.2 * var(--u));
  border-radius: 50%;
}

.wnl-cal-legend .dot.jq { background: #2E9E5B; }
.wnl-cal-legend .dot.jr { background: #D03D3D; }
.wnl-cal-legend .dot.cur { background: #2563eb; }

/* ---------- 区块标题（居中，两侧「点—线」装饰，样式照搬黄历站 section-title） ---------- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.4 * var(--u));
  font-size: calc(3.5 * var(--u));
  font-weight: 700;
  letter-spacing: calc(0.2 * var(--u));
  white-space: nowrap;
}

.section-title .deco {
  position: relative;
  flex-shrink: 0;
  width: calc(6.4 * var(--u));
  height: calc(0.27 * var(--u));
  border-radius: calc(1 * var(--u));
  background: rgba(255, 255, 255, 0.55);
}

.section-title .deco::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(0.8 * var(--u));
  height: calc(0.8 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
}

.section-title .deco:first-child::after { left: calc(-1.4 * var(--u)); }
.section-title .deco:last-child::after  { right: calc(-1.4 * var(--u)); }

/* 白底上的标题改用主题蓝 */
.section-title.dark { color: #1e40af; }
.section-title.dark .deco { background: rgba(30, 64, 175, 0.28); }
.section-title.dark .deco::after { background: rgba(30, 64, 175, 0.55); }

/* 区块间距：标题上下收紧（照搬黄历站 .hl-body .section-title） */
.wnl-tool .section-title { margin: calc(6 * var(--u)) 0 calc(2.8 * var(--u)); }

/* ---------- 日期页：黄历信息卡（样式照搬黄历站 hl-info：卡自无 padding，Tab / 面板各自带内边距） ---------- */
.wnl-info {
  background: #fff;
  border: calc(0.15 * var(--u)) solid rgba(37, 99, 235, 0.12);
  border-radius: calc(2.6 * var(--u));
  box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(37, 99, 235, 0.08);
  overflow: hidden;
}

.wnl-box-h {
  font-size: calc(3 * var(--u)); /* 22.5px */
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: calc(0.8 * var(--u));
}

.wnl-box-h .bi {
  color: #2563eb;
  font-size: calc(3.2 * var(--u));
}

.wnl-box-sub {
  margin-top: calc(0.6 * var(--u));
  font-size: calc(2.2 * var(--u));
  color: #7a8699;
}

/* ---------- 黄历信息：三 Tab（基本信息 / 黄历数据 / 空亡三煞，样式照搬黄历站 hl-tabs） ---------- */
.wnl-tabs {
  display: flex;
  gap: calc(1.6 * var(--u));
  padding: calc(2.6 * var(--u)) calc(3 * var(--u)) 0;
}

.wnl-tab {
  flex: 1;
  padding: calc(1.4 * var(--u)) 0;
  border: none;
  border-radius: calc(9 * var(--u));
  text-align: center;
  font-size: calc(3.2 * var(--u));
  font-weight: 600;
  color: #64748b;
  background: #eff6ff;
  transition: background 0.2s, color 0.2s;
}

.wnl-tab.sel {
  color: #fff;
  background: #1e40af;
  box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) rgba(30, 64, 175, 0.28);
}

.wnl-panel { display: none; padding: calc(2.4 * var(--u)) calc(3.5 * var(--u)) calc(1.4 * var(--u)); }
.wnl-panel.sel { display: block; }

/* 单列信息行（基本信息 / 空亡三煞 Tab，样式照搬黄历站 hl-desc） */
.wnl-list { padding: 0; display: flex; flex-direction: column; }

.wnl-list li {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: calc(2.3 * var(--u)) 0;
  font-size: calc(3.5 * var(--u));
  color: #334155;
}

.wnl-list li + li { border-top: calc(0.15 * var(--u)) solid #e2e8f0; }

.wnl-list strong {
  flex-shrink: 0;
  width: calc(19 * var(--u));
  padding: calc(0.5 * var(--u)) 0;
  border-radius: calc(1.2 * var(--u));
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: calc(3.1 * var(--u));
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.wnl-list span { flex: 1; min-width: 0; }

/* 扩展黄历数据（黄历数据 Tab，样式照搬黄历站 hl-ext） */
.wnl-ext {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 calc(3 * var(--u));
  padding: 0;
}

.wnl-ext li {
  display: flex;
  align-items: baseline;
  gap: calc(1.2 * var(--u));
  padding: calc(1.9 * var(--u)) 0;
  border-bottom: calc(0.15 * var(--u)) solid #e2e8f0;
  font-size: calc(3.2 * var(--u));
}

.wnl-ext li:nth-last-child(-n+2) { border-bottom: none; }

.wnl-ext strong {
  flex-shrink: 0;
  font-size: calc(3 * var(--u));
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.wnl-ext span {
  flex: 1;
  min-width: 0;
  color: #475569;
}

/* 吉神凶神双卡（样式照搬黄历站 hl-jx：信息卡下方的独立块，不加标题） */
.wnl-jx {
  display: flex;
  gap: calc(2.4 * var(--u));
  margin-top: calc(2.6 * var(--u));
}

.wnl-jx-box {
  flex: 1;
  min-width: 0;
  border-radius: calc(2.6 * var(--u));
  overflow: hidden;
  background: linear-gradient(160deg, #EAF8F0, #F8FDFA);
  box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(63, 178, 127, 0.12);
}

.wnl-jx-box span {
  display: block;
  padding: calc(1.8 * var(--u)) 0;
  text-align: center;
  font-size: calc(3.4 * var(--u));
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4CC38A, #35A874);
}

.wnl-jx-box p {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(14 * var(--u));
  padding: calc(2.4 * var(--u));
  font-size: calc(3.4 * var(--u));
  line-height: calc(5.8 * var(--u));
  color: #2F7D5C;
  text-align: center;
}

.wnl-jx-box.bad {
  background: linear-gradient(160deg, #FDECEC, #FFF8F8);
  box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(240, 96, 90, 0.12);
}

.wnl-jx-box.bad span { background: linear-gradient(135deg, #EE6A76, #D93A4A); }
.wnl-jx-box.bad p { color: #B44A45; }

/* ---------- 神煞方位五色块（样式照搬黄历站 hl-shen：吉神凶神下方的独立块，含原朱砂—金五路配色） ---------- */
.wnl-shen {
  display: flex;
  gap: calc(1.6 * var(--u));
  margin-top: calc(2.6 * var(--u));
}

.wnl-shen li {
  flex: 1;
  min-width: 0;
  border-radius: calc(2.6 * var(--u));
  overflow: hidden;
  background: #fff;
  border: calc(0.15 * var(--u)) solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 calc(1 * var(--u)) calc(2.6 * var(--u)) rgba(37, 99, 235, 0.08);
  text-align: center;
}

.wnl-shen li b {
  display: block;
  padding: calc(1.6 * var(--u)) 0;
  font-size: calc(3.4 * var(--u));
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.wnl-shen li span {
  display: block;
  padding: calc(1 * var(--u)) calc(0.4 * var(--u)) calc(1.4 * var(--u));
  font-size: calc(3 * var(--u));
  color: #64748b;
  white-space: nowrap;
}

/* 财 / 喜 走蓝阶，福 / 阳贵 / 阴贵 走青阶：深蓝 → 亮蓝 → 青 → 亮青 → 暗青按明度排开（主题色五路配色） */
.wnl-shen .cl-cai b { background: linear-gradient(135deg, #1e40af, #1b3a8f); }
.wnl-shen .cl-xi  b { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.wnl-shen .cl-fu  b { background: linear-gradient(135deg, #0d9488, #0f766e); }
.wnl-shen .cl-yg  b { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.wnl-shen .cl-yin b { background: linear-gradient(135deg, #115e59, #0F3D38); }

/* ---------- 吉日查询（样式照搬黄历站 hl-jr / hl-more：标题在卡外，卡内只有网格 + 折叠按钮） ---------- */
.wnl-jr {
  padding: calc(3 * var(--u)) calc(3.5 * var(--u));
  border-radius: calc(2.6 * var(--u));
  background: #fff;
  border: calc(0.15 * var(--u)) solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(37, 99, 235, 0.08);
}

.wnl-jr-panel {
  margin-top: calc(1.6 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(1.6 * var(--u));
}

/* 默认折叠：只留 3 行（12 项） */
.wnl-jr.is-fold .wnl-jr-panel a:nth-child(n+13) { display: none; }

.wnl-jr-panel a {
  padding: calc(1.6 * var(--u)) calc(0.6 * var(--u));
  border-radius: calc(1.4 * var(--u));
  text-align: center;
  background: rgba(37, 99, 235, 0.06);
  color: #475569;
  font-size: calc(3.1 * var(--u));
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wnl-jr-panel a:active { background: rgba(37, 99, 235, 0.14); }

/* 折叠按钮（主题蓝字 + 蓝箭头） */
.wnl-more {
  display: block;
  width: calc(40 * var(--u));
  height: calc(9 * var(--u));
  margin: calc(2.6 * var(--u)) auto 0;
  padding: 0;
  border-radius: calc(9 * var(--u));
  background: #fff;
  color: #1d4ed8;
  font-size: calc(3.3 * var(--u));
  font-weight: 600;
  text-align: center;
  border: calc(0.15 * var(--u)) solid rgba(37, 99, 235, 0.2);
  box-shadow: calc(0.5 * var(--u)) calc(0.5 * var(--u)) calc(1 * var(--u)) rgba(37, 99, 235, 0.1);
}

.wnl-more::after {
  content: '';
  display: inline-block;
  width: calc(1.5 * var(--u));
  height: calc(1.5 * var(--u));
  margin-left: calc(1.4 * var(--u));
  border-right: calc(0.4 * var(--u)) solid #1d4ed8;
  border-bottom: calc(0.4 * var(--u)) solid #1d4ed8;
  transform: translateY(calc(-0.4 * var(--u))) rotate(45deg);
  transition: transform 0.25s;
}

.wnl-more.open::after { transform: translateY(calc(0.4 * var(--u))) rotate(-135deg); }

.wnl-more:active { background: #eff6ff; }

/* ---------- 时辰宜忌（十二时辰卡片，卡头点击展开；样式照搬黄历站） ---------- */
.wnl-time-list {
  display: flex;
  flex-direction: column;
  gap: calc(2.4 * var(--u));
}

.wnl-time-card {
  border-radius: calc(2.6 * var(--u));
  overflow: hidden;
  background: #fff;
  border: calc(0.15 * var(--u)) solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(37, 99, 235, 0.08);
}

/* 卡片头：左侧色条 + 淡色渐变底 */
.wnl-time-head {
  display: flex;
  align-items: center;
  gap: calc(1.6 * var(--u));
  padding: calc(2.4 * var(--u)) calc(3 * var(--u));
  border-left: calc(0.6 * var(--u)) solid #2563eb;
  background: linear-gradient(90deg, #eff6ff, #f8fbff);
  cursor: pointer;
}

/* 展开箭头（收起时朝下，展开后朝上） */
.wnl-time-arrow {
  flex-shrink: 0;
  width: calc(1.8 * var(--u));
  height: calc(1.8 * var(--u));
  margin-top: calc(-0.6 * var(--u));
  border-right: calc(0.38 * var(--u)) solid #B9A79F;
  border-bottom: calc(0.38 * var(--u)) solid #B9A79F;
  transform: rotate(45deg);
  transition: transform 0.25s, margin-top 0.25s;
}

.wnl-time-card.open .wnl-time-arrow {
  margin-top: calc(0.6 * var(--u));
  transform: rotate(-135deg);
}

/* 明细默认折叠 */
.wnl-time-body { display: none; }
.wnl-time-card.open .wnl-time-body { display: block; }

/* 吉时卡头转绿、凶时卡头转红（左侧色条 + 底色渐变同步变色） */
.wnl-time-card.is-ji .wnl-time-head {
  border-left-color: #4CC38A;
  background: linear-gradient(90deg, #EAF8F0, #F8FDFA);
}

.wnl-time-card.is-xiong .wnl-time-head {
  border-left-color: #EE6A76;
  background: linear-gradient(90deg, #FDECEC, #FFF8F8);
}

.wnl-time-name {
  font-size: calc(3.9 * var(--u));
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.wnl-time-range {
  font-size: calc(3.1 * var(--u));
  color: #94a3b8;
  white-space: nowrap;
}

.wnl-time-tag {
  flex-shrink: 0;
  margin-left: auto;
  padding: calc(0.5 * var(--u)) calc(1.8 * var(--u));
  border-radius: calc(4 * var(--u));
  font-size: calc(3 * var(--u));
  font-weight: 700;
  color: #fff;
}

.wnl-time-tag.tag-ji    { background: linear-gradient(135deg, #4CC38A, #35A874); }
.wnl-time-tag.tag-xiong { background: linear-gradient(135deg, #EE6A76, #D93A4A); }

/* 明细行：标签列宽 9u 对齐，宜忌用圆形角标补齐同宽 */
.wnl-time-card p {
  display: flex;
  align-items: center;
  padding: 0 calc(3 * var(--u));
  font-size: calc(3.4 * var(--u));
  line-height: calc(5.8 * var(--u));
  color: #555;
}

.wnl-time-card p:first-of-type { margin-top: calc(2.2 * var(--u)); }
.wnl-time-card p:last-of-type { margin-bottom: calc(2.6 * var(--u)); }

.wnl-time-card p strong {
  flex-shrink: 0;
  width: calc(9 * var(--u));
  color: #64748b;
  font-size: calc(3.3 * var(--u));
  font-weight: 600;
}

.wnl-time-card p span {
  flex: 1;
  min-width: 0;
}

/* 宜 / 忌 圆形角标（宽度 + 右间距 = 9u，与文字标签对齐） */
.wnl-time-yj {
  flex-shrink: 0;
  width: calc(4.8 * var(--u));
  height: calc(4.8 * var(--u));
  margin-right: calc(4.2 * var(--u));
  border-radius: 50%;
  text-align: center;
  line-height: calc(4.8 * var(--u));
  font-size: calc(3 * var(--u));
  font-weight: 700;
  font-style: normal;
  color: #fff;
}

.wnl-time-yj.yi { background: linear-gradient(135deg, #4CC38A, #35A874); }
.wnl-time-yj.ji { background: linear-gradient(135deg, #EE6A76, #D93A4A); }