/* public/css/style.css —— 全站自定义补充样式（主体样式由 Tailwind 提供） */

/* ============ 设计令牌 ============ */
:root {
  /* 品牌主色（全局组件 footer 等读取此变量） */
  --primary-color: #2563eb;
  /* 导航栏配色（由后台 /api/config/public 注入 --nav-color / --nav-fg） */
  --nav-color: #2563eb;
  --nav-fg: #ffffff;

  /* 现代中性色板 */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --line: #eef2f7;
  --line-strong: #e2e8f0;
  --surface: #ffffff;
  --bg: #f6f8fb;

  /* 统一圆角与柔和阴影 */
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.22);
  --primary-soft: rgba(37, 99, 235, 0.08);

  /* 统一卡片圆角与阴影（首页精细化优化） */
  --card-radius: 16px;
  --card-radius-sm: 10px;
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -18px rgba(15, 23, 42, 0.18);
  --card-shadow-hover: 0 16px 36px -14px rgba(15, 23, 42, 0.20);
}

/* ============ 主题令牌（4 套主题） ============
 * 主题感知页面（如增值税计算器）通过 --t-* 语义变量适配 4 套主题。
 * 默认（浅白清爽）即 :root 取值；其余主题通过 html[data-theme="..."] 覆盖。 */
html[data-theme="light"] {
  --t-bg: #f6f8fb;
  --t-surface: #ffffff;
  --t-text: #1e293b;
  --t-muted: #64748b;
  --t-border: #e2e8f0;
  --t-primary: #2563eb;
  --t-primary-soft: rgba(37, 99, 235, 0.10);
  --t-input-bg: #ffffff;
  --t-input-border: #e2e8f0;
  --t-chip: #f1f5f9;
  --t-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.12);
}
html[data-theme="dark"] {            /* 深色护眼 */
  --t-bg: #0f172a;
  --t-surface: #1e293b;
  --t-text: #e2e8f0;
  --t-muted: #94a3b8;
  --t-border: #334155;
  --t-primary: #60a5fa;
  --t-primary-soft: rgba(96, 165, 250, 0.14);
  --t-input-bg: #0f172a;
  --t-input-border: #334155;
  --t-chip: #334155;
  --t-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}
html[data-theme="cream"] {           /* 极简米白 */
  --t-bg: #faf7f0;
  --t-surface: #fffdf8;
  --t-text: #4a4034;
  --t-muted: #8a7f6d;
  --t-border: #ece3d3;
  --t-primary: #b07d4f;
  --t-primary-soft: rgba(176, 125, 79, 0.12);
  --t-input-bg: #fffdf8;
  --t-input-border: #e3d8c4;
  --t-chip: #f2ece0;
  --t-shadow: 0 10px 30px -12px rgba(74, 64, 52, 0.14);
}
html[data-theme="navy"] {            /* 商务深蓝 */
  --t-bg: #0b1f3a;
  --t-surface: #0f2c52;
  --t-text: #e8eef7;
  --t-muted: #9fb3d1;
  --t-border: #1c3a63;
  --t-primary: #3b82f6;
  --t-primary-soft: rgba(59, 130, 246, 0.18);
  --t-input-bg: #0f2c52;
  --t-input-border: #1c3a63;
  --t-chip: #14315a;
  --t-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
}
/* 主题感知页面根容器（覆盖 Tailwind 默认底色，跟随主题切换） */
.vat-page { background: var(--t-bg); transition: background-color .25s ease; color: var(--t-text); }

/* 全局字体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink-800);
}

/* 统一焦点态（现代化可访问性） */
a, button, input, select, textarea, [tabindex] {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-soft);
  border-radius: var(--radius-sm);
}

/* ============ 通用区块 / 容器 ============ */
.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

/* 工具卡片悬浮效果 */
.tool-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

/* 简单的淡入动画 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.4s ease both;
}

/* ============ 统一表格样式（前后台通用） ============ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: var(--ink-700);
}
.data-table thead th {
  background: #f8fafc;
  color: var(--ink-500);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table tbody tr:nth-child(even) { background: #fcfdff; }
.data-table tbody tr:hover { background: #f3f7ff; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ============ 统一卡片容器 ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
 *  固定顶部导航栏（按分类 + 悬停下拉 + 移动端汉堡）
 *  配色由 --nav-color / --nav-fg 控制（后台可配置）
 * ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 6px 24px -16px rgba(15, 23, 42, 0.35);
  transition: background-color 0.25s ease;
}
.site-nav-inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 1rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--nav-fg);
  text-decoration: none;
  flex: 0 0 auto;
}
.site-brand-logo {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  backdrop-filter: blur(4px);
}
.site-brand-name {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

/* 桌面端菜单 */
.site-nav-menu {
  display: none;
  align-items: center;
  gap: 0.15rem;
}
@media (min-width: 1024px) {
  .site-nav-menu { display: flex; }
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nav-fg);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, opacity 0.18s ease;
  opacity: 0.92;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.16); opacity: 1; }
