/* 深色滿版房屋風格（參考完整產品看板）：預設即深色，不隨系統淺色偏好翻白 */
:root { --bg: #0b1220; --card: #16233a; --ink: #e9eef7; --mute: #9fb1cb; --line: #2a3b57; --blue: #10294e; --acc: #2f82e4;
  --ok: #27c06a; --warn: #e3a010; --bad: #e0493a; --off: #8491a6; --okbg: #12301f; --badbg: #3a1714;
  --panel2: #0f1a2c; --inset: rgba(255,255,255,.045); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.4 -apple-system, "PingFang TC", "Noto Sans TC", sans-serif; }
#top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--blue); color: #fff;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px; }
#top h1 { flex: 1; margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { background: none; border: 0; color: #fff; font-size: 26px; min-width: 44px; min-height: 44px; }
main { padding: 12px 12px calc(env(safe-area-inset-bottom) + 80px); max-width: 720px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.site { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.site .nm { flex: 1; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; }
.dot.on { background: var(--ok); }
.pill { border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 600; background: var(--line); color: var(--mute); }
.pill.unack { background: var(--bad); color: #fff; } .pill.act { background: var(--warn); color: #fff; }
.mute { color: var(--mute); font-size: 14px; }
.banner { background: var(--warn); color: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.alarm { display: flex; gap: 10px; align-items: center; border-left: 5px solid var(--warn); }
.alarm.unack { border-left-color: var(--bad); } .alarm.cleared { border-left-color: var(--off); opacity: .75; }
.alarm .tx { flex: 1; min-width: 0; } .alarm .msg { font-weight: 600; word-break: break-all; }
.btn { border: 0; border-radius: 10px; background: var(--acc); color: #fff; font-size: 15px; font-weight: 600; padding: 10px 14px; min-height: 44px; }
.btn.ghost { background: var(--line); color: var(--ink); }
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.val { padding: 12px; margin: 0; cursor: pointer; }
.val .d { font-size: 14px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.val .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .val .u { font-size: 14px; color: var(--mute); margin-left: 4px; }
.val.stale .v { color: var(--off); }
input { width: 100%; font-size: 16px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); margin-bottom: 10px; }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); }
#tabs button { flex: 1; border: 0; background: none; color: var(--mute); font-size: 15px; padding: 14px 0; }
#tabs button.on { color: var(--acc); font-weight: 700; }
.err { color: var(--bad); font-size: 14px; min-height: 20px; }
canvas { width: 100%; height: 220px; display: block; }
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; z-index: 10; }
.sheet .card { width: 100%; max-width: 720px; margin: 0 auto; border-radius: 16px 16px 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
.seg { display: flex; gap: 6px; margin: 8px 0; } .seg button { flex: 1; } .seg .on { background: var(--acc); color: #fff; }
#tabs[hidden], [hidden] { display: none !important; }
#logout { font-size: 15px; }
/* ---------- 圖控 ---------- */
.dgcard { padding: 10px 6px; }
.dgt { font-weight: 700; padding: 0 8px 4px; }
.dg { width: 100%; height: auto; display: block; }
.dg .pipe { fill: none; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.dg .pipe-o { fill: none; stroke: #0b1320; stroke-opacity: .38; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.dg .pipe-hl { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.dg .cw .pipe { stroke: #6fc2bc; } .dg .chw .pipe { stroke: #7fb0ec; }
.dg .flow { fill: none; stroke-width: 3; stroke-dasharray: 6 10; opacity: 0; stroke-linecap: round; }
.dg .cw .flow { stroke: #0b6f69; } .dg .chw .flow { stroke: #1452a8; }
.dg .on .flow { opacity: 1; animation: pkflow 1s linear infinite; }
@keyframes pkflow { to { stroke-dashoffset: -16; } }
.dg .eq { cursor: pointer; }
/* .body＝疊在金屬外殼上的狀態色層（外框＝狀態色，內部淡淡染色） */
.dg .eq .body { fill: var(--off); fill-opacity: .06; stroke: var(--off); stroke-width: 2.5; }
.dg .eq.run .body { stroke: var(--ok); fill: var(--ok); fill-opacity: .2; }
.dg .eq.stop .body { stroke: var(--off); }
.dg .eq.fault .body { stroke: var(--bad); fill: var(--bad); fill-opacity: .3; animation: pkblink 1.2s ease-in-out infinite; }
.dg .eq.unk .body { stroke-dasharray: 5 4; fill-opacity: 0; }
@keyframes pkblink { 50% { stroke-opacity: .25; } }
/* 狀態燈 */
.dg .lamp { fill: #5b6472; stroke: #1c222b; stroke-width: 1.2; }
.dg .eq.run .lamp { fill: #2fd56f; stroke: #0b5a2c; }
.dg .eq.fault .lamp { fill: #ff4b3b; stroke: #7d150c; animation: pklamp 1s steps(1) infinite; }
.dg .eq.unk .lamp { fill: none; stroke: var(--off); stroke-dasharray: 2 2; }
@keyframes pklamp { 50% { fill: #5a1a14; } }
.dg .imp path { fill: #aeb7c2; } .dg .eq.run .imp path { fill: #4be08a; } .dg .eq.fault .imp path { fill: #ff6a5c; }
.dg .hub { fill: #d5dbe2; stroke: #1c222b; stroke-width: .6; }
.dg .eq.run .imp { animation: pkspin 2.4s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pkspin { to { transform: rotate(360deg); } }
.dg text { fill: var(--ink); font-size: 13px; }
.dg .en { font-weight: 700; font-size: 13px; }
.dg .ev { font-size: 18px; font-weight: 700; }
.dg .vl { fill: var(--mute); font-size: 12px; }
.dg .vv { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dg .vu { fill: var(--mute); font-size: 11px; font-weight: 400; }
.dg .vbox { cursor: pointer; } .dg .vbox.stale .vv { fill: var(--off); }
/* 設備本體上的文字（底色固定是淺金屬，深淺主題都用深字） */
.dg .mtx { fill: #17202d; } .dg .mtm { fill: #4a5668; } .dg .mtw { fill: #f2f5f8; font-weight: 700; font-size: 13px; }
.dg .sm { font-size: 11px; }
.dg .lcd { fill: #6ff0a6; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; }
.dg .lcdu { fill: #7c9a8a; font-size: 10px; }
.dg .eq.stale .lcd { fill: #6b7a72; }
.dg .win { fill: var(--card); stroke: #7b8794; stroke-width: 1; }
.dg .cbc, .dg .cbo { fill: none; stroke: #17202d; stroke-width: 2.6; stroke-linecap: round; }
.dg .cbc { display: none; } .dg .eq.run .cbc { display: inline; } .dg .eq.run .cbo { display: none; }
.dg .eq.run .cbc { stroke: #0b5a2c; } .dg .eq.fault .cbo { stroke: #a01f12; }
.dg .cbt { fill: #17202d; }
.dg .liq.stale { opacity: .35; }
.legend { display: flex; gap: 14px; justify-content: center; font-size: 14px; color: var(--mute); padding-top: 6px; flex-wrap: wrap; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #1c222b; background: #5b6472; margin-right: 4px; vertical-align: -2px; }
.lg.run { background: #2fd56f; border-color: #0b5a2c; } .lg.fault { background: #ff4b3b; border-color: #7d150c; } .lg.unk { background: none; border: 1.5px dashed var(--off); }
.banner.bad { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { .dg .on .flow, .dg .eq.run .imp, .dg .eq.fault .body, .dg .eq.fault .lamp { animation: none; } }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .tools .btn { flex: 1 1 140px; }
.banner.info { background: var(--acc); }
textarea, select { width: 100%; font: inherit; font-size: 16px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); margin-bottom: 10px; }
.sub { font-size: 15px; color: var(--mute); margin: 18px 4px 8px; }
.fbt { white-space: pre-wrap; word-break: break-word; margin-bottom: 4px; }
.reply { background: var(--okbg); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 14px; }
.card.ok { border: 2px solid var(--ok); }
.card pre { white-space: pre-wrap; background: var(--panel2); border-radius: 8px; padding: 10px; font-size: 15px; }
.pill.st { background: var(--okbg); color: var(--ok); }
.dg .air .pipe { stroke: #b4c6e2; stroke-width: 11; stroke-linecap: square; } .dg .air .pipe-o { stroke-width: 14; stroke-linecap: square; } .dg .air .flow { stroke: #3d6cb3; }
.dg .exh .pipe { stroke: #d9c6a8; stroke-width: 9; } .dg .exh .pipe-o { stroke-width: 12; } .dg .exh .flow { stroke: #9a6516; }
.dg .pw .pipe { stroke: #7d8796; stroke-width: 4; } .dg .pw .pipe-o { stroke-width: 6.5; } .dg .pw .pipe-hl { stroke-width: 1; } .dg .pw .flow { stroke: var(--warn); stroke-width: 3; }
.dg .room { fill: #0e1a2c; stroke: var(--mute); stroke-width: 3; }
.dg .room-in { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dg .tr circle { fill: none; stroke-width: 2.4; } .dg .tr .w1 { stroke: #1f4f8f; } .dg .tr .w2 { stroke: #a3361f; }
.dgsel { margin: 0 0 10px; } .dgsel .btn { font-size: 14px; padding: 8px 6px; }
.ck { display: flex; align-items: center; gap: 8px; padding: 8px 0; } .ck input { width: 22px; height: 22px; margin: 0; }
.rtitle { font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpis div { background: var(--inset); border-radius: 10px; padding: 8px 10px; } .kpis span { display: block; font-size: 14px; color: var(--mute); }
.kpis b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tw { overflow-x: auto; margin-top: 8px; }
.rt { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.rt th, .rt td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rt td:first-child { white-space: normal; } .rt th { color: var(--mute); font-weight: 600; font-size: 14px; }
.barc { width: 30%; } .barc i { display: block; height: 10px; border-radius: 3px; background: var(--acc); }
@media print { #top, #tabs, .noprint, .banner { display: none !important; } body, html { background: #fff; color: #000; } .card { border: 0; break-inside: avoid; } main { padding: 0; } }
.kpis b { white-space: nowrap; } .kpis small { font-size: 14px; font-weight: 400; color: var(--mute); }
.dg .gas .pipe { stroke: #cdb6e2; stroke-width: 6; } .dg .gas .pipe-o { stroke-width: 8.5; } .dg .gas .flow { stroke: #6e36a8; }
.dg .chem .pipe { stroke: #ebc993; } .dg .chem .flow { stroke: #a8650a; }
.dgsel { flex-wrap: wrap; } .dgsel .btn { flex: 1 1 30%; }
/* ---------- 營運總覽 ---------- */
.kpis.ov { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 4px; } .kpis.ov div { background: var(--card); border: 1px solid var(--line); padding: 10px 12px; }
.kpis.ov b { font-size: 24px; } .kpis.ov .hot { border-color: var(--warn); background: var(--badbg); }
@media (min-width: 560px) { .kpis.ov { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ovb { margin: 8px 0 0; } .ovb .btn { flex: 1; padding: 10px 4px; }
.ovl { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .ovl:last-child { border-bottom: 0; }
.banner.ok { background: var(--ok); }
/* ---------- 操作導覽 ---------- */
.tour { position: fixed; inset: 0; z-index: 30; }
.tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.6); outline: 3px solid var(--acc); pointer-events: none;
  transition: left .2s, top .2s, width .2s, height .2s; }
.tour-tip { position: fixed; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); max-height: calc(100vh - 24px); overflow-y: auto; }
.tour-n { font-size: 12px; color: var(--mute); margin-bottom: 2px; } .tour-t { display: block; font-size: 17px; margin-bottom: 6px; }
.tour-x { white-space: pre-line; font-size: 15px; margin-bottom: 12px; }
.tour-b { display: flex; gap: 8px; align-items: center; } .tour-b span { flex: 1; } .tour-b .btn { padding: 8px 12px; }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } }
/* ---------- 首頁（品牌 hero＋線上展示＋產品亮點＋登入） ---------- */
body.home-view #main { max-width: 1040px; }          /* 首頁在電腦上用寬一點的版面，手機維持直式滿版 */
.home { display: grid; gap: 14px; }
/* hero：深色、強對比的工業科技感（正面對決 / PK 氣勢），深淺主題都維持同一套品牌深色 */
.hero { background: radial-gradient(135% 160% at 82% -20%, #16437a 0%, #0b2149 42%, #071427 100%);
  border: 1px solid #16386b; border-radius: 18px; padding: 22px 18px; color: #eaf2fd;
  box-shadow: 0 14px 36px rgba(4, 12, 28, .4); overflow: hidden; display: grid; gap: 18px; }
@media (min-width: 760px) { .hero { grid-template-columns: 1.06fr .94fr; align-items: center; padding: 30px 28px; column-gap: 28px; } }
.hero-top { display: flex; align-items: center; gap: 14px; }
.hero-logo { border-radius: 16px; flex: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.hero-head { min-width: 0; }
.hero-title { margin: 0; font-weight: 900; line-height: 1.08; letter-spacing: .5px;
  font-size: clamp(25px, 6.4vw, 36px); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.hero-title .pk { display: block; margin-top: 6px; font-size: clamp(11px, 2.8vw, 14px); font-weight: 800;
  letter-spacing: 3.5px; text-transform: uppercase; color: #2ee6ab; }
.hero-sub { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: #a9c2e2; }
.hl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.hlc { background: rgba(255, 255, 255, .06); border: 1px solid rgba(120, 170, 230, .22);
  border-left: 3px solid #2ee6ab; border-radius: 11px; padding: 11px 12px; }
.hlc b { display: block; color: #fff; font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.hlc span { display: block; color: #9db7d8; font-size: 12px; line-height: 1.45; }
.hero-side { display: grid; gap: 12px; }
/* HMI 預覽：放在 var(--card) 面板上，圖控文字才會隨深淺主題維持對比（就像嵌在 hero 裡的一塊螢幕） */
.hmi { position: relative; background: #0a1a30; border: 1px solid rgba(120, 170, 230, .32); border-radius: 13px;
  padding: 7px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.hmi-screen { background: var(--card); border-radius: 9px; padding: 10px 8px; }
.hmi .dg { max-width: 440px; margin: 0 auto; }
.hmi-flag { position: absolute; top: 14px; right: 14px; background: rgba(10, 22, 40, .72); color: #cfe0f5;
  border: 1px solid rgba(120, 170, 230, .4); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; }
.hero-demo { display: grid; gap: 3px; }
.hero-demo b { color: #fff; font-size: 15px; font-weight: 800; }
.hero-demo span { color: #9db7d8; font-size: 13px; line-height: 1.45; }
.demo-btn { margin-top: 9px; background: linear-gradient(180deg, #27d79e, #13b07f); color: #04231a;
  font-weight: 800; letter-spacing: .5px; box-shadow: 0 6px 16px rgba(19, 176, 127, .4); }
.auth { display: grid; gap: 8px; }
.login-card { width: 100%; max-width: 440px; margin: 0 auto; }
.hint { text-align: center; margin: 2px auto 0; max-width: 440px; }
.qs-slot:empty { display: none; }
/* 線上展示的唯讀小標籤（右上角低調灰標） */
.demo-flagwrap { text-align: right; margin: -2px 0 8px; }
.demo-flag { display: inline-block; background: var(--line); color: var(--mute); border-radius: 999px;
  padding: 3px 11px; font-size: 12px; font-weight: 700; }
/* 兩欄：圖控頁 side 面板預設隱藏（手機單欄，和原本一樣） */
.plant-side { display: none; }
.plant-side .vals { margin-top: 8px; }
/* ---------- 電腦版滿版：首頁與線上展示不再擠在中間窄欄 ---------- */
@media (min-width: 960px) {
  body.home-view #main { max-width: min(1480px, 94vw); }
  body.demo-view #main { max-width: min(1760px, 95vw); }
  /* 線上展示圖控：左＝流程圖（固定 540px＝放大 1.5×）＋右＝即時數值面板，填滿螢幕 */
  body.demo-view .plant { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
  body.demo-view #dgwrap .dg { width: 540px; max-width: 100%; }
  body.demo-view .plant-side { display: block; }
  body.demo-view .plant-main { min-width: 0; }
  /* 即時值、圖控右側面板：自動排多欄 */
  body.demo-view .vals { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  /* 警報：兩欄卡片 */
  body.demo-view .alist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  body.demo-view .alist .card { margin: 0; }
  body.demo-view .alist .card.mute { grid-column: 1 / -1; }
  /* 報表：卡片分兩欄流排，填滿寬度 */
  body.demo-view #rep { column-count: 2; column-gap: 14px; }
  body.demo-view #rep > .card { break-inside: avoid; margin: 0 0 12px; }

  /* ---------- 字型標準（qa/字型標準.md）：電腦版只用六級、最小 14px ---------- */
  /* 流程圖固定 540px（縮放 1.5×），圖內字 ×1.5 後落在 14／16／18／24px */
  body.demo-view .dg text, body.demo-view .dg .en, body.demo-view .dg .mtw, body.demo-view .dg .lcd { font-size: 12px; }   /* →18 L */
  body.demo-view .dg .vl, body.demo-view .dg .sm { font-size: 10.7px; }                                                    /* →16 S */
  body.demo-view .dg .vu, body.demo-view .dg .lcdu { font-size: 9.4px; }                                                   /* →14 XS */
  body.demo-view .dg .vv, body.demo-view .dg .ev { font-size: 16px; }                                                      /* →24 V */
  /* HTML 文字收斂到 14／16／18／24px */
  body.demo-view .mute, body.demo-view .legend, body.demo-view .val .d, body.demo-view .val .u,
  body.demo-view .sub, body.demo-view .btn, body.demo-view #tabs button { font-size: 16px; }
  body.demo-view .dgt, body.demo-view .plant-side .card > b, body.demo-view .rtitle, body.demo-view .kpis b { font-size: 18px; }
  body.demo-view .val .v { font-size: 24px; }
  body.demo-view .legend { font-size: 14px; }
  body.demo-view .demo-flag, body.demo-view .kpis span, body.demo-view .kpis small,
  body.demo-view .rt th, body.demo-view .rt td { font-size: 14px; }

  /* 首頁（登入）同樣收斂到標準六級、最小 14px */
  body.home-view .hero-title { font-size: 28px; }                                   /* T1 */
  body.home-view .hlc span, body.home-view .hero-demo span, body.home-view .hmi-flag,
  body.home-view .mute, body.home-view .hero-sub, body.home-view .hero-title .pk { font-size: 14px; }
  body.home-view .hero-demo b, body.home-view .hlc b, body.home-view .btn { font-size: 16px; }
  /* 首頁 HMI 預覽（固定 480px＝縮放 1.333×）：圖內字 ×1.333 後落在 14／16／18px */
  body.home-view .hmi .dg { width: 480px; max-width: 100%; }
  body.home-view .hmi .dg text, body.home-view .hmi .dg .en, body.home-view .hmi .dg .mtw,
  body.home-view .hmi .dg .vl, body.home-view .hmi .dg .sm { font-size: 12px; }    /* →16 */
  body.home-view .hmi .dg .vu, body.home-view .hmi .dg .lcdu { font-size: 10.5px; } /* →14 */
  body.home-view .hmi .dg .vv, body.home-view .hmi .dg .ev { font-size: 13.5px; }   /* →18 */
}
@media (min-width: 1500px) {
  body.demo-view .alist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 底部即時警報列（線上展示，固定 3～4 行，紅色只作狀態不作底色） ---------- */
#alarmbar[hidden] { display: none !important; }
#alarmbar { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 50px); z-index: 4;
  background: linear-gradient(180deg, #16243d, #0f1a2e); border-top: 2px solid #2b3f60;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); padding: 7px 14px 9px; height: 158px; overflow: hidden; }
#alarmbar .abh { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
#alarmbar .abh .dotx { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 6px var(--bad); }
#alarmbar .abh .ct { color: var(--bad); } #alarmbar .abh .sp { flex: 1; } #alarmbar .abh .tag { color: var(--mute); font-weight: 600; }
#alarmbar .abrow { display: flex; align-items: center; gap: 10px; padding: 5px 9px; border-radius: 8px; margin-bottom: 4px;
  font-size: 14px; line-height: 1.2; background: var(--inset); border-left: 4px solid var(--off); }
#alarmbar .abrow .lv { font-weight: 700; color: var(--mute); min-width: 3.4em; font-size: 14px; }
#alarmbar .abrow .mg { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#alarmbar .abrow .src { color: var(--mute); white-space: nowrap; }
#alarmbar .abrow .tm { color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
#alarmbar .abrow.active { border-left-color: var(--bad); background: rgba(224, 73, 58, .14); }
#alarmbar .abrow.active .lv { color: #ff8a7a; }
#alarmbar .abrow.active.unack { animation: pkblink 1.5s ease-in-out infinite; }
#alarmbar .abrow.cleared { opacity: .72; } #alarmbar .abrow.cleared .lv { color: var(--off); }
/* 手機：警報列窄，讓訊息優先，省略點位欄 */
@media (max-width: 760px) { #alarmbar .abrow .src { display: none; } #alarmbar { padding-left: 10px; padding-right: 10px; } }
/* 線上展示：主內容要讓開底部警報列（158）＋分頁列（50） */
body.demo-view #main { padding-bottom: calc(env(safe-area-inset-bottom) + 230px); }

/* ---------- 即時值：依系統分組（標題＋格線） ---------- */
.vgroup { font-size: 18px; font-weight: 700; color: var(--ink); margin: 18px 4px 10px; padding: 2px 0 2px 11px;
  border-left: 4px solid var(--acc); display: flex; align-items: baseline; gap: 10px; }
.vgroup:first-of-type { margin-top: 4px; }
.vgroup .gc { font-size: 14px; font-weight: 600; color: var(--mute); }
/* 設備狀態文字沿用數值級（V），不另開新字級 */
.estat.est-run .v { color: var(--ok); } .estat.est-stop .v { color: var(--off); } .estat.est-fault .v { color: var(--bad); font-weight: 800; }
@media (min-width: 960px) {
  body.demo-view .vgroup { font-size: 18px; }
  body.demo-view .vgroup + .vals { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ---------- 首頁滿版：登入區左右不再留大白邊 ---------- */
@media (min-width: 960px) {
  body.home-view #main { max-width: min(1680px, 96vw); }
  body.home-view .auth { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 22px; align-items: start; }
  body.home-view .auth .why { display: grid; gap: 10px; align-content: start; }
  body.home-view .auth .login-card { margin: 0; }
  body.home-view .hint { grid-column: 1 / -1; }
}
.whyc { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 12px; padding: 13px 15px; }
.whyc b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 3px; }
.whyc span { display: block; color: var(--mute); font-size: 14px; line-height: 1.5; }
.auth .why { display: none; }