/* 设备号结构化输入（C2.277 · docs/device-no-standard-v1.html）
 *
 * 表单里原来是一个自由文本框，现在拆成「类型 + 各段」，显示名自动拼。
 * 样式只做两件事：让四个小控件在窄弹窗里排得下，以及让「将保存为 xxx」的预览
 * 看起来像结果而不是提示 —— 人需要确认自己拼出来的是什么。
 */
.dev-field{grid-column:1 / -1}
.dev-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.dev-tab{padding:3px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt2);font-size:12px;cursor:pointer;font-weight:600;
  transition:border-color .12s,background .12s}
.dev-tab:hover{border-color:var(--line2);background:var(--hover)}
.dev-tab.on{border-color:var(--line-brand);background:var(--brand-d);color:#456d16}

.dev-body{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.dev-body[hidden]{display:none}
/* 全局 .field input 是块级满宽，这里要给每段留自己的宽度 */
#dev-field .dev-body input{width:auto;flex:none}
#dev-field .dev-body input[type="number"]{width:78px}
#dev-field .dev-body #dev-tag{width:86px;font-family:var(--mono);letter-spacing:.4px}
#dev-field .dev-body select{width:auto;flex:none;min-width:70px;padding:5px 6px}
.dev-lb{font-size:12px;color:var(--txt2);font-weight:600}
.dev-body .fine{font-size:11px}

.dev-preview{font-size:11.5px;color:var(--txt3);margin:5px 0 0}
.dev-preview b{color:var(--txt);font-family:var(--mono);font-size:12px;
  background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
/* 缺字段用琥珀而不是红：还没填完不是错误，是「还差一步」 */
.dev-preview.warn{color:var(--amber);font-weight:600}

/* ---------- 设备号体检报告（C2.278，只读） ---------- */
.da-lead{margin:0 0 10px}
.da-sum{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 6px}
@media (max-width:640px){.da-sum{grid-template-columns:repeat(3,1fr)}}
.da-k{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:7px 10px}
.da-k i{display:block;font-style:normal;font-size:11px;color:var(--txt3)}
.da-k b{font-size:18px;font-variant-numeric:tabular-nums;color:var(--txt)}
.da-k.is-ok b{color:var(--green)}
.da-k.is-fix b{color:#456d16}
.da-k.is-miss b{color:var(--amber)}
.da-k.is-unk b{color:var(--red)}
.da-tip{margin:0 0 8px}
.da-tb{font-size:12px}
.da-tb td.mono{font-family:var(--mono);font-size:11.5px}
.da-tb td.mono b{color:#456d16}
.da-h{font-family:var(--mono);font-size:11.5px;color:var(--txt2)}
.da-tag{display:inline-block;font-size:10.5px;padding:0 6px;border-radius:4px;line-height:17px;
  border:1px solid var(--line2);background:var(--soft);color:var(--txt2);font-weight:600;white-space:nowrap}
.da-tag.ok{border-color:var(--line-green);background:var(--green-d);color:var(--green)}
.da-tag.fix{border-color:var(--line-brand);background:var(--brand-d);color:#456d16}
.da-tag.miss{border-color:var(--line-amber);background:var(--amber-d);color:var(--amber)}
.da-tag.unk{border-color:var(--line-red);background:var(--red-d);color:var(--red)}
.da-foot{margin-top:10px}
.da-tb{table-layout:fixed}
.da-tb td,.da-tb th{overflow:hidden;text-overflow:ellipsis}
.da-note{margin:0 0 8px}
#dev-field .dev-body #dev-name{width:196px}
/* 括号往输入框靠：跟别的控件一样 7px 间距的话，读起来像「名称　（　标签）」三个独立字段，
   而这其实是「名称 (标签)」一个整体。 */
.dev-paren{font-family:var(--mono);font-size:13px;color:var(--txt3);font-weight:400;
  margin:0 -3px}