/*!
 * theme.css — 新站页面美化覆盖层（基于甲方设计变量，不改布局与配色）
 * ---------------------------------------------------------------------------------------------
 * 原则:
 *   ① 只做「中文排版 + 交互细节」增强, 不动甲方布局/结构/配色（保持 1:1 观感）
 *   ② 全部通过 CSS 变量与低特异性选择器实现 → 出问题删掉本文件即可完全回滚
 *   ③ 目标: 中文不再"挤"、按钮/卡片手感统一、无障碍焦点可见、移动端触摸目标够大
 * 许可: MIT
 */

/* ── 中文字体栈（甲方原字体栈面向英文, 中文会落到难看的默认字体）── */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* 中文比英文更需要行高与字距 */
  --cn-line-height: 1.7;
  --cn-letter-spacing: .01em;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui) !important;
  line-height: var(--cn-line-height);
  letter-spacing: var(--cn-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题: 中文标题收紧字距会更精神 */
h1, h2, h3, h4, h5, h6 { letter-spacing: -.005em; line-height: 1.35; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }

/* 表单控件继承字体（否则按钮/输入框会退回系统默认, 与页面不统一） */
button, input, select, textarea, optgroup { font-family: inherit; }
button { letter-spacing: .02em; }

/* ── 交互细节 ── */
a, button, [role="button"], .btn, .tab-btn, .filter-btn, .status-pill, .tool-card {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease;
}

/* 按下反馈: 甲方只有 hover, 加一点"按下去"的手感 */
.btn:active, button:active, .tab-btn:active, .filter-btn:active, .tool-card:active { transform: translateY(1px) scale(.995); }

/* 键盘焦点必须可见（可访问性） */
:focus-visible {
  outline: 2px solid var(--accent, #e85d75);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}

/* 卡片 hover: 阴影过渡更柔和 */
.tool-card:hover, .item-modal:hover { box-shadow: 0 8px 24px var(--shadow-hover, rgba(45,42,38,.15)); }

/* 连接状态圆点: 轻微脉冲, 让"已连接/未连接"一眼可辨 */
.status-pill .dot { box-shadow: 0 0 0 0 rgba(77, 182, 172, .55); animation: cn-dot-pulse 2.4s ease-out infinite; }
@keyframes cn-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(77, 182, 172, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(77, 182, 172, 0); }
  100% { box-shadow: 0 0 0 0 rgba(77, 182, 172, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .status-pill .dot { animation: none; }
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 表格/代码/数字用等宽更整齐 */
code, pre, kbd, samp, .mono { font-family: var(--font-mono); }

/* ── 滚动条（桌面）── */
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(138, 132, 123, .35); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(138, 132, 123, .55); background-clip: content-box; }
}

/* ── 移动端: 触摸目标 ≥44px（甲方部分小按钮偏小）── */
@media (max-width: 640px) {
  .tab-btn, .filter-btn, .btn, button { min-height: 44px; }
  .nav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .container { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
  h1 { font-size: clamp(1.35rem, 5.2vw, 1.9rem); }
}

/* ── 数字/单位与英文型号保持不换行, 避免中文行内被拆断 ── */
code, .mono, .status-pill, .badge { word-break: keep-all; }