/* 觸控 HMI 主題 — 覆蓋層，載入於 app.css 之後。
 *
 * 配色依 High-Performance HMI（ISA-101）慣例：中性深灰底、節制用色，
 * 顏色只保留給狀態訊號（綠=正常、黃=注意、紅=異常），避免全畫面彩度過高
 * 而讓警示失去意義。純黑底長時間監看易疲勞，因此採深灰而非黑。
 *
 * app.css 的版面（grid / flex）維持不變，這裡只換視覺層；class 名稱全部沿用，
 * 頁面結構與測試不受影響，移除本檔即還原。
 */

/* --- 字級：放大以利站立距離閱讀 ------------------------------------------ */
html { font-size: 17px; }

:root {
  /* 中性灰階（不帶色偏，讓狀態色更突出） */
  --canvas: #21242a;           /* 頁面底 */
  --surface: #2b2f36;          /* 卡片 */
  --surface-2: #333841;        /* 次層／輸入框 */
  --surface-3: #3b414b;        /* 提升層／hover */
  --line: #3d434c;
  --line-soft: #343a42;

  --ink: #e7eaef;              /* 主文字 */
  --ink-2: #c2c8d2;
  --muted: #8d949f;

  /* 狀態色：僅用於訊號，不做大面積裝飾 */
  --green: #46a85b;
  --green-dark: #6cc47e;       /* 深底上的連結／強調 */
  --green-soft: #23392a;
  --lime: #8bc34a;
  --amber: #d9a134;
  --amber-soft: #3a3018;
  --orange: #d98040;
  --red: #d9534f;
  --red-soft: #3b2222;
  --navy: #262a31;
  --navy-2: #2f343c;

  --shadow: 0 4px 16px rgba(0, 0, 0, .35);
  --hmi-radius: 12px;
  --hmi-edge: rgba(255, 255, 255, .06);
}

body.app-body,
body.login-body { background: var(--canvas); color: var(--ink); }

/* 全站工作區共用主題，沿用主控制台建立的色彩與元件規則。 */
body[data-console-theme] { transition: background-color .2s ease, color .2s ease; }

.theme-toggle {
  display: inline-flex;
  min-width: 78px;
  height: 36px;
  margin-left: 10px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--ink); }
