/* =============================================================
   common.css —— 全站统一设计系统（两个页面共用，改一处全站生效）
   -------------------------------------------------------------
   覆盖：设计变量 / 基础排版 / 头部 / 卡片 / 按钮（含多色变体）
        / 键帽(.kc) / 页签(.tab) / 多媒体标签 / 标签切换 / chip / pill
   页面内 <style> 只保留「页面独有布局」（如 .toprow、.nowkey 等）。

   按钮规范（统一一种形状/圆角，默认浅色毛玻璃，点按渐变高亮）：
     - 默认：浅色毛玻璃（rgba 白底 + backdrop-blur），细边框
     - hover：该色加深 + 边框高亮（无位移，不抖）
     - active：实心渐变高亮 + 投影
     - 颜色变体：.btn-blue / .btn-green / .btn-amber / .btn-red / .btn-violet
       （也可简写 .primary=蓝、.btn-danger=红，向后兼容）
   ============================================================= */
:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e3e6ea; --txt:#1f2329; --sub:#6b7280;
  --brand:#2f6fed; --brand2:#1f4fb0; --kbd:#fff; --kbd-bd:#cdd2d8;
  /* 按钮多色变体（默认淡色毛玻璃，hover/active 渐变高亮） */
  --c-blue:#2f6fed;  --c-blue2:#1f4fb0;
  --c-green:#16a34a; --c-green2:#15803d;
  --c-amber:#d97706; --c-amber2:#b45309;
  --c-red:#dc2626;   --c-red2:#b91c1c;
  --c-violet:#7c3aed;--c-violet2:#6d28d9;
  --glass:rgba(255,255,255,.72);          /* 毛玻璃默认底色（浅色） */
  --radius:9px;
  --btn-pad:7px 14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);font-size:13.5px;line-height:1.45}
/* 头部（logo / 标题 / 资源中心按钮 / 官方商城）与面包屑、左侧目录、页底 SEO
   已统一移交 /resources/tool-template.css + tool-template.js 注入，此处不再定义。 */

/* 工具内容外层。
   ⚠ 故意**不叫 .wrap**：全站 .wrap 有两套同名定义 ——
   global.css 的 `.wrap{width:100%;max-width:var(--max-w);padding-inline:28px}`（管页头/页面骨架）
   与本文件第 33 行的 `.wrap{width:fit-content;...}`（管工具内容），本就互相打架。
   之前给本页写 `.wrap{width:100%}` 溢出到页头，把 header 的 max-width:1200px 冲成 100%，
   导致 logo 与导航换行（页头 64px → 144px）。故独立命名，两不干扰。 */
.tool-wrap{width:100%;max-width:100%;margin:0;padding:12px 14px 32px;display:flex;flex-direction:column;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.card h2{margin:0 0 8px;font-size:12.5px;color:var(--brand2);border-left:3px solid var(--brand);padding-left:7px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
label{font-size:11.5px;color:var(--sub);display:inline-flex;flex-direction:column;gap:2px}
input,select,button,textarea{font:inherit}
input[type=text],input[type=number],select{padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt);min-width:86px}
input.hex{font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}

/* ============ 统一按钮：一种形状/圆角；默认浅色毛玻璃；hover/active 渐变高亮 ============ */
button{
  cursor:pointer; font:inherit; font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:var(--btn-pad); border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--glass);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--txt);
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:.18s ease;
}
button:hover{ border-color:var(--brand); background:rgba(238,243,255,.85); color:var(--brand2); }
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; background:var(--glass); transform:none; color:var(--sub); }
button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* 颜色变体：默认即带该色淡色毛玻璃；hover 加深；active 实心渐变高亮 */
.btn-blue,  .btn-green,  .btn-amber,  .btn-red,  .btn-violet,
button.primary, .btn-danger{
  color:var(--bc, var(--brand));
  border-color:color-mix(in srgb, var(--bc, var(--brand)) 42%, var(--line));
  background:color-mix(in srgb, var(--bc, var(--brand)) 8%, var(--glass));
}
.btn-blue  {--bc:var(--c-blue);  --bc2:var(--c-blue2);}
.btn-green {--bc:var(--c-green); --bc2:var(--c-green2);}
.btn-amber {--bc:var(--c-amber); --bc2:var(--c-amber2);}
.btn-red   {--bc:var(--c-red);   --bc2:var(--c-red2);}
.btn-violet{--bc:var(--c-violet);--bc2:var(--c-violet2);}
button.primary{--bc:var(--c-blue);  --bc2:var(--c-blue2);}
.btn-danger  {--bc:var(--c-red);   --bc2:var(--c-red2);}

