/* ---- 常用工具（工具库 → 常用工具） ---- */
.tu-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.tu-tab {
  height: 32px; padding: 0 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text2);
  font-size: 12.5px; font-family: inherit; white-space: nowrap;
  transition: all .14s;
}
.tu-tab:hover { color: var(--text); border-color: var(--text3); }
.tu-tab.on { background: var(--hover); color: var(--text); font-weight: 650; border-color: var(--text3); }
[data-theme="light"] .tu-tab.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.tu-panel {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px;
  max-width: 880px;
}
.tu-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tu-hint { font-size: 11.5px; color: var(--text3); flex: 1 1 220px; line-height: 1.55; }

.tu-in, .tu-area {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card2);
  color: var(--text); font-family: inherit; outline: none;
}
.tu-in { height: 38px; padding: 0 12px; font-size: 14px; }
.tu-area { height: 130px; padding: 10px 12px; font-size: 13px; line-height: 1.6; resize: vertical; }
.tu-in:focus, .tu-area:focus { border-color: var(--text3); }

.tu-result {
  min-height: 54px; padding: 12px 14px; border-radius: 10px;
  background: var(--card2); border: 1px solid var(--line-soft);
  font-size: 13.5px; line-height: 1.7; color: var(--text);
  word-break: break-word;
}
.tu-big { font-size: 19px; font-weight: 650; letter-spacing: .5px; }
.tu-ph { color: var(--text3); font-weight: 400; font-size: 12.5px; }
.tu-ip { font-size: 20px; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.tu-meta { margin-top: 5px; font-size: 12px; color: var(--text3); }

.tu-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tu-chip {
  height: 26px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text3);
  font-size: 11.5px; font-family: inherit; font-variant-numeric: tabular-nums;
}
.tu-chip:hover { color: var(--text); border-color: var(--text3); }
.tu-note { font-size: 11.5px; color: var(--text3); line-height: 1.6; }
.tu-wrap { gap: 8px; }
@media (max-width: 640px) {
  .tu-panel { padding: 13px 13px 15px; }
  .tu-big { font-size: 16px; }
}

/* IP 页：分区 / 键值表 / 原始文本 */
.tu-sec { display: flex; flex-direction: column; gap: 8px; }
.tu-sech {
  font-size: 11.5px; font-weight: 650; color: var(--text3);
  letter-spacing: .4px; text-transform: uppercase;
}
.tu-kv { display: grid; grid-template-columns: 1fr; gap: 6px; }
.tu-kv > div {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 9px;
  background: var(--card2); border: 1px solid var(--line-soft);
}
.tu-kv span { flex: none; width: 84px; font-size: 11.5px; color: var(--text3); }
.tu-kv b { font-size: 13px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; word-break: break-all; }

.tu-pre {
  margin: 0; padding: 12px 14px; max-height: 380px; overflow: auto;
  border-radius: 10px; background: var(--card2); border: 1px solid var(--line-soft);
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; line-height: 1.6;
  color: var(--text2); white-space: pre-wrap; word-break: break-all;
}

/* ---- 重排版：块状分区（标题行 + 内容），操作贴紧它作用的对象 ---- */
.tu-panel { gap: 4px; padding: 6px 18px 16px; }

.tu-block { display: flex; flex-direction: column; gap: 9px; padding: 14px 0; }
.tu-block + .tu-block { border-top: 1px solid var(--line-soft); }
.tu-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.tu-bt { font-size: 12px; font-weight: 650; color: var(--text2); letter-spacing: .2px; }
.tu-bh .btn { height: 28px; padding: 0 12px; font-size: 12px; }

/* 输入行：货币符号 + 输入框 */
.tu-inrow {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card2);
  padding: 0 12px; height: 46px; transition: border-color .14s;
}
.tu-inrow:focus-within { border-color: var(--text3); }
.tu-cur { font-size: 15px; color: var(--text3); font-weight: 600; }
/* ⚠️ 别让「含税 / 不含税」这种两个字的标签被挤成两行：标签固定宽、不收缩 */
.tu-inrow .tu-cur { flex: none; white-space: nowrap; }
.tu-inrow .tu-in {
  border: 0; background: transparent; height: 44px; padding: 0;
  font-size: 19px; font-weight: 650; letter-spacing: .3px; font-variant-numeric: tabular-nums;
}
.tu-inrow .tu-in:focus { border: 0; }

