/* 作者：黃立銘
 * 協作：穩懋半導體廠務 陳致先
 * Copyright (c) 2026 黃立銘. All rights reserved.
 */
:root {
  --bg: #c9ccd1; --panel: #eef0f3; --ink: #15181d; --muted: #5b6270;
  --blue: #1a4fc4; --navy: #0f2f7a; --line: #8a919c;
  --run: #1fb14a; --stop: #9aa1ab; --fault: #e0262b; --nfb: #f2cc00; --moving: #ff8fd0;
  --pv: #3cff5a; --pvbg: #1d2126;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #20242b; font-family: "Microsoft JhengHei", "Noto Sans TC", "PingFang TC", sans-serif; color: var(--ink); }
#app { display: flex; flex-direction: column; height: 100vh; }
#top { flex: 0 0 52px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: linear-gradient(#2358d8, #173f9e); color: #fff; }
#top .brand { font-weight: 700; letter-spacing: 1px; opacity: .85; font-size: 15px; white-space: nowrap; }
#title { flex: 1; text-align: center; font-size: 26px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#top .right { display: flex; align-items: center; gap: 12px; font-size: 14px; white-space: nowrap; }
.comm { padding: 3px 10px; border-radius: 12px; background: #555; }
.comm.ok { background: #1c8f3e; } .comm.bad { background: var(--fault); } .comm.sim { background: #b7791f; }
.user { opacity: .9; }
.bell { position: relative; width: 44px; height: 38px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; background: rgba(255,255,255,.12); cursor: pointer; padding: 5px; }
.bell svg { width: 100%; height: 100%; fill: #c9ced8; }
.bell.alarm svg { fill: #fff; } .bell.alarm { background: var(--fault); }
.bell.unack { animation: breathe 2.8s ease-in-out infinite; }
#bellcount { position: absolute; top: -6px; right: -6px; background: #fff; color: var(--fault); border-radius: 9px; font-size: 11px; font-weight: 700; padding: 0 5px; }
#bellcount:empty { display: none; }
#main { flex: 1; position: relative; background: var(--bg); overflow: hidden; }
#main > .page { position: absolute; inset: 0; overflow: auto; padding: 18px 24px; }
#main > #homepage { overflow: hidden; }   /* 首頁不出現捲軸（架構圖會自動縮小塞進畫面） */
#main > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#main > svg text { user-select: none; -webkit-user-select: none; }   /* 點文字不會被反白成藍色 */
/* 大圖左右側 上一頁 / 下一頁（廣告輪播式箭頭） */
.sidenav { position: fixed; z-index: 40; width: 56px; height: 110px; transform: translateY(-50%); border: none; border-radius: 12px; background: rgba(20, 35, 60, .28); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: .75; transition: background .15s, opacity .15s; }
.sidenav:hover { background: rgba(23, 63, 158, .82); opacity: 1; }
.sidenav:active { transform: translateY(-50%) scale(.94); }
.sidenav svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sidenav.hidden, body.edon .sidenav { display: none; }
.sidenav::after { content: attr(data-label); position: absolute; top: 100%; margin-top: 8px; white-space: nowrap; background: rgba(15, 30, 60, .92); color: #fff; font-size: 15px; font-weight: 600; padding: 5px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .15s; }
.sidenav.left::after { left: 0; }
.sidenav.right::after { right: 0; }
.sidenav:hover::after { opacity: 1; }
#nav { flex: 0 0 50px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; padding: 4px 10px; background: #2b2f36; }
#nav button { border: 1px solid #6f8fd0; background: linear-gradient(#1a4ab0, #0f2f7a); color: #fff; font-size: 18px; font-weight: 700; border-radius: 4px; cursor: pointer; font-family: inherit; white-space: nowrap; }
#nav button:active { filter: brightness(1.3); }
@media (max-width: 800px) { #nav button { font-size: 13px; } #title { font-size: 18px; } #top .brand, #clock { display: none; } }

/* SVG 共用 */
svg text { font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif; user-select: none; }
.click { cursor: pointer; }
.click:hover > .hl, .click:hover .hl { stroke: #ffd24a !important; stroke-width: 3 !important; }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinY { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes slideX { 0% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 100% { transform: translateX(-8px); } }
.blink { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breatheFill { 0%,100% { fill-opacity: 1; } 50% { fill-opacity: .35; } }
.blinkfill { animation: breatheFill 2.8s ease-in-out infinite; }
.spin { animation: spin 2.8s linear infinite; }
.mixspin { animation: spin 6.4s linear infinite; }
.spinY { transform-box: fill-box; transform-origin: center; animation: spinY 8s ease-in-out infinite; }

.slideX { animation: slideX 1.2s ease-in-out infinite; }

/* 頁面 */
.card { background: var(--panel); border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
@media (max-width: 1400px) { .grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); } }
.sysbtn { height: 80px; border-radius: 8px; border: 2px solid #6d7b91; background: linear-gradient(#fdfdfd, #dfe3ea); font-size: 24px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sysbtn small { font-weight: 400; color: var(--muted); font-size: 16px; }
.sysbtn.active { background: linear-gradient(#ff5b5b, #c41b1b); color: #fff; border-color: #8e0f0f; }
.sysbtn.active small { color: #ffe3e3; }
.sysbtn.unack { animation: breathe 2.8s ease-in-out infinite; }
.sysbtn.nodraw { opacity: .75; }
/* 首頁畫面按鈕：字小一號、按鈕間縫隙 0.3cm */
#sysgrid .sysbtn { font-size: 22px; }
#sysgrid .sysbtn small { font-size: 14px; }
@media (min-width: 1401px) { #sysgrid { grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); column-gap: 0.3cm; } #sysgrid .sysbtn { padding: 0 2px; white-space: nowrap; font-size: min(22px, 1.2vw); } }   /* 固定兩排，欄數由按鈕數決定 */   /* 按鈕之間縫隙 0.3cm，按鈕平均填滿整排 */
h2 { margin: 0 0 12px; font-size: 22px; }
table.list { width: 100%; border-collapse: collapse; background: #fff; font-size: 16px; }
table.list th { background: #2f3a4d; color: #fff; padding: 8px; text-align: left; position: sticky; top: 0; }
table.list td { padding: 8px; border-bottom: 1px solid #d8dce3; }
/* 精簡置中表格（即時警報）：固定欄寬、整張表靠中間，不撐滿畫面 */
table.list.compact { width: auto; margin: 0 auto; table-layout: fixed; }
/* 歷史警報 / 操作紀錄：字體維持、欄寬縮小集中 */
table.list.hist th, table.list.hist td { padding: 5px 8px; }
.hpager { gap: 12px; }
.hpager .hpgin { width: 64px; padding: 3px 6px; font-size: 16px; text-align: center; border: 1px solid #b9c1cd; border-radius: 5px; font-family: inherit; }
table.list.hist td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 一律一行，不換行 */
table.list.hist td.hsn { text-align: right; color: #6b7686; padding-right: 12px; }
table.list.hist tr.hblank td { color: #8a929e; text-align: center; }
table.list.hist tbody tr { height: 33px; }   /* 每列固定高度（含空白列）*/
.hpager .vcpginfo { display: inline-block; min-width: 330px; text-align: center; }   /* 頁碼字數變化時按鈕不左右移動 */
.toolbar.compact { max-width: 970px; margin-left: auto; margin-right: auto; }
tr.al-unack td { color: #fff; background: var(--fault); animation: breathe 4s ease-in-out infinite; }
tr.al-ack td { color: #fff; background: #b51d21; }
tr.al-back td { color: #0b3b66; background: #bfe3ff; animation: breatheblue 3s ease-in-out infinite; }   /* 已恢復正常、等待人員復歸：淺藍呼吸燈 */
@keyframes breatheblue { 0%, 100% { background: #d9efff; } 50% { background: #8fcbff; } }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.btn { border: 1px solid #5a6474; background: linear-gradient(#fff, #dde2ea); border-radius: 6px; padding: 7px 16px; font-size: 16px; cursor: pointer; font-family: inherit; }
.btn.primary { background: linear-gradient(#2a64e0, #173f9e); color: #fff; border-color: #0f2f7a; }
.btn.danger { background: linear-gradient(#f24a4a, #b51d21); color: #fff; border-color: #8e0f0f; }
/* 2026-10-21（測試部第 4 輪）：使用者管理「刪除」按鈕改中性藍灰（紅色只留警報）。只動表格列裡的刪除鈕，
   確認視窗的紅色「確定」按鈕（彈窗 modal，不在 #main>.page）照舊保留。 */
#main > .page .utable.uusers .btn.danger { background: linear-gradient(#5566c4, #38469a); color: #fff; border-color: #2a3680; }
.btn.on { background: linear-gradient(#35c65f, #178a3a); color: #fff; border-color: #0f6a2a; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
input, select { font-size: 16px; padding: 6px 8px; border: 1px solid #8a919c; border-radius: 5px; font-family: inherit; }
label.f { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; margin: 8px 0; }

/* 操作小視窗 */
.popup { position: fixed; top: 80px; right: 30px; width: 400px; max-width: calc(100vw - 20px); background: var(--panel); border: 2px solid #173f9e; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 20; }
.popup .ph { background: linear-gradient(#2358d8, #173f9e); color: #fff; padding: 8px 12px; font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: move; border-radius: 7px 7px 0 0; }
.popup .ph button { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.5); color: #fff; font-size: 26px; font-weight: 700; cursor: pointer; line-height: 1; width: 40px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.popup .ph button:hover { background: rgba(255,255,255,.3); }
.popup .pb { padding: 12px 14px; }
/* 選擇類小視窗（LS/LIT 液位來源、備用選擇…）：寬度與按鈕約一半 */
.popup.popsel { width: 190px; }
.popup.popsel .ph { font-size: 15px; padding: 5px 8px; }
.popup.popsel .ph button { width: 28px; height: 26px; font-size: 18px; }
.popup.popsel .ph .ppin { font-size: 13px !important; }
.popup.popsel .pb { padding: 6px 8px; }
.popup.popsel .pb .btn { padding: 4px 6px; font-size: 14px; min-height: 0; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px dashed #c6cbd3; gap: 10px; }
.row:last-child { border-bottom: none; }
.row .k { color: var(--muted); }
.pill { padding: 2px 12px; border-radius: 12px; color: #fff; font-weight: 700; background: var(--stop); }
.pill.run { background: var(--run); } .pill.fault { background: var(--fault); } .pill.nfb { background: var(--nfb); color: #222; } .pill.warn { background: #e8870c; }
.box { display: inline-block; min-width: 30px; text-align: center; border: 2px solid #3d4452; background: #f4f5f7; font-weight: 700; padding: 1px 6px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bigpv { font-size: 38px; font-weight: 700; color: var(--pv); background: var(--pvbg); border-radius: 6px; padding: 4px 14px; text-align: right; }
/* 儀表 / 設備面板 */
.popup.fp { width: 780px; max-width: calc(100vw - 20px); }
.popup.fp4 { width: 960px; }
.fpwrap { display: flex; gap: 18px; align-items: flex-start; }
.fpcol { flex: 1; min-width: 0; padding-right: 8px; }
.fpbar { flex: 0 0 74px; }
.fpsub { font-size: 17px; font-weight: 700; color: #173f9e; border-bottom: 1px solid #c6cbd3; margin: 12px 0 7px; padding-bottom: 3px; }
.fprow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; padding: 7px 0; font-size: 18px; }
.fprow > .k { color: #333; white-space: nowrap; }
.fprow > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.fnum { width: 70px; text-align: center; font-size: 17px; padding: 6px 6px; -webkit-appearance: none; -moz-appearance: textfield; appearance: none; }
.fnum::-webkit-outer-spin-button, .fnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fstep { display: inline-flex; align-items: stretch; gap: 3px; vertical-align: middle; }
.stepbtn { width: 30px; min-width: 30px; font-size: 20px; font-weight: 700; line-height: 1; border: 1px solid #9aa1ab; border-radius: 6px; background: #eef1f5; color: #22303a; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.stepbtn:active { background: #cfd6de; }
.fpv { font-weight: 700; font-size: 19px; }
.fbox { display: inline-block; min-width: 112px; text-align: center; font-size: 17px; font-weight: 700; padding: 5px 9px; border: 1.5px solid #b7bdc7; border-radius: 4px; background: #f4f5f7; }
.fsq { display: inline-block; width: 24px; height: 24px; border: 1.5px solid #3d4452; border-radius: 3px; background: #c8ccd2; }
.fcb { display: inline-flex; cursor: pointer; }
.fprow > .fcb { margin-right: 34px; }
.fprow > .btn { margin-right: 34px; }
.fcb input { width: 24px; height: 24px; cursor: pointer; }
.popup.fp .btn { font-size: 18px; padding: 9px 16px; }
.popup.fp .ph { font-size: 22px; padding: 11px 16px; }
.fptop { display: flex; align-items: center; gap: 8px; padding: 4px 2px 11px; font-size: 18px; border-bottom: 1px solid #d3d8de; margin-bottom: 7px; }
.fpstat .fbox { display: block; width: 68%; margin: 6px 0; text-align: center; }
.hidden { display: none !important; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 30; }
.modal .card { min-width: 320px; max-width: 92vw; }
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 40; font-size: 16px; }
.toast.err { background: var(--fault); }

/* 趨勢圖 */
.seg { display: inline-flex; border: 1px solid #5a6474; border-radius: 6px; overflow: hidden; }
.seg button { border: none; border-right: 1px solid #5a6474; background: #fff; padding: 7px 14px; font-size: 15px; cursor: pointer; font-family: inherit; }
.seg button:last-child { border-right: none; }
.seg button.on { background: linear-gradient(#2a64e0, #173f9e); color: #fff; }
/* 運轉時數：四類分頁（泵浦 / 攪拌機 / 計量泵 / 氣動泵） */
.seg.rhseg { display: flex; width: fit-content; margin: 0 auto 10px; }
.seg.rhseg button { display: flex; align-items: center; gap: 6px; font-size: 16px; padding: 7px 20px; font-weight: 600; }
.seg.rhseg button svg { margin: 0 !important; }
.utable.rhtbl td { padding: 3px 10px; }
.utable.rhtbl td svg { width: 22px; height: 22px; }
.trendwrap { display: flex; gap: 10px; height: calc(100% - 56px); }
.tcanvaswrap { flex: 1; min-width: 0; position: relative; }
#tc { width: 100%; height: 100%; background: #0c1017; border-radius: 8px; display: block; }
.tcx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.tlegend { flex: 0 0 260px; overflow: auto; background: #141a21; border-radius: 8px; padding: 8px; }
.tlg { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; cursor: pointer; font-size: 16px; color: #cdd6e0; }
.tlg:hover { background: #1e2831; }
.tlg.off { opacity: .4; }
.tlg .sw { width: 15px; height: 15px; border-radius: 2px; flex: 0 0 auto; }
.tlg .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlg .vv { font-weight: 700; color: #fff; }

/* 編輯器 */
.editbtn { border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.15); color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.editbtn:hover { background: rgba(255,255,255,.28); }
#edbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #17233a; color: #fff; flex-wrap: wrap; }
#edbar b { font-size: 15px; }
#edbar .edsp { flex: 1; }
.eddrop { position: relative; }
.edmenu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; color: #15181d; border: 1px solid #8a919c; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 60; min-width: 180px; max-height: 60vh; overflow: auto; }
.edmenu.open { display: block; }
.edmenu > a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eef0f3; }
.edmenu > a:hover { background: #eaf1ff; }
.edmenu > a small { color: #8a919c; }
.edver { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eef0f3; font-size: 13px; }
.edver.act { background: #eafbef; }
.edver .btn { padding: 3px 8px; font-size: 12px; }
#edpanel { position: fixed; top: 100px; right: 8px; width: 340px; max-height: calc(100vh - 160px); overflow: auto; background: #eef0f3; border: 1px solid #17233a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 25; }
#edpanel .edph { background: #17233a; color: #fff; padding: 11px 14px; font-weight: 700; font-size: 19px; position: sticky; top: 0; cursor: move; border-radius: 7px 7px 0 0; }
#edpanel .edpb { padding: 10px 12px; }
.edrow { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; margin: 9px 0; font-size: 17px; }
.edrow input[type=text], .edrow input[type=number], .edrow select { width: 100%; font-size: 17px; padding: 7px 9px; }
.edsec { font-size: 16px; font-weight: 700; color: #173f9e; background: #dfe6f2; padding: 6px 10px; margin: 11px -12px 6px; }
.edcw { display: flex; gap: 6px; align-items: center; }
.edsw { width: 26px; height: 24px; flex: 0 0 auto; border: 1px solid #8a919c; border-radius: 4px; cursor: pointer; padding: 0; background-clip: padding-box; }
.edcw input { flex: 1; min-width: 0; }
#edcolorpop { position: fixed; display: none; z-index: 70; background: #fff; border: 1px solid #8a919c; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 8px; width: 222px; }
#edcolorpop .cpt { font-size: 12px; color: #5b6270; margin: 6px 2px 3px; }
#edcolorpop .cpg { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
#edcolorpop .cpsw { width: 100%; aspect-ratio: 1; border: 1px solid #c9ccd1; border-radius: 3px; cursor: pointer; padding: 0; }
#edcolorpop .cpsw:hover { outline: 2px solid #1e6fd9; }
#edcolorpop #cpc { width: 100%; height: 30px; margin-top: 2px; cursor: pointer; }
.edbtns { display: flex; gap: 8px; margin-top: 12px; }
.edsel > .body, .edsel > .hl, .edsel .hl { outline: none; }
.edsel { outline: 2px dashed #ff8f28; outline-offset: 2px; }
#main svg .edsel rect, #main svg .edsel path, #main svg .edsel circle { filter: drop-shadow(0 0 2px #ff8f28); }
/* 執行模式：槽體純裝飾、不擋點擊（讓底下的攪拌機/設備點得到）；編輯模式仍可選取拖曳 */
#main svg g.tankbg { pointer-events: none; }
body.edon #main svg g.tankbg { pointer-events: auto; }
/* 執行模式：滑鼠移到可點設備 → 手指游標；hover 淡藍底不擋點擊 */
body:not(.edon) #main svg .rtclick { cursor: pointer; }
#main svg .rthover { pointer-events: none; }

/* ---------- 工具頁：狀態表 / 計時器 / 使用者 ---------- */
.sysbtn.util { background: linear-gradient(#eef3fb, #cdd9ee); border-color: #7d93b8; }
/* 2026-10-21（測試部第 4 輪）：製程總覽的「即時警報」入口大按鈕（data-group=SYS），有警報時不要變成整塊紅底
   （會被誤認成警報本身）。改用藍色highlight（仍看得出有事），紅色只留給警報狀態；右上角數量徽章照舊顯示幾筆警報。
   各系統按鈕（冰水主機系統…）照舊反映自己那一區的警報狀態。 */
.sysbtn.util.active, .sysbtn[data-group="SYS"].active { background: linear-gradient(#3f74d6, #1f4fa8); color: #fff; border-color: #16418c; }
.sysbtn.util.active small, .sysbtn[data-group="SYS"].active small { color: #dce8ff; }
.utilpage { padding: 12px 16px 40px; }
.uthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.uthead h2 { margin: 0; }
.uthead h2 small { font-weight: 400; color: var(--muted); font-size: 15px; }
.utfilter { height: 38px; min-width: 240px; padding: 0 12px; border: 1px solid #b7bdc7; border-radius: 6px; font-size: 15px; font-family: inherit; }
.utsub { margin: 18px 0 6px; font-size: 16px; color: #33506b; border-left: 4px solid #1a4fc4; padding-left: 8px; }
.uthint { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.utable { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.utable th, .utable td { border: 1px solid #d7dbe2; padding: 6px 10px; text-align: center; white-space: nowrap; }
.utable thead th { background: #33506b; color: #fff; font-weight: 600; position: sticky; top: 0; z-index: 2; }
.utable td:nth-child(2) { text-align: left; max-width: 320px; white-space: normal; }
.utrow:hover { background: #eef4ff; cursor: pointer; }
.utrow:nth-child(even) { background: #f6f8fb; }
.utrow:nth-child(even):hover { background: #e7f0ff; }
.uvlamp { display: inline-block; width: 20px; height: 20px; border-radius: 4px; border: 1px solid #9aa1ab; background: #c8ccd2; vertical-align: middle; }
.uvstate { display: inline-block; min-width: 62px; padding: 2px 6px; border: 1.5px solid #b7bdc7; border-radius: 5px; font-weight: 700; font-size: 13px; }
.uvnum { width: 58px; height: 30px; text-align: center; border: 1px solid #b7bdc7; border-radius: 5px; font-size: 15px; font-family: inherit; }
.uttimer td:nth-child(2) { max-width: 220px; }
.utuser { max-width: 900px; margin: 0 auto; }
.utme { font-size: 17px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.utlv { background: #1a4fc4; color: #fff; border-radius: 4px; padding: 1px 8px; font-size: 13px; }
.utable.uusers { width: auto; table-layout: fixed; }
.uadd { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.uadd label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #45516a; }
.uadd input, .uadd select { width: 132px; padding: 6px 8px; font-size: 15px; border: 1px solid #b9c1cd; border-radius: 5px; font-family: inherit; }
.uadd .btn { height: 36px; }
.upwcell { white-space: nowrap; }
.upwcell span { display: inline-block; min-width: 74px; font-family: Consolas, monospace; }
.card.upwd { width: 380px; }
.card.upwd label { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font-size: 14px; color: #45516a; }
.card.upwd input { padding: 7px 10px; font-size: 16px; border: 1px solid #b9c1cd; border-radius: 5px; font-family: inherit; }

/* ---------- 登入頁（放大、輸入框不超出外框） ---------- */
.logincard { box-sizing: border-box; width: 440px; max-width: calc(100vw - 32px); margin: 60px auto; background: var(--panel); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.28); padding: 32px 36px 28px; }
.logincard h2 { margin: 0 0 20px; font-size: 26px; text-align: center; color: #173f9e; }
.lf { display: block; margin: 0 0 16px; font-size: 16px; font-weight: 600; color: #33506b; }
.lf input { box-sizing: border-box; display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 14px; border: 1.5px solid #b7bdc7; border-radius: 8px; font-size: 19px; font-family: inherit; }
.lf input:focus { border-color: #2a64e0; outline: none; box-shadow: 0 0 0 3px rgba(42,100,224,.18); }
.lf select { box-sizing: border-box; display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 10px; border: 1.5px solid #b7bdc7; border-radius: 8px; font-size: 18px; font-family: inherit; background: #fff; cursor: pointer; }
.lf select:focus { border-color: #2a64e0; outline: none; box-shadow: 0 0 0 3px rgba(42,100,224,.18); }
.logincard .btn.primary { box-sizing: border-box; width: 100%; height: 50px; margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.lhint { color: #8a929e; font-size: 13px; text-align: center; margin: 14px 0 0; }

/* ---------- 歷史曲線：點位樹選擇 ---------- */
.trendpage { padding: 10px 14px; height: calc(100vh - 132px); box-sizing: border-box; }
.trendmain { display: flex; gap: 12px; height: 100%; }
.ttree { flex: 0 0 300px; background: #121821; border: 1px solid #263140; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.ttreehd { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1b2532; color: #cfe0f2; font-weight: 700; font-size: 18px; border-bottom: 1px solid #263140; }
.tclear { background: #2a3646; color: #cfe0f2; border: 1px solid #3a4a5e; border-radius: 5px; font-size: 14px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
.tclear:hover { background: #35455a; }
.ttreebody { overflow-y: auto; padding: 4px 0; flex: 1; }
.tnode > summary { cursor: pointer; padding: 8px 12px; color: #9fc0e6; font-weight: 600; font-size: 17px; list-style: none; user-select: none; border-top: 1px solid #1c2530; }
.tnode > summary::-webkit-details-marker { display: none; }
.tnode > summary::before { content: '▸'; display: inline-block; width: 14px; color: #5f7a96; transition: transform .12s; }
.tnode[open] > summary::before { transform: rotate(90deg); }
.tnode > summary i { color: #5f7a96; font-style: normal; font-size: 14px; float: right; }
.tleaf { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 26px; font-size: 16px; color: #b9c6d6; cursor: pointer; }
.tleaf:hover { background: #1a2430; }
.tleaf.on { background: #14304a; color: #e6f1ff; }
.tleaf input { width: 18px; height: 18px; flex: 0 0 auto; }
.tlname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlunit { color: #6f8296; font-size: 13px; flex: 0 0 auto; }
.trendcol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trendcol .trendwrap { flex: 1; }

/* 計時器設定：依原廠 PRESET/ELAPSED 版面 */
.uttimer { width: auto; min-width: 620px; max-width: 860px; margin: 4px auto 12px; font-size: 18px; }
.uttimer th { font-size: 16px; }
.uttimer td.tl, .uttimer th.tl { text-align: left; white-space: nowrap; font-size: 18px; font-weight: 600; padding-left: 16px; }
.uttimer .uvnum { width: 88px; height: 34px; font-size: 18px; text-align: center; }
.uttimer td, .uttimer th { padding: 6px 12px; }
.uttimer tr.utsep td { background: #e7edf5; color: #1a4fc4; font-weight: 700; text-align: left; padding-left: 16px; font-size: 16px; }
.uttimer tr.utsep:hover { background: #e7edf5; }

/* 泵浦運轉時管線流動動畫 */
.pipeflow { animation: pipeflow 0.7s linear infinite; }
@keyframes pipeflow { to { stroke-dashoffset: -17; } }

/* 反向流動（由右往左 / 由上往下）動畫 */
.pipeflowrev { animation: pipeflowrev 0.7s linear infinite; }
@keyframes pipeflowrev { to { stroke-dashoffset: 17; } }

/* AIR 專用：圓點珠狀流動 */
.pipeflowdot { animation: pipeflowdot 0.9s linear infinite; }
@keyframes pipeflowdot { to { stroke-dashoffset: -12; } }
.pipeflowdotrev { animation: pipeflowdotrev 0.9s linear infinite; }
@keyframes pipeflowdotrev { to { stroke-dashoffset: 12; } }

/* 通用流動：週期長 --pl 由 JS 依樣式帶入，速度用 inline animation-duration；支援任意 dash 樣式 */
.pflow  { animation-name: pflowf; animation-timing-function: linear; animation-iteration-count: infinite; }
.pflowr { animation-name: pflowr; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes pflowf { to { stroke-dashoffset: calc(-1 * var(--pl, 17px)); } }
@keyframes pflowr { to { stroke-dashoffset: var(--pl, 17px); } }

/* 馬達面板 START/STOP：符合目前狀態者亮綠，其餘灰色 */
.btn.bcmd { background: linear-gradient(#f2f4f7, #c8ccd2); color: #3a3f47; border-color: #9aa3af; }
.btn.bcmd.on { background: linear-gradient(#35c65f, #178a3a); color: #fff; border-color: #0f6a2a; box-shadow: inset 0 0 0 2px #cffcdb; }

/* 編輯器框選外框 */
.edmarquee { pointer-events: none; }

/* 首頁：版本 / 最後編輯時間（灰色小字） */
.homever { text-align: left; color: #9aa3af; font-size: 13px; margin: 0 0 4px; padding-left: 2px; }

/* 語音播報開關按鈕 */
.voicebtn { background: #26507f; border: 1px solid #4a78ad; color: #fff; font-size: 18px; width: 40px; height: 34px; border-radius: 6px; cursor: pointer; line-height: 1; }
.voicebtn:hover { background: #2e5f95; }
.voicebtn.voiceon { background: #1f8a3a; border-color: #17702e; box-shadow: 0 0 0 2px rgba(53,198,95,.3); }

/* 首頁按鈕位置微調控制盒 */
.hoffctl { position: absolute; left: 0; bottom: 100%; margin: 0 0 8px 0;   /* 放在「收合畫面選單」按鈕正上方 */ white-space: nowrap; display: flex; width: fit-content; align-items: center; gap: 8px; background: rgba(20,32,54,.92); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 15px; box-shadow: 0 3px 10px rgba(0,0,0,.45); z-index: 40; }
.hbtn { width: 40px; height: 34px; font-size: 17px; border: none; border-radius: 6px; background: #3b4c6b; color: #fff; cursor: pointer; font-family: inherit; }
.hbtn:hover { background: #4d6390; }
.hbtn.hbtnsave { width: auto; padding: 0 14px; background: #2563eb; font-weight: 700; }
.hbtn.hbtnsave:hover { background: #1d4ed8; }

/* 標籤透明點擊區：只在編輯模式(body.edon)可點，run 模式不擋 */
.lblhit { pointer-events: none; }
.edon .lblhit { pointer-events: all; }

/* ---------------- 流量計頁 ---------------- */
.flowpage { padding: 10px 14px; display: flex; flex-direction: column; gap: 14px; overflow: auto; height: calc(100% - 4px); }
.flowfm { background: var(--panel, #161b22); border: 1px solid #2a3441; border-radius: 10px; padding: 12px 14px; }
.ffhd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ffhd b { font-size: 19px; color: #e8edf3; }
.ffsub { color: #7a8697; font-size: 14px; }
.ffwarn { margin-left: auto; color: #ffb020; font-size: 13px; border: 1px solid #7a5a10; background: #3a2c08; padding: 2px 8px; border-radius: 6px; }
.ffkpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ffk { flex: 1 1 150px; background: #0f141b; border: 1px solid #232c37; border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; }
.ffk.hi { border-color: #1e6fd9; background: #0f1a2b; }
.ffkl { color: #8892a0; font-size: 13px; }
.ffkv { color: #37d067; font-size: 24px; font-weight: 700; line-height: 1.15; }
.ffk.hi .ffkv { color: #48c9ff; }
.ffkv.big { font-size: 30px; }
.ffku { color: #6b7480; font-size: 12px; }
.fpd { border-top: 1px solid #232c37; }
.fpd > summary { list-style: none; cursor: pointer; padding: 8px 4px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fpd > summary::-webkit-details-marker { display: none; }
.fpd > summary::before { content: '▸'; color: #6b7480; transition: transform .15s; }
.fpd[open] > summary::before { transform: rotate(90deg); }
.fpname { font-weight: 700; color: #e8edf3; min-width: 84px; }
.fpstate { font-size: 13px; padding: 2px 10px; border-radius: 10px; background: #2a3441; color: #9aa3af; }
.fpstate.on { background: #14532d; color: #4ade80; }
.fpmet { color: #b7c0cc; font-size: 14px; }
.fpmet b { color: #fff; font-size: 16px; }
.fpbody { padding: 4px 4px 10px 22px; }
.fpruns { border-collapse: collapse; font-size: 14px; }
.fpruns th, .fpruns td { border: 1px solid #232c37; padding: 3px 12px; text-align: center; color: #cdd5df; }
.fpruns th { background: #1a212b; color: #8892a0; }
.fprun { color: #4ade80; }
.fpnorun, .ffnopump { color: #6b7480; font-size: 13px; padding: 4px 0; }
.flowempty { padding: 30px; color: #8892a0; }
/* 流量計頁精簡置中：卡片不撐滿、置中；方塊固定寬（今日累計、累計器數字長→寬一點，昨日/瞬時→窄） */
.flowfm { width: 860px; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.ffk { flex: 0 0 160px; }
.ffk.hi, .ffk:last-child { flex: 0 0 220px; }
.ffk.ffinst { flex: 0 0 200px; }

/* ---------------- 語音 / 提醒 設定頁 ---------------- */
.vcfg { max-width: 640px; margin: 8px auto 0; padding: 4px 14px 20px; }
/* 語音設定頁：左右兩欄、整頁不用往下拉（右側設備清單自己捲動） */
.vcwrap { display: flex; gap: 28px; justify-content: center; align-items: flex-start; height: calc(100vh - 150px); }
.vcleft { width: 480px; flex: none; }
.vcleft .vcfg { max-width: none; margin: 0; padding: 0 4px; }
.vcleft .vcfgrow { padding: 6px 4px; gap: 10px; }
.vcleft .vcfgrow .vcl { font-size: 18px; }
.vcleft .vcsub { margin: 10px 4px 2px; font-size: 16px; }
.vcleft .vchint { margin: 8px 4px 0; font-size: 15px; line-height: 1.6; }
.vcleft .vcvol { width: 170px; }
.vcleft .btn { padding: 4px 14px; font-size: 16px; }
.vcleft .uthead h2 { font-size: 24px; }
/* 小開關 ON / OFF */
.vcwrap .vcsw { width: 36px; height: 20px; border-radius: 10px; margin: 0; vertical-align: middle; }
.vcwrap .vcsw::after { top: 2px; left: 2px; width: 16px; height: 16px; }
.vcwrap .vcsw:checked::after { left: 18px; }
.vcright .utable { font-size: 19px; }
.vcright .utable th, .vcright .utable td { padding: 2px 10px; }
.vcright .utable .vcsw { width: 44px; height: 24px; border-radius: 12px; }
.vcright .utable .vcsw::after { top: 3px; left: 3px; width: 18px; height: 18px; }
.vcright .utable .vcsw:checked::after { left: 23px; }
.vcright { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.vcscroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.vcpager { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0 0; font-size: 17px; color: #23303f; }
.vcpager .btn { font-size: 16px; padding: 5px 16px; }
.vcpager .btn:disabled { opacity: .4; cursor: default; }
.vcfgrow { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid #d0d5dd; }
.vcfgrow .vcl { flex: 1; color: #23303f; font-size: 16px; }
.vcsub { margin: 16px 4px 2px; color: #45516a; font-size: 14px; font-weight: 700; }
.vchint { margin: 14px 4px 0; color: #667085; font-size: 13px; line-height: 1.6; }
.vcvol { width: 200px; }
.vcsw { appearance: none; -webkit-appearance: none; width: 50px; height: 27px; border-radius: 14px; background: #3a434f; position: relative; cursor: pointer; transition: background .15s; flex: none; }
.vcsw:checked { background: #1e9e4a; }
.vcsw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left .15s; }
.vcsw:checked::after { left: 26px; }
/* 手動/現場 過久提醒：現在顯示在「AI 小幫手」浮動視窗裡（見 .dutyitem.dq），不再用擋畫面的對話框 */

/* 編輯器：連接點 / 吸附 */
.edconnlayer, .edconndot, .edsnap { pointer-events: none; }
#edbar #edconn.on { background: #1e9e4a; color: #fff; border-color: #1e9e4a; }
.edguide { pointer-events: none; }

/* 報表頁 */
.rpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.rpcard { background: #141a22; border: 1px solid #232c37; border-radius: 8px; padding: 10px 12px; }
.rpcard h3 { margin: 2px 0 8px; font-size: 15px; color: #cdd6e0; }
.rpcard .utable { width: 100%; }

/* ---------- 值班助理：浮動小視窗（AI 小幫手，8cm x 6cm，可拖曳） ---------- */
.dutyfloat { position: fixed; right: calc(var(--navw, 190px) + 16px); top: auto; bottom: var(--albar-clear, 16px); z-index: 55; width: 9cm; height: 6.5cm; display: flex; flex-direction: column;
  background: #10161f; color: #dfe6ee; border: 1px solid #26313f; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.4); overflow: hidden; }
.dutyfloat.mini { height: auto; }
.dutyfloat .dfsmile { display: none; }   /* 中性圖示（耳機）不需要卡通笑臉牙齒 */
.dutyfloat.mini .dfmeta, .dutyfloat.mini .dfbody { display: none; }
.dutyfloat .dfhd { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(#182231, #121a24); cursor: move; user-select: none; }
.dutyfloat .dfavwrap { position: relative; width: 78px; height: 78px; flex: 0 0 auto; }
.dutyfloat .dfavatar { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #3a4655; cursor: pointer; transition: transform .15s; }
.dutyfloat .dfavbadge { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border: 3px solid #10161f; }
.dutyfloat .dftitle { font-weight: 700; font-size: 14px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dutyfloat .dfactions { display: flex; gap: 3px; }
.dutyfloat .dfbtn { background: rgba(255,255,255,.08); border: 1px solid #3a4655; color: #cdd6e0; border-radius: 5px; padding: 1px 6px; cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1.5; }
.dutyfloat .dfbtn:hover { background: rgba(255,255,255,.16); }
.dutyfloat .dfmeta { padding: 4px 8px; font-size: 13px; color: #8b97a6; border-bottom: 1px solid #1c2530; line-height: 1.7; }
.dutyfloat .dfmeta b { color: #cdd6e0; }
.dutyfloat .dfmeta .dutystate { font-size: 13px; padding: 1px 8px; margin-right: 4px; }
.dutyfloat .dfbody { flex: 1; overflow-y: auto; padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; }
.dutyfloat .dutyitem { font-size: 13px; padding: 3px 8px; }   /* 內容字級 +2（原 11px） */
.dutylive { width: 10px; height: 10px; border-radius: 50%; background: #1fb14a; box-shadow: 0 0 0 0 rgba(31,177,74,.6); animation: dutybeat 2s infinite; flex: 0 0 auto; }
.dutylive.ok { background: #1fb14a; } .dutylive.warn { background: #e8a20c; } .dutylive.alarm { background: #e0262b; } .dutylive.bad { background: #888; }
@keyframes dutybeat { 0% { box-shadow: 0 0 0 0 rgba(31,177,74,.55); } 70% { box-shadow: 0 0 0 9px rgba(31,177,74,0); } 100% { box-shadow: 0 0 0 0 rgba(31,177,74,0); } }
.dutystate { font-weight: 700; padding: 2px 12px; border-radius: 12px; font-size: 14px; }
.dutystate.ok { background: #17451f; color: #6ff09a; } .dutystate.warn { background: #4a3708; color: #ffd98a; }
.dutystate.alarm { background: #4a1113; color: #ff9a9d; } .dutystate.bad { background: #333; color: #ccc; }
.dutyitem { font-size: 14px; padding: 3px 10px; border-radius: 6px; background: #1a2431; color: #b9c4d0; border-left: 3px solid #3a4655; }
.dutyitem.dok { color: #7fdca0; border-left-color: #1fb14a; }
.dutyitem.da { background: #2a1416; color: #ff9a9d; border-left-color: #e0262b; }
.dutyitem.df { background: #2a2410; color: #ffd98a; border-left-color: #e8a20c; }
.dutyitem.dw { background: #26210f; color: #ffe1a3; border-left-color: #e8a20c; }
.dutyitem.dq { background: #10233a; color: #bcdcff; border-left-color: #1a72e0; }
.dutybtns { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.btn.sm { padding: 2px 8px; font-size: 11px; border-radius: 4px; }
/* 值班設定小視窗 */
.dutycfgmask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 60; }
.dutycfgbox { background: #1b2430; border: 1px solid #33404f; border-radius: 10px; width: 320px; max-width: calc(100vw - 24px); color: #dfe6ee; padding: 14px 16px; }
.dutycfghd { font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.dutycfgrow { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }
.dutycfgrow select { font-size: 15px; }
.dutysw { position: relative; display: inline-block; width: 46px; height: 26px; }
.dutysw input { opacity: 0; width: 0; height: 0; }
.dutysw span { position: absolute; inset: 0; background: #55606e; border-radius: 26px; transition: .2s; cursor: pointer; }
.dutysw span:before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.dutysw input:checked + span { background: #1fb14a; }
.dutysw input:checked + span:before { transform: translateX(20px); }
.dutycfgbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dutycfgav { display: flex; flex-wrap: wrap; gap: 10px; }
.dutycfgav .avpick { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 2px solid transparent; border-radius: 8px; padding: 4px; cursor: pointer; color: #b9c4d0; font-size: 12px; font-family: inherit; }
.dutycfgav .avpick img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid #3a4655; }
.dutycfgav .avpick:hover { background: rgba(255,255,255,.06); }
.dutycfgav .avpick.sel { border-color: #1fb14a; background: rgba(31,177,74,.12); color: #dfe6ee; }
.dutycfgav .avpick img { transition: transform .15s; }
.dutyrotrow { display: flex; align-items: center; gap: 8px; color: #b9c4d0; font-size: 13px; }
.dutyrotrow #avrotVal { min-width: 40px; text-align: center; color: #dfe6ee; font-weight: 600; }
.dutyrotrow .btn { font-size: 14px; padding: 3px 10px; }

/* 未登入：操作視窗唯讀（看得到狀態與數值，不能按、不能改） */
.popup.ro .pb button, .popup.ro .pb input, .popup.ro .pb select, .popup.ro .pb label.fcb { pointer-events: none; opacity: .45; filter: grayscale(.6); }
.popup .ronote { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; border-radius: 5px; padding: 4px 6px 4px 10px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.popup.ro .pb .ronote button.ronlogin { pointer-events: auto; opacity: 1; filter: none; padding: 3px 12px; font-size: 13px; }
.modal.loginmodal { z-index: 300; }
.lbox { width: 420px; }
.lbox h2 { margin: 0 0 14px; }
.lbox .btns { display: flex; gap: 12px; margin-top: 6px; }
.lbox .btns .btn { flex: 1; width: auto; margin: 0; height: 46px; font-size: 18px; }

/* 類比視窗：警報設定旁的勾選＝抑制，標示清楚避免誤會成「啟用」 */
.fpsub.fpsubflex { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fpsuphint { font-size: 12px; font-weight: 600; color: #b45309; white-space: nowrap; }

/* 底部「即時警報」按鈕提醒 */
#nav button.nav-alarm { background: linear-gradient(#ff4d4d, #b3161a); border-color: #ffb3b3; }
#nav button.nav-alarm-unack { animation: navAlarm 1.6s ease-in-out infinite; }
@keyframes navAlarm { 0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255,60,60,.0); } 50% { filter: brightness(1.35); box-shadow: 0 0 12px 3px rgba(255,60,60,.75); } }
#nav button.nav-back { background: linear-gradient(#9fd6ff, #3f95d8); color: #06294a; border-color: #d6eeff; animation: navBack 3s ease-in-out infinite; }
@keyframes navBack { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* 開發者：本頁模擬開關（製程畫面左上角） */
.simtog { position: fixed; z-index: 35; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 12px; background: rgba(20, 32, 54, .88); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); user-select: none; }
.simtog.on { background: rgba(176, 90, 0, .92); }
.simtog.hidden { display: none; }
.simtog .vcsw { width: 40px; height: 22px; border-radius: 11px; margin: 0; }
.simtog .vcsw::after { top: 3px; left: 3px; width: 16px; height: 16px; }
.simtog .vcsw:checked::after { left: 21px; }

/* 流量計頁：瞬時流量警報 */
.ffk.ffinst[data-fit] { cursor: pointer; }
.ffk.ffinst[data-fit]:hover { border-color: #48c9ff; }
.ffk.ffinst.al { background: #e0262b; border-color: #ff8a8a; animation: breathe 2.4s ease-in-out infinite; }
.ffk.ffinst.al .ffkv { color: #ffe000; }
.ffk.ffinst.al .ffkl, .ffk.ffinst.al .ffku, .ffk.ffinst.al .ffsp { color: #ffe9e9; }
.ffal { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #ffe000; color: #b00000; font-size: 11px; font-weight: 700; }
.ffsp { color: #6b7480; font-size: 11px; margin-top: 2px; white-space: nowrap; }

/* 氣塞警示 */
#main svg .lfwarn { animation: breathe 1.6s ease-in-out infinite; pointer-events: none; }
.ffal.lf { background: #ff8c00; color: #fff; }
.lfbar { width: 860px; max-width: 100%; margin: 0 auto 10px; box-sizing: border-box; background: #fff; border: 1px solid #d5dae1; border-radius: 8px; padding: 8px 12px; font-size: 14px; color: #33506b; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lfbar input { width: 64px; padding: 3px 6px; font-size: 15px; border: 1px solid #b9c1cd; border-radius: 5px; text-align: center; font-family: inherit; }
.lfbar .btn { padding: 3px 12px; }
.lfhint { color: #8a929e; font-size: 12px; }

/* 首頁按鈕：警報數量徽章 */
.sysbtn { position: relative; }
.sysbtn .sbcnt { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 13px; background: #ffe000; color: #b00000; border: 2px solid #b00000; font-size: 15px; font-weight: 800; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
/* ===== 編輯模式：左側物件清單（樹狀） ===== */
#edtree { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; z-index: 20; background: #eef0f3; border-right: 2px solid #17233a; display: flex; flex-direction: column; font-size: 15px; color: #15181d; }
body.edon.edtree-on #main > svg { left: 250px; width: calc(100% - 250px); }
body.edon.edtree-on.edtree-min #main > svg { left: 30px; width: calc(100% - 30px); }
body.edtree-min #edtree { width: 30px; }
body.edtree-min #edtree .etsearch, body.edtree-min #edtree .etbody, body.edtree-min #edtree .etph > span { display: none; }
#edtree .etph { display: flex; align-items: center; justify-content: space-between; background: #17233a; color: #fff; padding: 8px 6px 8px 10px; font-weight: 700; font-size: 16px; }
body.edtree-min #edtree .etph { padding: 8px 2px; justify-content: center; }
#edtree .etph small { font-weight: 400; opacity: .8; font-size: 13px; }
#edtree .etmin { border: 1px solid #6f8fd0; background: #24406e; color: #fff; border-radius: 4px; width: 24px; height: 24px; cursor: pointer; padding: 0; font-size: 12px; }
#edtree .etsearch { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid #c9cfd8; }
#edtree .etsearch input { flex: 1; min-width: 0; font-size: 14px; padding: 5px 7px; border: 1px solid #b9c1cd; border-radius: 4px; }
#edtree .etsearch button { width: 28px; border: 1px solid #b9c1cd; background: #fff; border-radius: 4px; cursor: pointer; font-weight: 700; }
#edtree .etbody { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
#edtree .etgrp { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: #dfe6f2; color: #173f9e; font-weight: 700; cursor: pointer; border-bottom: 1px solid #c9d3e3; user-select: none; position: sticky; top: 0; z-index: 1; }
#edtree .etgrp small { margin-left: auto; background: #173f9e; color: #fff; border-radius: 9px; padding: 0 7px; font-size: 12px; font-weight: 700; }
#edtree .ettw { width: 12px; font-size: 12px; }
#edtree .etit { display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 24px; cursor: pointer; border-bottom: 1px solid #e3e6eb; white-space: nowrap; }
#edtree .etit:hover { background: #fff3e3; }
#edtree .etit.on { background: #ff8f28; color: #fff; font-weight: 700; }
#edtree .etnm { overflow: hidden; text-overflow: ellipsis; }
#edtree .etty { color: #6b7380; font-size: 13px; }
#edtree .etgb { color: #7a52c7; font-size: 12px; }
#edtree .etempty { padding: 14px; color: #8a919c; }
#main svg .ethov { filter: drop-shadow(0 0 3px #1e6fd9) drop-shadow(0 0 3px #1e6fd9); }
#main svg .etflash { animation: etflash .45s ease-in-out 3; }
@keyframes etflash { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.edmenu > .edmhd { padding: 6px 12px; background: #dfe6f2; color: #173f9e; font-weight: 700; font-size: 13px; position: sticky; top: 0; }

/* ===== 屬性視窗：VB 屬性表樣式（左欄名稱 / 右欄值，格線對齊，分類可收合） ===== */
#edpanel { width: 360px; background: #fff; }
#edpanel .edph { display: flex; flex-direction: column; gap: 2px; font-size: 17px; padding: 8px 12px; }
#edpanel .edph small { font-weight: 400; font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#edpanel .edpb { padding: 0 0 10px; }
#edpanel .edgrp { border-bottom: 1px solid #c9cfd8; }
#edpanel .edsec { margin: 0; padding: 5px 8px; font-size: 15px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; border-top: 1px solid #c9d3e3; }
#edpanel .edsec .ettw { width: 12px; font-size: 12px; }
#edpanel .edgrp.closed .edgb { display: none; }
#edpanel .edrow { grid-template-columns: 42% 1fr; gap: 0; margin: 0; font-size: 15px; border-bottom: 1px solid #e3e6eb; min-height: 30px; align-items: stretch; }
#edpanel .edrow > span:first-child { background: #f4f5f7; border-right: 1px solid #e3e6eb; padding: 4px 8px 4px 22px; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; color: #15181d; }
#edpanel .edrow > span:first-child i, #edpanel .edrow > b i { font-style: normal; font-size: 11px; color: #8a919c; font-weight: 400; }
#edpanel .edrow > b { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
#edpanel .edrow > input[type=text], #edpanel .edrow > input[type=number], #edpanel .edrow > select { border: none; border-radius: 0; font-size: 15px; padding: 4px 8px; background: #fff; min-width: 0; outline: none; }
#edpanel .edrow > input[type=text]:focus, #edpanel .edrow > input[type=number]:focus, #edpanel .edrow > select:focus { background: #fff8e8; box-shadow: inset 0 0 0 2px #1e6fd9; }
#edpanel .edrow > input[type=checkbox] { justify-self: start; align-self: center; margin-left: 8px; width: 17px; height: 17px; }
#edpanel .edrow > .edcw { padding: 3px 6px; gap: 4px; }
#edpanel .edcw input[type=text], #edpanel .edcw input[type=number] { font-size: 15px; padding: 3px 6px; border: 1px solid #d3d8e0; border-radius: 3px; }
#edpanel .edcw .btn { padding: 2px 7px; font-size: 13px; }
#edpanel .edck { display: flex; align-items: center; gap: 3px; font-size: 14px; }
#edpanel .edrow.ednote { display: block; font-size: 12.5px; color: #7a828e; padding: 5px 10px 5px 22px; background: #fbfbfc; line-height: 1.4; }
#edpanel .edrow.edfull { display: block; padding: 6px 10px; }
#edpanel .edrow.edfull > span:first-child { background: none; border: none; padding: 0 0 4px; }
#edpanel .edactrow { border-bottom: none; padding: 8px 10px 2px; }
#edpanel .edbtns { padding: 0 10px; }

/* ===== 個人化佈景主題（每個帳號記住自己的風格）：html[data-theme=...] =====
   只換外框（頁首 / 底部選單 / 背景 / 卡片 / 表格 / 按鈕），製程圖面的設備顏色（運轉綠、故障紅…）不變 */
.themebtn { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.55); color: #fff; font-size: 17px; width: 40px; height: 34px; border-radius: 6px; cursor: pointer; line-height: 1; }
.themebtn:hover { background: rgba(255,255,255,.3); }
.themepop { position: fixed; top: 56px; right: 150px; z-index: 90; background: #fff; color: #15181d; border: 1px solid #8a919c; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 12px; width: 360px; }
.themepop h4 { margin: 0 0 8px; font-size: 16px; }
.themepop .thgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.themepop .thit { border: 2px solid #d3d8e0; border-radius: 8px; padding: 6px; cursor: pointer; background: #fafbfc; text-align: left; font-family: inherit; font-size: 14px; }
.themepop .thit:hover { border-color: #7aa2e8; }
.themepop .thit.on { border-color: #1e6fd9; background: #eaf2ff; font-weight: 700; }
.themepop .thsw { display: flex; height: 26px; border-radius: 4px; overflow: hidden; margin-bottom: 5px; border: 1px solid rgba(0,0,0,.12); }
.themepop .thsw i { flex: 1; }
.themepop .thnote { margin-top: 8px; font-size: 12.5px; color: #6b7380; }

/* ===== 功能頁預設深色（測試部第 4 輪、老闆 10/21「白底卡片改深色」）=====
   問題：預設（深色版，無 data-theme）外框／製程頁是深色，功能頁（點位工具、備援、名稱管理、
   主備機、電子簽章、UPS 表、毒氣總覽表…）主內容卻是淺灰底＋白卡片／白表格，顯得像壞掉。
   做法：用 CSS 變數 --fp-*，預設（深色版）＝深；套用任何具名淺色佈景（google/dark/green/contrast，
   即老闆要的淺色版）時自動還原白底。只動 #main>.page 裡的功能頁元件，不碰外框、彈窗、製程 SVG，
   也不寫死深色、不影響 LightScr 的製程畫面淺色切換。 */
:root {
  --fp-bg: #1a212b; --fp-card: #222b36; --fp-card2: #2a3340; --fp-ink: #e8ecf2; --fp-muted: #9aa6b4;
  --fp-line: #39434f; --fp-head: #2d3a4b; --fp-headink: #eef2f7; --fp-input: #273140;
  --fp-taboff: #2a3340; --fp-tabink: #c7d2de;
}
html[data-theme] {   /* 任何具名佈景＝淺色版：功能頁還原白底，跟原本一致 */
  --fp-bg: var(--bg); --fp-card: #fff; --fp-card2: #f6f8fa; --fp-ink: var(--ink); --fp-muted: var(--muted);
  --fp-line: #d7dbe2; --fp-head: #33506b; --fp-headink: #fff; --fp-input: #fff;
  --fp-taboff: #e3e8f0; --fp-tabink: #1e2a3d;
}
#main > .page { background: var(--fp-bg); color: var(--fp-ink); }
#main > .page .cmwrap { color: var(--fp-ink); }
#main > .page .cmtabs button { background: var(--fp-taboff); color: var(--fp-tabink); border-color: var(--fp-line); }
#main > .page .cmtabnote { color: var(--fp-muted); }
#main > .page .utable { background: var(--fp-card); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
#main > .page .utable th, #main > .page .utable td { border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .utable thead th { background: var(--fp-head); color: var(--fp-headink); }
#main > .page .utable tbody tr:nth-child(even) { background: var(--fp-card2); }
#main > .page table.list { background: var(--fp-card); color: var(--fp-ink); }
#main > .page table.list th { background: var(--fp-head); color: var(--fp-headink); }
#main > .page table.list td { border-color: var(--fp-line); }
#main > .page .card { background: var(--fp-card); color: var(--fp-ink); }
#main > .page .seg { border-color: var(--fp-line); }
#main > .page .seg button { background: var(--fp-input); color: var(--fp-ink); border-color: var(--fp-line); }
#main > .page .uthint, #main > .page .uthead h2 small { color: var(--fp-muted); }
/* 語音/提醒設定頁深色可讀（第6輪 D8：.vcl/.vcsub/.vchint 原本只有淺色字、深色底下看不見；套淺色佈景時 --fp-* 還原、不影響淺色版）*/
#main > .page .vcfgrow .vcl, #main > .page #lvsum, #main > .page .vcsub { color: var(--fp-ink); }
#main > .page .vchint { color: var(--fp-muted); }
#main > .page .vcfgrow { border-bottom-color: var(--fp-line); }
#main > .page .vcpager { color: var(--fp-muted); }
/* 系統架構圖右側「點位查詢表」深色（第6輪：.archside .asin 寫死白卡、.asad 深藍位址字在深底看不見；套淺色佈景時 --fp-* 還原）*/
#main > .page .archside .asin { background: var(--fp-card); color: var(--fp-ink); }
#main > .page .astbl { border-color: var(--fp-line); }
#main > .page .astbl tr.asmodrow { background: var(--fp-card2); }
#main > .page .astbl tr[data-i]:hover { background: var(--fp-input); }
#main > .page .astbl small { color: var(--fp-muted); }
#main > .page .astbl .asad { color: var(--fp-ink); }
#main > .page .astbl .asv:not(.on):not(.onq):not(.ai):not(.ok):not(.bad) { color: var(--fp-muted); }
#main > .page .aschips #archcnt, #main > .page .ashint { color: var(--fp-muted); }
#main > .page .tdgrid label, #main > .page .tdgrid label.chk, #main > .page .tdsec label.chk { color: var(--fp-muted); }
#main > .page .lfbar { background: var(--fp-card); color: var(--fp-ink); border-color: var(--fp-line); }
#main > .page input[type=text], #main > .page input[type=number], #main > .page input[type=password],
#main > .page input[type=search], #main > .page input:not([type]), #main > .page select, #main > .page textarea {
  background: var(--fp-input); color: var(--fp-ink); border-color: var(--fp-line); }

/* 功能頁內各種白底面板／卡片／包裹 → 深色卡片面（限 #main>.page，不碰外框、彈窗、製程 .pl*、作用中 .on 狀態） */
#main > .page .tlwrap, #main > .page .tlfoot, #main > .page .nfmain, #main > .page .nfcard,
#main > .page .nfhelp, #main > .page .ifsum, #main > .page .cmleft, #main > .page .cmright,
#main > .page .cmstat, #main > .page .cmhint, #main > .page .smlay, #main > .page .smreg,
#main > .page .smsec, #main > .page .tdsec, #main > .page .tdnote, #main > .page .tdbwrap,
#main > .page .tdbr, #main > .page .archside, #main > .page .archlegend, #main > .page .archst,
#main > .page .cxexpr, #main > .page .cxres, #main > .page .cxrw, #main > .page .cxrwt,
#main > .page .cxkb, #main > .page .logincard, #main > .page .fbox, #main > .page .box,
#main > .page .almenu, #main > .page .pfcard, #main > .page .hacard, #main > .page .hag,
#main > .page .nff, #main > .page .ifsum, #main > .page .prtbl {
  background: var(--fp-card); color: var(--fp-ink); border-color: var(--fp-line); }
#main > .page .tdbfoot, #main > .page .tlfn, #main > .page .tlok, #main > .page .smnote,
#main > .page .smsec, #main > .page .smph, #main > .page .smhint, #main > .page .nfhelp,
#main > .page .alnote, #main > .page .tdbr .vnum, #main > .page .tlfoot, #main > .page .cxlim label,
#main > .page .cxrwh, #main > .page .prstat, #main > .page .askq, #main > .page .utpcnt,
#main > .page .utpcats > b, #main > .page .tdsec > b, #main > .page .cmhint,
#main > .page .hasync h2 .hasum, #main > .page .tdbr { color: var(--fp-ink); }
#main > .page .tdbfoot, #main > .page .uthint, #main > .page .smnote, #main > .page .cmhint,
#main > .page .pfname small, #main > .page .tdnote { color: var(--fp-muted); }
/* 功能頁各種表格一律深色（表頭深藍、格線深、交錯列） */
#main > .page .tltbl, #main > .page .nftbl, #main > .page .smtbl, #main > .page .astbl,
#main > .page .archtbl, #main > .page .prtbl, #main > .page .smptbl, #main > .page .smpl,
#main > .page .fpruns, #main > .page .pxw {
  background: var(--fp-card); color: var(--fp-ink); }
#main > .page .tltbl th, #main > .page .nftbl th, #main > .page .smtbl th, #main > .page .astbl th,
#main > .page .archtbl th, #main > .page .prtbl th, #main > .page .smptbl th, #main > .page .smpl th,
#main > .page .fpruns th, #main > .page .pxw th { background: var(--fp-head); color: var(--fp-headink); }
#main > .page .tltbl td, #main > .page .nftbl td, #main > .page .smtbl td, #main > .page .astbl td,
#main > .page .archtbl td, #main > .page .prtbl td, #main > .page .smptbl td, #main > .page .smpl td,
#main > .page .fpruns td, #main > .page .pxw td { border-color: var(--fp-line); color: var(--fp-ink); }
/* chip／小按鈕／搜尋盒 → 深色輸入面 */
#main > .page .tlchip, #main > .page .aschips button, #main > .page .asbox,
#main > .page .tlsubs button, #main > .page .nftabs button, #main > .page .cxtabs button,
#main > .page .smtabs2 button, #main > .page .smchips button {
  background: var(--fp-input); color: var(--fp-ink); border-color: var(--fp-line); }
#main > .page .asbox input { color: var(--fp-ink); }

/* ===== 第 5 輪補強：深色沒套乾淨的功能頁卡片／表格／按鈕／標籤／淺底狀態字 =====
   一律 #main>.page 範圍、沿用 --fp-*（具名佈景＝淺色時自動還原白底），不碰外框／彈窗／製程 SVG。 */
/* 一般 .btn（非 primary/danger/on/bcmd/hbtn）在功能頁是白漸層＋繼承到淺字＝白底白字；只在預設深色改成可見深色面，淺色佈景維持原樣 */
html:not([data-theme]) #main > .page .btn:not(.primary):not(.danger):not(.on):not(.bcmd):not(.hbtn) {
  background: linear-gradient(var(--fp-card2), var(--fp-input)); color: var(--fp-ink); border-color: var(--fp-line); }
/* 黃底／淺底「選取列」：字強制深色（黃底配白字看不到）*/
#main > .page .cmnode.sel, #main > .page .cmnode.sel small,
#main > .page .cmnode:hover, #main > .page .cmnode:hover small,
#main > .page .altbl tr.sel td, #main > .page .cmptbl tr.sel td,
#main > .page .astbl tr.sel td, #main > .page .cmptbl tr.sel td b { color: #1a2230 !important; }
/* 使用者管理：分區標題、表單標籤、計時器分組橫條 */
#main > .page .utsub { color: var(--fp-ink); }
#main > .page .uadd label { color: var(--fp-muted); }
#main > .page .uttimer tr.utsep td { background: var(--fp-head); color: var(--fp-headink); }
#main > .page .uttimer tr.utsep:hover td { background: var(--fp-head); }
/* 系統架構圖：I/O 站標題＋模組卡（白卡→深卡、深字→淺字；保留型別色條與故障/斷線狀態）*/
#main > .page .asthd { color: var(--fp-ink); }
#main > .page .amod:not(.bad):not(.down) { background: var(--fp-card2); color: var(--fp-ink); border-color: var(--fp-line); }
#main > .page .amod.na:not(.bad):not(.down) { background: var(--fp-card); }
#main > .page .amod:not(.bad):not(.down) .amid { color: var(--fp-muted); }
#main > .page .amod:not(.bad):not(.down) .amaddr { color: #7fa0d8; }
/* 製程總覽：廠名、說明（PK 全產業展示廠 深藍字配深底）*/
#main > .page .pjhome h1 { color: var(--fp-ink); }
#main > .page .pjhome p { color: var(--fp-muted); }
/* 即時警報：圖例文字、空白填充列（白底→透明露出深表面）*/
#main > .page.alpage .altbl { background: var(--fp-card); }
#main > .page.alpage .altbl tr.alfill td { background: transparent; border-color: var(--fp-line); }
#main > .page.alpage .alfoot .allegend { color: var(--fp-ink); }
/* 管線流動樣式名稱（#222 深字）＋右側預覽框白底 */
#main > .page .pfname { color: var(--fp-ink); }
#main > .page .pfbig { background: var(--fp-card); border-color: var(--fp-line); }
/* 主備機／備援同步表（白表頭→深）*/
#main > .page .hatbl { background: var(--fp-card); }
#main > .page .hatbl th, #main > .page .hatbl td { border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .hatbl th { background: var(--fp-head); color: var(--fp-headink); }
#main > .page .hatbl.hs td.hh { background: var(--fp-card2); }
#main > .page .hatbl.hs small { color: var(--fp-muted); }
/* 登入頁「目前已登入」深藍標題配深底對比不足 */
#main > .page .logincard h2 { color: var(--fp-ink); }
/* 電子簽章設定卡（白底→深）*/
#main > .page .eswrap .escfg { background: var(--fp-card); border-color: var(--fp-line); }
/* 顯示設定：現場/保留模式卡（白卡→深、標題字看不到）*/
#main > .page .dcards .dcard { background: var(--fp-card); color: var(--fp-ink); border-color: var(--fp-line); }
#main > .page .dcards .dcard .ddesc { color: var(--fp-muted); }
/* 空氣線圖（白底 SVG→深）*/
#main > .page .psysvg { background: var(--fp-card); border-color: var(--fp-line); }
#main > .page .psysvg .psybg { fill: var(--fp-card2); }
#main > .page .psysvg .psygrid { stroke: var(--fp-line); }
#main > .page .psysvg .psyax { fill: var(--fp-muted); }
#main > .page .psysvg .psylab { fill: var(--fp-ink); }
/* 電力監視：UPS 卡、電價註記、合計列（白底→深）*/
#main > .page .pwcard { background: var(--fp-card); border-color: var(--fp-line); }
#main > .page .pwcard small, #main > .page .pwcard span { color: var(--fp-muted); }
#main > .page .pwcard b { color: var(--fp-ink); }
#main > .page .pwnote2, #main > .page .pwfoot { color: var(--fp-muted); }
#main > .page .pwtbl tr.pwsum td { background: var(--fp-head); color: var(--fp-headink); }
/* 輸入框 placeholder 太暗 */
#main > .page input::placeholder, #main > .page textarea::placeholder { color: var(--fp-muted); opacity: 1; }

/* ---- 環保紀錄（env.js）：白卡→深卡、淺字→可見 ---- */
#main > .page .envcard, #main > .page .envbox { background: var(--fp-card); border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .envcard h3, #main > .page .envbox h3 { color: var(--fp-ink); }
#main > .page .envstd { background: var(--fp-card2); border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .envt th, #main > .page .envt td { border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .envfoot, #main > .page .envnote { color: var(--fp-muted); }
#main > .page .envbox button { background: linear-gradient(var(--fp-card2), var(--fp-input)); color: var(--fp-ink); border-color: var(--fp-line); }
/* 去除率 ok/ng 與超限列＝自成一格的淺底狀態，維持原深字，避免被 --fp-ink 反白 */
#main > .page .envt tr.bad td, #main > .page .envtbl tr.bad td { color: #c92a2a; }

/* ---- 化學要酸／特氣 EMO／毒氣（fmcs.js）：白卡→深卡；淺底狀態卡強制深字 ---- */
#main > .page .fxsec h3 small, #main > .page .fxnone { color: var(--fp-muted); }
#main > .page .fxbar button, #main > .page .fxtbl button, #main > .page .fxrst {
  background: linear-gradient(var(--fp-card2), var(--fp-input)); color: var(--fp-ink); border-color: var(--fp-line); }
#main > .page .fxe:not(.shut) { background: var(--fp-card); border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .fxe:not(.shut) .fxeg { color: var(--fp-muted); }
#main > .page .fxt { background: var(--fp-card); border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .fxg:not(.lv1):not(.lv2):not(.bad) { background: var(--fp-card); border-color: var(--fp-line); color: var(--fp-ink); }
#main > .page .fxg:not(.lv1):not(.lv2):not(.bad) .fxgn { color: var(--fp-ink); }
#main > .page .fxg:not(.lv1):not(.lv2):not(.bad) .fxga,
#main > .page .fxg:not(.lv1):not(.lv2):not(.bad) .fxgl { color: var(--fp-muted); }
#main > .page .fxg:not(.lv1):not(.lv2):not(.bad) .fxgb { background: var(--fp-input); }
/* 淺底警報狀態卡：名稱／數值／說明強制深字（在淺黃/淺紅上才看得到）*/
#main > .page .fxg.lv1 .fxgn, #main > .page .fxg.lv2 .fxgn, #main > .page .fxg.bad .fxgn,
#main > .page .fxg.lv1 .fxgv, #main > .page .fxg.lv2 .fxgv, #main > .page .fxg.bad .fxgv { color: #2a1a1a; }
/* 要酸中橘卡＝淺底，內部文字強制深橘；已關斷紅卡＝淺紅，強制深紅；今日統計要酸列淺橘 */
#main > .page .fxa, #main > .page .fxa b { color: #7a3a00; }
#main > .page .fxtbl tr.fxon td { color: #7a3a00; }
#main > .page .fxe.shut, #main > .page .fxe.shut .fxen, #main > .page .fxe.shut .fxeg, #main > .page .fxe.shut .fxes { color: #7a1515; }

/* 2. 深色夜間 */
html[data-theme="dark"] { --bg: #9aa1ab; --panel: #e4e7ec; }
html[data-theme="dark"] body { background: #111418; }
html[data-theme="dark"] #top { background: linear-gradient(#262b33, #15181d); border-bottom: 1px solid #3a414c; }
html[data-theme="dark"] #nav { background: #111418; }
html[data-theme="dark"] #nav button { background: linear-gradient(#39414e, #232931); border-color: #56606f; color: #e8ecf2; }
html[data-theme="dark"] #main > .page { background: #2a2f37; }
html[data-theme="dark"] table.list th { background: #1d2229; }
html[data-theme="dark"] .btn.primary { background: linear-gradient(#4a5568, #2d3542); border-color: #1d2229; }

/* 3. 工業綠 */
html[data-theme="green"] { --bg: #c6cfc9; --panel: #edf2ee; --blue: #1f7a57; --navy: #134534; }
html[data-theme="green"] body { background: #16231d; }
html[data-theme="green"] #top { background: linear-gradient(#2a7a5c, #164a37); }
html[data-theme="green"] #nav { background: #1c2b25; }
html[data-theme="green"] #nav button { background: linear-gradient(#2f8a66, #17523c); border-color: #6fbf9c; }
html[data-theme="green"] table.list th { background: #264a3d; }
html[data-theme="green"] .btn.primary { background: linear-gradient(#2f8a66, #17523c); border-color: #134534; }

/* 4. 高對比（現場亮光 / 遠距離看） */
html[data-theme="contrast"] { --bg: #d9dcdf; --panel: #ffffff; --ink: #000; --muted: #222; }
html[data-theme="contrast"] body { background: #000; }
html[data-theme="contrast"] #top { background: #000; border-bottom: 3px solid #ffd400; }
html[data-theme="contrast"] #title { color: #ffd400; }
html[data-theme="contrast"] #nav { background: #000; border-top: 3px solid #ffd400; }
html[data-theme="contrast"] #nav button { background: #000; border: 2px solid #fff; color: #ffd400; font-size: 19px; }
html[data-theme="contrast"] #nav button:hover { background: #222; }
html[data-theme="contrast"] table.list th { background: #000; color: #ffd400; }
html[data-theme="contrast"] table.list td { border-bottom-color: #888; }
html[data-theme="contrast"] .btn { border-width: 2px; border-color: #000; }
html[data-theme="contrast"] .btn.primary { background: #000; color: #ffd400; }

/* 5. Google 風格（Material：白色頁首、扁平按鈕） */
html[data-theme="google"] { --bg: #e8eaed; --panel: #ffffff; --ink: #202124; --muted: #5f6368; --blue: #1a73e8; --navy: #174ea6; }
html[data-theme="google"] body { background: #f1f3f4; }
html[data-theme="google"] #top { background: #fff; color: #202124; border-bottom: 1px solid #dadce0; box-shadow: 0 1px 3px rgba(60,64,67,.15); }
html[data-theme="google"] #top .brand { color: #1a73e8; opacity: 1; }
html[data-theme="google"] #title { color: #202124; font-weight: 600; }
html[data-theme="google"] .editbtn, html[data-theme="google"] .themebtn { background: #fff; border-color: #dadce0; color: #1a73e8; }
html[data-theme="google"] .editbtn:hover, html[data-theme="google"] .themebtn:hover { background: #f1f6fe; }
html[data-theme="google"] .bell { border-color: #dadce0; background: #fff; }
html[data-theme="google"] .bell svg { fill: #5f6368; }
html[data-theme="google"] .bell.alarm { background: var(--fault); } html[data-theme="google"] .bell.alarm svg { fill: #fff; }
html[data-theme="google"] #nav { background: #fff; border-top: 1px solid #dadce0; gap: 8px; }
html[data-theme="google"] #nav button { background: #fff; color: #1a73e8; border: 1px solid #dadce0; border-radius: 20px; font-weight: 600; }
html[data-theme="google"] #nav button:hover { background: #e8f0fe; }
html[data-theme="google"] #nav button.nav-alarm { background: #d93025; color: #fff; border-color: #d93025; }
html[data-theme="google"] #nav button.nav-back { background: #d2e3fc; color: #174ea6; border-color: #aecbfa; }
html[data-theme="google"] .card { border-radius: 12px; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
html[data-theme="google"] table.list th { background: #e8f0fe; color: #174ea6; }
html[data-theme="google"] .btn { border-radius: 18px; background: #fff; border-color: #dadce0; color: #1a73e8; }
html[data-theme="google"] .btn.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
html[data-theme="google"] .btn.danger { background: #d93025; color: #fff; border-color: #d93025; }
html[data-theme="google"] .btn.on { background: #188038; color: #fff; border-color: #188038; }
/* 主題下仍保留「即時警報」按鈕的紅色 / 淺藍呼吸燈 */
html[data-theme]:not([data-theme="google"]) #nav button.nav-alarm { background: linear-gradient(#ff4d4d, #b3161a); border-color: #ffb3b3; color: #fff; }
html[data-theme]:not([data-theme="google"]) #nav button.nav-back { background: linear-gradient(#9fd6ff, #3f95d8); color: #06294a; border-color: #d6eeff; }
/* 冷卻水塔灑水、RTO 火焰 */
#main svg .ctdrip { display: none; }
#main svg .ctdrip.on { display: inline; animation: ctdrip .6s linear infinite; }
@keyframes ctdrip { to { stroke-dashoffset: -12; } }
#main svg .ctdrip.on line { animation: ctdrip .6s linear infinite; }
#main svg .rtoflame { transform-box: fill-box; transform-origin: 50% 100%; animation: rtoflame .35s ease-in-out infinite alternate; }
@keyframes rtoflame { from { transform: scale(1, 1); } to { transform: scale(1.08, .86); } }

/* ===== DEMO 展示模式 ===== */
body.demo #nav, body.demo .sidenav, body.demo #dutyfloat, body.demo #editbtn, body.demo #simtoggle { display: none !important; }
#demobar { flex: 0 0 50px; display: flex; align-items: center; gap: 10px; padding: 4px 12px; background: linear-gradient(#3b2a6e, #22184a); color: #fff; overflow: hidden; }
#demobar .dbtag { background: #ffb020; color: #2a1a00; font-weight: 800; padding: 3px 10px; border-radius: 6px; letter-spacing: 1px; }
#demobar select { font-size: 16px; padding: 5px 8px; border-radius: 6px; border: 1px solid #8b7fd0; font-family: inherit; max-width: 200px; }
#demobar .dbpages { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; }
#demobar .dbpages button { flex: 0 0 auto; font-size: 16px; font-weight: 700; padding: 6px 14px; border-radius: 6px; border: 1px solid #8b7fd0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-family: inherit; white-space: nowrap; }
#demobar .dbpages button.on { background: #fff; color: #2a1a6e; }
#demobar .dbnote { font-size: 13px; opacity: .75; white-space: nowrap; }
#demobar .dbexit { font-size: 15px; font-weight: 700; padding: 6px 14px; border-radius: 6px; border: 1px solid #ffb3b3; background: #b3161a; color: #fff; cursor: pointer; font-family: inherit; white-space: nowrap; }
.democards { max-width: 1180px; margin: 0 auto 30px; }
.democards h3 { margin: 0 0 10px; font-size: 20px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.democards h3 small { font-size: 13px; font-weight: 400; opacity: .85; margin-left: 8px; }
.democards .dcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.democards .dcard { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: none; border-left: 6px solid var(--dc); background: #fff; cursor: pointer; font-family: inherit; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .12s, box-shadow .12s; }
.democards .dcard:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.democards .dci { font-size: 24px; }
.democards .dcard b { font-size: 16px; color: #15181d; }
.democards .dcard small { font-size: 12px; color: #5b6270; line-height: 1.3; }
.democards .dcard em { font-style: normal; font-size: 11px; color: var(--dc); font-weight: 700; margin-top: 2px; }
.demopop { position: fixed; z-index: 80; width: 300px; background: #fff; border: 1px solid #22184a; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; }
.demopop .dph { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#3b2a6e, #22184a); color: #fff; padding: 8px 12px; font-weight: 700; font-size: 16px; }
.demopop .dpx { border: none; background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.demopop .dpb { padding: 10px 12px 12px; }
.demopop .dprow { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #eef0f3; font-size: 15px; }
.demopop .dpbtns { display: flex; gap: 6px; margin-top: 10px; }
.demopop .dpbtns .btn { flex: 1; padding: 7px 4px; font-size: 14px; }
.demopop .dppv { text-align: center; font-size: 15px; } .demopop .dppv b { font-size: 36px; }
.demopop .dplim { display: flex; justify-content: center; gap: 12px; font-size: 13px; color: #5b6270; margin: 4px 0 8px; }
.demopop #dpspark { width: 100%; height: 80px; border-radius: 6px; display: block; }
.demopop .dpnote { font-size: 11px; color: #8a919c; text-align: right; margin-top: 3px; }
/* 登入頁：左邊登入框、右邊 DEMO 卡片（一頁看完，不用往下捲） */
.loginwrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding: 26px 0 20px 6%; }
.loginwrap .logincard { margin: 0; flex: 0 0 auto; }
.loginwrap .democards { margin: 0; width: 640px; max-width: calc(100vw - 48px); }
.loginwrap .democards h3 { color: #173f9e; text-shadow: none; }
.loginwrap .democards h3 small { color: #5b6270; opacity: 1; display: block; margin: 4px 0 0; }
.loginwrap .dcgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.loginwrap .dcard { padding: 8px 10px; min-height: 0; }
.loginwrap .dcard small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.loginwrap .dci { font-size: 20px; line-height: 1; }
/* 登入小視窗：左邊登入、右邊 DEMO 展示卡片 */
.loginmodal .lwrap2 { display: flex; gap: 18px; align-items: stretch; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
.loginmodal .lwrap2 .democards { width: 640px; margin: 0; background: var(--panel); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.28); padding: 18px 18px 16px; overflow: auto; }
.loginmodal .democards h3 { color: #173f9e; text-shadow: none; }
.loginmodal .democards h3 small { color: #5b6270; opacity: 1; display: block; margin: 4px 0 0; }
.loginmodal .dcgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.loginmodal .dcard { padding: 8px 10px; }
.loginmodal .dcard small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.loginmodal .dci { font-size: 20px; line-height: 1; }
@media (max-width: 1150px) { .loginmodal .lwrap2 { flex-direction: column; overflow: auto; } .loginmodal .lwrap2 .democards { width: auto; } }
/* 曾經警報、已自己恢復、還沒 ACK：數值框 / 偵測器 / 區域卡片 顏色恢復原本，外框黃色閃爍 */
.alback { animation: albackBlink 2s steps(1, end) infinite; }   /* 2026-09-27：1 秒一亮一暗太快 → 改 2 秒（亮 1 秒、暗 1 秒） */
@keyframes albackBlink { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .15; } }
/* 流量計頁：淺色底 → 文字改黑色、泵浦列裡的數字改藍色 */
.ffhd b { color: #15181d; }
.ffsub { color: #4b5563; }
.fpname { color: #15181d; }
.fpmet { color: #15181d; }
.fpmet b { color: #1e5fd0; }
.fpd { border-top-color: #c9cfd8; }
.fpd > summary::before { color: #15181d; }
.fpruns th { background: #2f3a4d; color: #fff; }
.fpruns th, .fpruns td { border-color: #c9cfd8; }
.fpruns td { color: #15181d; background: #fff; }
.fpnorun, .ffnopump { color: #4b5563; }
.fprun { color: #178a3a; font-weight: 700; }
/* 各流量計的個別氣塞設定（標題右邊） */
.ffhd { flex-wrap: wrap; align-items: center; }
.fflf { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #15181d; }
.fflf input { width: 64px; padding: 3px 6px; font-size: 14px; border: 1px solid #9aa3af; border-radius: 4px; font-family: inherit; }
.fflf .btn { padding: 3px 12px; font-size: 13px; }
.fflf small { color: #4b5563; }
.fflf select { padding: 3px 4px; font-size: 14px; border: 1px solid #9aa3af; border-radius: 4px; font-family: inherit; color: #111; background: #fff; }
.fflf .lfoff { color: #8a929c; }
.fpbase { margin-left: 10px; padding-left: 10px; border-left: 1px solid #c9cfd8; }
.fpbase.dim { color: #8a929c; }
.ffopt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; color: #15181d; margin: -2px 0 4px; }
.ffopt .fflf2 { display: inline-flex; align-items: center; gap: 5px; }
.ffopt input { width: 58px; padding: 3px 6px; font-size: 14px; border: 1px solid #9aa3af; border-radius: 4px; font-family: inherit; color: #111; }
.ffopt select { padding: 3px 4px; font-size: 14px; border: 1px solid #9aa3af; border-radius: 4px; font-family: inherit; color: #111; background: #fff; }
.ffopt small { color: #4b5563; }
.ffopt .btn { padding: 3px 12px; font-size: 13px; }
.ffopt .lfoff { color: #8a929c; }
.fpot { margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: #c62828; color: #ffeb3b; font-weight: bold; font-size: 13px; }
.lfbar input { width: 64px; }
/* 即時警報：類型 / 目前值 */
.altbl td.alty { font-weight: 800; text-align: center; }
.altbl td.alpv { white-space: nowrap; }
.altbl .alalm { color: #c0161b; } .altbl .alnorm { color: #178a3a; }
.altbl tr.al-unack td.alpv b, .altbl tr.al-ack td.alpv b { color: inherit; }
/* 即時警報（iFIX 風格）：圖例、排序表頭、右鍵選單 */
.toolbar .allegend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #15181d; margin-left: 14px; }
.allegend .lg { display: inline-block; width: 16px; height: 12px; border-radius: 2px; margin-left: 8px; }
.allegend .lg.un { background: var(--fault); animation: breathe 1.4s ease-in-out infinite; }
.allegend .lg.ak { background: #b51d21; }
.allegend .lg.bk { background: #bfe3ff; border: 1px solid #7fb7e6; }
.toolbar .alhint { font-size: 13px; color: #4b5563; margin-left: 14px; }
.altbl th[data-sk] { cursor: pointer; user-select: none; }
.altbl th[data-sk]:hover { background: #3b4a63; }
.altbl th.sorted::after { content: ' ' attr(data-dir); font-size: 11px; }
.altbl tbody tr { cursor: default; }
.almenu { display: none; position: fixed; z-index: 400; min-width: 220px; background: #fff; border: 1px solid #8a919c; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); overflow: hidden; }
.almenu a { display: block; padding: 9px 14px; font-size: 15px; cursor: pointer; color: #15181d; border-bottom: 1px solid #eef0f3; }
.almenu a:hover { background: #eaf1ff; }
.almenu .amt { padding: 6px 14px; font-size: 12px; color: #6b7380; background: #f6f7f9; }
.trendpage .tzhint { font-size: 13px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
#tc { cursor: crosshair; }
/* ===== 系統架構圖 ===== */
.archwrap { max-width: 1400px; margin: 0 auto; padding: 4px 8px 20px; }
.archtop { display: flex; gap: 16px; align-items: stretch; margin-bottom: 6px; }
.archcpu { background: #2f3a4d; color: #fff; border-radius: 10px; padding: 10px 14px; min-width: 430px; }
.archcpu .acname { font-size: 20px; font-weight: 800; }
.archcpu .acsub { font-size: 13px; opacity: .85; margin: 2px 0 8px; }
.acleds { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.aled { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.aled i { width: 14px; height: 14px; border-radius: 50%; background: #5b6270; border: 1px solid #111; }
.aled.on i { background: #1fb14a; } .aled.bad i { background: var(--fault); animation: breathe 1.4s ease-in-out infinite; }
.archlegend { flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: 8px 16px; background: #fff; border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #15181d; }
.archlegend .lg { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; margin-right: 4px; border: 1px solid #555; }
.archlegend .lg.ok { background: #1fb14a; } .archlegend .lg.bad { background: var(--fault); } .archlegend .lg.down { background: repeating-linear-gradient(45deg, #e0262b 0 5px, #6b1013 5px 10px); } .archlegend .lg.na { background: #d6dae0; }
.archlegend .lgt b { padding: 0 6px; border-radius: 3px; color: #fff; } .tDI { background: #1f8a3a; } .tDQ { background: #d9711f; } .tAI { background: #1e6fd9; }
.archbus { height: 22px; margin: 10px 0 4px; border-top: 5px solid #12a37f; position: relative; }
.archbus span { position: absolute; left: 10px; top: 2px; font-size: 13px; font-weight: 800; color: #0d6b54; }
.archst { background: #fff; border: 2px solid #9aa3af; border-radius: 10px; padding: 8px 10px 10px; margin-bottom: 12px; }
.archst.down { border-color: var(--fault); background: #fff0f0; }
.asthd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 16px; color: #15181d; }
.astlamp { width: 16px; height: 16px; border-radius: 50%; background: #1fb14a; border: 1px solid #111; }
.archst.down .astlamp { background: var(--fault); animation: breathe 1.2s ease-in-out infinite; }
.astsub { color: #4b5563; font-size: 13px; }
.aststat { margin-left: auto; font-weight: 800; font-size: 15px; } .aststat.ok { color: #178a3a; } .aststat.bad { color: var(--fault); }
.astrack { display: flex; gap: 3px; align-items: stretch; overflow-x: auto; padding-bottom: 2px; }
.aim { flex: 0 0 74px; background: #3d4452; color: #fff; border-radius: 4px; padding: 6px 4px; font-size: 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.asrv { flex: 0 0 34px; background: #6b7480; color: #fff; border-radius: 4px; font-size: 11px; text-align: center; display: flex; align-items: center; justify-content: center; }
.amod { flex: 0 0 58px; min-height: 118px; background: #e9ecef; border: 1px solid #7a8492; border-top: 8px solid #999; border-radius: 3px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; cursor: pointer; color: #15181d; }
.amod.tDI { border-top-color: #1f8a3a; } .amod.tDQ { border-top-color: #d9711f; } .amod.tAI { border-top-color: #1e6fd9; }
.amod:hover { outline: 2px solid #1e6fd9; }
.amod .amslot { font-size: 18px; font-weight: 800; } .amod .amtype { font-size: 12px; font-weight: 700; } .amod .amid { font-size: 11px; color: #4b5563; }
.amod .amst { margin-top: auto; font-size: 12px; font-weight: 800; color: #178a3a; min-height: 15px; }
.amod.na { background: #f3f4f6; } .amod.na .amst::after { content: '未對點'; color: #8a919c; font-weight: 400; font-size: 11px; }
.amod.bad { background: var(--fault); color: #fff; animation: breathe 1.4s ease-in-out infinite; } .amod.bad .amid, .amod.bad .amst { color: #fff; }
.amod.down { background: repeating-linear-gradient(45deg, #f6c7c8 0 6px, #eaa0a2 6px 12px); } .amod.down .amst { color: #b3161a; } .amod.down.na .amst::after { content: ''; }
.archnote { font-size: 13px; color: #4b5563; }
.astsum { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #4b5563; margin-left: 10px; }
.astsum i { width: 14px; height: 14px; border-radius: 50%; background: #c9cfd8; border: 1px solid #555; }
.astsum.on { color: var(--fault); font-weight: 800; } .astsum.on i { background: var(--fault); animation: breathe 1.2s ease-in-out infinite; }
.astchk { font-size: 12px; color: #b07800; font-weight: 700; }
/* 系統架構圖：模組燈號 / 實體位址 */
.amod { min-height: 168px; }
.amod .amaddr { font-size: 10.5px; color: #1e3a6e; font-weight: 700; }
.amleds { display: grid; grid-template-columns: repeat(2, 9px); grid-auto-flow: row; grid-template-rows: repeat(8, 9px); gap: 2px 5px; margin: 2px 0; }   /* 跟實際模組一樣：一列兩點，左 .0 右 .1、再來 .2 .3 … */
.amleds i { width: 9px; height: 9px; border-radius: 2px; background: #c9cfd8; border: 1px solid #8a919c; }
.amleds i.on { background: #1fb14a; border-color: #0f6a2a; box-shadow: 0 0 3px #1fb14a; }
.amod.tDQ .amleds i.on { background: #ff9f1a; border-color: #b8660a; box-shadow: 0 0 3px #ff9f1a; }
.amleds i.nd { background: #eceff3; border-style: dashed; }
.amleds.ai { grid-template-columns: repeat(8, 5px); grid-template-rows: 44px; grid-auto-flow: row; gap: 1px; }
.amleds.ai i { width: 5px; height: 44px; border-radius: 1px; position: relative; background: #e6eaef; }
.amleds.ai i b { position: absolute; left: 0; right: 0; bottom: 0; background: #1e6fd9; }
.amleds.ai i.bad b { background: var(--fault); }
.amod.bad .amaddr { color: #fff; }
.archtbl td.n { text-align: right; font-variant-numeric: tabular-nums; } .archtbl td.b { font-weight: 800; color: #1e5fd0; }
.archtbl td.on { color: #178a3a; font-weight: 800; }
.archtbl small { color: #6b7380; }
.utilpage:has(.archwrap) { overflow: hidden; padding-bottom: 6px; }
.archwrap { transform-origin: top center; }
.archst { padding: 6px 10px 8px; margin-bottom: 8px; }
.asthd { margin-bottom: 5px; }
.archbus { margin: 6px 0 2px; height: 16px; }

/* 系統架構圖：右側點位查詢表 */
.archwrap:has(.archside) { max-width: 1800px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 10px; align-items: stretch; }
.archside { position: relative; min-height: 400px; }
.archside .asin { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); color: #15181d; }
.archside h4 { margin: 0; font-size: 17px; font-weight: 800; }
.asbox { display: flex; align-items: center; gap: 4px; border: 2px solid #1e6fd9; border-radius: 8px; padding: 0 6px; background: #fff; }
.asbox input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 15px; padding: 7px 2px; background: transparent; color: #15181d; }
.asbox button { border: none; background: none; font-size: 15px; color: #6b7280; cursor: pointer; }
.aschips { display: flex; align-items: center; gap: 4px; }
.aschips button { border: 1px solid #9aa4b2; background: #f3f4f6; border-radius: 12px; padding: 2px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #15181d; }
.aschips button.on { background: #1e6fd9; border-color: #1e6fd9; color: #fff; }
.aschips #archcnt { margin-left: auto; font-size: 13px; color: #4b5563; }
.astbl { flex: 1; min-height: 0; overflow: auto; border: 1px solid #d6dae0; border-radius: 6px; }
.astbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.astbl th { position: sticky; top: 0; background: #2f3a4d; color: #fff; font-weight: 600; padding: 5px 4px; text-align: left; font-size: 12px; z-index: 1; }
.astbl td { padding: 4px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.astbl tr[data-i] { cursor: pointer; user-select: none; }
.astbl tr[data-i]:hover { background: #eef4ff; }
.astbl tr.sel { background: #fff3b0 !important; }
.astbl tr.asmodrow { background: #f3f4f6; }
.astbl small { display: block; font-size: 11.5px; color: #4b5563; }
.astbl .aspos { white-space: nowrap; font-weight: 700; }
.astbl .asm { display: inline-block; min-width: 22px; text-align: center; padding: 0 3px; margin-right: 4px; border-radius: 3px; color: #fff; font-size: 11px; }
.astbl .asm.tDI { background: #1f8a3a; } .astbl .asm.tDQ { background: #d9711f; } .astbl .asm.tAI { background: #1e6fd9; }
.astbl .asad { font-family: Consolas, monospace; color: #1e3a6e; font-weight: 700; white-space: nowrap; }
.astbl .asv { text-align: center; font-weight: 800; white-space: nowrap; color: #6b7280; }
.astbl .asv.on { color: #178a3a; } .astbl .asv.onq { color: #c25e0c; } .astbl .asv.ai { color: #1e4fd9; } .astbl .asv.ok { color: #178a3a; } .astbl .asv.bad { color: #c41b1b; }
.astbl .asnone { text-align: center; color: #6b7280; padding: 20px; }
.ashint { font-size: 12px; color: #5b6270; line-height: 1.5; }
.amod.hit { outline: 3px solid #f5c400; outline-offset: -1px; }
.amod.selm { outline: 4px solid #e0262b; outline-offset: 0; animation: selblink 1s step-end infinite; }
@keyframes selblink { 50% { outline-color: #f5c400; } }
.archtbl tr.hl td { background: #fff3b0; font-weight: 700; }
.archtbl .adesc { color: #4b5563; font-size: 12px; }
.apnav { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.apnav h3 { margin: 0; flex: 1; text-align: center; font-size: 19px; }
.apnav .apcnt { font-size: 13px; color: #4b5563; white-space: nowrap; }
.apnav .btn { white-space: nowrap; padding: 6px 14px; font-weight: 700; }
.apnav .btn:disabled { opacity: .4; cursor: default; }
.apbtns { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.apbtns > span { display: inline-flex; gap: 8px; align-items: center; }
.apbtns .hidden { display: none !important; }
.apbtns .aptip { font-size: 12px; color: #4b5563; }
.archtbl td.adcell { text-align: left; min-width: 150px; color: #1f2937; }
.archtbl .adnone { color: #b0b6bf; }
.archtbl input.adin { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 3px 6px; border: 2px solid #1e6fd9; border-radius: 4px; background: #fffef0; }
/* 模組資訊浮動視窗（不遮背景） */
.archpop { position: fixed; z-index: 28; }
.archpop.hidden { display: none; }
.archpop > .card { max-height: calc(100vh - 150px); overflow: auto; box-shadow: 0 10px 34px rgba(0,0,0,.35), 0 0 0 2px #1e6fd9; margin: 0; }
.archpop .apnav { cursor: move; background: #eef3fb; margin: -4px -4px 8px; padding: 6px; border-radius: 8px; user-select: none; }
.archpop .apnav button { cursor: pointer; }
.archpop .apnav .apmin { padding: 6px 10px; min-width: 36px; }
.archpop.min > .card > :not(.apnav) { display: none; }
.archpop.min > .card > .apnav { margin-bottom: -4px; }
/* ============ 系統設定：通訊連線 / 點位資料庫 ============ */
#main > .page.cmpage { padding: 10px 14px; overflow: hidden; }
.cmwrap { height: 100%; display: flex; flex-direction: column; gap: 8px; color: #15181d; }
.cmtabs { display: flex; align-items: center; gap: 6px; }
.cmtabs button { border: 1px solid #7d8ba0; background: #e3e8f0; border-radius: 8px 8px 0 0; padding: 7px 18px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; color: #1e2a3d; }
.cmtabs button.on { background: #1e4fa8; color: #fff; border-color: #1e4fa8; }
.cmtabnote { margin-left: auto; font-size: 13px; color: #5b6270; }
.cmbody { flex: 1; min-height: 0; display: flex; gap: 10px; }
.cmleft { width: 310px; flex: 0 0 310px; display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cmtool { display: flex; gap: 6px; } .cmtool .btn { padding: 5px 10px; font-size: 14px; }
.cmtree { flex: 1; min-height: 0; overflow: auto; border: 1px solid #d6dae0; border-radius: 6px; }
.cmnode { display: flex; align-items: center; gap: 6px; padding: 7px 8px; cursor: pointer; border-bottom: 1px solid #eef0f3; font-size: 15px; }
.cmnode.d { padding-left: 28px; font-size: 14px; }
.cmnode small { margin-left: auto; color: #6b7280; font-size: 12px; white-space: nowrap; }
.cmnode:hover { background: #eef4ff; } .cmnode.sel { background: #fff3b0; }
.cmlamp { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #555; vertical-align: -1px; background: #c9ced6; }
.cmlamp.ok { background: #1fb14a; box-shadow: 0 0 4px #1fb14a; } .cmlamp.bad { background: #e0262b; box-shadow: 0 0 4px #e0262b; animation: breathe 1.4s infinite; }
.cmsim { font-size: 13px; display: flex; flex-direction: column; gap: 3px; } .cmsim select { font: inherit; font-size: 13px; padding: 3px; }
.cmsave { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cmsave .btn { padding: 6px 10px; font-size: 14px; }
.cmdirty { width: 100%; color: #c2410c; font-weight: 700; font-size: 13px; }
.cmright { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.12); overflow: auto; }
.cmright h2 { margin: 0; font-size: 20px; } .cmdrv { font-size: 14px; font-weight: 400; color: #4b5563; margin-left: 8px; }
.cmgrid { display: flex; gap: 14px; align-items: flex-start; }
.cmform { flex: 1; min-width: 0; } .cmform.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
label.f.cmf { grid-template-columns: 150px 1fr; margin: 5px 0; font-size: 15px; }
.cmfv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmfv input:not([type=checkbox]), .cmfv select { font: inherit; font-size: 15px; padding: 4px 6px; border: 1px solid #9aa4b2; border-radius: 4px; min-width: 0; }
.cmfv > input:not([type=checkbox]):not([style]), .cmfv > select { flex: 1; max-width: 380px; }
.cmfv small { width: 100%; color: #6b7280; font-size: 12px; }
.cmstat { width: 330px; flex: 0 0 330px; background: #f3f5f8; border: 1px solid #d6dae0; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.cmstat .cmsh { font-size: 17px; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cmstat table { width: 100%; border-collapse: collapse; } .cmstat td { padding: 3px 4px; border-bottom: 1px solid #e3e6ea; vertical-align: top; } .cmstat td:first-child { color: #4b5563; white-space: nowrap; width: 90px; }
.cmsimtag { margin-left: 8px; background: #e0a800; color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 10px; }
.cmhint { font-size: 13px; color: #4b5563; background: #f6f8fb; border-left: 4px solid #1e6fd9; padding: 6px 10px; border-radius: 4px; }
.cmptool { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cmptool .btn { padding: 5px 10px; font-size: 14px; } .cmptool select { font: inherit; font-size: 14px; padding: 4px; }
.cmsep { width: 1px; height: 24px; background: #c9ced6; margin: 0 4px; }
.cmptbl { flex: 1; min-height: 160px; overflow: auto; border: 1px solid #d6dae0; border-radius: 6px; }
.cmptbl .utable { font-size: 13.5px; } .cmptbl td, .cmptbl th { padding: 4px 6px; white-space: nowrap; }
.cmptbl tr[data-i] { cursor: pointer; } .cmptbl tr[data-i]:hover { background: #eef4ff; } .cmptbl tr.sel { background: #fff3b0 !important; }
.cmptbl td.cmtag { font-weight: 700; } .cmptbl td.n { text-align: right; } .cmptbl td.b { color: #1e4fd9; font-weight: 800; } .cmptbl td.small { font-size: 12px; color: #4b5563; }
.mono { font-family: Consolas, 'Courier New', monospace; }
td.tok { color: #178a3a; font-weight: 700; } td.tbad, .tbad { color: #c41b1b; font-weight: 700; white-space: normal !important; }
.cmdrvs { display: flex; flex-direction: column; gap: 4px; } .cmdrvopt { padding: 6px 8px; border: 1px solid #d6dae0; border-radius: 6px; cursor: pointer; } .cmdrvopt.dis { color: #9aa1ab; cursor: default; } .cmdrvopt small { margin-left: 6px; }
/* 點位編輯視窗 */
.tdlg { width: 860px; max-width: 96vw; max-height: 90vh; overflow: auto; }
.tdlg h3 { margin: 0 0 8px; }
.tdsec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border: 1px solid #d6dae0; border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: #f8f9fb; }
.tdsec > b { width: 100%; font-size: 14px; color: #1e3a6e; }
.tdsec label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.tdsec input[type=number] { width: 100px; }
.tdgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.tdgrid label { display: flex; flex-direction: column; font-size: 13px; color: #4b5563; gap: 2px; }
.tdgrid label.chk, .tdsec label.chk { flex-direction: row; align-items: center; color: #15181d; font-size: 14px; }
.tdlg input:not([type=checkbox]):not([type=radio]), .tdlg select { font: inherit; font-size: 15px; padding: 4px 6px; border: 1px solid #9aa4b2; border-radius: 4px; color: #15181d; background: #fff; }
.tdgrid small { color: #1e6fd9; font-size: 12px; }
.tdcvrow { width: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; } .tdcvrow input { width: 90px !important; }
.tdcvrow b { color: #1e4fd9; font-size: 16px; }
.tdsec.conv small { width: 100%; color: #6b7280; }
.tdnote { font-size: 13px; color: #4b5563; background: #fff8e1; border-left: 4px solid #e0a800; padding: 6px 10px; border-radius: 4px; }
/* 點位資料庫 */
.tdbwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tdbtool { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.tdbtool .btn { padding: 5px 10px; font-size: 14px; } .tdbtool select { font: inherit; font-size: 14px; padding: 4px; }
.tdbtool .chk { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.tdbq { width: 380px; } .tdbcnt { color: #4b5563; font-weight: 700; margin-left: 4px; }
.tdbgrid { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid #b9c1cc; border-radius: 6px; overflow: hidden; }
.tdbhead { display: flex; background: #2f3a4d; color: #fff; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.tdbhead span { box-sizing: border-box; padding: 6px 5px; border-right: 1px solid #4a5568; cursor: pointer; white-space: nowrap; overflow: hidden; user-select: none; }
.tdbhead span:hover { background: #3e4d66; }
.tdbscroll { flex: 1; min-height: 0; overflow: auto; position: relative; }
.tdbspace { position: relative; } .tdbrows { position: absolute; left: 0; top: 0; }
.tdbr { display: flex; height: 28px; font-size: 13px; border-bottom: 1px solid #e5e7eb; cursor: pointer; background: #fff; }
.tdbr:nth-child(even) { background: #f7f9fc; } .tdbr:hover { background: #eef4ff; } .tdbr.sel { background: #fff3b0 !important; }
.tdbr span { box-sizing: border-box; padding: 0 5px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #eef0f3; }
.tdbr .c-val, .tdbr .c-hh, .tdbr .c-hi, .tdbr .c-lo, .tdbr .c-ll, .tdbr .c-raw, .tdbr .c-rl, .tdbr .c-rh, .tdbr .c-el, .tdbr .c-eh { text-align: right; font-family: Consolas, monospace; }
.tdbr .c-hh, .tdbr .c-ll { color: #b3161a; } .tdbr .c-hi, .tdbr .c-lo { color: #b45309; }
.tdbr .vnum { color: #1e4fd9; } .tdbr .von { color: #178a3a; } .tdbr .voff { color: #6b7280; } .tdbr .valm { color: #fff; background: #d11; padding: 0 4px; border-radius: 3px; }
.tdbr .dim { color: #9aa1ab; }
.tdbsrc { padding: 0 6px; border-radius: 3px; font-size: 12px; color: #fff; background: #1e6fd9; } .tdbsrc.s7 { background: #0f766e; }
.tdbfoot { font-size: 12px; color: #5b6270; }

/* 開關點狀態圖示：旋鈕 / 閥 / ALM / 燈號 */
.sb { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.sbna { color: #9aa1ab; font-weight: 400; }
.sblamp i { width: 13px; height: 13px; border-radius: 50%; background: #c9ced6; border: 1px solid #6b7280; display: inline-block; }
.sblamp b { color: #6b7280; } .sblamp.on i { background: #1fb14a; box-shadow: 0 0 5px #1fb14a; border-color: #0f6e2c; } .sblamp.on b { color: #178a3a; }
.sblamp.onq i { background: #ff9f1a; box-shadow: 0 0 5px #ff9f1a; border-color: #b8660a; } .sblamp.onq b { color: #c25e0c; }
.sbalm { background: #d11; color: #fff; padding: 1px 8px; border-radius: 3px; animation: breathe 1.4s infinite; }
.sbnorm { color: #178a3a; font-weight: 600; }
.sbknob svg { width: 34px; height: 22px; } .sbknob .kb { fill: #3a4252; stroke: #111; } .sbknob .kp { fill: #f5f5f5; }
.sbknob .kl, .sbknob .kr { font-size: 8px; font-weight: 800; fill: #9aa1ab; } .sbknob.l .kl, .sbknob.r .kr { fill: #1e4fd9; }
.sbknob b { color: #1e3a6e; }
.sbvalve svg { width: 28px; height: 17px; } .sbvalve .vs { stroke: #333; stroke-width: 2; }
.sbvalve.op .vb { fill: var(--run); stroke: #0f6e2c; stroke-width: 1.5; } .sbvalve.op b { color: #178a3a; }
.sbvalve.cl .vb { fill: var(--stop); stroke: #3a4252; stroke-width: 1.5; } .sbvalve.cl b { color: #3a4252; }
.sbvalve.dim .vb { fill: #eceef1; stroke: #b0b6bf; stroke-width: 1.5; } .sbvalve.dim b { color: #9aa1ab; }
td.sbcell { text-align: left !important; }
/* 點位工具 */
.tlwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tlsubs { display: flex; gap: 6px; align-items: center; border-bottom: 2px solid #d6dae0; padding-bottom: 6px; }
.tlsubs button { border: 1px solid #9aa4b2; background: #f3f4f6; border-radius: 16px; padding: 5px 16px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: #1e2a3d; }
.tlsubs button.on { background: #0f766e; border-color: #0f766e; color: #fff; }
.tlnote { margin-left: auto; font-size: 13px; color: #6b7280; }
.tlbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.tltool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.tltool .btn { padding: 5px 12px; font-size: 14px; } .tltool select { font: inherit; font-size: 14px; padding: 4px; }
.tltool .chk { display: flex; align-items: center; gap: 4px; }
.tlfn { color: #1e4fd9; font-weight: 700; }
.tlchip { border: 1px solid #b9c1cc; background: #f7f9fc; border-radius: 14px; padding: 3px 12px; font: inherit; font-size: 13.5px; cursor: pointer; margin-right: 4px; }
.tlchip.on { background: #1e4fa8; border-color: #1e4fa8; color: #fff; }
.tlok { color: #178a3a; font-weight: 800; margin-left: 8px; }
.tlhint { font-size: 12.5px; color: #6b7280; }
.tltbl { flex: 1; min-height: 0; overflow: auto; border: 1px solid #d6dae0; border-radius: 6px; }
.tltbl .utable { font-size: 13.5px; } .tltbl td, .tltbl th { padding: 4px 6px; } .tltbl td.b { font-weight: 700; white-space: nowrap; }
.tltbl td.why { font-size: 12.5px; color: #4b5563; text-align: left; } .tltbl td.small { font-size: 12px; }
.tltbl tr.j-yes td.jj { color: #b3161a; font-weight: 700; } .tltbl tr.j-maybe { background: #fff8e1; } .tltbl tr.j-no td.jj { color: #6b7280; }
.tltbl tr.b-fix { background: #eef6ff; } .tltbl tr.b-maybe { background: #fff8e1; } .tltbl tr.b-bad { background: #fdecec; } .tltbl tr.b-none td { color: #6b7280; }
.tltbl input.tbval { width: 190px; font: inherit; font-size: 13.5px; padding: 3px 5px; border: 1px solid #9aa4b2; border-radius: 4px; }
.tlfoot { font-size: 12.5px; color: #5b6270; line-height: 1.5; }
.tlrules { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tlrule { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.tlrule textarea { font-family: Consolas, monospace; font-size: 13.5px; padding: 6px; border: 1px solid #9aa4b2; border-radius: 6px; resize: vertical; min-height: 150px; }
/* 西門子 PLC 程式分析 */
.plpath { width: 460px; font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid #9aa4b2; border-radius: 4px; }
.plst.ok { color: #178a3a; font-weight: 700; } .plst.bad { color: #c41b1b; font-weight: 700; }
.pltabs { border-bottom: none; padding-bottom: 0; } .pltabs button.on { background: #1e4fa8; border-color: #1e4fa8; }
.plbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.plask { flex: 1; min-height: 0; display: flex; gap: 10px; }
.plleft { width: 360px; flex: 0 0 360px; display: flex; flex-direction: column; gap: 6px; min-height: 0; } .plleft.wide { width: 560px; flex-basis: 560px; }
.plflt { display: flex; gap: 10px; font-size: 13.5px; }
.pllist { flex: 1; min-height: 0; overflow: auto; border: 1px solid #d6dae0; border-radius: 6px; }
.plrow { display: flex; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #eef0f3; cursor: pointer; font-size: 13.5px; }
.plrow b { min-width: 80px; color: #1e3a6e; } .plrow:hover { background: #eef4ff; } .plrow.sel { background: #fff3b0; }
.plright { flex: 1; min-width: 0; overflow: auto; border: 1px solid #d6dae0; border-radius: 6px; padding: 10px 12px; background: #fcfcfd; }
.plhelp { color: #374151; font-size: 14.5px; line-height: 1.7; } .plhelp h3 { margin: 0 0 6px; }
.plhead { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 8px; } .plhead .mono { color: #1e3a6e; font-weight: 800; }
.plhead .btn { padding: 4px 10px; font-size: 13px; margin-left: auto; }
.pltree { font-size: 14px; }
.plw { border-left: 4px solid #1e6fd9; background: #fff; border-radius: 6px; padding: 6px 10px; margin: 6px 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.plwh { font-weight: 600; } .plblk { background: #eef3fb; color: #1e3a6e; padding: 1px 6px; border-radius: 4px; font-weight: 800; }
.pon { color: #178a3a; } .poff { color: #6b7280; }
.plcond { margin: 4px 0; font-size: 13.5px; color: #374151; } .plcond ol { margin: 2px 0 0 18px; padding: 0; } .plcond li { margin: 2px 0; }
.plstl summary { cursor: pointer; font-size: 12.5px; color: #1e4fd9; } .plstl pre { font-size: 12px; background: #0f172a; color: #e2e8f0; padding: 8px; border-radius: 6px; overflow: auto; margin: 4px 0; }
.plins { margin-top: 4px; }
.plin { padding: 2px 0 2px 6px; font-size: 13.5px; } .plin > .mono, .plin > .pltog { cursor: pointer; color: #1e4fd9; font-weight: 700; }
.plin .plsub { margin-left: 18px; border-left: 2px dashed #c9ced6; padding-left: 8px; }
.plsrc { font-size: 13px; color: #6b7280; margin: 3px 0; }
.pxw td { background: #fff8e1; }
.plcode { font-family: Consolas, monospace; font-size: 12.5px; }
.pcl { display: flex; gap: 8px; padding: 1px 4px; white-space: nowrap; } .pcl:hover { background: #eef4ff; } .pcl.hl { background: #fff3b0; } .pcl.fh { background: #dbeafe; }
.pcl .pn { width: 44px; text-align: right; color: #9aa1ab; } .pcl .plb { width: 44px; color: #b45309; font-weight: 700; } .pcl .pop { width: 52px; color: #1e4fd9; font-weight: 700; } .pcl .parg { min-width: 180px; } .pcl .pnm { color: #178a3a; }
.plhw { flex: 1; min-height: 0; overflow: auto; display: flex; gap: 12px; align-items: flex-start; }
.plhwrack { width: 380px; flex: 0 0 380px; } .plhwrack h3, .plst1 h3 { margin: 0 0 6px; font-size: 16px; }
.plhwst { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.plst1 { background: #fff; border: 1px solid #d6dae0; border-radius: 8px; padding: 8px 10px; }
.plmatch { font-size: 13.5px; margin-bottom: 6px; } .plwarn { color: #b45309; font-weight: 700; margin-left: 8px; }
.plmods { display: flex; flex-wrap: wrap; gap: 4px; }
.plmod { width: 92px; border: 1px solid #9aa4b2; border-top: 6px solid #999; border-radius: 4px; padding: 3px; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #f3f4f6; }
.plmod b { font-size: 14px; } .plmod.di { border-top-color: #1f8a3a; } .plmod.dq { border-top-color: #d9711f; } .plmod.ai { border-top-color: #1e6fd9; }
.plwire { background: #f0f7ff; border: 1px solid #bcd3f5; border-radius: 6px; padding: 4px 8px; margin: 4px 0; font-size: 13.5px; }
.plwire summary { cursor: pointer; font-weight: 700; color: #1e3a6e; }
.plwl { columns: 2; column-gap: 24px; margin-top: 4px; } .plwl div { break-inside: avoid; padding: 1px 0; } .plwl .mono { color: #1e4fd9; font-weight: 700; display: inline-block; min-width: 48px; }
/* 畫面管理 / 版型精靈（2026-09-28） */
.sysbtn.custom { border-color: #3b7bd6; background: linear-gradient(#f5f9ff, #d9e6f8); }
.smgr { display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 10px 14px; }
.smtool { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn.big { font-size: 17px; padding: 8px 18px; }
.smnote { color: #4b5563; font-size: 14px; }
.smtbl { flex: 1; min-height: 0; overflow: auto; }
.smtbl tr.smc td { background: #f5f9ff; }
.smtag { background: #3b7bd6; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 8px; vertical-align: middle; }
.smact { white-space: nowrap; } .smact .btn { padding: 3px 9px; font-size: 13px; margin-right: 3px; }
.smwiz { display: flex; gap: 12px; height: 100%; box-sizing: border-box; padding: 10px 14px; }
.smleft { width: 560px; flex: 0 0 560px; display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow: auto; }
.smrow { display: flex; align-items: center; gap: 8px; } .smrow b { width: 72px; } .smrow input:not([type]), .smrow select { font-size: 15px; padding: 5px 8px; flex: 1; }
.smsec { font-weight: 800; color: #1e3a6e; font-size: 15px; margin-top: 4px; border-bottom: 2px solid #d6dae0; padding-bottom: 2px; }
.smlays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.smlay { border: 2px solid #c9cfd8; border-radius: 6px; background: #f4f6f9; padding: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-size: 11.5px; font-family: inherit; }
.smlay svg { width: 88px; height: 56px; } .smlay rect { fill: #dfe6ef; stroke: #6b7480; stroke-width: 1.2; } .smlay text { font-size: 13px; text-anchor: middle; fill: #374151; font-weight: 700; }
.smlay.on { border-color: #1e6fd9; background: #e8f1ff; } .smlay.on rect { fill: #bcd3f5; }
.smregs { display: flex; flex-direction: column; gap: 6px; }
.smreg { border: 1px solid #d6dae0; border-radius: 6px; padding: 6px 8px; background: #fbfcfd; }
.smrh { display: flex; gap: 6px; align-items: center; } .smrh input { flex: 1; font-size: 14px; padding: 4px 6px; } .smrh select { font-size: 14px; padding: 3px; max-width: 250px; }
.smno { width: 22px; height: 22px; border-radius: 50%; background: #2f3a4d; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: 0 0 22px; }
.smrb { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 13.5px; padding-left: 28px; } .smrb select, .smrb input { font-size: 13.5px; padding: 2px 4px; }
.smbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; padding-bottom: 4px; }
.smright { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.smph { font-weight: 800; color: #1e3a6e; } .smph span { font-weight: 400; color: #4b5563; font-size: 13.5px; margin-left: 8px; }
.smprev { flex: 1; min-height: 0; border: 1px solid #c9cfd8; border-radius: 6px; background: var(--bg, #e9ecf0); display: flex; }
.smprev svg { width: 100%; height: 100%; }
.smwarn { color: #b45309; font-weight: 700; font-size: 13.5px; min-height: 18px; }
/* AI 小幫手自動讓位（歷史曲線頁）：收合、固定在右下角，不蓋到上方按鈕與說明 */
.dutyfloat.dfaway { top: auto !important; left: auto !important; right: calc(var(--navw, 190px) + 16px) !important; bottom: var(--albar-clear, 110px); width: 250px; }
.dutyfloat.dfaway .dfavwrap, .dutyfloat.dfaway .dfavatar { width: 52px; height: 52px; }
/* PLC 硬體組態：CPU / 網路卡卡片、模組位址 */
.plcards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.plcard { border: 1px solid #c9d3e0; border-left: 6px solid #1e4fa8; border-radius: 8px; background: #fff; padding: 7px 10px; font-size: 13.5px; line-height: 1.55; }
.plcard.net { border-left-color: #0f9d8a; } .plcard b { font-size: 16px; } .plcard .plct { font-weight: 800; color: #4b5563; font-size: 12.5px; }
.plcard .plip b { font-size: 17px; color: #0b6e61; }
.plmod .pladdr { color: #1f6f2e; font-weight: 700; font-size: 11px; } .plmod .pladdr.q { color: #b45309; }
/* 通知發報 */
.nfwrap { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.nftop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nfmain { font-size: 17px; font-weight: 800; padding: 5px 12px; border: 2px solid #9aa4b2; border-radius: 8px; background: #f4f6f9; cursor: pointer; }
.nfmain.on { border-color: #178a3a; background: #e7f7ec; color: #0f6b2b; }
.nfsum { color: #374151; font-size: 14px; } .nfsim { color: #b45309; font-weight: 700; font-size: 13.5px; }
.nftabs { display: flex; gap: 4px; margin-left: auto; } .nftabs button { font: inherit; font-size: 14px; padding: 5px 12px; border: 1px solid #b8c1ce; border-radius: 6px; background: #f4f6f9; cursor: pointer; }
.nftabs button.on { background: #1e4fa8; color: #fff; border-color: #1e4fa8; }
.nfdirty { color: #c41b1b; font-weight: 700; }
.nfbody { flex: 1; min-height: 0; overflow: auto; }
.nfgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nfcard { border: 1px solid #d0d6de; border-left: 6px solid #9aa4b2; border-radius: 8px; background: #fff; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.nfcard.on { border-left-color: #178a3a; }
.nfh { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 10px; } .nfh .nftog { margin-left: auto; font-size: 14px; }
.nfrow { display: flex; gap: 10px; flex-wrap: wrap; }
.nff { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #4b5563; flex: 1; min-width: 150px; } .nff.wide { flex-basis: 100%; }
.nff input, .nff select { font: inherit; font-size: 14.5px; padding: 4px 7px; border: 1px solid #9aa4b2; border-radius: 4px; color: #111; }
.nff small { color: #6b7280; font-size: 11.5px; }
.nftog { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
.nftest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .nftest input { font: inherit; padding: 4px 7px; border: 1px solid #9aa4b2; border-radius: 4px; width: 230px; }
.nfres { font-size: 13.5px; font-weight: 700; } .nfres.ok { color: #178a3a; } .nfres.bad { color: #c41b1b; }
.nfhelp { font-size: 12.5px; color: #4b5563; background: #f6f8fb; border-radius: 6px; padding: 5px 8px; line-height: 1.6; }
.nfpre { font-size: 13px; display: flex; gap: 4px; align-items: center; } .btn.sm { padding: 2px 8px; font-size: 12.5px; }
.nftrace { max-height: 140px; overflow: auto; background: #0f172a; color: #cbd5e1; font-size: 11.5px; padding: 6px; border-radius: 6px; margin: 0; }
.nfchip { margin: 2px; } .nfsample { background: #fff; border: 1px solid #d0d6de; padding: 6px; border-radius: 6px; font-size: 13px; white-space: pre-wrap; }
.nfrc { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; } .nftool { display: flex; gap: 10px; align-items: center; } .nfnote { color: #4b5563; font-size: 13px; }
.nftbl { flex: 1; min-height: 0; overflow: auto; } .nftbl input:not([type=checkbox]) { font: inherit; font-size: 13.5px; padding: 3px 5px; border: 1px solid #b8c1ce; border-radius: 4px; }
.nftbl tr.off td { opacity: .5; } .nfchs { white-space: nowrap; } .nfchs label { margin-right: 4px; font-size: 13px; }
.nftbl tr.nfbad td { background: #fff1f1; }
/* OPC DA / iFIX 匯入 */
.cmopcres { grid-column: 1 / -1; font-size: 13px; } .cmopcres .btn { margin: 2px; }
.opcdlg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .opcdlg label { display: flex; flex-direction: column; font-size: 13px; color: #4b5563; gap: 2px; } .opcdlg label.w { grid-column: 1 / -1; }
.opcdlg input, .opcdlg select { font: inherit; font-size: 14.5px; padding: 4px 7px; border: 1px solid #9aa4b2; border-radius: 4px; color: #111; } .opcdlg label.chk { flex-direction: row; align-items: center; }
.ifbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ifsum { background: #f6f8fb; border: 1px solid #d6dae0; border-radius: 6px; padding: 6px 10px; font-size: 13.5px; line-height: 1.7; }
.ifcfg { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; } .ifcfg input, .ifcfg select { font: inherit; font-size: 13.5px; padding: 3px 5px; }
.tltbl tr.ifex td { background: #fff8e1; }

/* ---- 🧮 計算點（公式）編輯視窗＋公式小幫手 ---- */
.cxdlg { width: min(1180px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.cxgrid { display: grid; grid-template-columns: 1fr 360px; gap: 14px; min-height: 0; flex: 1; overflow: hidden; }
.cxleft { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; padding-right: 4px; }
.cxlim { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cxlim label { display: flex; flex-direction: column; font-size: 13px; color: #4b5563; gap: 2px; }
.cxlab { font-weight: 700; margin-top: 4px; } .cxlab small { font-weight: 400; color: #6b7280; margin-left: 8px; }
.cxexpr { font-family: Consolas, 'Courier New', monospace; font-size: 17px; line-height: 1.45; min-height: 84px; resize: vertical; padding: 8px 10px; border: 2px solid #1e6fd9; border-radius: 6px; color: #0b2a5b; background: #fbfdff; }
.cxbar { display: flex; align-items: center; gap: 10px; } .cxbar .small { color: #6b7280; }
.cxres { border: 1px solid #d6dae0; border-radius: 8px; padding: 8px 10px; background: #fff; min-height: 70px; transition: opacity .15s; }
.cxres.busy { opacity: .55; }
.cxwait { color: #6b7280; font-size: 13.5px; padding: 6px 2px; }
.cxv { display: flex; align-items: center; gap: 16px; padding: 7px 10px; border-radius: 6px; font-size: 15.5px; margin-bottom: 6px; }
.cxv span { font-size: 14.5px; } .cxv span b { font-size: 17px; }
.cxv.cxok { background: #e7f7ec; color: #11692c; } .cxv.cxwarn { background: #fff5d6; color: #7a5200; } .cxv.cxerr { background: #fde8e8; color: #a61b1b; }
.cxitems { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cxitems li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; padding: 3px 4px; border-radius: 4px; }
.cxitems li.lv-error { background: #fff4f4; } .cxitems li.lv-warn { background: #fffbeb; } .cxitems li.lv-tip { background: #f3f8ff; } .cxitems li.lv-info { color: #4b5563; }
.cxfix { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; } .cxfix code, .cxf code { background: #eef2f7; padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.cxfix.big { margin: 4px 0 8px; }
.cxrefs { font-size: 13px; margin-top: 4px; } .cxrefs td, .cxrefs th { padding: 3px 6px; }
.cxright { display: flex; flex-direction: column; gap: 6px; min-height: 0; border-left: 1px solid #e3e7ec; padding-left: 12px; }
.cxtabs { display: flex; gap: 4px; } .cxtabs button { flex: 1; font: inherit; font-weight: 700; padding: 6px; border: 1px solid #c7ced8; background: #f4f6f9; border-radius: 6px; cursor: pointer; }
.cxtabs button.on { background: #1e6fd9; color: #fff; border-color: #1e6fd9; }
.cxright > input { font: inherit; padding: 5px 8px; border: 1px solid #9aa4b2; border-radius: 5px; }
.cxlist { flex: 1; overflow: auto; min-height: 0; border: 1px solid #e3e7ec; border-radius: 6px; }
.cxcat { position: sticky; top: 0; background: #e9eef5; font-weight: 800; font-size: 13px; padding: 3px 8px; color: #33415c; }
.cxf, .cxt { padding: 5px 8px; border-bottom: 1px solid #f0f2f5; cursor: pointer; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.cxf:hover, .cxt:hover { background: #eaf2ff; }
.cxf b, .cxt b { font-family: Consolas, monospace; color: #0b3d91; } .cxf i { font-style: normal; font-size: 11px; background: #ffe7b3; color: #7a4d00; border-radius: 3px; padding: 0 4px; }
.cxf span, .cxt span { font-size: 12.5px; color: #4b5563; flex-basis: 100%; } .cxf code { font-size: 12px; color: #334155; }
.cmptbl td.cxcell { max-width: 360px; overflow: hidden; text-overflow: ellipsis; color: #0b3d91; }
td.twarn { color: #a16207; font-weight: 700; }
.modal.cxmodal { z-index: 70; }   /* 公式視窗蓋過 AI 小幫手浮窗 */
.cxlim input { width: 100%; min-width: 0; box-sizing: border-box; }
.cxkb { font-style: normal; font-size: 11.5px; background: #e0ecff; color: #1747a6; border-radius: 3px; padding: 0 5px; margin-right: 6px; }
.cxrw { border: 1px solid #b9dcc4; background: #f2fbf5; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.cxrwh { font-weight: 700; color: #11692c; font-size: 14px; } .cxrwv { font-size: 12.5px; color: #3f6b4d; margin-top: 3px; } .cxrwv a { margin-left: 8px; }
.cxrwt { font-size: 12.5px; margin-top: 4px; background: #fff; } .cxrwt td, .cxrwt th { padding: 2px 6px; }
/* ---- 🌲 OPC 瀏覽（依設備分組） ---- */
.obdlg { width: min(900px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.obbar { display: flex; gap: 10px; align-items: center; } .obbar #obf { flex: 1; font: inherit; padding: 5px 8px; border: 1px solid #9aa4b2; border-radius: 5px; }
.obbar label.chk { display: flex; align-items: center; gap: 4px; font-size: 13.5px; white-space: nowrap; }
.obbar2 { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; gap: 8px; } .obbar2 .btn { margin-left: 4px; }
.oblist { flex: 1; overflow: auto; border: 1px solid #d0d6de; border-radius: 6px; min-height: 280px; }
.obg { border-bottom: 1px solid #e3e7ec; } .obgh { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: #eef2f7; position: sticky; top: 0; }
.obgh small { color: #6b7280; } .obtw { cursor: pointer; width: 16px; color: #33415c; user-select: none; }
.obgb { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 10px; padding: 4px 8px 6px 32px; }
.obr { display: flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 2px 0; cursor: pointer; } .obr.dis { color: #9aa4b2; } .obr small { color: #9aa4b2; }
/* ---- 即時警報：實體 / 智慧 分頁 ---- */
.altabs { display: inline-flex; gap: 4px; margin: 0 10px; }
.altabs button { font: inherit; font-size: 14px; font-weight: 700; padding: 4px 10px; border: 1px solid #c7ced8; background: #f4f6f9; border-radius: 6px; cursor: pointer; }
.altabs button b { display: inline-block; min-width: 20px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #dfe5ee; color: #333; font-size: 12.5px; }
.altabs button.on { background: #1e6fd9; color: #fff; border-color: #1e6fd9; } .altabs button.on b { background: #fff; color: #1e6fd9; }
.alai { font-style: normal; margin-right: 4px; }
.alnote { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; color: #5b6270; background: #e6e9ee; border-radius: 4px; padding: 0 6px; }
.aicfg { max-width: 1100px; display: flex; flex-direction: column; gap: 10px; } .aicfg h3 { margin: 8px 0 0; }
.aigrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aigrid label { display: flex; flex-direction: column; gap: 3px; font-weight: 700; font-size: 14px; } .aigrid input { width: 110px; font: inherit; padding: 4px 6px; }
.aigrid small { font-weight: 400; color: #6b7280; font-size: 12.5px; }
.aitbl { font-size: 13.5px; } .aitbl td, .aitbl th { padding: 4px 8px; }
/* ---- 虛擬數字小鍵盤（觸控用，約 5×6 cm） ---- */
.numpad { position: fixed; z-index: 400; display: none; width: 212px; background: #1f2937; border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); user-select: none; touch-action: none; }
.numpad .npd { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; background: #0b1220; border-radius: 7px; padding: 4px 10px; margin-bottom: 4px; min-height: 38px; }
.numpad .npv { font: 700 24px Consolas, 'Courier New', monospace; color: #4ade80; text-align: right; flex: 1; overflow: hidden; }
.numpad .npv.fresh { color: #9ca3af; }
.numpad .npu { font-size: 11px; color: #9ca3af; white-space: nowrap; order: -1; }
.numpad .npmsg { color: #fca5a5; font-size: 12.5px; min-height: 0; text-align: center; } .numpad .npmsg:not(:empty) { margin-bottom: 4px; }
.numpad .npk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.numpad .npk button { height: 44px; border: 0; border-radius: 8px; background: #e5e7eb; color: #111; font: 700 21px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.numpad .npk button:active { background: #93c5fd; transform: scale(.96); }
.numpad .npk button:disabled { opacity: .35; }
.numpad .npk .npf { background: #cbd5e1; font-size: 18px; } .numpad .npk .npx { background: #fecaca; color: #991b1b; } .numpad .npk .npok { background: #16a34a; color: #fff; }
.numpad .npoff { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #1f2937; background: #f3f4f6; font-size: 14px; cursor: pointer; padding: 0; }
input.npon { outline: 3px solid #16a34a !important; outline-offset: 1px; }
/* ---- BACnet ---- */
.bacres { max-height: 260px; overflow: auto; } .bacres .utable { font-size: 13.5px; } .bacres td, .bacres th { padding: 3px 8px; }
.botbl { font-size: 13px; width: 100%; } .botbl td { padding: 2px 6px; } .botbl tr.dis { color: #9aa4b2; }
/* 通知發報：上方那排按鈕位置固定（不跟著下面內容寬度跳來跳去） */
.nfwrap { flex: 1 1 auto; width: 100%; min-width: 0; }
.nftop { flex-wrap: nowrap; min-width: 0; }
.nfsum, .nfsim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.nftabs, .nftop > .btn { flex: 0 0 auto; }
.nfdirty { flex: 0 0 auto; min-width: 7em; text-align: right; }
.nfdirty.hidden { display: inline-block !important; visibility: hidden; }   /* 沒有修改時也保留位置，按鈕不會移動 */
/* 設定值不合理：紅框閃一下；小鍵盤搖一下＋紅字提醒 */
input.fbad { outline: 3px solid #e0262b !important; background: #fff1f1 !important; }
.numpad .npmsg:not(:empty) { background: #7f1d1d; color: #fff; font-weight: 700; border-radius: 6px; padding: 4px 6px; line-height: 1.35; }
.numpad.npshake { animation: npshake .35s; }
@keyframes npshake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* 通知發報：沒用工程師登入＝唯讀 */
.nfro #nfbody input, .nfro #nfbody select, .nfro #nfbody textarea, .nfro #nfbody button, .nfro .nftop input { pointer-events: none; }
.nfro #nfbody .nfcard { opacity: .85; }
/* 通知發報：通道啟用＝整個框淺綠色 */
.nfcard.on { border: 2px solid #8fd3a2; border-left: 6px solid #8fd3a2; background: #f3fbf5; box-shadow: 0 0 0 1px #e3f5e8; }
.nfcard.on .nfh { color: #14532d; }

/* 💾 資料保存 */
.stcfg .sttbl td { padding: 6px 10px; } .stcfg .sttbl small { color: #6b7280; }
.stgrid { grid-template-columns: 1.6fr 1fr 1.2fr; align-items: start; }
.stgrid #st_dir { width: 100%; box-sizing: border-box; }
.stgrid label.stchk { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; padding-top: 22px; } .stgrid label.stchk input { width: auto; }
.stcfg .btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stmsg { font-weight: 700; } .stok { color: #15803d; } .stbad { color: #dc2626; }
.stlast { color: #374151; font-size: 14px; }

/* 畫面管理：🖥 大畫面 / 🔲 小跳圖 分頁 */
.smtabs button { font-size: 16px; padding: 8px 16px; font-weight: 700; }
.smpop { display: flex; gap: 14px; flex: 1; min-height: 0; margin-top: 10px; }
.smpl { width: 340px; flex: none; }
.smpl td small { display: block; font-weight: 400; color: #6b7280; font-size: 12.5px; margin-top: 2px; }
.smpl tr.smpt { cursor: pointer; } .smpl tr.smpt:hover td { background: #eef5ff; }
.smpl tr.smpt.on td { background: #dbeafe; box-shadow: inset 0 0 0 1px #93c5fd; } .smpl tr.smpt.on td:first-child { border-left: 5px solid #2563eb; }
.smpl tr.smpt.dim td { color: #9ca3af; } .smpl tr.smpt.dim b { color: #9ca3af; }
.smpl tr.smptot td { font-weight: 700; background: #f3f4f6; }
.smpr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.smprh { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.smprh input { margin-left: auto; width: 240px; padding: 5px 8px; font: inherit; font-size: 14px; }
.smptbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 34px; }
.smptbl td a { color: #1d4ed8; }
.smppg { display: flex; justify-content: center; align-items: center; gap: 12px; }
.smpl table { width: 100%; table-layout: fixed; }
.smpl td { white-space: normal; text-align: left; padding: 7px 10px; } .smpl td.n, .smpl th { text-align: center; }
.smptbl { table-layout: fixed; width: 100%; }
.smptbl td { white-space: nowrap !important; }
.smgr .smnote { font-size: 15px; }
.smptbl td, .smpl td b { font-size: 15px; } .smprh { font-size: 17px; }

/* 即時警報頁：分頁、圖例、提示字加大（現場看得清楚） */
.altabs button { font-size: 17px; padding: 6px 14px; }
.altabs button b { font-size: 15px; min-width: 24px; }
.toolbar .allegend { font-size: 16px; }
.allegend .lg { width: 20px; height: 15px; }
.toolbar .alhint { font-size: 15px; }

/* 通知發報頁上方：分頁、放棄修改、存檔並套用 字加大 */
.nftabs button { font-size: 17px; padding: 7px 14px; font-weight: 700; }
.nftop > .btn { font-size: 17px; padding: 7px 16px; }
.nftop h2 { font-size: 22px; }
.nfdirty { font-size: 16px; }
.nfnote { font-size: 15px; }

/* 雙擊警報跳到畫面：設備閃紅框 6 秒 */
.algoto { fill: rgba(255, 60, 60, .12); stroke: #ff2d2d; stroke-width: 4; animation: algoto .6s ease-in-out infinite alternate; }
@keyframes algoto { from { stroke-opacity: 1; } to { stroke-opacity: .15; } }

/* 手動 / 現場太久沒切回：R / M 方框亮黃粗框閃爍；已關閉提醒＝灰色 */
.stlong { animation: stlong 0.8s ease-in-out infinite alternate; }
@keyframes stlong { from { stroke-opacity: 1; } to { stroke-opacity: .25; } }

/* 歷史曲線：雙擊 Y 軸改上下限 */
.yaxdlg { position: fixed; z-index: 80; background: #fff; border: 2px solid #1e4fa8; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 10px 14px 12px; width: 290px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.yaxdlg .yah { font-weight: 800; display: flex; align-items: center; gap: 6px; } .yaxdlg .yah small { color: #b45309; font-weight: 700; }
.yaxdlg .yax { margin-left: auto; border: 0; background: none; font-size: 22px; cursor: pointer; line-height: 1; }
.yaxdlg label { display: flex; align-items: center; gap: 8px; font-weight: 700; } .yaxdlg input { flex: 1; min-width: 0; font: inherit; padding: 5px 8px; }
.yaxdlg .yamsg { color: #c41b1b; font-size: 14px; min-height: 1em; } .yaxdlg .yab { display: flex; gap: 8px; }
.yaxdlg .yab .btn { white-space: nowrap; flex: 1; }
.altbl td:nth-child(7) { white-space: nowrap; }

/* 下方按鈕列：每個按鈕前面加小圖示（用遮罩畫，顏色跟著文字 / 佈景主題變） */
#nav button { display: flex; align-items: center; justify-content: center; gap: 7px; }
#nav button::before { content: ''; flex: 0 0 auto; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (max-width: 1500px) { #nav button { font-size: 16px; gap: 4px; } #nav button::before { width: 17px; height: 17px; } }
@media (max-width: 1100px) { #nav button::before { display: none; } }
#nav button[data-nav="home"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 11l9-7 9 7"/%3E%3Cpath d="M5 10v10h5v-6h4v6h5V10"/%3E%3C/svg%3E'); }
#nav button[data-nav="alarms"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"/%3E%3Cpath d="M10 21h4"/%3E%3C/svg%3E'); }
#nav button[data-nav="history"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="10" cy="10" r="6"/%3E%3Cpath d="M14.5 14.5L21 21"/%3E%3Cpath d="M10 7v3l2 2"/%3E%3C/svg%3E'); }
#nav button[data-nav="oplog"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="9" cy="7" r="3.5"/%3E%3Cpath d="M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6"/%3E%3Cpath d="M16 11l5-5 1 1-5 5h-1z"/%3E%3C/svg%3E'); }
#nav button[data-nav="trend"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 3v18h18"/%3E%3Cpath d="M6 15l4-5 4 3 6-7"/%3E%3C/svg%3E'); }
#nav button[data-nav="flow"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3c3.5 4.5 6 7.5 6 11a6 6 0 0 1-12 0c0-3.5 2.5-6.5 6-11z"/%3E%3C/svg%3E'); }
#nav button[data-nav="runh"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="13" r="8"/%3E%3Cpath d="M12 9v4l3 2"/%3E%3Cpath d="M9 2h6"/%3E%3C/svg%3E'); }
#nav button[data-nav="vcfg"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 9v6h4l5 4V5L8 9z"/%3E%3Cpath d="M16.5 8.5a5 5 0 0 1 0 7"/%3E%3Cpath d="M19 6a8.5 8.5 0 0 1 0 12"/%3E%3C/svg%3E'); }
#nav button[data-nav="report"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 2h9l5 5v15H6z"/%3E%3Cpath d="M14 2v6h6"/%3E%3Cpath d="M9 13h8M9 17h8"/%3E%3C/svg%3E'); }
#nav button[data-nav="login"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14 3h6v18h-6"/%3E%3Cpath d="M4 12h11"/%3E%3Cpath d="M11 8l4 4-4 4"/%3E%3C/svg%3E'); }
#nav button[data-nav="settings"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3Cpath d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/%3E%3C/svg%3E'); }

/* 流量計頁：淺色畫面上的數字方塊改淺底（黑底方塊跟淺灰卡片不搭）；深色 / 高對比主題維持原本黑底 */
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk { background: #ffffff; border: 1px solid #cfd6df; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.hi { background: #eef5ff; border-color: #7fb0f0; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffkl { color: #5b6573; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffkv { color: #15803d; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.hi .ffkv { color: #1557c0; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffku, html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffsp { color: #6b7480; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.ffinst[data-fit]:hover { border-color: #1e6fd9; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.ffinst.al { background: #e0262b; border-color: #ff8a8a; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.ffinst.al .ffkv { color: #ffe000; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.ffinst.al .ffkl, html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.ffinst.al .ffku, html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffk.ffinst.al .ffsp { color: #ffe9e9; }
html:not([data-theme="dark"]):not([data-theme="contrast"]) .ffwarn { color: #92400e; background: #fff4d6; border-color: #f0c36a; }

/* 流量計頁氣塞設定：沒個別設定時顯示的門檻（沿用 LO / 預設）也用黑字，不要灰色 */
.fflf input::placeholder, .lfbar input::placeholder { color: #111; opacity: 1; }
.fflf input, .lfbar input { color: #111; }

#nav button[data-nav="smart"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3l1.8 4.6L18.5 9l-4.7 1.5L12 15l-1.8-4.5L5.5 9l4.7-1.4z"/%3E%3Cpath d="M19 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z"/%3E%3Cpath d="M5 16l.6 1.4 1.4.6-1.4.6L5 20l-.6-1.4L3 18l1.4-.6z"/%3E%3C/svg%3E'); }

/* ---------------- 🤖 智能分析 ---------------- */
.smpage { display: flex; flex-direction: column; gap: 8px; padding: 8px 18px; height: 100%; box-sizing: border-box; overflow: hidden; }
.smtabs2 { display: flex; gap: 6px; align-items: center; }
.smtabs2 button { font: inherit; font-size: 17px; font-weight: 700; padding: 7px 16px; border: 1px solid #b8c1ce; border-radius: 7px; background: #f4f6f9; cursor: pointer; }
.smtabs2 button.on { background: #1e4fa8; color: #fff; border-color: #1e4fa8; }
.smstat { margin-left: auto; color: #4b5563; font-size: 14px; }
.smbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.smload, .smempty { color: #6b7280; padding: 14px; text-align: center; }
.smhint { color: #4b5563; font-size: 14px; }
.smdim { color: #9ca3af; }
.smneg { color: #c41b1b; font-weight: 700; }
.smchips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.smchips button { font: inherit; font-size: 15px; font-weight: 700; padding: 5px 12px; border: 1px solid #c7ced8; border-radius: 16px; background: #fff; cursor: pointer; }
.smchips button b { margin-left: 4px; }
.smchips button.on { background: #1e4fa8; color: #fff; border-color: #1e4fa8; }
.smchips .smhint { flex-basis: 100%; }
.satbl { table-layout: fixed; }
.satbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 36px; }
.satbl tr.sarow { cursor: pointer; } .satbl tr.sarow:hover td { background: #eef5ff; }
.satbl tr.sbad td { background: #fff1f1; } .satbl tr.swarn td { background: #fffaeb; }
.smlv { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.smlv.sbad { background: #fde2e2; color: #b91c1c; } .smlv.swarn { background: #fef3c7; color: #92400e; } .smlv.sok { background: #dcfce7; color: #166534; } .smlv.sna { background: #eef0f3; color: #4b5563; }
.sanote { text-align: left !important; }
.smpg { display: flex; justify-content: center; align-items: center; gap: 14px; }
.smblank td { height: 36px; }
/* 施打總覽 */
.smov { display: flex; gap: 12px; flex: 1; min-height: 0; }
.smsys { width: 230px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.smsys button { font: inherit; font-size: 15px; text-align: left; padding: 6px 10px; border: 1px solid #c7ced8; border-radius: 6px; background: #fff; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.smsys button i { margin-left: auto; font-style: normal; color: #6b7280; display: flex; gap: 4px; align-items: center; }
.smsys button em { font-style: normal; font-weight: 700; padding: 0 6px; border-radius: 8px; font-size: 13px; }
.smsys em.sbad { background: #fde2e2; color: #b91c1c; } .smsys em.swarn { background: #fef3c7; color: #92400e; }
.smsys button.on { background: #1e4fa8; color: #fff; border-color: #1e4fa8; } .smsys button.on i { color: #dbe7ff; }
.smgrid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; align-content: start; overflow: hidden; }
.smcard { background: #fff; border: 1px solid #cfd6df; border-left: 6px solid #22c55e; border-radius: 8px; padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.smcard:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.smcard.warn { border-left-color: #f5b400; background: #fffdf3; } .smcard.bad { border-left-color: #e0262b; background: #fff5f5; } .smcard.na { border-left-color: #9ca3af; }
.smch { display: flex; align-items: center; gap: 8px; } .smch b { font-size: 16px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smcm { display: flex; gap: 4px; flex-wrap: wrap; }
.satag { font-size: 12.5px; padding: 1px 7px; border-radius: 8px; background: #eef0f3; color: #374151; }
.satag.m { background: #ffd98a; color: #6b4400; font-weight: 700; } .satag.f { background: #e0262b; color: #fff; font-weight: 700; } .satag.g { background: #dbeafe; color: #1e40af; }
.smcv { font-size: 14px; color: #374151; } .smcv b { color: #111; }
.smcn { font-size: 13px; color: #92400e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.smcard.bad .smcn { color: #b91c1c; }
/* 今日狀況 */
.smtd { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.smtdbar, .smstbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.smtdbar input, .smstbar select { font: inherit; font-size: 15px; padding: 5px 8px; }
.smsum { background: #fff; border: 1px solid #cfd6df; border-left: 6px solid #1e4fa8; border-radius: 8px; padding: 10px 14px; font-size: 18px; font-weight: 700; color: #111; }
.smtdgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; grid-template-rows: auto 1fr; gap: 10px; }
.smtdgrid section { background: #fff; border: 1px solid #cfd6df; border-radius: 8px; padding: 8px 12px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.smtdgrid section.wide { grid-column: span 2; }
.smtdgrid h3 { margin: 0; font-size: 17px; } .smtdgrid h3 small { font-weight: 400; color: #4b5563; font-size: 13.5px; margin-left: 6px; }
.smtdgrid .utable { box-shadow: none; font-size: 14px; } .smtdgrid .utable td { padding: 3px 8px; }
.smrng { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 12px; overflow: auto; }
.smrng div { display: flex; gap: 6px; align-items: baseline; font-size: 14px; border-bottom: 1px dashed #e5e7eb; padding: 2px 0; }
.smrng span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smrng i { font-style: normal; color: #6b7280; font-size: 12.5px; white-space: nowrap; }
.smrng div.over { color: #b91c1c; } .smrng div.over span::before { content: '⚠ '; }
.smiss { display: flex; flex-direction: column; gap: 4px; overflow: auto; font-size: 14px; }
.smiss div { padding: 4px 8px; border-radius: 6px; } .smiss .sbad { background: #fff1f1; } .smiss .swarn { background: #fffaeb; }
.smops { margin-top: auto; font-size: 15px; }
/* 啟停統計 */
.smstwrap { flex: 1; min-height: 0; overflow: hidden; }
.smst { table-layout: fixed; } .smst th, .smst td { text-align: center; height: 38px; padding: 2px 4px; }
.smst th.l, .smst td.l { text-align: left; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; }
.smst td small { display: block; font-size: 11px; color: #6b7280; line-height: 1; }
.smst td.z { color: #cbd5e1; } .smst td.smhot, .smhot { background: #ffedd5; color: #9a3412; font-weight: 700; }
.smst tr[data-p] { cursor: pointer; } .smst tr[data-p]:hover td { background: #eef5ff; }
/* 運轉紀錄 */
.smstbar #rnp { min-width: 330px; }
.smrun { flex: 1; min-height: 0; display: flex; gap: 14px; }
.smchart { width: 520px; height: 330px; flex: none; background: #fff; border: 1px solid #cfd6df; border-radius: 8px; }
.smchart .t { font-size: 14px; font-weight: 700; fill: #111; } .smchart .g { stroke: #e5e7eb; } .smchart .a { font-size: 12px; fill: #6b7280; text-anchor: end; }
.smchart .x { font-size: 12px; fill: #374151; text-anchor: middle; } .smchart .v { font-size: 11.5px; fill: #111; text-anchor: middle; }
.smchart rect.ok { fill: #34a853; } .smchart rect.lo { fill: #f59e0b; }
.smchart .bl { stroke: #1e4fa8; stroke-width: 2; stroke-dasharray: 6 4; } .smchart .bt { font-size: 12.5px; fill: #1e4fa8; text-anchor: end; font-weight: 700; }
.smruntb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.smruntb td { height: 32px; padding: 2px 8px; } .smrunning td { background: #f0fdf4; } .sokt { color: #15803d; }
/* 列印今日狀況：只印內容 */
@media print {
  body.smprint #top, body.smprint #nav, body.smprint .smtabs2, body.smprint .smtdbar, body.smprint #dutyfloat, body.smprint .sidenav { display: none !important; }
  body.smprint .smpage, body.smprint .smtd, body.smprint .smtdgrid section { overflow: visible !important; height: auto !important; }
  body.smprint .smtdgrid { display: block; } body.smprint .smtdgrid section { margin-bottom: 10px; break-inside: avoid; }
}
.smovr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.smgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.smst td:not(.l) { text-align: center !important; }
.smcfg .aigrid label span { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.smcfg .aigrid label.stchk { flex-direction: row; align-items: center; gap: 6px; padding-top: 18px; }
.smcfg .aigrid label.stchk input { width: auto; }

/* 🎤 語音問答 */
.askbtn { background: #26507f; border: 1px solid #4a78ad; color: #fff; font-size: 18px; width: 40px; height: 34px; border-radius: 6px; cursor: pointer; line-height: 1; }
.askbtn:hover { background: #2e5f95; }
.askbtn.on { background: #c41b1b; border-color: #ff8a8a; animation: breathe 1.2s ease-in-out infinite; }
.askpanel { position: fixed; top: 64px; right: 16px; z-index: 75; width: 480px; background: #fff; border: 2px solid #1e4fa8; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.askpanel.hidden { display: none; }
.askh { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; } .askh small { color: #6b7280; font-weight: 400; font-size: 13px; }
.askx { margin-left: auto; border: 0; background: none; font-size: 24px; cursor: pointer; line-height: 1; }
.askmic { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.askgo { font-size: 17px; padding: 8px 16px; } .askgo.on { background: #c41b1b; border-color: #c41b1b; animation: breathe 1.2s ease-in-out infinite; }
.askst { color: #374151; font-size: 14px; } .askst.bad { color: #c41b1b; font-weight: 700; }
.askq { color: #1e4fa8; font-weight: 700; min-height: 1.2em; }
.aska { background: #f3f6fb; border-left: 5px solid #1e4fa8; border-radius: 6px; padding: 8px 10px; min-height: 2.2em; line-height: 1.5; max-height: 260px; overflow: auto; }
.askin { display: flex; gap: 6px; } .askin input { flex: 1; font: inherit; padding: 6px 8px; border: 1px solid #b8c1ce; border-radius: 6px; }
.askex { display: flex; flex-wrap: wrap; gap: 5px; font-size: 13px; color: #6b7280; align-items: center; }
.askchip { font: inherit; font-size: 13px; padding: 2px 9px; border: 1px solid #c7ced8; border-radius: 12px; background: #f8fafc; cursor: pointer; }
.askchip:hover { background: #e8f0fe; }
/* 今日狀況：pH / 液位範圍改成三張小表 */
.smrng { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; overflow: hidden; }
.smrng .smrt { table-layout: fixed; font-size: 13.5px; }
.smrng .smrt th { padding: 3px 4px; font-size: 13px; }
.smrng .smrt td { padding: 2px 6px; text-align: right; height: 22px; white-space: nowrap; }
.smrng .smrt td.c { text-align: left; font-weight: 700; }
.smrng .smrt td.sp { color: #6b7280; font-size: 12.5px; text-align: center; }
.smrng .smrt tr.ov td.c { color: #b91c1c; }
.smrng .smrt td.bad { color: #fff; background: #dc2626; font-weight: 700; }

/* 管線流動：固定箭頭依序亮（跑馬燈） */
.pchase { animation-name: pchase; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes pchase { 0%, 100% { opacity: .18; } 20% { opacity: 1; } }

/* 系統設定 → 🌊 管線流動 */
.pfcfg { max-width: none; }
.pfrow { margin: 6px 0 8px; }
.pfctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 15px; }
.pfctl input[type=range] { width: 260px; vertical-align: middle; }
.pfquick { display: inline-flex; gap: 6px; }
.pftrial { color: #b25c00; }
.pfmain { display: flex; gap: 14px; align-items: flex-start; }
.pfgrid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 8px; }
.pfcard { border: 2px solid #c9d0d8; border-radius: 6px; background: #f4f6f8; padding: 4px 6px 2px; cursor: pointer; }
.pfcard:hover { border-color: #7fa7d6; }
.pfcard.on { border-color: #1f6fd1; background: #e7f0fc; box-shadow: 0 0 0 2px #1f6fd155; }
.pfname { font-size: 14px; color: #222; }
.pfname small { color: #1f6fd1; }
.pfsv { width: 100%; height: 46px; display: block; }
.pfbig { width: 540px; flex: none; border: 1px solid #c9d0d8; border-radius: 6px; background: #f4f6f8; padding: 6px; }
.pfbigsv { width: 100%; height: auto; display: block; }
.pfbtns { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.pfmsg { color: #444; font-size: 14px; }

/* 狀態表（馬達 / 液位 / 其他）：不捲動 → 選類別＋分頁（上一頁 / 下一頁、第幾頁 / 共幾頁） */
#main > .page.utpaged { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 10px; }
.utpaged .uthead { flex: none; }
.utpnav { flex: none; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 8px; }
.utpsecs, .utpcats { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.utpcats > b { font-size: 15px; color: #2f3a4d; margin-right: 2px; }
.utpsec, .utpcat { border: 1px solid #b9c2cd; background: #fff; color: #15181d; border-radius: 16px; padding: 4px 12px; font-size: 15px; cursor: pointer; }
.utpsec { border-radius: 6px; font-size: 16px; font-weight: 700; padding: 6px 16px; }
.utpsec small, .utpcat small { color: #6b7280; font-size: 12px; margin-left: 2px; }
.utpsec.on, .utpcat.on { background: #1f6fd1; border-color: #1f6fd1; color: #fff; }
.utpsec.on small, .utpcat.on small { color: #dbe8ff; }
.utpbody { flex: 1; min-height: 0; overflow: hidden; }
.utpbody .utable { margin: 0; }
.utpbar { flex: none; display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 8px; font-size: 16px; }
.utpbar .btn { font-size: 16px; padding: 7px 18px; }
.utpbar .utpno b { font-size: 19px; color: #1f6fd1; }
.utpcnt { color: #5b6270; font-size: 14px; }
/* 系統架構圖 → 點位查詢表：不捲動，分頁 */
.astbl { overflow: hidden !important; }
.aspager { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 14px; }
.aspager .btn { padding: 4px 10px; font-size: 14px; }
.aspager b { color: #1f6fd1; font-size: 16px; }
/* AI 小幫手：讓位頁面也可以拖（拖過就記住位置） */
.dutyfloat.dfaway.dfmoved { left: var(--awx) !important; top: var(--awy) !important; right: auto !important; bottom: auto !important; }
.dutyfloat .dfhd { touch-action: none; }
#nav button[hidden] { display: none; }
.utpbar { min-height: 46px; }

/* ⌨ 中英文虛擬鍵盤 */
.kbd { position: fixed; left: 50%; transform: translateX(-50%); z-index: 9000; width: min(720px, 96vw); background: #1d232c; border: 1px solid #3a4452; border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.45); padding: 8px 8px 10px; user-select: none; touch-action: manipulation; }
.kbd.hidden { display: none; }
.kbtop { display: flex; align-items: center; gap: 6px; height: 48px; margin-bottom: 6px; background: #f4f6f8; border-radius: 8px; padding: 0 6px; }
.kbcomp { min-width: 64px; font-size: 22px; font-weight: 700; color: #1f6fd1; letter-spacing: 1px; white-space: nowrap; }
.kbcands { flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; white-space: nowrap; align-items: center; height: 44px; }
.kbc { flex: none; font-size: 24px; min-width: 44px; height: 40px; padding: 0 8px; border: 1px solid #c9d0d8; background: #fff; border-radius: 6px; cursor: pointer; font-family: inherit; color: #15181d; }
.kbc.kbw { font-size: 19px; color: #0d4fa8; }
.kbc.kbas { background: #eef6ff; }
.kbc:hover { background: #e3eeff; }
.kbhint { color: #6b7280; font-size: 14px; }
.kbpg { width: 40px !important; height: 40px; font-size: 16px !important; flex: none; }
.kbauto { flex: none; font-size: 12px; color: #4b5563; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.kbrows { display: flex; flex-direction: column; gap: 6px; }
.kbrow { display: flex; gap: 6px; justify-content: center; }
.kbk { flex: 1 1 0; max-width: 84px; height: 52px; font-size: 22px; font-family: inherit; color: #fff; background: #3b4554; border: 1px solid #505d6f; border-radius: 7px; cursor: pointer; padding: 0; }
.kbk:hover { background: #475366; }
.kbk.kbdown, .kbc.kbdown { background: #1f6fd1 !important; color: #fff !important; }
.kbk.kbtone { background: #5a4a2e; border-color: #7c6640; color: #ffd98a; }
.kbk.kbf { background: #2a313c; font-size: 17px; }
.kbk.kbBS, .kbk.kbSHIFT { max-width: 110px; }
.kbk.kbSHIFT.on { background: #1f6fd1; }
.kbk.kbsp { flex: 4 1 0; max-width: 380px; font-size: 17px; }
.kbk.kblang { max-width: 110px; } .kbk.kblang b { color: #ffd400; font-size: 20px; }
.kbk.kbent { background: #1f6fd1; border-color: #4b8fe6; max-width: 120px; }
.kbk.kbx { max-width: 110px; }
.kbk:disabled, .kbpg:disabled { opacity: .35; cursor: default; }
input.kbon, textarea.kbon { outline: 3px solid #ffb400 !important; outline-offset: 1px; }
.kbmini { position: fixed; z-index: 8999; display: none; width: 28px; height: 26px; padding: 0; font-size: 16px; line-height: 24px; border: 1px solid #9aa6b5; border-radius: 5px; background: #fff; color: #1f6fd1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.kbtop .kbpg { flex: none; width: 44px !important; max-width: 44px; background: #3b4554; }
.aspager { white-space: nowrap; flex-wrap: nowrap; }
.aspager .btn { white-space: nowrap; padding: 4px 8px; }
.kbd.kbsm .kbk { height: 40px; font-size: 18px; }
.kbd.kbsm .kbtop { height: 40px; } .kbd.kbsm .kbc { height: 34px; font-size: 20px; }
.kbd.kbsm .kbrows, .kbd.kbsm .kbrow { gap: 4px; }

/* 系統設定 → 🖥 顯示設定 */
.dcards { display: flex; gap: 14px; margin: 10px 0; flex-wrap: wrap; }
.dcard { flex: 1 1 520px; display: flex; gap: 10px; align-items: flex-start; border: 2px solid #c9d0d8; border-radius: 8px; background: #f4f6f8; padding: 10px 12px; cursor: pointer; }
.dcard.on { border-color: #1f6fd1; background: #e7f0fc; box-shadow: 0 0 0 2px #1f6fd155; }
.dcard input { margin-top: 4px; transform: scale(1.3); }
.dcard b { font-size: 17px; }
.ddesc { font-size: 14px; color: #33404f; margin: 4px 0 6px; line-height: 1.5; }
.dtbl { border-collapse: collapse; font-size: 13px; }
.dtbl td, .dtbl th { padding: 2px 6px; text-align: center; color: #33404f; font-weight: 600; }
.dsv { width: 150px; height: 56px; display: block; }
.dlv { display: block; font-size: 15px; margin: 6px 0 10px; }
/* 設備面板：手動 / 現場太久監視開關 */
#popup .aisw { min-width: 64px; font-weight: 700; }
#popup .aisw.on { background: #1fb14a; border-color: #1fb14a; color: #fff; }
#popup .aisw.aioff { background: #8a929e; border-color: #8a929e; color: #fff; }
/* 系統設定 → 🧷 參數備份 / 恢復 */
.prcfg { display: flex; flex-direction: column; height: 100%; max-width: none; }
.prtop { display: flex; align-items: baseline; gap: 16px; } .prtop h2 { margin: 0 0 4px; }
.prstat { font-size: 15px; color: #178a3a; font-weight: 700; } .prstat.bad { color: #c41b1b; }
.prbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; font-size: 15px; }
.prbar select { max-width: 420px; }
.prpages { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; } .prpages > b { margin-right: 4px; }
.prpages small i { font-style: normal; color: #fff; background: #e0262b; border-radius: 8px; padding: 0 5px; }
.prbody { flex: 1; min-height: 0; overflow: hidden; }
.prtbl td { padding: 4px 8px; } .prtbl tr.prdiff td { background: #fff1f1; }
.prtbl .prbad { color: #c41b1b; }
.prtbl tr.prdiff td { background: #fbf3dc; }
.prtbl .prst { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.prtbl .prst i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.25); }
.prtbl .prst.same { color: #178a3a; } .prtbl .prst.same i { background: #22a447; }
.prtbl .prst.diff { color: #9a6b00; } .prtbl .prst.diff i { background: #c9a227; }
.prtbl .prst.none { color: #8a929c; font-weight: 400; } .prtbl .prst.none i { background: #fff; border-color: #b7bdc7; }
.prtbl .prv { width: 90px; text-align: right; font-size: 15px; padding: 2px 6px; border: 1px solid #b7bdc7; border-radius: 4px; }
.prtbl .prv.ed { background: #fff6cf; border-color: #e6a700; }
.prfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; }
.prfoot .utpbar { margin-left: auto; padding-top: 0; min-height: 0; }
/* 設備面板 MODE：AUTO / MAN / START / STOP 四顆一樣寬、上下對齊（2 欄格線） */
.popup.fp .fpcol .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 200px; }
.popup.fp .fpcol .btns .btn { width: 100%; margin: 0; padding: 9px 0; text-align: center; }
.popup { z-index: 58; }   /* 設備面板蓋在 AI 小幫手（55）上面 */
.modal { z-index: 70; } .toast { z-index: 75; }   /* 對話框、提示訊息在最上面 */
/* 設備面板 MODE 欄（2026-09-28）：AUTO/MAN/START/STOP 兩欄一樣寬；Massage lock 方框對齊 STOP 右邊；Error 的 RESET 跟 STOP 同一欄、一樣寬 */
.popup.fp .fpmode { display: grid; grid-template-columns: 96px 96px; gap: 8px; margin-top: 10px; align-items: center; }
.popup.fp .fpmode .btn { width: 100%; margin: 0; padding: 9px 0; text-align: center; }
.popup.fp .fpmode .fpm2 { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: center; font-size: 18px; padding: 4px 0; }
.popup.fp .fpmode .fpm2 .fcb { margin: 0; }
.popup.fp .fpmode .fpmlab { font-size: 18px; color: #333; }
/* Status 欄縮小 1 cm，整個面板也窄 1 cm */
.popup.fp { width: 742px; } .popup.fp4 { width: 922px; }
.popup.fp .fpcol.fpstat { flex: 0 0 auto; width: 199px; }   /* 原本約 237px，縮 1 cm（38px） */
.popup.fp .fpstat .fbox { width: 150px; }
.popup.fp4 .fpcol.fpstat { width: 185px; }   /* 有 Delay Stop 的四欄面板：Status 也縮 1 cm（原本約 223px） */
.popup.fp4 .fpstat .fbox { width: 140px; }
.popup.fp .fprow > .btn.aisw { margin-right: 0; }
.popup.fp4 .fprow > .fcb, .popup.fp4 .fprow > .btn { margin-right: 0; }   /* 四欄面板比較窄：勾選框不換行 */
/* ⏳ 閒置自動登出倒數 */
.idlewarn { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9500; background: #b25c00; color: #fff; font-size: 20px; padding: 10px 22px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.idlewarn b { font-size: 26px; color: #ffe27a; } .idlewarn span { font-size: 16px; opacity: .9; }
/* 設備面板上方：LOCAL 過久 / 手動過久 監視開關（滑動開關，綠＝監視中） */
.fptop .fpswl { margin-left: 34px; }
.fptop .fpsw + .fpswl { margin-left: 26px; }
.fpsw { position: relative; width: 52px; height: 28px; margin-left: 8px; padding: 0; border: none; border-radius: 14px; background: #9aa3af; cursor: pointer; vertical-align: middle; transition: background .15s; }
.fpsw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .15s; }
.fpsw.on { background: #1fb14a; } .fpsw.on i { left: 27px; }
/* Monitor 欄：Monitoring active、Running day 往上 0.3 cm */
.popup.fp .fpmon .fprow { padding: 4px 0; }
.popup.fp .fpmon .fprow:nth-of-type(2) { margin-top: -6px; }
/* 即時警報：不捲動，分頁 */
#main > .page.alpage { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 8px; }
.alpage .alwrap { flex: 1; min-height: 0; overflow: hidden; }
.alpage .utpbar, .flowpg .utpbar, .shiftpg .utpbar { flex: none; }
/* 流量計頁：不捲動，一張一張卡片分頁 */
#main > .page.utilpage.flowpg { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 8px; }
.flowpg .lfbar { flex: none; }
.flowpg .flowbody { flex: 1; min-height: 0; overflow: hidden; }
.algoto { stroke-width: 1.5 !important; }   /* 雙擊警報跳過來的紅框：線條細一點 */
/* 值班交班紀錄：不捲動，三張表各自分頁 */
#main > .page.utilpage.shiftpg { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 8px; }
.shiftpg #shbody { flex: 1; min-height: 0; }
.shiftpg .shgrid { height: 100%; align-items: stretch; }
.shiftpg .shgrid .rpcard { display: flex; flex-direction: column; min-height: 0; }
.shiftpg .shtw { flex: 1; min-height: 0; overflow: hidden; }
.shiftpg .shpg { font-size: 14px; gap: 4px; flex-wrap: wrap; } .shiftpg .shpg .btn { padding: 4px 8px; font-size: 13px; }
/* 點位資料庫：上下不捲動，改分頁（表格太寬時左右還可以拉） */
.tdbscroll { overflow-y: hidden !important; overflow-x: auto; }
#tdbpager { flex: none; }
.shiftpg .shpg, .shiftpg .shpg .utpcnt { color: #cfd6e0; } .shiftpg .shpg b { color: #7fb8ff; }
/* 滑動開關：不管按鈕被其他樣式撐多寬，圓點一律貼齊左 / 右邊（開＝右邊） */
.fpsw { width: 52px !important; min-width: 0 !important; height: 28px !important; padding: 0 !important; box-sizing: border-box; flex: none; line-height: 0; font-size: 0; }
.fpsw i { left: 3px; right: auto; }
.fpsw.on i { left: auto; right: 3px; }
#main svg, .utable tbody tr { touch-action: manipulation; }   /* 觸控連點兩下不要被當成放大 */
.utable.rhtbl td { padding: 6px 10px; }   /* 運轉時數資料列：高度跟液位 / 馬達狀態表一樣 */

.fsqsim.simok { cursor: pointer; outline: 2px dashed #e8870c; outline-offset: 2px; }   /* 模擬模式：Fault / Trip 可以點（打假訊號） */
.fsqsim.simok:hover { outline-color: #c0392b; }

/* 警報擱置 */
.altbl td.alackc { white-space: nowrap; }
.altbl .alshv { padding: 2px 6px; margin-left: 4px; font-size: 13px; }
.altbl tr.al-shelved td { background: #eef0f4; color: #4a5160; }
.shvcard { width: 560px; max-width: calc(100vw - 32px); }
.shvdev { font-weight: 700; margin: 6px 0 12px; } .shvdev span { font-weight: 400; color: #555; }
.shvlab { font-size: 14px; color: #555; margin: 10px 0 6px; }
.shvmins { display: flex; flex-wrap: wrap; gap: 8px; }
.shvmins .btn.on { background: #1a4fc4; color: #fff; border-color: #1a4fc4; }
.shvrsn { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 15px; }
.shvnote { font-size: 13px; color: #6a7080; margin: 12px 0; line-height: 1.5; }

/* 🔁 備援 */
.habadge { margin-left: 6px; padding: 2px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; background: #1f8a3c; color: #fff; }
.habadge.standby { background: #d98a00; } .habadge.starting { background: #6b7280; } .habadge.bad { background: #c0392b; }
.hacfg h3 { margin: 16px 0 8px; font-size: 16px; }
.hawarn { background: #fff3cd; border: 1px solid #e0b100; border-radius: 8px; padding: 8px 12px; margin: 8px 0; line-height: 1.6; }
.hagrid { display: flex; align-items: stretch; gap: 14px; margin: 10px 0; }
.hacard { flex: 1; max-width: 360px; border: 2px solid #c9ced8; border-radius: 10px; padding: 10px 14px; background: #f7f8fa; }
.hacard.active { border-color: #1f8a3c; background: #eefaf1; } .hacard.standby { border-color: #d98a00; background: #fff8ea; } .hacard.off { border-color: #c0392b; background: #fdf0ee; } .hacard.na { border-color: #c9ced8; background: #f7f8fa; }
.hacard .hat { font-size: 13px; color: #666; } .hacard .han { font-size: 20px; font-weight: 800; } .hacard .har2 { font-size: 17px; font-weight: 700; margin: 2px 0 6px; }
.hacard .hasm { font-size: 13px; color: #444; line-height: 1.6; }
.haarrow { align-self: center; font-size: 28px; color: #888; }
.hag { color: #1f8a3c; } .har { color: #c0392b; }
.habtns { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.hatbl { border-collapse: collapse; width: 100%; max-width: 980px; } .hatbl th, .hatbl td { border: 1px solid #d6dae2; padding: 6px 10px; text-align: left; font-size: 14px; } .hatbl th { background: #f1f3f7; width: 330px; }
.haform { display: flex; flex-direction: column; gap: 8px; max-width: 760px; } .haform textarea, .haform input:not([type=checkbox]):not([type=number]) { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 15px; }
.halog { font-size: 13px; color: #444; line-height: 1.7; max-height: 160px; overflow: auto; background: #f7f8fa; border-radius: 8px; padding: 6px 10px; }

.hacols { display: flex; gap: 24px; align-items: flex-start; max-width: 1500px; }
.hacol { flex: 1; min-width: 0; }
.hacfg .hatbl th { width: 250px; }
.hacfg .haform textarea { height: 52px; }

/* 閥面板：Error / RESET 放到 Msg lock 同一排的右邊（面板矮一排） */
.popup.fp .fpmode.fpmode3 { grid-template-columns: 96px 96px auto; }
.popup.fp .fpmode .fpverr { display: flex; align-items: center; gap: 56px; padding-left: 36px; }
.popup.fp .fpmode .fpverr .btn { width: 96px; }

/* 📊 備援同步狀態 */
.hasync h2 .hasum { font-size: 15px; margin-left: 12px; padding: 2px 12px; border-radius: 12px; background: #e3f5e8; color: #1f8a3c; vertical-align: middle; }
.hasync h2 .hasum.bad { background: #fdecea; color: #c0392b; }
.hasync h3 { margin: 6px 0 6px; }
.hatbl.hs th { width: auto; white-space: nowrap; } .hatbl.hs td { font-size: 14px; vertical-align: middle; }
.hatbl.hs td.hh { background: #e6eaf1; font-weight: 700; }
.hatbl.hs small { color: #666; } .hadiff { display: block; color: #8a5a00 !important; font-size: 12px; }

.aicfg.hasync { max-width: 1500px; }
.hasync .hacols { max-width: 1500px; }
.hatbl.hs td { white-space: nowrap; } .hatbl.hs td .hadiff { white-space: normal; max-width: 260px; }

/* 首頁：與 CPU 通訊失敗（慢慢閃，提醒還在嘗試連接） */
#commlost { animation: clblink 2.4s ease-in-out infinite; }
@keyframes clblink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.uvnum::placeholder { color: #333; opacity: 1; }   /* 設定值讀不到時顯示 ####（跟其他頁一樣） */

/* 系統架構圖：與 CPU 通訊失敗 */
.archcpu .acloss { margin-top: 8px; background: #e0262b; color: #fff; font-weight: 800; font-size: 14px; padding: 5px 10px; border-radius: 6px; animation: clblink 2.4s ease-in-out infinite; }
.archcpu .acloss[hidden] { display: none; }

/* 使用者管理：左右兩欄，不捲動 */
.utuser { max-width: 1440px; margin: 0 0 0 70px !important; }   /* 靠左，右上角留給 AI 小幫手 */
.utuser .utcols { display: flex; gap: 32px; align-items: flex-start; }
.utuser .utcolL { flex: 0 0 auto; }
.utuser .utcolR { flex: 1; min-width: 0; }
.utuser .utcolR .uadd { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.utuser .utcolR .uadd input, .utuser .utcolR .uadd select { width: 100%; box-sizing: border-box; }
.utuser .utcolR .uadd .btn { grid-column: 1 / 3; justify-self: start; }
.utuser .utcolR .utable { width: 100%; table-layout: auto; } .utuser .utcolR .utable td { white-space: normal; }
.utuser .utcolR .utable td:nth-child(-n+2), .utuser .utcolR .utable th { white-space: nowrap; }

/* 系統架構圖：視窗窄的時候，點位查詢表排到下面 */
.archwrap.stack:has(.archside) { grid-template-columns: minmax(0, 1fr); max-width: 1400px; }
.archwrap.stack .archside { height: 330px; min-height: 0; }
.archwrap.stack .archside .asin { display: grid; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 14px; }
.archwrap.stack .archside .asin > h4 { grid-column: 1; grid-row: 1; }
.archwrap.stack .archside .asin > .asbox { grid-column: 1; grid-row: 2; }
.archwrap.stack .archside .asin > .aschips { grid-column: 1; grid-row: 3; }
.archwrap.stack .archside .asin > .ashint { grid-column: 1; grid-row: 4 / 6; align-self: end; }
.archwrap.stack .archside .asin > .astbl { grid-column: 2; grid-row: 1 / 5; }
.archwrap.stack .archside .asin > .aspager { grid-column: 2; grid-row: 5; }

/* 系統架構圖：字體放大（約 +15%），模組跟著加寬 */
.archcpu .acname { font-size: 22px; } .archcpu .acsub { font-size: 15px; }
.aled { font-size: 15px; } .aled i { width: 15px; height: 15px; }
.archlegend { font-size: 15px; }
.archbus span { font-size: 14px; }
.asthd { font-size: 18px; } .astsub { font-size: 15px; } .aststat { font-size: 17px; } .astsum { font-size: 14px; }
.aim { flex-basis: 84px; font-size: 14px; } .asrv { flex-basis: 38px; font-size: 13px; }
.amod { flex-basis: 68px; min-height: 184px; }
.amod .amslot { font-size: 21px; } .amod .amtype { font-size: 14px; } .amod .amaddr { font-size: 12.5px; }
.amod .amid { font-size: 13px; } .amod .amst { font-size: 14px; min-height: 17px; }
.amod.na .amst::after { font-size: 12.5px; }
.amleds { grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(8, 10px); gap: 2px 6px; }
.amleds i { width: 10px; height: 10px; }
.amleds.ai { grid-template-columns: repeat(8, 6px); grid-template-rows: 48px; }
.amleds.ai i { width: 6px; height: 48px; }
.archnote { font-size: 14px; }
.archcpu .acloss { font-size: 15px; }
.archside h4 { font-size: 18px; }
.astbl table { font-size: 14px; } .astbl th { font-size: 13px; } .astbl small { font-size: 12.5px; }
.ashint { font-size: 13px; }

/* 🖥 主機健康（智能分析頁） */
.hhwrap { display: flex; flex-direction: column; gap: 10px; }
.hhtop { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 15px; background: #fff; border: 1px solid #d5dbe3; border-radius: 8px; padding: 8px 12px; }
.hhissues { margin: 0; padding: 8px 12px 8px 28px; background: #fff; border: 1px solid #e3b4b4; border-radius: 8px; font-size: 15px; }
.hhissues li.sbad { color: #b42318; font-weight: 700; }
.hhissues li.swarn { color: #8a5a00; }
.hhok { background: #effaf2; border: 1px solid #b7e0c3; border-radius: 8px; padding: 8px 12px; color: #1f6f3a; font-weight: 700; }
.hhgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: start; }
.hhgrid section { background: #fff; border: 1px solid #d5dbe3; border-radius: 8px; padding: 8px 12px; }
.hhgrid h3 { margin: 4px 0 6px; font-size: 16px; }
.hhgrid h3 small { color: #6b7280; font-weight: 400; font-size: 13px; }
.hhbar { height: 14px; background: #e5e9ef; border-radius: 7px; overflow: hidden; min-width: 120px; }
.hhbar i { display: block; height: 100%; background: #3b82f6; }
.hhbar i.warn { background: #e0a100; }
.hhbar i.bad { background: #d92d20; }
tr.hhbad td { background: #fdecea; }
.hhcfg { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.hhcfg input[type=number] { width: 64px; padding: 3px 6px; font: inherit; }
.hhcfg .smhint { flex-basis: 100%; }
/* 📊 報表頁：自動存 Excel 到共用資料夾 */
.rpxbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; margin: -4px 0 10px; padding: 6px 10px; background: #f4f6f9; border: 1px solid #d5dbe3; border-radius: 8px; }
.rpxbar input[type=text] { width: 230px; padding: 3px 6px; font: inherit; }
.rpxbar input.rpxt { width: 70px; }
.rpxbar .stok { color: #1f6f3a; } .rpxbar .stbad { color: #b42318; }
#rpx_msg { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 👀 高打低停監視設定（語音設定頁左下 → 設定…） */
.vcleft .lvblk .vcfgrow { padding: 4px 4px; }
.lvmask { position: fixed; inset: 0; background: rgba(15, 20, 30, .45); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.lvbox { background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.35); width: min(1400px, 98vw); max-height: 92vh; display: flex; flex-direction: column; color: #1c2430; }
.lvhd { background: #1f3b63; color: #fff; font-size: 20px; font-weight: 700; padding: 10px 16px; border-radius: 10px 10px 0 0; display: flex; justify-content: space-between; }
.lvx { cursor: pointer; padding: 0 6px; }
.lvtop { display: flex; align-items: center; gap: 16px; padding: 10px 16px 6px; font-size: 15px; }
.lvmain { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; white-space: nowrap; }
.lvnote { color: #556070; line-height: 1.5; }
.lvtbl { margin: 4px 12px; width: calc(100% - 24px); font-size: 15px; table-layout: auto; }
.lvtbl td, .lvtbl th { padding: 4px 6px; text-align: center; white-space: nowrap; }
.lvtbl td.lvnm { text-align: left; white-space: nowrap; }
.lvtbl td.lvps { text-align: left; }
.lvnum { font-variant-numeric: tabular-nums; }
.lvp { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 1px 6px; border: 1px solid #c9d2de; border-radius: 6px; background: #f5f7fa; white-space: nowrap; cursor: pointer; }
.lvp.run { border-color: #1fb14a; background: #e9f8ee; }
.lvp i { font-style: normal; font-size: 12px; color: #fff; background: #e8a20c; border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.lvst { display: inline-block; min-width: 52px; padding: 1px 8px; border-radius: 10px; font-size: 14px; background: #eef1f5; color: #667085; }
.lvst.ok { background: #e3f6e9; color: #127a36; }
.lvst.bad { background: #fde4e4; color: #c21d22; font-weight: 700; }
.lvst.off { background: #eceff3; color: #98a2b3; }
.lvbtns { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 16px 14px; }
.lvro { color: #a15c00; margin-right: auto; }
.lvfl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; }
.lvna { color: #98a2b3; font-size: 13px; }
.ulvsel { font-size: 15px; padding: 2px 4px; border: 1px solid #b8c2d0; border-radius: 6px; background: #fff; max-width: 118px; }
.lvst.man { background: #fff3d6; color: #9a6400; }
.lvrole { display: inline-block; font-size: 12px; color: #fff; background: #7b8794; border-radius: 4px; padding: 0 4px; margin-right: 3px; }
.lvrole.pri { background: #1a4fc4; }
.fplvrow { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #c9d2de; }
.fplvrow .fplvl { white-space: nowrap; font-size: 15px; color: #45516a; font-weight: 700; }
.fplvrole { display: inline-block; font-style: normal; font-size: 13px; line-height: 18px; color: #fff; background: #7b8794; border-radius: 4px; padding: 0 4px; margin-right: 4px; vertical-align: 2px; }
.fplvrole.pri { background: #1a4fc4; }
.fplvrole[hidden] { display: none; }

/* 🔧 感測器確認故障・待修 */
.fprep { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 5px 10px; border-radius: 6px; background: #f4f6f9; border: 1px dashed #c9d2de; font-size: 14px; color: #556070; }
.fprep.on { background: #fff3d6; border: 1px solid #e8a20c; color: #7a4d00; }
.fprep .btn { flex: none; padding: 3px 12px; font-size: 14px; }
.fprep .btn.warn { background: #e8870c; border-color: #e8870c; color: #fff; }
.fprephint { font-size: 13px; }
.fpdn { color: #9a5b00; font-size: 14px; }
.dutyitem.drep { background: #1c222b; color: #aab4c3; border-left-color: #8a929e; font-size: 13px; }

/* 📐 流量計頁：門檻算式（氣塞 / 管塞 / 運轉超時） */
.fxbox { margin: 2px 0 6px; padding: 3px 10px; background: #f4f7fb; border: 1px solid #d5dde8; border-radius: 8px; font-size: 14px; color: #2a3444; }
.fxrow { display: flex; gap: 8px; line-height: 1.6; align-items: baseline; }
.fxk { flex: none; width: 92px; font-weight: 700; color: #45516a; }
.fxr { color: #c21d22; font-size: 15px; }
.fxna { color: #98a2b3; }
.fxsrc { margin-left: auto; font-size: 12px; color: #667085; white-space: nowrap; }

/* 流量計：三列設定（氣塞 / 管塞 / 運轉超時）靠左對齊；高度壓緊，不讓卡片變高 */
.flowfm .ffhd { margin-bottom: 4px; }
.ffset { display: grid; grid-template-columns: max-content 1fr; column-gap: 12px; row-gap: 2px; align-items: center; margin: 0 0 4px; padding: 3px 10px; border: 1px solid #d5dde8; border-radius: 8px; font-size: 13px; color: #15181d; }
.ffset .ffsk { width: 92px; font-weight: 700; font-size: 14px; color: #45516a; }
.ffset .ffsv { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-height: 24px; }
.ffset input { width: 58px; height: 22px; box-sizing: border-box; padding: 0 6px; font-size: 14px; border: 1px solid #9aa3af; border-radius: 4px; font-family: inherit; color: #111; }
.ffset input::placeholder { color: #111; opacity: 1; }
.ffset select { height: 22px; box-sizing: border-box; padding: 0 2px; font-size: 13px; border: 1px solid #9aa3af; border-radius: 4px; font-family: inherit; color: #111; background: #fff; }
.ffset small { color: #4b5563; }
.ffset .lfoff { color: #8a929c; }
.ffset .btn { margin-left: auto; padding: 1px 16px; font-size: 13px; }
.flowfm .fxbox { margin: 0 0 4px; }
.flowfm .fxrow { line-height: 1.45; }

/* 分頁列：跳頁下拉選單 */
.utpbar .utpjump { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 15px; }
.utpbar .utpjump select { font-size: 15px; padding: 5px 6px; border: 1px solid #9aa3af; border-radius: 6px; font-family: inherit; color: #111; background: #fff; max-width: 260px; }

/* 平板（iPad 等觸控）：Safari 網址列會蓋住 100vh 的下緣 → 改用實際看得到的高度；首頁按鈕縮小排三排，整頁不被切掉 */
#app { height: 100dvh; }
@media (pointer: coarse) and (max-width: 1400px) {
  #sysgrid { grid-template-columns: repeat(var(--cols3, 7), minmax(0, 1fr)); gap: 8px; }
  #sysgrid .sysbtn { height: 64px; padding: 0 2px; white-space: nowrap; font-size: min(20px, 1.7vw); gap: 2px; }
  #sysgrid .sysbtn small { font-size: 12px; }
}
@media (pointer: coarse) and (max-width: 899px) {
  #sysgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #sysgrid .sysbtn { font-size: min(18px, 2.6vw); }
}

/* 歷史曲線：觸控時圖上不要被瀏覽器拿去捲動 / 放大整頁（改成自己處理：一指框選、兩指縮放時間） */
#tc { touch-action: none; }

/* 歷史曲線：手指拖動時圖整個跟著移，超出框外的部分不要蓋到右邊的讀值欄 */
.tcanvaswrap { overflow: hidden; border-radius: 8px; }

/* 歷史紀錄：文字搜尋框＋關鍵字提示 */
.hsearch { position: relative; display: inline-flex; align-items: center; }
.hsearch input { width: 230px; padding: 6px 26px 6px 10px; font-size: 15px; border: 1px solid #9aa3af; border-radius: 6px; font-family: inherit; color: #111; background: #fff; }
.hsearch input::-webkit-search-cancel-button { display: none; }
.hsearch .hqx { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; color: #6b7280; cursor: pointer; padding: 0 4px; }
.hsug { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; min-width: 320px; max-width: 460px; background: #fff; border: 1px solid #c7ced8; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 4px 0; }
.hsgi { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; cursor: pointer; font-size: 15px; color: #111; }
.hsgi:hover { background: #e8f0fe; }
.hsgi small { color: #6b7280; white-space: nowrap; }
.hsgno { padding: 7px 12px; color: #6b7280; font-size: 14px; }
.hsug mark, table.hist mark { background: #ffe066; color: inherit; padding: 0 1px; border-radius: 2px; }
.toolbar.compact.htoolbar { max-width: 1120px; }   /* 歷史紀錄：多了搜尋框，工具列放寬跟表格一樣寬 */
#hstat { white-space: nowrap; }

/* AI 小幫手縮成小頭：只剩圓形頭像（右下角狀態燈照常），點一下展開；按住可以拖 */
.dutyfloat.mini { width: auto !important; height: auto; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.dutyfloat.mini .dfhd { background: transparent; padding: 0; cursor: pointer; }
.dutyfloat.mini .dftitle, .dutyfloat.mini .dfactions { display: none; }
.dutyfloat.mini .dfavwrap, .dutyfloat.mini .dfavatar { width: 50px; height: 50px; }
.dutyfloat.mini .dfavatar { border: 1px solid #3a4655; box-shadow: 0 4px 14px rgba(0,0,0,.45); }   /* 中性外框（不用鮮豔藍），警報時才由下面變色 */
.dutyfloat.mini.dfwarn .dfavatar { border-color: #e8a20c; }
.dutyfloat.mini.dfalert .dfavatar { border-color: #e0262b; animation: dfring 1.4s ease-in-out infinite; }
@keyframes dfring { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,38,43,.7), 0 4px 14px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 0 9px rgba(224,38,43,0), 0 4px 14px rgba(0,0,0,.45); } }
.dutyfloat.mini.dfaway { width: auto !important; }
.dutyfloat.mini.dfaway .dfavwrap, .dutyfloat.mini.dfaway .dfavatar { width: 50px; height: 50px; }

/* 笑臉＝CPU 正常：嘴巴牙齒偶爾閃亮一下（CPU 異常／通訊中斷就不閃） */
.dutyfloat .dfsmile { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 50%; z-index: 1; border-radius: 50%; overflow: hidden; }
.dutyfloat .dfteeth { position: absolute; left: var(--sx, 50%); top: var(--sy, 75%); width: 34%; height: 16%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.35) 55%, rgba(255,255,255,0)); opacity: 0; }
.dutyfloat .dfglint { position: absolute; left: calc(var(--sx, 50%) + 8%); top: calc(var(--sy, 75%) - 2%); width: 14px; height: 14px; text-align: center; font-style: normal; font-size: 13px; line-height: 14px; color: #fff; text-shadow: 0 0 3px #fff, 0 0 7px #fff7c0; opacity: 0; }
.dutyfloat.dfcpuok .dfteeth { animation: dfteeth 8s ease-in-out infinite; }
.dutyfloat.dfcpuok .dfglint { animation: dfglint 8s ease-in-out infinite; }
@keyframes dfteeth { 0%, 86%, 100% { opacity: 0; } 89%, 94% { opacity: .9; } }
@keyframes dfglint { 0%, 88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0); } 91% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(45deg); } 95% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(90deg); } }
.dutyfloat.mini .dfglint { font-size: 9px; }
.dutyfloat.mini .dfavbadge { width: 13px; height: 13px; border-width: 2px; right: -1px; bottom: -1px; }

/* 報表 pH 超標：最下面合計列 */
.rpcard .utable tr.rpsum td { font-weight: 700; border-top: 2px solid #5b6b80; }

/* 螢幕小鍵盤縮小（原本 1060 寬太大，會蓋住登入框）：寬 720、按鍵 42 高 */
.kbd .kbk { height: 42px; font-size: 18px; max-width: 64px; }
.kbd .kbk.kbf { font-size: 14px; }
.kbd .kbk.kbBS, .kbd .kbk.kbSHIFT, .kbd .kbk.kblang, .kbd .kbk.kbx { max-width: 86px; }
.kbd .kbk.kbent { max-width: 96px; }
.kbd .kbk.kbsp { max-width: 260px; font-size: 15px; }
.kbd .kbtop { height: 40px; } .kbd .kbc { height: 34px; font-size: 20px; min-width: 38px; } .kbd .kbc.kbw { font-size: 16px; }
.kbd .kbcands { height: 36px; } .kbd .kbcomp { font-size: 18px; }
.kbd .kbrows, .kbd .kbrow { gap: 5px; }
.kbd.kbsm .kbk { height: 34px; font-size: 15px; }
/* 流量計：每台泵今日運轉明細一頁 10 列 */
.fpbody:has(.fprpg) { display: flex; align-items: flex-end; gap: 14px; }   /* 翻頁按鈕放表格右邊，不多佔高度 */
.fprpg { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; color: #8892a0; text-align: center; }
.fprpg .btn { padding: 4px 12px; font-size: 13px; }
.fpruns td { padding-top: 2px; padding-bottom: 2px; }
.fprpg .btn:disabled { opacity: .4; }

/* 流量計頁（FHD 1920×1080 滿版）：說明框在最上面拉成一長條（一～兩列）；流量計卡片滿版；同一支流量計的泵浦橫向排列（寬度不夠自動變 2 個或 1 個一排） */
#main > .page.utilpage.flowpg { display: flex; flex-direction: column; }
.flowpg .lfbar { width: auto; max-width: none; margin: 0 0 8px; padding: 5px 12px; flex-wrap: wrap; row-gap: 2px; line-height: 1.6; font-size: 13.5px; }
.flowpg .lfbar .lfhint { margin-left: 4px; }
.flowpg .flowfm { width: auto; max-width: none; }
.flowpg .flowpage { padding: 0 2px; }
.flowpg .ffkpis { flex-wrap: nowrap; }   /* 四個數字方塊平均分滿整排 */
.flowpg .ffk, .flowpg .ffk.hi, .flowpg .ffk:last-child, .flowpg .ffk.ffinst { flex: 1 1 0; min-width: 0; }
.ffpumps { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); column-gap: 14px; align-items: start; }
.ffpumps.n1 { grid-template-columns: minmax(0, 1fr); }
.ffpumps > .fpd { min-width: 0; }
.ffpumps .fpd > summary { gap: 4px 12px; }
.ffpumps .fpbody { padding-left: 8px; }
.ffpumps .fpbody:has(.fprpg) { flex-direction: column; align-items: flex-start; gap: 6px; }
.ffpumps .fprpg { flex-direction: row; align-items: center; flex-wrap: nowrap; white-space: nowrap; font-size: 12px; gap: 6px; }
.ffpumps .fprpg .btn { padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.ffpumps .fpruns { font-size: 12.5px; width: 100%; table-layout: fixed; }
.ffpumps .fpruns th { white-space: normal; word-break: keep-all; line-height: 1.15; font-size: 12px; }   /* 窄的時候標題換兩行（峰值／m³/h），不切字 */
.ffpumps .fpruns th:first-child, .ffpumps .fpruns td:first-child { width: 26px; }
.ffpumps .fpbody { width: 100%; box-sizing: border-box; }
.ffpumps .fpd > summary { font-size: 13px; gap: 2px 10px; padding: 6px 2px; }
.ffpumps .fpd > summary .fpname { font-size: 15px; }
.ffpumps .fpd > summary .fpmet, .ffpumps .fpd > summary .fpmet b { font-size: 13px; }
.ffpumps .fpbase { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
.ffpumps .fpruns th, .ffpumps .fpruns td { padding-left: 2px; padding-right: 2px; }
@media (max-width: 1400px) {   /* 平板、小筆電：四個數字方塊排一排不換行 */
  .flowpg .ffkpis { flex-wrap: nowrap; }
  .flowpg .ffk, .flowpg .ffk.hi, .flowpg .ffk:last-child, .flowpg .ffk.ffinst { flex: 1 1 0; min-width: 0; }
  .flowpg .flowbody { overflow-y: auto; -webkit-overflow-scrolling: touch; }   /* 平板寬度不夠、泵浦換到第二排：卡片裡面用手指往上滑看（整頁不捲） */
}
@media (max-width: 900px) {   /* 手機：泵浦一個一排 */
  .flowpg .ffkpis { flex-wrap: wrap; }
  .flowpg .ffk, .flowpg .ffk.hi, .flowpg .ffk:last-child, .flowpg .ffk.ffinst { flex: 1 1 40%; }
  .ffpumps { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 2026-10-01 類比儀表面板 方案 A：兩欄對齊、按鈕 32px（10-09 由 36 改 32） ===== */
.popup.fp.fpa { width: 870px; }
.fpa .fpai { display: grid; grid-template-columns: 74px 1fr 1fr; gap: 0 22px; align-items: start; }
.fpa .fpg { display: grid; grid-template-columns: 1fr auto 32px; column-gap: 8px; row-gap: 9px; align-items: center; align-content: start; font-size: 18px; }
.fpa .fpg > .k { color: #333; white-space: nowrap; }
.fpa .fpg > .c { justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.fpa .fpg > .c2 { grid-column: 2 / 4; justify-self: end; }
.fpa .fpg > .b { display: flex; justify-content: center; }
.fpa .fpg > .fpsub { grid-column: 1 / 4; margin: 8px 0 0; }
.fpa .fpg > .fpsub:first-child { margin-top: 0; }
.fpa .fpg .fcb { margin: 0; }
.fpa .stepbtn { width: 32px; min-width: 32px; height: 32px; font-size: 22px; }
.fpa .fnum { width: 78px; height: 32px; padding: 0 6px; font-size: 18px; }
.fpa .fcb input { width: 30px; height: 30px; }
.fpa .fpsuphint { font-size: 12px; }
.fpa .fq, .fpa .fbox { min-width: 96px; display: inline-block; text-align: center; box-sizing: border-box; }
.fpa .fprep { min-height: 40px; padding: 4px 10px; }
.fpa .fprep .btn { padding: 6px 14px; font-size: 15px; }
.fpa .fprephint { font-size: 13px; }
@media (max-width: 900px) { .popup.fp.fpa { width: calc(100vw - 20px); } .fpa .fpai { grid-template-columns: 1fr; } .fpa .fpbar { display: none; } }

/* ===== 2026-10-01 🏷 名稱管理（開發者） ===== */
.nmwrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.nmwrap h2 { margin: 0 0 6px; }
.nmbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.nmbar input[type=search] { width: 320px; font-size: 16px; padding: 6px 10px; }
.nmbar .nmcnt { color: #5a6680; font-size: 14px; }
.nmbar label.btn { cursor: pointer; }
.nmsave { display: none; align-items: center; gap: 10px; padding: 6px 10px; margin-bottom: 6px; background: #fff6d8; border: 1px solid #e8b04a; border-radius: 6px; color: #6b4a10; }
.nmsave.on { display: flex; }
.nmtbl { flex: 1; min-height: 0; overflow: auto; }
.nmtbl table { width: 100%; }
.nmtbl thead th { position: sticky; top: 0; z-index: 1; }
.nmtbl td.num { text-align: right; }
.nmin { width: 100%; min-width: 240px; font-size: 15px; padding: 4px 8px; border: 1px solid #b7bdc7; border-radius: 4px; }
.nmin.chg { background: #fff3c4; border-color: #e8a20c; font-weight: 700; }
.cmbody > .nmwrap { flex: 1; min-width: 0; }

/* ===== 2026-10-01 🩺 系統健康度首頁（開發者） ===== */
.hlpage { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; padding: 4px 50px; }
.hlsum { margin-right: 40px; }
.hlsum { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 10px; padding: 8px 16px; box-shadow: 0 1px 4px #0002; }
.hlbig { font-size: 40px; font-weight: 900; line-height: 1.1; }
.hllbl { font-size: 14px; color: #555; }
.hlpill { padding: 4px 14px; border-radius: 14px; color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; }
.hlgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; }
.hlcard { background: #fff; border-radius: 10px; padding: 8px 12px; border-top: 6px solid #9aa3ad; box-shadow: 0 1px 4px #0002; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; min-height: 0; }
.hlcard:hover { box-shadow: 0 2px 10px #1a45b055; }
.hlcard.green { border-color: #1fb14a; } .hlcard.yellow { border-color: #e8a20c; background: #fffaf0; } .hlcard.red { border-color: #e0262b; background: #fff4f4; }
.hlcard.gray { border-color: #9aa3ad; background: #f4f5f7; } .hlcard.plc { border-color: #5b6270; background: #f4f5f7; cursor: default; }
.hlch { display: flex; align-items: baseline; gap: 8px; }
.hlcode { font-weight: 800; color: #123a8c; font-size: 16px; } .hlnm { flex: 1; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlsc { font-size: 30px; font-weight: 900; } .hlsc small { font-size: 13px; }
.hlst { align-self: flex-start; color: #fff; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 1px 10px; margin: 2px 0 5px; }
.hldd { display: grid; grid-template-columns: 38px 1fr; gap: 0 6px; font-size: 13.5px; margin: 2px 0; line-height: 1.35; }
.hldd b { color: #c0262b; } .hldd.b b { color: #b06a00; }
.hldd i { grid-column: 2; font-size: 11px; color: #888; font-style: normal; }
.hlok { color: #178a3a; font-size: 14px; } .hlmore { font-size: 12px; color: #888; }
.hlsp { margin-top: auto; height: 64px; background: #fafafa; border: 1px solid #eee; border-radius: 4px; } .hlsp svg { width: 100%; height: 100%; }
.hlutl { display: flex; gap: 8px; } .hlub { flex: 1; background: #fff; border: 1px solid #c6cbd3; border-radius: 8px; padding: 8px 4px; font-weight: 700; color: #123a8c; font-size: 15px; cursor: pointer; }
.hlub:hover { background: #eaf1ff; }
.hlmask { position: fixed; inset: 0; background: #0006; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.hldlg { background: #fff; border-radius: 10px; padding: 14px 18px; width: min(1180px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 8px; }
.hldlg h3 { margin: 0; } .hlcfgt { overflow: auto; min-height: 0; }
.hlcfgt input[type=number] { width: 64px; font-size: 15px; } .hlcfgt input[type=text] { width: 100%; min-width: 180px; font-size: 14px; }
.hltag { font-size: 11px; font-weight: 700; border-radius: 8px; padding: 0 6px; color: #fff; } .hltag.a { background: #e0262b; } .hltag.b { background: #e8a20c; }
@media (max-width: 1400px) { .hlgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-y: auto; grid-auto-rows: minmax(170px, auto); } }
@media (max-width: 900px) { .hlgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hlsum { flex-wrap: wrap; } .hlutl { flex-wrap: wrap; } }

/* ===== 2026-10-01 ⛶ 全螢幕：最上面一條邊框，點一下出現「離開全螢幕」 ===== */
#fsedge { display: none; position: fixed; left: 0; right: 0; top: 0; height: 10px; z-index: 5000; }
#fsedge.on { display: block; }
#fsedge.on.show { height: 64px; background: linear-gradient(#000a, #0000); }
#fsedge #fsexit { display: none; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 18px; font-weight: 800; padding: 8px 22px; border-radius: 22px; border: 0; background: #e0262b; color: #fff; box-shadow: 0 2px 8px #0006; }
#fsedge.on.show #fsexit { display: block; }

/* ===== 2026-10-01 13 吋平板（觸控）：現場常用頁面的按鈕放大（2026-10-09 使用者：36px 太大 → 32px）；用滑鼠的電腦不受影響 ===== */
html.touch #main .btn.bk, html.touch #main .btn.alshv { min-height: 32px; min-width: 60px; padding: 4px 12px !important; font-size: 15px; }
html.touch #main .seg button { min-height: 32px; }
html.touch .flowpg input, html.touch .flowpg select, html.touch .flowpg .btn { min-height: 32px; font-size: 15px; }
html.touch .ttreebody input[type=checkbox] { width: 26px; height: 26px; }
html.touch .ttreehd .tclear { min-height: 34px; padding: 4px 14px; }
html.touch .popup.fp .stepbtn { width: 32px; min-width: 32px; height: 32px; font-size: 22px; }
html.touch .popup.fp .fnum { height: 32px; }
html.touch .popup.fp .fcb input { width: 30px; height: 30px; }
html.touch #main .pager button, html.touch #main .pgbtn { min-height: 32px; }
/* 五級評分（鑽石／黃金／銀／銅／鐵） */
.hlrow { display: flex; align-items: center; gap: 8px; margin: 2px 0 5px; } .hlrow .hlst { margin: 0; }
.hltier { font-size: 13px; font-weight: 800; white-space: nowrap; } .hltier b { color: #f2b705; letter-spacing: -1px; } .hltier b i { color: #d5d9df; font-style: normal; }
.hlbig .hltier { font-size: 20px; vertical-align: middle; }
html.touch #main .utpcat { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }

/* ===== 警報等級顏色（2026-10-01）：跟原本西門子人機一樣 E 粉紅＝訊號故障、A 紅＝警報、W 黃＝警告 ===== */
tr.al-unack.sevE td { color: #fff; background: #d63fb8; }
tr.al-ack.sevE td { color: #fff; background: #9c2a86; }
tr.al-unack.sevW td { color: #222; background: #f5cf00; }
tr.al-ack.sevW td { color: #222; background: #d9b200; }
.allegend .lg.sva { background: #b51d21; }
.allegend .lg.sve { background: #d63fb8; }
.allegend .lg.svw { background: #f5cf00; }
#nav button.nav-warn, html[data-theme] #nav button.nav-warn { background: linear-gradient(#ffe14d, #d9a800); border-color: #fff0a0; color: #222; }
#nav button.nav-warn.nav-alarm-unack { animation: navWarn 1.6s ease-in-out infinite; }
@keyframes navWarn { 0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255,210,0,0); } 50% { filter: brightness(1.15); box-shadow: 0 0 12px 3px rgba(255,210,0,.8); } }
/* 歷史警報：實體警報依等級上淡色（整列），最左邊序號格是實心色條 */
table.hist tr.hsevA td { background: #ffe5e5; color: #222; }
table.hist tr.hsevE td { background: #ffe3f6; color: #222; }
table.hist tr.hsevW td { background: #fff5c4; color: #222; }
table.hist tr.hsevA td.hsn { background: #e0262b; color: #fff; }
table.hist tr.hsevE td.hsn { background: #d63fb8; color: #fff; }
table.hist tr.hsevW td.hsn { background: #f5cf00; color: #222; }
/* 點位資料庫：🔔 後面的等級小圓點 */
.svdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 3px; vertical-align: middle; }
.svdot.svA { background: #e0262b; } .svdot.svE { background: #d63fb8; } .svdot.svW { background: #f5cf00; border: 1px solid #b08f00; }
/* ===== 系統架構圖：原本圖面線號、DQ 繼電器（2026-10-01） ===== */
.archtbl td.awire { font-family: Consolas, 'Courier New', monospace; font-weight: 700; color: #1f4e8c; white-space: nowrap; }
.archtbl td.awire.tbd { color: #b26a00; font-weight: 400; font-family: inherit; }
.archtbl td.anote { white-space: nowrap; color: #374151; }
.archtbl td.anote.tbd { color: #b26a00; }
.archtbl td.awire small.a420 { display: block; font-size: 11px; line-height: 1.2; font-weight: 400; font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; color: #6b4fa0; }
.archtbl td.awire small.a420.w2 { color: #0f6e3a; font-weight: 700; }
/* ===== 流量計頁：畫面不要跳（2026-10-01）：每台泵浦上面的說明區固定高度，表格固定列數（空白列補滿） ===== */
.ffpumps .fpd > summary { min-height: 98px; align-content: flex-start; box-sizing: border-box; }   /* 最多 4 行說明；每台的表格同一個高度開始 */
.fpruns tr.fpblank td { color: transparent; }
.ffpumps .fprpg { justify-content: space-between; width: 100%; }
.fprpg .fpnav { display: inline-flex; align-items: center; gap: 4px; }
.fprpg .fpnav .btn { min-width: 30px; font-weight: 700; }
.fprpg.one .fpnav { visibility: hidden; }   /* 只有一頁：翻頁鈕不顯示，但位置留著（畫面不跳） */
/* ===== 流量計：每次運轉平均流量的小曲線（放在「共 N 筆」旁邊，不多佔高度） ===== */
.fpspark { flex: 0 0 auto; background: rgba(127,140,160,.08); border-radius: 4px; overflow: visible; }
.fpspark .fpsline { fill: none; stroke: #2f8fd8; stroke-width: 1.4; }
.fpspark circle { fill: #2f8fd8; }
.fpspark circle.last { fill: #1fb14a; }
.fpspark circle.bad { fill: #e0262b; }
.fpspark .fpsbase { stroke: #8892a0; stroke-width: 1; stroke-dasharray: 3 2; }
.fpspark .fpsthr { stroke: #e0262b; stroke-width: 1; stroke-dasharray: 3 2; }
.fpspark .fpsnone { font-size: 10px; fill: #8892a0; }
/* ===== 流量計：設定＋算式合併三行（2026-10-01） ===== */
.ffset.ffset3 { grid-template-columns: max-content max-content minmax(0, 1fr) max-content; column-gap: 14px; }
.ffset3 .ffsv { flex-wrap: nowrap; white-space: nowrap; }
.ffset3 .fxf { font-size: 13px; color: #2a3444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffset3 .fxf .fxr { color: #c0262b; }
.ffset3 .fxf .fxna { color: #8a929c; }
.ffset3 .ffse { display: flex; justify-content: flex-end; align-items: center; font-size: 12px; color: #6b7480; white-space: nowrap; }
.ffset3 .ffse .btn { margin-left: 0; }
/* 今日累計 / 昨日累計 / 瞬時流量 / 累計器：框縮小（標題一行、數字＋單位一行） */
.flowfm .ffkpis { gap: 8px; margin-bottom: 6px; }
.flowfm .ffk { display: grid; grid-template-columns: max-content 1fr; column-gap: 4px; align-items: baseline; padding: 3px 10px; border-radius: 6px; flex: 0 0 150px; }
.flowfm .ffk.hi, .flowfm .ffk:last-child { flex: 0 0 170px; }
.flowfm .ffk.ffinst { flex: 0 0 260px; }
.flowfm .ffk .ffkl { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; }
.flowfm .ffk .ffkv, .flowfm .ffk .ffkv.big { font-size: 20px; line-height: 1.2; }
.flowfm .ffk .ffku { font-size: 12px; }
.flowfm .ffk .ffsp { grid-column: 1 / -1; margin-top: 0; }
/* 流量計：每次運轉平均流量曲線（表格下面，高度自動填滿） */
.fpchart { margin-top: 6px; width: 100%; }
.fpchart canvas.fpcv { display: block; width: 100%; height: 70px; border: 1px solid #d5dde8; border-radius: 6px; background: rgba(127,140,160,.05); box-sizing: border-box; }
/* ===== 🩺 CPU 診斷緩衝區（2026-10-02） ===== */
.archcpu .acdiag { margin-top: 6px; padding: 2px 10px; font-size: 13px; }
.cdcard { width: min(1180px, 96vw); }
.cdhd { display: flex; align-items: center; gap: 10px; }
.cdhd h3 { margin: 0; }
.cdst { font-size: 13px; color: #4b5563; }
.cdst.bad { color: #c0262b; font-weight: 700; }
.cdnote { font-size: 13px; color: #4b5563; margin: 6px 0 8px; }
.cdtbl { width: 100%; font-size: 14px; }
.cdtbl td small { display: block; color: #8a929c; font-size: 11px; }
.cdtbl td code { font-size: 13px; }
.cdtbl tr.cdin td { background: #ffe5e5; }
.cdtbl tr.cdout td { background: #e6f6ea; }
.cdtbl td.cdinfo { font-size: 11px; color: #6b7480; white-space: nowrap; }
.cdtbl tr.cdblank td { height: 45px; }
#cdpg { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }

/* 2026-10-02 系統架構圖 AI：模組設定、感測器分兩欄 */
.archtbl td.amset { white-space: nowrap; color: #6b4fa0; }
.archtbl td.asens { white-space: nowrap; color: #6b4fa0; }
.archtbl td.asens.w2 { color: #0f6e3a; font-weight: 700; }
.archtbl td.asens.tbd { color: #b45309; font-weight: 700; }
.archtbl td.aname { white-space: normal; max-width: 150px; }

/* 2026-10-02 🔏 電子簽章視窗＋稽核軌跡 */
.modal.esigmodal { z-index: 400; }
.escard { width: 560px; padding: 18px 22px; }
.escard h3 { margin: 0 0 10px; }
.estbl { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 15px; }
.estbl th { width: 64px; text-align: left; color: #5a6680; font-weight: 400; padding: 4px 0; vertical-align: top; }
.estbl td { padding: 4px 0; }
.estbl .escat { margin-left: 8px; font-size: 12px; background: #eef2ff; color: #3446a3; border-radius: 10px; padding: 1px 8px; }
.estbl .esnew { color: #1e5fd0; }
.esrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.esrow label { width: 72px; color: #374151; }
.esrow input, .esrow select { flex: 1; font-size: 16px; padding: 7px 10px; }
.esrow .esmean { font-size: 12px; color: #fff; background: #6b7380; border-radius: 4px; padding: 2px 8px; }
.esdual { margin: 10px 0 2px; padding: 6px 10px; background: #fff7e0; border-left: 4px solid #e0a000; font-size: 14px; }
.eserr { min-height: 20px; color: #c62828; font-weight: 700; margin-top: 6px; }
.esnote { font-size: 12px; color: #6b7380; margin: 4px 0 10px; }
.escard .btns { display: flex; gap: 8px; }
.eswrap .escfg { display: flex; gap: 18px; align-items: flex-start; background: #f6f8fb; border: 1px solid #dde3ec; border-radius: 6px; padding: 10px 14px; margin-top: 8px; }
.escfg .escol { display: flex; flex-direction: column; gap: 4px; }
.escfg .eslab { font-size: 13px; color: #5a6680; }
.escfg .esst { font-size: 13px; color: #6b7380; } .escfg .esst.on { color: #0f6e3a; font-weight: 700; }
.escfg .escats td { padding: 2px 10px 2px 0; font-size: 14px; white-space: nowrap; } .escfg .escats .esn { color: #8a93a3; font-size: 12px; }
.escfg textarea { width: 220px; font-size: 13px; resize: none; }
.escfg .esbtn { align-self: flex-end; }
.eswrap input[type=date] { font-size: 15px; padding: 5px 8px; }
.esvr { font-size: 14px; } .esvr.ok { color: #0f6e3a; font-weight: 700; } .esvr.bad { color: #c62828; font-weight: 700; }
.estblwrap { flex: 1; min-height: 0; overflow: hidden; }
.esatbl td { font-size: 13px; padding: 5px 8px; }
.esatbl td small { display: block; color: #8a93a3; font-size: 11px; }
.esatbl td.eswhat { max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.esatbl tr.esbad td { background: #fdecec; }
.esatbl td.esok { color: #0f6e3a; } .esatbl td.esfail { color: #c62828; font-weight: 700; }
.esatbl td { height: 38px; box-sizing: border-box; white-space: nowrap; }
/* 2026-10-02 🩺 CPU 診斷緩衝區按鈕放大，移到 CPU 框右上角（不增加框的高度） */
.archcpu { position: relative; }
.archcpu .acdiag { position: absolute; top: 10px; right: 12px; margin: 0; padding: 6px 14px; font-size: 16px; font-weight: 700; }
/* 2026-10-02 系統架構圖：CPU 框旁邊的圖例字放大 */
.archlegend { font-size: 17px; font-weight: 600; gap: 8px 20px; }
.archlegend .lg { width: 18px; height: 18px; }
.archlegend .lgt b { font-size: 16px; padding: 1px 8px; }
/* 2026-10-02 系統設定分頁按鈕：字不在中間斷行（一個按鈕一行），放不下就整顆換到下一排 */
.cmtabs { flex-wrap: wrap; gap: 4px 5px; }
.cmtabs button { white-space: nowrap; padding: 7px 12px; font-size: 15px; }
.cmtabnote { white-space: nowrap; }
@media (max-width: 1400px) { .cmtabs button { font-size: 14px; padding: 6px 8px; } .cmtabs { gap: 4px 3px; } .cmtabnote { display: none; } }
/* 2026-10-02 健康度首頁上面：PLC 時間、NAS 時間 */
.hltime { display: flex; align-items: center; gap: 14px; margin-left: 10px; padding: 4px 12px; border-left: 2px solid #e1e5ec; font-variant-numeric: tabular-nums; }
.hltime > div { display: flex; flex-direction: column; line-height: 1.15; }
.hltime span { font-size: 12px; color: #5a6680; }
.hltime b { font-size: 18px; color: #1f2937; }
.hltime .hltdf { font-size: 14px; color: #5a6680; justify-content: center; }
.hltime.warn .hltdf { color: #c27a00; font-weight: 700; } .hltime.bad .hltdf { color: #c62828; font-weight: 700; }
.hltime .hltbad { color: #c62828; }
.hltime b, .hltime .hltdf, .hltime span { white-space: nowrap; }
.hltime .hld { font-style: normal; font-size: 14px; font-weight: 600; color: #5a6680; }
@media (max-width: 1400px) { .hltime { gap: 10px; margin-left: 0; padding: 4px 8px; } .hltime .hld { display: none; } .hltime b { font-size: 16px; } }
.uthead .utinl { margin: 0 auto 0 4px; font-size: 13px; }
/* 2026-10-02 流量計頁：數字方塊放到設定右邊；表格列可以點、選到的那一列變黃；曲線可以點 */
.flowfm .fftop { display: flex; align-items: stretch; gap: 10px; margin-bottom: 6px; }
.flowfm .fftop > .ffset3 { flex: 1 1 auto; min-width: 0; margin: 0; }
.flowfm .fftop > .ffkpis { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; align-items: stretch; }
.flowfm .fftop > .ffkpis .ffk { flex: 0 0 150px; }
@media (max-width: 1500px) { .flowfm .fftop { flex-wrap: wrap; } .flowfm .fftop > .ffset3 { flex-basis: 100%; } }
.fpruns tr.fpr { cursor: pointer; }
.fpruns tr.fpr:hover td { background: #eaf2ff; }
.fpruns tr.fpsel td { background: #fff3c4 !important; font-weight: 700; }
.fpchart canvas.fpcv { cursor: pointer; }
.flowfm .fftop > .ffkpis .ffk.ffinst { flex-basis: 200px; }
/* 2026-10-02 今日狀況：已確認感測器故障的點＝整列灰底 */
.smrt tr.rep td { background: #e3e6ea !important; color: #8a929c !important; }
.smrt .smrep { margin-left: 4px; font-size: 11px; color: #fff; background: #8a929c; border-radius: 3px; padding: 0 4px; }
/* 2026-10-02 類比儀表面板 方案 B：狀態列在上＋卡片（警報｜量程｜進階），進階平常收起來 */
.popup.fp.fpb { width: 760px; }
.popup.fp.fpb.fpbadv { width: 1080px; max-width: calc(100vw - 16px); }
.fpb .fpbst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; margin-bottom: 10px; border: 1px solid #d5dde8; border-radius: 8px; background: #fff; font-size: 15px; }
.fpb .fpbst > .k { color: #4b5563; }
.fpb .fpbst > .fpv { font-size: 24px; }
.fpb .fpbst > .u { margin-right: 14px; color: #333; }
.fpb .fpbst .fq, .fpb .fpbst .fbox { min-width: 70px; text-align: center; }
.fpb .fpbst .fprep { margin: 0 0 0 auto; padding: 3px 8px; min-height: 0; border: 0; background: transparent; }
.fpb .fpbst .fprep:not(.on) .fprephint { display: none; }
.fpb .fpbst .fprep.on { flex-basis: 100%; margin-left: 0; border: 1px solid #e8a20c; background: #fff3d6; }
.fpb .fpai { display: grid; grid-template-columns: 74px 1fr 1fr 54px; gap: 0 12px; align-items: stretch; }
.fpb .fpai.adv { grid-template-columns: 74px 1fr 1fr 54px 1fr; }
.fpb .fpai:not(.adv) .fpadv { display: none; }
.fpb .fpcard { border: 1px solid #d5dde8; border-radius: 8px; padding: 6px 10px 10px; background: #fff; display: grid; grid-template-columns: 1fr auto 32px; column-gap: 8px; row-gap: 8px; align-items: center; align-content: start; font-size: 17px; }
.fpb .fpcard > .fpct { grid-column: 1 / -1; font-weight: 800; color: #1e3a8a; border-bottom: 1px solid #d5dde8; padding-bottom: 3px; }
.fpb .fpcard > .fpch { font-size: 11px; color: #6b7480; text-align: center; margin-bottom: -4px; }
.fpb .fpcard > .k { color: #333; white-space: nowrap; }
.fpb .fpcard > .c { justify-self: end; display: inline-flex; align-items: center; gap: 5px; }
.fpb .fpcard > .b { display: flex; justify-content: center; }
.fpb .fpcard .fcb { margin: 0; }
.fpb .stepbtn { width: 34px; min-width: 34px; height: 34px; font-size: 20px; }
.fpb .fnum { width: 74px; height: 34px; padding: 0 6px; font-size: 17px; }
.fpb .fcb input { width: 26px; height: 26px; }
.fpb .fpadvbtn { align-self: stretch; border: 1px dashed #9aa3af; border-radius: 8px; background: #f4f6f9; color: #45516a; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.6; cursor: pointer; padding: 4px; }
.fpb .fpadvbtn:hover { background: #e7effa; }
@media (max-width: 900px) { .popup.fp.fpb, .popup.fp.fpb.fpbadv { width: calc(100vw - 16px); } .fpb .fpai, .fpb .fpai.adv { grid-template-columns: 1fr; } .fpb .fpbar { display: none; } }
.popup.fp.fpb.fpbadv { width: 1150px; }
.fpb .fpbst .fprep .btn, .fpb .fpbst .fprep .btn.warn { padding: 3px 10px; font-size: 13px; background: #fff7e6; color: #b45309; border: 1px solid #e8a20c; }
.fpb .fpbst .fprep.on .btn { background: #fff; color: #7a4d00; }

/* 2026-10-02 面板上方兩個按鈕：確認NFB關閉／確認故障 */
.fprep .fprept { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.fprep .fprepb { flex: none; display: flex; gap: 6px; }
/* 2026-10-02 面板上方改成上下兩列：電源（NFB）在上、故障在下，各自文字＋按鈕 */
.fprep.fprep2 { flex-direction: column; align-items: stretch; gap: 4px; }
.fprep2 .fprl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fprep2 .fprl + .fprl { border-top: 1px dashed #e3c98a; padding-top: 4px; }
.fprep2 .fprl .btn { min-width: 128px; }
.fprep2 .fprl .btn:disabled { background: #eef0f3; border-color: #c9d0d9; color: #9aa3ae; cursor: not-allowed; }

/* ===== 即時警報：固定表格（2026-10-09）=====
   一頁固定 15 列、每列固定高度、一律一行（放不下用 …，滑鼠移上去看全文）→ 翻頁、新警報進來都不會忽長忽短、跳位置 */
.alpage table.altbl { width: 100%; margin: 0; table-layout: fixed; }
.alpage .altbl tbody tr { height: var(--alrh, 38px); }
.alpage .altbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; }
.alpage .altbl th { padding: 6px 8px; white-space: nowrap; overflow: hidden; }
.alpage .altbl .alnote { display: inline; margin-left: 6px; }
.alpage .altbl tr.alfill td { background: #fff; border-bottom: 1px solid #eef0f4; animation: none; }
.alpage .altbl tbody { touch-action: none; user-select: none; -webkit-user-select: none; }
/* 框選：粗藍框（紅色閃爍列上也看得到） */
.alpage .altbl tr.alsel td { box-shadow: inset 0 4px 0 #1e6fd9, inset 0 -4px 0 #1e6fd9; }
.alpage .altbl tr.alsel td:first-child { box-shadow: inset 6px 0 0 #1e6fd9, inset 0 4px 0 #1e6fd9, inset 0 -4px 0 #1e6fd9; }
.alpage .altbl tr.alsel td:last-child { box-shadow: inset -6px 0 0 #1e6fd9, inset 0 4px 0 #1e6fd9, inset 0 -4px 0 #1e6fd9; }
.alselrow { display: inline-flex; align-items: center; height: 42px; }   /* 提示文字跟選取列同一個位置、固定高度 → 選取時表格不會往下跳 */
.alselrow.on .alhint { display: none; }
.alselbar { display: none; }
.alselbar.on { display: inline-flex; align-items: center; gap: 8px; background: #fff3c4; border: 2px solid #e0a800; border-radius: 8px; padding: 1px 8px; }
.alselbar .alselmsg { font-weight: 700; color: #5a4300; white-space: nowrap; }
.alselbar .alselmsg em { font-style: normal; color: #c0161b; margin-left: 6px; }

/* ===== 儀表面板分 3 頁（2026-10-09）：寬約 600px，◀ ▶ 切換；① 警報 ② 量程 ③ 進階；三頁同高，切換時面板不會變大變小 ===== */
.popup.fp.fpb.fpb3 { width: 600px; max-width: calc(100vw - 16px); }
.fpb3 .fpai { grid-template-columns: 74px 1fr; gap: 0 14px; }
.fpb3 .fppg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fpb3 .fppgbar { display: flex; align-items: center; gap: 6px; }
.fpb3 .fppgb { width: 40px; height: 32px; border: 1px solid #9aa6b6; border-radius: 6px; background: #fff; font-size: 16px; cursor: pointer; flex: none; }
.fpb3 .fppgb:hover { background: #e7effa; }
.fpb3 .fppgt { flex: 1; display: flex; border: 1px solid #9aa6b6; border-radius: 6px; overflow: hidden; }
.fpb3 .fppgt button { flex: 1; height: 32px; border: 0; border-left: 1px solid #c9d1dc; background: #fff; font: inherit; font-size: 15px; cursor: pointer; color: #1d2430; }
.fpb3 .fppgt button:first-child { border-left: 0; }
.fpb3 .fppgt button.on { background: #1f6fd1; color: #fff; font-weight: 800; }
.fpb3 .fppage { display: none; min-height: 274px; }
.fpb3 .fppage.on { display: grid; }
@media (max-width: 900px) { .popup.fp.fpb.fpb3 { width: calc(100vw - 16px); } .fpb3 .fpai { grid-template-columns: 1fr; } }

/* ===== 💯 健康度評分搬到智能分析（2026-10-09）===== */
.hlpage.hlin { position: static; height: 100%; padding: 0; overflow: hidden; }
.hlin .hlutl { display: none; }
.hlin .hlsum { margin-right: 0; }

/* ============ Taiwan AI SCADA 三分割版面（2026-10-11）============
   lay-side＝按鈕列直排在側邊（右／左），lay-ab-bottom / lay-ab-top＝即時警報列在下／上 */
#app.lay-side { display: grid; grid-template-columns: 1fr var(--navw, 190px); grid-template-rows: 52px auto 1fr auto;
  grid-template-areas: "top top" "abt nav" "main nav" "abb nav"; }
#app.lay-side.lay-left { grid-template-columns: var(--navw, 190px) 1fr; grid-template-areas: "top top" "nav abt" "nav main" "nav abb"; }
#app.lay-side #top { grid-area: top; }
#app.lay-side #main { grid-area: main; min-height: 0; min-width: 0; }
#app.lay-side #nav { grid-area: nav; display: flex !important; flex-direction: column; gap: 6px; padding: 8px; overflow-y: auto; min-height: 0; }
#app.lay-side #nav button { flex: 0 0 54px; justify-content: flex-start; padding: 0 14px; font-size: 18px; }
#app.lay-side #nav button[hidden] { display: none; }
#app #albar { grid-area: abb; }
#app.lay-ab-top #albar { grid-area: abt; }
#app:not(.lay-side) #albar { order: 0; }
#app:not(.lay-side).lay-ab-top #albar { order: -1; }
#app:not(.lay-side) #top { order: -2; }
#albar { background: #1d2229; color: #e8ecf2; border-top: 2px solid #3a4250; font-size: 15px; min-width: 0; }
#app.lay-ab-top #albar { border-top: 0; border-bottom: 2px solid #3a4250; }
#albar .abhead { display: flex; align-items: center; gap: 10px; padding: 4px 10px; }
#albar .abhead b { font-size: 15px; }
#albar .abcnt { padding: 1px 9px; border-radius: 10px; font-weight: 700; font-size: 13px; }
#albar .abcnt.a { background: var(--fault); color: #fff; } #albar .abcnt.e { background: #ff8fd0; color: #3a0a25; } #albar .abcnt.w { background: #f2cc00; color: #3a2e00; }
#albar .abhead .sp { flex: 1; }
#albar .abhead button { background: #2e3644; color: #fff; border: 1px solid #56606f; border-radius: 5px; padding: 3px 12px; font: inherit; font-size: 14px; cursor: pointer; }
#albar .abrow { display: grid; grid-template-columns: 8px 172px 230px 1fr 120px 76px; gap: 10px; align-items: center; height: 32px; padding: 0 10px; border-top: 1px solid #333b47; cursor: default; white-space: nowrap; }
#albar .abrow > span { overflow: hidden; text-overflow: ellipsis; }
#albar .abrow .bar { height: 22px; border-radius: 2px; background: var(--fault); }
#albar .abrow.sevE .bar { background: #ff8fd0; } #albar .abrow.sevW .bar { background: #f2cc00; }
#albar .abrow.un { font-weight: 700; } #albar .abrow.un .bar { animation: abblink 1s steps(1) infinite; }
#albar .abrow.back { color: #9fb4c8; }
#albar .abrow:hover { background: #262d37; }
#albar .abrow button { background: #2e3644; color: #fff; border: 1px solid #56606f; border-radius: 5px; padding: 1px 10px; font: inherit; font-size: 13px; cursor: pointer; }
#albar .abnone { padding: 6px 28px; color: #8b97a6; height: 32px; }
@keyframes abblink { 50% { opacity: .15; } }
html[data-theme="google"] #albar { background: #fff; color: #202124; border-color: #dadce0; }
html[data-theme="google"] #albar .abrow { border-color: #eceff1; } html[data-theme="google"] #albar .abrow:hover { background: #f1f3f4; }
html[data-theme="google"] #albar button { background: #fff !important; color: #1a73e8 !important; border-color: #dadce0 !important; }
body.demo #albar { display: none !important; }

/* 2026-10-11 即時警報頁：顏色說明＋操作說明縮成一排，放在最下面 */
.alpage .alfoot { flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; white-space: nowrap; overflow: hidden; padding: 4px 0 0; font-size: 14px; color: #4b5563; }
.alpage .alfoot .allegend { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #15181d; }
.alpage .alfoot .allegend .lg { width: 16px; height: 12px; margin-left: 8px; }
.alpage .alfoot .alhint { font-size: 14px; color: #4b5563; }
html[data-theme="dark"] .alpage .alfoot .allegend, html[data-theme="dark"] .alpage .alfoot .alhint { color: #c9d1dc; }
/* 選取時：最下面那一排換成「已選取 N 筆／確認／取消」，表格不會跳 */
.alpage .alfoot { height: 44px; }
.alpage .alfoot .alselrow { height: auto; }
.alpage .alfoot .alselrow:not(.on) { display: none; }
.alpage .alfoot:has(.alselrow.on) .allegend, .alpage .alfoot:has(.alselrow.on) .alhint { display: none; }

/* ============ 空氣線圖（2026-10-11）============ */
#nav button[data-nav="psychro"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 21h18M3 21V3"/%3E%3Cpath d="M5 19c6 0 10-4 14-14"/%3E%3Cpath d="M5 19c7-1 11-3 14-8"/%3E%3C/svg%3E'); }
.psypage .psyhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.psytabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.psytabs button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 6px; padding: 5px 14px; font: inherit; font-size: 15px; cursor: pointer; }
.psytabs button.on { background: #1a4fc4; color: #fff; border-color: #1a4fc4; }
.psyinfo { font-size: 13px; color: #4b5563; }
.psybox { width: 100%; }
.psysvg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid #b8bec8; border-radius: 6px; }
.psysvg .psybg { fill: #fbfcfd; }
.psysvg .psygrid { stroke: #e3e7ec; stroke-width: 1; }
.psysvg .psyax { font-size: 12px; fill: #4b5563; }
.psysvg .psylab { font-size: 13px; fill: #15181d; font-weight: 700; }
.psysvg .psyrh { fill: none; stroke: #7fa7d9; stroke-width: 1; }
.psysvg .psysat { fill: none; stroke: #1a4fc4; stroke-width: 2.2; }
.psysvg .psyrhl { font-size: 11px; fill: #3b6fb6; }
.psysvg .psyh { fill: none; stroke: #c9a46a; stroke-width: 0.8; stroke-dasharray: 4 4; }
.psysvg .psyhl { font-size: 10px; fill: #9a7535; }
.psysvg .psyspec { fill: rgba(31, 177, 74, .18); stroke: #1fb14a; stroke-width: 1.6; }
.psysvg .psyspecl { font-size: 12px; fill: #1b7a37; font-weight: 700; }
.psysvg .psyptl { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.psytbl { margin-top: 10px; width: 100%; }
.psytbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.psysw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.psydemo { background: #fff3bf; color: #7a5b00; border-radius: 4px; padding: 0 6px; font-size: 12px; margin-right: 4px; }
.psybad { color: #e0262b; }
.psyfoot { font-size: 12px; color: #6b7280; margin-top: 8px; }

/* ============ 電力監視／時間電價（2026-10-11）============ */
#nav button[data-nav="power"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M13 2L4 14h7l-1 8 9-12h-7z"/%3E%3C/svg%3E'); }
.pwpage .pwcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pwcard { background: #fff; border: 1px solid #b8bec8; border-radius: 6px; padding: 6px 12px; display: flex; flex-direction: column; }
.pwcard small { font-size: 12px; color: #4b5563; }
.pwcard b { font-size: 22px; line-height: 1.3; }
.pwcard span { font-size: 13px; color: #374151; }
.pwbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.pwtabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pwtabs button, #pwctl button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 6px; padding: 5px 14px; font: inherit; font-size: 15px; cursor: pointer; }
.pwtabs button.on { background: #1a4fc4; color: #fff; border-color: #1a4fc4; }
#pwplan button.on { background: #d9480f; border-color: #d9480f; }
#pwctl { margin-left: auto; font-size: 14px; }
#pwctl input { font: inherit; padding: 3px 6px; }
.pwsvg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid #b8bec8; border-radius: 6px; }
.pwsvg .pwgrid { stroke: #e3e7ec; }
.pwsvg .pwax { font-size: 12px; fill: #4b5563; }
.pwsvg .pwln, .pwsvg .pwbus { fill: none; stroke-width: 2.5; }
.pwsvg .hv { stroke: #c92a2a; }
.pwsvg .lv { stroke: #1c5fc4; }
.pwsvg .pwbus { stroke-width: 6; stroke-linecap: round; }
.pwsvg .pwbrk { fill: #fff; stroke: #15181d; stroke-width: 2; }
.pwsvg .pwmeter, .pwsvg .pwtr { fill: #fff; stroke: #15181d; stroke-width: 2; }
.pwsvg .pwm { font-size: 13px; font-weight: 700; text-anchor: middle; }
.pwsvg .pwm.sm { font-size: 10px; }
.pwsvg .pwtitle { font-size: 15px; font-weight: 700; text-anchor: middle; }
.pwsvg .pwtrn { font-size: 13px; fill: #15181d; }
.pwsvg .pwtag { cursor: pointer; }
.pwsvg .pwtag rect { fill: #10151d; stroke: #4b5563; }
.pwsvg .pwtag:hover rect { stroke: #f59f00; stroke-width: 2; }
.pwsvg .pwtn { font-size: 12px; fill: #cfd6e0; text-anchor: middle; }
.pwsvg .pwtv { font-size: 14px; fill: #46e06c; font-weight: 700; text-anchor: middle; font-family: Consolas, monospace; }
.pwsvg .pwnote { font-size: 12px; fill: #4b5563; }
.pwtbl { margin-top: 10px; width: 100%; }
.pwtbl .num { text-align: right; font-family: Consolas, monospace; }
.pwtbl tr.pwsum td { font-weight: 700; background: #eef2fb; }
.pwnote2, .pwfoot { font-size: 13px; color: #4b5563; margin-top: 6px; }
.pwnone { padding: 30px; text-align: center; color: #6b7280; }
.pwpage table.pwtbl { width: 100%; }
.pwsvg.pwsldsvg { max-height: calc(100vh - 330px); }

/* ============ PID 面板（2026-10-11）============ */
#nav button[data-nav="pid"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 17c3 0 4-10 7-10s3 6 5 6 3-3 6-3"/%3E%3Cpath d="M3 21h18"/%3E%3C/svg%3E'); }
.pidpanel { position: fixed; right: 220px; top: 70px; width: 420px; z-index: 900; background: #f7f9fc; border: 2px solid #1a4fc4; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 14px; color: #15181d; }
.pidhead { display: flex; align-items: center; gap: 8px; background: #1a4fc4; color: #fff; padding: 6px 10px; cursor: move; border-radius: 6px 6px 0 0; }
.pidhead .pidttl { flex: 1; font-weight: 700; } .pidhead small { font-weight: 400; opacity: .8; margin-left: 6px; }
.pidx { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.pidbody { padding: 8px 10px 10px; }
.pidbig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pidbig > div { background: #10151d; border-radius: 6px; padding: 4px 8px; color: #cfd6e0; }
.pidbig small { display: block; font-size: 11px; } .pidbig b { font: 700 22px Consolas, monospace; } .pidbig i { font-style: normal; font-size: 12px; margin-left: 4px; }
.pidbig .pv { color: #51cf66; } .pidbig .sp { color: #ffd43b; } .pidbig .mv { color: #4dabf7; }
.pidsparkbox { margin-top: 6px; } .pidspark { width: 100%; height: auto; display: block; border-radius: 4px; }
.pidleg { display: flex; gap: 12px; font-size: 12px; margin: 2px 0 6px; color: #4b5563; }
.pidrow { display: flex; align-items: center; gap: 6px; margin: 5px 0; flex-wrap: wrap; }
.pidrow input { width: 80px; font: inherit; padding: 3px 6px; } .pidrow small { color: #6b7280; }
.pidk { width: 34px; font-weight: 700; }
.pidbody button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 4px 10px; font: inherit; cursor: pointer; }
.pidbody button:disabled { opacity: .45; cursor: not-allowed; }
.pidam.on { background: #1a4fc4; color: #fff; border-color: #1a4fc4; } .pidam.on.man { background: #e67700; border-color: #e67700; }
.pidnote { background: #fff4e6; border: 1px solid #f59f00; border-radius: 5px; padding: 4px 8px; margin: 6px 0; font-size: 13px; }
.piddual { border-top: 1px solid #d0d5dd; margin-top: 8px; padding-top: 6px; }
.pidk2 { font-weight: 700; } .pidk2 small { font-weight: 400; color: #6b7280; }
.pidab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.pidab > div { border: 1px solid #c4c9d2; border-radius: 6px; padding: 3px 8px; background: #fff; } .pidab > div.use { border: 2px solid #2b8a3e; background: #ebfbee; }
.pidab small { display: block; font-size: 11px; color: #6b7280; } .pidab b { font: 700 17px Consolas, monospace; }
.pidsel { display: flex; gap: 5px; flex-wrap: wrap; } .pidsel button.on { background: #2b8a3e; color: #fff; border-color: #2b8a3e; }
.pidcur { margin-top: 4px; font-size: 13px; }
.pidpar { margin-top: 8px; } .pidpar summary { cursor: pointer; font-weight: 700; }
.pidpage .pidgh { margin: 10px 0 4px; } .pidpage table.pidtbl { width: 100%; } .pidpage .pidtbl tr[data-id] { cursor: pointer; } .pidpage .pidtbl tr[data-id]:hover td { background: #e7efff; }
.pidpage .num { text-align: right; font-family: Consolas, monospace; } .pidfoot { margin-top: 8px; font-size: 13px; color: #4b5563; }

/* ============ 建系統精靈（2026-10-11）============ */
.swmodal .swcard { width: min(1700px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.swhead { display: flex; align-items: center; gap: 12px; } .swhead h3 { margin: 0; } .swhead .sp { flex: 1; }
.swhead .seg button.on { background: #1a4fc4; color: #fff; }
.swbody { display: flex; gap: 14px; margin-top: 10px; min-height: 0; flex: 1; }
.swleft { width: 340px; flex: none; overflow: auto; } .swright { flex: 1; min-width: 0; overflow: auto; background: #c9cdd3; border-radius: 6px; }
.swprev { width: 100%; height: auto; display: block; }
.swrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; } .swrow > span { width: 130px; font-weight: 700; }
.swrow input[type=number] { width: 64px; font: inherit; padding: 3px 6px; } .swrow small, .swhint { color: #6b7280; font-size: 12px; }
.swadd { display: flex; flex-wrap: wrap; gap: 4px; } .swadd button, .swsi button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 2px 8px; cursor: pointer; font: inherit; font-size: 13px; }
.swseq { margin: 6px 0; border: 1px solid #c4c9d2; border-radius: 6px; background: #fff; }
.swsi { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-bottom: 1px solid #eef0f3; } .swsi .sp { flex: 1; } .swsi b { width: 20px; color: #1a4fc4; }
#swmake { margin-top: 12px; width: 100%; }

/* ============ 化學要酸／特氣 EMO／毒氣（2026-10-11）============ */
#nav button[data-nav="fmcs"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M9 3h6M10 3v6l-5 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V3"/%3E%3Cpath d="M7 15h10"/%3E%3C/svg%3E'); }
.fxtop { margin-bottom: 8px; } .fxtabs { display: inline-flex; gap: 6px; }
.fxtabs button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 6px; padding: 6px 16px; font: inherit; font-size: 15px; cursor: pointer; }
.fxtabs button.on { background: #1a4fc4; color: #fff; border-color: #1a4fc4; }
.fxsec { margin-bottom: 12px; } .fxsec h3 { margin: 4px 0 6px; } .fxsec h3 small { font-weight: 400; color: #4b5563; }
.fxact { display: flex; flex-wrap: wrap; gap: 8px; }
.fxa { background: #fff4e6; border: 2px solid #f76707; border-radius: 8px; padding: 6px 12px; display: flex; gap: 10px; align-items: center; animation: fxpulse 1.6s infinite; }
@keyframes fxpulse { 50% { background: #ffe8cc; } }
.fxchem { background: #f76707; color: #fff; border-radius: 4px; padding: 0 6px; font-weight: 700; } .fxsec2 { font: 700 18px Consolas, monospace; color: #d9480f; }
.fxnone { color: #6b7280; padding: 6px; }
.fxbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fxbar .sp { flex: 1; } .fxbar input { font: inherit; padding: 2px 6px; }
.fxbar button, .fxtbl button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 2px 10px; font: inherit; cursor: pointer; }
.fxpage table.fxtbl { width: 100%; margin-top: 6px; } .fxtbl .num { text-align: right; font-family: Consolas, monospace; }
.fxtbl tr.fxon td { background: #fff4e6; } .fxtbl tr.fxblank td { color: #9aa3af; } .fxonb { color: #d9480f; }
.fxtbl tr.fxedit input { font: inherit; padding: 2px 4px; width: 100%; box-sizing: border-box; }
.fxwarn { background: #fff5f5; border: 2px solid #e03131; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; color: #a51111; font-weight: 700; }
.fxemo { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fxe { background: #fff; border: 1px solid #b8bec8; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.fxe.shut { background: #ffe3e3; border-color: #e03131; } .fxen { font-weight: 700; font-size: 16px; } .fxeg { color: #4b5563; } .fxes { font-weight: 700; }
.fxemob { background: #e03131; color: #fff; border: 3px solid #a51111; border-radius: 8px; padding: 10px; font: 700 17px inherit; cursor: pointer; }
.fxemob:disabled { opacity: .4; cursor: not-allowed; } .fxrst { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 3px; cursor: pointer; }
.fxstep { min-width: 420px; } .fxred { color: #c41b1b; } .fxsmall { font-size: 12px; color: #6b7280; }
.fxgas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fxg { background: #fff; border: 2px solid #b8bec8; border-radius: 8px; padding: 8px 10px; }
.fxg.lv1 { background: #fff9db; border-color: #f59f00; } .fxg.lv2 { background: #ffe3e3; border-color: #e03131; animation: fxpulse2 1s infinite; } .fxg.bad { background: #ffe0f0; border-color: #d6336c; }
@keyframes fxpulse2 { 50% { background: #ffc9c9; } }
.fxgn { font-weight: 700; } .fxga { font-size: 12px; color: #6b7280; } .fxgv { font: 700 28px Consolas, monospace; margin: 4px 0; } .fxgv small { font-size: 14px; }
.fxgb { position: relative; height: 10px; background: #e9ecef; border-radius: 5px; overflow: visible; } .fxgb i { display: block; height: 100%; background: #2b8a3e; border-radius: 5px; }
.fxg.lv1 .fxgb i { background: #f59f00; } .fxg.lv2 .fxgb i { background: #e03131; }
.fxgb b { position: absolute; top: -3px; width: 2px; height: 16px; background: #f59f00; } .fxgb b.a2 { background: #e03131; }
.fxgl { font-size: 12px; color: #4b5563; margin-top: 6px; } .fxgl .r, .fxt .r { color: #e03131; } .fxgl .y { color: #b07800; }
.fxtw { display: flex; flex-wrap: wrap; gap: 12px; } .fxt { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #b8bec8; border-radius: 8px; padding: 8px 12px; }
.fxtl { display: flex; flex-direction: column; gap: 4px; background: #1d2128; padding: 6px; border-radius: 6px; } .fxl { width: 22px; height: 22px; border-radius: 50%; display: block; }
.fxfoot { margin-top: 10px; font-size: 13px; color: #4b5563; }

/* ============ 廠務設備：FFU／無塵室／FCU／PN2／UPS（2026-10-11）============ */
#nav button[data-nav="facility"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="3" width="7" height="7"/%3E%3Crect x="14" y="3" width="7" height="7"/%3E%3Crect x="3" y="14" width="7" height="7"/%3E%3Crect x="14" y="14" width="7" height="7"/%3E%3C/svg%3E'); }
.fcttop { margin-bottom: 8px; } .fcsec { margin-bottom: 14px; }
.fcbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .fcbar h3 { margin: 0; } .fcbar .sp { flex: 1; }
.fccnt { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .fccnt i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.fccnt i.run, .ffuc.run { background: #2f9e44; } .fccnt i.stop, .ffuc.stop { background: #868e96; } .fccnt i.fault, .ffuc.fault { background: #e03131; } .fccnt i.na, .ffuc.na { background: #f783ac; }
.ffugrid { display: grid; gap: 3px; background: #1d2128; padding: 6px; border-radius: 6px; }
.ffuc { aspect-ratio: 1.6; border-radius: 3px; color: #fff; font: 700 10px Consolas, monospace; display: flex; align-items: center; justify-content: center; cursor: default; }
.ffuc.none { background: transparent; } .ffuc.fault { animation: fxpulse2b 1s infinite; } @keyframes fxpulse2b { 50% { background: #ff8787; } }
.rmsvg { width: 100%; height: auto; display: block; background: #2b3038; border-radius: 6px; }
.rmsvg .rmr { fill: #e7f5ff; stroke: #1c7ed6; stroke-width: 2; } .rmsvg .rmr.bad { fill: #fff3bf; stroke: #f08c00; stroke-width: 3; }
.rmsvg text { font-size: 15px; fill: #15181d; font-family: Consolas, "Microsoft JhengHei", sans-serif; } .rmsvg .rmn { font-weight: 700; font-size: 16px; } .rmsvg .rmc { font-size: 12px; fill: #1971c2; }
.rmsvg text.rmbad { fill: #e03131; font-weight: 700; }
.fcpage table.fctbl { width: 100%; } .fctbl .num { text-align: right; font-family: Consolas, monospace; }
.fctbl input { width: 64px; font: inherit; padding: 2px 4px; } .fctbl button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 2px 10px; font: inherit; cursor: pointer; margin-right: 2px; }
.fctbl button.on { background: #2f9e44; color: #fff; border-color: #2f9e44; } .fctbl button:disabled { opacity: .45; }
.fccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.fccard { background: #fff; border: 2px solid #b8bec8; border-radius: 8px; padding: 8px 12px; } .fccard h3 { margin: 0; } .fccard.bad { background: #ffe3e3; border-color: #e03131; } .fccard.warn { background: #fff9db; border-color: #f59f00; }
.fcbig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; } .fcbig > div { background: #10151d; color: #cfd6e0; border-radius: 6px; padding: 3px 8px; }
.fcbig small { display: block; font-size: 11px; } .fcbig b { font: 700 20px Consolas, monospace; color: #51cf66; } .fcbig i { font-style: normal; font-size: 12px; margin-left: 3px; }
.fcups { font-size: 15px; margin: 4px 0; } .fccard .r { color: #e03131; } .fccard .y { color: #b07800; }
.fcbar2 { height: 8px; background: #e9ecef; border-radius: 4px; } .fcbar2 i { display: block; height: 100%; background: #2f9e44; border-radius: 4px; } .fcbar2 i.hi { background: #e03131; }
.fcfoot { margin-top: 8px; font-size: 13px; color: #4b5563; }
.rmsvg { max-height: calc(100vh - 250px); }

/* ============ 電力延伸：需量預估、發電機／ATS／UPS、節能指標（2026-10-11）============ */
.pwcard.pwwarn { background: #fff9db; border-color: #f59f00; } .pwcard.pwover { background: #ffe3e3; border-color: #e03131; animation: fxpulse2 1s infinite; }
.pwsvg .pwgen { fill: #fff; stroke: #15181d; stroke-width: 2; } .pwsvg .pwgen.run { fill: #ffe8cc; stroke: #f76707; }
.pwsvg .pwln.gen { stroke: #f76707; stroke-width: 3; } .pwsvg .pwln.off { stroke: #adb5bd; stroke-dasharray: 6 4; }
.pwsvg .pwats { fill: #fff; stroke: #15181d; stroke-width: 2; } .pwsvg .pwats.gen { fill: #ffe8cc; stroke: #f76707; }
.pwsvg .pwups { fill: #e7f5ff; stroke: #1c7ed6; stroke-width: 1.5; } .pwsvg .pwups.bad { fill: #ffe3e3; stroke: #e03131; } .pwsvg .pwups.warn { fill: #fff9db; stroke: #f59f00; }
.pwsvg .pwtn2 { font-size: 11px; fill: #15181d; text-anchor: middle; }
.effsec { background: #fff; border: 1px solid #b8bec8; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; } .effsec h3 { margin: 0 0 6px; }
.effrow { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; }
.effcard { background: #10151d; color: #cfd6e0; border-radius: 6px; padding: 4px 10px; } .effcard small { display: block; font-size: 11px; } .effcard b { font: 700 24px Consolas, monospace; color: #e9ecef; }
.effcard i { font-style: normal; font-size: 12px; margin-left: 4px; } .effcard div { font-size: 11px; color: #8a919c; } .effcard.good b { color: #51cf66; } .effcard.bad b { color: #ffa94d; }
.effchart { margin-top: 6px; } .effchart small { color: #4b5563; } .audit p { margin: 8px 0; }
.effchart svg { max-height: 230px; }

/* ============ 環保紀錄（2026-10-11）============ */
#nav button[data-nav="env"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 21c0-9 6-15 15-16-1 9-7 15-15 16z"/%3E%3Cpath d="M5 21l7-7"/%3E%3C/svg%3E'); }
.envstd { background: #e7f5ff; border: 1px solid #74c0fc; border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; font-weight: 700; }
.envgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.envcard { background: #fff; border: 2px solid #b8bec8; border-radius: 8px; padding: 8px 12px; } .envcard.bad { border-color: #e03131; } .envcard h3 { margin: 0 0 6px; }
.enveff { border-radius: 6px; padding: 4px 10px; margin-bottom: 6px; } .enveff.ok { background: #ebfbee; color: #2b8a3e; } .enveff.ng { background: #ffe3e3; color: #c92a2a; }
.enveff b { font: 700 20px Consolas, monospace; } .enveff small { display: block; color: #4b5563; font-size: 12px; }
.envt { width: 100%; border-collapse: collapse; } .envt th, .envt td { padding: 3px 6px; border-bottom: 1px solid #eef0f3; text-align: left; } .envt .num { text-align: right; font-family: Consolas, monospace; }
.envt tr.bad td, .envtbl tr.bad td { background: #ffe3e3; color: #c92a2a; font-weight: 700; }
.envfoot, .envnote { margin-top: 8px; font-size: 13px; color: #4b5563; }
.envbar { margin-bottom: 8px; } .envbar input, .envrep input, .envrep select { font: inherit; padding: 2px 6px; }
.envpage table.envtbl { width: 100%; } .envtbl .num { text-align: right; font-family: Consolas, monospace; }
.okc { color: #2b8a3e; } .ngc { color: #c92a2a; }
.envrep { display: flex; flex-direction: column; gap: 10px; } .envbox { background: #fff; border: 1px solid #b8bec8; border-radius: 8px; padding: 8px 12px; } .envbox h3 { margin: 0 0 6px; }
.envbox button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 3px 12px; font: inherit; cursor: pointer; }

/* ============ 畫面編輯器強化（2026-10-11）============ */
#edbar2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 10px; background: #e9eef6; border-bottom: 1px solid #b8bec8; font-size: 13px; }
#edbar2 .btn { padding: 3px 9px; font-size: 13px; } #edbar2 select, #edbar2 input { font: inherit; padding: 2px 4px; }
.ed2sep { width: 1px; height: 22px; background: #b8bec8; margin: 0 4px; } .ed2hint { color: #6b7280; font-size: 12px; } #ed2zoom { min-width: 44px; text-align: center; font-weight: 700; }
.ed2shield { position: fixed; inset: 0; z-index: 800; cursor: crosshair; }
#main svg .ed2rect { fill: rgba(26, 79, 196, .12); stroke: #1a4fc4; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
body.ed2pan #main svg { cursor: grab; }
.ed2dlg label { display: block; margin: 6px 0; } .ed2dlg input[type=number] { width: 80px; } .ed2note { color: #1a4fc4; font-weight: 700; }
#edbar { flex-wrap: wrap; } #edbar2 { flex-basis: 100%; margin: 4px -10px -6px; border-top: 1px solid #b8bec8; border-bottom: 0; }
#edbar2 { color: #15181d; }
#nav button.modoff { display: none !important; }

/* ============ 專案設定精靈（2026-10-11）============ */
#nav button[data-nav="project"] { --ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4z"/%3E%3Cpath d="M16.5 13v7M13 16.5h7"/%3E%3C/svg%3E'); }
.prjpage h2 { margin: 0 0 4px; } .prjhint { color: #4b5563; margin: 0 0 10px; }
.prjrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; } .prjrow > b { width: 100px; }
.prjrow input { font: inherit; padding: 4px 8px; width: 300px; } .prjrow small, .prjmsg { color: #6b7280; }
.prjrow .seg button.on { background: #1a4fc4; color: #fff; }
.prjpre button { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 3px 10px; margin: 2px; cursor: pointer; font: inherit; font-size: 13px; }
.prjgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.prjm { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; background: #fff; border: 2px solid #c4c9d2; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.prjm.on { border-color: #1a4fc4; background: #eef3ff; } .prjm small { grid-column: 2; color: #6b7280; font-size: 12px; } .prjm input { width: 18px; height: 18px; }
.prjnext { background: #fff; border: 1px solid #b8bec8; border-radius: 8px; padding: 8px 14px; margin-top: 10px; } .prjnext h3 { margin: 0 0 6px; } .prjnext .btn { margin-right: 6px; }
.prjpage table.prjtbl { width: auto; min-width: 500px; }

/* ============ 感測器檢查設定（2026-10-11）============ */
.sgwrap { display: flex; flex-direction: column; gap: 10px; } .sgnote { background: #fff0f6; border: 1px solid #f783ac; border-radius: 6px; padding: 6px 10px; }
.sgbox { background: #fff; border: 1px solid #b8bec8; border-radius: 8px; padding: 8px 12px; } .sgbox h3 { margin: 0 0 6px; } .sgbox h3 small { font-weight: 400; color: #6b7280; }
.sgbox label { display: inline-flex; align-items: center; gap: 4px; margin: 3px 12px 3px 0; } .sgbox input[type=number] { width: 72px; } .sgbox small { display: block; color: #6b7280; margin-top: 4px; }
.sgstuck { border-color: #f783ac; } .sgbig { font-weight: 700; }
table.sgtbl { width: 100%; } .sgtbl input[type=number] { width: 70px; } .sgtbl button, #sgadd { border: 1px solid #8a919c; background: #eef0f3; border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.tdpre { border: 1px solid #8a919c; background: #eef0f3; border-radius: 4px; padding: 1px 6px; margin: 2px; cursor: pointer; font-size: 12px; }

/* 2026-10-11 第19版：警報只分「警報／未確認」；即時警報頁工具列一列排完（ACK ALL 跟頁籤同一列） */
#albar .abcnt.u { background: #3b4656; color: #fff; }
.alpage .toolbar.compact { max-width: none; flex-wrap: nowrap; }

/* 2026-10-11 第19版：🧩 建立專案（還沒建立專案時蓋住整個畫面） */
.modal.pjgate { z-index: 250; background: rgba(20,30,48,.82); }
.pjcard { width: min(860px, 94vw); padding: 26px 30px; }
.pjcard h2 { margin: 0 0 8px; font-size: 26px; }
.pjlead { font-size: 17px; color: #374151; line-height: 1.6; margin: 6px 0 18px; }
.pjchoice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pjbig { text-align: left; padding: 20px; border: 2px solid #c7ced8; border-radius: 12px; background: #f8fafc; cursor: pointer; font: inherit; }
.pjbig:hover { border-color: #1e6fd9; background: #eef4ff; }
.pjbig b { display: block; font-size: 20px; margin-bottom: 8px; } .pjbig small { font-size: 14px; color: #4b5563; line-height: 1.5; }
.pjrow { display: flex; align-items: center; gap: 12px; margin: 10px 0; } .pjrow > b { width: 96px; font-size: 16px; }
.pjrow input { font: inherit; font-size: 16px; padding: 6px 10px; width: 340px; border: 1px solid #c7ced8; border-radius: 6px; }
.pjrow .seg button { font-size: 15px; padding: 6px 16px; }
.pjcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 14px 0; }
.pjcat { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 10px 12px; border: 2px solid #d5dbe3; border-radius: 10px; cursor: pointer; background: #fff; }
.pjcat.on { border-color: #1e6fd9; background: #eef4ff; }
.pjcat input { grid-row: span 2; align-self: center; width: 18px; height: 18px; } .pjcat b { font-size: 16px; } .pjcat small { color: #4b5563; font-size: 12.5px; line-height: 1.4; }
.pjbtns { display: flex; gap: 10px; margin-top: 14px; }
.pjnote { font-size: 13px; color: #6b7280; margin: 12px 0 0; }
.pjspin { width: 42px; height: 42px; border: 4px solid #d5dbe3; border-top-color: #1e6fd9; border-radius: 50%; animation: pjspin 1s linear infinite; margin: 10px auto; }
@keyframes pjspin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .pjchoice { grid-template-columns: 1fr; } .pjrow { flex-wrap: wrap; } .pjrow input { width: 100%; } }

/* ❄ 空調系統精靈 */
.modal.hvmodal { z-index: 240; }
.hvcard { width: min(1180px, 96vw); max-height: 92vh; overflow: auto; padding: 18px 22px; }
.hvhead { display: flex; align-items: center; gap: 10px; } .hvhead h3 { margin: 0; font-size: 20px; } .hvhead h3 small { font-size: 15px; color: #4b5563; font-weight: 600; }
.hvq { font-size: 16px; margin: 14px 0; }
.hvphoto { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.hvthumbs { display: flex; gap: 8px; flex-wrap: wrap; } .hvthumbs img { height: 110px; border: 1px solid #c7ced8; border-radius: 6px; } .hvthumbs.sm img { height: 54px; }
.hvnote { font-size: 13.5px; color: #8a5a00; background: #fff8e1; border: 1px solid #f0d58a; border-radius: 6px; padding: 8px 10px; }
.hvform { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; margin: 10px 0; }
.hvform fieldset { border: 1px solid #c7ced8; border-radius: 8px; padding: 6px 10px 8px; margin: 0; background: #f8fafc; }
.hvform legend { font-weight: 700; padding: 0 4px; color: #1e3a6b; }
.hvrow { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; margin: 4px 0; font-size: 14px; }
.hvrow input[type=number] { width: 64px; font: inherit; padding: 2px 4px; } .hvrow input[type=checkbox] { width: 18px; height: 18px; justify-self: end; }
.hvrow select { font: inherit; } .hvrow small { grid-column: 1 / -1; color: #6b7280; font-size: 12px; }
.hvbtns { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .hvsum { color: #4b5563; }
.hvdone p { font-size: 15.5px; line-height: 1.7; } .hvdone a { color: #1e6fd9; }
body.pjneed .modal:not(.pjgate) { z-index: 400; }   /* 建立專案畫面上：登入、確認視窗要在上面 */
body.pjneed .dutyfloat { display: none !important; }
.pjwiztip { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 260; display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid #1e6fd9; border-radius: 10px; padding: 12px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 15px; max-width: 94vw; flex-wrap: wrap; }
.pjhome { text-align: center; padding: 60px 20px 30px; } .pjhome h1 { font-size: 44px; margin: 0 0 10px; color: #1e3a6b; } .pjhome p { font-size: 18px; color: #4b5563; margin: 0; }
body:has(#hvmodal:not(.hidden)) .dutyfloat { display: none !important; }

/* ================= 🏭 全廠監控模式（第20版：P1 版面）================= */
.plpage { display: flex; flex-direction: column; height: 100%; padding: 0 !important; background: #0e141b; }
#plsub { display: none; gap: 5px; padding: 5px 10px; background: #2c3a4f; flex-wrap: wrap; }
#plsub button { font: inherit; font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: 5px; border: 1px solid #4a5a70; background: #3b4b62; color: #dbe4ee; cursor: pointer; }
#plsub button.on { background: #1e6fd9; color: #fff; }
#plsub .plsubone { font-size: 18px; font-weight: 700; padding: 4px 12px; color: #aeb9c8; display: inline-flex; align-items: center; }   /* 單頁系統：顯示系統名、保留子頁列高度 */
#plantsvg { display: block; flex: 1; width: 100%; min-height: 0; background: #0e141b; --plant-ink: #e6ebf1; font-family: "Microsoft JhengHei", "Noto Sans CJK TC", "PingFang TC", sans-serif; }
#plantsvg .spin { transform-box: fill-box; transform-origin: center; animation: plsp 8s linear infinite; }
#plantsvg .spinS { transform-box: fill-box; transform-origin: center; animation: plsp 16s linear infinite; }
@keyframes plsp { to { transform: rotate(360deg); } }
#plantsvg .flow { stroke-dasharray: 4 22; animation: plfl 1.6s linear infinite; stroke: #fff; stroke-opacity: .95; stroke-width: 3; fill: none; stroke-linecap: round; }
@keyframes plfl { to { stroke-dashoffset: -26; } }
#plantsvg .clk { cursor: pointer; } #plantsvg .clk:hover { filter: brightness(1.08) drop-shadow(0 0 3px #1e6fd9); }
#plantsvg .agit { transform-box: fill-box; transform-origin: center; animation: plag 1.8s ease-in-out infinite; } @keyframes plag { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
#plantsvg .blink { animation: plbl 1s steps(2) infinite; } @keyframes plbl { 50% { opacity: .25; } }
#plantsvg .flick { transform-box: fill-box; transform-origin: bottom; animation: plfk .5s ease-in-out infinite alternate; } @keyframes plfk { to { transform: scaleY(.8) scaleX(1.08); } }
#plantsvg .ductflow { stroke-dasharray: 2 30; animation: plfl 1.4s linear infinite; stroke: #fff; stroke-opacity: .8; stroke-width: 3; fill: none; }
#plmenu { position: fixed; display: none; background: #fff; border: 1px solid #adb5bd; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.25); font-size: 15px; z-index: 950; min-width: 200px; color: #212529; }
#plmenu div { padding: 7px 14px; cursor: pointer; } #plmenu div:hover { background: #e7f5ff; } #plmenu .hd { cursor: default; background: #f1f3f5; font-weight: 700; } #plmenu .hd small { font-weight: 400; color: #6c757d; }
#plinfo { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; align-items: center; justify-content: center; z-index: 940; }
#plinfo .card { background: #f8f9fa; color: #212529; border-radius: 10px; width: 600px; max-height: 90vh; overflow: auto; padding: 16px 20px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
#plinfo h3 { margin: 0 0 6px; font-size: 20px; display: flex; align-items: center; gap: 10px; }
#plinfo .mb { font-size: 13px; font-weight: 400; padding: 2px 8px; border-radius: 9px; background: #d3f9d8; color: #2b8a3e; }
#plinfo table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
#plinfo td { padding: 4px 6px; border-bottom: 1px solid #e9ecef; } #plinfo td.v { text-align: right; font-weight: 700; font-family: Consolas, monospace; }
#plinfo td.t { width: 28px; text-align: center; } #plinfo td.t b { cursor: pointer; color: #1e6fd9; } #plinfo .sec { background: #e9ecef; font-weight: 700; color: #495057; }
#plinfo .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#plinfo button { font: inherit; padding: 6px 14px; border-radius: 6px; border: 1px solid #adb5bd; background: #fff; cursor: pointer; font-weight: 700; color: #212529; }
#plinfo button.on { background: #1e6fd9; color: #fff; border-color: #1e6fd9; } #plinfo button:disabled { opacity: .4; cursor: not-allowed; }
#plinfo .fp .fr { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 15px; flex-wrap: wrap; } #plinfo .fp .fr > span { width: 84px; font-weight: 700; color: #495057; } #plinfo .fp i { font-size: 13px; color: #868e96; }
#plinfo .lp { padding: 4px 12px; border-radius: 4px; background: #dee2e6; color: #868e96; } #plinfo .lp.g { background: #40c057; color: #fff; } #plinfo .lp.r { background: #e03131; color: #fff; } #plinfo .lp.y { background: #ffd43b; color: #5c3c00; }
#plinfo input { font: inherit; padding: 4px 8px; width: 140px; }
#plinfo .plql { max-height: 320px; overflow: auto; border: 1px solid #dee2e6; border-radius: 6px; width: 100%; background: #fff; }
#plinfo .plql div { padding: 5px 10px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f1f3f5; } #plinfo .plql div:hover { background: #e7f5ff; }
/* 右邊系統選單 */
body.plmode #nav { overflow-y: auto; min-height: 0; }   /* 選單項目多時可捲動，不會把最後一項切掉 */
body.plmode #nav > button[data-nav] { display: none !important; }
body.plmode #nav.plall > button[data-nav]:not(.modoff):not([hidden]) { display: flex !important; }
#plnav { display: flex; flex-direction: column; gap: 5px; padding: 6px 4px; }
/* 第24版：淺色乾淨風（我們自己的風格） */
#plnav button { position: relative; flex: 0 0 auto; min-height: 38px; font: inherit; font-size: 16px; padding: 4px 10px 4px 14px; border: 1px solid #d0d9e4; border-left: 5px solid #c5d0dc; background: #ffffff; color: #1f2d3d; cursor: pointer; text-align: left; border-radius: 8px; box-shadow: 0 1px 2px rgba(31,45,61,.06); transition: background .15s, border-color .15s; }
#plnav button:hover { background: #f1f6fd; border-color: #a9c3e6; }
#plnav button.a2 { border-left-color: #f76707; background: #fff4e6; color: #a63c00; font-weight: 700; } #plnav button.a1 { border-left-color: #f59f00; background: #fffbea; }
#plnav button.on { background: #1971c2; border-color: #1971c2; border-left-color: #0b4f8f; color: #fff; font-weight: 700; outline: none; }
#plnav button.plmore { background: transparent; color: #5c6b7a; border: 1px dashed #b8c4d2; border-left: 1px dashed #b8c4d2; font-size: 15px; text-align: center; box-shadow: none; }
#plfbar { display: none; }
body.plmode #app.lay-side { grid-template-rows: 52px auto 1fr auto auto; grid-template-areas: "top top" "abt nav" "main nav" "abb nav" "fbar nav"; }
body.plmode #app.lay-side.lay-left { grid-template-areas: "top top" "nav abt" "nav main" "nav abb" "nav fbar"; }
body.plmode #app.lay-side #plfbar { grid-area: fbar; display: flex; gap: 6px; padding: 6px 8px; background: #0e141b; border-top: 1px solid #27323f; }
#plfbar button { display: flex; align-items: center; gap: 6px; font: inherit; font-size: 15px; font-weight: 600; color: #1f2d3d; background: #f3f6fa; border: 1px solid #d0d9e4; border-radius: 8px; padding: 6px 14px; cursor: pointer; line-height: 1.15; }
#plfbar button:hover { background: #e7f0fb; border-color: #1971c2; color: #1971c2; }
#plfbar button .ic { font-size: 16px; }
#plfbar .sp { flex: 1; }
#plnav button::before { display: none !important; content: none; }

/* ================= 📱 手機版（2026-10-17，寬度 ≤ 820px；桌機、平板橫放不受影響）=================
   整頁不左右捲；系統選單＝左上 ☰ 抽屜；子頁籤、下方功能鈕可左右滑；警報列收成一行（點一下展開）；
   架構圖縮到螢幕寬（可兩指放大，或按「🔍 放大」）；視窗置中、內容太長在視窗裡捲；AI 小幫手改成下方按鈕 */
#mnavbtn, #mnavmask, #mzoom, #plfbar button[data-m="duty"] { display: none; }
@media (max-width: 820px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  #app, #app.lay-side, #app.lay-side.lay-left, body.plmode #app.lay-side, body.plmode #app.lay-side.lay-left {
    display: grid; width: 100vw; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "top" "abt" "main" "abb" "fbar"; }
  #app > * { min-width: 0; }
  #app #top { grid-area: top; } #app #main { grid-area: main; min-height: 0; } #app #albar { grid-area: abb; } #app.lay-ab-top #albar { grid-area: abt; }
  body.plmode #app #plfbar { grid-area: fbar; }
  /* 上方標題列：第一行 ☰＋標題＋警報鈴，第二行其他小按鈕 */
  #top { flex-wrap: wrap; gap: 4px 6px; padding: 4px 8px; min-height: 0; height: auto; }
  #top .right { display: contents; }
  #top .brand, #clock { display: none; }
  #mnavbtn { display: block; order: 0; flex: 0 0 40px; height: 36px; font-size: 22px; line-height: 1; color: #fff; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.55); border-radius: 8px; cursor: pointer; padding: 0; }
  #title { order: 1; flex: 1 1 calc(100% - 110px); font-size: 18px; text-align: left; }
  #bell { order: 2; width: 40px; height: 36px; flex: 0 0 40px; }
  #top .right > :not(#bell) { order: 3; }
  #top .themebtn, #top .voicebtn, #top .askbtn { width: 36px; height: 30px; font-size: 15px; }
  #top .editbtn { padding: 4px 8px; font-size: 13px; }
  #top .comm { font-size: 12px; padding: 2px 8px; }
  #top .user { font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
  html[data-theme="google"] #mnavbtn { color: #1a73e8; background: #fff; border-color: #dadce0; }
  /* 系統選單 → 抽屜 */
  #app #nav, #app.lay-side #nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 82vw); z-index: 960; display: flex !important; flex-direction: column; gap: 6px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; background: #2b2f36; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 18px rgba(0,0,0,.4); grid-area: auto; }
  body.mnavopen #app #nav { transform: none; }
  #app #nav > button { flex: 0 0 46px; font-size: 16px; justify-content: flex-start; padding: 0 12px; }
  #app #nav > button[hidden], #app #nav > button.hidden { display: none; }
  #plnav { flex-direction: column; flex: 0 0 auto; padding: 0; }
  #plnav button { min-height: 44px; font-size: 16px; }
  #mnavmask { position: fixed; inset: 0; z-index: 955; background: rgba(0,0,0,.4); }
  body.mnavopen #mnavmask { display: block; }
  /* 子頁籤：一行、左右滑 */
  #plsub { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 5px 8px; position: sticky; left: 0; top: 0; z-index: 2; flex: 0 0 auto; }
  #plsub::-webkit-scrollbar { display: none; }
  #plsub button { flex: 0 0 auto; white-space: nowrap; font-size: 14px; padding: 5px 10px; }
  /* 架構圖：縮到螢幕寬、靠上；🔍 放大＝兩倍寬，在圖框內上下左右滑 */
  #main > .page { padding: 10px; }
  #main > .page.plpage { padding: 0 !important; }
  /* 手機：圖高度填滿圖框（垂直剛好放得下、不上下捲），寬度依 viewBox 比例 → 只需左右滑的大圖，字夠大可讀；
     垂直不溢出 → 整張圖都在可視範圍內（端點碰觸判斷正常）；#main overflow:hidden + .plpage overflow:auto → 捲動只在圖框內、整頁不會左右捲 */
  #plantsvg { flex: 0 0 auto; align-self: stretch; width: 100%; max-width: 100%; height: auto; min-height: 0; margin: 0; }   /* 手機：圖縮到螢幕寬、整頁不左右捲；高度依 viewBox 比例，太高在圖框內上下捲（🔍 放大看細節）*/
  #plsub { align-self: flex-start; width: 100vw; max-width: 100vw; box-sizing: border-box; }
  body.mz2 #plantsvg { flex: 0 0 auto; width: auto; max-width: none; height: 1200px; }   /* 🔍 放大：放大看細節，可上下左右滑 */
  body.plmode:has(.plpage) #mzoom { display: block; position: fixed; right: 10px; z-index: 50; bottom: calc(var(--mfb, 120px) + 8px);
    font: inherit; font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: 20px; border: 1px solid #1971c2; background: rgba(255,255,255,.94); color: #1971c2; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
  /* 即時警報列：平常一行（數量），點一下展開 */
  #albar .abhead { cursor: default; gap: 6px; padding: 5px 8px; flex-wrap: nowrap; white-space: nowrap; }
  #albar .abhead button { padding: 3px 8px; font-size: 13px; }
  #albar .abhead button[data-k="all"] { display: none; }   /* 手機：ACK ALL 收起（每列已有 ACK，「即時警報頁」內也能全部確認），讓出空間給「即時警報頁」鈕 */
  #albar .abhead button[data-k="page"] { display: inline-block; flex: 0 0 auto; }   /* 手機：「即時警報頁」鈕顯示、不被右緣切掉 */
  #albar { max-height: 46vh; overflow-y: auto; }   /* 手機：預設就顯示固定 3～4 行高的警報列（不再收成一行），多的在列內上下捲 */
  #albar .abrow { min-height: 38px; }   /* 手機：每列（含空的填充列）固定一格高，整條維持 3～4 行固定高度，不會變成一行 */
  #albar .abrow { grid-template-columns: 6px minmax(0, 1fr) auto; grid-auto-rows: auto; height: auto; gap: 1px 8px; padding: 5px 8px; white-space: normal; font-size: 13px; }
  #albar .abrow > .bar { grid-row: 1 / span 3; grid-column: 1; height: auto; align-self: stretch; }
  #albar .abrow > span:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 12px; opacity: .85; }
  #albar .abrow > span:nth-child(3) { grid-column: 2; grid-row: 2; }
  #albar .abrow > span:nth-child(4) { grid-column: 2 / span 2; grid-row: 3; white-space: normal; }
  #albar .abrow > span:nth-child(5) { grid-column: 3; grid-row: 1; }
  #albar .abrow > span:nth-child(6) { grid-column: 3; grid-row: 2; }
  /* 下方功能鈕：圖示＋短字，一排，可左右滑 */
  body.plmode #app.lay-side #plfbar, body.plmode #app #plfbar { display: flex; flex-wrap: wrap; justify-content: center; overflow-x: hidden; gap: 4px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); background: #0e141b; border-top: 1px solid #27323f; }   /* 手機：底部功能列換行排好、整列不超出螢幕寬、深色與滿版一致 */
  #plfbar::-webkit-scrollbar { display: none; }
  #plfbar button { flex: 1 0 auto; flex-direction: column; justify-content: center; gap: 1px; min-width: 64px; max-width: 30%; padding: 4px 4px; font-size: 14px; white-space: nowrap; }
  #plfbar button .ic { font-size: 18px; line-height: 1.1; }
  #plfbar .sp { display: none; }
  #plfbar button[data-m="duty"] { display: flex; }
  /* 彈出視窗：在畫面內置中，內容太長在視窗裡捲 */
  #plinfo { padding: 8px; }
  #plinfo .card { width: auto; max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); padding: 12px 14px; -webkit-overflow-scrolling: touch; }
  #plinfo h3 { font-size: 17px; flex-wrap: wrap; gap: 4px 8px; }
  #plinfo .fp .fr { gap: 6px; font-size: 14px; }
  #plinfo .fp .fr > span { width: 70px; }
  #plinfo .btns { flex-wrap: wrap; }
  #plinfo input { max-width: 100%; }
  #plmenu { max-width: calc(100vw - 16px); }
  .modal { padding: 8px; }
  .modal > .card, .modal .card { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); overflow: auto; }
  .modal .card { min-width: 0; }
  .loginmodal .lwrap2 { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  .popup { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); overflow: auto; }
  /* 其他功能頁（即時警報、歷史曲線…）：工具列換行、按鈕字不直排、寬表格在框內左右滑 */
  #main .toolbar, #main .utpbar, .alfoot { flex-wrap: wrap; row-gap: 6px; }
  #main .toolbar > button, #main .toolbar .btn, #main .utpbar > button, #main .utpbar > span, .altabs button, #main .page h2 { white-space: nowrap; }
  .altabs { flex-wrap: wrap; }
  .alpage .alwrap { overflow: auto; -webkit-overflow-scrolling: touch; }
  .alfoot .allegend, .alfoot .alhint { position: static; white-space: normal; }
  .trendmain { flex-direction: column; }
  .trendmain .ttree { width: auto; max-height: 32vh; flex: 0 0 auto; }
  .trendmain .trendcol { min-width: 0; min-height: 60vh; flex: 1 0 auto; }
  .trendcol .toolbar input { max-width: 100%; }
  .trendcol .trendwrap { flex-direction: column; min-height: 55vh; } .trendcol .tcanvaswrap { flex: 1 1 auto; min-height: 260px; } .trendcol .tlegend { flex: 0 0 auto; width: auto; max-height: 28vh; overflow: auto; }
  /* 左右翻頁箭頭縮小 */
  .sidenav { width: 30px; height: 64px; } .sidenav svg { width: 22px; height: 22px; }
  /* AI 小幫手：手機不浮在畫面上（頭像圖缺時也不會出現破圖），改按下方「🤖 小幫手」打開 */
  #dutyfloat, .dutyfloat { display: none !important; }
  body.mduty #dutyfloat { display: flex !important; position: fixed; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(var(--mfb, 60px) + 6px) !important;
    width: auto !important; height: auto !important; max-height: 55dvh; background: #10161f; border: 1px solid #26313f; box-shadow: 0 4px 18px rgba(0,0,0,.5); z-index: 58; }
  body.mduty #dutyfloat .dfavwrap { display: none; }
  body.mduty #dutyfloat .dfhd { background: linear-gradient(#182231, #121a24); padding: 8px 10px; cursor: default; }
  body.mduty #dutyfloat .dftitle, body.mduty #dutyfloat .dfactions { display: flex; }
  body.mduty #dutyfloat .dfmeta { display: block; } body.mduty #dutyfloat .dfbody { display: flex; }
}

/* ===== AI 小幫手不蓋右側選單（2026-10-20 測試部）=====
   註：全圖控的「製程 / 功能頁」內容區深色化，牽涉各功能頁大量為淺底設計的元件（分頁器、動作鈕、註腳、圖例、頁標題）
   與製程圖 SVG 內文字色（屬畫面 / plant.js 擁有者），需逐元件改色後整體驗證，非外框層可安全完成；
   外框層能安全深色化的：上方標題列、右側選單、即時警報列（本來就深色）、底部功能列 plfbar、全廠監控外框 .plpage 皆已深色。 */
/* AI 小幫手：選單在左 / 下時靠右停放即可（不會蓋到選單）；選單在右（預設）時用 .dutyfloat 的 right 偏移避開 */
body:has(#app.lay-left) .dutyfloat, body:has(#app:not(.lay-side)) .dutyfloat { right: 16px; }
body:has(#app.lay-left) .dutyfloat.dfaway, body:has(#app:not(.lay-side)) .dutyfloat.dfaway { right: 16px !important; }

/* 字型標準（測試部 qa/字型標準.md，2026-10-20）：config display.font_std=true 時外框字只用 28／22／24／18／16／14px（先給穩懋專案用，之後可全系統打開） */
html.fstd #top .brand { font-size: 18px; }
html.fstd #title { font-size: 28px; }
html.fstd #top .right .themebtn, html.fstd #top .right .fsb, html.fstd #top .right .askbtn, html.fstd #top .right .voicebtn { font-size: 18px; }
html.fstd #top .right .fsb.fscaret { font-size: 14px; }
html.fstd #albar .abhead b { font-size: 18px; }
html.fstd #albar .abcnt, html.fstd #albar .abrow button { font-size: 14px; }
html.fstd #albar .abrow, html.fstd #albar .abnone { font-size: 16px; }
html.fstd .dutyfloat .dfbtn, html.fstd .dutyfloat .dfmeta, html.fstd .dutyfloat .dfmeta .dutystate, html.fstd .dutyfloat .dutyitem { font-size: 14px; }
html.fstd #plsub button, html.fstd #plfbar button { font-size: 18px; }   /* 子頁分頁、底部功能列：標籤級 18（併入六級，去掉 15px） */

/* 手機版直式單欄（畫面檔有 mob 時，≤820px 顯示清單；字型標準：標題 20、數值 22、標籤 16、單位 14） */
#main > .mobv { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 24px; color: #e6edf3; font-size: 16px; background: #0b1320; box-sizing: border-box; }
.mobv h2 { font-size: 20px; margin: 2px 0 8px; }
.mobv .mmenu { width: 100%; font-size: 16px; padding: 8px; background: #1b2d45; color: #e6edf3; border: 1px solid #2f4a6e; border-radius: 6px; font-family: inherit; }
.mobv .mlinks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mobv .mlinks button, .mobv .mfullbtn { font-size: 16px; padding: 6px 12px; background: #1b2d45; color: #e6edf3; border: 1px solid #2f4a6e; border-radius: 6px; font-family: inherit; }
.mobv .mfullbtn { width: 100%; margin-top: 12px; padding: 10px; }
.mobv .mimg { width: 100%; height: auto; display: block; margin: 8px 0; border-radius: 6px; }
.mobv .msec { background: #13243a; border: 1px solid #24467a; border-radius: 8px; margin: 10px 0; padding: 4px 10px; }
.mobv .msec h3 { font-size: 16px; color: #74c0fc; margin: 6px 0 2px; overflow-wrap: anywhere; }
.mobv .mr { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid #1f3350; }
.mobv .msec h3 + .mr { border-top: 0; }
.mobv .mr .mn { flex: 1; min-width: 0; font-size: 16px; color: #cfd8e3; overflow-wrap: anywhere; }
.mobv .mr .mv { font-size: 22px; font-weight: 700; color: #5cf08f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mobv .mr .mv[data-k="s"], .mobv .mr .mv[data-k="l"] { font-size: 16px; color: #8b9bb0; } .mobv .mr .mv.on[data-k="s"] { color: #5cf08f; }
.mobv .mr .mu { font-size: 14px; color: #8b9bb0; min-width: 34px; }
.mobv .mobfull { display: none; margin-top: 10px; } .mobv .mobfull.on { display: block; }
.mobv .mobfull svg { width: 100%; height: auto; display: block; background: #0b1320; }
@media (max-width: 820px) { html.fstd #title { font-size: 20px; } html.fstd #top .brand { font-size: 16px; } }
html.fstd .sidenav { opacity: .12; background: transparent; } html.fstd .sidenav:hover { opacity: 1; background: rgba(23, 63, 158, .82); }   /* 客戶專案頁自己有選單：左右翻頁箭頭平常幾乎透明，滑鼠移過去才顯示，不蓋到圖上的字 */

/* ===FSTD-FONT-SNAP (generated)=== */
/* 功能頁／自繪頁字級吸附六級（14/16/18/22/24/28），min 14px；只動 font-size，不動版面盒子 */
/* -> 14px */
html.fstd #bellcount { font-size: 14px !important; }  /* was 11 */
html.fstd .popup.popsel .ph .ppin { font-size: 14px !important; }  /* was 13 */
html.fstd .edver { font-size: 14px !important; }  /* was 13 */
html.fstd .edver .btn { font-size: 14px !important; }  /* was 12 */
html.fstd #edcolorpop .cpt { font-size: 14px !important; }  /* was 12 */
html.fstd .uthint { font-size: 14px !important; }  /* was 13 */
html.fstd .uvstate { font-size: 14px !important; }  /* was 13 */
html.fstd .utlv { font-size: 14px !important; }  /* was 13 */
html.fstd .uadd label { font-size: 14px !important; }  /* was 13 */
html.fstd .lhint { font-size: 14px !important; }  /* was 13 */
html.fstd .tlunit { font-size: 14px !important; }  /* was 13 */
html.fstd .homever { font-size: 14px !important; }  /* was 13 */
html.fstd .ffwarn { font-size: 14px !important; }  /* was 13 */
html.fstd .ffkl { font-size: 14px !important; }  /* was 13 */
html.fstd .ffku { font-size: 14px !important; }  /* was 12 */
html.fstd .fpstate { font-size: 14px !important; }  /* was 13 */
html.fstd .fpnorun, html.fstd .ffnopump { font-size: 14px !important; }  /* was 13 */
html.fstd .vchint { font-size: 14px !important; }  /* was 13 */
html.fstd .dutyfloat .dfbtn { font-size: 14px !important; }  /* was 13 */
html.fstd .dutyfloat .dfmeta { font-size: 14px !important; }  /* was 13 */
html.fstd .dutyfloat .dfmeta .dutystate { font-size: 14px !important; }  /* was 13 */
html.fstd .dutyfloat .dutyitem { font-size: 14px !important; }  /* was 13 */
html.fstd .btn.sm { font-size: 14px !important; }  /* was 11 */
html.fstd .dutycfgav .avpick { font-size: 14px !important; }  /* was 12 */
html.fstd .dutyrotrow { font-size: 14px !important; }  /* was 13 */
html.fstd .popup .ronote { font-size: 14px !important; }  /* was 13 */
html.fstd .popup.ro .pb .ronote button.ronlogin { font-size: 14px !important; }  /* was 13 */
html.fstd .fpsuphint { font-size: 14px !important; }  /* was 12 */
html.fstd .ffal { font-size: 14px !important; }  /* was 11 */
html.fstd .ffsp { font-size: 14px !important; }  /* was 11 */
html.fstd .lfhint { font-size: 14px !important; }  /* was 12 */
html.fstd #edtree .etph small { font-size: 14px !important; }  /* was 13 */
html.fstd #edtree .etmin { font-size: 14px !important; }  /* was 12 */
html.fstd #edtree .etgrp small { font-size: 14px !important; }  /* was 12 */
html.fstd #edtree .ettw { font-size: 14px !important; }  /* was 12 */
html.fstd #edtree .etty { font-size: 14px !important; }  /* was 13 */
html.fstd #edtree .etgb { font-size: 14px !important; }  /* was 12 */
html.fstd .edmenu > .edmhd { font-size: 14px !important; }  /* was 13 */
html.fstd #edpanel .edph small { font-size: 14px !important; }  /* was 13 */
html.fstd #edpanel .edsec .ettw { font-size: 14px !important; }  /* was 12 */
html.fstd #edpanel .edrow > span:first-child i, html.fstd #edpanel .edrow > b i { font-size: 14px !important; }  /* was 11 */
html.fstd #edpanel .edcw .btn { font-size: 14px !important; }  /* was 13 */
html.fstd #edpanel .edrow.ednote { font-size: 14px !important; }  /* was 12.5 */
html.fstd .themepop .thnote { font-size: 14px !important; }  /* was 12.5 */
html.fstd #demobar .dbnote { font-size: 14px !important; }  /* was 13 */
html.fstd .democards h3 small { font-size: 14px !important; }  /* was 13 */
html.fstd .democards .dcard small { font-size: 14px !important; }  /* was 12 */
html.fstd .democards .dcard em { font-size: 14px !important; }  /* was 11 */
html.fstd .demopop .dplim { font-size: 14px !important; }  /* was 13 */
html.fstd .demopop .dpnote { font-size: 14px !important; }  /* was 11 */
html.fstd .fflf { font-size: 14px !important; }  /* was 13 */
html.fstd .fflf .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .ffopt { font-size: 14px !important; }  /* was 13 */
html.fstd .ffopt .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .fpot { font-size: 14px !important; }  /* was 13 */
html.fstd .toolbar .allegend { font-size: 14px !important; }  /* was 13 */
html.fstd .toolbar .alhint { font-size: 14px !important; }  /* was 13 */
html.fstd .altbl th.sorted::after { font-size: 14px !important; }  /* was 11 */
html.fstd .almenu .amt { font-size: 14px !important; }  /* was 12 */
html.fstd .trendpage .tzhint { font-size: 14px !important; }  /* was 13 */
html.fstd .archcpu .acsub { font-size: 14px !important; }  /* was 13 */
html.fstd .aled { font-size: 14px !important; }  /* was 13 */
html.fstd .archbus span { font-size: 14px !important; }  /* was 13 */
html.fstd .astsub { font-size: 14px !important; }  /* was 13 */
html.fstd .aim { font-size: 14px !important; }  /* was 12 */
html.fstd .asrv { font-size: 14px !important; }  /* was 11 */
html.fstd .amod .amtype { font-size: 14px !important; }  /* was 12 */
html.fstd .amod .amid { font-size: 14px !important; }  /* was 11 */
html.fstd .amod .amst { font-size: 14px !important; }  /* was 12 */
html.fstd .amod.na .amst::after { font-size: 14px !important; }  /* was 11 */
html.fstd .archnote { font-size: 14px !important; }  /* was 13 */
html.fstd .astsum { font-size: 14px !important; }  /* was 13 */
html.fstd .astchk { font-size: 14px !important; }  /* was 12 */
html.fstd .amod .amaddr { font-size: 14px !important; }  /* was 10.5 */
html.fstd .aschips button { font-size: 14px !important; }  /* was 13 */
html.fstd .aschips #archcnt { font-size: 14px !important; }  /* was 13 */
html.fstd .astbl table { font-size: 14px !important; }  /* was 13 */
html.fstd .astbl th { font-size: 14px !important; }  /* was 12 */
html.fstd .astbl small { font-size: 14px !important; }  /* was 11.5 */
html.fstd .astbl .asm { font-size: 14px !important; }  /* was 11 */
html.fstd .ashint { font-size: 14px !important; }  /* was 12 */
html.fstd .archtbl .adesc { font-size: 14px !important; }  /* was 12 */
html.fstd .apnav .apcnt { font-size: 14px !important; }  /* was 13 */
html.fstd .apbtns .aptip { font-size: 14px !important; }  /* was 12 */
html.fstd .cmtabnote { font-size: 14px !important; }  /* was 13 */
html.fstd .cmnode small { font-size: 14px !important; }  /* was 12 */
html.fstd .cmsim { font-size: 14px !important; }  /* was 13 */
html.fstd .cmsim select { font-size: 14px !important; }  /* was 13 */
html.fstd .cmdirty { font-size: 14px !important; }  /* was 13 */
html.fstd .cmfv small { font-size: 14px !important; }  /* was 12 */
html.fstd .cmsimtag { font-size: 14px !important; }  /* was 12 */
html.fstd .cmhint { font-size: 14px !important; }  /* was 13 */
html.fstd .cmptbl .utable { font-size: 14px !important; }  /* was 13.5 */
html.fstd .cmptbl td.small { font-size: 14px !important; }  /* was 12 */
html.fstd .tdgrid label { font-size: 14px !important; }  /* was 13 */
html.fstd .tdgrid small { font-size: 14px !important; }  /* was 12 */
html.fstd .tdnote { font-size: 14px !important; }  /* was 13 */
html.fstd .tdbhead { font-size: 14px !important; }  /* was 13 */
html.fstd .tdbr { font-size: 14px !important; }  /* was 13 */
html.fstd .tdbsrc { font-size: 14px !important; }  /* was 12 */
html.fstd .tdbfoot { font-size: 14px !important; }  /* was 12 */
html.fstd .sb { font-size: 14px !important; }  /* was 12.5 */
html.fstd .sbknob .kl, html.fstd .sbknob .kr { font-size: 14px !important; }  /* was 8 */
html.fstd .tlnote { font-size: 14px !important; }  /* was 13 */
html.fstd .tlchip { font-size: 14px !important; }  /* was 13.5 */
html.fstd .tlhint { font-size: 14px !important; }  /* was 12.5 */
html.fstd .tltbl .utable { font-size: 14px !important; }  /* was 13.5 */
html.fstd .tltbl td.why { font-size: 14px !important; }  /* was 12.5 */
html.fstd .tltbl td.small { font-size: 14px !important; }  /* was 12 */
html.fstd .tltbl input.tbval { font-size: 14px !important; }  /* was 13.5 */
html.fstd .tlfoot { font-size: 14px !important; }  /* was 12.5 */
html.fstd .tlrule { font-size: 14px !important; }  /* was 13.5 */
html.fstd .tlrule textarea { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plflt { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plrow { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plhelp { font-size: 14px !important; }  /* was 14.5 */
html.fstd .plhead .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .plcond { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plstl summary { font-size: 14px !important; }  /* was 12.5 */
html.fstd .plstl pre { font-size: 14px !important; }  /* was 12 */
html.fstd .plin { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plsrc { font-size: 14px !important; }  /* was 13 */
html.fstd .plcode { font-size: 14px !important; }  /* was 12.5 */
html.fstd .plmatch { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plmod { font-size: 14px !important; }  /* was 11.5 */
html.fstd .plwire { font-size: 14px !important; }  /* was 13.5 */
html.fstd .smtag { font-size: 14px !important; }  /* was 11 */
html.fstd .smact .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .smlay { font-size: 14px !important; }  /* was 11.5 */
html.fstd .smlay text { font-size: 14px !important; }  /* was 13 */
html.fstd .smno { font-size: 14px !important; }  /* was 13 */
html.fstd .smrb { font-size: 14px !important; }  /* was 13.5 */
html.fstd .smrb select, html.fstd .smrb input { font-size: 14px !important; }  /* was 13.5 */
html.fstd .smph span { font-size: 14px !important; }  /* was 13.5 */
html.fstd .smwarn { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plcard { font-size: 14px !important; }  /* was 13.5 */
html.fstd .plcard .plct { font-size: 14px !important; }  /* was 12.5 */
html.fstd .plmod .pladdr { font-size: 14px !important; }  /* was 11 */
html.fstd .nfsim { font-size: 14px !important; }  /* was 13.5 */
html.fstd .nff { font-size: 14px !important; }  /* was 13 */
html.fstd .nff input, html.fstd .nff select { font-size: 14px !important; }  /* was 14.5 */
html.fstd .nff small { font-size: 14px !important; }  /* was 11.5 */
html.fstd .nfres { font-size: 14px !important; }  /* was 13.5 */
html.fstd .nfhelp { font-size: 14px !important; }  /* was 12.5 */
html.fstd .nfpre { font-size: 14px !important; }  /* was 13 */
html.fstd .btn.sm { font-size: 14px !important; }  /* was 12.5 */
html.fstd .nftrace { font-size: 14px !important; }  /* was 11.5 */
html.fstd .nfsample { font-size: 14px !important; }  /* was 13 */
html.fstd .nfnote { font-size: 14px !important; }  /* was 13 */
html.fstd .nftbl input:not([type=checkbox]) { font-size: 14px !important; }  /* was 13.5 */
html.fstd .nfchs label { font-size: 14px !important; }  /* was 13 */
html.fstd .cmopcres { font-size: 14px !important; }  /* was 13 */
html.fstd .opcdlg label { font-size: 14px !important; }  /* was 13 */
html.fstd .opcdlg input, html.fstd .opcdlg select { font-size: 14px !important; }  /* was 14.5 */
html.fstd .ifsum { font-size: 14px !important; }  /* was 13.5 */
html.fstd .ifcfg { font-size: 14px !important; }  /* was 13.5 */
html.fstd .ifcfg input, html.fstd .ifcfg select { font-size: 14px !important; }  /* was 13.5 */
html.fstd .cxlim label { font-size: 14px !important; }  /* was 13 */
html.fstd .cxwait { font-size: 14px !important; }  /* was 13.5 */
html.fstd .cxv span { font-size: 14px !important; }  /* was 14.5 */
html.fstd .cxfix code, html.fstd .cxf code { font-size: 14px !important; }  /* was 13 */
html.fstd .cxrefs { font-size: 14px !important; }  /* was 13 */
html.fstd .cxcat { font-size: 14px !important; }  /* was 13 */
html.fstd .cxf i { font-size: 14px !important; }  /* was 11 */
html.fstd .cxf span, html.fstd .cxt span { font-size: 14px !important; }  /* was 12.5 */
html.fstd .cxf code { font-size: 14px !important; }  /* was 12 */
html.fstd .cxkb { font-size: 14px !important; }  /* was 11.5 */
html.fstd .cxrwv { font-size: 14px !important; }  /* was 12.5 */
html.fstd .cxrwt { font-size: 14px !important; }  /* was 12.5 */
html.fstd .obbar label.chk { font-size: 14px !important; }  /* was 13.5 */
html.fstd .obr { font-size: 14px !important; }  /* was 13.5 */
html.fstd .altabs button b { font-size: 14px !important; }  /* was 12.5 */
html.fstd .alnote { font-size: 14px !important; }  /* was 12 */
html.fstd .aigrid small { font-size: 14px !important; }  /* was 12.5 */
html.fstd .aitbl { font-size: 14px !important; }  /* was 13.5 */
html.fstd .numpad .npu { font-size: 14px !important; }  /* was 11 */
html.fstd .numpad .npmsg { font-size: 14px !important; }  /* was 12.5 */
html.fstd .bacres .utable { font-size: 14px !important; }  /* was 13.5 */
html.fstd .botbl { font-size: 14px !important; }  /* was 13 */
html.fstd .smpl td small { font-size: 14px !important; }  /* was 12.5 */
html.fstd .smsys button em { font-size: 14px !important; }  /* was 13 */
html.fstd .satag { font-size: 14px !important; }  /* was 12.5 */
html.fstd .smcn { font-size: 14px !important; }  /* was 13 */
html.fstd .smtdgrid h3 small { font-size: 14px !important; }  /* was 13.5 */
html.fstd .smrng i { font-size: 14px !important; }  /* was 12.5 */
html.fstd .smst td small { font-size: 14px !important; }  /* was 11 */
html.fstd .smchart .a { font-size: 14px !important; }  /* was 12 */
html.fstd .smchart .x { font-size: 14px !important; }  /* was 12 */
html.fstd .smchart .v { font-size: 14px !important; }  /* was 11.5 */
html.fstd .smchart .bt { font-size: 14px !important; }  /* was 12.5 */
html.fstd .askh small { font-size: 14px !important; }  /* was 13 */
html.fstd .askex { font-size: 14px !important; }  /* was 13 */
html.fstd .askchip { font-size: 14px !important; }  /* was 13 */
html.fstd .smrng .smrt { font-size: 14px !important; }  /* was 13.5 */
html.fstd .smrng .smrt th { font-size: 14px !important; }  /* was 13 */
html.fstd .smrng .smrt td.sp { font-size: 14px !important; }  /* was 12.5 */
html.fstd .utpsec small, html.fstd .utpcat small { font-size: 14px !important; }  /* was 12 */
html.fstd .kbauto { font-size: 14px !important; }  /* was 12 */
html.fstd .dtbl { font-size: 14px !important; }  /* was 13 */
html.fstd .shiftpg .shpg .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .altbl .alshv { font-size: 14px !important; }  /* was 13 */
html.fstd .shvnote { font-size: 14px !important; }  /* was 13 */
html.fstd .habadge { font-size: 14px !important; }  /* was 13 */
html.fstd .hacard .hat { font-size: 14px !important; }  /* was 13 */
html.fstd .hacard .hasm { font-size: 14px !important; }  /* was 13 */
html.fstd .halog { font-size: 14px !important; }  /* was 13 */
html.fstd .hadiff { font-size: 14px !important; }  /* was 12 */
html.fstd .asrv { font-size: 14px !important; }  /* was 13 */
html.fstd .amod .amaddr { font-size: 14px !important; }  /* was 12.5 */
html.fstd .amod .amid { font-size: 14px !important; }  /* was 13 */
html.fstd .amod.na .amst::after { font-size: 14px !important; }  /* was 12.5 */
html.fstd .astbl th { font-size: 14px !important; }  /* was 13 */
html.fstd .astbl small { font-size: 14px !important; }  /* was 12.5 */
html.fstd .ashint { font-size: 14px !important; }  /* was 13 */
html.fstd .hhgrid h3 small { font-size: 14px !important; }  /* was 13 */
html.fstd .lvp i { font-size: 14px !important; }  /* was 12 */
html.fstd .lvna { font-size: 14px !important; }  /* was 13 */
html.fstd .lvrole { font-size: 14px !important; }  /* was 12 */
html.fstd .fplvrole { font-size: 14px !important; }  /* was 13 */
html.fstd .fprephint { font-size: 14px !important; }  /* was 13 */
html.fstd .dutyitem.drep { font-size: 14px !important; }  /* was 13 */
html.fstd .fxsrc { font-size: 14px !important; }  /* was 12 */
html.fstd .ffset { font-size: 14px !important; }  /* was 13 */
html.fstd .ffset select { font-size: 14px !important; }  /* was 13 */
html.fstd .ffset .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .dutyfloat .dfglint { font-size: 14px !important; }  /* was 13 */
html.fstd .dutyfloat.mini .dfglint { font-size: 14px !important; }  /* was 9 */
html.fstd .fprpg { font-size: 14px !important; }  /* was 13 */
html.fstd .fprpg .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .flowpg .lfbar { font-size: 14px !important; }  /* was 13.5 */
html.fstd .ffpumps .fprpg { font-size: 14px !important; }  /* was 12 */
html.fstd .ffpumps .fprpg .btn { font-size: 14px !important; }  /* was 12 */
html.fstd .ffpumps .fpruns { font-size: 14px !important; }  /* was 12.5 */
html.fstd .ffpumps .fpruns th { font-size: 14px !important; }  /* was 12 */
html.fstd .ffpumps .fpd > summary { font-size: 14px !important; }  /* was 13 */
html.fstd .ffpumps .fpd > summary .fpmet, html.fstd .ffpumps .fpd > summary .fpmet b { font-size: 14px !important; }  /* was 13 */
html.fstd .fpa .fpsuphint { font-size: 14px !important; }  /* was 12 */
html.fstd .fpa .fprephint { font-size: 14px !important; }  /* was 13 */
html.fstd .hlsc small { font-size: 14px !important; }  /* was 13 */
html.fstd .hlst { font-size: 14px !important; }  /* was 12 */
html.fstd .hldd { font-size: 14px !important; }  /* was 13.5 */
html.fstd .hldd i { font-size: 14px !important; }  /* was 11 */
html.fstd .hlmore { font-size: 14px !important; }  /* was 12 */
html.fstd .hltag { font-size: 14px !important; }  /* was 11 */
html.fstd .hltier { font-size: 14px !important; }  /* was 13 */
html.fstd .archtbl td.awire small.a420 { font-size: 14px !important; }  /* was 11 */
html.fstd .fpspark .fpsnone { font-size: 14px !important; }  /* was 10 */
html.fstd .ffset3 .fxf { font-size: 14px !important; }  /* was 13 */
html.fstd .ffset3 .ffse { font-size: 14px !important; }  /* was 12 */
html.fstd .flowfm .ffk .ffkl { font-size: 14px !important; }  /* was 12 */
html.fstd .flowfm .ffk .ffku { font-size: 14px !important; }  /* was 12 */
html.fstd .archcpu .acdiag { font-size: 14px !important; }  /* was 13 */
html.fstd .cdst { font-size: 14px !important; }  /* was 13 */
html.fstd .cdnote { font-size: 14px !important; }  /* was 13 */
html.fstd .cdtbl td small { font-size: 14px !important; }  /* was 11 */
html.fstd .cdtbl td code { font-size: 14px !important; }  /* was 13 */
html.fstd .cdtbl td.cdinfo { font-size: 14px !important; }  /* was 11 */
html.fstd .estbl .escat { font-size: 14px !important; }  /* was 12 */
html.fstd .esrow .esmean { font-size: 14px !important; }  /* was 12 */
html.fstd .esnote { font-size: 14px !important; }  /* was 12 */
html.fstd .escfg .eslab { font-size: 14px !important; }  /* was 13 */
html.fstd .escfg .esst { font-size: 14px !important; }  /* was 13 */
html.fstd .escfg .escats .esn { font-size: 14px !important; }  /* was 12 */
html.fstd .escfg textarea { font-size: 14px !important; }  /* was 13 */
html.fstd .esatbl td { font-size: 14px !important; }  /* was 13 */
html.fstd .esatbl td small { font-size: 14px !important; }  /* was 11 */
html.fstd .hltime span { font-size: 14px !important; }  /* was 12 */
html.fstd .uthead .utinl { font-size: 14px !important; }  /* was 13 */
html.fstd .smrt .smrep { font-size: 14px !important; }  /* was 11 */
html.fstd .fpb .fpcard > .fpch { font-size: 14px !important; }  /* was 11 */
html.fstd .fpb .fpadvbtn { font-size: 14px !important; }  /* was 13 */
html.fstd .fpb .fpbst .fprep .btn, html.fstd .fpb .fpbst .fprep .btn.warn { font-size: 14px !important; }  /* was 13 */
html.fstd #albar .abcnt { font-size: 14px !important; }  /* was 13 */
html.fstd #albar .abrow button { font-size: 14px !important; }  /* was 13 */
html.fstd .psyinfo { font-size: 14px !important; }  /* was 13 */
html.fstd .psydemo { font-size: 14px !important; }  /* was 12 */
html.fstd .psyfoot { font-size: 14px !important; }  /* was 12 */
html.fstd .pwcard small { font-size: 14px !important; }  /* was 12 */
html.fstd .pwcard span { font-size: 14px !important; }  /* was 13 */
html.fstd .pwnote2, html.fstd .pwfoot { font-size: 14px !important; }  /* was 13 */
html.fstd .pidbig small { font-size: 14px !important; }  /* was 11 */
html.fstd .pidbig i { font-size: 14px !important; }  /* was 12 */
html.fstd .pidleg { font-size: 14px !important; }  /* was 12 */
html.fstd .pidnote { font-size: 14px !important; }  /* was 13 */
html.fstd .pidab small { font-size: 14px !important; }  /* was 11 */
html.fstd .pidcur { font-size: 14px !important; }  /* was 13 */
html.fstd .pidfoot { font-size: 14px !important; }  /* was 13 */
html.fstd .swrow small, html.fstd .swhint { font-size: 14px !important; }  /* was 12 */
html.fstd .swadd button, html.fstd .swsi button { font-size: 14px !important; }  /* was 13 */
html.fstd .fxsmall { font-size: 14px !important; }  /* was 12 */
html.fstd .fxga { font-size: 14px !important; }  /* was 12 */
html.fstd .fxgl { font-size: 14px !important; }  /* was 12 */
html.fstd .fxfoot { font-size: 14px !important; }  /* was 13 */
html.fstd .rmsvg .rmc { font-size: 14px !important; }  /* was 12 */
html.fstd .fcbig small { font-size: 14px !important; }  /* was 11 */
html.fstd .fcbig i { font-size: 14px !important; }  /* was 12 */
html.fstd .fcfoot { font-size: 14px !important; }  /* was 13 */
html.fstd .effcard small { font-size: 14px !important; }  /* was 11 */
html.fstd .effcard i { font-size: 14px !important; }  /* was 12 */
html.fstd .effcard div { font-size: 14px !important; }  /* was 11 */
html.fstd .enveff small { font-size: 14px !important; }  /* was 12 */
html.fstd .envfoot, html.fstd .envnote { font-size: 14px !important; }  /* was 13 */
html.fstd #edbar2 { font-size: 14px !important; }  /* was 13 */
html.fstd #edbar2 .btn { font-size: 14px !important; }  /* was 13 */
html.fstd .ed2hint { font-size: 14px !important; }  /* was 12 */
html.fstd .prjpre button { font-size: 14px !important; }  /* was 13 */
html.fstd .prjm small { font-size: 14px !important; }  /* was 12 */
html.fstd .tdpre { font-size: 14px !important; }  /* was 12 */
html.fstd .pjcat small { font-size: 14px !important; }  /* was 12.5 */
html.fstd .pjnote { font-size: 14px !important; }  /* was 13 */
html.fstd .hvnote { font-size: 14px !important; }  /* was 13.5 */
html.fstd .hvrow small { font-size: 14px !important; }  /* was 12 */
html.fstd #plinfo .mb { font-size: 14px !important; }  /* was 13 */
html.fstd #plinfo .fp i { font-size: 14px !important; }  /* was 13 */
/* -> 16px */
html.fstd #top .brand { font-size: 16px !important; }  /* was 15 */
html.fstd .sidenav::after { font-size: 16px !important; }  /* was 15 */
html.fstd .popup.popsel .ph { font-size: 16px !important; }  /* was 15 */
html.fstd .seg button { font-size: 16px !important; }  /* was 15 */
html.fstd #edbar b { font-size: 16px !important; }  /* was 15 */
html.fstd .uthead h2 small { font-size: 16px !important; }  /* was 15 */
html.fstd .utfilter { font-size: 16px !important; }  /* was 15 */
html.fstd .utable { font-size: 16px !important; }  /* was 15 */
html.fstd .uvnum { font-size: 16px !important; }  /* was 15 */
html.fstd .uadd input, html.fstd .uadd select { font-size: 16px !important; }  /* was 15 */
html.fstd .hoffctl { font-size: 16px !important; }  /* was 15 */
html.fstd .vcleft .vchint { font-size: 16px !important; }  /* was 15 */
html.fstd .rpcard h3 { font-size: 16px !important; }  /* was 15 */
html.fstd .dutycfgrow select { font-size: 16px !important; }  /* was 15 */
html.fstd .lfbar input { font-size: 16px !important; }  /* was 15 */
html.fstd .sysbtn .sbcnt { font-size: 16px !important; }  /* was 15 */
html.fstd #edtree { font-size: 16px !important; }  /* was 15 */
html.fstd #edpanel .edsec { font-size: 16px !important; }  /* was 15 */
html.fstd #edpanel .edrow { font-size: 16px !important; }  /* was 15 */
html.fstd #edpanel .edrow > input[type=text], html.fstd #edpanel .edrow > input[type=number], html.fstd #edpanel .edrow > select { font-size: 16px !important; }  /* was 15 */
html.fstd #edpanel .edcw input[type=text], html.fstd #edpanel .edcw input[type=number] { font-size: 16px !important; }  /* was 15 */
html.fstd #demobar .dbexit { font-size: 16px !important; }  /* was 15 */
html.fstd .demopop .dprow { font-size: 16px !important; }  /* was 15 */
html.fstd .demopop .dppv { font-size: 16px !important; }  /* was 15 */
html.fstd .almenu a { font-size: 16px !important; }  /* was 15 */
html.fstd .aststat { font-size: 16px !important; }  /* was 15 */
html.fstd .asbox input { font-size: 16px !important; }  /* was 15 */
html.fstd .asbox button { font-size: 16px !important; }  /* was 15 */
html.fstd .cmnode { font-size: 16px !important; }  /* was 15 */
html.fstd label.f.cmf { font-size: 16px !important; }  /* was 15 */
html.fstd .cmfv input:not([type=checkbox]), html.fstd .cmfv select { font-size: 16px !important; }  /* was 15 */
html.fstd .tdlg input:not([type=checkbox]):not([type=radio]), html.fstd .tdlg select { font-size: 16px !important; }  /* was 15 */
html.fstd .tlsubs button { font-size: 16px !important; }  /* was 15 */
html.fstd .smrow input:not([type]), html.fstd .smrow select { font-size: 16px !important; }  /* was 15 */
html.fstd .smsec { font-size: 16px !important; }  /* was 15 */
html.fstd .cxv { font-size: 16px !important; }  /* was 15.5 */
html.fstd .smgr .smnote { font-size: 16px !important; }  /* was 15 */
html.fstd .smptbl td, html.fstd .smpl td b { font-size: 16px !important; }  /* was 15 */
html.fstd .altabs button b { font-size: 16px !important; }  /* was 15 */
html.fstd .toolbar .alhint { font-size: 16px !important; }  /* was 15 */
html.fstd .nfnote { font-size: 16px !important; }  /* was 15 */
html.fstd .smchips button { font-size: 16px !important; }  /* was 15 */
html.fstd .smsys button { font-size: 16px !important; }  /* was 15 */
html.fstd .smtdbar input, html.fstd .smstbar select { font-size: 16px !important; }  /* was 15 */
html.fstd .smops { font-size: 16px !important; }  /* was 15 */
html.fstd .pfctl { font-size: 16px !important; }  /* was 15 */
html.fstd .utpcats > b { font-size: 16px !important; }  /* was 15 */
html.fstd .utpsec, html.fstd .utpcat { font-size: 16px !important; }  /* was 15 */
html.fstd .dlv { font-size: 16px !important; }  /* was 15 */
html.fstd .prstat { font-size: 16px !important; }  /* was 15 */
html.fstd .prbar { font-size: 16px !important; }  /* was 15 */
html.fstd .prtbl .prv { font-size: 16px !important; }  /* was 15 */
html.fstd .shvrsn { font-size: 16px !important; }  /* was 15 */
html.fstd .haform textarea, html.fstd .haform input:not([type=checkbox]):not([type=number]) { font-size: 16px !important; }  /* was 15 */
html.fstd .hasync h2 .hasum { font-size: 16px !important; }  /* was 15 */
html.fstd .archcpu .acsub { font-size: 16px !important; }  /* was 15 */
html.fstd .aled { font-size: 16px !important; }  /* was 15 */
html.fstd .archlegend { font-size: 16px !important; }  /* was 15 */
html.fstd .astsub { font-size: 16px !important; }  /* was 15 */
html.fstd .archcpu .acloss { font-size: 16px !important; }  /* was 15 */
html.fstd .hhtop { font-size: 16px !important; }  /* was 15 */
html.fstd .hhissues { font-size: 16px !important; }  /* was 15 */
html.fstd .lvtop { font-size: 16px !important; }  /* was 15 */
html.fstd .lvtbl { font-size: 16px !important; }  /* was 15 */
html.fstd .ulvsel { font-size: 16px !important; }  /* was 15 */
html.fstd .fplvrow .fplvl { font-size: 16px !important; }  /* was 15 */
html.fstd .fxr { font-size: 16px !important; }  /* was 15 */
html.fstd .utpbar .utpjump { font-size: 16px !important; }  /* was 15 */
html.fstd .utpbar .utpjump select { font-size: 16px !important; }  /* was 15 */
html.fstd .hsearch input { font-size: 16px !important; }  /* was 15 */
html.fstd .hsgi { font-size: 16px !important; }  /* was 15 */
html.fstd .kbd .kbk.kbsp { font-size: 16px !important; }  /* was 15 */
html.fstd .kbd.kbsm .kbk { font-size: 16px !important; }  /* was 15 */
html.fstd .ffpumps .fpd > summary .fpname { font-size: 16px !important; }  /* was 15 */
html.fstd .fpa .fprep .btn { font-size: 16px !important; }  /* was 15 */
html.fstd .nmin { font-size: 16px !important; }  /* was 15 */
html.fstd .hlpill { font-size: 16px !important; }  /* was 15 */
html.fstd .hlub { font-size: 16px !important; }  /* was 15 */
html.fstd .hlcfgt input[type=number] { font-size: 16px !important; }  /* was 15 */
html.fstd html.touch #main .btn.bk, html.fstd html.touch #main .btn.alshv { font-size: 16px !important; }  /* was 15 */
html.fstd html.touch .flowpg input, html.fstd html.touch .flowpg select, html.fstd html.touch .flowpg .btn { font-size: 16px !important; }  /* was 15 */
html.fstd .estbl { font-size: 16px !important; }  /* was 15 */
html.fstd .eswrap input[type=date] { font-size: 16px !important; }  /* was 15 */
html.fstd .cmtabs button { font-size: 16px !important; }  /* was 15 */
html.fstd .fpb .fpbst { font-size: 16px !important; }  /* was 15 */
html.fstd .fpb3 .fppgt button { font-size: 16px !important; }  /* was 15 */
html.fstd #albar { font-size: 16px !important; }  /* was 15 */
html.fstd #albar .abhead b { font-size: 16px !important; }  /* was 15 */
html.fstd .psytabs button { font-size: 16px !important; }  /* was 15 */
html.fstd .pwtabs button, html.fstd #pwctl button { font-size: 16px !important; }  /* was 15 */
html.fstd .fxtabs button { font-size: 16px !important; }  /* was 15 */
html.fstd .rmsvg text { font-size: 16px !important; }  /* was 15 */
html.fstd .fcups { font-size: 16px !important; }  /* was 15 */
html.fstd .pjrow .seg button { font-size: 16px !important; }  /* was 15 */
html.fstd .hvhead h3 small { font-size: 16px !important; }  /* was 15 */
html.fstd .hvdone p { font-size: 16px !important; }  /* was 15.5 */
html.fstd .pjwiztip { font-size: 16px !important; }  /* was 15 */
html.fstd #plsub button { font-size: 16px !important; }  /* was 15 */
html.fstd #plmenu { font-size: 16px !important; }  /* was 15 */
html.fstd #plinfo .fp .fr { font-size: 16px !important; }  /* was 15 */
html.fstd #plnav button.plmore { font-size: 16px !important; }  /* was 15 */
html.fstd #plfbar button { font-size: 16px !important; }  /* was 15 */
/* -> 18px */
html.fstd .fpsub { font-size: 18px !important; }  /* was 17 */
html.fstd .fnum { font-size: 18px !important; }  /* was 17 */
html.fstd .fpv { font-size: 18px !important; }  /* was 19 */
html.fstd .fbox { font-size: 18px !important; }  /* was 17 */
html.fstd #edpanel .edph { font-size: 18px !important; }  /* was 19 */
html.fstd .edrow { font-size: 18px !important; }  /* was 17 */
html.fstd .edrow input[type=text], html.fstd .edrow input[type=number], html.fstd .edrow select { font-size: 18px !important; }  /* was 17 */
html.fstd .utme { font-size: 18px !important; }  /* was 17 */
html.fstd .lf input { font-size: 18px !important; }  /* was 19 */
html.fstd .tnode > summary { font-size: 18px !important; }  /* was 17 */
html.fstd .hbtn { font-size: 18px !important; }  /* was 17 */
html.fstd .ffhd b { font-size: 18px !important; }  /* was 19 */
html.fstd .vcright .utable { font-size: 18px !important; }  /* was 19 */
html.fstd .vcpager { font-size: 18px !important; }  /* was 17 */
html.fstd .dutycfghd { font-size: 18px !important; }  /* was 17 */
html.fstd #edpanel .edph { font-size: 18px !important; }  /* was 17 */
html.fstd .themebtn { font-size: 18px !important; }  /* was 17 */
html.fstd html[data-theme="contrast"] #nav button { font-size: 18px !important; }  /* was 19 */
html.fstd .archside h4 { font-size: 18px !important; }  /* was 17 */
html.fstd .apnav h3 { font-size: 18px !important; }  /* was 19 */
html.fstd .cmstat .cmsh { font-size: 18px !important; }  /* was 17 */
html.fstd .btn.big { font-size: 18px !important; }  /* was 17 */
html.fstd .plcard .plip b { font-size: 18px !important; }  /* was 17 */
html.fstd .nfmain { font-size: 18px !important; }  /* was 17 */
html.fstd .cxexpr { font-size: 18px !important; }  /* was 17 */
html.fstd .cxv span b { font-size: 18px !important; }  /* was 17 */
html.fstd .smprh { font-size: 18px !important; }  /* was 17 */
html.fstd .altabs button { font-size: 18px !important; }  /* was 17 */
html.fstd .nftabs button { font-size: 18px !important; }  /* was 17 */
html.fstd .nftop > .btn { font-size: 18px !important; }  /* was 17 */
html.fstd .smtabs2 button { font-size: 18px !important; }  /* was 17 */
html.fstd .smtdgrid h3 { font-size: 18px !important; }  /* was 17 */
html.fstd .askgo { font-size: 18px !important; }  /* was 17 */
html.fstd .utpbar .utpno b { font-size: 18px !important; }  /* was 19 */
html.fstd .kbc.kbw { font-size: 18px !important; }  /* was 19 */
html.fstd .kbk.kbf { font-size: 18px !important; }  /* was 17 */
html.fstd .kbk.kbsp { font-size: 18px !important; }  /* was 17 */
html.fstd .dcard b { font-size: 18px !important; }  /* was 17 */
html.fstd .hacard .har2 { font-size: 18px !important; }  /* was 17 */
html.fstd .aststat { font-size: 18px !important; }  /* was 17 */
html.fstd .lvmain { font-size: 18px !important; }  /* was 17 */
html.fstd .archlegend { font-size: 18px !important; }  /* was 17 */
html.fstd .fpb .fpcard { font-size: 18px !important; }  /* was 17 */
html.fstd .fpb .fnum { font-size: 18px !important; }  /* was 17 */
html.fstd .pjlead { font-size: 18px !important; }  /* was 17 */
/* -> 22px */
html.fstd .stepbtn { font-size: 22px !important; }  /* was 20 */
html.fstd .logincard .btn.primary { font-size: 22px !important; }  /* was 20 */
html.fstd .democards h3 { font-size: 22px !important; }  /* was 20 */
html.fstd .loginwrap .dci { font-size: 22px !important; }  /* was 20 */
html.fstd .loginmodal .dci { font-size: 22px !important; }  /* was 20 */
html.fstd .archcpu .acname { font-size: 22px !important; }  /* was 20 */
html.fstd .cmright h2 { font-size: 22px !important; }  /* was 20 */
html.fstd .kbk.kblang b { font-size: 22px !important; }  /* was 20 */
html.fstd .kbd.kbsm .kbc { font-size: 22px !important; }  /* was 20 */
html.fstd .idlewarn { font-size: 22px !important; }  /* was 20 */
html.fstd .hacard .han { font-size: 22px !important; }  /* was 20 */
html.fstd .amod .amslot { font-size: 22px !important; }  /* was 21 */
html.fstd .lvhd { font-size: 22px !important; }  /* was 20 */
html.fstd .kbd .kbc { font-size: 22px !important; }  /* was 20 */
html.fstd .hlbig .hltier { font-size: 22px !important; }  /* was 20 */
html.fstd .flowfm .ffk .ffkv, html.fstd .flowfm .ffk .ffkv.big { font-size: 22px !important; }  /* was 20 */
html.fstd .fpb .stepbtn { font-size: 22px !important; }  /* was 20 */
html.fstd .pjbig b { font-size: 22px !important; }  /* was 20 */
html.fstd .hvhead h3 { font-size: 22px !important; }  /* was 20 */
html.fstd #plinfo h3 { font-size: 22px !important; }  /* was 20 */
html.fstd .mobv h2 { font-size: 22px !important; }  /* was 20 */
/* -> 28px */
html.fstd #title { font-size: 28px !important; }  /* was 26 */
html.fstd .popup .ph button { font-size: 28px !important; }  /* was 26 */
html.fstd .bigpv { font-size: 28px !important; }  /* was 38 */
html.fstd .logincard h2 { font-size: 28px !important; }  /* was 26 */
html.fstd .ffkv.big { font-size: 28px !important; }  /* was 30 */
html.fstd .demopop .dppv b { font-size: 28px !important; }  /* was 36 */
html.fstd .idlewarn b { font-size: 28px !important; }  /* was 26 */
html.fstd .hlbig { font-size: 28px !important; }  /* was 40 */
html.fstd .hlsc { font-size: 28px !important; }  /* was 30 */
html.fstd .pjcard h2 { font-size: 28px !important; }  /* was 26 */
html.fstd .pjhome h1 { font-size: 28px !important; }  /* was 44 */

/* ===FSTD 自繪 SVG 文字吸附六級（ctm≈1：psychro viewBox=容器寬；pw 單線圖已改 viewBox=容器寬）=== */
html.fstd .psysvg .psyax, html.fstd .psysvg .psylab, html.fstd .psysvg .psyrhl, html.fstd .psysvg .psyhl, html.fstd .psysvg .psyspecl, html.fstd .psysvg .psyptl { font-size: 14px; }
html.fstd .pwsvg .pwax, html.fstd .pwsvg .pwm, html.fstd .pwsvg .pwm.sm, html.fstd .pwsvg .pwtrn, html.fstd .pwsvg .pwtn, html.fstd .pwsvg .pwtn2, html.fstd .pwsvg .pwnote { font-size: 14px; }
html.fstd .pwsvg .pwtitle { font-size: 16px; }
/* ===FSTD 功能頁通用收尾：純 <small>＝註腳 14；facility 標題/FFU 格；首頁 plant 子頁列空白也保留高度（ctm 一致）=== */
html.fstd small { font-size: 14px !important; }
html.fstd .fcbar h3, html.fstd .fcsec h3, html.fstd .fccard h3 { font-size: 18px !important; }
html.fstd .ffuc { font-size: 14px !important; }
html.fstd #plsub { min-height: 42px; box-sizing: border-box; align-items: center; }
/* kiosk（config display.kiosk）：電腦版藏系統標題列與右側主選單，客戶畫面拉滿全寬（畫面自己有 iFIX 外框） */
@media (min-width: 821px) {
  html.fkiosk #top, html.fkiosk #nav, html.fkiosk #app #nav, html.fkiosk #app.lay-side #nav, html.fkiosk .sidenav { display: none !important; }
  html.fkiosk #app.lay-side { grid-template-columns: 1fr 0; grid-template-rows: 0 auto 1fr auto; }
}
#albar .abrow.abempty { display: block; line-height: 32px; padding-left: 28px; color: #8b97a6; }
/* 手機直式清單（字型標準專案）：左右翻頁箭頭會壓在卡片上 → 手機不顯示（用上方頁面選單切換） */
@media (max-width: 820px) { html.fstd #sideprev, html.fstd #sidenext, html.fkiosk #sideprev, html.fkiosk #sidenext { display: none !important; } }
.mobv .mtr svg { width: 100%; height: auto; display: block; margin: 2px 0 6px; }
.mobv .mr .mbtn { flex: 1; min-height: 40px; font-size: 16px; font-weight: 700; color: #fff; background: #2f6fd1; border: 1px solid #4d8be0; border-radius: 6px; padding: 6px 10px; text-align: left; }
.mobv .mr .mt2 { margin-left: auto; font-size: 14px; color: #9aabbf; text-align: right; }
/* 拉滿（fill）畫面：圖形可以被壓扁，文字不行 → 每個文字以自己中心反向縮放（--tsy 由 app.js 算） */
svg.tfix text:not([transform]) { transform-box: fill-box; transform-origin: center; transform: scaleY(var(--tsy, 1)); }
/* 警報數 0：灰底（紅色只給真的有警報） */
#albar .abcnt.zero { background: #2a3546 !important; color: #9fb0c4 !important; }
/* 手機：警報區沒警報時只留表頭＋一行（不畫 3 行空列，主內容多 100px）；頁名太長換行不截字 */
@media (max-width: 820px) {
  #albar .abrow.abpad:not(.abempty) { display: none !important; }
  #albar .abrow.abempty { display: flex !important; padding: 4px 10px; font-size: 14px; }
  html.fstd #title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; font-size: 20px; }
}
.mobv .mv.bad { color: #fff !important; background: var(--fault, #e03131); border-radius: 4px; padding: 0 8px; font-weight: 700; }
.mobv .mv.ok { color: #5cf08f !important; font-weight: 700; }
/* 穩懋 10/20 第三輪：kiosk 專案的手機頁首只留選單、頁名、警報鈴（模擬模式徽章、表情圖示、沒字的箭頭鈕、未登入都藏起來） */
@media (max-width: 820px) {
  html.fkiosk #top .right > *:not(#bell) { display: none !important; }
  html.fkiosk #title.tlong { font-size: 20px !important; line-height: 1.2 !important; }
  html.fkiosk #title.tvlong { font-size: 17px !important; }
}
/* 手機清單 'p' 列＝設定值（不是量測）：灰字、細一點（穩懋 10/20） */
.mobv .mv.msp { color: #9aabbf !important; font-weight: 500; }

/* ===== 淺色畫面（html.lightscr，老闆 10/21）：畫面內顏色由 app.js LightScr 反轉亮度；這裡是外圍（底色、手機清單、警報列） ===== */
html.lightscr body, html.lightscr #main { background: #eef2f6; }
html.lightscr #main > .mobv { background: #eef2f6; color: #1d2733; }
html.lightscr .mobv .mmenu, html.lightscr .mobv .mlinks button, html.lightscr .mobv .mfullbtn { background: #ffffff; color: #1d2733; border-color: #9fb3cc; }
html.lightscr .mobv .msec { background: #ffffff; border-color: #b7c7da; }
html.lightscr .mobv .msec h3 { color: #1b5fa8; }
html.lightscr .mobv .mr { border-top-color: #dde5ee; }
html.lightscr .mobv .mr .mn { color: #2b3a4a; }
html.lightscr .mobv .mr .mv { color: #127a3a; }
html.lightscr .mobv .mr .mv[data-k="s"], html.lightscr .mobv .mr .mv[data-k="l"], html.lightscr .mobv .mr .mu, html.lightscr .mobv .mv.msp { color: #5b6b7d; }
html.lightscr .mobv .mr .mv.on[data-k="s"] { color: #127a3a; }
html.lightscr .mobv .mobfull svg { background: #eef2f6; }
html.lightscr .mobv .mimg { filter: invert(1) hue-rotate(180deg); }   /* 平面圖線稿（淺線深底）→ 深線淺底 */
html.lightscr #main svg image[href*="bg/"] { filter: invert(1) hue-rotate(180deg); }
html.lightscr #albar { background: #f7f9fb; color: #1d2733; border-top-color: #b7c7da; }
html.lightscr #albar .abrow { border-top-color: #dde5ee; }
html.lightscr #albar .abrow:hover { background: #e8eef5; }
html.lightscr #albar .abhead button, html.lightscr #albar .abrow button { background: #ffffff; color: #1d2733; border-color: #9fb3cc; }
html.lightscr #albar .abnone, html.lightscr #albar .abrow.back { color: #5b6b7d; }

/* LSv2（10/21 淺色審查）：手機狀態字深綠、次要字加深、曲線頂端刻度留白 */
html.lightscr .mobv .mr .mv.on { color: #1a7f37 !important; }
html.lightscr .mobv .mv.ok { color: #1a7f37 !important; }
html.lightscr .mobv .mr .mu, html.lightscr .mobv .mt2 { color: #4a5868; }