:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 14px;
  font-synthesis: none;
  color: #e9f1f7;
  background: #09151f;
  --bg: #09151f;
  --panel: #101f2b;
  --panel-raised: #152734;
  --line: #263b49;
  --muted: #97acbb;
  --teal: #51d6c7;
  --access: #5dd6e6;
  --elevator: #b6a0ff;
  --lighting: #f0c56b;
  --hvac: #75adfa;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; }
button, select, input { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button, select {
  color: #e9f1f7;
  border: 1px solid #354c5d;
  border-radius: 6px;
  background: #172b39;
}
button { cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
button:hover:not(:disabled) { background: #203d4d; border-color: #63969e; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid #8feade; outline-offset: 3px; }
select { min-height: 38px; padding: 7px 28px 7px 10px; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 14px; font-weight: 650; }
.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.topbar { display: flex; align-items: center; gap: 22px; min-height: 82px; padding: 15px 22px; border-bottom: 1px solid var(--line); background: #0c1924; }
.home-link { display: inline-flex; align-items: center; gap: 8px; color: #a7bac8; white-space: nowrap; font-size: 12px; padding: 10px 0; }
.home-link:hover { color: #d8f8f2; }
.brand { padding-left: 20px; border-left: 1px solid #30414d; }
.eyebrow { color: #8caaaF; letter-spacing: .13em; font-size: 12px; font-weight: 600; }
h1 { margin-top: 5px; font-size: 23px; font-weight: 650; letter-spacing: .02em; }
.topbar-meta { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.demo-badge { display: inline-flex; align-items: center; gap: 7px; color: #f0c981; border: 1px solid #6b5733; border-radius: 4px; background: #6b50241f; padding: 5px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.demo-badge span { font-weight: 400; color: #c7b38e; }
#clock { color: #abc0ce; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 66px; }
.kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.kpi-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0d1c28; padding: 15px 22px; min-height: 88px; }
.kpi-card p { color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.kpi-card strong { font-size: 26px; font-weight: 620; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-card small { color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.kpi-power strong { color: #8ceadd; }
.kpi-tag { font-size: 12px; color: #7f9aac; white-space: nowrap; }
.workspace { display: grid; grid-template-columns: 250px minmax(0, 1fr) 285px; min-height: 0; }
.control-rail, .detail-rail { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3c5765 transparent; }
.control-rail { border-right: 1px solid var(--line); padding: 17px 14px; background: #0e1c27; }
.rail-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-heading { padding: 0 1px 13px; }
.section-meta { font-size: 12px; color: #819cad; white-space: nowrap; }
.system-cards { display: grid; gap: 9px; }
.system-access { --system-color: var(--access); }
.system-elevator { --system-color: var(--elevator); }
.system-lighting { --system-color: var(--lighting); }
.system-hvac { --system-color: var(--hvac); }
.system-card { display: flex; width: 100%; flex-direction: column; align-items: stretch; padding: 12px; border: 1px solid #2a414f; text-align: left; background: #122431; }
.system-card[aria-pressed="true"] { border-color: var(--system-color); background: #1a303d; box-shadow: inset 3px 0 0 var(--system-color); }
.system-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; }
.system-card-heading > span:first-child { display: flex; align-items: center; gap: 7px; }
.system-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--system-color, var(--teal)); flex: none; }
.status-badge { font-size: 12px; font-weight: 400; color: #a4b6c2; white-space: nowrap; }
.status-badge.is-alarm { color: #ffb8c0; }
.system-card-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 12px; }
.system-card-value strong { color: var(--system-color); font-size: 23px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.system-card-value > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
#access-count, #elevator-position, #lighting-level { font-size: 14px; line-height: 1.6; flex-basis: 100%; overflow-wrap: anywhere; }
.system-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: #8ba4b4; font-size: 12px; }
.system-card-foot b { color: #b7cad7; font-weight: 600; }
.scenario-card { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.field-label { display: block; color: #95adbc; font-size: 12px; margin: 14px 0 7px; }
#scenario { width: 100%; }
.primary-button { background: #235f62; border-color: #398a85; color: #e2fffa; width: 100%; min-height: 38px; margin-top: 9px; font-weight: 600; }
.primary-button:hover:not(:disabled) { background: #2d7777; border-color: #67c9bb; }
.check-label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #a6bbc8; margin-top: 12px; min-height: 28px; cursor: pointer; }
.check-label input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); }
.scene-column { display: grid; grid-template-rows: auto auto minmax(230px, 1fr) 161px; min-height: 0; min-width: 0; background: #0d1c28; }
.scene-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.scene-heading .eyebrow { font-size: 12px; margin-bottom: 5px; letter-spacing: .08em; }
.scene-heading h2 { font-size: 16px; font-weight: 600; }
.floor-control { display: flex; align-items: center; gap: 9px; color: #a7bac7; font-size: 12px; white-space: nowrap; }
.floor-control select { min-width: 79px; font-size: 14px; }
.system-filter { display: flex; gap: 6px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: thin; }
.system-filter button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 11px; white-space: nowrap; font-size: 12px; background: #132734; border-color: #2c414f; }
.system-filter button[aria-pressed="true"] { color: #dbfff8; background: #245451; border-color: #4d9890; }
.system-filter button[aria-pressed="true"]:not([data-system="all"]) { border-color: var(--system-color); background: #223747; }
.viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-top: 1px solid #223844; border-bottom: 1px solid #2a414d; background: #122733; }
.canvas-host { position: absolute; inset: 0; }
.canvas-host canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.scene-toolbar { position: absolute; z-index: 2; top: 12px; right: 12px; display: flex; gap: 6px; }
.scene-toolbar button { min-height: 34px; padding: 7px 10px; font-size: 12px; background: #10232ded; border-color: #3c5361; }
.scene-caption { position: absolute; z-index: 2; left: 14px; top: 15px; display: flex; gap: 7px; align-items: center; color: #abc5d3; max-width: calc(100% - 242px); font-size: 12px; pointer-events: none; }
.scene-status-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #77cabf; }
.interaction-hint { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 11px; display: flex; justify-content: center; pointer-events: none; color: #c0d2de; font-size: 12px; }
.interaction-hint span { padding: 6px 10px; border-radius: 4px; background: #0c1d28bd; }
.interaction-hint .touch-hint { display: none; }
.loading-card { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; flex-direction: column; gap: 10px; width: min(290px, calc(100% - 30px)); padding: 26px 18px; border: 1px solid #3d626b; border-radius: 9px; background: #102632ee; box-shadow: 0 12px 50px #0004; }
.loading-card > span:last-child { color: #9db5c3; font-size: 12px; }
.loading-indicator { width: 24px; height: 24px; margin-bottom: 4px; border: 2px solid #385b62; border-top-color: var(--teal); border-radius: 50%; animation: loading 1s linear infinite; }
.error-message { position: absolute; z-index: 5; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); background: #47222a; color: #ffd8da; padding: 20px; border: 1px solid #b36770; border-radius: 8px; line-height: 1.7; }
.power-panel { padding: 14px 18px 8px; overflow: hidden; }
.power-panel .section-heading { align-items: flex-start; }
.chart-unit { font-size: 12px; color: #829fae; font-weight: 400; margin-left: 5px; }
#chart-range { margin-top: 5px; color: #8ba5b5; font-size: 12px; }
.chart-legend { display: inline-flex; align-items: center; gap: 6px; color: #a9bebd; font-size: 12px; }
.chart-legend i { width: 16px; height: 2px; background: var(--teal); }
#power-chart { width: 100%; height: 90px; display: block; margin-top: 8px; overflow: visible; }
.chart-grid { fill: none; stroke: #2a434f; stroke-width: .8; stroke-dasharray: 3 5; opacity: .65; }
.detail-rail { display: flex; flex-direction: column; background: #0e1c27; border-left: 1px solid var(--line); }
.equipment-panel { padding: 17px 17px 19px; border-bottom: 1px solid var(--line); }
.equipment-system { display: inline-block; margin-top: 19px; padding: 4px 7px; border: 1px solid #3a5364; border-radius: 4px; color: #a8bdcc; font-size: 12px; background: #152b38; }
#equipment-name { margin-top: 10px; font-size: 19px; font-weight: 600; line-height: 1.4; }
.equipment-details { margin: 14px 0; color: #c3d0da; font-size: 14px; line-height: 1.6; }
.equipment-details dl { margin: 0; }
.equipment-details dl > div, .equipment-details .detail-row, .equipment-details .equipment-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid #253a47; }
.equipment-details dt, .equipment-details .detail-label, .equipment-details .detail-row > span { color: #90a8b8; font-size: 12px; flex-shrink: 0; }
.equipment-details .detail-row > strong { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.equipment-details dd { margin: 0; text-align: right; }
.equipment-details strong { font-weight: 600; }
.empty-state { color: #91a9b8; font-size: 14px; line-height: 1.75; }
.secondary-button { display: block; width: 100%; min-height: 39px; padding: 8px 10px; border-color: #456270; background: #213944; }
.events-panel { display: flex; flex-direction: column; padding: 17px; flex: 1; min-height: 200px; }
.alert-summary { margin: 14px 0 7px; border: 1px solid #31504f; background: #15342f; color: #99d6c6; border-radius: 5px; padding: 9px 10px; font-size: 12px; line-height: 1.6; }
.alert-summary.is-warning, .alert-summary[data-level="warning"] { color: #efd19a; background: #3a3020; border-color: #796440; }
.alert-summary.is-alarm, .alert-summary[data-level="alarm"] { color: #f5b7b7; background: #40232a; border-color: #8f4e5c; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { position: relative; padding: 12px 0 12px 13px; border-bottom: 1px solid #243946; color: #c4d4dd; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.event-list li::before { content: ""; width: 4px; height: 4px; position: absolute; top: 20px; left: 0; background: #64b3ac; border-radius: 50%; }
.event-list li.empty-state::before { display: none; }
.event-list li.empty-state { padding-left: 0; }
.event-list time, .event-list small, .event-list .event-time { display: block; color: #87a2b3; font-size: 12px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.event-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #9bb4c2; font-size: 12px; }
.event-meta time { margin: 0; white-space: nowrap; }
.event-item p { margin: 0; font-size: 14px; line-height: 1.6; }
.event-list strong { display: block; font-weight: 500; }
.event-list .warning::before, .event-list .event-warning::before { background: #e4b963; }
.event-list .alarm::before, .event-list .event-alarm::before, .event-list .error::before, .event-list .critical::before { background: #ed8c92; }
.event-list .warning, .event-list .event-warning { color: #e6c98f; }
.event-list .alarm, .event-list .event-alarm, .event-list .error, .event-list .critical { color: #efabb4; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 35px; padding: 8px 20px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: #859eae; background: #0b1721; font-size: 12px; }
.footer-id { font-size: 12px; letter-spacing: .07em; white-space: nowrap; color: #6f8b9d; }
@keyframes loading { to { transform: rotate(360deg); } }
@media (max-width: 1250px) {
  .kpi-tag { display: none; }
  .topbar { gap: 15px; }
  .topbar-meta { gap: 12px; }
  .scene-caption { top: 58px; max-width: calc(100% - 28px); }
  .system-filter { gap: 4px; padding-right: 12px; padding-left: 12px; }
  .system-filter button { padding: 7px 9px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .workspace { grid-template-columns: 220px minmax(0, 1fr) 250px; }
  .control-rail { padding: 16px 11px; }
  .detail-rail .section-meta { display: none; }
  .equipment-panel, .events-panel { padding: 16px 13px; }
  .scene-heading { padding: 14px 12px 12px; }
  .scene-heading .eyebrow { font-size: 12px; letter-spacing: 0; }
  .scene-heading h2 { font-size: 14px; }
  .floor-control > span { display: none; }
  .system-filter { flex-wrap: wrap; }
  .topbar-meta .demo-badge span { display: none; }
}
@media (max-width: 900px) {
  .app { height: auto; min-height: 100vh; min-height: 100dvh; grid-template-rows: auto auto auto auto; }
  .topbar { padding: 14px 16px; gap: 13px; }
  .home-link span { display: none; }
  .home-link { font-size: 21px; padding: 6px 3px; }
  .brand { padding-left: 14px; }
  h1 { font-size: 21px; }
  .topbar-meta { flex-direction: column; align-items: flex-end; gap: 7px; }
  .kpi-card { padding: 14px 16px; }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .scene-column { grid-column: 1 / -1; grid-row: 1; grid-template-rows: auto auto clamp(360px, 54vh, 590px) 161px; }
  .control-rail { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line); border-right: 1px solid var(--line); padding: 18px 16px; overflow: visible; }
  .detail-rail { grid-column: 2; grid-row: 2; border-top: 1px solid var(--line); border-left: none; overflow: visible; }
  .system-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-card { padding: 11px; }
  .system-card-heading { flex-direction: column; align-items: flex-start; gap: 7px; }
  .system-card-value { flex-direction: column; gap: 5px; }
  .system-card-foot { line-height: 1.5; }
  .system-card-foot > span { display: none; }
  .scenario-card { max-width: none; }
  .event-list { max-height: 370px; overflow-y: auto; scrollbar-width: thin; }
  .scene-caption { top: 16px; max-width: calc(100% - 245px); }
  .system-filter { padding-left: 18px; }
  .footer-id { display: none; }
}
@media (max-width: 600px) {
  .topbar { min-height: 78px; padding: 12px; gap: 10px; }
  .brand { padding-left: 10px; }
  .brand .eyebrow { font-size: 12px; letter-spacing: .015em; }
  h1 { font-size: 18px; }
  .topbar-meta .demo-badge span { display: none; }
  .demo-badge { padding: 4px 6px; }
  #clock { font-size: 12px; min-width: auto; }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card { padding: 13px 16px; min-height: 83px; }
  .kpi-card strong { font-size: 25px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .scene-column { grid-template-rows: auto auto clamp(340px, 52vh, 500px) 161px; }
  .scene-heading { padding: 15px 12px 12px; }
  .scene-heading h2 { font-size: 15px; }
  .scene-heading .eyebrow { font-size: 12px; letter-spacing: .05em; }
  .floor-control { gap: 6px; }
  .floor-control select { min-width: 69px; }
  .system-filter { padding: 0 12px 12px; gap: 5px; }
  .system-filter button { min-height: 36px; padding: 7px 9px; }
  .scene-caption { top: 56px; max-width: calc(100% - 28px); }
  .scene-toolbar { right: 10px; left: 10px; justify-content: flex-end; }
  .scene-toolbar button { min-height: 36px; }
  .power-panel { padding: 14px 12px 8px; }
  .control-rail { grid-column: 1; grid-row: 2; border-right: 0; }
  .detail-rail { grid-column: 1; grid-row: 3; }
  .system-card-heading { flex-direction: row; align-items: center; }
  .system-card-value { flex-direction: row; align-items: baseline; gap: 8px; }
  .system-card-value strong { font-size: 22px; }
  .equipment-panel, .events-panel { padding: 18px 16px; }
  .equipment-details { min-height: 0; }
  .footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); line-height: 1.7; }
}
@media (max-width: 380px) {
  .topbar { flex-wrap: wrap; }
  .brand { flex: 1; }
  .topbar-meta { flex-direction: row; align-items: center; width: 100%; justify-content: flex-end; }
  .floor-control > span { display: none; }
  .system-filter { flex-wrap: wrap; }
  .system-card-heading { flex-direction: column; align-items: flex-start; }
  .system-card-value { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .topbar { min-height: 73px; padding-top: 11px; padding-bottom: 11px; }
  .kpi-card { min-height: 78px; padding-top: 12px; padding-bottom: 12px; }
  .scene-column { grid-template-rows: auto auto minmax(210px, 1fr) 115px; }
  .power-panel { padding-top: 10px; }
  #power-chart { height: 53px; }
}
@media (pointer: coarse) {
  .interaction-hint .desktop-hint { display: none; }
  .interaction-hint .touch-hint { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}