/* ============================================================
   personal-panel.css — 首页「个人时间」
   ① 首页纤细个人条：发薪倒计时 + 下个法定节假日 结果融合
   ② 全屏详情页：配置（发薪日 / 自定义节假日）+ 日历视图
   HELIX 皮肤：冷蓝黑底 + 单点薄荷强调 + 发丝线 + 零投影；暗/亮双主题。
   所有规则作用域限定 .hx-personal / .hxp-*，不污染其它视图。
   ============================================================ */
.hx-personal { --hxp-mint: #5ef2d6; }

/* ---------- 首页纤细个人条（Hero 与索引之间） ---------- */
.hx-pbar {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.6vw, 52px);
  flex-wrap: wrap;
  padding: 18px clamp(18px, 4.6vw, 84px);
  border-bottom: 1px solid var(--hx-line);
  color: var(--hx-ink);
}
.hxp-eyebrow {
  color: var(--hx-dim2);
  font-weight: 600; font-size: var(--hx-t10); line-height: 1px; font-family: var(--hx-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hxp-bi { display: inline-flex; align-items: baseline; gap: 8px; }
.hxp-bk {
  color: var(--hx-dim);
  font-weight: 600; font-size: var(--hx-t11); line-height: 1px; font-family: var(--hx-mono);
  letter-spacing: 0.08em;
}
.hxp-bv {
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 23px); font-size: round(clamp(18px, 2.4vw, 23px), 1px);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--hx-acc);
}
.hxp-bv.is-live { color: var(--hx-ink); }
.hxp-bv .hxp-u { font-size: 0.5em; font-size: round(0.5em, 1px); font-weight: 700; color: var(--hx-dim); margin-left: 4px; }
.hxp-bsep { width: 1px; height: 22px; background: var(--hx-line-2); margin: 0 clamp(4px, 1vw, 14px); }
.hxp-bset {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--hx-dim2);
  border-radius: 4px;
  padding: 6px 10px;
  font-weight: 500; font-size: var(--hx-t11); line-height: 1px; font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.78;
  transition: color .2s var(--hx-ease), opacity .2s var(--hx-ease);
}
.hxp-bset:hover, .hxp-bset:focus-visible {
  color: var(--hx-acc); opacity: 1; outline: none;
}

/* 节气：首页条内联（名称大字 + 宜小字） */
.hxp-bi-term { flex-wrap: wrap; }
.hxp-tyi {
  font-size: var(--hx-t11);
  color: var(--hx-dim);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0.02em;
}

/* ---------- 全屏详情页 ---------- */
/* 令牌全部取自 helix.css 的弹窗统一套（--hx-mask / --hx-mask-blur /
   --hx-dlg-* / --hx-z-*）：以前这里遮罩抄首页、圆角抄工具页、blur 又自成 2px，
   是全站唯一不属于任何一族弹窗的弹层。 */
.hxp-detail {
  position: fixed;
  inset: 0;
  z-index: var(--hx-z-sheet);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 5vh, 64px) 16px;
  background: var(--hx-mask);
  -webkit-backdrop-filter: blur(var(--hx-mask-blur));
          backdrop-filter: blur(var(--hx-mask-blur));
  overflow: auto;
}
.hxp-detail[hidden] { display: none; }
/* 入场：与「全部功能 / 工具排序」完全同一套（遮罩淡入 + 面板轻弹） */
.hxp-detail:not([hidden]) { animation: hxFade 0.18s var(--hx-ease) both; }
.hxp-detail:not([hidden]) .hxp-detail-in { animation: hxPopIn 0.34s var(--hx-spring) both; }
.hxp-detail.is-out { animation: hxMaskOut 0.15s var(--hx-ease) both; }
.hxp-detail.is-out .hxp-detail-in { animation: hxPopOut 0.15s var(--hx-ease) both; }
.hxp-detail-in {
  width: min(760px, 100%);
  max-height: 100%;
  /* max-height 必须配 overflow：否则内容超高时视觉溢出面板边界，
     「裸奔」在遮罩层上（日历被拦腰截断的那条线就是面板底边框） */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--hx-dlg-bg);
  border: 1px solid var(--hx-dlg-line);
  border-radius: var(--hx-dlg-radius);
  padding: clamp(20px, 3vw, 34px);
}
.hxp-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hx-line);
  margin-bottom: 20px;
}
/* 标题排版照抄 .hx-sw-mt：大字 800 + 等宽大写副标（9.5px / .2em / dim2）。
   原先这里是 clamp(22,3vw,30) 的单行标题，没有副标 —— 与其它弹窗不同族。 */
