/* ===========================================================
   轻捷工具站 - 共享样式表
   说明：全站复用的基础样式，所有页面都引这份
   风格：延续利润计算器，紫蓝渐变 + 卡片 + 响应式
   =========================================================== */

/* ---------- 重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 主题色变量（以后改配色只改这里） */
  --primary: #667eea;
  --primary-dark: #764ba2;
  --primary-soft: rgba(102, 126, 234, 0.28); /* 分段控件外圈：软主色，有存在感但不抢激活项的实色描边 */
  --text-main: #2d3748;
  --text-sub: #718096;
  --text-muted: #a0aec0;
  --bg-card: #ffffff;
  --bg-soft: #f7fafc;
  --border: #e2e8f0;
  --success: #48bb78;
  --success-dark: #38a169;
  --warning: #ed8936;
  --warning-bg: #fef5e7;
  --warning-text: #744210;
  --danger: #e53e3e;
  --info: #4299e1;
  --info-bg: #ebf8ff;
  --info-text: #2a4365;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* 暗黑模式（html[data-theme=dark] 覆盖浅色变量） */
[data-theme="dark"] {
  --primary: #7c8cf8;
  --primary-dark: #8b5cf6;
  --primary-soft: rgba(124, 140, 248, 0.38);
  --text-main: #e2e8f0;
  --text-sub: #94a3b8;
  --text-muted: #64748b;
  --bg-card: #1e293b;
  --bg-soft: #16202e;
  --border: #334155;
  --success: #34d399;
  --success-dark: #10b981;
  --warning: #fbbf24;
  --warning-bg: #3a2f14;
  --warning-text: #fcd34d;
  --danger: #f87171;
  --info: #60a5fa;
  --info-bg: #1e2f45;
  --info-text: #93c5fd;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* 暗色下页面底色与文字（body 背景用 var，避免硬编码白） */
body { background: var(--bg-soft); color: var(--text-main); }
[data-theme="dark"] body { background: #0f172a; }

html { scroll-behavior: smooth; }

body {
  font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20px;
  color: var(--text-main);
  line-height: 1.6;
}

/* ---------- 主容器（卡片化） ---------- */
.container {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bg-card);
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--shadow);
}

/* ---------- 顶部品牌栏 ---------- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-main);
}
.brand-logo {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: bold;
}
.brand-name { font-size: 22px; font-weight: bold; }
.nav-links { display: flex; gap: 20px; }
.nav-links a {
  color: var(--text-sub); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--primary); }

/* ---------- 标题 ---------- */
h1 { color: var(--text-main); font-size: 26px; margin-bottom: 8px; }
h2 { font-size: 18px; color: var(--text-sub); margin-bottom: 16px; }
.subtitle { color: var(--text-sub); margin-bottom: 24px; font-size: 14px; }

/* ---------- 页面标题区（工具页用） ---------- */
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 28px; }
.breadcrumb { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }

/* ---------- 栅格 ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }

/* ---------- 面板（一块内容） ---------- */
.panel {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 24px;
}
.panel h2 {
  font-size: 16px; color: var(--text-main);
  margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

/* ---------- 表单元素 ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 13px; color: var(--text-sub);
  margin-bottom: 6px; font-weight: 500;
}
.field .hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px;
  border: 2px solid var(--border); border-radius: 8px;
  font-size: 14px; transition: border-color 0.2s;
  font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: none; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; font-family: inherit; text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); }
.btn-primary:disabled { background: #cbd5e0; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary {
  background: var(--bg-card); color: var(--text-sub);
  border: 2px solid var(--border);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
/* 句子收藏按钮：已收藏状态（金色，与卡片星标语义一致；切换/删除后由 fav-quote.js 同步） */
#q-fav.on { background: #f5c518; color: #fff; border-color: #f5c518; }
#q-fav.on:hover { border-color: #f5c518; color: #fff; }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---------- 提示框 ---------- */
.tip {
  background: var(--info-bg); border-left: 4px solid var(--info);
  color: var(--info-text); padding: 12px; border-radius: 6px;
  margin-top: 12px; font-size: 13px;
}
.warning {
  background: var(--warning-bg); border-left: 4px solid var(--warning);
  color: var(--warning-text); padding: 12px; border-radius: 6px;
  margin-top: 12px; font-size: 13px;
}
.privacy-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e6fffa; color: #234e52;
  border: 1px solid #b2f5ea; padding: 6px 12px;
  border-radius: 20px; font-size: 13px; font-weight: 500;
}

/* ---------- 首页：工具卡片网格 ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.tool-card {
  position: relative;
  display: flex; flex-direction: column;          /* 内部垂直布局：图标→标题→描述→分类 tag */
  text-decoration: none; color: inherit;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: 12px; padding: 24px;
  transition: all 0.2s;
}
.tool-card:hover {
  border-color: var(--primary); transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}
