:root {
  --bg: #061226;
  --bg-2: #0a1d36;
  --panel: #0b203b;
  --text: #d6e7ff;
  --muted: #8db0d8;
  --line: #26496f;
  --good: #32e0b8;
  --warn: #ff8f5e;
  --accent: #16cfff;
  --accent-2: #1ce2c7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  font-family: "IBM Plex Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 15% 10%, #0f3158, var(--bg)) fixed;
}

.aurora { position: fixed; z-index: -1; filter: blur(58px); opacity: 0.52; }
.aurora-a { width: 420px; height: 420px; background: #1aa2ff40; top: -120px; left: -60px; }
.aurora-b { width: 460px; height: 460px; background: #1ce2c734; right: -80px; bottom: -120px; }

.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 12px 26px 6px; }
.eyebrow { margin: 0; color: var(--accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
h1 { margin: 3px 0 4px; font-size: 28px; }
h2 { margin: 0; font-size: 18px; }
.meta { margin: 0; color: var(--muted); font-size: 13px; }
.topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.top-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.top-actions-single { flex-wrap: nowrap; }
.badge { font-size: 13px; border: 1px solid #2f5f91; padding: 8px 12px; border-radius: 999px; background: #0f3157; color: #cde6ff; }
.view-switch { display: flex; gap: 8px; }
.view-switch .btn { padding: 7px 12px; border-radius: 999px; }
.view-switch .btn.active { background: linear-gradient(90deg,var(--accent),var(--accent-2)); border-color: transparent; color: #fff; }

.metrics-row { padding: 0 26px; display: grid; gap: 10px; grid-template-columns: repeat(7, minmax(0,1fr)); }
.kpi { background: linear-gradient(180deg, #12305a, #0a1f3b); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: inset 0 0 0 1px #58abff1a, 0 8px 18px #00000036; }
.kpi span { color: var(--muted); font-size: 12px; }
.kpi strong { display: block; margin-top: 4px; font-size: 30px; line-height: 1; }
.kpi small { color: var(--muted); }

.dashboard { padding: 14px 26px 24px; display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0,1fr)); }
.panel { border: 1px solid var(--line); background: linear-gradient(180deg, #0b2342, #0a1d36); border-radius: 16px; padding: 14px; box-shadow: inset 0 0 0 1px #52a8ff16, 0 10px 24px #00000030; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.audit-tools { display: flex; gap: 8px; align-items: center; }
.audit-tools select { min-width: 96px; }
.audit-tools input { min-width: 210px; }

.trend-panel { grid-column: span 8; grid-row: 1; }

.ops-panel { grid-column: span 4; }
.ops-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 8px; }
.ops-kpi {
  border: 1px solid #2f5f91;
  border-radius: 10px;
  background: #0e2a4a;
  padding: 8px 10px;
}
.ops-kpi span { display: block; color: #8fb6de; font-size: 12px; }
.ops-kpi strong { display: block; margin-top: 4px; font-size: 22px; line-height: 1.1; }

.status-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #2f5f91;
  font-size: 12px;
  margin-left: 6px;
}
.status-good { color: #7ff7bd; border-color: #2f8f71; background: #123d36; }
.status-warn { color: #ffb084; border-color: #8d563f; background: #3d251d; }
.status-bad { color: #ff7e7e; border-color: #8d3f50; background: #3a1c28; }

.energy-trend-panel { grid-column: span 12; }
.monitor-panel { grid-column: span 4; grid-row: 1; align-self: start; margin-top: 0; }
.ai-panel, .process-panel, .runtime-panel, .diagnosis-panel, .integration-panel, .marketplace-panel, .config-panel, .stock-panel, .alert-panel, .report-panel, .seal-panel, .audit-panel, .triplog-panel, .monitor-panel { grid-column: span 4; }
body.operator-mode .advanced-panel { display: none; }
body.operator-mode .trend-panel { grid-column: span 8; grid-row: 1; }
.energy-trend-panel { grid-column: span 12; }
body.operator-mode .process-panel { grid-column: span 4; }
body.operator-mode .monitor-panel,
body.operator-mode .ai-panel,
body.operator-mode .runtime-panel,
body.operator-mode .diagnosis-panel,
body.operator-mode .stock-panel,
body.operator-mode .alert-panel,
body.operator-mode .report-panel,
body.operator-mode .triplog-panel { grid-column: span 4; }
body.engineer-mode .advanced-panel { display: block; }

canvas { width: 100%; border: 1px solid #2b4f75; border-radius: 12px; background: linear-gradient(180deg,#0f2c4f,#0a1f3b); }
.trend-echart { width: 100%; height: 360px; border: 1px solid #2b4f75; border-radius: 12px; background: linear-gradient(180deg,#0f2c4f,#0a1f3b); }
.energy-trend-echart { height: 320px; }
.trend-triple {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.trend-mini-card {
  border-radius: 12px;
  background: linear-gradient(180deg,#0f2c4f,#0a1f3b);
  padding: 8px;
}
.trend-mini-title {
  color: #9ac2e8;
  font-size: 12px;
  margin: 0 0 6px;
}
.trend-mini-echart { width: 100%; height: 290px; }
.recent-water-list {
  display: none;
}
.recent-water-row {
  display: grid;
  grid-template-columns: 100px repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px dashed #24496f;
  font-size: 12px;
}
.recent-water-row:last-child { border-bottom: 0; }
.rw-time { color: #95bde2; font-weight: 700; }
.rw-cod { color: #25ddff; }
.rw-nh3 { color: #ffab76; }
.rw-do { color: #91c9ff; }
.rw-ph { color: #8fe28a; }
.rw-flow { color: #78f2ad; }
.recent-water-empty { color: #93b8dd; font-size: 12px; padding: 8px 10px; }
.energy-insight { margin-top: 10px; padding: 10px; border: 1px solid #315b86; border-radius: 10px; background: #0d2a4a; }
.energy-insight p { margin: 6px 0; }
.trend-readout {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #315b86;
  border-radius: 10px;
  background: #0d2a4a;
  color: #b9d6f2;
  font-size: 13px;
  line-height: 1.35;
}
.trend-switch { display: flex; gap: 8px; margin: 6px 0 10px; }
.trend-switch .btn { padding: 6px 10px; border-radius: 999px; font-size: 12px; }
.trend-switch .btn.active {
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  border-color: transparent;
  color: #fff;
}
.flow-svg { width: 100%; height: auto; border: 1px solid #2c5077; border-radius: 12px; background: linear-gradient(180deg,#113257,#0b213d); }
.node { fill: #102d4f; stroke: #3f6f9e; stroke-width: 2; }
.node.out { fill: #12385b; }
.flow-svg text { fill: #d2e8ff; font-size: 15px; font-weight: 600; }
.pipe { fill: none; stroke: url(#pipe); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 11 9; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.pulse { fill: #f27f50; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.4); opacity: .25; } }

.process-real-svg .eq-block { fill: #103459; stroke: #3f79ab; stroke-width: 2; }
.process-real-svg .eq-inlet { fill: #0f3557; }
.process-real-svg .eq-pump { fill: #17345a; }
.process-real-svg .eq-bio1 { fill: #113960; }
.process-real-svg .eq-bio2 { fill: #10355a; }
.process-real-svg .eq-aer { fill: #0f3b5e; }
.process-real-svg .eq-out { fill: #134066; }
.process-real-svg .eq-dose { fill: #3a2350; stroke: #8c62bf; }
.process-real-svg .eq-air { fill: #1d4a34; stroke: #58ab7b; }
.process-real-svg .eq-title { fill: #d8edff; font-size: 24px; font-weight: 700; }
.process-real-svg .eq-title.small { font-size: 18px; }
.process-real-svg .eq-sub { fill: #9dc3e6; font-size: 14px; font-weight: 600; }
.process-real-svg .eq-pump-title { font-size: 13px; }
.process-real-svg .eq-pump-sub { font-size: 11px; }
.process-real-svg .pipe-main {
  fill: none;
  stroke: url(#pipeMain);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 11 8;
  animation: dash 1.2s linear infinite;
}
.process-real-svg .pipe-dose {
  fill: none;
  stroke: url(#pipeDose);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 6;
  animation: dash 1.6s linear infinite;
}
.process-real-svg .pipe-air {
  fill: none;
  stroke: url(#pipeAir);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 6;
  animation: dash 1.8s linear infinite;
}
.sensor-badge .sensor-dot { fill: #7ff7bd; filter: drop-shadow(0 0 5px #7ff7bd88); }
.sensor-badge .sensor-tag-bg { fill: #0e2d4d; stroke: #3f6f9e; stroke-width: 1.5; }
.sensor-badge .sensor-tag-key { fill: #9ac4ea; font-size: 12px; font-weight: 700; }
.sensor-badge .sensor-tag-val { fill: #e4f6ff; font-size: 13px; font-weight: 700; }
.sensor-badge.sensor-warn .sensor-dot { fill: #ff8e8e; filter: drop-shadow(0 0 5px #ff8e8e99); }
.sensor-badge.sensor-warn .sensor-tag-bg { stroke: #b65f5f; fill: #3a2330; }
.sensor-badge.sensor-ok .sensor-tag-bg { stroke: #49a98b; }

/* Enlarge process schematic for device module */
.process-real-svg {
  width: 100%;
  height: 500px;
}

.path { margin-top: 10px; padding: 8px; border: 1px solid #315b86; border-radius: 10px; background: #0d2a4a; font-family: "Cascadia Mono", Consolas, monospace; color: #9ec7f0; }
.ai-status { border: 1px solid #2d5480; border-radius: 10px; background: #0d2b4b; padding: 10px; font-size: 13px; color: #b8d5f5; }
.ai-data-panel { grid-column: span 12; }
.ai-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.ai-detail-card {
  border-radius: 12px;
  padding: 10px;
  min-height: 220px;
}
.ai-detail-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.ai-plc-card { background: linear-gradient(180deg,#0d3157,#0a2442); border: 1px solid #2f6da1; }
.ai-analysis-card { background: linear-gradient(180deg,#3c2b14,#232018); border: 1px solid #8b6b30; }
.ai-advice-card { background: linear-gradient(180deg,#11362d,#122d28); border: 1px solid #2e8a72; }
.ai-warehouse-card { background: linear-gradient(180deg,#2d1842,#1d1f44); border: 1px solid #6950a1; }
.ai-sensor-row {
  display: grid;
  grid-template-columns: 70px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed #2d5f8a;
}
.sensor-name { color: #d7ecff; font-weight: 700; }
.sensor-tag { color: #98bcde; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.sensor-val { color: #e8f8ff; }
.advice-head { color: #7ef6ca; font-weight: 700; }
.stat-blue { color: #8ecbff; }
.stat-cyan { color: #6be9ff; }
.stat-green { color: #7ff7bd; }
.stat-orange { color: #ffc07a; }
.stat-red { color: #ff8a8a; }
.stat-purple { color: #c5a1ff; }
.device-pro-panel {
  grid-column: span 4;
  min-height: 300px;
}
.dev-ledger-row {
  display: grid;
  grid-template-columns: 120px repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #284f73;
}
.dev-eq-name { color: #cfe7ff; font-weight: 700; }
.dev-eq-metric { color: #9ec4e8; }
.dev-maint-row {
  border: 1px solid #2b5d86;
  border-radius: 10px;
  background: linear-gradient(180deg,#0f2f54,#0a2442);
  padding: 8px 10px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
}
.dev-maint-row strong { color: #e6f5ff; }
.dev-maint-row div { grid-column: 1 / -1; color: #a9cbed; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
input, select, textarea { border: 1px solid #376390; border-radius: 8px; padding: 8px; color: var(--text); background: #102b4a; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn { border: none; background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: #fff; border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.btn.ghost { background: #0f3157; border: 1px solid #2f5f91; color: #cae5ff; }
.btn:disabled, .btn.ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.list { margin: 0; padding: 0; }
.list li, .list div { list-style: none; padding: 8px 0; border-bottom: 1px dashed #2a537d; font-size: 13px; }
.detail-list li { display: flex; justify-content: space-between; gap: 12px; }
.item-k { color: #9ec5ea; }
.item-v { color: #d3e9ff; font-weight: 600; text-align: right; }
.diag-block {
  border: 1px solid #24486f;
  border-radius: 10px;
  background: #0c2848;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.diag-block:nth-child(1) { border-left: 4px solid #36d9ff; background: linear-gradient(90deg,#12395a,#0c2848); }
.diag-block:nth-child(2) { border-left: 4px solid #ffb36a; background: linear-gradient(90deg,#3d2f22,#0c2848); }
.diag-block:nth-child(3) { border-left: 4px solid #7be89f; background: linear-gradient(90deg,#1f3b32,#0c2848); }
.diag-block:nth-child(4) { border-left: 4px solid #b79dff; background: linear-gradient(90deg,#2c2642,#0c2848); }
.diag-block h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #8fb8df;
}
.diag-block p { margin: 0; color: #d0e6ff; font-size: 14px; line-height: 1.45; }
.stock-groups { display: grid; grid-template-columns: 1fr; gap: 8px; }
.stock-group h3 { margin: 0 0 6px; font-size: 13px; color: #8fb8df; }
.stock-group:first-child h3 { color: #6eeec7; }
.stock-group:last-child h3 { color: #8cc9ff; }
.small { margin-top: 8px; color: var(--muted); font-size: 13px; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; }
.pill { display: inline-block; margin-top: 6px; margin-right: 6px; padding: 2px 7px; border: 1px solid #365f89; border-radius: 999px; font-size: 12px; color: #aad0f5; background: #0e2d4e; }
.audit-meta { margin-top: 6px; }
.ok { color: var(--good); }
.warn { color: var(--warn); }
.zoomable-monitor { cursor: zoom-in; }

.monitor-lightbox { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.monitor-lightbox[hidden] { display: none !important; }
.monitor-lightbox-mask { position: absolute; inset: 0; background: #020b16d9; backdrop-filter: blur(2px); }
.monitor-lightbox-content {
  position: relative;
  width: min(1400px, 94vw);
  max-height: 92vh;
  border: 1px solid #2f5f91;
  border-radius: 14px;
  background: linear-gradient(180deg, #0f3157, #0a1f3b);
  padding: 14px;
  box-shadow: 0 16px 40px #00000080;
}
.monitor-lightbox-content img {
  width: 100%;
  user-select: none;
  border-radius: 10px;
  border: 1px solid #2b4f75;
  background: #0b213d;
  transform-origin: 0 0;
  cursor: grab;
}
.monitor-lightbox-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.monitor-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 30px 0 10px; }
.monitor-lightbox-viewport {
  width: 100%;
  max-height: calc(92vh - 130px);
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #2b4f75;
  background: #0b213d;
}

@media (max-width: 1200px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar-right { align-items: flex-start; width: 100%; }
  .top-actions-row { justify-content: flex-start; width: 100%; }
  .top-actions-single { flex-wrap: wrap; }
  .metrics-row { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .trend-panel, .ai-panel, .process-panel, .runtime-panel, .diagnosis-panel, .integration-panel, .marketplace-panel, .config-panel, .stock-panel, .alert-panel, .report-panel, .seal-panel, .audit-panel, .triplog-panel, .monitor-panel { grid-column: span 6; }
  body.operator-mode .monitor-panel,
  body.operator-mode .ai-panel,
  body.operator-mode .runtime-panel,
  body.operator-mode .diagnosis-panel,
  body.operator-mode .stock-panel,
  body.operator-mode .alert-panel,
  body.operator-mode .report-panel,
  body.operator-mode .triplog-panel { grid-column: span 6; }
}
@media (max-width: 760px) {
  .metrics-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard { grid-template-columns: 1fr; }
  .trend-panel, .ai-panel, .process-panel, .runtime-panel, .diagnosis-panel, .integration-panel, .marketplace-panel, .config-panel, .stock-panel, .alert-panel, .report-panel, .seal-panel, .audit-panel, .triplog-panel, .monitor-panel { grid-column: span 1; }
  .form-grid { grid-template-columns: 1fr; }
  .audit-tools { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .audit-tools input { min-width: 0; flex: 1; }
}




.monitor-panel .zoomable-monitor { margin-top: 34px; }







.left-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  border-right: 1px solid #24486f;
  background: linear-gradient(180deg, #071a31 0%, #061226 100%);
  z-index: 80;
  padding: 16px 14px;
  box-shadow: 6px 0 22px #00000033;
}
.side-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.side-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.side-title { font-size: 13px; color: #a8c9e9; letter-spacing: .04em; }
.side-nav { display: grid; gap: 8px; }
.side-nav-btn {
  width: 100%;
  text-align: left;
  border: 1px solid #2f5f91;
  background: #0c2a4a;
  color: #cde6ff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
}
.side-nav-btn:hover { border-color: #4b7fb4; background: #12345b; }
.side-nav-btn.active {
  border-color: transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
}

body { padding-left: 220px; }
.topbar, .metrics-row, .dashboard { margin-left: 0; }

.panel.module-hidden { display: none !important; }

@media (max-width: 1200px) {
  .left-sidebar {
    position: static;
    width: auto;
    border-right: none;
    border-bottom: 1px solid #24486f;
    padding: 10px 14px;
    box-shadow: none;
  }
  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body { padding-left: 0; }
}

@media (max-width: 760px) {
  .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-nav-btn { font-size: 13px; padding: 8px 10px; }
}

/* Desktop single-screen: move 6 module menus to top horizontal row */
@media (min-width: 1201px) {
  .left-sidebar {
    left: 0;
    top: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid #24486f;
    background: linear-gradient(180deg, #071a31 0%, #061427 100%);
    box-shadow: 0 6px 18px #00000033;
    z-index: 120;
  }
  .side-brand {
    margin-bottom: 0;
    min-width: 120px;
  }
  .side-nav {
    flex: 1;
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .side-nav-btn {
    width: auto;
    min-width: 98px;
    text-align: center;
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 10px;
  }

  body {
    padding-left: 0;
    padding-top: 72px;
  }
}

.shift-panel { grid-column: span 4; }
.rag-wrap { margin-top: 8px; padding: 8px; border: 1px solid #2f5f91; border-radius: 10px; background: #0c2744; }
.rag-label { color: #9ac0e6; font-size: 12px; margin-bottom: 6px; }
.rag-track { width: 100%; height: 12px; border-radius: 999px; background: #102c49; border: 1px solid #345f89; overflow: hidden; }
.rag-fill { height: 100%; width: 0%; transition: width .35s ease; background: linear-gradient(90deg,#ff5f6d,#ffc371); }
.equipment-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.equipment-chip { border: 1px solid #2f5f91; border-radius: 8px; padding: 6px 8px; font-size: 12px; color: #cfe7ff; background: #113357; }
.equipment-chip .state { float: right; font-weight: 700; }
.equipment-chip.good .state { color: #7ff7bd; }
.equipment-chip.warn .state { color: #ffb084; }
.equipment-chip.bad .state { color: #ff7e7e; }

/* ---- single-screen alignment with overview style ---- */
body {
  background:
    radial-gradient(circle at 50% 55%, #37b8ff18 0, transparent 48%),
    radial-gradient(circle at 50% 6%, #134f8f24 0, transparent 42%),
    linear-gradient(180deg, #061633 0, #041124 100%) fixed;
}

.left-sidebar,
.panel,
.kpi,
.badge,
input,
select,
textarea,
.rag-wrap,
.flow-svg,
.trend-echart,
canvas,
.trend-readout,
.energy-insight,
.path,
.monitor-lightbox-content,
.monitor-lightbox-viewport,
.monitor-lightbox-content img,
.stat-chip,
.ops-kpi,
.equipment-chip,
.side-nav-btn,
.btn.ghost {
  border: none !important;
  box-shadow: none !important;
}

.left-sidebar {
  background: linear-gradient(180deg, #081a32 0%, #061427 100%);
}

.side-nav-btn {
  background: #0d2b4b;
  color: #cbe8ff;
}
.side-nav-btn:hover { background: #12375d; }
.side-nav-btn.active {
  background: linear-gradient(90deg, #2ce0f3, #41d0ff);
  color: #083257;
}

.panel,
.kpi,
.badge,
.btn.ghost,
input,
select,
textarea,
.trend-echart,
canvas,
.flow-svg,
.energy-insight,
.path,
.trend-readout,
.rag-wrap {
  background: linear-gradient(180deg, #0b2445 0%, #081c36 100%);
}

.panel {
  border-radius: 14px;
}

h1 { font-size: 30px; letter-spacing: 0.3px; }
h2 { font-size: 19px; }
.meta, .small { color: #93b8dd; }

.kpi strong { color: #d8eeff; }
.ok { color: #6ef7bd; }
.warn { color: #ffb888; }

.device-sensor-panel .list li,
#energyOpsPanel .list li {
  border-bottom: 1px dashed #2a507433 !important;
}

/* ---- overview dedicated layout ---- */
.dashboard {
  grid-auto-flow: row dense;
  align-content: start;
}

body.module-overview .dashboard {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

body.module-overview .trend-panel { grid-column: span 8; min-height: 430px; }
body.module-overview .monitor-panel { grid-column: span 4; min-height: 430px; margin-top: 0; }

body.module-overview .energy-trend-panel { grid-column: span 8; min-height: 380px; }
body.module-overview #energyOpsPanel { grid-column: span 4; min-height: 380px; }

body.module-overview .process-panel { grid-column: span 4; min-height: 320px; }
body.module-overview #sensorPanel { grid-column: span 4; min-height: 320px; }
body.module-overview #aiPanel { grid-column: span 4; min-height: 320px; }

body.module-overview #runtimePanel { grid-column: span 4; min-height: 330px; }
body.module-overview #aiTakeoverPanel { grid-column: span 4; min-height: 330px; }
body.module-overview #aiDataPanel { grid-column: span 12; min-height: 320px; }
body.module-overview #diagPanel { grid-column: span 4; min-height: 330px; }

body.module-overview #complianceOpsPanel { grid-column: span 4; min-height: 300px; }
body.module-overview #alarmOpsPanel { grid-column: span 4; min-height: 300px; }
body.module-overview #shiftOpsPanel { grid-column: span 4; min-height: 300px; }

body.module-overview .stock-panel { grid-column: span 4; min-height: 300px; }
body.module-overview .alert-panel { grid-column: span 4; min-height: 300px; }
body.module-overview .report-panel { grid-column: span 4; min-height: 300px; }

body.module-overview #sealPanel { grid-column: span 4; min-height: 280px; }
body.module-overview #auditPanel { grid-column: span 4; min-height: 280px; }
body.module-overview .triplog-panel { grid-column: span 4; min-height: 280px; }

body.module-overview #integrationPanel,
body.module-overview #stationConfigPanel,
body.module-overview #runtimeConfigPanel,
body.module-overview #securityPanel,
body.module-overview #graphEnginePanel,
body.module-overview #marketplacePanel {
  grid-column: span 6;
  min-height: 280px;
}

body.module-overview .list {
  max-height: 100%;
  overflow: auto;
}

body.module-overview .panel-head {
  margin-bottom: 8px;
}

/* prevent narrow overflow chips in overview */
body.module-overview .ops-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.module-overview .ops-kpi strong {
  font-size: 18px;
}

@media (max-width: 1400px) {
  body.module-overview .trend-panel,
  body.module-overview .monitor-panel,
  body.module-overview .energy-trend-panel,
  body.module-overview #energyOpsPanel,
  body.module-overview .process-panel,
  body.module-overview #sensorPanel,
  body.module-overview #aiPanel,
  body.module-overview #runtimePanel,
  body.module-overview #aiTakeoverPanel,
  body.module-overview #diagPanel,
  body.module-overview #complianceOpsPanel,
  body.module-overview #alarmOpsPanel,
  body.module-overview #shiftOpsPanel,
  body.module-overview .stock-panel,
  body.module-overview .alert-panel,
  body.module-overview .report-panel,
  body.module-overview #sealPanel,
  body.module-overview #auditPanel,
  body.module-overview .triplog-panel,
  body.module-overview #integrationPanel,
  body.module-overview #stationConfigPanel,
  body.module-overview #runtimeConfigPanel,
  body.module-overview #securityPanel,
  body.module-overview #graphEnginePanel,
  body.module-overview #marketplacePanel {
    grid-column: span 6;
    min-height: 280px;
  }
}

/* overview layout via dashboard class */
.dashboard.overview-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.dashboard.overview-layout .trend-panel { grid-column: span 8; min-height: 430px; }
.dashboard.overview-layout .monitor-panel { grid-column: span 4; min-height: 430px; margin-top: 0; }
.dashboard.overview-layout .energy-trend-panel { grid-column: span 8; min-height: 380px; }
.dashboard.overview-layout #energyOpsPanel { grid-column: span 4; min-height: 380px; }
.dashboard.overview-layout .process-panel { grid-column: span 4; min-height: 320px; }
.dashboard.overview-layout #sensorPanel { grid-column: span 4; min-height: 320px; }
.dashboard.overview-layout #aiPanel { grid-column: span 4; min-height: 320px; }
.dashboard.overview-layout #runtimePanel { grid-column: span 4; min-height: 330px; }
.dashboard.overview-layout #aiTakeoverPanel { grid-column: span 4; min-height: 330px; }
.dashboard.overview-layout #aiDataPanel { grid-column: span 12; min-height: 320px; }
.dashboard.overview-layout #diagPanel { grid-column: span 4; min-height: 330px; }
.dashboard.overview-layout #complianceOpsPanel { grid-column: span 4; min-height: 300px; }
.dashboard.overview-layout #alarmOpsPanel { grid-column: span 4; min-height: 300px; }
.dashboard.overview-layout #shiftOpsPanel { grid-column: span 4; min-height: 300px; }
.dashboard.overview-layout .stock-panel { grid-column: span 4; min-height: 300px; }
.dashboard.overview-layout .alert-panel { grid-column: span 4; min-height: 300px; }
.dashboard.overview-layout .report-panel { grid-column: span 4; min-height: 300px; }
.dashboard.overview-layout #sealPanel { grid-column: span 4; min-height: 280px; }
.dashboard.overview-layout #auditPanel { grid-column: span 4; min-height: 280px; }
.dashboard.overview-layout .triplog-panel { grid-column: span 4; min-height: 280px; }
.dashboard.overview-layout #integrationPanel,
.dashboard.overview-layout #stationConfigPanel,
.dashboard.overview-layout #runtimeConfigPanel,
.dashboard.overview-layout #securityPanel,
.dashboard.overview-layout #graphEnginePanel,
.dashboard.overview-layout #marketplacePanel {
  grid-column: span 6;
  min-height: 280px;
}

/* Make "前一日设备/药剂/运行率" and "传感器状态与数据" less narrow/tall */
#energyOpsPanel,
#sensorPanel {
  grid-column: span 6;
  align-self: start;
  min-height: 260px;
}

#energyOpsPanel .list,
#sensorPanel .list {
  max-height: 240px;
  overflow: auto;
}

@media (max-width: 1200px) {
  #energyOpsPanel,
  #sensorPanel {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  #energyOpsPanel,
  #sensorPanel {
    grid-column: span 1;
  }
}

/* Water module layout: move Graph诊断 below 实时水质趋势 */
body.module-water .trend-panel {
  grid-column: span 12;
  min-height: 560px;
}

body.module-water #diagPanel {
  grid-column: span 6;
  align-self: stretch;
  min-height: 360px;
}

body.module-water .stock-panel {
  grid-column: span 6;
  align-self: stretch;
  min-height: 360px;
}

body.module-water .trend-switch,
body.module-water #trendEchart,
body.module-water #trend {
  display: none !important;
}

body.module-water .trend-triple {
  display: grid;
}

body.module-water .recent-water-list {
  display: block;
  margin-top: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg,#0d2a4b,#0b2240);
  padding: 4px 0;
}

body.module-water #diagPanel,
body.module-water .stock-panel {
  display: flex;
  flex-direction: column;
}

body.module-water #diagPanel .diag-block:last-child {
  margin-bottom: 0;
}

body.module-water .stock-panel .stock-groups {
  flex: 1;
}

body.module-water .stock-panel .detail-list {
  max-height: none;
}

/* Device module professional layout */
body.module-device .process-panel {
  grid-column: 1 / span 8;
  min-height: 560px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Overview row alignment: keep left process panel same visual height as right cards */
body.module-overview .process-panel,
.dashboard.overview-layout .process-panel,
body.module-overview #sensorPanel,
.dashboard.overview-layout #sensorPanel,
body.module-overview #aiPanel,
.dashboard.overview-layout #aiPanel {
  min-height: 420px;
  align-self: stretch;
}

/* Avoid oversized SVG in overview (device module keeps larger industrial canvas) */
body.module-overview .process-real-svg,
.dashboard.overview-layout .process-real-svg {
  height: 300px;
}

/* Overview typography upscale */
body.module-overview .process-panel .panel-head h2,
body.module-overview #sensorPanel .panel-head h2,
body.module-overview #aiPanel .panel-head h2,
.dashboard.overview-layout .process-panel .panel-head h2,
.dashboard.overview-layout #sensorPanel .panel-head h2,
.dashboard.overview-layout #aiPanel .panel-head h2 {
  font-size: 24px;
  line-height: 1.25;
}

body.module-overview .process-panel .meta,
body.module-overview #sensorPanel .meta,
body.module-overview #aiPanel .meta,
.dashboard.overview-layout .process-panel .meta,
.dashboard.overview-layout #sensorPanel .meta,
.dashboard.overview-layout #aiPanel .meta {
  font-size: 14px;
}

body.module-overview #sensorPanel .list li,
.dashboard.overview-layout #sensorPanel .list li {
  font-size: 16px;
  padding: 10px 0;
}

body.module-overview #aiPanel .ai-status,
.dashboard.overview-layout #aiPanel .ai-status {
  font-size: 16px;
  line-height: 1.5;
}
body.module-device #sensorPanel {
  grid-column: 9 / span 4;
  min-height: 560px;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
body.module-device #sensorPanel .list li {
  font-size: 17px;
  padding: 12px 0;
}
body.module-device #deviceHealthPanel { grid-column: 1 / span 3; min-height: 440px; }
body.module-device #deviceLedgerPanel { grid-column: 4 / span 4; min-height: 440px; }
body.module-device #deviceMaintenancePanel { grid-column: 8 / span 5; min-height: 440px; }

/* Fix header text crowding/overlap in device module */
body.module-device .process-panel .panel-head,
body.module-device #sensorPanel .panel-head,
body.module-device .device-pro-panel .panel-head {
  display: block !important;
  align-items: flex-start !important;
}
body.module-device .process-panel .panel-head h2,
body.module-device #sensorPanel .panel-head h2,
body.module-device .device-pro-panel .panel-head h2 {
  font-size: 19px;
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.2px;
}
body.module-device .process-panel .panel-head .meta,
body.module-device #sensorPanel .panel-head .meta,
body.module-device .device-pro-panel .panel-head .meta {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
}

/* Make process drawing more detailed and readable */
body.module-device .process-real-svg .eq-block {
  filter: drop-shadow(0 0 10px #1e4f7a55);
}
body.module-device .process-real-svg .eq-title {
  font-size: 20px;
}
body.module-device .process-real-svg .eq-title.small {
  font-size: 14px;
}
body.module-device .process-real-svg .eq-sub {
  font-size: 11px;
}
body.module-device .process-real-svg .eq-pump-title { font-size: 12px; }
body.module-device .process-real-svg .eq-pump-sub { font-size: 10px; }
body.module-device .process-real-svg .sensor-tag-key {
  font-size: 10px;
}
body.module-device .process-real-svg .sensor-tag-val {
  font-size: 11px;
}
body.module-device .process-real-svg .sensor-tag-bg {
  stroke-width: 2;
}
body.module-device .process-real-svg .pipe-main {
  stroke-width: 7;
}
body.module-device .process-real-svg .pipe-dose,
body.module-device .process-real-svg .pipe-air {
  stroke-width: 5;
}

/* Improve lower panels text density/readability */
body.module-device #deviceHealthPanel .ops-kpi strong {
  font-size: 32px;
}
body.module-device #deviceHealthPanel .ops-kpi span {
  font-size: 14px;
}
body.module-device .dev-ledger-row {
  grid-template-columns: 128px repeat(3, minmax(0, 1fr)) auto;
  font-size: 15px;
}
body.module-device .dev-maint-row {
  padding: 10px 12px;
}
body.module-device .dev-maint-row strong {
  font-size: 16px;
}
body.module-device .dev-maint-row div {
  font-size: 14px;
}

/* right module scrollbar fill to bottom and align with left block bottom */
body.module-device #sensorPanel .list {
  flex: 1;
  overflow-y: auto;
  max-height: none;
  margin-top: 8px;
  padding-right: 6px;
}

@media (max-width: 1200px) {
  .process-real-svg {
    height: 420px;
  }
  body.module-device .process-panel,
  body.module-device #sensorPanel {
    grid-column: span 6;
    min-height: 420px;
  }
  body.module-device #deviceHealthPanel,
  body.module-device #deviceLedgerPanel,
  body.module-device #deviceMaintenancePanel {
    grid-column: span 6;
    min-height: 320px;
  }
  body.module-device .process-panel .panel-head h2,
  body.module-device #sensorPanel .panel-head h2,
  body.module-device .device-pro-panel .panel-head h2 {
    font-size: 19px;
  }
}

/* Mobile first hardening: keep desktop untouched, optimize phone readability */
@media (max-width: 768px) {
  body {
    padding-left: 0 !important;
  }

  .left-sidebar {
    position: sticky;
    top: 0;
    z-index: 140;
    padding: 8px 10px;
  }

  .side-brand {
    margin-bottom: 8px;
  }

  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .side-nav-btn {
    text-align: center;
    font-size: 12px;
    padding: 8px 6px;
    border-radius: 8px;
  }

  .topbar {
    padding: 10px 12px 6px;
    gap: 10px;
  }

  .topbar h1 {
    font-size: 24px;
    line-height: 1.2;
  }

  .metrics-row {
    padding: 0 12px;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi {
    min-height: 88px;
    padding: 10px 10px;
  }

  .kpi strong {
    font-size: 42px;
    line-height: 1;
  }

  .dashboard {
    padding: 10px 12px 20px;
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .panel {
    min-height: 0 !important;
    padding: 10px 10px;
  }

  .panel-head h2 {
    font-size: 20px !important;
    line-height: 1.3;
  }

  .panel .meta,
  .panel .small,
  .list,
  .list li {
    font-size: 14px !important;
  }

  .actions {
    gap: 6px;
    flex-wrap: wrap;
  }

  .btn,
  .btn.ghost,
  .btn.tiny {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 10px;
  }

  .monitor-panel .zoomable-monitor {
    margin-top: 10px;
  }

  .process-real-svg {
    height: 280px !important;
  }
}

.item-v.inv-pac { color: #64e9ff; }
.item-v.inv-pam { color: #86f5ac; }
.item-v.inv-hypo { color: #ffd07f; }
.item-v.eng-total { color: #8fd7ff; }
.item-v.eng-power { color: #88f0ff; }
.item-v.eng-specific { color: #ffe091; }
.item-v.eng-blower { color: #7fc7ff; }
.item-v.eng-pump { color: #6fe7d5; }
.item-v.eng-dose { color: #ffb38c; }
.item-v.eng-other { color: #c8b3ff; }
.item-v.eng-carbon { color: #ff8f8f; }

@media (max-width: 1200px) {
  body.module-water #diagPanel,
  body.module-water .stock-panel {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  .trend-triple {
    grid-template-columns: 1fr;
  }
  .recent-water-row {
    grid-template-columns: 1fr 1fr;
  }
  body.module-water .trend-panel,
  body.module-water #diagPanel,
  body.module-water .stock-panel {
    grid-column: span 1;
    min-height: 0;
  }
  .ai-detail-grid {
    grid-template-columns: 1fr;
  }
  .ai-sensor-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .dev-ledger-row {
    grid-template-columns: 1fr;
  }
  .dev-maint-row {
    grid-template-columns: 1fr;
  }
  body.module-device .process-panel,
  body.module-device #sensorPanel,
  body.module-device #deviceHealthPanel,
  body.module-device #deviceLedgerPanel,
  body.module-device #deviceMaintenancePanel {
    grid-column: span 1;
    min-height: 0;
  }
  .process-real-svg {
    height: 320px;
  }
  body.module-device .process-panel .panel-head h2,
  body.module-device #sensorPanel .panel-head h2,
  body.module-device .device-pro-panel .panel-head h2 {
    font-size: 19px;
  }
}