.hxp-detail-t {
  margin: 0;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: clamp(17px, 2.2vw, 22px); font-size: round(clamp(17px, 2.2vw, 22px), 1px); font-weight: 800; letter-spacing: -0.02em;
}
.hxp-detail-t span {
  font-family: var(--hx-mono);
  font-size: var(--hx-t9-5); font-weight: 400;
  letter-spacing: 0.2em; color: var(--hx-dim2);
}
/* 关闭键：与「全部功能 / 工具排序」的 .hx-sw-mx 同尺寸同语言
   （34×34、发丝边框、按钮圆角、14px 线性叉）。原先这里是 20px 的「×」文字
   + 32×32 + 4px 圆角，全站唯一一处用字符当关闭图标的弹窗。 */
.hxp-close {
  margin-left: auto;
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hx-dlg-line);
  color: var(--hx-dim); border-radius: var(--r-btn); cursor: pointer;
  transition: color .2s var(--hx-ease), border-color .2s var(--hx-ease), background .2s var(--hx-ease);
}
.hxp-close svg { width: var(--hx-t14); height: var(--hx-t14); display: block; }
.hxp-close:hover, .hxp-close:focus-visible {
  color: var(--hx-acc); border-color: var(--hx-acc); background: var(--hx-field-bg); outline: none;
}

/* 详情页顶部两个大倒计时 */
.hxp-detail-bigs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hx-line);
  border-left: 1px solid var(--hx-line);
  margin-bottom: 16px;
}
.hxp-db {
  border-right: 1px solid var(--hx-line);
  border-bottom: 1px solid var(--hx-line);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hxp-db-n {
  font-weight: 800;
  font-size: clamp(38px, 6vw, 56px); font-size: round(clamp(38px, 6vw, 56px), 1px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--hx-acc);
}
.hxp-db-n.is-live { color: var(--hx-ink); }
.hxp-db-k { color: var(--hx-dim); font-size: var(--hx-t13); }

/* 设置行 */
.hxp-deta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--hx-line);
  flex-wrap: wrap;
}
.hxp-deta-row > label { color: var(--hx-dim); font-size: var(--hx-t13); min-width: 84px; }
/* ⚠️ 这里原来写的是 `font-weight: 500; font-size: var(--hx-t13); line-height: 1.2px; font-family: inherit` —— font 简写不接受 inherit
   当字体族，整条声明被浏览器丢弃，输入框实际跑 14px/22.4px（比同行 label 大一号、
   行高也松散），怎么调都对不齐。拆成四个长属性才生效。 */
.hxp-in {
  background: var(--hx-dlg-bg);
  border: 1px solid var(--hx-line-2);
  color: var(--hx-ink);
  border-radius: 4px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: var(--hx-t13);
  font-weight: 500;
  line-height: calc(20px * var(--hx-fsk, 1));
  transition: border-color .2s var(--hx-ease);
}
.hxp-in:focus { outline: none; border-color: var(--hx-acc); }
.hxp-in[type="number"] { width: 72px; }
/* 日期/时间字段已改成 type="text"（原生控件换成自绘浮层），
   所以 [type="text"] 这条必须排除掉它们，否则 flex:1 会把 time/date 撑满整行。
   它们的宽度改由 .hxp-pick 容器决定，见下。 */
.hxp-in[type="text"]:not([data-hxp-pick]) { flex: 1; min-width: 120px; }

/* ---------- 自绘日期 / 时间字段 ----------
   原生 input[type=date|time] 的日历面板是浏览器系统 UI，深色主题下是白底，
   与 HELIX 无关；这里换成 readonly 文本框 + 自绘浮层（hxp-picker.js）。
   图标用 mask 而非 background-image：mask 吃 background-color，
   所以颜色能跟着主题走（currentColor 在 data-uri 里是用不了的）。 */
