/*******************************************************************************
 * File Name          : xh221c-webhid.css
 * Description        : XH221C WebHID 固件升级器界面样式（深色工程师风格）
 *                      本文件由 webhid/index.html 的 <style> 作用域化而来——所有
 *                      选择器前缀 .xh-tool，确保深色主题与变量不会泄漏到站点的
 *                      浅色主题，也不会与站点 Tailwind / 组件类（.btn/.card/.wrap
 *                      等）冲突。若上游 index.html 的 <style> 更新，请按第 5 节
 *                      规则重新前缀化同步本文件。
 *******************************************************************************/

/* :root 变量 + body 基础样式合并进 .xh-tool（不碰全局 html/body） */
.xh-tool {
  --bg:     #0f1420;
  --card:   #1a2233;
  --fg:     #e6edf6;
  --muted:  #8aa0b8;
  --accent: #3da9fc;
  --ok:     #2ecc71;
  --err:    #ff6b6b;

  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 深色工具面板压住站点浅色底，四角圆整像一块嵌入的控制台 */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.xh-tool * { box-sizing: border-box; }

.xh-tool .wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.xh-tool h1 {
  font-size: 22px;
  margin: 0 0 4px;
  font-weight: 700;
}

.xh-tool .sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.xh-tool .card {
  background: var(--card);
  border: 1px solid #243049;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.xh-tool .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.xh-tool button {
  background: var(--accent);
  color: #04121f;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.xh-tool button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.xh-tool button.ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid #34425e;
}

.xh-tool input[type=file] {
  color: var(--muted);
  font-size: 13px;
}

.xh-tool .info {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

.xh-tool .info strong { color: var(--fg); }

.xh-tool .info code {
  background: #0b0f18;
  border: 1px solid #1e2a3f;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

.xh-tool .kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 13px;
}

.xh-tool .kv b {
  color: var(--muted);
  font-weight: 500;
}

.xh-tool .bar {
  height: 10px;
  background: #0c1a2e;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}

.xh-tool .bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3da9fc, #2ecc71);
  transition: width .15s;
}

.xh-tool pre {
  background: #0b0f18;
  border: 1px solid #1e2a3f;
  border-radius: 8px;
  padding: 12px;
  height: 220px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  color: #b9c7da;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.xh-tool .tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #22304a;
  color: var(--muted);
}

.xh-tool .tag.ok  { background: #143524; color: var(--ok); }
.xh-tool .tag.err { background: #3a1620; color: var(--err); }

.xh-tool a { color: var(--accent); }