.tool-card .icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;                /* line-height:1 让 emoji 字符垂直居中更稳 */
  margin-bottom: 12px;
  flex: 0 0 auto;                                 /* 不被 desc 伸缩影响 */
}
.tool-card h3 {
  font-size: 16px; margin-bottom: 6px; color: var(--text-main);
  flex: 0 0 auto;
}
.tool-card p {
  font-size: 13px; color: var(--text-sub); line-height: 1.5;
  margin-bottom: 12px;
  flex: 1 1 auto;                                 /* 占中间剩余高度 */
  min-height: 39px;                               /* 兜底：2 行最小高度（13*1.5*2） */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;                               /* desc 最多 2 行，超过省略 */
}
.tool-card .tag { display: inline-block; font-size: 11px; padding: 2px 8px; background: var(--bg-soft); color: var(--text-muted); border-radius: 4px; }
/* 卡片底部标签区：分类名左、特殊标签（云端/主打）右 */
.tool-card .card-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.tool-card .tag.hot { background: #fed7d7; color: #c53030; }
.tool-card .tag.soon { background: #e2e8f0; color: var(--text-muted); }
/* 云端类工具（会上传数据到服务器，如 OCR）：蓝色标记区别于纯本地工具 */
.tool-card .tag.cloud { background: #dbeafe; color: #1e40af; }

/* 未上线工具：统一弱化，不破坏布局 */
.tool-card.disabled {
  opacity: 0.6; cursor: not-allowed;
  background: var(--bg-soft);
}
.tool-card.disabled .icon {
  background: #cbd5e0; /* 图标变灰 */
}
.tool-card.disabled:hover {
  /* 不可点击的卡片不要位移和变色，避免误导 */
  transform: none; border-color: var(--border);
  box-shadow: none;
}

/* ---------- 拖拽上传区 ---------- */
.dropzone {
  border: 3px dashed var(--border);
  border-radius: 12px; padding: 48px 20px;
  text-align: center; cursor: pointer;
  transition: all 0.2s; background: var(--bg-soft);
}
.dropzone:hover { border-color: var(--primary); background: #fafbff; }
.dropzone.dragover {
  border-color: var(--primary); background: #ebf4ff;
  transform: scale(1.01);
}
.dropzone .drop-icon {
  font-size: 48px; margin-bottom: 12px; opacity: 0.7;
}
.dropzone .drop-text { font-size: 16px; color: var(--text-main); font-weight: 500; }
.dropzone .drop-hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.dropzone .drop-link { color: var(--primary); font-weight: 600; }

/* ---------- 文件列表 ---------- */
.file-list { margin-top: 20px; }
.file-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 8px;
  transition: all 0.2s;
}
.file-item:hover { border-color: var(--primary); }
.file-item .file-index {
  width: 28px; height: 28px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: bold;
}
.file-item .file-icon { font-size: 24px; }
.file-item .file-info { flex: 1; min-width: 0; }
.file-item .file-name {
  font-size: 14px; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-item .file-meta { font-size: 12px; color: var(--text-muted); }
.file-item .file-actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn {
  width: 32px; height: 32px; border: 1px solid var(--border);
  background: var(--bg-card); border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-sub); transition: all 0.2s;
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* 日期输入行（全站统一）：文本输入 + 年/月/日下拉 + 清空，窄屏自动换行 */
.datepicker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.datepicker > .text-input { flex: 1 1 150px; min-width: 150px; }
.datepicker > select { width: auto; }
.datepicker > select.wide { min-width: 92px; }
/* 日期输入单元格：input + 内嵌 X 按钮（X 浮在右内侧，不占 flex 空间，宽度永远稳定） */
.dp-cell { position: relative; flex: 1 1 150px; min-width: 120px; }
.dp-cell > input { padding-right: 28px !important; }
.dp-cell > input[type="date"] { padding-right: 46px !important; }
.dp-clear.is-date { right: 26px; }
.dp-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: none; background: transparent;
  border-radius: 50%; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; padding: 0;
  transition: background 0.15s, color 0.15s;
}
.dp-clear:hover { background: var(--bg-soft); color: var(--text-main); }

/* 日期输入布局（单行层次版）：文本框(.dp-cell) flex:1 占主角，年/月/日(.dp-sel)
   用 30px 高 + 浅灰底 + 固定窄宽做次要辅助，一行排开。
   此前问题不在「一行」而在「4 控件用同样的 .text-input 没有主次」——
   现在用尺寸/底色拉开层次：input 大且白底占满，3 个 select 小一号且浅灰底。
   多日期字段页面（如日期天数计算器）两个字段各占一行，每行 4 控件，整齐。 */
.datepicker .dp-sel {
  height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-soft); color: var(--text-sub); font-size: 13px;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
  flex: 0 0 auto;
}
.datepicker .dp-sel:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-card); }
/* 宽度按"最宽 option + 原生下拉箭头"算：年「2026 年」要 96px，月日「29 日 / 31 日」要 84px
   之前 68/90 偏紧，导致 "29 日" 被截成 "29 E" 之类（中文"日"+箭头超过宽度） */
.datepicker .dp-sel.wide { width: 96px; }
.datepicker .dp-sel:not(.wide) { width: 84px; }

/* ---------- 进度/结果区 ---------- */
.progress-bar {
  width: 100%; height: 8px; background: var(--bg-soft);
  border-radius: 4px; overflow: hidden; margin: 12px 0;
}
.progress-bar .fill {
  height: 100%; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  transition: width 0.3s; width: 0%;
}
.result-card {
  background: linear-gradient(135deg, var(--success), var(--success-dark));
  /* color 故意不设：避免与 components.css 的 .result-card(浅色 stat 卡) 级联冲突——
     浅色主题下 var(--bg-card)=#fff，color:white 会让所有 .result-card 内的裸 <b>/文本变白底白字不可见
     （id-card / image-to-pdf 的结果卡曾因此空白）。components.css 的 .result-card 已明确设深色文字。 */
  border-radius: 12px; padding: 24px;
  text-align: center; margin-top: 16px;
}
.result-card.error { background: linear-gradient(135deg, #f56565, var(--danger)); color: #fff; }

/* ---------- 退休倒计时：人生进度条 ---------- */
.rt-prog { margin-top: 10px; }
.rt-prog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rt-prog-pct { font-size: 18px; font-weight: 700; color: var(--primary); font-family: 'Cascadia Code', Consolas, monospace; }
.rt-prog-age { font-size: 12px; color: var(--text-muted); font-family: 'Cascadia Code', Consolas, monospace; }
.rt-prog-bar { position: relative; height: 14px; background: var(--bg-soft); border-radius: 7px; overflow: visible; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); }
.rt-prog-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); border-radius: 7px; transition: width 0.4s ease; }
.rt-prog-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background: var(--text-muted); border-radius: 50%; opacity: 0.5; }
.rt-prog-mark { /* 25/50/75 三个里程碑 */ }
.rt-prog-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #fff; border: 3px solid var(--primary); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.18); transition: left 0.4s ease; pointer-events: none; }
.rt-prog-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); font-family: 'Cascadia Code', Consolas, monospace; }
.rt-statutory { font-family: 'Cascadia Code', Consolas, monospace; font-size: 15px; font-weight: 600; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary-soft); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.rt-statutory small { display: block; font-family: inherit; font-weight: 400; font-size: 12px; color: var(--text-sub); margin-top: 3px; }