.hxp-pick { position: relative; display: inline-flex; flex: 0 0 auto; }
.hxp-pick > .hxp-in {
  width: 100%;
  padding-right: 28px;          /* 给右侧图标留位，日期文字不压图 */
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--hx-ease);
}
.hxp-pick > input[data-hxp-pick="time"] { width: 104px; }
.hxp-pick > input[data-hxp-pick="date"] { width: 148px; }
.hxp-pick-i {
  position: absolute; right: 9px; top: 50%;
  width: 13px; height: 13px; margin-top: -6.5px;
  background: var(--hx-dim2);
  pointer-events: none;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  transition: background .2s var(--hx-ease);
}
.hxp-pick-i[data-ico="date"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3.5' y='5.6' width='17' height='14.9' rx='1'/%3E%3Cpath d='M3.5 9.8h17M8 3.6v3.2M16 3.6v3.2'/%3E%3C/svg%3E");
}
.hxp-pick-i[data-ico="time"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M12 7.6V12l3.2 1.9'/%3E%3C/svg%3E");
}
.hxp-pick:hover .hxp-pick-i,
.hxp-pick > .hxp-in:focus + .hxp-pick-i { background: var(--hx-acc); }

/* ---------- 自绘选择浮层（挂 body，fixed + JS 摆位） ----------
   语言与「全部功能 / 工具排序」一致：零圆角、1px 发丝线、零投影；
   选中态用皮肤主交互语言「薄荷底 + 近黑字」，hover 只提亮文字不填底。 */
.hxp-pop {
  position: fixed; left: 0; top: 0;
  z-index: var(--hx-z-anchor, 1100);   /* 必须高过 .hxp-detail(300)，否则被自己所在的详情页盖住 */
  background: var(--hx-dlg-bg);
  border: 1px solid var(--hx-dlg-line);
  border-radius: var(--hx-dlg-radius);
  box-shadow: var(--hx-dlg-shadow);
  padding: 10px;
  animation: hxSugIn 0.28s var(--hx-slide) both;
}
.hxp-pop[hidden] { display: none; }

/* 顶部：‹ 年月 › */
.hxp-pop-top {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hx-line);
}
.hxp-pop-t {
  flex: 1 1 auto; text-align: center;
  font-size: var(--hx-t12-5); font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--hx-ink);
}
.hxp-pop-nav {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hx-dlg-line); border-radius: var(--r-btn);
  color: var(--hx-dim); cursor: pointer; font-size: var(--hx-t15); line-height: 1;
  transition: color .18s var(--hx-ease), border-color .18s var(--hx-ease);
}
.hxp-pop-nav:hover, .hxp-pop-nav:focus-visible {
  color: var(--hx-acc); border-color: var(--hx-acc); outline: none;
}

/* 日历主体 */
.hxp-pop-cal { width: 246px; }
.hxp-pop-dows {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.hxp-pop-dow {
  text-align: center; padding: 6px 0 5px;
  color: var(--hx-dim2);
  font-weight: 600; font-size: var(--hx-t9-5); line-height: 1px; font-family: var(--hx-mono);
  letter-spacing: .1em;
}
.hxp-pop-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.hxp-pop-d {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center;
  height: 30px;
  background: transparent; border: 0; border-radius: 2px;
  color: var(--hx-ink);
  font-family: inherit; font-size: var(--hx-t12-5); font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .14s var(--hx-ease), color .14s var(--hx-ease);
}
.hxp-pop-d.is-out { color: var(--hx-dim2); opacity: .32; cursor: default; }
.hxp-pop-d:not(.is-out):hover { background: var(--hx-field-bg); color: var(--hx-acc); }
.hxp-pop-d.is-today { color: var(--hx-acc); font-weight: 800; }   /* 今天：只染字，不填底 */
.hxp-pop-d.is-sel,
.hxp-pop-d.is-sel:hover { background: var(--hx-inv-bg); color: var(--hx-inv-ink); font-weight: 800; }

/* 底部动作条 */
.hxp-pop-foot {
  display: flex; justify-content: flex-end;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--hx-line);
}
.hxp-pop-btn {
  background: transparent; border: 1px solid var(--hx-dlg-line);
  color: var(--hx-dim); border-radius: var(--r-btn);
  padding: 5px 10px;
  font-family: inherit; font-size: var(--hx-t11); font-weight: 600; line-height: 1;
  letter-spacing: .04em; cursor: pointer;
  transition: color .18s var(--hx-ease), border-color .18s var(--hx-ease);
}
.hxp-pop-btn:hover, .hxp-pop-btn:focus-visible {
  color: var(--hx-acc); border-color: var(--hx-acc); outline: none;
}