.btn-blue:hover,  .btn-green:hover,  .btn-amber:hover,  .btn-red:hover,  .btn-violet:hover,
button.primary:hover, .btn-danger:hover{
  border-color:var(--bc); color:var(--bc2);
  background:linear-gradient(180deg, color-mix(in srgb,var(--bc) 16%, #fff), color-mix(in srgb,var(--bc) 7%, #fff));
}
.btn-blue:active,  .btn-green:active,  .btn-amber:active,  .btn-red:active,  .btn-violet:active,
button.primary:active, .btn-danger:active,
.btn-blue:focus-visible, .btn-green:focus-visible, .btn-amber:focus-visible, .btn-red:focus-visible, .btn-violet:focus-visible{
  color:#fff; border-color:var(--bc2);
  background:linear-gradient(180deg, var(--bc), var(--bc2));
  box-shadow:0 3px 10px color-mix(in srgb, var(--bc) 35%, transparent);
}
.btn-blue:disabled, .btn-green:disabled, .btn-amber:disabled, .btn-red:disabled, .btn-violet:disabled,
button.primary:disabled, .btn-danger:disabled{ color:var(--sub); border-color:var(--line); background:var(--glass); }

/* ============ 顶部页间导航（链接/当前页当作按钮，统一毛玻璃外观） ============ */
.topnav{padding:0}
.topnav .pagenav{display:grid;gap:10px}
.topnav .pagenav a,.topnav .pagenav span{display:flex;align-items:center;justify-content:center;
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font-size:13.5px;font-weight:600;text-decoration:none;color:var(--sub);white-space:nowrap;
  transition:.15s;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.topnav .pagenav a:hover{border-color:var(--brand);color:var(--brand);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 14%,#fff),color-mix(in srgb,var(--brand) 6%,#fff))}
.topnav .pagenav .current{background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;border-color:var(--brand2);
  box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent)}

/* ============ 通用标签：pill / chip ============ */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;background:#f1f3f5;color:var(--sub);border:1px solid var(--line)}
.pill.ok{background:#e7f6ee;color:#177a48;border-color:#bfe6d0}
.chip{padding:2px 10px;border-radius:99px;font-size:11.5px;background:var(--brand);color:#fff}
.chip .ch{margin-left:5px;opacity:.8;font-family:ui-monospace,Consolas,monospace}

/* ============ 开关/切换：显示 HID 键码 + OS 切换（毛玻璃圆角，与全站按钮同一形状） ============ */
.codeswitch{display:inline-flex;flex-direction:row;align-items:center;gap:5px;margin-left:auto;padding:var(--btn-pad);border:1px solid var(--line);border-radius:var(--radius);font-size:13px;line-height:1.3;color:var(--sub);cursor:pointer;user-select:none;white-space:nowrap;
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.codeswitch input{accent-color:var(--brand);cursor:pointer;margin:0}
.osswitch{display:flex;gap:5px;align-items:center;margin:0 0 5px}
.osswitch button{padding:var(--btn-pad);border-radius:var(--radius);font-size:13px;line-height:1.3}
.osswitch button.active{background:linear-gradient(180deg,var(--brand),var(--brand2));border-color:var(--brand2);color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent)}

/* ============ 页签（键盘/鼠标/多媒体/字符串） ============ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:10px}
.tab{padding:6px 13px;cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;color:var(--sub);font-size:12.5px;background:transparent;transition:.15s}
.tab:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 12%,#fff),color-mix(in srgb,var(--brand) 4%,#fff));color:var(--brand2);border-color:var(--line)}
.tabpane{display:none}
.tabpane.active{display:block}

/* ============ 多媒体标签平铺：点标签直接选择（替代下拉框） ============ */
.mediagrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.mediagrid .mediabtn{background:color-mix(in srgb,var(--brand) 6%, var(--glass));border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:7px;padding:9px 6px;
  text-align:center;font-size:12.5px;color:var(--txt);cursor:pointer;transition:.15s ease;user-select:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mediagrid .mediabtn:hover{border-color:var(--brand);color:var(--brand2);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 16%,#fff),color-mix(in srgb,var(--brand) 7%,#fff))}
.mediagrid .mediabtn.active{background:linear-gradient(180deg,var(--brand),var(--brand2));border-color:var(--brand2);color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent)}

/* ============ 可编辑提示 / 日志 / 杂项 ============ */
.hint{font-size:11.5px;color:var(--sub);margin:5px 0}
.warn{color:#b45309;font-size:11.5px;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 9px;margin:6px 0;line-height:1.55}
.log{background:#0f172a;color:#cbd5e1;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;padding:8px 10px;border-radius:8px;height:110px;overflow:auto;white-space:pre-wrap}
.devinfo{font-size:12px;color:var(--sub)}
.chk{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.chk label{display:inline-flex;flex-direction:row;align-items:center;gap:3px;color:var(--txt);font-size:12.5px}
details{margin-top:6px}
summary{cursor:pointer;color:var(--brand2);font-size:12px}
code{background:#eef1f4;padding:1px 5px;border-radius:4px;font-size:11.5px}
.advgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.steprow{display:flex;gap:6px;align-items:center;margin-bottom:5px}
/* 可折叠卡片（高级/调试）：默认收起，summary 沿用卡片标题样式 */
details.card>summary{font-size:12.5px;font-weight:600;color:var(--brand2);border-left:3px solid var(--brand);padding-left:7px;cursor:pointer;list-style:none;user-select:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:"▸ ";color:var(--sub)}
details.card[open]>summary::before{content:"▾ "}

/* ============ 可编程按键卡片（选键） ============ */
.keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;flex:1;grid-auto-rows:1fr}
.keycard{border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer;background:var(--glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.12s ease;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.keycard:hover{border-color:var(--brand);background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 12%,#fff),color-mix(in srgb,var(--brand) 5%,#fff))}
.keycard.active{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 16%,#fff),color-mix(in srgb,var(--brand) 7%,#fff));border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.keycard .kt{font-weight:600;font-size:12.5px}
.keycard .ks{font-size:11px;color:var(--sub);margin-top:1px;min-height:15px;word-break:break-all;line-height:1.3}
.keycard.set .ks{color:#177a48}

/* ============ 真实 104 键布局 + 键帽（键帽采用与按钮同一套毛玻璃/渐变语言） ============
   --kb-u 由页面脚本按容器可用宽度算出并写入（见 kb-common.js 的 KB.calcUnit / KB.availWidth）。
   键帽内的所有尺寸（字号、圆角、间距）一律用 --kb-u 换算，键帽变小则字同比变小，
   不会出现「键帽缩小但字号写死 15.6px 把标签挤爆」。 */
.kbwrap{--kb-u:46px;background:#f7f8fa;border:1px solid var(--line);border-radius:10px;padding:8px;overflow-x:auto}
.kbrow{display:flex;gap:4px;margin-bottom:4px}
.kbrow:last-child{margin-bottom:0}
.kbflex{display:flex;gap:14px;align-items:flex-start}
/* 整盘收缩层（kb-common.js 渲染时创建）：按内容宽度收缩、靠左对齐，不被 .kbwrap 拉满。
   靠左（不用 margin:auto 居中）：键盘是配置对象，左对齐与上方「设备连接 / 按键列表」两栏的
   左边缘对齐，读起来是一条竖线；居中会在宽屏两侧各留一大块空白、割裂版面。
   这层同时保证「山口机电」徽标恒定压在小键盘正上方 —— 徽标用 margin-left:auto 顶到 F 排行末，
   而 F 排在收缩层内必被拉伸到与键盘本体等宽，行末即小键盘右缘，页面再宽也不会偏移。 */
.keyboard{width:max-content;max-width:none;margin:0}
/* 小键盘正上方空白区的品牌 logo：宽=小键盘(4u+间隙)，靠 margin-left:auto 推到 F 排行末（=小键盘右缘）；本身为可点击链接 */
.kbfn-logo{margin-left:auto;display:flex;align-items:center;justify-content:center;
  height:var(--kb-u);width:calc(4*var(--kb-u) + 12px);text-decoration:none;border-radius:calc(var(--kb-u)*0.12);cursor:pointer}
/* 品牌徽标改用纯 CSS 渲染，替代原 skjd.svg。
   数值来自 Figma 设计稿（1400×450 画布）按徽标实际高度(--kb-u)等比换算：
   圆角 50/450≈0.111，字号 283.568/450≈0.63，投影 3.46139/450≈0.0077；
   设计稿的 Inconsolata 为西文字体、无中文字形（原 SVG 文字系转曲），故用系统黑体。 */
.kbfn-logo-badge{display:flex;align-items:center;justify-content:center;height:100%;aspect-ratio:1400/450;
  background:#FFC72C;border:1px solid #000;border-radius:calc(var(--kb-u)*0.111);color:#000;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-weight:700;
  font-size:calc(var(--kb-u)*0.63);line-height:1;
  text-shadow:0 calc(var(--kb-u)*0.0077) calc(var(--kb-u)*0.0077) rgba(0,0,0,.25)}
.kc{height:var(--kb-u);border:1px solid var(--kbd-bd);border-radius:calc(var(--kb-u)*0.12);background:var(--glass);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    cursor:pointer;font-size:calc(var(--kb-u)*0.25);
    display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;flex:0 0 auto;padding:1px 2px;text-align:center;line-height:1.05;transition:.12s ease}
/* 键名/键码字号按 --kb-u 同比缩放（--kb-u=46px 时约 13.8px / 8px），键帽缩到多小字都不会溢出 */
.kc .kclabel{font-size:calc(var(--kb-u)*0.30);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kc .kclabel span{display:block;line-height:1.08}
.kc .kclabel span+span{font-size:0.75em;font-weight:500;opacity:.92}
.kc .kccode{font-size:calc(var(--kb-u)*0.175);line-height:1;font-family:ui-monospace,Consolas,monospace;color:var(--sub);opacity:.75;margin-top:1px}
.kc:hover{border-color:var(--brand);color:var(--brand2);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 16%,#fff),color-mix(in srgb,var(--brand) 7%,#fff));
  box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 22%,transparent)}
.kc.mod{background:linear-gradient(180deg,#fff7e6,#fdf0d0);border-color:#e7d9a8}
.kc.sel,.kc.on,.kc.mod-on{background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;border-color:var(--brand2);
  box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent)}
.kc.sel .kccode,.kc.on .kccode,.kc.mod-on .kccode{color:#fff;opacity:.9}
.kc.ghost{visibility:hidden}
.kc.tall{height:calc(2*var(--kb-u) + 4px)}
.kc.wide2{width:calc(2*var(--kb-u) + 4px)}
.kc.spacer{flex:0 0 auto;width:14px;border:none;background:transparent}
.kgrid3{display:grid;grid-template-columns:repeat(3,var(--kb-u));gap:4px}
.kgrid4{display:grid;grid-template-columns:repeat(4,var(--kb-u));gap:4px}
.kgrid4 .kc.tall{grid-row:span 2}
.kgrid4 .kc.wide2{grid-column:span 2}
/* 小键盘标签单行简写（如 NumEnter 较长），略缩字号避免被键帽截断，同时与数字键保持同一行样式 */
.kgrid4 .kc .kclabel{font-size:calc(var(--kb-u)*0.24)}

/* ============ 响应式 / 无障碍 ============ */
@media (max-width:1080px){.advgrid{grid-template-columns:1fr}}
@media (max-width:760px){.topnav .pagenav{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}