/* ============================================================
   大聚 X9 屏端 HMI · 设备 / 参数 / 系统类页面样式（hmi-devices 维护）
   仅补充 hmi.css / base.css 未覆盖的设备页组件；设计基准 1920×1080。
   ============================================================ */

/* ---------- 页面级：不出现整页滚动 ---------- */
.dev-page .screen-body { overflow: hidden; }
.dev-fill { flex: 1; min-height: 0; }
.dev-rowflex { display: flex; gap: 14px; min-height: 0; flex: 1; }
.dev-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.dev-col-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.dev-scroll { overflow: auto; min-height: 0; }
.dev-scroll::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.dev-scroll::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb { background: #d5d8dd; border-radius: 6px; }
.dev-loading { display: flex; align-items: center; justify-content: center; gap: 12px; height: 100%; color: var(--muted); font-size: 14px; }

/* 触控目标：设备页最小 40px */
.dev-page .btn { height: 42px; }
.dev-page .btn-sm { height: 40px; padding: 0 12px; }
.dev-page .btn-lg { height: 48px; }
.dev-page .icon-btn { width: 44px; height: 44px; }
.dev-page .switch { width: 56px; height: 40px; }
.dev-page .switch .track { width: 56px; height: 40px; border-radius: 20px; }
.dev-page .switch .track::after { width: 30px; height: 30px; top: 5px; left: 5px; }
.dev-page .switch input:checked + .track::after { transform: translateX(16px); }
.dev-page .switch.sm { width: 44px; height: 26px; }
.dev-page .switch.sm .track { width: 44px; height: 26px; }
.dev-page .switch.sm .track::after { width: 20px; height: 20px; top: 3px; left: 3px; }
.dev-page .switch.sm input:checked + .track::after { transform: translateX(18px); }
.dev-page .seg button { height: 40px; }
.dev-page .input, .dev-page .select { height: 44px; }
.dev-page input[type="range"] { accent-color: var(--blue); }

/* ---------- 表格容器（内部滚动，表头吸顶） ---------- */
.tbl-wrap { flex: 1; min-height: 0; overflow: auto; border-radius: 10px; }
.tbl-wrap .tbl thead th { position: sticky; top: 0; z-index: 2; }
.tbl-wrap .tbl tbody td { padding-top: 9px; padding-bottom: 9px; }
.tbl-condensed tbody td { padding-top: 7px !important; padding-bottom: 7px !important; }
.tbl tfoot td { background: var(--panel-3); font-weight: 600; color: var(--ink-2); padding: 10px; text-align: center; border-top: 1px solid var(--line); }
.tbl .t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: .2px; }
.tbl .t-idx { font-family: var(--font-num); color: var(--muted); font-size: 13px; }
.tbl .t-on { color: var(--red); font-weight: 700; }
.tbl .t-off { color: var(--muted); }
.tbl tbody tr.row-warm td { background: #fff8f6; }
.tbl tbody tr.row-on td { background: var(--blue-soft); }

/* 可点击单元格 / 小控件 */
.dev-cell { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 64px; height: 40px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: #fff; font-family: var(--font-num); font-size: 15px; font-weight: 600; color: var(--blue-deep); cursor: pointer; transition: background .12s, border-color .12s; }
.dev-cell:hover { background: var(--blue-soft); border-color: var(--blue); }
.dev-cell u { text-decoration: none; font-family: var(--font-sans); font-size: 11px; font-weight: 500; color: var(--muted); }
.dev-cell.plain { min-width: 54px; border-color: transparent; background: transparent; }
.dev-cell.plain:hover { background: var(--blue-soft); }
.dev-time { font-family: var(--font-num); font-size: 16px; font-weight: 700; letter-spacing: .5px; color: var(--blue-deep); }
.dev-time.off { color: var(--muted); }

/* ---------- 通用信息件 ---------- */
.dev-hint { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 9px; background: var(--panel-3); color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }
.dev-hint.blue { background: var(--blue-soft); color: var(--blue-deep); }
.dev-hint.warn { background: var(--amber-soft); color: #8a5a00; }
.dev-hint.red { background: var(--red-soft); color: var(--red-deep); }
.dev-hint b { color: inherit; }
.dev-hint .hic { flex: 0 0 auto; margin-top: 1px; }

.dev-bar { height: 10px; border-radius: 6px; background: #eef0f2; overflow: hidden; }
.dev-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--blue); transition: width .35s ease; }
.dev-bar > i.green { background: var(--green); }
.dev-bar > i.red { background: var(--red); }
.dev-bar > i.amber { background: var(--amber); }
.dev-bar.thin { height: 6px; }

.dev-big { font-family: var(--font-num); font-weight: 800; letter-spacing: .5px; line-height: 1; color: var(--ink); }
.dev-big u { text-decoration: none; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.dev-big.blue { color: var(--blue-deep); }
.dev-big.red { color: var(--red); }
.dev-big.green { color: var(--green); }
.dev-k { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.dev-v { font-family: var(--font-num); font-size: 20px; font-weight: 700; color: var(--ink); }
.dev-v u { text-decoration: none; font-family: var(--font-sans); font-size: 12px; color: var(--muted); margin-left: 2px; }
.dev-v.blue { color: var(--blue-deep); }
.dev-v.red { color: var(--red); }

/* 快捷状态行（键值+开关等） */
.dev-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 2px; border-bottom: 1px solid var(--line); }
.dev-line:last-child { border-bottom: 0; }
.dev-line .lk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.dev-line .lk svg { color: var(--muted); }
.dev-line .lv { font-family: var(--font-num); font-size: 17px; font-weight: 700; color: var(--ink); }
.dev-line .lv u { text-decoration: none; font-family: var(--font-sans); font-size: 12px; color: var(--muted); margin-left: 2px; }
.dev-line .lv.blue { color: var(--blue-deep); }
.dev-line .lv.red { color: var(--red); }

/* 指标网格 */
.dev-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dev-kpis.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev-kpis.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dev-kpi { padding: 12px 14px; border-radius: 11px; background: var(--panel-3); min-width: 0; }
.dev-kpi .k { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.dev-kpi .v { margin-top: 4px; font-family: var(--font-num); font-size: 26px; font-weight: 800; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.dev-kpi .v u { text-decoration: none; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.dev-kpi .v.blue { color: var(--blue-deep); }
.dev-kpi .v.red { color: var(--red); }
.dev-kpi .v.green { color: var(--green); }
.dev-kpi .s { margin-top: 3px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-kpi.center { text-align: center; }

/* 表单（参数设置/网络/云平台/登录/帮助） */
.dev-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.dev-form.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev-form.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dev-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dev-field > label { font-size: 12.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .2px; display: flex; align-items: center; gap: 6px; }
.dev-field > label .req { color: var(--red); }
.dev-field .input, .dev-field .select { height: 44px; font-size: 14.5px; }
.dev-field .input.num { font-size: 17px; }
.dev-field .fh { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.dev-field .input.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229, 72, 77, .12); }
.dev-inline { display: flex; align-items: center; gap: 10px; }
.dev-inline .switch { margin-left: auto; }

/* 分组标题 */
.dev-sec { display: flex; align-items: center; gap: 10px; margin: 2px 0 2px; }
.dev-sec .t { font-size: 14.5px; font-weight: 700; letter-spacing: .5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.dev-sec .t::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--dark); }
.dev-sec .line { flex: 1; height: 1px; background: var(--line); }
.dev-sec .x { font-size: 12px; color: var(--muted); }

/* 顶部 tab */
.dev-tabs { display: flex; align-items: center; gap: 10px; }
.dev-tab { height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); font-size: 14.5px; font-weight: 700; letter-spacing: .5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.dev-tab:hover { background: var(--panel-3); }
.dev-tab.on { background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: var(--shadow-1); }

/* 保存操作条 */
.dev-actions { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); flex: 0 0 auto; }
.dev-actions .sp { flex: 1; }
.dev-actions .tip { font-size: 12.5px; color: var(--muted); }

/* ---------- 时间选择弹窗 ---------- */
.tp-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; }
.tp-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tp-col .tp-k { font-size: 12px; color: var(--muted); font-weight: 600; }
.tp-btn { width: 108px; height: 46px; border-radius: 9px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tp-btn:hover { background: var(--panel-3); }
.tp-v { width: 108px; height: 64px; border-radius: 10px; background: var(--panel-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-size: 34px; font-weight: 800; color: var(--ink); }
.tp-sep { font-family: var(--font-num); font-size: 34px; font-weight: 800; color: var(--ink-3); padding-bottom: 26px; }
.tp-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

/* ---------- 曲线图 ---------- */
.dev-chart { width: 100%; height: 100%; display: block; }
.dev-chart .ch-axis { font-size: 11px; fill: #8d929b; font-family: var(--font-sans); }
.dev-chart .ch-mark { font-size: 11px; fill: var(--red); font-weight: 700; font-family: var(--font-sans); }
.dev-ring .ring-txt { font-family: var(--font-num); font-size: 20px; font-weight: 800; fill: var(--ink); }

/* 信号格 */
.sig-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.sig-bars i { display: block; width: 4px; border-radius: 2px; background: #dfe2e6; }
.sig-bars i.on { background: var(--green); }

/* ============================================================
   风机组设置 fans
   ============================================================ */
.fan-tbl .fname { display: flex; align-items: center; gap: 8px; justify-content: center; }
.fan-tbl .fname .fi { color: var(--ink-2); }
.fan-tbl tr.fan-run .fname { color: var(--red); font-weight: 700; }
.fan-tbl tr.fan-run .fname .fi { color: var(--red); }
.np-hero { display: flex; align-items: flex-end; gap: 10px; padding: 6px 2px 12px; }
.np-hero .nh-v { font-family: var(--font-num); font-size: 46px; font-weight: 800; line-height: .9; color: var(--blue-deep); }
.np-hero .nh-v u { text-decoration: none; font-size: 15px; color: var(--muted); font-family: var(--font-sans); }
.np-hero .nh-t { padding-bottom: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.np-tbl tbody td { padding-top: 7px; padding-bottom: 7px; }
.np-tbl tr.np-now td { background: var(--blue-soft); }

/* ============================================================
   水帘设置 pads
   ============================================================ */
.pad-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; flex: 1; min-height: 0; }
.pad-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pad-card .pc-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--dark); color: #fff; }
.pad-card .pc-head .pi { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pad-card .pc-head .pt { flex: 1; min-width: 0; }
.pad-card .pc-head .pt b { display: block; font-size: 16.5px; letter-spacing: .5px; }
.pad-card .pc-head .pt span { display: block; font-size: 11.5px; color: #a9b0ba; margin-top: 2px; }
.pad-card .pc-body { padding: 8px 18px; flex: 1; min-height: 0; overflow: auto; }
.pad-card .dev-line { min-height: 42px; padding: 2px; }
.pad-card .pc-foot { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); }
.pad-card .pc-foot .btn { flex: 1; }
.pad-state { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--panel-3); margin: 8px 0 4px; }
.pad-state .ps-ic { width: 42px; height: 42px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.pad-state.on { background: var(--blue-soft); }
.pad-state.on .ps-ic { color: var(--blue); }
.pad-state .ps-t { flex: 1; min-width: 0; }
.pad-state .ps-t b { font-size: 15px; display: block; }
.pad-state .ps-t span { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }

/* ============================================================
   锅炉设置 boiler
   ============================================================ */
.boiler-hero { display: flex; align-items: center; gap: 26px; padding: 16px 20px; border-radius: 12px; background: linear-gradient(120deg, #fff6ef, #fff); border: 1px solid #ffe6d5; }
.boiler-hero .bh-ic { width: 74px; height: 74px; border-radius: 18px; background: #fff; color: var(--red); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); }
.boiler-hero .bh-main { flex: 1; min-width: 0; }
.boiler-hero .bh-t { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.boiler-hero .bh-v { margin-top: 4px; font-family: var(--font-num); font-size: 58px; font-weight: 800; line-height: .95; color: var(--red); }
.boiler-hero .bh-v u { text-decoration: none; font-family: var(--font-sans); font-size: 17px; color: var(--ink-3); margin-left: 4px; }
.boiler-hero .bh-sub { margin-top: 8px; display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-3); }
.boiler-hero .bh-sub b { font-family: var(--font-num); font-size: 17px; color: var(--blue-deep); }
.boiler-hero .bh-side { text-align: right; }

/* ============================================================
   分区加热 heaters（对照设计稿 03）
   ============================================================ */
.heat-week { display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.heat-week > div { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.heat-week > div:nth-child(5n + 1) { background: var(--panel-3); color: var(--ink-3); font-weight: 600; font-size: 13px; }
.heat-week > div.head { background: var(--dark); color: #fff; text-align: center; font-weight: 700; border-bottom: 0; }
.heat-week > div.sp { background: var(--dark); color: #fff; text-align: center; font-weight: 700; border-bottom: 0; font-size: 13px; }
.heat-week .hz { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.heat-week .hz .hic { width: 44px; height: 44px; border-radius: 50%; background: var(--panel-3); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.heat-week .hz.on .hic { background: var(--red-soft); color: var(--red); box-shadow: 0 0 0 4px rgba(229, 72, 77, .06); }
.heat-week .hz b { font-family: var(--font-num); font-size: 19px; font-weight: 700; color: var(--blue-deep); }
.heat-week .hz span { font-size: 11.5px; color: var(--muted); }
.heat-week .hz.inline { flex-direction: row; align-items: baseline; justify-content: center; gap: 3px; }
.heat-week .hz.inline b { font-size: 20px; }
.heat-week .hz.inline span { font-size: 12px; }
.heat-tbl tbody td { padding-top: 8px; padding-bottom: 8px; }
.heat-avg { display: flex; flex-direction: column; gap: 14px; }
.heat-avg .ha-big { display: flex; align-items: baseline; gap: 10px; }
.heat-avg .ha-big .v { font-family: var(--font-num); font-size: 52px; font-weight: 800; line-height: 1; color: var(--blue-deep); }
.heat-avg .ha-big .v u { text-decoration: none; font-family: var(--font-sans); font-size: 16px; color: var(--muted); }
.heat-avg .ha-big .x { color: var(--muted); font-size: 13px; }
.water-card { display: flex; flex-direction: column; gap: 10px; }
.water-card .wc-big { display: flex; align-items: baseline; gap: 10px; }

/* ============================================================
   灯光设置 lights（对照设计稿 08）
   ============================================================ */
.light-layout { display: flex; gap: 14px; min-height: 0; flex: 1; }
.light-chart-panel { width: 520px; flex: 0 0 520px; }
.light-chart-box { flex: 1; min-height: 0; padding: 4px 8px 0; }
.sched-tbl thead th { padding: 11px 10px; }
.sched-tbl tbody td { padding: 10px; }
.sched-tbl .t-on { color: var(--ink-2); }
.dim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.dim-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 6px 12px; border-radius: 9px; background: var(--panel-3); }
.dim-item .dk { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dim-item .dv { font-family: var(--font-num); font-size: 17px; font-weight: 700; color: var(--blue-deep); white-space: nowrap; }
.dim-item .dv u { text-decoration: none; font-family: var(--font-sans); font-size: 11px; color: var(--muted); margin-left: 2px; }
.dim-item .dv.red { color: var(--red); }
.range-row { display: flex; align-items: center; gap: 16px; padding: 6px 4px; }
.range-row .rl { width: 76px; font-size: 13px; color: var(--ink-2); font-weight: 600; flex: 0 0 auto; }
.range-row input[type="range"] { flex: 1; height: 40px; margin: 0; }
.range-row .rv { width: 74px; text-align: right; font-family: var(--font-num); font-size: 20px; font-weight: 700; color: var(--blue-deep); }
.range-row .rv u { text-decoration: none; font-size: 12px; color: var(--muted); }
.range-scale { display: flex; justify-content: space-between; padding: 0 4px 0 92px; font-size: 11px; color: var(--muted); font-family: var(--font-num); margin-top: -8px; }
.light-tabs { display: flex; gap: 8px; }
.light-tab { height: 40px; min-width: 96px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line-strong); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
.light-tab.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.light-tab i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cfd3d9; margin-right: 6px; vertical-align: middle; }
.light-tab.on i { background: #ffd97a; }
.light-tab.run i { background: var(--amber); }

/* ============================================================
   进气设置 inlets
   ============================================================ */
.inlet-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inlet-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.inlet-card .ic-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--panel-3); font-weight: 700; font-size: 15px; }
.inlet-card .ic-head .sp { flex: 1; }
.inlet-card .ic-body { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.inlet-card .dev-line { min-height: 42px; }
.inlet-open { display: flex; align-items: center; gap: 14px; }
.inlet-open .io-v { width: 92px; font-family: var(--font-num); font-size: 34px; font-weight: 800; color: var(--blue-deep); line-height: 1; }
.inlet-open .io-v u { text-decoration: none; font-size: 13px; color: var(--muted); }
.inlet-open .io-bar { flex: 1; }
.deflector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.def-item { border: 1px solid var(--line); border-radius: 11px; padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; }
.def-item .di-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.def-item .di-head .sp { flex: 1; }
.def-item .di-vals { display: flex; align-items: baseline; justify-content: space-between; }
.def-item .di-vals b { font-family: var(--font-num); font-size: 24px; font-weight: 800; color: var(--ink); }
.def-item .di-vals b u { text-decoration: none; font-size: 12px; color: var(--muted); }
.def-item .di-vals span { font-size: 12px; color: var(--muted); }

/* ============================================================
   进气设置 · 1920×1080 一屏适配（Deflector 6 块两行不裁切）
   ============================================================ */
.deflector-grid { gap: 8px 10px; }
.def-item { padding: 6px 11px; gap: 4px; }
.def-item .di-head { font-size: 13.5px; }
.def-item .di-vals b { font-size: 21px; }
.def-item .dev-bar.thin { height: 5px; }
.def-item .btn-row { gap: 6px; margin-top: 1px; }
.def-item .btn-row .btn { height: 40px; padding: 0 8px; font-size: 12.5px; flex: 1; min-width: 0; }

/* ============================================================
   IOT 物联网
   ============================================================ */
.net-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 0 0 auto; }
.net-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column; }
.net-card .nc-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--dark); color: #fff; }
.net-card .nc-head .ni { width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; }
.net-card .nc-head .nt { flex: 1; }
.net-card .nc-head .nt b { display: block; font-size: 15px; letter-spacing: .4px; }
.net-card .nc-head .nt span { display: block; font-size: 11px; color: #a9b0ba; margin-top: 1px; }
.net-card .nc-body { padding: 6px 16px 10px; flex: 1; }
.net-card .nc-body .kv-row { padding: 7px 0; }
.net-card .nc-body .kv-row .v { font-size: 15px; }
.net-card .nc-body .kv-row .v.green { color: var(--green); }
.net-card .nc-body .kv-row .v.red { color: var(--red); }
.slave-tbl tbody td { padding-top: 8px; padding-bottom: 8px; }
.iot-lower { display: flex; gap: 14px; flex: 1; min-height: 0; }
.fw-box { display: flex; flex-direction: column; gap: 12px; }
.fw-box .fw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.fw-box .fw-row:last-of-type { border-bottom: 0; }
.fw-box .fw-row .k { font-size: 13px; color: var(--ink-3); }
.fw-box .fw-row .v { font-family: var(--font-num); font-size: 15px; font-weight: 700; }

/* ============================================================
   料线 feed
   ============================================================ */
.feed-tbl .slot { display: flex; align-items: center; gap: 6px; justify-content: center; }
.feed-tbl .slot .dev-time { min-width: 58px; }
.bin-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.bin-row .bin-l { width: 110px; font-size: 13px; color: var(--ink-2); font-weight: 600; flex: 0 0 auto; }
.bin-row .bin-bar { flex: 1; }
.bin-row .bin-v { width: 92px; text-align: right; font-family: var(--font-num); font-size: 22px; font-weight: 800; color: var(--blue-deep); }
.bin-row .bin-v u { text-decoration: none; font-size: 12px; color: var(--muted); }

/* ============================================================
   喷雾设置 spray
   ============================================================ */
.spray-hero { display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-radius: 14px; background: linear-gradient(120deg, #eef4ff, #fff); border: 1px solid #dde8ff; }
.spray-hero .sh-ic { width: 76px; height: 76px; border-radius: 20px; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); flex: 0 0 auto; }
.spray-hero .sh-ic.on { color: var(--blue); animation: spraypulse 1.8s infinite; }
@keyframes spraypulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 94, 255, .18); } 50% { box-shadow: 0 0 0 12px rgba(31, 94, 255, 0); } }
.spray-hero .sh-main { flex: 1; min-width: 0; }
.spray-hero .sh-main .t { font-size: 13px; color: var(--muted); font-weight: 600; }
.spray-hero .sh-main .v { margin-top: 4px; font-family: var(--font-num); font-size: 40px; font-weight: 800; line-height: 1; color: var(--ink); }
.spray-hero .sh-main .v u { text-decoration: none; font-size: 14px; color: var(--muted); font-family: var(--font-sans); }
.spray-hero .sh-main .s { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.sched-list { display: flex; flex-direction: column; gap: 10px; }
.sched-item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 14px; border-radius: 10px; background: var(--panel-3); }
.sched-item .si-k { width: 74px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.sched-item .si-t { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.sched-item .si-note { font-size: 12px; color: var(--muted); }

/* ============================================================
   参数设置 params
   ============================================================ */
.param-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 16px; }
.param-body::-webkit-scrollbar { width: 6px; }
.param-body::-webkit-scrollbar-thumb { background: #d5d8dd; border-radius: 6px; }
.param-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.addr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.status-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 600; }
.status-note.warn { background: var(--amber-soft); color: #8a5a00; }
.status-note.red { background: var(--red-soft); color: var(--red-deep); }

/* ============================================================
   传感器校准 calibration
   ============================================================ */
.cal-tbl thead th { padding: 10px 8px; font-size: 13px; }
.tbl-wrap .cal-tbl tbody td { padding: 5px 8px; }
.cal-tbl .cname { text-align: left; padding-left: 14px; }
.cal-tbl .cname b { display: block; font-size: 13.5px; line-height: 1.25; }
.cal-tbl .cname span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tbl .dev-cell { height: 40px; min-width: 72px; font-size: 14.5px; }
.cal-tbl .btn-sm { height: 40px; padding: 0 14px; font-size: 13px; }
.cal-tbl tr.calied td { background: #fbfdfa; }
.cal-sum { display: flex; align-items: center; gap: 26px; padding: 4px 2px 8px; border-bottom: 1px solid var(--line); }
.cal-sum .cs { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cal-sum .cs i { font-style: normal; }
.cal-sum .cs b { font-family: var(--font-num); font-size: 20px; color: var(--ink); font-weight: 800; }
.cal-sum .cs em { font-style: normal; font-size: 11px; color: var(--muted); }
.cal-sum .cs.green b { color: var(--green); }
.cal-sum .sp { flex: 1; }

/* ============================================================
   用户登陆 login
   ============================================================ */
.login-grid { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.login-user { display: flex; flex-direction: column; gap: 14px; }
.login-user .lu-top { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel-3); }
.login-user .lu-ava { width: 60px; height: 60px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--blue); box-shadow: var(--shadow-1); flex: 0 0 auto; }
.login-user .lu-top .nm { flex: 1; min-width: 0; }
.login-user .lu-top .nm b { font-size: 21px; font-weight: 800; letter-spacing: .5px; display: block; }
.login-user .lu-top .nm span { font-size: 12.5px; color: var(--muted); display: block; margin-top: 4px; }
.role-tbl tbody td { padding-top: 8px; padding-bottom: 8px; }
.login-panel { flex: 1; min-height: 0; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.acct-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-chip { height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 128px; }
.acct-chip:hover { background: var(--panel-3); }
.acct-chip.on { border-color: var(--blue); background: var(--blue-soft); }
.acct-chip b { font-size: 13.5px; }
.acct-chip span { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pwd-display { height: 58px; border-radius: 10px; background: var(--panel-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.pwd-display .dots { font-family: var(--font-num); font-size: 30px; letter-spacing: 8px; color: var(--ink); }
.pwd-display .ph { font-size: 14px; color: var(--muted); letter-spacing: 1px; }
.pwd-display .cnt { font-size: 12px; color: var(--muted); }
.ck-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 380px; }
.ck-keypad button { height: 46px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-family: var(--font-num); font-size: 21px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ck-keypad button:hover { background: var(--panel-3); }
.ck-keypad button.ok { background: var(--dark); color: #fff; border-color: var(--dark); font-family: var(--font-sans); font-size: 16px; }
.ck-keypad button.fn { background: var(--panel-3); font-family: var(--font-sans); font-size: 14px; }
.role-tbl tbody td { padding-top: 6px !important; padding-bottom: 6px !important; font-size: 13.5px; }
.login-msg { min-height: 22px; font-size: 13px; color: var(--muted); }
.login-msg.err { color: var(--red); }
.login-msg.ok { color: var(--green); }

/* ============================================================
   帮助与故障诊断 help
   ============================================================ */
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; flex: 1; min-height: 0; }
.help-panel { min-height: 0; }
.help-tbl tbody td { padding-top: 8px; padding-bottom: 8px; text-align: left; }
.help-tbl tbody td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.help-list { display: flex; flex-direction: column; gap: 12px; }
.help-item { display: flex; gap: 12px; }
.help-item .hi-no { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-3); color: var(--ink-3); font-family: var(--font-num); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 2px; }
.help-item .hi-t { flex: 1; min-width: 0; }
.help-item .hi-t b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.help-item .hi-t p { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.contact-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.contact-item { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border-radius: 10px; background: var(--panel-3); }
.contact-item .ci { width: 38px; height: 38px; border-radius: 9px; background: #fff; color: var(--blue-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.contact-item .ct { min-width: 0; }
.contact-item .ct span { display: block; font-size: 11.5px; color: var(--muted); }
.contact-item .ct b { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; word-break: break-all; }
.ver-line { display: flex; align-items: center; gap: 18px; font-size: 12.5px; color: var(--muted); }
.ver-line b { color: var(--ink-2); font-family: var(--font-num); font-size: 13.5px; }