/* 时间主体：时 / 分各自铺成 6 列网格。
   早先做的是"两列滚动列表"，一打开就有半截项被裁在边上（27px 行高 × 6.4 项），
   既不好看也不好点；24 和 12 项本来就摆得下，铺成栅格还更贴皮肤的栅格语言。 */
.hxp-pop-time { width: 246px; }
.hxp-pop-th {
  color: var(--hx-dim2);
  font-weight: 600; font-size: var(--hx-t9-5); line-height: 1px; font-family: var(--hx-mono);
  letter-spacing: .14em;
  padding: 2px 0 7px;
}
.hxp-pop-g6 + .hxp-pop-th {
  padding-top: 12px; margin-top: 10px;
  border-top: 1px solid var(--hx-line);
}
.hxp-pop-g6 {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
}
.hxp-pop-c {
  -webkit-appearance: none; appearance: none;
  height: 28px;
  background: transparent; border: 0; border-radius: 2px;
  color: var(--hx-ink);
  font-family: inherit; font-size: var(--hx-t12-5); font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .14s var(--hx-ease), color .14s var(--hx-ease);
}
.hxp-pop-c:hover { background: var(--hx-field-bg); color: var(--hx-acc); }
.hxp-pop-c.is-sel, .hxp-pop-c.is-sel:hover {
  background: var(--hx-inv-bg); color: var(--hx-inv-ink); font-weight: 800;
}
/* select 复用输入框外观；appearance 去掉原生三角，自绘 ▾ 背景（focus 时同款高亮） */
.hxp-sel {
  appearance: none; -webkit-appearance: none;
  padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.hxp-db-s { color: var(--hx-dim); font-size: var(--hx-t12); line-height: 1.5; }
.hxp-db-s b { color: var(--hx-acc); font-weight: 700; }
.hxp-btn {
  background: transparent;
  border: 1px solid var(--hx-line-2);
  color: var(--hx-ink);
  border-radius: 4px;
  padding: 7px 12px;
  font-weight: 600; font-size: var(--hx-t12); line-height: 1px; font-family: inherit;
  cursor: pointer;
  transition: color .2s var(--hx-ease), border-color .2s var(--hx-ease), background .2s var(--hx-ease);
}
.hxp-btn:hover, .hxp-btn:focus-visible {
  border-color: var(--hx-acc); color: var(--hx-acc); background: var(--hx-field-bg); outline: none;
}
.hxp-btn.hxp-pri { border-color: var(--hx-acc); color: var(--hx-acc); }
.hxp-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.hxp-li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--hx-line);
  border-radius: 4px;
  font-size: var(--hx-t13);
}
.hxp-li .hxp-li-d { color: var(--hx-dim2); font-weight: 500; font-size: var(--hx-t11); line-height: 1px; font-family: var(--hx-mono); }
.hxp-li .hxp-li-n { color: var(--hx-ink); font-weight: 600; }
.hxp-li .hxp-li-x {
  margin-left: auto;
  background: transparent; border: none; color: var(--hx-dim);
  cursor: pointer; font-size: var(--hx-t16); line-height: 1; padding: 2px 6px; border-radius: 3px;
}
.hxp-li .hxp-li-x:hover { color: var(--hx-acc); background: var(--hx-field-bg); }
.hxp-empty { color: var(--hx-dim2); font-size: var(--hx-t12); padding: 4px 2px; }
/* 保存状态：跟着标题栏走（描述的是整份设置，不是某一行的属性） */
.hxp-status {
  margin-left: auto;
  color: var(--hx-dim2);
  font-weight: 500; font-size: var(--hx-t10); line-height: 1px; font-family: var(--hx-mono);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* 日历（详情页内）—— 归在「假期」分区里，与自定义列表同属一件事 */
.hxp-cal { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hx-line); }
.hxp-cal-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.hxp-cal-title { font-size: var(--hx-t18); font-weight: 700; letter-spacing: 0.01em; }
.hxp-nav {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hx-line-2);
  color: var(--hx-dim); border-radius: 4px; cursor: pointer;
  font-size: var(--hx-t18); line-height: 1;
  transition: color .2s var(--hx-ease), border-color .2s var(--hx-ease), background .2s var(--hx-ease);
}
.hxp-nav:hover, .hxp-nav:focus-visible {
  color: var(--hx-ink); border-color: var(--hx-acc); background: var(--hx-field-bg); outline: none;
}
.hxp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));   /* minmax(0,1fr)：格子内容再宽也不撑轨道（1fr 的 min-width:auto 会把网格顶出弹窗） */
  gap: 0;
  border-top: 1px solid var(--hx-line);
  border-left: 1px solid var(--hx-line);
}
.hxp-dow {
  border-right: 1px solid var(--hx-line);
  border-bottom: 1px solid var(--hx-line);
  padding: 8px 0;
  text-align: center;
  color: var(--hx-dim2);
  font-weight: 600; font-size: var(--hx-t10); line-height: 1px; font-family: var(--hx-mono);
  letter-spacing: 0.12em;
}
.hxp-cell {
  border-right: 1px solid var(--hx-line);
  border-bottom: 1px solid var(--hx-line);
  min-height: 50px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;               /* 节假日名再长也锁死在格子里：不出框、不撑格 */
  transition: background .2s var(--hx-ease);
}
.hxp-cell.is-out { color: var(--hx-dim2); opacity: 0.4; }
.hxp-cell.is-today { background: var(--hxp-mint); color: #06080d; }
.hxp-cell.is-today .hxp-dn, .hxp-cell.is-today .hxp-tag { color: #06080d; }
.hxp-dn { font-weight: 700; font-size: var(--hx-t14); font-variant-numeric: tabular-nums; }
.hxp-tag {
  font-size: var(--hx-t10); line-height: 1.3; color: var(--hx-acc); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 窄屏 45px 格里「劳动节」们不换行不压框，超长省略 */
}
.hxp-tag.is-work { color: var(--hx-dim); text-decoration: line-through; }
.hxp-cell.is-holiday:not(.is-today) .hxp-dn { color: var(--hx-acc); }
.hxp-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px;
  color: var(--hx-dim); font-size: var(--hx-t11);
}
.hxp-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.hxp-lg-h i { background: var(--hx-acc); }
.hxp-lg-t i { background: var(--hxp-mint); }
.hxp-lg-w i { background: transparent; border: 1px solid var(--hx-dim); }

/* 窄屏：弹窗可用宽 ~318px，7 列格子仅 45px —— 收紧内边距/字号，
   date 输入改弹性占满（160px 固定会把行撑爆），label 收缩 */
@media (max-width: 560px) {
  .hxp-cell { min-height: 52px; padding: 6px 7px; }
  .hxp-dn { font-size: var(--hx-t12); }
  .hxp-tag { font-size: var(--hx-t9); }
  .hxp-deta-row > label { min-width: 64px; }
  /* 窄屏：日期/时间字段改由容器弹性占满（固定 148/104px 会把行撑爆） */
  .hxp-pick { flex: 1 1 auto; min-width: 0; }
  .hxp-pick > .hxp-in,
  .hxp-pick > input[data-hxp-pick="time"],
  .hxp-pick > input[data-hxp-pick="date"] { width: 100%; }
  .hxp-detail-bigs { grid-template-columns: 1fr; }
}

/* ===== 详情页分区 =====
   面板重排为「概览（只读）→ 工作时间 → 薪资 → 假期（可改）」四段。
   分区靠一条顶部发丝线 + 小标题（中文 + 等宽英文）区分，
   不再用大块留白撑开——那样面板会虚高。 */
.hxp-sect {
  border-top: 1px solid var(--hx-line);
  padding-top: 15px;
  margin-top: 18px;
}
.hxp-sec-h {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 0 10px;
  font-size: var(--hx-t12-5); font-weight: 700; letter-spacing: 0.05em;
  color: var(--hx-ink);
}
.hxp-sec-h span {
  font-family: var(--hx-mono); font-size: var(--hx-t8-5); font-weight: 400;
  letter-spacing: 0.2em; color: var(--hx-dim2);
}
/* 分区标题下面第一行不要再画一条线（分区线已经起到了分隔作用） */
.hxp-sec-h + .hxp-deta-row { border-top: 0; padding-top: 2px; }

/* 概览区第二段：下班倒计时（大数字）。
   概览是只读整体，内部不再各自画发丝线，改用间距区分，避免分割线过多 */
.hxp-off {
  margin-top: 16px;
}
.hxp-off-h {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px;
  font-size: var(--hx-t12); font-weight: 600; letter-spacing: 0.04em;
  color: var(--hx-dim);
}
/* 概览区第三段：节气（小字注解，压到最轻）。
   概览整体去线，仅与上方倒计时保留间距，不再单独画发丝线 */
.hxp-terms {
  margin-top: 16px;
}
.hxp-badge {
  font-weight: 600; font-size: var(--hx-t10); line-height: 1px; font-family: var(--hx-mono);
  letter-spacing: 0.1em;
  color: var(--hx-acc);
  border: 1px solid var(--hx-line-2);
  border-radius: 3px;
  padding: 4px 7px;
}
.hxp-off-live {
  font-weight: 800;
  font-size: clamp(30px, 5vw, 44px); font-size: round(clamp(30px, 5vw, 44px), 1px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--hx-acc);
}
.hxp-off-live.is-off { color: var(--hx-dim); }
.hxp-sep { color: var(--hx-dim2); font-size: var(--hx-t12); }
.hxp-term-cur { font-size: var(--hx-t14); margin-bottom: 6px; }
.hxp-term-cur b, .hxp-term-next b { color: var(--hx-acc); font-weight: 800; }
.hxp-term-next { font-size: var(--hx-t12-5); color: var(--hx-dim); }

/* 说明文字：从设置行里挪出来单独成行 */
.hxp-note {
  margin: 2px 0 0;
  padding-left: 84px;
  color: var(--hx-dim2); font-size: var(--hx-t11); line-height: 1.6;
}
/* 数字框后面的单位（「10 号」）：贴着数字但要跟右边的下拉拉开 */
.hxp-unit { color: var(--hx-dim2); font-size: var(--hx-t12); margin: 0 14px 0 -5px; }

/* 分区版式在窄屏的收口 */
@media (max-width: 560px) {
  .hxp-sect { margin-top: 15px; padding-top: 13px; }
  .hxp-sec-h { margin-bottom: 8px; }
  /* 说明文字不再缩进（84px 缩进在 390px 屏上只剩半行宽） */
  .hxp-note { padding-left: 0; }
  .hxp-unit { margin-right: 8px; }
  /* 标题栏在窄屏塞不下：副标与状态让位给标题和关闭键 */
  .hxp-detail-t span { display: none; }
  .hxp-status { font-size: var(--hx-t9); letter-spacing: 0.06em; }
  /* 时令行：原来三个框 + 「至」一起 flex，结果时间框独占一行、
     日期框被「至」挤到下一行、第二个日期又掉到第三行。改成
     「标签一行 / 时间一行 / 两个日期并排一行」。 */
  .hxp-row-times > label { flex: 0 0 100%; }
  .hxp-row-times .hxp-pick[data-t="time"] { flex: 0 0 100%; }
  .hxp-row-times .hxp-pick[data-t="date"] { flex: 1 1 0; min-width: 0; }
}

/* 响应式 */
@media (max-width: 560px) {
  .hxp-detail-bigs { grid-template-columns: 1fr; }
  .hxp-bsep { display: none; }
  .hxp-cell { min-height: 50px; padding: 6px 6px; }
  .hxp-tag { font-size: var(--hx-t9); }
}

@media (prefers-reduced-motion: reduce) {
  .hxp-bset, .hxp-close, .hxp-btn, .hxp-nav, .hxp-in, .hxp-cell { transition: none; }
}