/* Feeder HMI 原型 D2 — claude-design-proposed; 基于 design-system tokens.css */
html,body{height:100%}
#app{height:100%}
/* RU-014: 取消 1100px 最小宽 —— 尺度改由根字号等比收缩承担，页面本体永不横滚 */
.shell{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;overflow:hidden}
button{font-family:var(--font-ui)}

/* ── 顶部全局区 ─────────────────────────── */
.hdr{display:flex;align-items:center;gap:var(--sp-5);padding:.625rem var(--sp-5);background:var(--bg-card);border-bottom:1px solid var(--line)}
/* RU-016 顶部称条左右滑动：全部计量称渲染在一条轨道上，--hdr-count 决定同时可见几台；
   ‹ › 滑动一屏，触摸/鼠标可直接横向拖滑；不溢出时箭头自动隐藏。 */
.hdr-feeders{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.hdr-feeders .ftrack{display:flex;gap:var(--sp-2);overflow-x:auto;overflow-y:hidden;/* 不设 scroll-behavior:smooth —— 那会让拖滑变成动画、跟手感尽失；平滑只用在 ‹ › 按钮的 scrollBy 上 */
  touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none;
  max-width:calc(var(--hdr-count,6) * (max(44px,3.25rem) + var(--sp-2)))}
.hdr-feeders .ftrack::-webkit-scrollbar{display:none}
.hdr-feeders .ftrack .ficon{flex:none}
.fslide{flex:none;min-width:1.75rem;height:max(44px,3.5rem);border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:var(--fs-20);line-height:1;cursor:pointer;padding:0}
.fslide:hover:not([disabled]){border-color:var(--c-sel);color:var(--c-sel)}
.fslide[disabled]{color:var(--ink-dis);cursor:not-allowed;background:var(--bg-well)}
.fslide[hidden]{display:none}
.ficon{position:relative;width:max(44px,3.25rem);height:max(44px,3.5rem);border:2px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;gap:.125rem}
.ficon:focus-visible{outline:none;box-shadow:var(--focus)}
.ficon .strip{width:100%;height:.4375rem;border-radius:3px 3px 0 0;background:var(--c-rb-bg)}
.ficon .circle{width:1.875rem;height:1.875rem;border-radius:50%;border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:700;color:var(--ink-2);background:#fff}
.ficon .tag{font-size:.625rem;line-height:1;color:var(--ink-3)}
.ficon[data-inline="1"]{border-color:var(--c-rb);background:var(--c-rb-bg)}
.ficon[data-run="running"] .circle{background:var(--c-run);border-color:var(--c-run);color:#fff}
.ficon[data-refill="1"] .strip{background:var(--c-ry);animation:pulse 1.2s infinite}
.ficon[data-alarm="1"]{border-color:var(--c-alarm);animation:flash-line 1s infinite}
.ficon[data-sel="1"]{box-shadow:0 0 0 3px var(--c-sel)}
.ficon[data-comm="failed"]{border-style:dashed;background:var(--c-off-bg)}
.ficon[data-comm="failed"] .circle{background:var(--c-off-bg);border-color:var(--c-off-line);color:var(--ink-dis)}
@keyframes pulse{50%{opacity:.45}}
@keyframes flash-line{50%{border-color:var(--c-alarm-line)}}
@keyframes flash-bg{50%{background:var(--c-alarm-bg)}}
.hdr-title{flex:1;text-align:center;min-width:0}
.hdr-title h1{margin:0;font-size:var(--fs-24);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-title .sub{font-size:var(--fs-12);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-right{display:flex;align-items:center;gap:var(--sp-3)}
/* G-19a (R1 §2): 当前页标题展示在顶部右侧 */
.hdr-right .hdr-pagetitle{margin:0;font-size:var(--fs-20);line-height:1.15;white-space:nowrap;max-width:16.25rem;overflow:hidden;text-overflow:ellipsis;padding-right:var(--sp-3);border-right:1px solid var(--line)}
.hdr-clock{font-size:var(--fs-14);color:var(--ink-2);text-align:right;min-width:8.25rem}
.bell{position:relative;width:max(44px,3.25rem);height:max(44px,3.25rem);border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.25rem;color:var(--ink-2)}
.bell[data-on="1"]{border-color:var(--c-alarm);color:var(--c-alarm);animation:flash-bg 1s infinite}
.bell .cnt{position:absolute;top:-.4375rem;right:-.4375rem;min-width:1.25rem;height:1.25rem;border-radius:var(--r-full);background:var(--c-alarm);color:#fff;font-size:.75rem;line-height:1.25rem;padding:0 .25rem}

/* 徽标: 文本+图标+形状, 不依赖颜色 */
.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--r-full);font-size:var(--fs-14);font-weight:600;border:1.5px solid;white-space:nowrap}
.badge .dot{width:.625rem;height:.625rem;display:inline-block}
.b-run{color:var(--c-run);background:var(--c-run-bg);border-color:var(--c-run-line)}.b-run .dot{border-radius:50%;background:var(--c-run)}
.b-stop{color:var(--ink-2);background:var(--bg-well);border-color:var(--line-strong)}.b-stop .dot{background:var(--ink-3)}
.b-alarm{color:var(--c-alarm);background:var(--c-alarm-bg);border-color:var(--c-alarm-line)}.b-alarm .dot{background:var(--c-alarm);clip-path:polygon(50% 0,100% 100%,0 100%)}
.b-warn{color:var(--c-warn);background:var(--c-warn-bg);border-color:var(--c-warn-line)}.b-warn .dot{background:var(--c-warn);clip-path:polygon(50% 0,100% 100%,0 100%)}
.b-off{color:var(--c-off);background:var(--c-off-bg);border-color:var(--c-off-line);border-style:dashed}.b-off .dot{background:var(--c-off);clip-path:polygon(0 0,100% 0,100% 25%,0 25%,0 75%,100% 75%,100% 100%,0 100%)}
.b-sel{color:var(--c-sel);background:var(--c-sel-bg);border-color:var(--c-sel-line)}.b-sel .dot{border-radius:50%;border:3px solid var(--c-sel)}
.b-rb{color:var(--c-rb);background:var(--c-rb-bg);border-color:var(--c-rb-line)}.b-rb .dot{background:var(--c-rb)}
.b-ry{color:var(--c-ry);background:var(--c-ry-bg);border-color:var(--c-ry-line)}.b-ry .dot{background:var(--c-ry);animation:pulse 1.2s infinite}
.b-stale{color:var(--c-warn);background:var(--c-warn-bg);border-color:var(--c-warn-line);border-style:dashed}

/* 横幅(通讯失败/权限过期) */
.banner{display:flex;align-items:center;gap:var(--sp-3);padding:.625rem var(--sp-5);font-weight:600}
.banner button{margin-left:auto}
.banner.warn{background:var(--c-warn-bg);color:var(--c-warn);border-bottom:1px solid var(--c-warn-line)}
.banner.alarm{background:var(--c-alarm-bg);color:var(--c-alarm-strong);border-bottom:1px solid var(--c-alarm-line)}

/* ── 内容区 ─────────────────────────── */
/* RU-014 滚动策略：页面本体禁止横滚（宽表用 .xscroll 局部横滚）；纵向允许，
   但主页面/配置页面应靠缩放塞下，纵滚仅为条目数不定的列表页兜底 */
.outlet{overflow:hidden auto;padding:var(--sp-5);scroll-behavior:auto}
.xscroll{overflow-x:auto;overflow-y:hidden}
.page{max-width:117.5rem;margin:0 auto}
.page-head{display:flex;align-items:baseline;gap:var(--sp-3);margin:0 0 var(--sp-4)}
.page-head h2{margin:0;font-size:var(--fs-24)}
.page-head .note{font-size:var(--fs-12);color:var(--ink-3)}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}

/* 设备卡(01/20) */
.fcard{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);cursor:pointer;border:1px solid var(--line)}
.fcard:hover{border-color:var(--c-sel-line)}
.fcard[data-sel="1"]{border:2px solid var(--c-sel);box-shadow:0 0 0 3px var(--c-sel-bg)}
.fcard[data-off="1"]{background:var(--bg-well)}
.fcard-top{display:flex;align-items:center;gap:var(--sp-2)}
.fcard-top h3{margin:0;font-size:var(--fs-20);flex:1}
.chips{display:flex;gap:.375rem;flex-wrap:wrap}
.chip{font-size:var(--fs-12);font-weight:600;padding:.125rem .5rem;border-radius:.25rem;border:1px solid}
.chip-line{color:var(--c-rb);border-color:var(--c-rb-line);background:var(--c-rb-bg)}
.chip-lock{color:var(--ink-2);border-color:var(--line-strong);background:var(--bg-well)}
.chip-new{color:var(--c-alarm);border-color:var(--c-alarm-line);background:var(--c-alarm-bg)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2) var(--sp-3)}
.metric .lb{font-size:var(--fs-12);color:var(--ink-3)}
.metric .v{font-size:var(--fs-20);font-weight:700;font-variant-numeric:tabular-nums}
.metric .v .u{font-size:var(--fs-12);font-weight:500;color:var(--ink-3);margin-left:.1875rem}
.metric[data-stale="1"] .v{color:var(--ink-dis)}
.metric[data-stale="1"] .lb::after{content:" · 过期";color:var(--c-warn)}
.metric-lg .v{font-size:var(--fs-28)}
.trendbox{position:relative;height:7.5rem}
/* C-8（统一交互 P2）：主页概览分屏轨道 —— 翻页与拖滑并存，每屏一格网格、卡片宽度自适应 */
.cards-track{display:flex;gap:var(--sp-4);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none}
.cards-track::-webkit-scrollbar{display:none}
.cards-page{flex:0 0 100%;scroll-snap-align:start;display:grid;gap:var(--sp-4);align-content:start}

/* RU-014 数量驱动收缩（PB-10 第二轴）：单屏计量称数量越多，卡内字号/留白/缩略趋势收得越紧。
   与视口驱动的全局缩放叠加 —— 视口决定基准尺度，数量决定同一视口下的密度档位。 */
.cards[data-n="4"] .fcard,.cards[data-n="6"] .fcard{padding:var(--sp-3);gap:var(--sp-2)}
.cards[data-n="4"] .fcard-top h3,.cards[data-n="6"] .fcard-top h3{font-size:var(--fs-18)}
.cards[data-n="4"] .metric .v,.cards[data-n="6"] .metric .v{font-size:var(--fs-18)}
.cards[data-n="4"] .trendbox,.cards[data-n="6"] .trendbox{height:6rem}
.cards[data-n="8"] .fcard{padding:var(--sp-2);gap:var(--sp-1)}
.cards[data-n="8"] .fcard-top h3{font-size:var(--fs-16)}
.cards[data-n="8"] .metric .v{font-size:var(--fs-16)}
.cards[data-n="8"] .metric-lg .v{font-size:var(--fs-20)}
.cards[data-n="8"] .trendbox{height:4.5rem}
.trendbox canvas{position:absolute;inset:0;width:100%;height:100%}
/* G-30② (RU-009①) 图例随可视区自适应：字号/色条宽度 clamp，窄屏整项换行、不挤压不截断 */
.trend-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:clamp(.6875rem,.45vw + .375rem,.875rem);color:var(--ink-2)}
.trend-legend i{display:inline-block;width:clamp(.75rem,1vw,1.125rem);height:0;border-top:3px solid;margin-right:.25rem;vertical-align:middle}
.trend-legend span,.trend-legend .sw{white-space:nowrap}
.trend-legend .sw{display:flex;align-items:center;gap:.375rem;cursor:pointer}
.trend-legend .sw input{width:1.125rem;height:1.125rem}
.stale-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(241,244,247,.72);color:var(--c-warn);font-weight:600;border-radius:var(--r-sm)}
/* RU-012 时间域缩略轴（页 28）：中部拖动平移、两端拖柄改窗长；touch-action:none 保触摸拖动 */
.brush{position:relative;height:2.75rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-well);touch-action:none;user-select:none;-webkit-user-select:none}
.brush canvas{position:absolute;inset:0;width:100%;height:100%}
.bwin{position:absolute;top:0;bottom:0;min-width:.75rem;background:rgba(29,95,191,.10);border:1px solid var(--c-sel-line);border-radius:4px;pointer-events:none}
.bh{position:absolute;top:50%;transform:translateY(-50%);width:.5rem;height:1.625rem;background:#fff;border:1px solid var(--c-sel);border-radius:3px}
.bl{left:-.25rem}.br{right:-.25rem}
.bhint{position:absolute;right:.5rem;top:.1875rem;font-size:.6875rem;color:var(--ink-3);pointer-events:none}
/* 批次2（页28 交互层）: 点击式图例 chip / 图表显示设置面板 / 游标 tooltip / 概览表 */
.lgchip{display:flex;align-items:center;gap:.375rem;border:0;background:none;padding:.125rem .25rem;font:inherit;color:inherit;cursor:pointer;border-radius:.25rem}
.lgchip:hover{background:var(--bg-well)}
.lgchip.off{opacity:.38}
.lgchip.off i{border-color:var(--ink-3)!important}
.lgchip i{display:inline-block;width:clamp(.75rem,1vw,1.125rem);height:0;border-top:3px solid}
.tpanel{position:absolute;right:var(--sp-5);top:3.25rem;z-index:30;width:min(20rem,86%);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(16,24,40,.14);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.tpanel[hidden]{display:none}
.tp-h{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.tp-sec{margin-top:var(--sp-2);font-size:var(--fs-12);color:var(--ink-3)}
.tp-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.tp-card{border:1px solid var(--line);border-radius:var(--r-sm);padding:.375rem .5rem}
.tpanel .sw{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:var(--fs-13,.8125rem)}
.tpanel .sw input{width:1.125rem;height:1.125rem}
.tpanel .sw i{display:inline-block;width:.875rem;height:0;border-top:3px solid}
.ttip{position:absolute;top:.875rem;z-index:20;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 4px 14px rgba(16,24,40,.12);padding:.5rem .625rem;font-size:var(--fs-12);pointer-events:none;min-width:10.625rem}
.ttip[hidden]{display:none}
.tt-t{color:var(--ink-3);margin-bottom:.25rem}
.tt-r{display:flex;align-items:center;gap:.375rem;line-height:1.8}
.tt-r i{width:.625rem;height:.1875rem;border-radius:1px;flex:none}
.tt-r b{margin-left:auto;padding-left:.75rem;font-variant-numeric:tabular-nums}
.tt-r.off{opacity:.45}
.ovtable{width:100%;border-collapse:collapse;font-size:var(--fs-12)}
.ovtable th{text-align:left;color:var(--ink-3);font-weight:500;padding:.25rem .5rem;border-bottom:1px solid var(--line)}
.ovtable td{padding:.25rem .5rem;border-bottom:1px solid var(--bg-well);font-variant-numeric:tabular-nums}
.ovtable td i{display:inline-block;width:.625rem;height:.1875rem;border-radius:1px;margin-right:.375rem;vertical-align:middle}

/* 汇总条(01 底部) */
.linebar{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-4)}
.linebar .metric{min-width:10.625rem}
.linebar .grow{flex:1}

/* 按钮 */
.btn{min-height:var(--hit-min);padding:0 var(--sp-6);border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);font-size:var(--fs-18);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn:hover{border-color:var(--ink-3)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-pri{background:var(--c-sel);border-color:var(--c-sel);color:#fff}.btn-pri:hover{background:var(--c-sel-strong);border-color:var(--c-sel-strong)}
.btn-run{background:var(--c-run);border-color:var(--c-run);color:#fff}
.btn-danger{background:#fff;border-color:var(--c-alarm-line);color:var(--c-alarm)}.btn-danger:hover{background:var(--c-alarm-bg);border-color:var(--c-alarm)}
.btn-sm{min-height:var(--hit-min);font-size:var(--fs-14);padding:0 var(--sp-4)}
.btn[disabled]{background:var(--bg-well);border-color:var(--line);color:var(--ink-dis);cursor:not-allowed}
.btn .spinner{width:1rem;height:1rem;border:2.5px solid rgba(0,0,0,.15);border-top-color:currentColor;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.why{font-size:var(--fs-12);color:var(--ink-3);display:flex;align-items:center;gap:.25rem}
.why::before{content:"ⓘ"}
.btn-wrap{display:flex;flex-direction:column;gap:.25rem;align-items:stretch}

/* 表单 */
.form{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5)}
.field{display:grid;grid-template-columns:11.25rem 1fr;gap:var(--sp-2) var(--sp-4);align-items:center}
.field .lb{font-size:var(--fs-16);color:var(--ink-2);text-align:right}
.field .ctl{display:flex;align-items:center;gap:var(--sp-2)}
.field input,.field select{min-height:var(--hit-min);font:inherit;font-variant-numeric:tabular-nums;padding:0 var(--sp-3);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);width:13.75rem}
.field input:focus-visible,.field select:focus-visible{outline:none;border-color:var(--c-sel);box-shadow:var(--focus)}
.field[data-state="dirty"] input,.field[data-state="dirty"] select{border-color:var(--c-warn);background:#FFFDF4}
.field[data-state="invalid"] input{border-color:var(--c-alarm);background:var(--c-alarm-bg)}
.field[data-state="readonly"] input{background:var(--bg-well);color:var(--ink-2)}
.field .u{color:var(--ink-3)}
.field .help{grid-column:2;font-size:var(--fs-12);color:var(--ink-3)}
.field .err{grid-column:2;font-size:var(--fs-14);color:var(--c-alarm);font-weight:600}
.field .err::before{content:"▲ "}
.dirty-flag{font-size:var(--fs-12);color:var(--c-warn);font-weight:700}

/* 列表(08) */
.list{display:flex;flex-direction:column}
.lrow{display:grid;grid-template-columns:6rem 6.875rem 8.125rem 1fr 8.125rem;gap:var(--sp-3);align-items:center;padding:.75rem var(--sp-4);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.lrow.hd{font-size:var(--fs-12);color:var(--ink-3);border-bottom-color:var(--line-strong);position:sticky;top:0;background:var(--bg-card)}
.lrow[data-target="1"]{background:var(--c-sel-bg);box-shadow:inset 3px 0 0 var(--c-sel)}
.lrow .txt{min-width:0;overflow-wrap:anywhere}
.empty{padding:var(--sp-10);text-align:center;color:var(--ink-3)}
.empty .big{font-size:var(--fs-20);color:var(--ink-2);margin-bottom:.375rem}

/* 生产线拓扑(02) */
.busmap{padding:var(--sp-6) var(--sp-6) var(--sp-8)}
/* C-10：拓扑瓦片轨道 —— 默认 6 台占满宽度，更多则在轨道内左右滑动（箭头在 .busnav） */
.busrow{display:flex;gap:var(--sp-4);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.busrow::-webkit-scrollbar{display:none}
.busrow .btile{flex:0 0 calc((100% - 5 * var(--sp-4)) / 6)}
.busnav{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-bottom:var(--sp-2)}
.busnav[hidden]{display:none}
.btile{position:relative;border:2px solid var(--line-strong);border-radius:var(--r-md);background:#fff;padding:var(--sp-3);display:flex;flex-direction:column;align-items:center;gap:.375rem;cursor:pointer;min-height:9.375rem;justify-content:center}
.btile:hover{border-color:var(--c-sel-line)}
.btile:focus-visible{outline:none;box-shadow:var(--focus)}
.btile h4{margin:0;font-size:var(--fs-18)}
.btile .gear{font-size:2.125rem;line-height:1}
.btile[data-off="1"]{background:var(--c-off-bg);border-style:dashed;color:var(--c-off)}
.btile[data-inline="1"]{border-color:var(--c-rb)}
.btile[data-alarm="1"]{animation:flash-line 1s infinite;border-color:var(--c-alarm)}
.btile .stub{position:absolute;bottom:-1.625rem;left:50%;width:.25rem;height:1.625rem;background:var(--line-strong);transform:translateX(-50%)}
.btile[data-off="1"] .stub{background:repeating-linear-gradient(180deg,var(--c-off-line) 0 4px,transparent 4px 8px)}
.btile[data-inline="1"] .stub{background:var(--c-rb)}
.busline{height:.375rem;border-radius:3px;background:var(--line-strong);margin:1.625rem .5rem}
.busline.on{background:var(--c-rb)}
.buslabel{text-align:center;font-size:var(--fs-12);color:var(--ink-3);margin-top:.375rem}

/* 功能入口网格 */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.fentry{min-height:6.875rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);font-size:var(--fs-18);font-weight:600;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-card)}
.fentry:hover{border-color:var(--c-sel-line)}
.fentry:focus-visible{outline:none;box-shadow:var(--focus)}
.fentry .sub{font-size:var(--fs-12);font-weight:500;color:var(--ink-3)}
.fentry[disabled]{background:var(--bg-well);color:var(--ink-dis);cursor:not-allowed;box-shadow:none}

/* 权限页(12) */
.rolecard{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4);align-items:center;padding:var(--sp-5)}
.rolecard h3{margin:0;font-size:var(--fs-20)}
.rolecard .desc{color:var(--ink-3);font-size:var(--fs-14)}
.rolecard[data-cur="1"]{border:2px solid var(--c-sel);box-shadow:0 0 0 3px var(--c-sel-bg)}

/* ── 底部主导航 ─────────────────────────── */
.nav{display:flex;gap:var(--sp-3);padding:.625rem var(--sp-5);background:var(--bg-card);border-top:1px solid var(--line)}
.navbtn{flex:1;min-height:max(44px,3.5rem);border-radius:var(--r-md);border:1.5px solid var(--line);background:#fff;font-size:var(--fs-18);font-weight:700;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem}
.navbtn:hover{border-color:var(--c-sel-line);color:var(--ink)}
.navbtn:focus-visible{outline:none;box-shadow:var(--focus)}
.navbtn[data-cur="1"]{background:var(--c-sel);border-color:var(--c-sel);color:#fff}
.navbtn .aflag{width:.625rem;height:.625rem;border-radius:50%;background:var(--c-alarm);animation:pulse 1s infinite}

/* ── 反馈层 ─────────────────────────── */
.dlg-veil{position:fixed;inset:0;background:rgba(23,32,43,.42);display:flex;align-items:center;justify-content:center;z-index:60}
.dlg{width:35rem;max-width:92vw;max-height:86vh;overflow:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:var(--sp-6)}
.dlg h3{margin:0 0 var(--sp-2);font-size:var(--fs-24)}
.dlg .impact{background:var(--bg-well);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;font-size:var(--fs-14);color:var(--ink-2)}
.dlg .impact b{color:var(--ink)}
.dlg-btns{display:flex;gap:var(--sp-3);justify-content:flex-end;margin-top:var(--sp-5)}
.dlg .pw{width:100%;min-height:var(--hit-min);font:inherit;padding:0 var(--sp-3);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);margin-top:var(--sp-2)}
.dlg .err{color:var(--c-alarm);font-weight:600;margin-top:var(--sp-2)}.dlg .err::before{content:"▲ "}
.per-dev{display:flex;flex-direction:column;gap:.375rem;margin-top:var(--sp-3)}
.per-dev .row{display:flex;align-items:center;gap:var(--sp-3);font-variant-numeric:tabular-nums}
.per-dev .row .nm{width:5.625rem;font-weight:600}

.toasts{position:fixed;right:1.25rem;top:5.5rem;display:flex;flex-direction:column;gap:.625rem;z-index:70;max-width:26.25rem}
.toast{background:#fff;border:1.5px solid var(--line-strong);border-left-width:6px;border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:.75rem 1rem;font-size:var(--fs-14)}
.toast b{display:block;font-size:var(--fs-16)}
.toast.ok{border-left-color:var(--c-run)}
.toast.err{border-left-color:var(--c-alarm)}
.toast.warn{border-left-color:var(--c-warn)}
.toast.info{border-left-color:var(--c-sel)}
.toast .det{color:var(--ink-3);margin-top:.25rem;white-space:pre-line}

/* 演示场景抽屉 */
.drawer-tab{position:fixed;right:0;top:45%;z-index:50;writing-mode:vertical-rl;padding:.875rem .5rem;border-radius:.5rem 0 0 .5rem;border:1px solid var(--line-strong);border-right:none;background:var(--ink);color:#fff;font-size:var(--fs-14);letter-spacing:2px;cursor:pointer}
.drawer{position:fixed;right:0;top:0;bottom:0;width:21.25rem;background:#fff;border-left:1px solid var(--line-strong);box-shadow:var(--shadow-pop);z-index:55;padding:var(--sp-5);overflow:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.drawer h3{margin:0;font-size:var(--fs-18)}
.drawer .grp{display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--line);padding-top:var(--sp-3)}
.drawer .grp .t{font-size:var(--fs-12);color:var(--ink-3);font-weight:700}
.drawer .btn{justify-content:flex-start;font-size:var(--fs-14);min-height:var(--hit-min);padding:0 var(--sp-3)}
.drawer .sw{display:flex;align-items:center;gap:.625rem;min-height:var(--hit-min);font-size:var(--fs-14);cursor:pointer}
.drawer .sw input{width:1.25rem;height:1.25rem}
.drawer .note{font-size:var(--fs-12);color:var(--ink-3)}

/* 进度条 / 范围段控件 */
.progress{height:.625rem;background:var(--bg-well);border:1px solid var(--line);border-radius:.3125rem;overflow:hidden}
.progress i{display:block;height:100%;background:var(--c-sel);border-radius:.3125rem;transition:width .5s linear}
.segbar{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* RU-014 短视口密度补偿：≤880 高的真机档位（1280×720 / 1280×800）收紧页面外边距、标题行距与表单行距，
   把「命中区保底 44px」相对等比缩放多占的纵向预算补回来 —— 正常页面在该档位仍不出现纵向滚动。 */
@media (max-height:880px){
  .outlet{padding:var(--sp-3) var(--sp-5)}
  .page-head{margin:0 0 var(--sp-2)}
  .form{gap:var(--sp-2);padding:var(--sp-3) var(--sp-4)}
  .field{gap:var(--sp-1) var(--sp-4)}
  .card .page-head{padding-top:var(--sp-3)!important}
  .rolecard{padding:var(--sp-3) var(--sp-5)}
  .lrow{padding:.5rem var(--sp-4)}
}

/* RU-014 自适应指示器（演示用，可在演示抽屉关闭）：拖拽窗口时实时显示缩放与收敛档位 */
.fitchip{position:fixed;left:var(--sp-3);bottom:var(--sp-3);z-index:80;background:rgba(23,32,43,.88);color:#fff;
  border-radius:var(--r-full);padding:.375rem .875rem;font-size:var(--fs-12);font-variant-numeric:tabular-nums;
  box-shadow:var(--shadow-pop);pointer-events:none;white-space:nowrap}
.fitchip b{color:#7FD1FF;margin-right:.5rem}
.fitchip[hidden]{display:none}

/* 页 52 喂料器总览（批量管理宽表，RU-015）：列数随变量数增长 → 表格容器内左右滚动，页面本体不横滚 */
.btable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--fs-14)}
.btable th,.btable td{border:1px solid var(--line);padding:.5rem .75rem;text-align:left;white-space:nowrap}
.btable thead th{background:var(--bg-well);color:var(--ink-2);font-weight:600;cursor:pointer;position:sticky;top:0;z-index:1}
.btable thead th:hover{background:var(--c-sel-bg);color:var(--c-sel)}
.btable thead th[data-cur="1"]{background:var(--c-sel-bg);color:var(--c-sel);box-shadow:inset 0 -3px 0 var(--c-sel)}
.btable tbody th{background:var(--bg-card);font-weight:600;position:sticky;left:0;z-index:1}
.btable td{cursor:pointer}
.btable td:hover{background:var(--c-sel-bg)}
.btable td[data-sel="1"]{background:var(--c-sel);color:var(--c-sel-ink);font-weight:700}
.btable tr[data-off="1"] td,.btable tr[data-off="1"] th{color:var(--ink-dis);background:var(--bg-well)}
.btable td[data-ro="1"]{color:var(--ink-3)}
.bt-wrap{max-height:100%;overflow:auto}
.bt-sel{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-sel-line);background:var(--c-sel-bg);border-radius:var(--r-md);margin-top:var(--sp-3)}
.bt-sel .k{color:var(--ink-2)}
.bt-sel .v{font-size:var(--fs-20);font-weight:700}
.bt-pager{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.bt-info{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);background:var(--bg-well);
  margin-top:var(--sp-3);font-size:var(--fs-14);color:var(--ink-2);display:grid;grid-template-columns:auto 1fr;gap:.25rem var(--sp-4)}
.bt-info b{color:var(--ink)}
/* 类的 display:grid 会盖掉 hidden 的 UA 样式（同 .tpanel 的坑），显式补一条 */
.bt-info[hidden]{display:none}

/* D-13（统一交互 P5 / UI-2.3）：条目数不定的列表 —— 表头吸顶 + 区域内纵向滚动，
   不再靠整页收敛把列表压进视口。高度上限按内容区可用高度扣掉页头与操作区。 */
.listbox{max-height:calc(100vh - 18rem);overflow-y:auto;overflow-x:hidden}
@media (max-height:880px){.listbox{max-height:calc(100vh - 18rem)}}

/* ── P8 管理列表（RU-019/020 · UI-2.8）：列区横滑 + 首尾列冻结 + 表头 ‹ › 步进 ──
   结构：.ftbl（双轴滚动容器，表头 sticky top）> .frow（grid，宽 max-content）；
   冻结列用 sticky left/right，偏移 = 相邻固定列宽之和（--fw-* 常量，改宽度必须同步偏移）。 */
.ftbl{--fw-idx:3.2rem;--fw-name:12rem;--fw-gut:var(--hit-min);--fw-sum:4.6rem;--fw-rem:9.5rem;--fw-ops:18.5rem;--fw-col:10rem;
  flex:1;min-height:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;overscroll-behavior:contain}
.ftbl::-webkit-scrollbar{display:none}
.ftbl.noh{overflow-x:hidden}
.ftbl.dragging{cursor:grabbing}
.frow{display:grid;gap:0;align-items:center;width:max-content;min-width:100%;border-bottom:1px solid var(--line);background:var(--frow-bg,var(--bg-card))}
.frow .fc{padding:.5rem;min-width:0}
.frow .fz{position:sticky;z-index:2;background:var(--frow-bg,var(--bg-card))}
.frow[data-arch="1"]{--frow-bg:var(--bg-well)}
.fz-idx{left:0;padding-left:var(--sp-4)}
.fz-name{left:var(--fw-idx)}
.fz-gl{left:calc(var(--fw-idx) + var(--fw-name));border-right:1px solid var(--line);height:100%;display:flex;align-items:center;justify-content:center}
.fz-gr{right:calc(var(--fw-sum) + var(--fw-rem) + var(--fw-ops));border-left:1px solid var(--line);height:100%;display:flex;align-items:center;justify-content:center}
.fz-sum{right:calc(var(--fw-rem) + var(--fw-ops))}
.fz-rem{right:var(--fw-ops)}
.fz-ops{right:0;padding-right:var(--sp-4)}
.fz-ops .btn{white-space:nowrap;flex:none;padding:0 var(--sp-3)}
.fthead{position:sticky;top:0;z-index:5;background:var(--bg-well);border-bottom:1.5px solid var(--line-strong);font-size:var(--fs-14);font-weight:600;color:var(--ink-2)}
.fthead .fz{background:var(--bg-well);z-index:6}
.fstep{width:100%;min-height:var(--hit-min);border:1px solid var(--line);background:var(--bg-card);border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--fs-20);line-height:1;padding:0;cursor:pointer}
.fstep:hover:not([disabled]){border-color:var(--c-sel);color:var(--c-sel)}
.fstep[disabled]{color:var(--ink-dis);cursor:not-allowed;background:var(--bg-well)}
.fstep[data-hide]{visibility:hidden}
.fcell-ratio{display:flex;flex-direction:column;align-items:center;line-height:1.25;text-align:center}
.fcell-ratio .mt{font-size:var(--fs-12);color:var(--ink-3);white-space:nowrap;max-width:9.4rem;overflow:hidden;text-overflow:ellipsis}
/* 控制行（P9 控件语义族）：一行容纳「操作族 + 筛选族 + 搜索」，压高节省纵向空间。
   命中下限走 UI-3.2 的 40px 密集档（本行为次级控件密集区，不适用 44px 基准）。 */
.fctl{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:var(--sp-2) 0}
.fctl .btn{min-height:var(--hit-dense);padding:0 var(--sp-3);font-size:var(--fs-14)}
.fctl .btn-wrap{display:inline-flex;align-items:center;gap:.375rem}
.fctl .vsep{width:1px;align-self:stretch;background:var(--line-strong);margin:0 .375rem}
/* 筛选族 = 墨灰胶囊（与蓝色操作族在色相上分家，避免"筛选看着像下发命令"） */
.fgrp{display:inline-flex;align-items:center;gap:.375rem}
.fgrp .flb{font-size:var(--fs-12);color:var(--ink-3);font-weight:600}
.fpills{display:inline-flex;gap:.125rem;background:var(--bg-well);border:1px solid var(--line);border-radius:var(--r-full);padding:.125rem}
.fpills button{min-height:var(--hit-dense);padding:0 var(--sp-3);border:0;background:none;border-radius:var(--r-full);font-size:var(--fs-14);font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.fpills button[data-on]{background:var(--ink-2);color:#fff}
.fpills button:focus-visible{outline:none;box-shadow:var(--focus)}
.fpills .cnt{font-size:var(--fs-12);opacity:.75;margin-left:.25rem}
/* 搜索族 = 圆角胶囊输入（全系统统一形态：🔍 前缀 + 占位说明 + ✕ 清除） */
.fsearch{margin-left:auto;display:inline-flex;align-items:center;gap:.25rem;background:var(--bg-card);border:1.5px solid var(--line-strong);border-radius:var(--r-full);padding:0 .25rem 0 .625rem;min-height:var(--hit-dense)}
.fsearch .ico{color:var(--ink-3);font-size:var(--fs-12)}
.fsearch input{border:0;outline:none;background:none;font:inherit;font-size:var(--fs-14);width:11rem;min-height:calc(var(--hit-dense) - 4px)}
.fsearch .clr{border:0;background:var(--bg-well);border-radius:var(--r-full);width:1.75rem;height:1.75rem;color:var(--ink-3);cursor:pointer;font-size:var(--fs-12);line-height:1}
.fsearch .clr[hidden]{display:none}
/* 分页族（P10）：整簇靠右，顺序 = 共 N 条 · 每页行数 · ‹ 第 n/m 页 › */
.fpager{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);padding:.25rem var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-14);color:var(--ink-2);flex-wrap:wrap}
.fpager .tot{color:var(--ink-3);font-size:var(--fs-12)}
.fpager select{min-height:var(--hit-dense);font:inherit;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 .25rem}
.fpager .pbtn{min-height:var(--hit-dense);min-width:var(--hit-dense);border:1px solid var(--line-strong);background:var(--bg-card);border-radius:var(--r-sm);font-size:var(--fs-16);line-height:1;color:var(--ink-2);cursor:pointer}
.fpager .pbtn:hover:not([disabled]){border-color:var(--c-sel);color:var(--c-sel)}
.fpager .pbtn[disabled]{color:var(--ink-dis);background:var(--bg-well);cursor:not-allowed}
/* 行内 ⋯ 溢出菜单 */
.fpop{position:fixed;z-index:40;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--shadow-pop);min-width:14rem;padding:.375rem}
.fpop button{display:flex;align-items:center;width:100%;min-height:var(--hit-min);padding:0 var(--sp-4);background:none;border:0;border-radius:var(--r-sm);font-size:var(--fs-14);font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer}
.fpop button:hover:not([disabled]){background:var(--c-sel-bg);color:var(--c-sel)}
.fpop button.danger{color:var(--c-alarm)}
.fpop button.danger:hover:not([disabled]){background:var(--c-alarm-bg);color:var(--c-alarm)}
.fpop button[disabled]{color:var(--ink-dis);cursor:not-allowed}
.fpop .why{font-size:var(--fs-12);color:var(--ink-dis);font-weight:400;margin-left:auto;padding-left:var(--sp-3)}
/* 说明：上限按「视口高 − 页头/操作区/外边距」估算；短视口再收 3rem，使列表页在 1280×720 下
   不必触发 L1 内容收敛（UI-2.3 优先于 UI-1.3）。 */