/* panel.css —— 纸箱抗压试验机 · HKCMC SMART T7 触摸屏控制器面板
 *
 * 对照真机照片（测试方案页 / 持压子页 / 曲线页 / 结果页）逐项复刻：
 *   浅蓝 · 浅黄 · 蓝 · 绿四个读数框、深蓝坐标纸、红色停止键、
 *   蓝色功能键区（6 颗大键）+ 数字键盘 / 测试结果两种下部键区。
 * 只作用于 .hkcp 内部，不污染宿主页面；无外部字体 / 图片依赖，离线可用。
 */

.hkcp{
  --hkcp-ink:#123c58;
  --hkcp-mono:ui-monospace, "Consolas", "Courier New", monospace;
  --hkcp-cn:"SimSun", "宋体", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --hkcp-line:#9fb6cd;
  --hkcp-keyblue:#2a74d8;
  max-width:420px;
  min-width:0;
  container-type:inline-size;
  font-family:var(--hkcp-cn);
  color:var(--hkcp-ink);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
.hkcp *{box-sizing:border-box}
.hkcp input,
.hkcp select{user-select:text}
.hkcp [hidden]{display:none !important}

/* ============ 机体外壳 ============ */
.hkcp-frame{
  background:linear-gradient(180deg,#3c4249,#22262c 55%,#171a1e);
  border:1px solid #0d0f12;
  border-radius:13px;
  padding:8px 9px 11px;
  box-shadow:0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.hkcp-bezel{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 2px 7px;
  font-family:system-ui, sans-serif;
  font-size:9px;
  font-weight:600;
  line-height:1;
  letter-spacing:1.2px;
  color:#7d8894;
}
.hkcp-brand{color:#93a3b1}
.hkcp-model{color:#6b7681}
.hkcp-led{
  margin-left:auto;
  width:6px;height:6px;border-radius:50%;
  background:#39d98a;
  box-shadow:0 0 6px rgba(57,217,138,.85);
  transition:background .3s, box-shadow .3s;
}
.hkcp.is-off .hkcp-led{background:#3a4048;box-shadow:none}

/* ============ 屏幕 ============ */
.hkcp-screen{
  position:relative;
  background:linear-gradient(180deg,#f8fbfe,#e7edf5);
  border:1px solid #0a0c0f;
  border-radius:5px;
  padding:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), inset 0 6px 16px rgba(120,150,185,.18);
  transition:background .35s ease, box-shadow .35s ease;
}
.hkcp.is-off .hkcp-screen{
  background:#05070a;
  box-shadow:inset 0 0 26px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.05);
}
.hkcp-ui{
  display:grid;
  gap:5px;
  transition:opacity .28s ease;
}
.hkcp.is-off .hkcp-ui{opacity:0;visibility:hidden}

/* ============ 顶栏 ============ */
.hkcp-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:6px;
  padding:0 1px;
  min-width:0;
}
.hkcp-name{
  font-size:11px;
  font-weight:700;
  color:#0d3f63;
  white-space:nowrap;
}
.hkcp-status{
  justify-self:center;
  font-size:9.5px;
  line-height:1.5;
  padding:1px 8px;
  border-radius:9px;
  border:1px solid #b9cde0;
  background:linear-gradient(180deg,#f2f8fd,#dfeaf5);
  color:#1b527f;
  white-space:nowrap;
}
.hkcp-status.is-run{background:linear-gradient(180deg,#fdf5e2,#f6e3b8);border-color:#e0bd72;color:#8a5b05}
.hkcp-status.is-stop{background:linear-gradient(180deg,#fdeceb,#f7d6d3);border-color:#dfa49e;color:#9c2b22}
.hkcp-clock{
  font-family:var(--hkcp-mono);
  font-size:9px;
  color:#2b4f70;
  white-space:nowrap;
}

/* ============ 四个读数框 ============
 * 真机排布：左边一块宽读数值，右边一列窄标签（上行单位、下行名称 + 下拉三角）。
 * 当前力=浅蓝 / 位移=浅黄 / 速度=蓝底白字 / 最大力=绿。 */
.hkcp-gauges{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}
.hkcp-gauge{display:flex;gap:3px;height:31px;min-width:0}
.hkcp-val{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  padding:0 6px;
  border:1px solid rgba(18,50,80,.38);
  border-radius:2px;
  font-family:var(--hkcp-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.hkcp-gauge--lb .hkcp-val{background:linear-gradient(180deg,#d5f0fb,#93d3ef);color:#0b3a55}
.hkcp-gauge--blue .hkcp-val{background:linear-gradient(180deg,#3f8ae2,#1d55b0);color:#eef6ff;text-shadow:0 1px 0 rgba(0,0,0,.28)}
.hkcp-gauge--tan .hkcp-val{background:linear-gradient(180deg,#f7e0c2,#e0b784);color:#4a3116}
.hkcp-gauge--green .hkcp-val{background:linear-gradient(180deg,#cbf0b0,#93d871);color:#1d4413}
.hkcp-lab{
  width:52px;
  flex:none;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  color:#3a5f7e;
}
.hkcp-lab .hkcp-unit{
  font-family:var(--hkcp-mono);
  font-size:8px;
  line-height:1;
  color:#4d6f8c;
  white-space:nowrap;
  overflow:hidden;
}
.hkcp-lab .hkcp-cap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  font-size:9.5px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
}

/* 下拉小三角 */
.hkcp-tri{
  flex:none;
  width:0;height:0;
  border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;
  border-top:4.5px solid #2b5b86;
}
.hkcp-lab .hkcp-tri{border-left-width:3px;border-right-width:3px;border-top-width:4px;border-top-color:#3a6c98}

/* ============ 标签行 ============ */
.hkcp-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:3px;
}
.hkcp-tab{
  font-family:inherit;
  font-size:10px;
  line-height:1.4;
  padding:4px 2px;
  border-radius:3px;
  border:1px solid #b6c9dc;
  background:linear-gradient(180deg,#ffffff,#e3ebf3);
  color:#28557b;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:filter .12s, box-shadow .12s;
}
.hkcp-tab:hover{filter:brightness(1.03)}
.hkcp-tab.is-on{
  background:linear-gradient(180deg,#ffffff,#cfe3f6);
  border-color:#7ba6cd;
  color:#0b3f6e;
  font-weight:700;
  box-shadow:inset 0 -2px 0 #2f7cc4;
}

/* ============ 主体：左页面 + 右键区 ============ */
.hkcp-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 108px;
  gap:5px;
  align-items:stretch;
  min-height:0;
}
.hkcp-main{
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.hkcp-page{
  display:none;
  flex-direction:column;
  height:100%;
  min-width:0;
  min-height:0;
}
.hkcp-page.is-on{display:flex}

/* ---- 试样资料 / 方案表单 ---- */
.hkcp-form{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 4px;
  /* 真机表单的 5 行是"铺满整页"的：行距随页面高度摊开，不是挤在顶部 */
  align-content:space-evenly;
  padding:6px 5px;
  background:linear-gradient(180deg,#ffffff,#f7fafd);
  border:1px solid #c2d2e2;
  border-radius:3px;
  box-shadow:inset 0 1px 0 #fff;
}
.hkcp-field{
  display:flex;
  align-items:center;
  gap:2.5px;
  min-width:0;
  font-size:9.5px;
  color:#1b3b58;
}
.hkcp-field .lb{flex:none;white-space:nowrap}
.hkcp-field .u{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--hkcp-mono);
  font-size:8px;
  color:#42627d;
}
.hkcp-slot{min-width:0;display:flex;align-items:center}
.hkcp-slot > *{min-width:0}

.hkcp-in{
  flex:0 1 36px;
  width:36px;
  min-width:26px;
  height:18px;
  padding:0 3px;
  font-family:var(--hkcp-mono);
  font-size:10px;
  color:#0d2f4a;
  background:linear-gradient(180deg,#ffffff,#eef4fa);
  border:1px solid #7e9ab4;
  border-radius:2px;
  outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.hkcp-in:focus{
  border-color:#1d69b0;
  background:#fff;
  box-shadow:0 0 0 1px rgba(29,105,176,.35);
}
.hkcp-in.is-dim{color:#8ba0b3;background:#eef2f6}
.hkcp-in--w46{flex:0 1 46px;width:46px}
.hkcp-in--w30{flex:0 1 30px;width:30px}

.hkcp-selwrap{
  position:relative;
  flex:0 0 auto;
  width:62px;
  min-width:0;
}
.hkcp-selwrap--w52{width:48px}
.hkcp-selwrap--fill{flex:1 1 auto;width:auto;min-width:0;max-width:170px}
.hkcp-selwrap .hkcp-tri{position:absolute;right:4px;top:50%;margin-top:-2px}
.hkcp-sel{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:18px;
  padding:0 13px 0 4px;
  font-family:inherit;
  font-size:9.5px;
  color:#0d2f4a;
  background:linear-gradient(180deg,#ffffff,#e9f1f9);
  border:1px solid #7e9ab4;
  border-radius:2px;
  outline:none;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hkcp-sel:focus{border-color:#1d69b0;box-shadow:0 0 0 1px rgba(29,105,176,.35)}

.hkcp-check{
  position:relative;
  flex:none;
  width:11px;
  height:11px;
}
.hkcp-check input{
  position:absolute;
  inset:0;
  width:11px;
  height:11px;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.hkcp-check i{
  display:block;
  width:11px;
  height:11px;
  border:1px solid #6f8ea9;
  border-radius:2px;
  background:linear-gradient(180deg,#ffffff,#e8eff6);
}
.hkcp-check input:checked + i{background:linear-gradient(180deg,#ffffff,#dbeafa)}
.hkcp-check input:checked + i::after{
  content:"";
  position:absolute;
  left:2.5px;
  top:3px;
  width:5px;
  height:2.5px;
  border-left:1.5px solid #1461a8;
  border-bottom:1.5px solid #1461a8;
  transform:rotate(-45deg);
}
.hkcp-check input:focus-visible + i{box-shadow:0 0 0 2px rgba(29,105,176,.35)}

.hkcp-field--pre{align-items:flex-start}
.hkcp-field--ret{align-self:start}
.hkcp-field--wide{grid-column:1 / -1}
.hkcp-pre{display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:2px}
.hkcp-preRow{display:flex;align-items:center;gap:2.5px;min-width:0}
.hkcp-preRow .u{flex:none;font-size:7.5px}

/* ---- 底部按钮 ---- */
.hkcp-foot{
  display:flex;
  justify-content:center;
  gap:8px;
  padding-top:5px;
}
.hkcp-btn{
  font-family:inherit;
  font-size:10px;
  line-height:1.4;
  padding:4px 15px;
  border-radius:3px;
  border:1px solid #93aec5;
  background:linear-gradient(180deg,#ffffff,#dfe9f2);
  color:#1d4c72;
  cursor:pointer;
  box-shadow:0 1px 0 #93aec5, inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .06s, box-shadow .06s, filter .12s;
}
.hkcp-btn--on{background:linear-gradient(180deg,#f0f8ff,#c6e0f7);border-color:#6c9dc6;color:#0c3f6a;font-weight:700}
.hkcp-btn--wide{width:100%;padding:4px 4px;font-size:9.5px}
.hkcp-btn:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 5px rgba(30,70,110,.28)}
.hkcp-btn.is-flash{filter:brightness(1.12)}

/* ---- 曲线页 ---- */
.hkcp-subtabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:3px;
  align-items:end;
  margin-bottom:4px;
}
.hkcp-sub{
  font-family:inherit;
  font-size:9.5px;
  line-height:1.4;
  padding:3px 2px;
  border-radius:3px 3px 0 0;
  border:1px solid #b6c9dc;
  background:linear-gradient(180deg,#ffffff,#e2ebf4);
  color:#28557b;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hkcp-sub.is-on{
  background:linear-gradient(180deg,#ffffff,#cfe3f6);
  border-color:#7ba6cd;
  color:#0b3f6e;
  font-weight:700;
  box-shadow:inset 0 -2px 0 #2f7cc4;
}
.hkcp-seq{
  display:flex;
  align-items:center;
  gap:3px;
  padding-left:2px;
  font-size:9px;
  color:#2b5b86;
  white-space:nowrap;
}
.hkcp-chart{
  flex:1 1 auto;
  position:relative;
  min-height:150px;
  background:#eef3f9;
  border:1px solid #8fa9c4;
  border-radius:2px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.hkcp-chart canvas{display:block;width:100%;height:100%}

/* ---- 测试结果页 ---- */
.hkcp-resTitle{
  font-size:9.5px;
  color:#1b4a72;
  padding:1px 1px 4px;
}
.hkcp-tableWrap{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  background:linear-gradient(180deg,#ffffff,#f8fbfe);
  border:1px solid #c2d2e2;
  border-radius:3px;
}
.hkcp-table{width:100%;border-collapse:collapse;table-layout:fixed}
.hkcp-table th{
  position:sticky;
  top:0;
  padding:3px 6px;
  font-size:9px;
  font-weight:400;
  text-align:center;
  color:#1b4a72;
  background:linear-gradient(180deg,#f7fafd,#e4edf6);
  border-bottom:1px solid #b9cde0;
  border-left:1px solid #b9cde0;      /* 真机表头有竖分隔线 */
  white-space:nowrap;
}
.hkcp-table th:first-child{border-left:0}
.hkcp-table td{
  padding:2.5px 6px;
  font-family:var(--hkcp-mono);
  font-size:9.5px;
  text-align:center;
  color:#123c58;
  border-bottom:1px solid #e8f0f7;
  border-left:1px solid #dde7f1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hkcp-table td:first-child{border-left:0}
.hkcp-table tr.sum td{
  background:#f1f7fd;
  color:#0d3f6e;
  font-weight:700;
}
.hkcp-table td.hkcp-empty{color:#8ba0b3;font-family:inherit;text-align:center;padding:10px 6px}
.hkcp-resFoot{
  display:grid;
  grid-template-columns:1fr 1fr 0.95fr;
  gap:4px;
  padding-top:5px;
}
.hkcp-resCol{display:flex;flex-direction:column;gap:4px;min-width:0}
.hkcp-resFoot .hkcp-btn{width:100%;padding:4px 2px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hkcp-resBack{grid-row:span 2;font-size:9.5px}

/* ---- 停机条件子页（活页式覆盖主区，功能键区仍然可用） ----
 * 真机照片：整块主区就是这一页，标题在左上，字段右对齐，
 * 两组参数之间留空一行，底部两颗加宽的 取消 / 确定。 */
.hkcp-dialog{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  padding:7px 8px 6px;
  background:linear-gradient(180deg,#fbfdff,#e9f0f8);
  border:1px solid #7f9cb8;
  border-radius:3px;
  box-shadow:0 8px 18px rgba(8,28,52,.3), inset 0 1px 0 #fff;
}
.hkcp-dialogHead{
  font-size:10px;
  font-weight:700;
  color:#0d3f63;
  padding-bottom:3px;
  margin-bottom:9px;
  border-bottom:1px solid #b9cde0;
}
.hkcp-dialogBody{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.hkcp-dialogBody .hkcp-field{font-size:10px}
.hkcp-dialogBody .hkcp-field .lb{width:76px;flex:0 0 76px;text-align:right}
.hkcp-dialogBody .hkcp-in--w46{flex:0 0 62px;width:62px}
.hkcp-dialogBody .hkcp-field--gap{margin-top:11px}
.hkcp-dialogFoot{margin-top:auto;padding-top:8px;gap:16px}
.hkcp-dialogFoot .hkcp-btn{padding:4px 30px;font-size:10.5px}

/* ============ 右侧：蓝色功能键区 ============ */
.hkcp-right{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.hkcp-keys{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:6px 5px 7px;
  border:1px solid #17539f;
  border-radius:6px;
  background:linear-gradient(180deg,#3a86e2,#1f5fc4 60%,#1a52ab);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 16px rgba(6,30,80,.35);
}
.hkcp-key{
  position:relative;
  height:44px;
  padding:4px 1px 2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  font-family:inherit;
  font-size:9px;
  line-height:1;
  color:#123c52;
  white-space:nowrap;
  overflow:hidden;
  cursor:pointer;
  border:1px solid #8ba6bb;
  border-radius:6px;
  background:linear-gradient(180deg,#ffffff,#e4ecf3 60%,#cfdae5);
  box-shadow:0 2px 0 #5d7f96, 0 3px 5px rgba(6,30,80,.3), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .06s, box-shadow .06s, filter .12s, opacity .15s;
}
.hkcp-key span{display:block;width:100%;text-align:center}
.hkcp-ball{
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fffdf0 0%, #ffeaa0 30%, #f0c132 62%, #b8860b 100%);
  box-shadow:inset 0 -2px 3px rgba(120,80,0,.45), inset 0 1px 2px rgba(255,255,255,.9), 0 1px 2px rgba(20,45,90,.35);
}
.hkcp-key--stop{
  color:#fff;
  border-color:#8d1c14;
  background:linear-gradient(180deg,#ff9d94,#e04a3e 58%,#c02a20);
  box-shadow:0 2px 0 #8d1c14, 0 3px 5px rgba(90,10,5,.4), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(90,10,5,.5);
}
.hkcp-key--test span{font-weight:700}
.hkcp-key:active{
  transform:translateY(2px) scale(.97);
  box-shadow:0 0 0 #5d7f96, 0 1px 2px rgba(6,30,80,.3), inset 0 2px 6px rgba(6,30,80,.28);
}
.hkcp-key:disabled,
.hkcp-key.is-off{
  cursor:not-allowed;
  filter:grayscale(.85) brightness(1.06);
  opacity:.5;
  box-shadow:0 1px 0 #94a3ad, inset 0 1px 0 rgba(255,255,255,.4);
  transform:none;
}
.hkcp-key.is-flash{filter:brightness(1.35) saturate(1.25)}
.hkcp-key.is-flash::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);
  pointer-events:none;
}

/* ============ 数字键盘 ============ */
.hkcp-pad{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
}
.hkcp-padKey{
  height:24px;
  padding:0 2px;
  font-family:var(--hkcp-mono);
  font-size:11px;
  color:#123c52;
  cursor:pointer;
  border:1px solid #8fa6bb;
  border-radius:4px;
  background:linear-gradient(180deg,#ffffff,#e2e9f0 60%,#cfd9e3);
  box-shadow:0 1.5px 0 #8fa6bb, inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .06s, box-shadow .06s, filter .12s, opacity .15s;
}
.hkcp-padKey--wide{font-family:var(--hkcp-cn);font-size:9px;letter-spacing:.2px}
.hkcp-padKey:active{
  transform:translateY(1px) scale(.97);
  box-shadow:0 0 0 #8fa6bb, inset 0 2px 4px rgba(10,40,60,.28);
}
.hkcp-padKey:disabled,
.hkcp-padKey.is-off{
  cursor:not-allowed;
  filter:grayscale(.85) brightness(1.05);
  opacity:.5;
  transform:none;
}
.hkcp-padKey.is-flash{
  filter:brightness(1.3);
  box-shadow:inset 0 0 0 2px rgba(47,124,196,.85);
}

/* ============ 测试结果 / 手动控制（曲线页、结果页才出现） ============ */
.hkcp-cmd{
  display:none;
  flex-direction:column;
  gap:4px;
}
.hkcp-wideKey{
  height:28px;
  padding:0 3px;
  font-family:inherit;
  font-size:9.5px;
  color:#123c52;
  cursor:pointer;
  border:1px solid #8fa6bb;
  border-radius:4px;
  background:linear-gradient(180deg,#ffffff,#e2e9f0 60%,#cfd9e3);
  box-shadow:0 2px 0 #8fa6bb, inset 0 1px 0 rgba(255,255,255,.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hkcp-cmdRow{display:grid;grid-template-columns:1.15fr 1fr;gap:4px}
.hkcp-mini{
  height:22px;
  padding:0 2px;
  font-family:inherit;
  font-size:8.5px;
  color:#123c52;
  cursor:pointer;
  border:1px solid #8fa6bb;
  border-radius:4px;
  background:linear-gradient(180deg,#ffffff,#e2e9f0 60%,#cfd9e3);
  box-shadow:0 1.5px 0 #8fa6bb, inset 0 1px 0 rgba(255,255,255,.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hkcp-wideKey:active,
.hkcp-mini:active{transform:translateY(1px);box-shadow:0 0 0 #8fa6bb, inset 0 2px 4px rgba(10,40,60,.28)}
.hkcp-wideKey:disabled,
.hkcp-wideKey.is-off,
.hkcp-mini:disabled,
.hkcp-mini.is-off{cursor:not-allowed;filter:grayscale(.85) brightness(1.05);opacity:.5;transform:none}
.hkcp-wideKey.is-flash,
.hkcp-mini.is-flash{filter:brightness(1.3);box-shadow:inset 0 0 0 2px rgba(47,124,196,.85)}

/* 页面决定下部键区：表单页给数字键盘，曲线 / 结果页给测试结果 */
.hkcp[data-page="graph"] .hkcp-pad,
.hkcp[data-page="result"] .hkcp-pad{display:none}
.hkcp[data-page="graph"] .hkcp-cmd,
.hkcp[data-page="result"] .hkcp-cmd{display:flex}

/* ============ 窄容器降级（宿主右栏更窄时） ============ */
@container (max-width:372px){
  .hkcp-body{grid-template-columns:minmax(0,1fr) 100px}
  .hkcp-field--ret,
  .hkcp-field--pre{grid-column:1 / -1}
  .hkcp-key{height:40px;font-size:8.5px}
  .hkcp-ball{width:20px;height:20px}
  .hkcp-lab{width:48px}
  .hkcp-field{font-size:9px}
  .hkcp-in{flex:0 1 32px;width:32px;font-size:9.5px}
  .hkcp-in--w46{flex:0 1 42px;width:42px}
  .hkcp-selwrap{width:56px}
  .hkcp-selwrap--w52{width:46px}
  .hkcp-seq{font-size:8.5px;gap:2px}
  .hkcp-sub{font-size:9px;padding:3px 1px}
  .hkcp-sel{font-size:9px}
  .hkcp-dialogBody .hkcp-field .lb{width:64px;flex:0 0 64px}
}
@container (max-width:344px){
  .hkcp-form{grid-template-columns:1fr}
  .hkcp-preRow .hkcp-in{flex:0 0 40px;width:40px}
  .hkcp-body{grid-template-columns:minmax(0,1fr) 94px}
  /* 更窄：序号选择挪到下一行，给三个子标签留足宽度 */
  .hkcp-subtabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hkcp-sub{font-size:9.5px;padding:3px 2px}
  .hkcp-seq{grid-column:1 / -1;justify-content:flex-end;padding-left:0}
  .hkcp-selwrap--w52{width:70px}
  .hkcp-padKey{height:22px;font-size:10px}
  .hkcp-key{height:38px}
}