/* 结果块：大字号 + 足够留白 */
.tu-out {
  min-height: 52px; display: flex; align-items: center;
  padding: 13px 15px; border-radius: 11px;
  background: var(--card2); border: 1px solid var(--line-soft);
  font-size: 13.5px; line-height: 1.65; color: var(--text); word-break: break-word;
}
.tu-out.tu-big { font-size: 22px; font-weight: 700; letter-spacing: 1px; min-height: 62px; }
.tu-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tu-acts .btn { height: 30px; padding: 0 13px; font-size: 12px; }
.tu-chips { margin-top: 2px; }

/* 输入框/文本域在块里不要自带边框冲突 */
.tu-block .tu-area { border-radius: 11px; }
.tu-panel .tu-note, .tu-panel .tu-hint { margin: 2px 0 0; }
.tu-kv { gap: 6px; }

@media (max-width: 640px) {
  .tu-panel { padding: 4px 13px 14px; }
  .tu-out.tu-big { font-size: 18px; letter-spacing: .4px; }
  .tu-bh { flex-wrap: wrap; }
}

/* ---- 块头右侧的小按钮：统一成带边框的按钮，不再用 .btn.ghost 的裸文字 ---- */
.tu-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--text2); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tu-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.tu-btn.solid { background: var(--blue); border-color: var(--blue); color: #0D0D0D; font-weight: 600; }
[data-theme="light"] .tu-btn.solid { color: #fff; }
.tu-btn.solid:hover { filter: brightness(1.06); background: var(--blue); color: #0D0D0D; }
[data-theme="light"] .tu-btn.solid:hover { color: #fff; }
.tu-btn:disabled { opacity: .6; cursor: default; }
.tu-btn .tu-ic { font-size: 12px; line-height: 1; opacity: .85; }
.tu-btn:disabled .tu-ic { display: inline-block; animation: tu-spin .9s linear infinite; }
@keyframes tu-spin { to { transform: rotate(360deg); } }

/* ---- 双 IP 展示（走了代理时：代理出口 + 本机公网） ---- */
.tu-out:has(.tu-ips) { display: block; }
.tu-ips { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.tu-ip-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tu-ip-row .k { font-size: 11.5px; color: var(--text3); flex: none; min-width: 62px; }
.tu-ip-row .v { font-size: 15px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.tu-ip-row .v.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .2px; }
.tu-ip-row.本机 .v { color: var(--blue); }
.tu-ip-tag {
  display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text3); vertical-align: 1px;
}
.tu-ip-tag.warn { color: var(--orange); border-color: rgba(217, 164, 91, .55); background: var(--orange-soft); }

/* 修：.tu-hint 是给横向行设计的（flex:1 1 220px），一旦成为**纵向**容器
   （.tu-panel / .tu-block）的 flex 子项，flex-basis 就变成「高度 220px」，
   把整块撑出一大段空白。纵向容器里的提示一律不伸展。 */
.tu-panel > .tu-hint,
.tu-block > .tu-hint { flex: 0 0 auto; }

/* ================= 万年历 ================= */
.tu-wnl { max-width: none; width: 100%; }
.wnl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 12px; }
.wnl-nav { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wnl-sel {
  height: 28px; padding: 0 6px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text);
}
.wnl-top > .tu-btn.solid { margin-left: auto; }

.wnl-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 336px;
  gap: 16px; align-items: start;
}
/* 左列：月历 + 历史 + 介绍，自成一条纵向流 —— 这样右栏再高，左列也不会留一大块空白 */
.wnl-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* 左列通常比右栏长（历史 + 介绍）：让详情栏跟随滚动，不留一大块死白 */
.wnl-side { position: sticky; top: 12px; }
.wnl-main .wnl-mod { margin-top: 0; }

/* 月历 */
.wnl-cal { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.wnl-week { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--card2); }
.wnl-week span {
  text-align: center; font-size: 11.5px; color: var(--text3); padding: 7px 0; letter-spacing: .06em;
}
.wnl-week span.we { color: var(--orange); }
.wnl-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.wnl-d {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 56px; padding: 5px 2px; border: 0; border-top: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft); background: none; cursor: pointer;
  color: var(--text); font: inherit; transition: background .12s;
}
.wnl-d:nth-child(7n) { border-right: 0; }
.wnl-d b { font-size: 15px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wnl-d i { font-style: normal; font-size: 10.5px; color: var(--text3); line-height: 1.15; }
.wnl-d i.jie { color: var(--orange); font-weight: 600; }
.wnl-d i.mon { color: var(--blue); }
.wnl-d.we b { color: var(--orange); }
.wnl-d.out { opacity: .38; }
.wnl-d:hover { background: var(--card2); }
.wnl-d.today b { color: var(--blue); }
.wnl-d.today i { color: var(--blue); }
.wnl-d.sel { background: var(--red-soft); box-shadow: inset 0 0 0 1.5px var(--red); }
.wnl-d.sel b, .wnl-d.sel i { color: var(--red); }

/* 右侧详情（红底，参照原站） */
.wnl-side {
  border-radius: 12px; padding: 14px 14px 12px; color: #fff;
  background: linear-gradient(160deg, #f0435a, #e8384f 55%, #e02b45);
  min-height: 240px;
}
.wnl-side .wnl-date { font-size: 12px; opacity: .95; }
.wnl-side .wnl-big {
  margin: 8px auto 6px; width: 78px; height: 78px; border-radius: 10px;
  background: rgba(255, 255, 255, .18); display: grid; place-items: center;
  font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.wnl-side .wnl-lunar { text-align: center; font-size: 15px; font-weight: 650; }
.wnl-side .wnl-gz, .wnl-side .wnl-xz { text-align: center; font-size: 11.5px; opacity: .9; margin-top: 3px; }
.wnl-side .wnl-load, .wnl-side .wnl-err {
  margin-top: 10px; font-size: 11.5px; line-height: 1.6; padding: 7px 9px;
  border-radius: 8px; background: rgba(255, 255, 255, .16);
}
.wnl-side .wnl-err { background: rgba(0, 0, 0, .22); }

/* 宜 / 忌 */
.wnl-yj { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.yj-row { display: flex; gap: 8px; align-items: flex-start; background: rgba(255, 255, 255, .12); border-radius: 9px; padding: 7px 9px; }
.yj-k {
  flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.yj-row.yi .yj-k { background: #d9253f; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7) inset; }
.yj-row.ji .yj-k { background: #2f7d4f; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7) inset; }
.yj-v { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; line-height: 1.55; }

/* 通书表格：table-layout:fixed 是关键 —— 自动布局会按 min-content 撑到 860px，
   面板只有 322px，于是整张表溢出面板、白字画到浅色底上。 */
.wnl-tb {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  margin-top: 12px; font-size: 11.5px;
  background: rgba(0, 0, 0, .12); border-radius: 8px; overflow: hidden;
  /* ⚠️ style.css 里有一条全局 `table { min-width: 860px }`（给合同表格横向滚动用），
     不归零的话这张表会被撑到 860px，在 322px 的面板里横向溢出、白字画到面板外的浅色底上
     —— 这就是"字看不清"的真正原因。`usr-table` 也踩过同一个坑。 */
  min-width: 0;
}
.wnl-tb td {
  padding: 5px 7px; border-bottom: 1px solid rgba(255, 255, 255, .18);
  vertical-align: top; line-height: 1.55;
  word-break: break-word; overflow-wrap: anywhere;   /* 长串也换行，不撑宽 */
}
.wnl-tb tr:last-child td { border-bottom: 0; }
.wnl-tb td.th { width: 64px; color: rgba(255, 255, 255, .86); white-space: nowrap; }
/* 悬停统一在下面「通书表格行」那段里处理（压暗 + 左侧竖线） */

/* 历史 / 介绍 */
.wnl-mod { margin-top: 16px; }
.wnl-main > .wnl-mod { margin-top: 0; }
.wnl-modh {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.wnl-modh span { font-size: 11.5px; font-weight: 400; color: var(--text3); }
.wnl-toggle { cursor: pointer; }
.wnl-toggle .t { margin-left: auto; color: var(--blue); font-weight: 400; }
.wnl-hist { list-style: none; margin: 8px 0 0; padding: 0; }
.wnl-hist li { display: flex; gap: 10px; padding: 7px 0 7px 12px; border-left: 2px solid var(--line); position: relative; }
.wnl-hist li::before {
  content: ''; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--card2); border: 1.5px solid var(--line);
}
.wnl-hist .d { flex: none; width: 96px; font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.wnl-hist .e { font-size: 12.5px; line-height: 1.6; color: var(--text); }
.wnl-intro { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.wnl-intro p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--text2); }

@media (max-width: 900px) {
  .wnl-wrap { grid-template-columns: 1fr; }
  .wnl-side { min-height: 0; }
}

/* 万年历 · 休/班 角标 */
.wnl-d { position: relative; }
.wnl-tag {
  position: absolute; top: 2px; left: 3px; font-style: normal; font-size: 9px; line-height: 1;
  padding: 1px 3px; border-radius: 3px; background: var(--red); color: #fff; font-weight: 600;
}
.wnl-tag.ban { background: var(--text3); }
.wnl-hint { font-size: 12px; color: var(--text3); padding: 8px 0; }
.wnl-side .wnl-err a { display: inline-block; margin-top: 5px; color: #fff; text-decoration: underline; }

.wnl-note {
  margin: 4px 0 0; padding: 8px 11px; border-radius: 9px; font-size: 12px; line-height: 1.65;
  background: var(--orange-soft); color: var(--text);
  border: 1px solid rgba(217, 164, 91, .45);
}

/* 普通周末的「休」：比法定节假日的红标淡一档，不让它抢眼 */
.wnl-tag.we { background: var(--text3); opacity: .85; }

/* 详情栏：① 允许收窄（否则表格撑破面板）② 兜底裁切 ③ 抗强制颜色模式
   ⚠️ 真 bug 记录：早先没给 overflow/min-width，表格 min-content 是 860px，
   面板只有 322px —— 表格被画到面板外面，红底没跟上，白字落在浅色页面上就"看不清"了。 */
.wnl-side {
  forced-color-adjust: none;
  overflow: hidden;              /* 内容再多也不许画到面板外 */
  min-width: 0;
  background-color: #e8384f;     /* 渐变之外的纯色兜底 */
}
.wnl-side ::selection { background: rgba(0, 0, 0, .38); color: #fff; }

/* 手动标记（我标的「休 / 班」）——虚线边，跟系统给的实心标区分开 */
.wnl-tag.手 { background: transparent; color: #fff; border: 1px dashed rgba(255, 255, 255, .9); padding: 0 2px; }
.wnl-mark-row {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .28);
}
.wnl-mark-row .k { font-size: 11.5px; opacity: .9; margin-right: 2px; }
.wnl-mark-row button {
  flex: 1 1 auto; height: 26px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14); color: #fff;
}
.wnl-mark-row button:hover { background: rgba(255, 255, 255, .26); }
.wnl-mark-row button.on { background: #fff; color: #d9253f; font-weight: 700; border-color: #fff; }

/* 休/班 角标：之前手标是「透明底 + 白字 + 白虚线」，落在浅色格子里等于看不见。
   现在：系统标实心红/灰，手标实心蓝 + 白虚线内框，两种主题下都清清楚楚。 */
.wnl-tag {
  font-size: 11px; line-height: 1.2; padding: 0 4px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0; min-width: 16px; text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
/* 用固定灰阶（不跟主题变量）——深色主题下 var(--card) 是深色，会变成"灰底黑字"发闷 */
.wnl-tag.we { background: #64748b; color: #fff; }
.wnl-tag.ban { background: #1f2937; color: #fff; }
.wnl-tag.手 {
  background: var(--blue); color: #fff; opacity: 1;
  border: 1px dashed rgba(255, 255, 255, .95); padding: 0 3px;
}


/* 图例：四种角标一眼看懂 */
.wnl-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 0 2px; font-size: 11.5px; color: var(--text3);
}
.wnl-legend i {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff;
  padding: 0 4px; border-radius: 4px; margin-right: 4px; display: inline-block; min-width: 15px; text-align: center;
}
.wnl-legend .a i { background: #e11d48; }
.wnl-legend .b i { background: #64748b; }
.wnl-legend .c i { background: #1f2937; }
.wnl-legend .d i { background: #2563eb; border: 1px dashed rgba(255, 255, 255, .95); }

/* ================= 个人待办 · 日历页 ================= */
.tu-wnl-page { max-width: none; width: 100%; }
.pt-home .tu-wnl-wrap, .tu-wnl-page .wnl-wrap { grid-template-columns: minmax(0, 1fr) 360px; }

/* 格子里的两个计数点：待办（蓝）/ 记录（橙） */
.wnl-dots { display: flex; gap: 3px; margin-top: 1px; height: 13px; align-items: center; }
.wnl-dots i {
  font-style: normal; font-size: 9.5px; line-height: 1; font-weight: 700;
  min-width: 13px; height: 13px; border-radius: 7px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.wnl-dots i.d1 { background: #2f6bd8; }
.wnl-dots i.d1.done { background: #94a3b8; }
.wnl-dots i.d2 { background: #d97706; }
.wnl-d.out .wnl-dots { opacity: .35; }

/* 详情栏里的「当天待办 / 当天记录」 */
.wnl-sec { margin-top: 12px; }
.wnl-sech {
  display: flex; align-items: center; gap: 6px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .28); font-size: 12px;
}
.wnl-sech span { font-weight: 700; }
.wnl-sech b {
  font-size: 11px; background: rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 0 6px; font-weight: 700;
}
.wnl-sech .wnl-go {
  margin-left: auto; border: 0; background: none; color: #fff; opacity: .85;
  font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; padding: 0;
}
.wnl-sech .wnl-go:hover { opacity: 1; }
.wnl-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wnl-list li {
  display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.5;
  background: rgba(255, 255, 255, .12); border-radius: 7px; padding: 4px 7px;
}
.wnl-list li.done .tx { text-decoration: line-through; opacity: .72; }
.wnl-list .st {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
.wnl-list .st.rec { background: #ffd7a8; box-shadow: 0 0 0 2px rgba(255, 215, 168, .45); }
.wnl-list .tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wnl-list .lv { font-style: normal; font-size: 10px; opacity: .9; flex: none; }
.wnl-empty { font-size: 11.5px; opacity: .82; padding: 6px 2px; }

/* ================= 万年历 · 悬停动态 =================
   目标：鼠标划过时有"活"的感觉，但不能晃眼 —— 统一 120~180ms、位移不超过 3px。 */
.wnl-hist li {
  transition: background .16s ease, transform .16s ease, border-left-color .16s ease;
  border-radius: 0 6px 6px 0;
}
.wnl-hist li::before { transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.wnl-hist li:hover {
  background: var(--card2);
  transform: translateX(3px);
  border-left-color: var(--blue);
}
.wnl-hist li:hover .d { color: var(--blue); }
.wnl-hist li:hover .e { color: var(--text); }
.wnl-hist li:hover::before {
  background: var(--blue); border-color: var(--blue); transform: scale(1.3);
}
.wnl-hist .d, .wnl-hist .e { transition: color .16s ease; }

/* 月历格子：轻微上浮 + 阴影，选中的不跟着动 */
.wnl-d { transition: background .12s ease, transform .12s ease, box-shadow .12s ease; }
.wnl-d:hover { background: var(--card2); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .18); z-index: 1; }
.wnl-d.sel:hover { transform: none; box-shadow: none; }

/* 宜 / 忌 词条：划过亮一点 */
.wnl-yj .yj-v span {
  padding: 1px 5px; border-radius: 5px; margin: 0 -1px;
  transition: background .14s ease, transform .14s ease;
}
.wnl-yj .yj-v span:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }

/* 通书表格行：悬停整行"压暗"
   ⚠️⚠️ 两条踩过的坑（用户报过三次"白底白字"）：
   ① 别在 td 上写背景 —— `border-collapse: collapse` 的表里，给 td 加半透明背景会让
      Chrome 把它单独合成一层，底层红底不入层，于是一整行画在白色页面上（白字消失）；
   ② 别用 `box-shadow: inset` 做左侧高光 —— 同样触发独立合成层。
   正确做法：背景挂在 **tr** 上，左侧标记用 border-left。 */
.wnl-tb tbody tr { transition: background .14s ease; }
.wnl-tb tr:hover { background: rgba(0, 0, 0, .18); }
.wnl-tb tr td:first-child { border-left: 2px solid transparent; transition: border-left-color .14s ease; }
.wnl-tb tr:hover td:first-child { border-left-color: rgba(255, 255, 255, .75); }

/* 本日标记按钮 */
.wnl-mark-row button { transition: background .14s ease, transform .12s ease, color .14s ease; }
.wnl-mark-row button:hover { transform: translateY(-1px); }
.wnl-mark-row button:active { transform: translateY(0) scale(.97); }

/* 图例 / 顶部按钮 / 标签 */
.wnl-legend span { transition: color .14s ease; }
.wnl-legend span:hover { color: var(--text); }
.wnl-legend i { transition: transform .14s ease; }
.wnl-legend span:hover i { transform: scale(1.12); }
.tu-tab { transition: color .14s ease, border-color .14s ease, background .14s ease, transform .12s ease; }
.tu-tab:hover { transform: translateY(-1px); }
.tu-btn { transition: border-color .14s ease, color .14s ease, background .14s ease, transform .12s ease; }
.tu-btn:hover { transform: translateY(-1px); }

/* 当天待办 / 记录条目 */
.wnl-list li { transition: background .14s ease, transform .14s ease; }
.wnl-list li:hover { background: rgba(255, 255, 255, .22); transform: translateX(2px); }

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .wnl-hist li, .wnl-d, .wnl-yj .yj-v span, .wnl-mark-row button, .wnl-list li,
  .tu-tab, .tu-btn, .wnl-legend i { transition: none; }
  .wnl-hist li:hover, .wnl-d:hover, .wnl-list li:hover,
  .wnl-mark-row button:hover, .tu-tab:hover, .tu-btn:hover { transform: none; }
}

/* ============================================================================
   万年历 · 悬停 v2 收敛版
   —— 上一版把年份/圆点都染成蓝色、整行右移 3px，看着像"选中"，太扎眼。
      现在只保留一层很淡的底色 + 圆点轻微放大。
   ============================================================================ */
.wnl-hist li:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  transform: none;
  border-left-color: var(--line);
}
.wnl-hist li:hover .d { color: var(--text3); }
.wnl-hist li:hover .e { color: var(--text); }
.wnl-hist li:hover::before { background: var(--card2); border-color: var(--line); transform: scale(1.12); }

.wnl-d:hover { background: color-mix(in srgb, var(--text) 5%, transparent); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.wnl-yj .yj-v span:hover { background: rgba(255, 255, 255, .16); transform: none; }
.wnl-mark-row button:hover { transform: none; background: rgba(255, 255, 255, .22); }
.wnl-list li:hover { transform: none; background: rgba(255, 255, 255, .18); }
.tu-tab:hover, .tu-btn:hover { transform: none; }

/* 手机/窄屏：日历两栏必须变单栏
   ⚠️ `.tu-wnl-page .wnl-wrap { grid-template-columns: minmax(0,1fr) 360px }` 比
      `@media (max-width:900px){ .wnl-wrap { grid-template-columns:1fr } }` 更具体，
      结果 390 宽时左列被压成 0px、右栏 360px 撑破屏幕（审计发现）。 */
@media (max-width: 900px) {
  .tu-wnl-page .wnl-wrap,
  .pt-home .tu-wnl-wrap { grid-template-columns: minmax(0, 1fr) !important; }
  .wnl-side { position: static; }
}

/* ---- 日历：年月切换条（放在网格下方）---- */
.wnl-nav-bottom {
  justify-content: center;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.wnl-nav-bottom .wnl-sep {
  width: 1px; height: 16px; margin: 0 4px;
  background: var(--line); display: block;
}
.wnl-nav-bottom .tu-btn { min-width: 28px; justify-content: center; }
.wnl-nav-bottom .wnl-sel { min-width: 92px; text-align: center; }

/* ---- 日历控制栏：左（回待办）— 中（年月）— 右（回到今天），三段对齐 ----
   2026-10-30 用户要求（截图红框）「这排按钮还放在日历的顶部」——
   从网格下方移回网格上方，坐在星期表头之上；分隔线因此从 border-top 改成 border-bottom。
   左右不留内边距：与下方 7 列的日期格对齐，不然「回待办」会缩进去一截。 */
.wnl-bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.wnl-bar-l { justify-self: start; min-width: 0; }
.wnl-bar-r { justify-self: end; min-width: 0; }
.wnl-bar .tu-btn.ghost { background: transparent; border-color: transparent; color: var(--text3); }
.wnl-bar .tu-btn.ghost:hover { background: var(--hover); color: var(--text); border-color: var(--line); }

/* 中间：整块圆角容器包住「‹‹ 年 ›› ｜ ‹ 月 ›」，像一个分段控件 */
.wnl-bar .wnl-nav {
  display: flex; align-items: center; gap: 2px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 11px; padding: 3px 5px;
}
.wnl-bar .wnl-nav .wnl-sep {
  width: 1px; height: 16px; margin: 0 5px;
  background: var(--line); display: block;
}
.wnl-bar .tu-btn.icon { min-width: 26px; height: 26px; padding: 0 5px; justify-content: center; background: transparent; border-color: transparent; }
.wnl-bar .tu-btn.icon:hover { background: var(--card); border-color: var(--line); }
.wnl-bar .wnl-sel {
  height: 26px; min-width: 84px; padding: 0 6px;
  border: 0; background: transparent; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.wnl-bar .wnl-sel:focus { outline: none; }
.wnl-bar .wnl-sel:hover { background: var(--card); border-radius: 6px; }

@media (max-width: 720px) {
  .wnl-bar { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
  .wnl-bar-l, .wnl-bar-r { justify-self: center; }
}

/* 常用工具页去掉了页内大标题，标签行成了首屏第一个元素：补一点上边距，
   和「付款计划 / 资金计划」等页面的首屏节奏对齐（原来只有 6px，贴得太紧）。 */
#page-tools > .tu-tabs:first-child { margin-top: 14px; }

/* ---- 价税换算 ---- */
/* 胶囊的选中态（万年历/人民币大写那边一直没用过 on，这里补上） */
.tu-chip.on { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); background: var(--blue-soft); }
.tu-chip.on:hover { color: var(--blue); border-color: var(--blue); }
/* 行内小标签：单位 / 税率 */
.tu-lbl { flex: none; font-size: 11.5px; color: var(--text3); }
/* 输入行右侧的单位后缀 */
.tu-unit { flex: none; margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--text3); }
/* 税率的小输入框：矮一点，和胶囊同高 */
.tu-inrow.tu-rate { height: 30px; width: 84px; padding: 0 8px; border-radius: 999px; flex: none; }
.tu-inrow.tu-rate .tu-in { height: 28px; font-size: 12.5px; font-weight: 600; text-align: center; }
/* 话术段落：整段可选中、按句读换行留白 */
.tu-out.tu-say { display: block; white-space: pre-wrap; line-height: 1.9; font-size: 13px; }
/* 结果里的「元」值：跟在万元后面，弱一点 */
.tu-kv .tu-sub { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--text3); margin-left: 8px; white-space: nowrap; }
/* 手机上金额长，别让「元」单独掉到下一行 */
.tu-kv b { word-break: normal; overflow-wrap: anywhere; }
/* 金额后面跟的大写：弱化一档，不抢数字本身；可整行选中复制 */
.tu-cap { display: block; margin: 4px 2px 0; font-size: 11.5px; font-weight: 500; color: var(--text2); letter-spacing: .3px; line-height: 1.5; }
/* ⚠️ .tu-cap 是 <span>，会被 `.tu-kv span{width:84px}` 压成 84px（大写被折成四五行），这里显式放开 */
.tu-kv .tu-cap { width: auto; flex: 0 0 auto; margin: 3px 0 0; font-size: 11.5px; color: var(--text2); }
.tu-cap:empty { display: none; }

/* 金额行里带大写时：内容占满剩余宽度（否则大写被挤成四五行），标签订在第一行 */
.tu-kv > div { align-items: flex-start; }
.tu-kv b { flex: 1 1 auto; min-width: 0; }
.tu-kv span { padding-top: 2px; }

/* ================= 价税换算：金额卡片式布局 =================
   每个金额 = 一张卡：标签 + 右上角「复制金额 / 复制大写」，下面是输入框或大数字，再下面一行大写。
   含税卡与“价税合计”合二为一、不含税卡与“不含税金额”合二为一，不再重复显示两遍。 */
.tax-list { display: flex; flex-direction: column; gap: 10px; }
.tax-card {
  padding: 12px 14px 13px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 9px;
}
.tax-hd { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.tax-k { font-size: 12.5px; font-weight: 650; color: var(--text2); letter-spacing: .2px; }
.tax-cps { margin-left: auto; display: flex; gap: 6px; flex: none; }
.tax-cp {
  height: 22px; padding: 0 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text3);
  font-size: 11px; font-family: inherit; transition: color .14s, border-color .14s, background .14s;
}
.tax-cp:hover {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.tax-cp:active { transform: translateY(1px); }
/* 卡里的输入行：贴卡片底色，别套两层框 */
.tax-card .tu-inrow { height: 44px; background: var(--card); }
.tax-v { font-size: 19px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .2px; line-height: 1.25; }
.tax-v small { font-size: 12px; font-weight: 500; color: var(--text3); margin: 0 7px 0 3px; }
.tax-v em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text3); }
.tax-v.tax-empty { font-size: 13px; font-weight: 500; color: var(--text3); }
.tax-cap { font-size: 11.5px; line-height: 1.55; color: var(--text2); letter-spacing: .2px; }
.tax-cap:empty { display: none; }
/* 单位 / 税率：各占一行，不再和胶囊挤在一起 */
.tax-set { display: flex; flex-direction: column; gap: 10px; }
.tax-set-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tax-set-line .tax-k { flex: none; width: 32px; }
.tax-check { margin-top: 2px; }
@media (max-width: 640px) {
  .tax-card { padding: 11px 12px 12px; }
  .tax-v { font-size: 17px; }
  .tax-cps { gap: 4px; }
  .tax-cp { padding: 0 7px; }
}

/* ================= 日历：当天待办明细浮层 + 新建入口 ================= */
/* 数字胶囊：原来是个只读的 <b>，现在做成按钮，悬停/点击都能看明细 */
.wnl-sech .wnl-num {
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1.5;
  background: rgba(255, 255, 255, .22); color: #fff;
  border: 0; border-radius: 999px; padding: 0 7px; cursor: pointer;
  transition: background .14s;
}
.wnl-sech .wnl-num:hover { background: rgba(255, 255, 255, .42); }

/* 浮层：挂 body，白底黑字，贴锚点右对齐，超出视口自动翻到上方（JS 算） */
.wp-pop {
  position: fixed; z-index: 9200; display: none;
  width: min(300px, calc(100vw - 24px)); max-height: 56vh; overflow: auto;
  padding: 11px 13px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38);
  color: var(--text); font-size: 12px; line-height: 1.5;
}
.wp-pop.on { display: block; animation: wpIn .14s ease; }
@keyframes wpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wp-h { font-size: 11.5px; font-weight: 700; color: var(--text2); margin-bottom: 7px; }
.wp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wp-list li { display: flex; gap: 8px; align-items: flex-start; }
.wp-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; background: var(--blue); }
.wp-dot.rec { background: var(--green); }
.wp-list li.done .wp-dot { background: var(--text3); }
.wp-tx { min-width: 0; }
.wp-tx b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.wp-tx span { display: block; font-size: 11px; color: var(--text3); margin-top: 1px; }
.wp-list li.done .wp-tx b { color: var(--text3); text-decoration: line-through; }
.wp-empty { font-size: 12px; color: var(--text3); padding: 2px 0 4px; }
.wp-f { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.wp-btn {
  width: 100%; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card2); color: var(--text);
  font: inherit; font-size: 12px;
}
.wp-btn:hover { border-color: var(--blue); color: var(--blue); }

/* 「查看当天待办」弹窗里的列表 */
.dt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dt-item {
  display: flex; gap: 9px; align-items: flex-start; text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card2); color: var(--text); font: inherit;
  transition: border-color .14s, background .14s;
}
.dt-item:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--card2)); }
.dt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--blue); }
.dt-item.done .dt-dot { background: var(--text3); }
.dt-tx { min-width: 0; }
.dt-tx b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.dt-tx em { display: block; font-style: normal; font-size: 11px; color: var(--text3); margin-top: 2px; }
.dt-item.done .dt-tx b { color: var(--text3); text-decoration: line-through; }
.dt-empty { font-size: 12.5px; color: var(--text3); padding: 6px 0 14px; }
.dt-f { display: flex; justify-content: flex-end; }

/* ================= 日历：把待办 / 记录拖到别的日期 ================= */
/* 可拖的条目：抓手光标 + 拖的时候别选中文字（否则会变成"拖选文本"） */
.wnl-list li[data-drag], .wp-list li[data-drag] {
  cursor: grab; user-select: none; -webkit-user-select: none;
  /* 触摸设备上先允许纵向滚动；长按 300ms 后由 JS 接管并阻止滚动再拖（见 tools-ui.js） */
  touch-action: pan-y;
}
.wnl-list li[data-drag]:hover, .wp-list li[data-drag]:hover { background: rgba(255, 255, 255, .10); border-radius: 6px; }
.wp-list li[data-drag]:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
/* 拖动中：跟手的标签 */
.wnl-ghost {
  position: fixed; z-index: 9300; pointer-events: none;
  max-width: 230px; padding: 6px 10px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--blue); color: var(--text);
  font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  opacity: .96;
}
body.wnl-dragging { cursor: grabbing; }
body.wnl-dragging * { cursor: grabbing !important; }
/* 落点提示 */
.wnl-d.wnl-drop-on {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.wnl-d.wnl-drop-on b, .wnl-d.wnl-drop-on i { color: var(--blue) !important; }