.nav-link.is-active { background: rgba(255, 255, 255, 0.22); opacity: 1; }
.nav-ico { font-size: 1rem; line-height: 1; }
.nav-caret { width: 0.85rem; height: 0.85rem; transition: transform 0.2s ease; }
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* 分类下拉 */
.nav-item { position: relative; padding: 0.2rem 0; }
/* 透明桥接区：扩大下拉 hover 触发区域，避免鼠标下移时菜单收起 */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 18rem;
  padding-top: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-inner {
  background: #fff;
  color: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
}
.nav-dropdown-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-400);
  padding: 0.4rem 0.75rem 0.6rem;
  text-transform: none;
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-700);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.nav-dropdown-item:hover {
  background: color-mix(in srgb, var(--nav-color) 10%, #fff);
  color: var(--ink-900);
  transform: translateX(2px);
}
.nav-dropdown-ico { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.nav-dropdown-text { display: flex; flex-direction: column; min-width: 0; }
.nav-dropdown-name { font-size: 0.875rem; font-weight: 600; color: var(--ink-900); }
.nav-dropdown-desc {
  font-size: 0.72rem;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}
.nav-dropdown-more {
  display: block;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nav-color);
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.nav-dropdown-more:hover { text-decoration: underline; }

/* 右侧登录态 */
.site-nav-right { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 1024px) { .site-nav-right { display: flex; } }
.nav-avatar { display: inline-flex; border-radius: 9999px; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
.nav-btn-primary {
  background: #fff;
  color: var(--nav-color);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.nav-btn-primary:hover { box-shadow: 0 8px 20px -10px rgba(0,0,0,0.4); transform: translateY(-1px); }
.nav-btn-ghost {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--nav-fg);
  padding: 0.42rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.95;
  transition: background-color 0.18s ease;
}
.nav-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* 汉堡按钮（移动端） */
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  color: var(--nav-fg);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.site-nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.site-nav-toggle svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) { .site-nav-toggle { display: none; } }

/* 移动端展开面板 */
.site-nav-mobile {
  display: block;
  max-height: 0;
  overflow: hidden;
  background: var(--nav-color);
  color: var(--nav-fg);
  transition: max-height 0.3s ease;
}
.site-nav-mobile.is-open { max-height: 85vh; overflow-y: auto; }
.site-nav-mobile .m-link,
.site-nav-mobile .m-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nav-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-nav-mobile .m-link:hover,
.site-nav-mobile .m-cat-head:hover { background: rgba(255, 255, 255, 0.1); }
.m-cat-caret { width: 1rem; height: 1rem; transition: transform 0.2s ease; flex: 0 0 auto; }
.m-cat.is-open .m-cat-caret { transform: rotate(180deg); }
.m-cat-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: rgba(0, 0, 0, 0.08);
}
.m-cat.is-open .m-cat-body { max-height: 24rem; }
.m-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.65rem 2.2rem;
  font-size: 0.875rem;
  color: var(--nav-fg);
  text-decoration: none;
  opacity: 0.92;
}
.m-item:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.m-account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* ============================================================
 *  页面底部「更多实用工具」卡片
 * ============================================================ */