/* ---------- 退休倒计时：分享海报（截图发抖音/朋友圈） ---------- */
.rt-poster { max-width: 440px; margin: 8px auto 0; background: #fff; border: 1px solid rgba(102,126,234,0.14); border-radius: 18px; box-shadow: 0 10px 34px rgba(102,126,234,0.20); overflow: hidden; }
.rt-poster-logo { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.rt-mark { border-radius: 9px; flex: 0 0 auto; display: block; }
.rt-logo-txt { display: flex; flex-direction: column; line-height: 1.18; }
.rt-logo-txt b { font-size: 17px; color: var(--primary-dark); letter-spacing: 0.5px; }
.rt-logo-txt span { font-size: 11px; color: var(--text-muted); }
.rt-logo-tag { margin-left: auto; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.rt-hero2 { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; text-align: center; padding: 20px 18px 24px; }
.rt-hero2-label { font-size: 14px; opacity: 0.9; }
.rt-hero2-days { font-size: 60px; font-weight: 700; line-height: 1.05; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.rt-hero2-days i { font-size: 24px; font-style: normal; font-weight: 400; margin-left: 6px; opacity: 0.9; }
.rt-hero2-equiv { font-size: 14px; opacity: 0.92; }
.rt-hero2-clock { display: inline-block; margin-top: 12px; font-size: 13px; font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.14); padding: 4px 12px; border-radius: 999px; }
.rt-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 18px 4px; }
.rt-dc { background: #f6f7ff; border: 1px solid rgba(102,126,234,0.12); border-radius: 12px; padding: 12px 10px; text-align: center; }
.rt-dc-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 4px; background: rgba(102,126,234,0.15); }
.rt-gender-male { background: rgba(59,130,246,0.16); color: #3b82f6; }
.rt-gender-female { background: rgba(236,72,153,0.16); color: #ec4899; }
.rt-dc-num { font-size: 13.5px; font-weight: 700; color: var(--primary-dark); margin-top: 4px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-dc-lab { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.rt-prog { padding: 10px 18px 6px; }
.rt-poster-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 14px 18px 18px; margin-top: 10px; border-top: 1px dashed rgba(102,126,234,0.20); font-size: 11.5px; color: var(--text-muted); }
.rt-share-tip { text-align: center; font-size: 12.5px; color: var(--text-sub); margin: 10px 0 0; }
.rt-actions { text-align: center; margin-top: 14px; }
.rt-download { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 11px 22px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(102,126,234,0.30); transition: transform 0.12s ease, box-shadow 0.12s ease; font-family: inherit; }
.rt-download:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(102,126,234,0.38); }
.rt-download:active { transform: translateY(0); }

/* ---------- 页脚 ---------- */
.footer {
  margin-top: 32px; padding-top: 20px;
  border-top: 2px solid var(--border);
  text-align: center; font-size: 13px; color: var(--text-muted);
}
.footer a { color: var(--primary); text-decoration: none; }
.footer .footer-links { margin-bottom: 8px; }
.footer .footer-links a { margin: 0 8px; }

/* ---------- SEO 内容区（首页底部） ---------- */
.seo-content {
  margin-top: 32px; padding: 24px; background: var(--bg-soft);
  border-radius: 12px; line-height: 1.8;
}
.seo-content h2 { color: var(--text-main); margin-bottom: 12px; font-size: 18px; }
.seo-content h3 { color: var(--text-sub); margin: 16px 0 8px; font-size: 15px; }
.seo-content p { font-size: 14px; color: var(--text-sub); margin-bottom: 10px; }
.seo-content ul { margin-left: 20px; margin-bottom: 10px; }
.seo-content li { font-size: 14px; color: var(--text-sub); margin-bottom: 6px; }

/* ---------- 选项卡式模式选择（全站统一：PDF拆分/二维码/时间戳/URL编码/单位换算/利息/OCR 共用） ---------- */
label.mode-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
  transition: all 0.2s;
  min-width: 0; max-width: 100%;
}
label.mode-card:hover { border-color: var(--primary); }
label.mode-card input[type="radio"] {
  width: 18px; height: 18px; flex: none; margin: 0;
  accent-color: var(--primary); cursor: pointer;
}
label.mode-card:has(input:checked) {
  border-color: var(--primary); background: #f0f4ff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
/* 文字块：主标 + 可选副标作为紧凑列，整体被 align-items:center 垂直居中到圆点；
   line-height 统一消解 emoji 行高偏大造成的「圆点偏上」视觉错觉 */
label.mode-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
label.mode-card > div > div:first-child { font-weight: 600; line-height: 1.4; }
label.mode-card > div > div + div { line-height: 1.4; }
code {
  background: var(--bg-soft); padding: 1px 6px;
  border-radius: 3px; font-size: 13px;
  font-family: Consolas, Monaco, monospace; color: var(--primary-dark);
}

/* ---------- 时间窗口（右上角悬浮） ---------- */
.clock-widget {
  position: fixed;
  top: 20px; right: 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  width: 240px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.6);
  text-align: center; /* 日期/星期/农历/时间 居中 */
}
.clock-widget .cw-date {
  font-size: 14px; font-weight: 600; color: var(--text-main);
}
.clock-widget .cw-week {
  font-size: 12px; color: var(--text-sub); margin-top: 2px;
}
.clock-widget .cw-lunar {
  font-size: 12px; color: var(--primary); margin-top: 4px;
  padding-top: 4px; border-top: 1px solid var(--border);
}
.clock-widget .cw-close {
  position: absolute; top: 4px; right: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1;
  padding: 2px;
}
.clock-widget .cw-close:hover { color: var(--danger); }
@media (max-width: 600px) {
  .clock-widget { min-width: 140px; padding: 10px 12px; top: 10px; right: 10px; }
  .clock-widget .cw-date { font-size: 13px; }
}

/* ---------- 反馈浮动按钮（右下角） ---------- */
.feedback-fab {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border: none; cursor: pointer;
  font-size: 24px;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
.feedback-fab:hover { transform: scale(1.1) rotate(8deg); }
.feedback-fab .fab-tip {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  background: var(--text-main); color: white;
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
  white-space: nowrap; opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.feedback-fab:hover .fab-tip { opacity: 1; }
@media (max-width: 600px) {
  .feedback-fab { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 20px; }
  .feedback-fab .fab-tip { display: none; }
}

/* ---------- 弹窗（反馈/留言板） ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(45, 55, 72, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card); border-radius: 16px;
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 18px; color: var(--text-main); }
.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--text-muted); line-height: 1; padding: 4px;
}
.modal-close:hover { color: var(--danger); }
.modal-body { padding: 24px; }
.modal-body .modal-tip {
  font-size: 13px; color: var(--text-sub); margin-bottom: 16px;
  line-height: 1.6;
}
.modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--border);
  display: flex; gap: 12px; justify-content: flex-end;
}

/* 留言板专属（分段控件复用 components.css 的 .tabs/.tab，激活浅填充，不再单独定义 .fb-tab） */
.fb-list { max-height: 320px; overflow-y: auto; margin-bottom: 16px; }
.fb-list-empty {
  text-align: center; padding: 30px 20px;
  color: var(--text-muted); font-size: 13px;
}
.fb-item {
  background: var(--bg-soft); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.fb-item-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.fb-item-author { font-size: 13px; font-weight: 600; color: var(--text-main); }
.fb-item-date { font-size: 11px; color: var(--text-muted); }
.fb-item-content { font-size: 13px; color: var(--text-sub); line-height: 1.6; }
.fb-item-reply {
  margin-top: 8px; padding: 8px 10px; background: var(--bg-card);
  border-left: 3px solid var(--primary); border-radius: 4px;
  font-size: 12px; color: var(--text-sub);
}
.fb-item-reply strong { color: var(--primary); }

/* 反馈表单：联系方式输入 + 提交状态 */
.fb-contact { width: 100%; margin-top: 10px; }
.fb-status { min-height: 18px; font-size: 13px; margin: 8px 0; line-height: 1.5; }
.fb-status.ok { color: #1a9e57; }
.fb-status.err { color: var(--danger, #e04848); }
.fb-item-contact { margin-left: 8px; color: var(--text-sub); font-size: 12px; }

/* ---------- 公开反馈墙 ---------- */
.fb-count { display: inline-block; min-width: 24px; padding: 0 8px; margin-left: 6px; font-size: 14px; line-height: 22px; text-align: center; background: var(--primary); color: #fff; border-radius: 999px; }
.fb-wall { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.fb-wall-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); background: var(--bg, #f6f8fb); border-radius: 12px; }
.fb-wall-item { padding: 16px 18px; background: var(--bg-card); border: 1px solid #eef1f5; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.fb-wall-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fb-wall-author { font-weight: 600; color: var(--text-main); }
.fb-wall-date { font-size: 12px; color: var(--text-muted); }
.fb-wall-msg { font-size: 14px; color: var(--text-sub); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.fb-wall-reply { margin-top: 12px; padding: 10px 12px; background: #f0f7f1; border-left: 3px solid #1a9e57; border-radius: 8px; }
.fb-wall-reply-label { font-size: 12px; font-weight: 600; color: #1a9e57; margin-bottom: 4px; }
.fb-wall-reply-text { font-size: 14px; color: var(--text-sub); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

/* ---------- 反馈管理后台 ---------- */
.fb-admin-token { display: flex; gap: 10px; margin-bottom: 12px; }
.fb-admin-token .text-input { flex: 1; }
.admin-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.admin-item { padding: 16px 18px; background: var(--bg-card); border: 1px solid #eef1f5; border-radius: 12px; }
.admin-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.admin-author { font-weight: 600; color: var(--text-main); }
.admin-date { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.admin-status { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #eef1f5; color: var(--text-sub); }
.admin-status.ok { background: #e6f6ec; color: #1a9e57; }
.admin-status.warn { background: var(--warning-bg); color: #c47f12; }
.admin-status.muted { background: #f0f0f0; color: #888; }
.admin-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; word-break: break-all; }
.admin-msg { font-size: 14px; color: var(--text-sub); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.admin-reply-done { margin-top: 10px; font-size: 13px; color: var(--text-sub); }
.admin-reply-done .admin-reply-text { color: #1a9e57; }
.admin-reply-box { margin-top: 10px; }
.admin-reply-box .actions { margin-top: 8px; }

/* 公开/不公开切换 */
.fb-visibility {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--bg-soft);
  border-radius: 8px; margin-bottom: 14px; font-size: 13px;
}
.fb-visibility input { width: 16px; height: 16px; accent-color: var(--primary); }

/* ---------- 赞赏页 ---------- */
.support-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 24px 0;
}
@media (max-width: 600px) { .support-grid { grid-template-columns: 1fr; } }
.qr-card {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: 16px; padding: 24px; text-align: center;
  transition: all 0.2s;
}
.qr-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.qr-card .qr-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.qr-card .qr-sub { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; }
.qr-card .qr-img {
  width: 280px; height: 280px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--border);
  margin: 0 auto; display: block;
}
@media (max-width: 600px) {
  .qr-card .qr-img { width: 240px; height: 240px; }
}
.qr-card .qr-badge {
  display: inline-block; margin-top: 12px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
}
.qr-card.wechat .qr-badge { background: #e6fffa; color: #047857; }
.qr-card.alipay .qr-badge { background: #e0f2fe; color: #0369a1; }

/* ---------- 移动端导航调整 ---------- */
@media (max-width: 600px) {
  body { padding: 10px; }
  .container { padding: 20px; }
  .navbar { flex-direction: column; gap: 12px; align-items: flex-start; }
  .nav-links { flex-wrap: wrap; gap: 12px; }
  .page-header h1 { font-size: 22px; }
}

/* ---------- 首页：左侧蛙蛙式目录导航（宽屏 fixed 浮于紫色背景区，中等屏容器内 sticky，移动 chips） ---------- */
html { scroll-behavior: smooth; }
.tools-layout { display: flex; gap: 24px; align-items: flex-start; margin-top: 12px; }
/* 侧栏目录树 V1「彩色徽章」：分类图标砖 + 彩色数量徽标 + 展开行分类色高亮（手风琴保留）
   每分类主色由 build.mjs 注入 style="--cat:<color>"；老浏览器用 @supports 降级为通用紫 */
.cat-nav {
  flex: 0 0 220px;
  background: var(--bg-card);
  border-radius: 0; padding: 14px 8px 14px 12px;
  box-shadow: 4px 0 16px rgba(31, 38, 135, 0.12);
  display: flex; flex-direction: column; gap: 1px; font-size: 13px;
  min-height: 100%; /* 跟主区等高 */
  overflow-y: auto;
  scrollbar-gutter: stable; /* 永久预留滚动条槽位 → 内容宽度恒定，数量/箭头不跳 */
  scrollbar-width: thin; /* firefox: 细滚动条 */
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}
.cat-nav::-webkit-scrollbar { width: 6px; }
.cat-nav::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); border-radius: 3px; }
.cat-nav::-webkit-scrollbar-track { background: transparent; }
.cat-nav-title { font-size: 11px; color: var(--text-muted, #9ca3af); padding: 0 4px 10px; font-weight: 600; letter-spacing: .05em; border-bottom: 1px solid var(--border, #e6e9ef); margin-bottom: 6px; }
/* 侧栏「首页」：与下方分类行共用同一套行样式（26px 主色图标砖 + 名称 + 整行 hover 底色）。
   margin 左右 2px 与 .cat-acc 的 padding:2px 对齐 → 图标砖与分类砖左边齐平（原为 4px，错位 4px）；
   --cat 设为主色，使内部 .cat-nav-tile 在 color-mix 分支下同样取主色浅底。 */
.cat-nav-home {
  --cat: var(--primary, #667eea);
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; color: var(--primary, #4f46e5);
  padding: 5px 6px; margin: 0 2px 10px;
  border-radius: 8px; text-decoration: none;
  transition: color .15s, background .15s;
}
.cat-nav-home:hover { background: rgba(102, 126, 234, 0.07); color: var(--primary-dark, #4f46e5); }
/* 手风琴：分类标题（默认收起，只显示图标砖+名称+彩色数量） */
.cat-acc { margin-bottom: 3px; padding: 2px; border-radius: 10px; transition: background .15s; }
.cat-nav-head {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  width: 100%; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text-main, #1f2937);
  padding: 5px 6px; border-radius: 8px; text-align: left;
  transition: color .15s, background .15s;
}
.cat-nav-head:hover { background: rgba(102, 126, 234, 0.07); }
.cat-nav-head[aria-expanded="true"] { background: rgba(102, 126, 234, 0.10); color: var(--primary-dark, #4f46e5); }
.cat-nav-head-label {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
/* 分类彩色图标砖（emoji 落在分类色浅底上） */
.cat-nav-tile {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: rgba(102, 126, 234, 0.15);
  transition: background .15s;
}
.cat-nav-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.cat-nav-head .cnt {
  font-size: 11px; color: #fff;
  background: var(--primary, #667eea); border-radius: 10px;
  padding: 1px 6px; line-height: 15px; flex: 0 0 auto;
  font-weight: 600; min-width: 18px; text-align: center;
}
.cat-nav-head .chev {
  width: 12px; height: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: currentColor; opacity: .6;
  transition: transform .18s;
}
.cat-nav-head[aria-expanded="true"] .chev { transform: rotate(180deg); opacity: .9; }
.cat-nav-body { display: none; padding: 5px 0 5px 36px; }
.cat-nav-body.open { display: block; }
.cat-nav-item {
  color: var(--text-sub, #6b7280); padding: 4px 8px;
  text-decoration: none; display: block; border-radius: 7px;
  border-left: 2px solid transparent; margin-bottom: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-nav-item:hover { color: var(--primary-dark, #4f46e5); background: rgba(102, 126, 234, 0.08); border-left-color: var(--primary, #667eea); }
.cat-nav-item--active { color: var(--primary, #667eea); background: rgba(102, 126, 234, 0.1); border-left-color: var(--primary, #667eea); font-weight: 500; }
/* 支持 color-mix 的现代浏览器：精确使用每个分类的主色 --cat */
@supports (background: color-mix(in srgb, red 10%, white)) {
  .cat-nav-head:hover { background: color-mix(in srgb, var(--cat) 7%, #fff); }
  .cat-nav-head[aria-expanded="true"] { background: color-mix(in srgb, var(--cat) 10%, #fff); color: var(--cat); }
  .cat-nav-tile { background: color-mix(in srgb, var(--cat) 15%, #fff); }
  .cat-nav-head[aria-expanded="true"] .cat-nav-tile { background: color-mix(in srgb, var(--cat) 22%, #fff); }
  .cat-nav-head .cnt { background: var(--cat); }
  .cat-nav-item:hover { color: var(--cat); background: color-mix(in srgb, var(--cat) 8%, #fff); border-left-color: var(--cat); }
  .cat-nav-item--active { color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, #fff); border-left-color: var(--cat); }
}
.tools-main { flex: 1; min-width: 0; }
/* 主区卡片网格 */
.cat-section { scroll-margin-top: 20px; }
.cat-title {
  font-size: 18px; margin: 28px 0 4px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e6e9ef);
  display: flex; align-items: baseline; gap: 8px;
}
.cat-title:first-child { margin-top: 0; }
.cat-count { font-size: 12px; color: var(--text-muted, #8a94a6); font-weight: 400; }
/* 移动端 chips */
.cat-chips { display: none; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips a {
  flex: 0 0 auto; padding: 9px 13px; border-radius: 22px; font-size: 13.5px;
  background: var(--bg-card);
  border: 1.5px solid color-mix(in srgb, var(--cat, #667eea) 35%, #e5e7eb);
  color: var(--text-main, #1f2937);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s, background .12s;
}
.cat-chips a:active { transform: scale(0.97); }
.cat-chips .chip-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--cat, #667eea); }
.cat-chips .chip-name { font-weight: 500; }
.cat-chips .chip-cnt {
  font-size: 11px; color: #fff;
  background: var(--cat, #667eea);
  border-radius: 10px; padding: 1px 7px; font-weight: 600; min-width: 18px; text-align: center; line-height: 15px;
}
.cat-chips a:hover { background: color-mix(in srgb, var(--cat, #667eea) 8%, #fff); }
/* 老浏览器降级 */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .cat-chips a { border-color: #e5e7eb; }
  .cat-chips a:hover { background: #f9fafb; }
}

/* 宽屏（≥1000px）：侧栏 sticky 在容器内（1000px 以下视口固定 220px 侧栏会把主区压得过窄，
   1366 笔记本 125% 缩放 / 小窗口下"画面不全"，故断点从 721 提到 1000，以下走顶部 chips） */
@media (min-width: 1000px) {
  .cat-nav { position: sticky; top: 20px; }
}
/* 中窄屏（≤999px）：chips 分类栏 + 侧栏隐藏 */
@media (max-width: 999px) {
  .tools-layout { display: block; }
  .cat-nav { display: none; }
  /* 移动端用 grid 强制两等列（修 chip 宽度不齐：flex+内容自然宽会让 1位/2位
     数字的 chip 宽度不同导致同行错位；grid 等分列宽一致、内容截断兜底） */
  .cat-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 4px 12px 14px; overflow-x: hidden; }
  .cat-chips a { padding: 10px 14px; font-size: 14px; border-width: 1.5px; justify-content: flex-start; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-chips .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cat-chips .chip-cnt { font-size: 11px; padding: 2px 7px; flex: 0 0 auto; }
  /* 右上角时间窗口：中窄屏隐藏（占屏且与导航重复） */
  .clock-widget { display: none; }
  /* 容器 padding 在窄屏收紧，避免主区内容被压 */
  .container { padding: 18px 16px; }
  /* 主区卡片网格：480 以下 1 列，480-999 仍 2 列 */
  .ph-grid, .tool-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 超窄屏（≤480）单列 */
@media (max-width: 480px) {
  .ph-grid, .tool-grid { grid-template-columns: 1fr; }
  .cat-chips a { padding: 9px 12px; font-size: 13.5px; }
}

/* ── 主题切换按钮 + 收藏/最近使用 ── */
.theme-toggle {
  border: none; background: none; cursor: pointer; font-size: 18px;
  padding: 6px; line-height: 1; border-radius: 8px; transition: background .15s;
}
.theme-toggle:hover { background: rgba(128, 128, 128, .15); }
.navbar { display: flex; align-items: center; gap: 14px; }
.navbar .nav-links { margin-left: auto; }

/* 卡片收藏星标：卡片右上角（icon 同高，不碰标题），饱满 ⭐ 未收藏灰 / 已收藏金色 */
.fav-btn {
  position: absolute; top: 18px; right: 16px; z-index: 2;
  font-size: 16px; line-height: 1; cursor: pointer;
  background: none; border: none; padding: 2px; border-radius: 6px;
  filter: grayscale(1); opacity: .45; transition: all .15s; user-select: none;
}
.fav-btn:hover { opacity: 1; filter: grayscale(.2); transform: scale(1.2); }
.fav-btn.on { filter: none; opacity: 1; }
/* 工具页标题行：工具名称在左、收藏按钮在右，同一行垂直居中 */
.page-header-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* 工具页标题旁收藏按钮（覆盖卡片星标的绝对定位/灰度，改内联胶囊） */
.fav-btn--page {
  position: static; display: inline-flex; align-items: center; gap: 4px;
  filter: none; opacity: 1; font-size: 13px; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft);
  flex: 0 0 auto;
}
.fav-btn--page:hover { transform: none; filter: none; }
.fav-btn--page .fav-btn-label { font-size: 12.5px; color: var(--text-sub); }
.fav-btn--page.on { border-color: var(--primary); background: rgba(102, 126, 234, 0.08); }
.fav-btn--page.on .fav-btn-label { color: var(--primary); }

/* ── 首页工具搜索框 ── */
.site-search {
  width: 100%; max-width: 560px; margin: 18px auto 0;
  display: block;
  padding: 13px 18px; font-size: 15px;
  border: 2px solid var(--border); border-radius: 12px;
  background: var(--bg-card); color: var(--text-main);
  transition: all .18s; outline: none;
}
.site-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(102,126,234,.15); }
.site-search::placeholder { color: var(--text-muted); }
.search-empty {
  max-width: 560px; margin: 10px auto 0; text-align: center;
  font-size: 13px; color: var(--text-muted);
  background: var(--bg-soft); border-radius: 8px; padding: 10px;
}

/* 宽屏（≥1340px）：侧栏 fixed 贴屏幕左缘 220px；主区容器 1080 在视口里水平居中
   容器 padding-left 动态 = max(30px, 250px - 留白)，确保内容不被侧栏覆盖：
   视口 1340（留白 130）→ padding-left 120；1440（180）→ 70；1544+（≥232）→ 30 默认 */
@media (min-width: 1340px) {
  .container {
    max-width: 1080px;        /* 线上原值，容器居中 */
    margin: 0 auto;
    padding: 30px;
    padding-left: max(30px, calc(250px - (100vw - 1080px) / 2));
  }
  .cat-nav {
    position: fixed; left: 0; top: 0;
    height: 100vh; width: 220px;
    flex: none;
    padding: 24px 8px 24px 12px;
    overflow-y: auto;
    background: var(--bg-card);
    box-shadow: 4px 0 16px rgba(31, 38, 135, 0.12);
    z-index: 10;
  }
}


/* 后台管理 · 更新日志时间线 */
.cl-group { margin-bottom: 16px; padding-left: 14px; border-left: 2px solid var(--primary); }
.cl-date { font-size: 14px; font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.cl-items { margin: 0; padding-left: 18px; line-height: 1.9; font-size: 13.5px; color: var(--text-main); }

/* 「我的工具」浮窗——右上角时钟下方（紫色渐变方框） */
.my-tools {
  position: fixed; top: 158px; right: 20px; z-index: 100;
  width: 240px; max-height: calc(100vh - 160px); overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 14px 12px;
  box-shadow: 0 6px 20px rgba(31, 38, 135, .10);
  pointer-events: none; /* 浮窗容器不拦截页面其他元素点击 */
}
.my-tools a, .my-tools .fav-btn, .my-tools button { pointer-events: auto; } /* 内部链接/按钮可点 */
/* 时钟模块：白底（与「我的工具」同宽 240px，右上角一组面板） */
.clock-widget { width: 240px; box-sizing: border-box; }
.clock-widget .cw-close { color: var(--text-muted); }
.clock-widget .cw-lunar { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; }
.my-tools-section + .my-tools-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.my-tools-title { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.my-tools-hint { font-weight: 400; opacity: .7; font-size: 11px; color: var(--text-muted); }
.my-tools-list { display: flex; flex-wrap: wrap; gap: 5px; min-height: 16px; }
.my-tool-chip {
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text-sub); display: inline-block; font-size: 11.5px; padding: 3px 9px;
  border-radius: 999px; text-decoration: none; transition: all .12s;
}
.my-tool-chip:hover { border-color: var(--primary); color: var(--primary); }
.my-tools-empty { font-size: 11.5px; color: var(--text-muted); font-style: italic; }

/* 中屏（<1600px）统一隐藏右上角浮窗：
   视口容不下「居中主区（.container 1000–1080px）+ 右侧 240px 浮窗」时二者重叠，压住工具表单/按钮。
   Playwright 实测 901–1520px 全区间中招（960/1100/1280px 下 index/base64/pdf-merge 分别有
   1/4/2、4/5/3、4/5/3 个主区元素被浮窗覆盖），1600px 才归零——此前 .clock-widget 仅 ≤999px、
   .my-tools 仅 ≤900px 隐藏，901–1599px 是盲区。本规则置于两处浮窗定义之后，靠顺序稳赢同特异性。 */
@media (max-width: 1599px) {
  .clock-widget,
  .my-tools { display: none; }
}

/* 移动端：浮窗转为首页 hero 内嵌区块 + 顶部 nav 紧凑单行 */
.my-tools-mobile { display: none; }
@media (max-width: 900px) {
  /* nav 5 项 + 主题按钮挤一行：flex nowrap + nav-links 占满剩余空间，theme 不缩 */
  .navbar { gap: 4px; padding: 0 6px; flex-wrap: nowrap; }
  .navbar .brand-name { display: none; } /* 移动端隐藏品牌名只留 logo 省空间 */
  .nav-links { margin-left: auto; gap: 0; min-width: 0; flex: 1 1 auto; }
  .nav-links a { padding: 4px 3px; font-size: 12.5px; letter-spacing: -0.3px; white-space: nowrap; flex: 0 0 auto; }
  .theme-toggle { font-size: 16px; padding: 4px; flex: 0 0 auto; }
  /* 浮窗转内嵌 */
  .my-tools { display: none; }
  .my-tools-mobile { display: block; max-width: 560px; margin: 14px auto 0; }
  .my-tools-mobile .my-tools-section { margin-top: 10px; }
}

/* 移动端首页内嵌「我的收藏/最近使用」（浅色背景适配） */
.my-tools-mobile .my-tools-title { color: var(--text-sub); font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.my-tools-mobile .my-tools-empty { color: var(--text-muted); font-size: 12px; font-style: italic; }
.my-tools-mobile .my-tool-chip {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sub);
  display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: 999px; text-decoration: none; transition: all .12s;
}
.my-tools-mobile .my-tool-chip:hover { border-color: var(--primary); color: var(--primary); }
/* 时钟模块紫色底：关闭按钮白字 */
.clock-widget .cw-close { color: rgba(255,255,255,.85); }

/* 移动端首页内嵌「我的收藏/最近使用」（浅色背景适配） */
.my-tools-mobile .my-tools-title { color: var(--text-sub); font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.my-tools-mobile .my-tools-empty { color: var(--text-muted); font-size: 12px; font-style: italic; }
.my-tools-mobile .my-tool-chip {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sub);
  display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: 999px; text-decoration: none; transition: all .12s;
}
.my-tools-mobile .my-tool-chip:hover { border-color: var(--primary); color: var(--primary); }
/* 时钟模块紫色底：关闭按钮白字 */
.clock-widget .cw-close { color: rgba(255,255,255,.85); }

/* 后台管理 · 数据统计 */
.st-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.st-card { background: var(--bg-soft); border-radius: 10px; padding: 12px; text-align: center; }
.st-card .st-num { font-size: 20px; font-weight: 700; color: var(--primary-dark); font-family: 'Cascadia Code', Consolas, monospace; }
.st-card .st-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-col h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.st-col ul { list-style: none; margin: 0; padding: 0; }
.st-col li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg-soft); border-radius: 8px; margin-bottom: 5px; font-size: 13px; }
.st-k { color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.st-idx { color: var(--text-muted); font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; margin-right: 6px; flex: 0 0 auto; }
.st-col li b { color: var(--primary-dark); font-family: 'Cascadia Code', Consolas, monospace; margin-left: 8px; flex: 0 0 auto; }
.st-empty { color: var(--text-muted); font-size: 12.5px; }
.st-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 6px; }
.st-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.st-bar { width: 100%; max-width: 14px; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 3px 3px 0 0; min-height: 2px; }
.st-bar-label { font-size: 9px; color: var(--text-muted); margin-top: 3px; }
.st-sess { list-style: none; margin: 0; padding: 0; }
.st-sess li { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--bg-soft); border-radius: 8px; margin-bottom: 5px; font-size: 13px; }
@media (max-width: 700px) { .st-cards { grid-template-columns: 1fr 1fr; } .st-row { grid-template-columns: 1fr; } }

/* 后台管理 · 数据统计 */
.st-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.st-card { background: var(--bg-soft); border-radius: 10px; padding: 12px; text-align: center; }
.st-card .st-num { font-size: 20px; font-weight: 700; color: var(--primary-dark); font-family: 'Cascadia Code', Consolas, monospace; }
.st-card .st-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-col h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.st-col ul { list-style: none; margin: 0; padding: 0; }
.st-col li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg-soft); border-radius: 8px; margin-bottom: 5px; font-size: 13px; }
.st-k { color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.st-idx { color: var(--text-muted); font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; margin-right: 6px; flex: 0 0 auto; }
.st-col li b { color: var(--primary-dark); font-family: 'Cascadia Code', Consolas, monospace; margin-left: 8px; flex: 0 0 auto; }
.st-empty { color: var(--text-muted); font-size: 12.5px; }
.st-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 6px; }
.st-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.st-bar { width: 100%; max-width: 14px; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 3px 3px 0 0; min-height: 2px; }
.st-bar-label { font-size: 9px; color: var(--text-muted); margin-top: 3px; }
.st-sess { list-style: none; margin: 0; padding: 0; }
.st-sess li { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--bg-soft); border-radius: 8px; margin-bottom: 5px; font-size: 13px; }
@media (max-width: 700px) { .st-cards { grid-template-columns: 1fr 1fr; } .st-row { grid-template-columns: 1fr; } }

/* 后台统计 · 双柱状区 */
.st-bars2 { display: flex; gap: 20px; margin-top: 6px; }
.st-bars2 h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 700px) { .st-bars2 { flex-direction: column; } }

/* 后台统计 · 双柱状区 */
.st-bars2 { display: flex; gap: 20px; margin-top: 6px; }
.st-bars2 h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 700px) { .st-bars2 { flex-direction: column; } }

/* 后台统计 · 功能偏好 */
.st-pref-key { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); margin-bottom: 4px; }
.st-pref-buckets { display: flex; flex-wrap: wrap; gap: 5px; }
.st-pref-chip { font-size: 11.5px; padding: 3px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; }
.st-pref-chip b { color: var(--primary-dark); margin-left: 3px; }

/* 后台统计 · 功能偏好 */
.st-pref-key { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); margin-bottom: 4px; }
.st-pref-buckets { display: flex; flex-wrap: wrap; gap: 5px; }
.st-pref-chip { font-size: 11.5px; padding: 3px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; }
.st-pref-chip b { color: var(--primary-dark); margin-left: 3px; }

/* ── 句子/台词展示组件（诗词名句、经典台词、励志语录等 10 个文案灵感工具共用）── */
.po-filter { margin-bottom: 18px; }
.po-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.po-filter-label { flex: 0 0 auto; font-size: 13px; color: var(--text-sub); font-weight: 600; min-width: 32px; }
.po-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.po-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sub);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
  white-space: nowrap;
}
.po-chip:hover { border-color: var(--primary); color: var(--primary); background: rgba(102, 126, 234, .04); }
.po-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; box-shadow: 0 2px 6px rgba(102, 126, 234, .25); }
.po-card {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid var(--border);
  margin-top: 4px;
}
.po-quote { font-size: 22px; line-height: 1.6; font-weight: 600; color: var(--text-main); }
.po-content { font-size: 15px; line-height: 2; color: var(--text-sub); margin-top: 16px; white-space: pre-line; }
.po-source { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
/* 字号在窄屏略缩 */
@media (max-width: 480px) {
  .po-card { padding: 20px 16px; }
  .po-quote { font-size: 19px; }
}

/* 横批（对联大全专属）：红底金字横排居中 */
.po-h { font-size: 18px; font-weight: 700; color: #fff; background: #c0392b; display: inline-block; padding: 4px 18px; border-radius: 6px; margin-bottom: 12px; letter-spacing: 6px; }

/* 横批（对联大全专属）：红底金字横排居中 */
.po-h { font-size: 18px; font-weight: 700; color: #fff; background: #c0392b; display: inline-block; padding: 4px 18px; border-radius: 6px; margin-bottom: 12px; letter-spacing: 6px; }