/* =========================================================
   通书（老黄历纸卡）样式 —— 仿 chinese-almanac 排版
   155 : 200 比例的绿格纸卡，使用容器查询单位自适应缩放
   主色沿用参考站的墨绿 #1b5e20；周末自动切换为红色
   ========================================================= */

.ts-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 28px;
}

/* 顶部翻页 / 跳转工具条 */
.ts-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: min(96vw, 820px);
}
.ts-toolbar .ts-hint {
  font-size: 12.5px;
  color: var(--ts-muted, #9a907c);
  flex-basis: 100%;
  text-align: center;
}
.ts-toolbar a.ts-nav,
.ts-toolbar button.ts-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.2px solid rgba(27, 94, 32, .45);
  background: transparent;
  color: var(--ts-primary, #1b5e20);
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s, transform .16s, color .16s, border-color .16s;
}
.ts-toolbar a.ts-nav:hover,
.ts-toolbar button.ts-nav:hover {
  background: var(--ts-primary, #1b5e20);
  border-color: var(--ts-primary, #1b5e20);
  color: #fff;
  transform: scale(1.06);
}
.ts-toolbar .ts-today {
  padding: 0 18px;
  height: 36px;
  line-height: 36px;
  border: none;
  border-radius: 18px;
  background: var(--ts-primary, #1b5e20);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(27, 94, 32, .3);
  cursor: pointer;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.ts-toolbar .ts-today:hover {
  background: #14501c;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(27, 94, 32, .38);
}
.ts-toolbar .ts-today:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(27, 94, 32, .3); }
.ts-toolbar .ts-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.ts-toolbar .ts-label {
  font-size: 13px;
  color: var(--ts-muted, #9a907c);
  letter-spacing: 1px;
}
/* 「老黄历」跳转链接：与日期标签同行，小胶囊 */
.ts-toolbar .ts-goto {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.2px solid rgba(27, 94, 32, .45);
  background: rgba(27, 94, 32, .07);
  color: var(--ts-primary, #1b5e20);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.ts-toolbar .ts-goto:hover {
  background: var(--ts-primary, #1b5e20);
  border-color: var(--ts-primary, #1b5e20);
  color: #fff;
  transform: translateY(-1px);
}

/* 纸卡 + 左右翻页箭头的整体舞台 */
.ts-deck {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 18px);
  width: 100%;
  max-width: calc(820px + 2 * (52px + clamp(6px, 1.6vw, 18px)));
}
.ts-deck .ts-arrow {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--ts-primary, #1b5e20);
  background: var(--ts-paper, #fdfcf7);
  color: var(--ts-primary, #1b5e20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(92, 74, 48, .18);
  transition: background .16s, color .16s, transform .16s, box-shadow .16s;
}
.ts-deck .ts-arrow svg { width: 26px; height: 26px; display: block; }
.ts-deck .ts-arrow:hover {
  background: var(--ts-primary, #1b5e20);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(92, 74, 48, .28);
}
.ts-deck .ts-arrow:active { transform: scale(.94); }
.ts-deck .ts-arrow:focus-visible { outline: 2px solid var(--ts-primary, #1b5e20); outline-offset: 3px; }

/* 纸卡左右半边的点击热区（左=上一页，右=下一页） */
.ts-card .ts-hot {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 7;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: auto;
}
.ts-card .ts-hot.left  { left: 0;  justify-content: flex-start; padding-left: calc(2 * var(--u)); }
.ts-card .ts-hot.right { right: 0; justify-content: flex-end;   padding-right: calc(2 * var(--u)); }
.ts-card .ts-hot:hover { opacity: 1; }
.ts-card .ts-hot-ico {
  font-size: calc(16 * var(--u));
  line-height: 1;
  color: var(--color-primary);
  background: rgba(253, 252, 247, .82);
  border-radius: 50%;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(92, 74, 48, .2);
}

/* ===== 真 3D 翻页：一张带正反面的"纸叶" =====
   下一页：绕顶边向外向上卷起（翻过卷轴，露出纸背面）；
   上一页：绕底边向外向下卷落。翻起后底下是预取的下一页卡片。 */
.ts-under {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.ts-under .ts-card {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
}
.ts-leaf {
  position: absolute;
  inset: 0;
  z-index: 6;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  pointer-events: none;
}
/* prev 与 next 同轴（均为 50% 0，即顶部卷轴） */
.ts-leaf .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 3px;
}
.ts-leaf .face .ts-card {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  box-shadow: none;
}
.ts-leaf .face.back { transform: rotateX(180deg); }
.ts-leaf .paper-back {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background:
    radial-gradient(130% 55% at 50% 0%, rgba(92, 74, 48, .16), rgba(92, 74, 48, 0) 58%),
    linear-gradient(180deg, #f6f2e5 0%, #efe9d8 55%, #e5deca 100%);
  border: 1.5px solid rgba(96, 88, 66, .4);
  box-shadow: inset 0 0 46px rgba(92, 74, 48, .1);
}
/* 下一页：底边朝观者卷起、向上翻过卷轴（绕顶边，正角度）；
   上一页：顶边朝观者卷起、向下卷落（绕底边，负角度）。 */
@keyframes ts-leaf-next {
  from { transform: rotateX(0); }
  to   { transform: rotateX(179deg); }
}
/* 转轴统一在顶部卷轴上（prev 与 next 同轴，不再绕底边） */
@keyframes ts-leaf-prev {
  from { transform: rotateX(179deg); }
  to   { transform: rotateX(0); }
}
.ts-leaf.run.next {
  animation: ts-leaf-next .62s cubic-bezier(.42, 0, .58, 1) both;
}
.ts-leaf.run.prev {
  animation: ts-leaf-prev .62s cubic-bezier(.42, 0, .58, 1) both;
}

/* 到达动画（仅整页跳转兜底时用）：纯淡入微下滑，不做角度回摆 */
@keyframes ts-arrive-next {
  from { transform: translateY(-8px); opacity: .55; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes ts-arrive-prev {
  from { transform: translateY(8px); opacity: .55; }
  to   { transform: translateY(0);   opacity: 1; }
}
.ts-card.arrive-next {
  animation: ts-arrive-next .34s ease-out both;
}
.ts-card.arrive-prev {
  animation: ts-arrive-prev .34s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .ts-leaf.run.next, .ts-leaf.run.prev,
  .ts-card.arrive-next, .ts-card.arrive-prev { animation-duration: .01s; }
}

/* 顶部卷轴：翻过的页卷在轴上，随翻页数变厚 */
.ts-hang {
  position: relative;
  perspective: 2600px; /* 真 3D 翻页的透视 */
}
.ts-roll {
  --r: 0;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 7px);
  transform: translateX(-50%);
  width: calc(100% + 28px);
  height: calc(21px + var(--r, 0) * 1.7px);
  max-height: 48px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    #a29b8a 0%, #d9d4c6 14%, #ffffff 38%, #f6f3e9 55%,
    #d4cebd 78%, #948d7c 100%);
  box-shadow: 0 8px 18px rgba(92, 74, 48, .3), 0 2px 4px rgba(92, 74, 48, .18),
              inset 0 -2px 5px rgba(60, 52, 38, .18);
  z-index: 9;
  pointer-events: none;
  transition: height .4s ease;
}
.ts-roll .cap {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7d7668 0%, #cfc9b8 35%, #8f887a 70%, #5f594d 100%);
  box-shadow: 0 3px 8px rgba(60, 52, 38, .35);
}
.ts-roll .cap.l { left: -3px; }
.ts-roll .cap.r { right: -3px; }

/* 纸卡本体 */
.ts-card {
  --color-primary: #1b5e20;
  --color-primary-light: rgba(27, 94, 32, .4);
  --color-primary-tint: rgba(27, 94, 32, .1);
  --color-bg-paper: #fdfcf7;
  --color-white: #fff;

  position: relative;
  width: min(96vw, 820px);
  aspect-ratio: 155 / 200;
  padding: 11mm;
  box-sizing: border-box;
  background: var(--color-bg-paper);
  color: var(--color-primary);
  container-type: size;
  --u: calc(100cqw / 180);
  --uh: calc(100cqh / 256);
  --border-width: calc(.6 * var(--u));

  display: grid;
  grid-template-columns: 15.144fr 13.456fr 25.472fr 1.676fr 29fr 2.354fr 25.453fr 13.494fr 15.144fr;
  grid-template-rows: 14.847fr 72.7fr 7.062fr 13fr 24fr 8fr 7fr 1.465fr 12.031fr 6.921fr 8fr 8fr;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 24px 60px rgba(92, 74, 48, .26), 0 10px 22px rgba(92, 74, 48, .16),
              0 0 0 1px rgba(120, 104, 78, .12);
  border-radius: 3px;
}
/* 内双线框 */
.ts-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--color-primary-light);
  pointer-events: none;
  z-index: 5;
}

.ts-card.weekend {
  --color-primary: #c62828;
  --color-primary-light: rgba(198, 40, 40, .4);
  --color-primary-tint: rgba(198, 40, 40, .1);
}

/* 四角叶纹装饰 */
.ts-corner {
  position: absolute;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  z-index: 6;
  color: var(--color-primary);
  pointer-events: none;
}
.ts-corner.tl { top: calc(1 * var(--u));    left: calc(1 * var(--u)); }
.ts-corner.tr { top: calc(1 * var(--u));    right: calc(1 * var(--u)); transform: scaleX(-1); }
.ts-corner.bl { bottom: calc(1 * var(--u)); left: calc(1 * var(--u)); transform: scaleY(-1); }
.ts-corner.br { bottom: calc(1 * var(--u)); right: calc(1 * var(--u)); transform: scale(-1, -1); }

.ts-card .table-cell {
  position: relative;
  overflow: hidden;
  border-right: var(--border-width) solid var(--color-primary);
  border-bottom: var(--border-width) solid var(--color-primary);
}

.ts-card .grid-lunar-date,
.ts-card .grid-solar-term,
.ts-card .grid-weekday {
  border-top: var(--border-width) solid var(--color-primary);
}
.ts-card .grid-lunar-date,
.ts-card .grid-suitable,
.ts-card .grid-zodiac-wrap,
.ts-card .grid-lucky-numbers,
.ts-card .grid-footer {
  border-left: var(--border-width) solid var(--color-primary);
}

.ts-card .bg-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.ts-card .text-white { color: var(--color-white); }
.ts-card .ink { display: block; }

/* 页眉：英文月 / 年 / 中文月（叶饰 + 年份圆角框） */
.ts-card .grid-header {
  grid-area: 1 / 1 / 2 / 10;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  background: var(--color-bg-paper);
  padding: 0 calc(1 * var(--u));
}
.ts-card .h-en,
.ts-card .h-year,
.ts-card .h-cn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-card .h-leaf {
  width: calc(5.2 * var(--u));
  height: calc(5.2 * var(--u));
  display: inline-flex;
  color: var(--color-primary);
}
.ts-card .h-leaf svg { width: 100%; height: 100%; display: block; }
.ts-card .h-leaf.flip { transform: scaleX(-1); }
.ts-card .h-en {
  text-align: center;
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-weight: 900; font-style: italic;
  font-size: calc(10.5 * var(--u)); letter-spacing: 0;
}
.ts-card .h-year {
  justify-self: center;
  text-align: center;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 900; font-style: italic;
  font-size: calc(14 * var(--u)); letter-spacing: -.02em;
  /* ⚠️ Georgia 默认是「旧式数字」（0/1/2 是 x-height，3/4/5/7/9 有升部或降部），
     同一年份里 4 个数字高矮不一。必须显式切到等高数字才能对齐。 */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  padding: 0 .42em;
  line-height: 1.35;
}
.ts-card .h-cn {
  text-align: center;
  font-weight: 800;
  font-size: calc(12 * var(--u)); letter-spacing: .5px;
}

/* 对联（竖排楷体，每边单列一行排完）
   ⚠️ 不要 font-weight:700 / -webkit-text-stroke —— 楷体只有 regular 字重，
   700 会触发浏览器「合成加粗」，笔画被轮廓膨胀后边缘发虚；再叠一层描边就更糊了。
   楷体本身笔画已比宋体饱满，用 400 最干净。 */
.ts-card .proverb {
  writing-mode: vertical-rl;
  font-family: "KaiTi", "STKaiti", "SimSun", serif;
  font-weight: 400;
  font-size: calc(8.2 * var(--u));
  justify-self: center;
  align-self: center;
  letter-spacing: calc(.5 * var(--u));
  height: 100%;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
}
.ts-card .grid-couplet-left  { grid-area: 2 / 1 / 3 / 2; }
.ts-card .grid-couplet-right { grid-area: 2 / 9 / 3 / 10; }

/* 主日期大数字 */
.ts-card .grid-main-date {
  grid-area: 2 / 2 / 3 / 9;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.ts-card .big-date {
  font-size: calc(96 * var(--u));
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-7 * var(--u));
  transform: scaleY(1.12);
  text-indent: calc(-7 * var(--u));
}

/* ---------- 节日 / 节气章：当天是节日或交节日时叠在主日期格里 ---------- */
/* 日期数字的大小由 PHP 按「名字的 0.85 倍」算好，写成 --ts-num（保证名字比数字大）。
   ⚠️ 字距 / 缩进必须按字号等比（原稿 96u 配 -7u = -7.3%），否则数字缩小后会被负字距挤成一团 */
.ts-card .grid-main-date.has-festival .big-date {
  font-size: calc(var(--ts-num, 24) * var(--u));
  letter-spacing: calc(var(--ts-num, 24) * -0.073 * var(--u));
  text-indent: calc(var(--ts-num, 24) * -0.073 * var(--u));
  opacity: .92;
}
/* 有章时：名字与数字**分居对角** —— 名字占 $festPos 那一角，数字占它的对角。
   两侧各内缩 --fx / --fy：既避免贴边撞上竖排对联，也让对角距离不至于拉满整格。 */
.ts-card .grid-main-date.has-festival {
  --fx: calc(18 * var(--u));   /* 离左右边 */
  --fy: calc(14 * var(--u));   /* 离上下边（⚠️ 改这里要同步 tongshu.php 里的 $hBudget） */
  --fnx: calc(26 * var(--u));  /* 「名字居中」位里数字专用的左右内缩（比 --fx 收一档） */
  display: block;
  padding: 0;
}
.ts-card .grid-main-date.has-festival .fest-plate,
.ts-card .grid-main-date.has-festival .big-date { position: absolute; }

/* 名字：占据 $festPos 指定的那一角 */
.ts-card .grid-main-date.p-tl .fest-plate { left:  var(--fx); top:    var(--fy); }
.ts-card .grid-main-date.p-tr .fest-plate { right: var(--fx); top:    var(--fy); }
.ts-card .grid-main-date.p-bl .fest-plate { left:  var(--fx); bottom: var(--fy); }
.ts-card .grid-main-date.p-br .fest-plate { right: var(--fx); bottom: var(--fy); }
.ts-card .grid-main-date.p-tc .fest-plate { left: 50%; top:    var(--fy); transform: translateX(-50%); }
.ts-card .grid-main-date.p-bc .fest-plate { left: 50%; bottom: var(--fy); transform: translateX(-50%); }

/* 数字：严格落在那一个角的**对角**上（tl↔br、tr↔bl、tc↔bc） */
.ts-card .grid-main-date.p-tl .big-date { right: var(--fx); bottom: var(--fy); }
.ts-card .grid-main-date.p-tr .big-date { left:  var(--fx); bottom: var(--fy); }
.ts-card .grid-main-date.p-bl .big-date { right: var(--fx); top:    var(--fy); }
.ts-card .grid-main-date.p-br .big-date { left:  var(--fx); top:    var(--fy); }
.ts-card .grid-main-date.p-tc .big-date { left: 50%; bottom: var(--fy); transform: translateX(-50%) scaleY(1.12); }
.ts-card .grid-main-date.p-bc .big-date { left: 50%; top:    var(--fy); transform: translateX(-50%) scaleY(1.12); }

/* tc / bc 是「名字居中」位：数字再随机贴左 / 贴右，落成斜对角（否则只是上下同列）。
   这里的数字不贴到 --fx，而是收一档（--fnx），免得和居中名字拉得太开 */
.ts-card .grid-main-date.p-tc.n-l .big-date,
.ts-card .grid-main-date.p-bc.n-l .big-date { left: var(--fnx); transform: scaleY(1.12); }
.ts-card .grid-main-date.p-tc.n-r .big-date,
.ts-card .grid-main-date.p-bc.n-r .big-date { left: auto; right: var(--fnx); transform: scaleY(1.12); }

.ts-card .fest-plate {
  display: flex;
  flex-direction: column;
  width: max-content;
  /* ⚠️ 必须限宽 84u（≈ 每行字数 × 字号）：字号是按「78 ÷ 每行字数」反推的，
     若让名字自己撑到整格宽，一行会塞进比计划更多的字，折行就乱（11 字会排成 8+3）。 */
  max-width: min(100%, calc(84 * var(--u)));
  line-height: 1.1;
  z-index: 2;
  pointer-events: none;
}

.ts-card .fest-name {
  font-family: "KaiTi", "STKaiti", "FangSong", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: calc(.3 * var(--u));
  overflow-wrap: anywhere;
  text-align: center;
  -webkit-text-stroke: calc(.14 * var(--u)) currentColor;
  paint-order: stroke fill;
}
/* 一行版强制不折行；两行版交给 balance 让两行长短接近（限宽后不会再出现 8+3 这种畸轻畸重） */
.ts-card .fest-name.nowrap { white-space: nowrap; }
.ts-card .fest-name.balance { text-wrap: balance; }

/* ---------- 交节时刻：当天恰为交节日时，显示在主日期格底部居中 ---------- */
/* 名字章最低点在 --fy(14u)，此处贴到 4.5u、字号仅 9u，垂直带不与名字 / 数字重叠 */
.ts-card .grid-main-date .jq-time {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(4.5 * var(--u));
  font-family: "KaiTi", "STKaiti", "FangSong", serif;
  font-weight: 700;
  font-size: calc(9 * var(--u));
  line-height: 1;
  letter-spacing: calc(.4 * var(--u));
  white-space: nowrap;
  color: var(--color-primary);
  z-index: 3;
  pointer-events: none;
}
.ts-card .fest-deco {
  position: absolute;
  width: calc(var(--ds) * var(--u));
  height: calc(var(--ds) * var(--u));
  transform: translate(-50%, -50%) rotate(var(--dr));
  pointer-events: none;
}
.ts-card .fest-deco svg { display: block; width: 100%; height: 100%; }

/* 农历日期 */
.ts-card .grid-lunar-date {
  grid-area: 3 / 1 / 5 / 4;
  display: flex;
  flex-direction: column;
  padding: calc(1.5 * var(--u));
}
.ts-card .grid-lunar-date .t-top,
.ts-card .grid-weekday .t-top {
  width: 100%;
  line-height: 1.2;
  display: block;
  font-size: calc(6.5 * var(--u));
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.ts-card .grid-lunar-date .t-bot,
.ts-card .grid-weekday .t-bot {
  flex: 1;
  min-height: 0;
  font-family: "KaiTi", "STKaiti", "FangSong", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: calc(1.5 * var(--u));
  line-height: 1;
  font-size: calc(11 * var(--u));
  letter-spacing: calc(1 * var(--u));
  padding-left: calc(1 * var(--u));
  white-space: nowrap;
  overflow: hidden;
}

/* 节气 */
.ts-card .grid-solar-term {
  grid-area: 3 / 4 / 5 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(1.5 * var(--u));
}
.ts-card .grid-solar-term .t-top { font-size: calc(8 * var(--u)); text-align: center; white-space: nowrap; }
.ts-card .grid-solar-term .t-bot { font-size: calc(6.5 * var(--u)); text-align: center; margin-top: calc(1.5*var(--u)); white-space: nowrap; }

/* 星期 */
.ts-card .grid-weekday {
  grid-area: 3 / 7 / 5 / 10;
  display: flex;
  flex-direction: column;
  padding: calc(1.5 * var(--u));
}

/* 宜 / 忌 */
.ts-card .grid-suitable,
.ts-card .grid-avoid {
  display: flex;
  flex-direction: column;
  padding: calc(1.2 * var(--u));
  align-items: center;
}
.ts-card .grid-suitable { grid-area: 5 / 1 / 8 / 3; }
.ts-card .grid-avoid    { grid-area: 5 / 8 / 7 / 10; }
.ts-card .oval-icon {
  width: calc(18 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(6.5 * var(--u));
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1;
  font-family: "KaiTi", "STKaiti", serif;
}
.ts-card .yiji-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
  min-height: 0;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-size: calc(5.4 * var(--u));
  line-height: 1.08;
  width: 100%;
  overflow: hidden;
}
/* 每行两个词条，最多 4 行（8 个） */
.ts-card .yiji-items span {
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

/* 时辰吉凶 */
.ts-card .grid-time-fortune {
  grid-area: 5 / 3 / 6 / 8;
  display: flex;
  flex-direction: column;
  padding: 0 calc(3 * var(--u));
  justify-content: center;
}
.ts-card .steel-row {
  display: flex;
  align-items: center;
  font-size: calc(5.6 * var(--u));
  justify-content: space-between;
  line-height: 1.45;
  white-space: nowrap;
  width: 100%;
}
/* 12 个时辰 / 吉凶字按两端对齐铺满整格（与参考站 justify 效果一致） */
.ts-card .char {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.3;
}
.ts-card .char > span { flex: 0 0 auto; }
.ts-card .shichen-label { font-weight: 700; margin-right: calc(1.5 * var(--u)); flex: 0 0 auto; }

/* 九星 */
.ts-card .grid-nine-stars {
  grid-area: 7 / 8 / 9 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(6 * var(--u));
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* 冲煞 */
.ts-card .grid-conflict {
  grid-area: 9 / 8 / 11 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(1.5 * var(--uh)) 0;
}
.ts-card .snake-icon {
  flex: 1;
  position: relative;
  align-self: stretch;
  margin: 0 calc(1.5 * var(--u));
  font-weight: 400;
  line-height: 1;
}
.ts-card .snake-icon .sx-day,
.ts-card .snake-icon .sx-clash {
  position: absolute;
  display: block;
  line-height: 1;
  font-family: "KaiTi", "STKaiti", serif;
}
.ts-card .snake-icon .sx-day   { top: 0; left: 14%; font-size: calc(14 * var(--u)); }
.ts-card .snake-icon .sx-clash { right: 3%; bottom: 0; font-size: calc(10 * var(--u)); }
.ts-card .violet-text {
  font-size: calc(3.85 * var(--u));
  line-height: 1.35;
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
}

/* 年·月 */
.ts-card .grid-year-month {
  grid-area: 11 / 8 / 12 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(6.4 * var(--u));
  letter-spacing: calc(.5 * var(--u));
  padding-left: calc(1 * var(--u));
  white-space: nowrap;
}

/* 吉神方位 */
.ts-card .grid-auspicious-gods {
  grid-area: 6 / 3 / 11 / 5;
  display: flex;
  font-size: calc(5.6 * var(--u));
  padding: calc(1.2 * var(--u));
  justify-content: center;
  overflow: hidden;
}
.ts-card .grid-auspicious-gods #t-gods {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ts-card .grid-auspicious-gods .header {
  border-radius: calc(1.5 * var(--u));
  font-weight: 700;
  line-height: 1.44 !important;
  padding-top: .057em;
  text-align: center;
}
.ts-card .grid-auspicious-gods .item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--u));
  line-height: 1;
}
.ts-card .grid-auspicious-gods .god-label { font-weight: 700; }
.ts-card .grid-auspicious-gods .god-dir { color: var(--color-primary); opacity: .85; }

/* 飞星盘 */
.ts-card .grid-feixing {
  grid-area: 6 / 5 / 10 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2 * var(--u));
}
.ts-card .grid-feixing svg { display: block; width: 100%; height: auto; max-height: 100%; }

/* 五行 */
.ts-card .grid-five-elements {
  grid-area: 6 / 6 / 10 / 8;
  display: flex;
  flex-direction: column;
  padding: calc(1.5 * var(--u));
}
.ts-card .grid-five-elements .row {
  flex: 1;
  display: flex;
  font-size: calc(4.2 * var(--u));
  align-items: center;
  gap: calc(1.5 * var(--u));
  min-height: 0;
  white-space: nowrap;
}
/* label / val2 用 flex:1 1 auto（基准取内容宽度）——若用 flex:1（基准 0）两栏会被
   强制等宽成 40px，3 字标签（廿八宿 / 十二神）内容 52px 就会溢出压到中间大字上 */
.ts-card .grid-five-elements .label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: justify;
  text-align-last: justify;
  display: block;
  border-bottom: var(--border-width) solid var(--color-primary-light);
  white-space: nowrap;
}
.ts-card .grid-five-elements .val1 {
  flex: 0 0 auto;
  text-align: center;
  transform: scaleY(.85);
  transform-origin: center;
  font-weight: 700;
  font-size: calc(5.4 * var(--u));
}
.ts-card .grid-five-elements .val2 {
  flex: 1 1 auto;
  min-width: 0;
  text-align: justify;
  text-align-last: justify;
  display: block;
  border-bottom: var(--border-width) solid var(--color-primary-light);
}

/* 八字 / 胎神 */
.ts-card .grid-bazi,
.ts-card .grid-fetus-spirit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1.2 * var(--u));
  overflow: hidden;
}
.ts-card .grid-bazi { grid-area: 10 / 5 / 12 / 6; }
.ts-card .grid-fetus-spirit { grid-area: 10 / 6 / 12 / 8; }
.ts-card .bazi-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: calc(1.2 * var(--u));
  font-size: calc(5.4 * var(--u));
}
.ts-card .bazi-header {
  writing-mode: vertical-rl;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(1 * var(--u));
  height: 100%;
  text-align: center;
  line-height: 1.2;
  padding: 0 calc(.8 * var(--u));
  flex-shrink: 0;
  letter-spacing: calc(.6 * var(--u));
  font-family: "KaiTi", "STKaiti", serif;
  font-weight: 700;
}
.ts-card .grid-bazi .bazi {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: calc(1.5 * var(--u));
  align-items: center;
}
.ts-card .grid-bazi .bazi > div { white-space: nowrap; line-height: 1.2; }
.ts-card .grid-fetus-spirit .bazi {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(1.5 * var(--u));
}
.ts-card .grid-fetus-spirit .bazi > div {
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
}

/* 生肖号码 */
.ts-card .grid-zodiac-wrap {
  grid-area: 8 / 1 / 11 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.ts-card .animal-cell {
  position: relative;
  padding: calc(.5 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.ts-card .animal-nums {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(.3 * var(--u));
  font-size: calc(4 * var(--u));
  line-height: 1.1;
  white-space: nowrap;
  font-family: Arial, sans-serif;
}
.ts-card .animal-icon {
  position: absolute;
  font-size: calc(6.4 * var(--u));
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: "KaiTi", "STKaiti", serif;
  font-weight: 400;
  line-height: 1;
  opacity: .9;
  pointer-events: none;
}
/* 年支所属生肖的号码池有 5 个号（01 13 25 37 49），第 5 个叠在中间的生肖字上；
   此时生肖字退成淡底纹，保证号码清晰 */
.ts-card .animal-cell.has-extra .animal-icon { opacity: .55; }
.ts-card .animal-extra {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: calc(4.6 * var(--u));
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 calc(.3 * var(--u)) var(--color-bg-paper), 0 0 calc(.3 * var(--u)) var(--color-bg-paper);
}

/* 吉数 */
.ts-card .grid-lucky-numbers {
  grid-area: 11 / 1 / 12 / 5;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: calc(4.8 * var(--u));
  padding: 0 calc(1.2 * var(--u));
  gap: calc(.8 * var(--u)) calc(1.2 * var(--u));
  overflow: hidden;
}
.ts-card .grid-lucky-numbers .header {
  padding: calc(.6 * var(--u)) calc(.8 * var(--u));
  border-radius: calc(.5 * var(--u));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "KaiTi", "STKaiti", serif;
  font-weight: 700;
  flex-shrink: 0;
}
.ts-card .grid-lucky-numbers .zodiac { display: flex; flex-shrink: 0; }
.ts-card .grid-lucky-numbers span.num {
  font-size: calc(4.4 * var(--u));
  line-height: 1;
  font-family: Arial, sans-serif;
  flex-shrink: 0;
}

/* 页脚：每日解梦 + 潮汐（潮型 + 两涨两落）
   --fn 由 PHP 按最长一行文本宽度算出，保证两者挤在一行不折行、不溢出 */
.ts-card .grid-footer {
  grid-area: 12 / 1 / 13 / 10;
  display: flex;
  align-items: center;
  padding: 0 calc(2.5 * var(--u));
  font-size: calc(var(--fn, 5) * var(--u));
  justify-content: space-between;
  gap: calc(2 * var(--u));
  white-space: nowrap;
  line-height: 1;
}
.ts-card .grid-footer > div { white-space: nowrap; }
.ts-card .grid-footer #t-dream {
  flex: 0 1 auto;
  overflow: hidden;
}
/* 潮汐 */
.ts-card .grid-footer .tide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u));
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ts-card .grid-footer .tide-type {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: calc(.9 * var(--u));
  padding: calc(.3 * var(--u)) calc(1 * var(--u));
  font-size: .92em;
  letter-spacing: 0;
}
.ts-card .grid-footer .tide-pair {
  display: inline-flex;
  align-items: center;
}
.ts-card .grid-footer .tide-pair + .tide-pair::before {
  content: '·';
  margin: 0 calc(.55 * var(--u));
  opacity: .5;
}
.ts-card .grid-footer .tide-pair i {
  font-style: normal;
  font-family: var(--sans);
  opacity: .62;
  margin-right: calc(.35 * var(--u));
}
.ts-card .grid-footer .tide-pair i:not(:first-child) { margin-left: calc(.9 * var(--u)); }
.ts-card .grid-footer .tide-pair em { font-style: normal; letter-spacing: -.01em; }

/* 中小屏：箭头改为悬浮在纸卡左右边缘，纸卡占满宽度 */
@media (max-width: 900px) {
  .ts-card { width: min(820px, calc(100vw - 150px)); }
}
@media (max-width: 760px) {
  .ts-card { width: 96vw; }
  .ts-deck { justify-content: center; }
  .ts-deck .ts-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 46px;
    height: 46px;
    background: rgba(253, 252, 247, .92);
    box-shadow: 0 4px 14px rgba(92, 74, 48, .26);
  }
  .ts-deck .ts-arrow:hover { transform: translateY(-50%) scale(1.08); }
  .ts-deck .ts-arrow:active { transform: translateY(-50%) scale(.94); }
  .ts-deck .ts-arrow.prev { left: 4px; }
  .ts-deck .ts-arrow.next { right: 4px; }
  .ts-toolbar { width: 96vw; }
}
@media (max-width: 520px) {
  .ts-card { padding: 7mm; }
}

/* ===== 工具按钮（查询日期 / 导出日历）：紧贴卷轴右上角 ===== */
.ts-tools {
  position: absolute;
  top: -33px;
  right: -10px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 7px;
}
.ts-tool {
  height: 40px;
  padding: 0 15px 0 12px;
  gap: 7px;
  border: none;
  border-radius: 999px;
  background: var(--ts-primary, #1b5e20);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--sans);
  box-shadow: 0 6px 16px rgba(27, 94, 32, .3);
  transition: transform .15s, background .15s;
  white-space: nowrap;
}
.ts-tool svg { width: 19px; height: 19px; display: block; flex: none; }
.ts-tool-txt { font-size: 13.5px; letter-spacing: .5px; line-height: 1; }
.ts-tool:hover { transform: scale(1.08); background: #256b2a; }
.ts-tool:active { transform: scale(.94); }
.ts-tool:focus-visible { outline: 2px solid #1b5e20; outline-offset: 2px; }

/* ===== 弹层面板（查询日期 / 导出日历）—— 挂在 .ts-deck 下，由 JS 按按钮坐标贴到按钮正下方 =====
   注意：不能放进 .ts-hang —— 它带 perspective（= 层叠上下文），会把面板困在翻页箭头（z-index:8）下面 */
.ts-dock {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 80;
}
.ts-dock-box {
  /* --dock-r = 面板右边距视口右侧的距离（JS 按按钮坐标写入），窄屏按它收窄，避免左右出屏 */
  width: min(340px, calc(100vw - var(--dock-r, 32px) - 14px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(50, 40, 20, .3), 0 0 0 1px rgba(0, 0, 0, .05);
  padding: 14px 16px 16px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #22301f;
  animation: ts-dock-in .18s ease-out;
}
@keyframes ts-dock-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ts-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ts-dock-head h2 { font-size: 15.5px; font-weight: 700; margin: 0; color: #1d2a1a; }
.ts-x {
  width: 26px; height: 26px;
  border: none; border-radius: 6px;
  background: transparent; color: #666;
  font-size: 17px; line-height: 1;
  cursor: pointer;
}
.ts-x:hover { background: #f0ede4; color: #222; }
.ts-date-input,
.ts-field input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid #cfc9b8;
  border-radius: 8px;
  font-size: 14px;
  color: #22301f;
  background: #fdfcf7;
}
.ts-date-input:focus, .ts-field input:focus { outline: none; border-color: #1b5e20; }
.ts-dock-help { font-size: 12px; color: #8b8474; margin: 8px 2px 10px; }
.ts-dock-actions { display: flex; gap: 8px; }
.ts-ghost, .ts-primary {
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid #1b5e20;
}
.ts-ghost { flex: 1; background: #fff; color: #1b5e20; }
.ts-ghost:hover { background: rgba(27, 94, 32, .08); }
.ts-primary { background: #1b5e20; color: #fff; padding: 0 18px; }
.ts-primary:hover { background: #256b2a; }
.ts-primary.wide { width: 100%; height: 40px; border: none; font-weight: 700; }

/* 导出面板 */
.ts-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.ts-seg button {
  height: 32px;
  border: 1px solid #d5cfbf;
  border-radius: 999px;
  background: #faf8f2;
  color: #55503f;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ts-seg button:hover { background: #efeadd; }
.ts-seg button.on {
  background: #1b5e20;
  border-color: #1b5e20;
  color: #fff;
  font-weight: 700;
}
.ts-custom { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ts-custom[hidden] { display: none; }
.ts-field { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #55503f; }
.ts-field span { flex: 0 0 auto; }
.ts-summary {
  font-size: 12.5px;
  color: #6b6455;
  background: #f6f3e9;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 12px;
  line-height: 1.5;
}
.ts-status { font-size: 12.5px; color: #1b5e20; margin: 8px 2px 0; min-height: 1.2em; }

/* ===== 查询日期面板：历法切换 / 输入行 / 日历按钮 / 快捷日期 ===== */
.ts-seg.seg2 { grid-template-columns: repeat(2, 1fr); }
.ts-qform { margin: 0; }
.ts-qrow { display: flex; gap: 8px; align-items: stretch; }
.ts-qrow .ts-qinput { flex: 1 1 auto; width: auto; min-width: 0; }
.ts-qpick {
  flex: 0 0 auto;
  padding: 0 13px 0 11px;
  gap: 6px;
  border: 1.5px solid #cfc9b8;
  border-radius: 8px;
  background: #fff;
  color: #1b5e20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.ts-qpick svg { width: 17px; height: 17px; display: block; flex: none; }
.ts-qpick-txt { font-size: 13px; line-height: 1; letter-spacing: .3px; }
.ts-qpick:hover { background: rgba(27, 94, 32, .08); border-color: #1b5e20; }
.ts-qpicker {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.ts-qpicker.show {
  position: static;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 0 10px;
  border: 1.5px solid #1b5e20;
  border-radius: 8px;
  opacity: 1;
  pointer-events: auto;
}
.ts-leapline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #55503f;
  margin: 9px 2px 0;
  cursor: pointer;
}
.ts-leapline[hidden] { display: none; }
.ts-leapline input { width: 15px; height: 15px; accent-color: #1b5e20; margin: 0; }
.ts-qhelp { font-size: 12px; color: #8b8474; margin: 9px 2px 6px; line-height: 1.65; }
.ts-qhelp b { color: #55503f; font-weight: 600; }
.ts-qmsg {
  font-size: 12.5px;
  line-height: 1.5;
  color: #c0392b;
  background: rgba(192, 57, 43, .08);
  border-radius: 8px;
  padding: 0 10px;
  margin: 0 0 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .18s, padding .18s;
}
.ts-qmsg.on { max-height: 80px; padding: 7px 10px; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ts-chips[hidden] { display: none; }
.ts-chip {
  height: 28px;
  padding: 0 11px;
  border: 1px solid #d5cfbf;
  border-radius: 999px;
  background: #faf8f2;
  color: #55503f;
  font-size: 12.5px;
  line-height: 26px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.ts-chip:hover { background: #efeadd; border-color: #bdb49c; }
.ts-chip:active { background: #1b5e20; border-color: #1b5e20; color: #fff; }

/* 工具条里的「农历来源」提示 */
.ts-lunar-src {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(27, 94, 32, .1);
  border: 1px solid rgba(27, 94, 32, .28);
  color: #1b5e20;
  font-size: 12px;
  line-height: 17px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .ts-tools { top: -30px; right: -2px; gap: 6px; }
  .ts-tool { height: 34px; padding: 0 12px 0 10px; gap: 5px; }
  .ts-tool svg { width: 16px; height: 16px; }
  .ts-tool-txt { font-size: 12.5px; letter-spacing: .3px; }
}
@media (max-width: 430px) {
  .ts-tool { padding: 0 11px 0 9px; }
  .ts-tool-txt { font-size: 12px; }
}

@media print {
  .ts-toolbar, .ts-tools, .ts-dock, .totop, .ts-roll { display: none !important; }
}