.related-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 0;
}
.related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.related-title { font-size: 1.2rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.related-more { font-size: 0.85rem; font-weight: 600; color: var(--primary-color); text-decoration: none; }
.related-more:hover { text-decoration: underline; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.related-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.related-ico { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.related-meta { display: flex; flex-direction: column; min-width: 0; }
.related-name { font-size: 0.875rem; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.related-cat { font-size: 0.72rem; color: var(--ink-400); }

/* ============================================================
 *  现代化通用区块（hero / 卡片网格 / 按钮）
 * ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nav-color) 0%, color-mix(in srgb, var(--nav-color) 55%, #1e293b) 100%);
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 40rem at 85% -10%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(30rem 30rem at 10% 120%, rgba(255,255,255,0.12), transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 72rem; margin: 0 auto; padding: 4rem 1rem; text-align: center; }
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--nav-color);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.4); }

/* 统一按钮（蓝色主色，可被 --nav-color 覆盖） */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ============================================================
 *  首页顶部滚动通知栏（站长通知）
 *  横向 marquee 轮播，悬停暂停，可关闭，移动端适配
 * ============================================================ */
.notice-bar {
  position: relative;
  z-index: 40;                                   /* 位于 sticky 导航栏之下（导航栏 z-50），滚动时通知滑到导航栏后面，不被遮挡 */
  display: flex;
  align-items: center;
  height: 40px;
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  color: #e5e7eb;
  font-size: 13px;
  overflow: hidden;
}
/* 底部一道随导航栏主色变化的高亮线 */
.notice-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nav-color, #2563eb), transparent);
  opacity: 0.85;
}
.notice-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0 0 1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.notice-ico .ni-emoji { font-size: 1rem; line-height: 1; }
.notice-ico .ni-label { font-size: 0.78rem; letter-spacing: 0.02em; }
.notice-viewport {
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.2rem, #000 calc(100% - 2.2rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2.2rem, #000 calc(100% - 2.2rem), transparent);
}
.notice-track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
  animation: noticeMarquee var(--dur, 30s) linear infinite;
}
.notice-bar:hover .notice-track { animation-play-state: paused; }
.notice-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1.5rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.notice-item:hover .notice-text { text-decoration: underline; }
.notice-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
.notice-dot-warning { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.notice-dot-success { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.notice-title { font-weight: 700; color: #fff; margin-right: 0.25rem; }
.notice-text { opacity: 0.95; }
.notice-sep { color: #475569; padding: 0 0.15rem; user-select: none; }
.notice-close {
  flex: 0 0 auto;
  margin-left: auto;
  height: 100%;
  padding: 0 1rem;
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.notice-close:hover { color: #fff; }
@keyframes noticeMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .notice-bar { height: 36px; font-size: 12px; }
  .notice-ico { padding-left: 0.7rem; }
  .notice-ico .ni-label { display: none; }     /* 移动端只保留喇叭图标，节省空间 */
  .notice-item { padding: 0 1.1rem; }
  .notice-close { padding: 0 0.7rem; }
}

/* ================= 客服/反馈/关于 弹窗 =================
 * 原右侧悬浮图标栏（.site-sidebar）已按新版首页规范移除，
 * 弹窗由页脚三文字链接（联系客服 / 意见反馈 / 关于我们）触发。 */
.sb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sb-modal-overlay.is-open { display: flex; }
.sb-modal {
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  background: #fff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.45);
  animation: sbPop .18s ease;
}
@keyframes sbPop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.sb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
}
.sb-modal-title { font-weight: 700; color: #111827; font-size: 16px; }
.sb-modal-x { border: none; background: none; font-size: 18px; color: #94a3b8; cursor: pointer; line-height: 1; }
.sb-modal-x:hover { color: #475569; }
.sb-modal-body { padding: 18px; overflow-y: auto; }

.sb-empty { color: #94a3b8; font-size: 14px; text-align: center; padding: 10px 0; }
.sb-tip { color: #64748b; font-size: 13px; margin-bottom: 12px; }

/* 联系客服信息 */
.sb-cs-info { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.sb-cs-row { display: flex; align-items: center; gap: 12px; }
.sb-cs-k { font-size: 13px; color: #64748b; width: 64px; flex: 0 0 auto; }
.sb-cs-v { font-size: 14px; color: #1f2937; display: flex; align-items: center; gap: 8px; }
.sb-cs-qr { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid #eef2f7; cursor: zoom-in; }
.sb-copy { border: 1px solid #e2e8f0; background: #fff; color: #2563eb; font-size: 12px; padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.sb-copy:hover { background: #eff6ff; }

/* 在线客服聊天 */
.sb-chat { border-top: 1px dashed #e2e8f0; padding-top: 12px; }
.sb-chat-title { font-size: 13px; color: #64748b; margin-bottom: 8px; }
.sb-chat-msgs { height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 10px; background: #ededed; border-radius: 12px; }
.sb-msg { display: flex; align-items: flex-start; gap: 8px; }
.sb-msg.sb-align-left { justify-content: flex-start; }
.sb-msg.sb-align-right { justify-content: flex-end; }
.sb-msg-main { display: flex; flex-direction: column; max-width: 74%; min-width: 0; }
.sb-bubble { padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; word-break: break-word; }
.sb-bubble-user { background: #95ec69; color: #1f2937; }      /* 用户消息气泡：微信绿 */
.sb-bubble-cs { background: #fff; color: #1f2937; border: 1px solid #e5e7eb; } /* 客服消息气泡：白 */
.sb-msg.sb-align-left .sb-bubble { border-bottom-left-radius: 4px; }
.sb-msg.sb-align-right .sb-bubble { border-bottom-right-radius: 4px; }
.sb-ava { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; overflow: hidden; background: #e5e7eb; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
/* 客服头像：戴耳麦的客服形象（内联 SVG，前台聊天窗与后台客服台共用；元素内不放文字） */
.sb-ava-cs {
  color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='16.8' r='5.2' fill='%23ffffff'/%3E%3Cpath d='M10.6 32.8c0-5.1 4.2-8.3 9.4-8.3s9.4 3.2 9.4 8.3z' fill='%23ffffff'/%3E%3Cpath d='M12.2 18.4a7.8 7.8 0 0 1 15.6 0' fill='none' stroke='%23ffd75e' stroke-width='2.1' stroke-linecap='round'/%3E%3Crect x='10.2' y='16.4' width='3.7' height='5.9' rx='1.85' fill='%23ffd75e'/%3E%3Crect x='26.1' y='16.4' width='3.7' height='5.9' rx='1.85' fill='%23ffd75e'/%3E%3Cpath d='M27.95 22.3v2.3a2.7 2.7 0 0 1-2.7 2.7h-1.4' fill='none' stroke='%23ffd75e' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='22.9' cy='27.3' r='1.6' fill='%23ffd75e'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat,
    linear-gradient(135deg, #34d399 0%, #07c160 100%);
  font-size: 0; /* 兜底：即使残留文字节点也不显示 */
}
.sb-ava-user { background: #3b82f6; color: #fff; font-size: 14px; }
.sb-ava img { width: 100%; height: 100%; object-fit: cover; }
.sb-msg-img { max-width: 150px; max-height: 150px; border-radius: 10px; border: 1px solid #e2e8f0; margin-top: 4px; }
/* 后台客服聊天区背景（与微信风格统一） */
#cs-chat-msgs { background: #ededed; }

/* 后台会话列表：新消息橙色闪烁提示 */
@keyframes csConvFlash { 0%, 100% { background: #fff; } 50% { background: #fff7ed; } }
.cs-conv-unread { animation: csConvFlash 1.4s ease-in-out infinite; border-left-color: #f97316 !important; }

/* 前台「客服新消息」右下角弹窗 */
.cs-user-popup { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; width: 300px; max-width: calc(100vw - 2.5rem); display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 40px -12px rgba(15,23,42,.30); border: 1px solid #eef2f7; }
.cs-user-popup.hidden { display: none; }
.cs-up-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='16.8' r='5.2' fill='%23ffffff'/%3E%3Cpath d='M10.6 32.8c0-5.1 4.2-8.3 9.4-8.3s9.4 3.2 9.4 8.3z' fill='%23ffffff'/%3E%3Cpath d='M12.2 18.4a7.8 7.8 0 0 1 15.6 0' fill='none' stroke='%23ffd75e' stroke-width='2.1' stroke-linecap='round'/%3E%3Crect x='10.2' y='16.4' width='3.7' height='5.9' rx='1.85' fill='%23ffd75e'/%3E%3Crect x='26.1' y='16.4' width='3.7' height='5.9' rx='1.85' fill='%23ffd75e'/%3E%3Cpath d='M27.95 22.3v2.3a2.7 2.7 0 0 1-2.7 2.7h-1.4' fill='none' stroke='%23ffd75e' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='22.9' cy='27.3' r='1.6' fill='%23ffd75e'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat,
    linear-gradient(135deg, #34d399 0%, #07c160 100%);
}
.cs-up-body { flex: 1 1 auto; min-width: 0; }
.cs-up-title { font-size: 14px; font-weight: 600; color: #111827; }
.cs-up-text { font-size: 13px; color: #4b5563; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs-up-view { margin-top: 8px; font-size: 13px; color: #2563eb; background: none; border: none; padding: 0; cursor: pointer; font-weight: 600; }
.cs-up-view:hover { text-decoration: underline; }
.cs-up-close { flex: 0 0 auto; background: none; border: none; color: #cbd5e1; font-size: 16px; line-height: 1; cursor: pointer; }
.cs-up-close:hover { color: #94a3b8; }
.sb-chat-input { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sb-chat-img { border: none; background: #f1f5f9; border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 16px; }
.sb-chat-img:hover { background: #e2e8f0; }
.sb-chat-input input[type=text] { flex: 1; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px; outline: none; font-size: 14px; }
.sb-chat-input input[type=text]:focus { border-color: #2563eb; }
.sb-chat-send { border: none; background: #2563eb; color: #fff; padding: 9px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.sb-chat-send:disabled { opacity: .6; cursor: default; }

/* 聊天标题栏操作按钮（提交反馈 / 转人工） */
.sb-chat-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-chat-acts { display: flex; gap: 6px; }
.sb-chat-fb, .sb-chat-escalate { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-size: 12px; padding: 3px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.sb-chat-fb:hover, .sb-chat-escalate:hover { border-color: #2563eb; color: #2563eb; }
.sb-chat-escalate:disabled { opacity: .6; cursor: default; border-color: #e2e8f0; color: #94a3b8; }
/* 内联反馈表单 */
.sb-fb-panel { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #f8fafc; }
.sb-fb-panel.hidden { display: none; }
.sb-fb-panel-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; }
.sb-fb-close { border: none; background: none; color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; }
.sb-fb-close:hover { color: #64748b; }
.sb-fb-tip { font-size: 12px; color: #94a3b8; margin-top: 8px; }
/* 转人工提示 */
.sb-escalate-tip { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.sb-escalate-tip.hidden { display: none; }
/* 自动回复（知识库 / AI）标签 */
.sb-auto-tag { display: inline-block; font-size: 10px; color: #7c3aed; background: #f3e8ff; border-radius: 6px; padding: 0 6px; margin-bottom: 2px; }

/* 撤回系统提示（居中） */
.sb-recalled { align-self: center; width: 100%; text-align: center; font-size: 12px; color: #94a3b8; padding: 4px 0; }

/* 引用块（气泡上方） */
.sb-quote { border-left: 3px solid #cbd5e1; background: rgba(15,23,42,.04); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px; cursor: pointer; }
.sb-quote-name { font-size: 11px; color: #64748b; margin-bottom: 1px; }
.sb-quote-text { font-size: 12px; color: #475569; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 消息悬停操作（引用 / 撤回） */
.sb-msg-actions { display: none; gap: 6px; margin-top: 4px; }
.sb-msg.sb-align-right .sb-msg-actions { align-self: flex-end; }
.sb-msg:hover .sb-msg-actions { display: flex; }
.sb-act { border: none; background: rgba(15,23,42,.06); color: #475569; font-size: 11px; padding: 1px 8px; border-radius: 8px; cursor: pointer; line-height: 1.6; }
.sb-act:hover { background: rgba(37,99,235,.12); color: #2563eb; }
.sb-act-danger:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* 前台引用预览条 */
.sb-quote-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; background: #eef4ff; border: 1px solid #dbeafe; border-radius: 10px; }
.sb-quote-bar.hidden { display: none; }
.sb-quote-bar-info { flex: 1; min-width: 0; }
.sb-quote-bar-name { font-size: 12px; color: #2563eb; font-weight: 600; }
.sb-quote-bar-text { font-size: 13px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-quote-bar-cancel { border: none; background: none; color: #94a3b8; font-size: 15px; line-height: 1; cursor: pointer; }
.sb-quote-bar-cancel:hover { color: #64748b; }

/* 后台引用预览条（与 Tailwind flex 配合，仅在显示时 flex） */
#cs-quote-bar:not(.hidden) { display: flex; }

/* 意见反馈 */
.sb-textarea { width: 100%; min-height: 120px; resize: vertical; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; outline: none; font-size: 14px; font-family: inherit; }
.sb-textarea:focus { border-color: #2563eb; }
.sb-input { width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 12px; outline: none; font-size: 14px; }
.sb-input:focus { border-color: #2563eb; }
.sb-submit { width: 100%; margin-top: 14px; border: none; background: #2563eb; color: #fff; padding: 11px; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 600; }
.sb-submit:disabled { opacity: .6; }

/* 反馈 / 需求投票表单（聊天窗与页脚弹窗共用） */
.sb-fb-modes { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 4px; }
.sb-fb-mode { font-size: 12px; color: #475569; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sb-fb-row { margin-top: 2px; }
.sb-fb-tip { font-size: 11px; color: #94a3b8; margin-top: 10px; line-height: 1.5; }
.sb-rte-bar { display: flex; gap: 4px; margin-top: 8px; }
.sb-rte-bar button { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-size: 12px; min-width: 30px; height: 28px; border-radius: 8px; cursor: pointer; padding: 0 8px; }
.sb-rte-bar button:hover { border-color: #2563eb; color: #2563eb; }
.sb-rte { min-height: 90px; max-height: 220px; overflow: auto; margin-top: 8px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 12px; outline: none; font-size: 14px; line-height: 1.6; background: #fff; }
.sb-rte:focus { border-color: #2563eb; }
.sb-rte:empty:before { content: attr(data-placeholder); color: #94a3b8; }

/* 公开需求投票板（首页右侧） */
#feature-board { display: flex; flex-direction: column; gap: 10px; }
.fb-card { border: 1px solid #eef2f7; border-radius: 12px; padding: 12px; background: #fff; }
.fb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-title { font-weight: 600; color: #1f2937; font-size: 14px; }
.fb-dev-yes { font-size: 11px; color: #047857; background: #d1fae5; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.fb-dev-no { font-size: 11px; color: #b45309; background: #fef3c7; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.fb-stages { margin-top: 6px; }
.fb-stage { font-size: 11px; color: #4338ca; background: #e0e7ff; border-radius: 6px; padding: 1px 7px; }
.fb-desc { margin-top: 6px; font-size: 13px; color: #475569; line-height: 1.6; word-break: break-word; }
.fb-desc p { margin: 0 0 4px; }
.fb-desc ul, .fb-desc ol { margin: 4px 0 4px 18px; }
.fb-foot { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-votes { font-size: 12px; color: #2563eb; font-weight: 600; }
.fb-cycle { font-size: 12px; color: #64748b; }
.fb-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eef2f7; font-size: 11px; color: #94a3b8; line-height: 1.5; }

/* 关于我们富文本 */
.sb-about { font-size: 14px; line-height: 1.8; color: #334155; }
.sb-about img { max-width: 100%; border-radius: 8px; }
.sb-about a { color: #2563eb; }

/* Toast */
.sb-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: #1f2937;
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.sb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sb-toast.ok { background: #16a34a; }

/* ================= 右下角固定悬浮：客服 / 反馈 / 关于 / 分享 / 返回顶部 ================= */
.corner-actions {
  position: fixed;
  right: 18px !important;
  left: auto !important;
  bottom: 24px !important;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.corner-actions.is-hidden { display: none !important; }
.ca-btn, .ca-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--t-border, #e2e8f0);
  background: var(--t-surface, #fff);
  color: var(--t-muted, #64748b);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -12px rgba(15, 23, 42, 0.3);
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
  font-size: 18px;
  line-height: 1;
}
.ca-btn svg, .ca-close svg { width: 20px; height: 20px; }
.ca-btn i, .ca-close i { font-size: 18px; }
.ca-btn:hover, .ca-close:hover { background: var(--t-primary, #2563eb); border-color: var(--t-primary, #2563eb); color: #fff; transform: translateY(-2px); }
.ca-btn:active, .ca-close:active { transform: translateY(0) scale(.92); transition: transform .08s ease; }
.ca-close { order: -1; margin-bottom: 2px; font-size: 16px; color: #94a3b8; }
.ca-close:hover { color: #fff; }
@media (max-width: 640px) {
  .corner-actions { right: 12px !important; bottom: 18px !important; gap: 8px; }
  .ca-btn, .ca-close { width: 40px; height: 40px; border-radius: 12px; }
}

/* 后台登录页图形验证码：让注入的 SVG 自适应填满容器，避免被固定高度裁切 */
#captcha-img { line-height: 0; }
#captcha-img svg { height: 100%; width: auto; display: block; }

/* ============================================================
   前台左侧内容侧边栏（旧版已下线）
   - renderAppSidebar()/buildAppSidebar() 已移除，相关 DOM 与 JS 不再创建。
   - 保留此注释作为占位，避免后续误加回同位置浮动按钮。
   ============================================================ */

/* ============================================================
   主页：工具按分类分组卡片网格
   ============================================================ */
.cat-block { margin-bottom: 2.5rem; scroll-margin-top: 5rem; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.cat-title { font-size: 1.25rem; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: .5rem; }
.cat-ico { font-size: 1.4rem; }
.cat-more { font-size: .8rem; color: var(--primary-color); text-decoration: none; white-space: nowrap; }
.cat-more:hover { text-decoration: underline; }

.tool-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tool-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.home-tool-card {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 1rem 1.1rem; min-height: 92px;
  text-decoration: none; color: var(--ink-800);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-color); }
.ht-ico { font-size: 1.5rem; line-height: 1; }
.ht-name { font-weight: 600; font-size: .95rem; color: var(--ink-900); }
.ht-desc { font-size: .78rem; color: var(--ink-500); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   后台：顶部标签页改为左侧垂直悬浮侧边栏
   ============================================================ */
.admin-shell { display: flex; align-items: stretch; min-height: calc(100vh - 4rem); }
/* 桌面端：左侧固定（sticky）垂直侧边栏，滚动时常驻且不遮挡主内容 */
.admin-sidebar {
  position: sticky; top: 4rem; align-self: flex-start;
  flex: 0 0 224px; width: 224px;
  height: calc(100vh - 4rem); overflow-y: auto; overflow-x: hidden;
  background: var(--surface); border-right: 1px solid var(--line-strong);
  padding: .75rem .6rem; display: flex; flex-direction: column; gap: .25rem;
  z-index: 40;
  transition: flex-basis .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1);
}
.nav-head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .5rem .65rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line-strong); }
.nav-title { font-weight: 700; font-size: .82rem; color: #0f172a; white-space: nowrap; }
.nav-toggle { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: #475569; cursor: pointer; font-size: .9rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.nav-toggle:hover { background: rgba(120,130,160,.14); color: #1f2937; }
.admin-content { flex: 1 1 auto; min-width: 0; padding: 1.5rem; max-width: 1180px; margin: 0 auto; }

/* 导航项：垂直排列，图标 + 文字对齐 */
.admin-sidebar .tab {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  border: none; background: transparent; border-radius: 10px; cursor: pointer; user-select: none;
  padding: .6rem .7rem; white-space: nowrap; overflow: hidden; color: #334155;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.admin-sidebar .tab .tab-ico { flex: 0 0 auto; width: 1.3rem; text-align: center; font-size: 1.1rem; line-height: 1; }
.admin-sidebar .tab .tab-label { transition: opacity .18s ease; }
.admin-sidebar .tab:hover { background: rgba(120,130,160,.12); }
.admin-sidebar .tab.tab-active { background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.admin-sidebar .tab.tab-active:hover { background: var(--primary-color); }
.admin-sidebar .tab.tab-over { box-shadow: inset 0 3px 0 -1px var(--primary-color); }
.admin-sidebar .tab.tab-dragging { opacity: .4; }
.admin-sidebar .tab:active { cursor: grabbing; }

/* 桌面端折叠：仅显示图标（宽度收敛 + 平滑过渡） */
.admin-sidebar.collapsed { flex-basis: 60px; width: 60px; padding: .6rem .35rem; }
.admin-sidebar.collapsed .nav-head { justify-content: center; border-bottom: none; padding-bottom: .2rem; }
.admin-sidebar.collapsed .nav-title { display: none; }
.admin-sidebar.collapsed .tab { justify-content: center; padding: .65rem 0; gap: 0; }
.admin-sidebar.collapsed .tab .tab-label { opacity: 0; width: 0; overflow: hidden; }

/* 移动端汉堡按钮 + 遮罩（桌面端默认隐藏） */
.nav-hamburger { display: none; }
#nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 55; }

/* 客服卡片拖拽（与导航无关，保留） */
.cs-card { position: relative; transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.cs-card.cs-dragging { opacity: .42; box-shadow: 0 12px 26px rgba(20,30,60,.20); }
.cs-grip { position: absolute; top: 0; left: 0; bottom: 0; width: 16px; display: flex; align-items: center; justify-content: center; color: #94a3b8; cursor: grab; border-radius: 1rem 0 0 1rem; background: rgba(148,163,184,.10); transition: background .15s, color .15s; z-index: 5; }
.cs-grip:hover { background: rgba(148,163,184,.28); color: #475569; }
.cs-grip:active { cursor: grabbing; }
.cs-placeholder { height: 80px; border: 2px dashed var(--primary-color); border-radius: 1rem; background: rgba(37,99,235,.07); }

/* 移动端：侧边栏变为抽屉式（默认隐藏，汉堡切换滑出，遮罩点击关闭） */
@media (max-width: 768px) {
  .admin-shell { display: block; min-height: auto; }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 240px; max-width: 80vw; height: 100vh; max-height: 100vh;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
    border-right: 1px solid var(--line-strong); border-radius: 0; margin: 0; padding: .9rem .7rem;
    box-shadow: 0 10px 30px rgba(15,23,42,.25); z-index: 60;
  }
  body.nav-open .admin-sidebar { transform: translateX(0); }
  body.nav-open #nav-backdrop { display: block; }
  body.nav-open { overflow: hidden; }
  /* 移动端抽屉忽略桌面端折叠状态，始终显示图标 + 文字 */
  .admin-sidebar.collapsed { flex-basis: 240px; width: 240px; padding: .9rem .7rem; }
  .admin-sidebar.collapsed .nav-head { justify-content: space-between; border-bottom: 1px solid var(--line-strong); padding-bottom: .65rem; }
  .admin-sidebar.collapsed .nav-title { display: block; }
  .admin-sidebar.collapsed .tab { justify-content: flex-start; padding: .6rem .7rem; gap: .6rem; }
  .admin-sidebar.collapsed .tab .tab-label { opacity: 1; width: auto; overflow: visible; }
  .nav-head { display: flex; }
  .nav-toggle { display: none; }
  .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .6rem; border: 1px solid var(--line-strong); background: #fff; color: #475569; cursor: pointer; font-size: 1.15rem; line-height: 1; }
  .nav-hamburger:hover { background: rgba(120,130,160,.12); }
  .admin-content { padding: 1rem; margin: 0; max-width: none; }
}

/* ============================================================
   新版首页（主题感知：跟随 html[data-theme] 的 --t-* 令牌）
   ② 标题+简介+搜索 / ③ 核心工具大图标 / ④ 左右双栏 / ⑤ 全部工具分组网格
   ============================================================ */
.home-page { background: var(--t-bg, #f6f8fb); color: var(--t-text, #1e293b); transition: background-color .25s ease, color .25s ease; }
.home-wrap { max-width: 84rem; margin: 0 auto; padding: 0 1rem; }

/* 通用主题化卡片（大圆角 + 柔和浅阴影 + 充足留白） */
.h-card {
  background: var(--t-surface, #fff);
  border: 1px solid var(--t-border, #e2e8f0);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .25s ease;
}
.h-card-pad { padding: 1.1rem 1.2rem; }
.h-card-title { display: flex; align-items: center; gap: .45rem; font-size: .95rem; font-weight: 700; color: var(--t-text, #0f172a); margin-bottom: .8rem; }
.h-card-title .hc-ico { font-size: 1.05rem; line-height: 1; }
.h-card-title .hc-more { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--t-primary, #2563eb); text-decoration: none; padding: .2rem .55rem; border-radius: 8px; transition: color .15s ease, background-color .15s ease; }
.h-card-title .hc-more:hover { color: #1d4ed8; background: var(--t-primary-soft, rgba(37,99,235,.08)); }

/* ---------- ② 标题 + 简介 + 搜索栏（引擎切换收纳在下拉） ---------- */
.home-hero { padding: 2.8rem 1rem 0; max-width: 46rem; margin: 0 auto; text-align: center; }
.hs-title { font-size: 2.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--t-text, #0f172a); }
.hs-sub { font-size: .88rem; color: var(--t-muted, #64748b); margin-top: .5rem; }
.hs-slogan { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: .7rem 0 1.3rem; }
.hsl-item {
  font-size: .74rem; font-weight: 600; color: var(--t-primary, #2563eb);
  background: var(--t-primary-soft, rgba(37,99,235,.08));
  padding: .22rem .7rem; border-radius: 999px; letter-spacing: .01em;
}
.hs-box {
  display: flex; align-items: center; gap: 0;
  background: var(--t-surface, #fff); border: 1.5px solid var(--t-border, #e2e8f0);
  border-radius: 999px; box-shadow: var(--t-shadow, var(--shadow-md));
  transition: border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
.hs-box:focus-within { border-color: var(--t-primary, #2563eb); box-shadow: 0 0 0 4px var(--t-primary-soft, rgba(37,99,235,.1)); }
.hs-box input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  padding: .95rem 1rem .95rem .6rem; font-size: .95rem; color: var(--t-text, #1e293b);
}
.hs-box input::placeholder { color: var(--t-muted, #94a3b8); }
.hs-box > button#hs-btn {
  flex: 0 0 auto; border: 0; cursor: pointer; margin: .3rem .3rem .3rem 0;
  background: var(--t-primary, #2563eb); color: #fff; font-weight: 700; font-size: .88rem;
  padding: .62rem 1.5rem; border-radius: 999px; transition: filter .15s ease, transform .15s ease;
}
.hs-box > button#hs-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* 搜索引擎下拉（默认站内搜索，全网引擎收纳于菜单内） */
.hs-eng-dd { position: relative; flex: 0 0 auto; }
.hs-eng-cur {
  display: inline-flex; align-items: center; gap: .28rem; cursor: pointer;
  border: 0; background: transparent; color: var(--t-muted, #64748b);
  font-size: .84rem; font-weight: 600; padding: .95rem .5rem .95rem 1.2rem;
  border-radius: 999px 0 0 999px; white-space: nowrap; transition: color .15s ease;
}
.hs-eng-cur:hover { color: var(--t-primary, #2563eb); }
.hs-eng-caret { font-size: .68rem; opacity: .7; }
.hs-eng-menu {
  position: absolute; left: .6rem; top: calc(100% + 8px); z-index: 60; min-width: 180px;
  background: var(--t-surface, #fff); border: 1px solid var(--t-border, #e2e8f0);
  border-radius: var(--radius-md); box-shadow: var(--t-shadow, var(--shadow-lg));
  padding: .35rem; display: flex; flex-direction: column; text-align: left;
}
.hs-eng-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: .84rem; color: var(--t-text, #334155); font-weight: 500;
  padding: .55rem .7rem; border-radius: 9px; transition: background .13s ease, color .13s ease;
}
.hs-eng-opt:hover { background: var(--t-primary-soft, rgba(37,99,235,.08)); color: var(--t-primary, #2563eb); }
.hs-eng-opt.is-active { color: var(--t-primary, #2563eb); font-weight: 700; }
.hs-eng-check { font-size: .78rem; }

/* ---------- ③ 核心常用工具直达（视觉重心：大图标卡片区） ---------- */
.core-sec { margin-top: 1.6rem; }
.core-hero-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .core-hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .core-hero-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.core-hero-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.3rem .5rem 1.1rem; border-radius: var(--card-radius);
  background: var(--t-chip, #f1f5f9); border: 1px solid transparent;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.core-hero-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--cat-c, var(--t-primary, #2563eb));
  background: linear-gradient(180deg, var(--t-surface, #fff), var(--t-primary-soft, rgba(37,99,235,.06)));
}
.core-hero-item .chi-ico { font-size: 2rem; line-height: 1; }
.core-hero-item .chi-name { font-size: .82rem; font-weight: 600; color: var(--t-text, #334155); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.core-hero-item .ni-badge { position: absolute; top: .5rem; right: .5rem; margin-left: 0; }
/* 核心大卡片的收藏星标置于左上，避免与右上角 NEW 标签重叠 */
.core-hero-item .ht2-fav { top: .4rem; left: .45rem; right: auto; }

/* ---------- ④ 主体左右双栏（左：热门+公告 / 右：最新上线+我的收藏） ---------- */
.home-duo { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .home-duo { grid-template-columns: minmax(0, 1fr) 320px; } }
.duo-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* 热门工具（按访问量动态排序） */
.hc-tip-txt { font-size: .68rem; font-weight: 500; color: var(--t-muted, #94a3b8); margin-left: .1rem; }
.hot-list { display: flex; flex-direction: column; gap: .25rem; }
.hot-item {
  position: relative;
  display: flex; align-items: center; gap: .55rem; padding: .5rem .55rem; padding-right: 1.7rem; border-radius: var(--card-radius-sm);
  text-decoration: none; color: var(--t-text, #334155); font-size: .85rem; font-weight: 500;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.hot-item:hover { background: var(--t-primary-soft, rgba(37,99,235,.08)); color: var(--t-primary, #2563eb); transform: translateY(-2px); }
/* 热门列表收藏星标置于右上角（行内已预留右侧空间，避免与访问量数字重叠） */
.hot-item .ht2-fav { top: .25rem; right: .3rem; }
.hot-item .hi-ico { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.hot-item .hi-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hot-item .hi-rank {
  flex: 0 0 auto; min-width: 1.4rem; height: 1.4rem; padding: 0 .15rem; display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: var(--t-muted, #64748b);
  background: var(--t-chip, #f1f5f9); border-radius: 7px;
}
.hot-item .hi-rank.r1 { color: #b45309; }
.hot-item .hi-rank.r2 { color: #475569; }
.hot-item .hi-rank.r3 { color: #c2410c; }
.hot-item .hi-visits { margin-left: auto; flex: 0 0 auto; font-size: .66rem; color: var(--t-muted, #94a3b8); }

/* 公告列表 */
.home-notice-list { display: flex; flex-direction: column; gap: .55rem; }
.hn-item { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; color: var(--t-muted, #64748b); text-decoration: none; line-height: 1.55; }
.hn-item .hn-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--t-primary, #2563eb); position: relative; top: -2px; }
.hn-item .hn-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.hn-item:hover .hn-text { color: var(--t-primary, #2563eb); text-decoration: underline; }
.hn-empty { font-size: .8rem; color: var(--t-muted, #94a3b8); text-align: center; padding: .4rem 0; }

/* 最新上线（NEW 标签仅上线 7 天内展示） */
.new-list { display: flex; flex-direction: column; gap: .25rem; }
.new-item {
  position: relative;
  display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; padding-right: 1.7rem; border-radius: var(--card-radius-sm);
  text-decoration: none; color: var(--t-text, #334155); font-size: .83rem;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.new-item:hover { background: var(--t-primary-soft, rgba(37,99,235,.08)); color: var(--t-primary, #2563eb); transform: translateY(-2px); }
/* 最新上线列表收藏星标置于右上角（行内已预留右侧空间，避免与 NEW 标签重叠） */
.new-item .ht2-fav { top: .2rem; right: .3rem; }
.new-item .hi-ico { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.new-item .hi-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.new-item .ni-badge { margin-left: auto; }
.ni-badge {
  flex: 0 0 auto; font-size: .62rem; font-weight: 700; color: #fff;
  background: #ef4444; border-radius: 999px; padding: .1rem .42rem; letter-spacing: .02em; line-height: 1.4;
}

/* 我的收藏工具（登录可见） */
.fav-list { display: flex; flex-direction: column; gap: .25rem; }
.fav-item { display: flex; align-items: center; gap: .3rem; }
.fav-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem; border-radius: 10px; text-decoration: none;
  color: var(--t-text, #334155); font-size: .83rem;
  transition: background .15s ease, color .15s ease;
}
.fav-link:hover { background: var(--t-primary-soft, rgba(37,99,235,.08)); color: var(--t-primary, #2563eb); transform: translateY(-2px); }
.fav-link .hi-ico { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.fav-link .hi-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fav-del {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--t-muted, #cbd5e1); font-size: .72rem; padding: .3rem; border-radius: 8px;
  transition: color .13s ease, background .13s ease;
}
.fav-del:hover { color: #ef4444; background: rgba(239,68,68,.08); }

/* ---------- ⑤ 全部工具（分类分组 + 分类辅助色，无第三层导航） ---------- */
.ht-all-head { display: flex; align-items: baseline; gap: .6rem; margin-top: 2.2rem; }
.ht-all-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--t-text, #0f172a); }
.ht-all-count { font-size: .76rem; color: var(--t-muted, #94a3b8); }
.ht-group { margin-top: 1.3rem; }
.ht-group-head { display: flex; align-items: center; gap: .5rem; }
.ht-group-head .hg-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cat-c, #2563eb); flex: 0 0 auto; }
.ht-group-head .hg-name { font-size: .92rem; font-weight: 700; color: var(--t-text, #1e293b); }
.ht-group-head .hg-count {
  font-size: .68rem; font-weight: 600; color: var(--t-muted, #94a3b8);
  background: var(--t-chip, #f1f5f9); border-radius: 999px; padding: .06rem .5rem;
}
/* 站内搜索结果条 */
.ht-search-bar {
  display: flex; align-items: center; gap: .7rem; margin-top: 1rem;
  font-size: .84rem; color: var(--t-muted, #64748b);
  background: var(--t-primary-soft, rgba(37,99,235,.06));
  border-radius: var(--radius-sm); padding: .55rem .9rem;
}
.ht-search-clear {
  border: 0; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 600;
  color: var(--t-primary, #2563eb); padding: .1rem .3rem;
}
.ht-search-clear:hover { text-decoration: underline; }

/* 工具卡片网格（主题化 + hover 上浮 + 底色渐变 + 分类色标） */
.home-tools-grid { display: grid; gap: 1rem; margin-top: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .home-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .home-tools-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ht2-card {
  position: relative; display: flex; flex-direction: column; gap: .38rem;
  background: var(--t-surface, #fff); border: 1px solid var(--t-border, #e2e8f0);
  border-radius: var(--card-radius); padding: 1rem 1.1rem; min-height: 96px;
  border-top: 3px solid var(--cat-c, var(--t-border, #e2e8f0));
  box-shadow: var(--card-shadow);
  text-decoration: none; color: var(--t-text, #1e293b);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .25s ease;
}
.ht2-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--cat-c, var(--t-primary, #2563eb));
  border-top-color: var(--cat-c, var(--t-primary, #2563eb));
  background: linear-gradient(180deg, var(--t-surface, #fff) 55%, var(--t-primary-soft, rgba(37,99,235,.06)));
}
.ht2-ico { font-size: 1.5rem; line-height: 1; }
.ht2-name { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .95rem; color: var(--t-text, #0f172a); }
.ht2-desc { font-size: .78rem; color: var(--t-muted, #64748b); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-tools-empty { grid-column: 1 / -1; text-align: center; color: var(--t-muted, #94a3b8); font-size: .85rem; padding: 2.5rem 0; }
/* 卡片右上角收藏星标（登录后展示） */
.ht2-fav {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  border: 0; background: transparent; cursor: pointer;
  font-size: .95rem; line-height: 1; color: var(--t-muted, #cbd5e1);
  padding: .2rem .25rem; border-radius: 8px;
  transition: color .13s ease, transform .13s ease;
}
.ht2-fav:hover { color: #f59e0b; background: rgba(245,158,11,.12); transform: scale(1.15); }
.ht2-fav.is-on { color: #f59e0b; }

/* ---------- 悬浮用途提示（tooltip：工具名称/图标 hover 弹出） ---------- */
.tp { position: relative; }
.tp::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  z-index: 90; max-width: 240px; width: max-content;
  background: rgba(15, 23, 42, .92); color: #fff;
  font-size: .72rem; line-height: 1.5; font-weight: 400; text-align: left;
  padding: .45rem .65rem; border-radius: 8px; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease .25s, transform .15s ease .25s, visibility 0s linear .4s;
}
.tp:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: .35s; }
.tp[data-tip='']::after { display: none; }
@media (hover: none) { .tp::after { display: none; } } /* 触屏设备不展示 hover 提示 */

/* ---------- 底部黑色页脚（三链接 + Ctrl+D 收藏提示 + 宣传语） ---------- */
.site-footer { background: #111827; color: #9ca3af; margin-top: 4rem; }
.site-footer-inner { max-width: 84rem; margin: 0 auto; padding: 2.2rem 1rem 2.4rem; text-align: center; }
.ft-links { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 1rem; }
.ft-link {
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  color: #d1d5db; font-size: .86rem; font-weight: 500; padding: .15rem .2rem;
  transition: color .15s ease;
}
.ft-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-sep { color: #374151; font-size: .8rem; }
.ft-friend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin: 0 0 1rem; font-size: .8rem; color: #6b7280; }
.ft-friend-label { color: #6b7280; font-weight: 500; }
.ft-friend-link { color: #9ca3af; text-decoration: none; transition: color .15s ease; font-size: .8rem; }
.ft-friend-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-fav-tip { font-size: .78rem; color: #9ca3af; margin-bottom: .55rem; }
.ft-fav-tip kbd {
  display: inline-block; background: #1f2937; border: 1px solid #374151; border-bottom-width: 2px;
  color: #e5e7eb; font-size: .7rem; font-family: inherit; border-radius: 5px; padding: .05rem .4rem; margin: 0 .08rem;
}
.ft-slogan { font-size: .78rem; color: #6b7280; margin-bottom: .55rem; }
.ft-copy { font-size: .75rem; color: #4b5563; }
.ft-icp { font-size: .75rem; color: #9ca3af; margin-top: .45rem; }
.ft-icp-link { color: #9ca3af; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.ft-icp-link:hover { color: #cbd5e1; border-bottom-color: #cbd5e1; }
/* 联系邮箱（前台页脚友情链接后展示，样式与友情链接区域保持一致） */
.ft-email { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin: 0 0 1rem; font-size: .8rem; color: #6b7280; }
.ft-email-label { color: #6b7280; font-weight: 500; }
.ft-email-link { color: #9ca3af; text-decoration: none; transition: color .15s ease; font-size: .8rem; }
.ft-email-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* 公安备案号（前台页脚展示，样式与 ICP 备案号保持一致） */
.ft-ps-filing { font-size: .75rem; color: #9ca3af; margin-top: .45rem; }
.ft-ps-filing-link { color: #9ca3af; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.ft-ps-filing-link:hover { color: #cbd5e1; border-bottom-color: #cbd5e1; }
@media (max-width: 640px) {
  .ft-links { flex-wrap: wrap; gap: .6rem; }
}

/* 顶部导航自定义 Logo 图片 */
.site-brand-img { height: 30px; width: auto; border-radius: 8px; object-fit: contain; flex: 0 0 auto; }
.app-sb-brand .logo-img { height: 26px; width: auto; border-radius: 7px; object-fit: contain; flex: 0 0 auto; }

/* ============================================================
   公共广告位容器（A/B/C/D 四位置通用）
   - 普通文档流块级元素，绝不浮层，不遮挡任何操作区
   - 无启用广告时 JS 直接移除节点（不靠 CSS 隐藏，彻底无占位）
   ============================================================ */
.ad-slot { display: block; margin: 1.25rem 0 0; }
/* 合规：广告位醒目「广告」标识，独立于广告代码，确保用户可清晰辨识 */
.ad-slot-label { display: block; width: fit-content; font-size: 12px; line-height: 1; color: #4b5563; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 8px; margin: 0 0 .5rem; letter-spacing: .05em; user-select: none; }
.ad-slot-inner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;             /* 不设底色：广告开/关均不产生突兀色块，深浅主题皆协调 */
  line-height: 0;                       /* 消除图片底部空隙 */
}
.ad-slot-inner > * { line-height: normal; }
.ad-slot-inner img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-md); }
.ad-slot-inner a { text-decoration: none; }
/* 右侧边栏广告位（B）宽度受限，保持紧凑 */
.duo-side .ad-slot { margin-top: 0; }