.theme-toggle:focus-visible { outline: 3px solid rgba(70, 168, 91, .35); outline-offset: 2px; }
.theme-toggle-icon { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; }
html[data-console-theme="dark"] .theme-toggle-icon { background: currentColor; box-shadow: inset -4px -2px 0 var(--surface-2); }
html[data-console-theme="light"] .theme-toggle-icon { background: #e4a735; border-color: #e4a735; box-shadow: 0 0 0 3px rgba(228, 167, 53, .16); }

html[data-console-theme="light"] body[data-console-theme] {
  --canvas: #f3f6f4;
  --surface: #ffffff;
  --surface-2: #f3f6f4;
  --surface-3: #e8efeb;
  --line: #d6e1dc;
  --line-soft: #e8efeb;
  --ink: #142b26;
  --ink-2: #29433c;
  --muted: #687b74;
  --green: #179a6b;
  --green-dark: #0b7250;
  --green-soft: #e8f5ef;
  --amber-soft: #fff4dc;
  --red-soft: #fcedeb;
  --navy: #e8efeb;
  --navy-2: #ffffff;
  --shadow: 0 8px 24px rgba(20, 43, 38, .08);
}
html[data-console-theme="light"] body[data-console-theme] .sidebar { background: #102621; border-right-color: rgba(255,255,255,.08); }
html[data-console-theme="light"] body[data-console-theme] .sidebar .brand-copy b,
html[data-console-theme="light"] body[data-console-theme] .sidebar .plant-line b { color: #eaf4f0; }
html[data-console-theme="light"] body[data-console-theme] .sidebar .nav-link { color: #a9beb7; }
html[data-console-theme="light"] body[data-console-theme] .sidebar .nav-link.active { color: #fff; background: #20463c; }
html[data-console-theme="light"] body[data-console-theme] .topbar { background: rgba(255,255,255,.96); }
html[data-console-theme="light"] body[data-console-theme] .footer { background: #fff; }
html[data-console-theme="light"] body[data-console-theme] .connection-pill { background: #edf8f3; color: #0b7250; }
html[data-console-theme="light"] body[data-console-theme] .metric-state { color: #0b7250; }
html[data-console-theme="light"] body[data-console-theme] .metric-state.warning,
html[data-console-theme="light"] body[data-console-theme] .metric-state.watch { color: #8a5a08; }
html[data-console-theme="light"] body[data-console-theme] .metric-state.critical { color: #a93631; }
html[data-console-theme="light"] body[data-console-theme] .status-tag,
html[data-console-theme="light"] body[data-console-theme] .feature-monitor-card-head em { background: #eef3f0; }
html[data-console-theme="light"] body[data-console-theme] .data-table tbody tr:hover { background: #f5f8f6; }
html[data-console-theme="light"] body[data-console-theme] .command-summary { background: #f3f6f4; }
html[data-console-theme="light"] body[data-console-theme] .modal-backdrop { background: rgba(16,38,33,.48); }

@media (max-width: 680px) {
  .theme-toggle { min-width: 36px; width: 36px; padding: 0; }
  .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* =========================================================================
   1. 表面：把 app.css 所有白底改為深灰層
   ========================================================================= */
.panel,
.metric-card,
.compact-stat,
.health-card,
.approval-row,
.approval-stats article,
.command-modal,
.login-card,
.attention-item,
.map-node,
.shift-chip,
.health-score,
.evidence-chip,
.feature-monitor-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--hmi-radius);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.approval-list,
.login-panel,
.form-submit,
.radio-card {
  background: var(--navy);
  border-color: var(--line);
  border-radius: 10px;
}

.table-wrap {
  padding: 10px;
  background: var(--navy);
  border-color: var(--line);
}

.audit-list,
.service-list,
.attention-list,
.timeline,
.chart-wrap,
.feature-monitor-grid {
  background: var(--navy);
  border-color: var(--line);
}

html[data-console-theme="light"] body[data-console-theme] .table-wrap { background: #ffffff; }

.approval-list { padding: 10px; }
.attention-list { padding: 10px; }
html[data-console-theme="light"] body[data-console-theme] .approval-list { background: #ffffff; }
html[data-console-theme="light"] body[data-console-theme] .service-list { background: #ffffff; }
html[data-console-theme="light"] body[data-console-theme] .audit-list { background: #ffffff; }
html[data-console-theme="light"] body[data-console-theme] .logout-button { background: #edf8f3; }
html[data-console-theme="light"] body[data-console-theme] .attention-list,
html[data-console-theme="light"] body[data-console-theme] .timeline,
html[data-console-theme="light"] body[data-console-theme] .chart-wrap,
html[data-console-theme="light"] body[data-console-theme] .feature-monitor-grid { background: #ffffff; }

.approval-row { margin-bottom: 10px; }
.attention-item { margin-bottom: 10px; }
.attention-panel,
.timeline,
.audit-card,
.feature-monitor-overview { padding-bottom: 15px; }

.score-ring::before { background: var(--surface); }

/* =========================================================================
   2. 表單：白底白字是最容易踩的坑，逐一指名覆蓋
   （app.css 的 .login-form > label input 等特異性高於單純的 input）
   ========================================================================= */
input,
textarea,
select,
.login-form > label input,
.ack-form textarea,
.scenario-form input,
.scenario-form select,
.reason-field textarea,
.table-search input,
.table-search {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
}

.table-search input { border: 0; background: transparent; }

input::placeholder,
textarea::placeholder { color: var(--muted); }

.login-form > label input:focus,
.ack-form textarea:focus,
.scenario-form input:focus,
.reason-field textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(70, 168, 91, .22);
  outline: 0;
}

/* 表單標籤 */
.login-form > label > span,
.reason-field > span,
.scenario-form label > span { color: var(--ink-2); }

/* =========================================================================
   3. 按鈕
   ========================================================================= */
.button,
.icon-button,
.row-action,
.queue-filter button,
.chart-select button,
.feature-filters button,
.table-footer button,
.table-footer b,
.attention-item button,
.account-chips button,
.feature-monitor-detail-toolbar button,
.logout-button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-2);
}

.button { padding: 11px 18px; font-size: .9rem; font-weight: 600; }

.button:hover,
.icon-button:hover,
.row-action:hover,
.queue-filter button:hover,
.chart-select button:hover,
.account-chips button:hover,
.logout-button:hover { background: var(--surface-3); color: var(--ink); }

/* 主要動作用綠，但僅此一處大面積用色 */
.button.primary,
.button.approve,
.chart-select button.active,
.queue-filter button.active,
.feature-filters button.active {
  background: var(--green);
  border-color: #3c8f4e;
  color: #f2fbf4;
  font-weight: 700;
}

.button.danger { background: var(--red); border-color: #b8433f; color: #fff; }

/* =========================================================================
   4. 導覽 / 框架
   ========================================================================= */
.sidebar { background: #1c1f24; border-right: 1px solid var(--line); }
.brand-copy b { color: var(--ink); font-size: 1rem; }
.brand-copy small { color: var(--muted); letter-spacing: .1em; }

.nav-link { border-radius: 9px; color: var(--ink-2); font-size: .9rem; font-weight: 600; }
.nav-link:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.nav-link.active { background: var(--surface-3); color: #fff; box-shadow: inset 3px 0 0 var(--green); }
.nav-link em { background: var(--red); border-radius: 999px; color: #fff; font-size: .7rem; font-style: normal; }
.nav-section { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }

.plant-context { background: rgba(255, 255, 255, .04); border-radius: 10px; }
.plant-line b { color: var(--ink); font-size: .94rem; }

.topbar { background: #262a31; border-bottom: 1px solid var(--line); }
.context-item span, .update-time span { color: var(--muted); font-size: .7rem; letter-spacing: .1em; }
.context-item strong, .update-time strong { color: var(--ink); font-size: .98rem; }

.connection-pill {
  background: rgba(70, 168, 91, .14);
  border: 1px solid rgba(70, 168, 91, .4);
  border-radius: 999px;
  color: #7cc98c;
  font-size: .76rem;
  font-weight: 700;
}
.connection-pill i { background: var(--green); box-shadow: 0 0 6px rgba(70, 168, 91, .8); }
.connection-pill small { color: #8fae95; border-left-color: rgba(70, 168, 91, .28); }

.footer { background: #1c1f24; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }

/* =========================================================================
   5. 文字階層
   ========================================================================= */
.page-heading h1 { color: var(--ink); font-size: 1.6rem; }
.page-heading p, .panel-header p { color: var(--muted); font-size: .92rem; }
.eyebrow { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.eyebrow.inverse { color: var(--ink-2); }
.panel-header h2, .hmi-module-title { color: var(--ink); font-size: 1.06rem; }
.panel-header a, .hmi-module-link { color: var(--green-dark); font-weight: 600; }

/* =========================================================================
   6. 數值與狀態
   ========================================================================= */
.metric-card strong { color: var(--ink); font-size: 2.4rem; letter-spacing: -.01em; }
.compact-stat strong { color: var(--ink); font-size: 1.45rem; }
.health-card strong { color: var(--ink); font-size: 1.65rem; }
.metric-top span { color: var(--muted); font-size: .84rem; }
.metric-foot, .metric-foot small { color: var(--muted); font-size: .8rem; }

/* 只有異常才上色 */
.metric-card:has(.metric-state.critical) strong { color: #ef7b77; }
.metric-card:has(.metric-state.warning) strong,
.metric-card:has(.metric-state.watch) strong { color: #e3b45c; }
.health-card.watch strong { color: #e3b45c; }

.metric-state, .status-tag {
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
}
.metric-state { background: rgba(70, 168, 91, .16); color: #7cc98c; }
.metric-state i { background: var(--green); box-shadow: 0 0 6px rgba(70, 168, 91, .7); }
.metric-state.critical { background: rgba(217, 83, 79, .18); color: #ef7b77; }
.metric-state.critical i { background: var(--red); box-shadow: 0 0 6px rgba(217, 83, 79, .8); }
.metric-state.warning, .metric-state.watch { background: rgba(217, 161, 52, .16); color: #e3b45c; }
.metric-state.warning i, .metric-state.watch i { background: var(--amber); box-shadow: 0 0 6px rgba(217, 161, 52, .8); }

.status-tag { background: rgba(255, 255, 255, .06); color: var(--ink-2); }
.status-tag.success { background: rgba(70, 168, 91, .16); color: #7cc98c; }
.status-tag.warning { background: rgba(217, 161, 52, .16); color: #e3b45c; }
.status-dot.normal { background: var(--green); box-shadow: 0 0 6px rgba(70, 168, 91, .7); }

/* =========================================================================
   7. 表格
   ========================================================================= */
.data-table { font-size: .88rem; }
.data-table thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .78rem;
  padding: 12px 14px;
}
.data-table td { border-bottom: 1px solid var(--line-soft); color: var(--ink); padding: 12px 14px; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, .035); }
.data-table td strong { color: var(--ink); }
.table-footer { color: var(--muted); font-size: .82rem; }
.table-search { color: var(--muted); }

/* =========================================================================
   8. 其他區塊
   ========================================================================= */
.hero-status { background: var(--navy-2); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--hmi-radius); }
.hero-status-copy h2 { color: var(--ink); font-size: 1.42rem; }
.hero-status-copy p { color: var(--ink-2); font-size: .92rem; }
.hero-status-meta span { color: var(--muted); font-size: .72rem; }
.hero-status-meta b { color: var(--ink); font-size: 1.1rem; }

.health-card span { color: var(--muted); font-size: .88rem; }
.health-card small { color: var(--muted); font-size: .78rem; }
.health-card.watch { border-color: rgba(217, 161, 52, .4); }

.attention-item b { color: var(--ink); font-size: .96rem; }
.attention-item p { color: var(--muted); font-size: .86rem; }
.item-tag { color: var(--green-dark); font-size: .7rem; letter-spacing: .1em; }

.alarm-row b, .alarm-item b { color: var(--ink); }
.alarm-row small, .alarm-time small { color: var(--muted); }
.severity-icon.critical { background: rgba(217, 83, 79, .16); border-color: rgba(217, 83, 79, .38); color: #ef7b77; }
.severity-icon.watch { background: rgba(217, 161, 52, .16); border-color: rgba(217, 161, 52, .38); color: #e3b45c; }

.timeline b { color: var(--ink); }
.timeline p, .timeline small { color: var(--muted); }
.audit-list b { color: var(--ink); }
.audit-list small, .audit-time { color: var(--muted); }
.service-list b { color: var(--ink); }
.service-list small { color: var(--muted); }

/* 特徵監控牆 */
.feature-monitor-card { border-radius: 10px; }
.feature-monitor-card b, .feature-monitor-reading strong { color: var(--ink); }
.feature-monitor-card small, .feature-monitor-reference { color: var(--muted); }
.feature-monitor-card:hover { background: var(--surface-3); }
.feature-monitor-card.selected { background: var(--surface-3); border-color: var(--green); }
.feature-monitor-detail { background: var(--surface); border-color: var(--line); }
.feature-monitor-detail-value strong, .feature-monitor-detail-stats strong { color: var(--ink); }
.feature-monitor-detail-stats span, .feature-monitor-detail-meta span { color: var(--muted); }
.feature-monitor-detail-meta b { color: var(--ink); }

/* 登入頁 */
.login-visual { background: linear-gradient(160deg, #262a31, #1a1d22); }
.login-card h1, .login-visual h1 { color: var(--ink); }
.login-visual p { color: var(--ink-2); }
.demo-account { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2); }

/* 彈窗與提示 */
.modal-backdrop { background: rgba(0, 0, 0, .64); }
.command-modal h2 { color: var(--ink); font-size: 1.3rem; }
.command-modal p { color: var(--ink-2); font-size: .92rem; }
.command-summary { background: rgba(255, 255, 255, .04); border-radius: 10px; }
.command-summary span { color: var(--muted); }
.command-summary b { color: var(--ink); }
.safety-note { background: rgba(217, 161, 52, .1); border-radius: 9px; color: #ddbe86; }
.field-error { color: #ef7b77; }
.toast { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }

/* =========================================================================
   9. 主控台：觸控面板佈局
   ========================================================================= */
.hmi-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; margin-bottom: 16px; }
.hmi-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.hmi-module {
  padding: 17px 19px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--hmi-radius);
  box-shadow: var(--shadow);
}
.hmi-module-title { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; font-weight: 700; }
.hmi-module-title .icon { width: 20px; height: 20px; color: var(--muted); }
.hmi-module-note { margin: -6px 0 13px; color: var(--muted); font-size: .84rem; }
.hmi-module-link { display: inline-block; margin-top: 11px; font-size: .86rem; }
.hmi-empty { margin: 0; padding: 20px 0; color: var(--muted); text-align: center; }
/* ON / OFF 指示（唯讀狀態，非開關） */
.hmi-status-body { display: flex; flex-direction: column; gap: 14px; }
.hmi-toggle-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.hmi-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 9px 8px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.hmi-toggle span { color: var(--ink-2); font-size: .9rem; font-weight: 600; line-height: 1.2; }
.hmi-toggle i {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; font-size: .88rem; font-style: normal; font-weight: 800;
}
.hmi-toggle.on i { background: var(--green); color: #f2fbf4; box-shadow: 0 0 14px rgba(70, 168, 91, .4); }
.hmi-toggle.off i { background: #4d545e; color: var(--ink-2); }

.hmi-status-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; margin: 0; }
.hmi-status-facts div { padding: 9px 12px; background: var(--surface-2); border-radius: 9px; }
.hmi-status-facts dt { color: var(--muted); font-size: .72rem; letter-spacing: .06em; }
.hmi-status-facts dd { margin: 3px 0 0; color: var(--ink); font-size: .95rem; font-weight: 700; }

/* 命令鍵盤 */
.hmi-keypad { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
.control-button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  font-weight: 700;
}
.control-button:hover { background: var(--surface-3); }
.control-button:active { transform: translateY(1px); }
.control-button.start { background: var(--green); border-color: #3c8f4e; color: #f2fbf4; }
.control-button.emergency { background: var(--red); border-color: #b8433f; color: #fff; }
.hmi-keypad .control-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 112px; padding: 15px 12px; text-align: center;
}
.hmi-keypad .control-button .icon { width: 26px; height: 26px; }
.hmi-keypad .control-button b { font-size: .96rem; letter-spacing: .03em; }
.hmi-keypad .control-button small { font-size: .76rem; opacity: .82; }

/* 右側讀數欄 */
.hmi-rail.metric-grid { display: flex; flex-direction: column; gap: 11px; }
.hmi-stat { padding: 14px 16px; border-left: 3px solid var(--line); }
.hmi-stat.watch, .hmi-stat.warning { border-left-color: var(--amber); }
.hmi-stat.critical { border-left-color: var(--red); }
.hmi-stat .metric-top { margin-bottom: 5px; }
.hmi-stat .metric-top span { font-size: .8rem; }
.hmi-stat strong { display: block; font-size: 2rem; line-height: 1.1; }
.hmi-stat .metric-foot { margin-top: 5px; font-size: .76rem; }
.hmi-health strong span { font-size: 1.1rem; color: var(--muted); }

@media (max-width: 1080px) {
  .hmi-layout { grid-template-columns: minmax(0, 1fr); }
  .hmi-rail.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* --- 綠底／紅底按鈕的文字對比（WCAG AA ≥ 4.5:1）--------------------------
 * app.css 的 .login-submit 用 var(--green-dark) 當底、白字。--green-dark 在深色
 * 主題裡是「亮色連結」用途，拿來當底就會白字配淺綠（實測 2.14:1）。綠底一律
 * 改配深字，紅底改用較深的紅，兩者都拉到 AA 之上。
 */
.login-submit,
.button.primary,
.button.approve,
.control-button.start,
.chart-select button.active,
.queue-filter button.active,
.feature-filters button.active {
  background: var(--green);
  color: #0d2a14;
}
.login-submit:hover,
.button.primary:hover,
.control-button.start:hover { background: #55b76a; }

.button.danger,
.control-button.emergency { background: #c2403c; border-color: #a83733; color: #fff; }
.button.danger:hover,
.control-button.emergency:hover { background: #cf4a46; }

/* --- 殘留白底清理 -------------------------------------------------------
 * 以下選擇器在 app.css 的特異性高於前面的通則（例如 .button.secondary 之於
 * .button），或使用 color-mix(... , white) 產生淺底，需逐一指名。
 */
.button.secondary,
.button.tertiary,
.feature-monitor-detail-toolbar button,
.attention-item button,
.table-footer button,
.table-footer b,
.account-chips button {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-2);
}

.avatar { background: var(--green-soft); color: #9ed6ac; }

.feature-stream-state { background: rgba(70, 168, 91, .14); border-color: rgba(70, 168, 91, .35); color: #7cc98c; }
.feature-stream-state small { color: #8fae95; }
.feature-stream-state.stale { background: var(--surface-2); border-color: var(--line); color: var(--muted); }

/* 特徵卡的狀態標籤用 color-mix(..., white)，在深色底下會變成亮塊 */
.feature-monitor-card-head em {
  background: rgba(255, 255, 255, .07);
  border-color: var(--line);
  color: var(--ink-2);
}

/* 特徵詳情側欄 */
.feature-monitor-detail,
.feature-monitor-detail-hero,
.feature-monitor-detail-chart-panel,
.feature-monitor-detail-stats,
.feature-monitor-detail-meta,
.feature-monitor-related {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.feature-monitor-detail-hero h3,
.feature-monitor-detail-stats strong,
.feature-monitor-detail-meta b { color: var(--ink); }
.feature-monitor-detail-hero p,
.feature-monitor-detail-stats span,
.feature-monitor-detail-stats small,
.feature-monitor-detail-meta span { color: var(--muted); }
.feature-monitor-detail-chart-panel header b { color: var(--ink); }
.feature-monitor-detail-chart-panel header span,
.feature-monitor-related header span { color: var(--muted); }

/* 詳情面板內層：統計格與時間範圍按鈕仍是淺底 */
.feature-monitor-detail-stats > div {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
.feature-monitor-detail-chart-panel header button {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-2);
}
.feature-monitor-detail-chart-panel header button.active {
  background: var(--green);
  border-color: #3c8f4e;
  color: #0d2a14;
}
.feature-monitor-detail-chart-panel header button:disabled { color: var(--muted); opacity: .55; }

/* --- 彩色底的文字對比收尾 -------------------------------------------------
 * 綠底一律配深綠字、紅底改用較深的紅配白字，讓狀態徽章也達到 AA。
 */
.hmi-toggle.on i { color: #0d2a14; }

.nav-link em { background: #c2403c; color: #fff; }

.feature-monitor-detail-chart-panel header button:disabled { opacity: .7; }

.large-avatar { background: var(--green-soft); color: #9ed6ac; border-radius: 12px; }

/* =========================================================================
   10. 遠距可讀性：主控台要能站在機台旁一眼判讀狀態，並立即停機
   ========================================================================= */

/* --- 命令區：app.css 的 .control-strip 是 220px|1fr 兩欄，按鈕會被擠進窄欄
       而垂直堆疊。改為單欄，讓三顆命令鍵橫向佔滿。 -------------------- */
.control-strip.hmi-module {
  display: block;
  min-height: 0;
  background: var(--surface);
  color: var(--ink);
}

.hmi-keypad { grid-template-columns: repeat(3, 1fr); gap: 14px; }

.hmi-keypad .control-button {
  min-height: 132px;
  padding: 18px 14px;
  border-width: 2px;
  text-align: center;
}
.hmi-keypad .control-button .icon { width: 34px; height: 34px; stroke-width: 2; }
.hmi-keypad .control-button b { font-size: 1.2rem; font-weight: 800; letter-spacing: .04em; }
/* 說明文字先前用 opacity 調淡，在彩色底上幾乎看不見 —— 改為足夠的實色 */
.hmi-keypad .control-button small { font-size: .88rem; font-weight: 600; opacity: 1; }
.control-button.start small { color: #10361a; }
.control-button.emergency small { color: #fff0ef; }
.hmi-keypad .control-button.stop small { color: var(--ink-2); }

/* 停機是安全動作，給它最強的視覺重量 */
.control-button.emergency { box-shadow: 0 0 0 2px rgba(217, 83, 79, .28), var(--shadow); }

@media (max-width: 780px) {
  .hmi-keypad { grid-template-columns: 1fr; }
}

/* --- 特徵牆：原字級最小僅 .44rem（約 7px），站遠了看不見 ---------------- */
.feature-monitor-card-head b { font-size: .95rem; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.feature-monitor-card-head small { margin-top: 4px; font-size: .82rem; color: var(--muted); }
.feature-monitor-card-head em {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
}
.feature-monitor-reading strong { font-size: 2.05rem; letter-spacing: -.02em; }
.feature-monitor-reading small { font-size: .86rem; color: var(--muted); }
.feature-monitor-reference { margin-top: 10px; gap: 16px; font-size: .78rem; }
.feature-monitor-reference b { color: var(--ink-2); font-weight: 700; }
.feature-monitor-quality { font-size: .74rem; }
.feature-monitor-quality time { font-size: .74rem; }

/* 分類頁籤與統計也放大 */
.feature-monitor-tabs button { font-size: .88rem; padding: 8px 14px; }
.feature-monitor-summary span { font-size: .84rem; }
.feature-monitor-summary b { font-size: 1rem; }
.feature-monitor-header h2 { font-size: 1.24rem; }
.feature-monitor-header p { font-size: .88rem; }

/* --- 異常要在遠處就跳出來：整張卡染色，而非只有細邊框 ------------------- */
.feature-monitor-card { border-left: 5px solid transparent; }
.feature-monitor-card.watch { background: linear-gradient(180deg, rgba(217, 161, 52, .16), rgba(217, 161, 52, .07)); border-color: rgba(217, 161, 52, .5); border-left-color: var(--amber); }
.feature-monitor-card.warning { background: linear-gradient(180deg, rgba(217, 128, 64, .2), rgba(217, 128, 64, .09)); border-color: rgba(217, 128, 64, .55); border-left-color: var(--orange); }
.feature-monitor-card.critical { background: linear-gradient(180deg, rgba(217, 83, 79, .24), rgba(217, 83, 79, .1)); border-color: rgba(217, 83, 79, .6); border-left-color: var(--red); }
.feature-monitor-card.normal { border-left-color: rgba(70, 168, 91, .55); }

.feature-monitor-card.watch .feature-monitor-reading strong { color: #e8bf6d; }
.feature-monitor-card.warning .feature-monitor-reading strong { color: #ef9c62; }
.feature-monitor-card.critical .feature-monitor-reading strong { color: #f28b86; }

.feature-monitor-card.watch .feature-monitor-card-head em { background: rgba(217, 161, 52, .24); color: #f0cb84; border-color: rgba(217, 161, 52, .5); }
.feature-monitor-card.warning .feature-monitor-card-head em { background: rgba(217, 128, 64, .26); color: #f4ac78; border-color: rgba(217, 128, 64, .55); }
.feature-monitor-card.critical .feature-monitor-card-head em { background: rgba(217, 83, 79, .28); color: #f7a4a0; border-color: rgba(217, 83, 79, .6); }

/* --- 異常摘要橫幅：整條顏色就是結論，站遠了先看到它 --------------------- */
.hmi-alert-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 22px;
  border: 1px solid;
  border-left-width: 6px;
  border-radius: var(--hmi-radius);
}

.hmi-status-module .hmi-alert-banner { margin: 16px 0 0; }

.hmi-alert-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
}

.hmi-alert-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hmi-alert-copy b { font-size: 1.55rem; font-weight: 800; letter-spacing: .04em; line-height: 1.15; }
.hmi-alert-copy small { font-size: .92rem; }

.hmi-alert-banner.ok { background: rgba(70, 168, 91, .14); border-color: rgba(70, 168, 91, .45); }
.hmi-alert-banner.ok .hmi-alert-copy b { color: #8ad49a; }
.hmi-alert-banner.ok .hmi-alert-copy small { color: #9bb7a2; }
.hmi-alert-banner.ok .hmi-alert-icon { background: var(--green); color: #0d2a14; }
.hmi-alert-banner.ok .hmi-alert-icon::before { content: "✓"; }

.hmi-alert-banner.watch { background: rgba(217, 161, 52, .16); border-color: rgba(217, 161, 52, .5); }
.hmi-alert-banner.watch .hmi-alert-copy b { color: #f0cb84; }
.hmi-alert-banner.watch .hmi-alert-copy small { color: #c4b389; }
.hmi-alert-banner.watch .hmi-alert-icon { background: var(--amber); color: #2a2005; }
.hmi-alert-banner.watch .hmi-alert-icon::before { content: "!"; }

.hmi-alert-banner.critical { background: rgba(217, 83, 79, .18); border-color: rgba(217, 83, 79, .55); }
.hmi-alert-banner.critical .hmi-alert-copy b { color: #f7a4a0; }
.hmi-alert-banner.critical .hmi-alert-copy small { color: #d4a9a7; }
.hmi-alert-banner.critical .hmi-alert-icon { background: #c2403c; color: #fff; }
.hmi-alert-banner.critical .hmi-alert-icon::before { content: "!"; }

/* --- 緊急停機最大化：安全動作要最容易命中 -------------------------------- */
.hmi-keypad { grid-template-columns: 1fr 1fr 1.45fr; }
.hmi-keypad .control-button.emergency { min-height: 150px; }
.hmi-keypad .control-button.emergency .icon { width: 42px; height: 42px; }
.hmi-keypad .control-button.emergency b { font-size: 1.5rem; }
.hmi-keypad .control-button.emergency small { font-size: .94rem; }

@media (max-width: 780px) {
  .hmi-keypad { grid-template-columns: 1fr; }
}