:root {
  --bg: #02080c;
  --panel: rgba(5, 25, 32, .94);
  --panel-2: rgba(6, 31, 39, .9);
  --line: rgba(59, 214, 211, .38);
  --line-soft: rgba(83, 190, 197, .16);
  --cyan: #53dfe2;
  --mint: #3bd6ab;
  --blue: #47a9ec;
  --warning: #f6b431;
  --danger: #ff5e62;
  --text: #d8ebee;
  --muted: #7f9ba0;
  --deep: #07151b;
  --font: "DIN Alternate", "Arial Narrow", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #00070b; overflow: hidden; }
body { font-family: var(--font); color: var(--text); letter-spacing: 0; }
button, select, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }
.viewport { position: relative; overflow: hidden; background: #00070b; }
.dashboard {
  width: 1920px;
  height: 1080px;
  position: absolute;
  inset: 0 auto auto 0;
  overflow: hidden;
  transform-origin: left top;
  background:
    linear-gradient(rgba(31, 168, 179, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 168, 179, .025) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(17, 91, 99, .16), transparent 36%),
    #020a0e;
  background-size: 48px 48px, 48px 48px, auto, auto;
}

svg { width: 1em; height: 1em; stroke-width: 1.8; }
button { border: 0; background: transparent; cursor: pointer; }
button:active { transform: scale(.98); }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 4px; }
.icon-btn:hover { color: var(--cyan); border-color: var(--line); background: rgba(60, 216, 211, .08); }
.text-link { display: inline-flex; align-items: center; gap: 4px; color: #48aeda; font-size: 13px; white-space: nowrap; }
.ok { color: #43d8a5; }
.warn { color: var(--warning); }
.bad { color: var(--danger); }

.topbar {
  height: 72px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 720px 1fr;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(51, 208, 214, .36);
  background: linear-gradient(180deg, rgba(1, 8, 12, .98), rgba(2, 16, 22, .84));
}
.topbar::before, .topbar::after { content: ""; position: absolute; bottom: -1px; width: 34%; height: 12px; border-top: 1px solid rgba(50, 213, 214, .5); }
.topbar::before { left: 0; clip-path: polygon(0 0, 89% 0, 92% 100%, 100% 100%, 100% 100%, 0 100%); }
.topbar::after { right: 0; transform: scaleX(-1); }
.brand-block { z-index: 1; display: flex; align-items: center; gap: 20px; }
.brand { font: 700 31px/1 Arial, sans-serif; color: #5be8e6; }
.brand span { color: #3caeea; }
.brand-divider { width: 1px; height: 24px; background: #18343d; }
.site-select { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.site-select svg { font-size: 15px; }
.title-frame { position: relative; align-self: stretch; display: grid; place-content: center; text-align: center; }
.title-frame::before, .title-frame::after { content: ""; position: absolute; bottom: 3px; height: 18px; width: 120px; border-top: 1px solid var(--cyan); }
.title-frame::before { left: 18px; transform: skewX(38deg); }
.title-frame::after { right: 18px; transform: skewX(-38deg); }
.title-frame h1 { margin: 8px 0 0; color: #c9fbff; text-shadow: 0 0 12px rgba(77, 222, 227, .34); font-size: 34px; line-height: 1; font-weight: 800; }
.title-kicker { position: absolute; top: 6px; left: 0; right: 0; font: 10px/1 Arial, sans-serif; color: rgba(82, 220, 224, .52); }
.system-meta { z-index: 1; justify-self: end; display: flex; align-items: center; gap: 15px; font-size: 12px; color: #8da2a7; white-space: nowrap; }
.system-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.system-meta > span + span { padding-left: 14px; border-left: 1px solid #18333a; }
.system-meta svg { font-size: 15px; }
.sync-btn { color: #42d8aa; }
.sync-btn.spinning svg { animation: spin .7s linear; }

.screen-grid {
  height: 962px;
  display: grid;
  grid-template-columns: 426px minmax(0, 1fr) 450px;
  gap: 10px;
  padding: 10px;
}
.left-column, .right-column, .center-column { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.panel {
  position: relative;
  min-width: 0;
  background: linear-gradient(180deg, rgba(7, 30, 38, .96), rgba(4, 22, 28, .95));
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(14, 110, 119, .06);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.panel::after { right: -1px; bottom: -1px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.panel-heading { height: 37px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border-bottom: 1px solid rgba(81, 205, 209, .16); }
.panel-heading h2 { margin: 0; position: relative; padding-left: 10px; font-size: 16px; line-height: 1; font-weight: 800; }
.panel-heading h2::before { content: ""; position: absolute; left: 0; top: 1px; width: 3px; height: 14px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.panel-heading h2 small { color: var(--muted); font-size: 12px; font-weight: 500; }
.panel-heading > svg { color: #6e8d94; font-size: 14px; }
.panel-heading .text-link { margin-left: auto; }
.panel-unit { margin-left: auto; color: var(--muted); font-size: 12px; }

.operation-panel { height: 245px; }
.operation-content { height: calc(100% - 37px); display: grid; grid-template-columns: 180px 1fr; align-items: center; padding: 6px 20px 10px; }
.donut { --value: 75; --display-value: 0; --ring: var(--mint); position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring) 0 calc(var(--display-value) * 1%), #1a333a 0); }
.donut::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #061b22; box-shadow: inset 0 0 20px rgba(49, 214, 188, .08); }
.donut > * { position: relative; z-index: 1; }
.donut-main { width: 158px; aspect-ratio: 1; background: conic-gradient(var(--ring) 0 calc(var(--display-value) * 1%), #1a333a calc(var(--display-value) * 1%) calc(var(--value) * 1%), var(--danger) calc(var(--value) * 1%) 100%); }
.donut-main > div { text-align: center; }
.donut strong { display: block; color: #dffbff; font-size: 28px; }
.donut strong small { font-size: 14px; margin-left: 2px; }
.donut span { color: #8ba7ac; font-size: 13px; }
.status-list { margin: 0; padding: 0; list-style: none; }
.status-list li { display: grid; grid-template-columns: 1fr 40px 20px; align-items: center; gap: 6px; height: 39px; border-bottom: 1px solid rgba(91, 160, 167, .08); }
.status-list li > span { display: flex; align-items: center; gap: 9px; color: #9db2b6; font-size: 14px; }
.status-list b { justify-self: end; font-size: 21px; color: #e0fbff; }
.status-list li:first-child b { color: var(--cyan); }
.status-list li:nth-child(3) b { color: var(--danger); }
.status-list em { color: #80979c; font-size: 12px; font-style: normal; }
.dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #66797e; }
.dot.run { background: var(--mint); box-shadow: 0 0 7px rgba(61, 215, 171, .45); }
.dot.wait { background: var(--blue); }
.dot.warning { background: var(--warning); }
.dot.fault { background: var(--danger); }
.dot.offline { background: #566a70; }

.efficiency-panel { height: 218px; }
.gauge-grid { height: calc(100% - 37px); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 8px 8px 4px; }
.gauge-item { display: grid; justify-items: center; gap: 10px; color: #8ea5aa; font-size: 13px; }
.gauge { width: 104px; aspect-ratio: 1; }
.gauge::before { inset: 8px; }
.gauge::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(75, 212, 216, .12); border-radius: 50%; }
.gauge strong { font-size: 24px; }

.output-panel { flex: 1; min-height: 0; }
.chart-legend { height: 31px; display: flex; align-items: center; justify-content: center; gap: 28px; color: #8ea3a8; font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bar-key { width: 16px; height: 7px; }
.bar-key.actual { background: var(--mint); }
.bar-key.plan { background: var(--blue); }
.canvas-wrap { min-height: 0; position: relative; }
.canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.production-wrap { height: calc(100% - 101px); margin: 0 10px; }
.chart-note { height: 33px; padding: 6px 15px; font-size: 11px; color: #70878d; }

.center-column { overflow: hidden; }
.kpi-row { height: 92px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card { position: relative; display: grid; grid-template-columns: 72px 1fr; align-items: center; padding: 8px 14px; background: linear-gradient(115deg, rgba(9, 32, 39, .98), rgba(7, 26, 32, .86)); border: 1px solid rgba(69, 192, 198, .2); border-radius: 4px; }
.kpi-card::before, .kpi-card::after { content: ""; position: absolute; width: 11px; height: 11px; }
.kpi-card::before { left: -1px; bottom: -1px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.kpi-card::after { right: -1px; top: -1px; border-right: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
.kpi-icon { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(67, 202, 201, .14); background: rgba(2, 21, 27, .64); color: #46d4b3; font-size: 31px; border-radius: 3px; }
.kpi-card span { display: block; color: #839da2; font-size: 14px; }
.kpi-card strong { display: block; margin-top: 4px; color: #47d8b4; font-size: 31px; line-height: 1; text-shadow: 0 0 10px rgba(62, 214, 177, .2); }
.kpi-card small { margin-left: 8px; color: #9bb3b7; font-size: 13px; }

.factory-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid rgba(41, 131, 141, .18); background: #061015; }
.factory-stage > img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(var(--map-scale, 1)); transition: transform .25s ease, filter .25s ease; filter: saturate(.78) contrast(1.07) brightness(.88); }
.factory-stage.filtered > img { filter: saturate(.45) contrast(1.05) brightness(.65); }
.map-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 12, 17, .2), transparent 25%, transparent 70%, rgba(0, 10, 14, .78)); box-shadow: inset 0 0 70px #020a0d; }
.scan-line { position: absolute; left: 0; right: 0; top: 20%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(69, 232, 224, .7), transparent); box-shadow: 0 0 8px rgba(69, 232, 224, .4); animation: scan 7s ease-in-out infinite; }
.device-marker { position: absolute; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--mint); border-radius: 50%; background: rgba(4, 33, 36, .86); color: #b8fff0; font-size: 18px; box-shadow: 0 0 0 5px rgba(53, 210, 171, .09), 0 0 15px rgba(53, 210, 171, .38); transition: opacity .2s, transform .2s; }
.device-marker::after { content: ""; position: absolute; inset: -8px; border: 1px solid currentColor; border-radius: 50%; opacity: .25; animation: pulse 2s ease-out infinite; }
.device-marker.warning { border-color: var(--warning); color: var(--warning); box-shadow: 0 0 0 5px rgba(246, 180, 49, .08), 0 0 15px rgba(246, 180, 49, .32); }
.device-marker.fault { border-color: var(--danger); color: #ff8b8e; box-shadow: 0 0 0 5px rgba(255, 94, 98, .08), 0 0 15px rgba(255, 94, 98, .35); }
.device-marker.hidden { opacity: .13; pointer-events: none; }
.m1 { left: 25%; top: 30%; }.m2 { left: 63%; top: 27%; }.m3 { left: 25%; top: 68%; }.m4 { left: 47%; top: 41%; }.m5 { left: 73%; top: 66%; }
.device-popover { position: absolute; z-index: 8; top: 0; left: 0; width: 360px; overflow: hidden; border: 1px solid rgba(73, 224, 216, .62); border-radius: 4px; background: rgba(3, 20, 26, .97); box-shadow: 0 18px 42px rgba(0, 0, 0, .55), inset 0 0 24px rgba(35, 178, 175, .06); opacity: 0; visibility: hidden; transform: translate(-50%, calc(-100% - 14px)) scale(.96); transform-origin: 50% 100%; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.device-popover.visible { opacity: 1; visibility: visible; transform: translate(-50%, calc(-100% - 14px)) scale(1); pointer-events: auto; }
.device-popover.below { transform: translate(-50%, 14px) scale(.96); transform-origin: 50% 0; }
.device-popover.below.visible { transform: translate(-50%, 14px) scale(1); }
.device-popover::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 3px 0 rgba(73, 224, 216, .12); }
.popover-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid rgba(72, 190, 195, .2); }
.popover-head span { display: block; margin-bottom: 4px; color: #58cbc7; font-size: 10px; }
.popover-head h3 { margin: 0; color: #e2f8fa; font-size: 18px; line-height: 1.2; }
.popover-head b { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #4ed6a9; font-size: 12px; }
.popover-head b i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.popover-head b.warning { color: var(--warning); }.popover-head b.fault { color: var(--danger); }
.device-popover dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 10px 14px; background: rgba(7, 34, 41, .72); }
.device-popover dl div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 33px; padding: 0 8px; border-bottom: 1px solid rgba(74, 158, 165, .12); }
.device-popover dt { color: #789198; font-size: 11px; }.device-popover dd { margin: 0; color: #d1e8eb; font-size: 13px; white-space: nowrap; }
.popover-foot { height: 43px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 14px; font-size: 10px; }
.popover-foot span { color: #71878d; }.popover-foot strong { color: #a8bec2; font-size: 11px; }.popover-foot em { color: #4ab8dc; font-style: normal; }
.map-toolbar { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; }
.workshop-tabs { display: flex; border: 1px solid rgba(50, 172, 179, .3); background: rgba(2, 18, 23, .84); }
.workshop-tabs button { height: 43px; padding: 0 19px; color: #829ba0; border-right: 1px solid rgba(61, 164, 170, .18); font-size: 13px; }
.workshop-tabs button:last-child { border: 0; }
.workshop-tabs button.active { color: #72eee1; background: rgba(29, 145, 145, .18); box-shadow: inset 0 -2px #4addd6; }
.map-controls { display: flex; align-items: center; gap: 10px; }
.map-controls button { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid rgba(65, 180, 188, .35); border-radius: 20px; background: rgba(3, 24, 30, .88); font-size: 13px; }
.map-controls button:hover { color: var(--cyan); }
.map-controls .round-btn { width: 40px; padding: 0; justify-content: center; }
.map-controls input { width: 120px; accent-color: var(--cyan); }
.map-legend { position: absolute; z-index: 4; left: 35px; bottom: 78px; display: flex; gap: 25px; font-size: 12px; color: #a3b7ba; }
.map-legend span { display: inline-flex; gap: 7px; align-items: center; }

.alarm-panel { height: 278px; }
.alarm-summary { height: 48px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(67, 182, 189, .16); }
.alarm-filter { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; color: #879ca1; border-right: 1px solid rgba(75, 177, 184, .14); }
.alarm-filter:last-child { border: 0; }
.alarm-filter svg { color: var(--warning); font-size: 19px; }
.alarm-filter:first-child svg { color: var(--danger); }
.alarm-filter b { margin-left: 6px; font-size: 19px; color: var(--warning); }
.alarm-filter:first-child b { color: var(--danger); }
.alarm-filter.active { background: rgba(61, 207, 199, .06); box-shadow: inset 0 -2px var(--cyan); }
.alarm-table-wrap { height: 191px; overflow: hidden; }
.alarm-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.alarm-table th { height: 27px; text-align: left; padding: 0 8px; color: #81989e; background: rgba(12, 42, 50, .7); font-weight: 500; }
.alarm-table th:nth-child(1) { width: 64px; }.alarm-table th:nth-child(2) { width: 72px; }.alarm-table th:nth-child(4) { width: 62px; }.alarm-table th:nth-child(5) { width: 92px; }
.alarm-table td { height: 31px; padding: 0 8px; border-bottom: 1px solid rgba(71, 139, 147, .12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9db1b4; }
.alarm-table tr[data-level="serious"] td { color: #ff8183; background: rgba(178, 54, 60, .1); }
.table-actions { display: flex; gap: 4px; }
.table-actions button { height: 22px; padding: 0 8px; border: 1px solid rgba(61, 151, 190, .48); border-radius: 4px; color: #55b7e7; background: rgba(21, 91, 126, .15); font-size: 10px; white-space: nowrap; }
.table-actions button.done { color: #63d9b8; border-color: rgba(60, 208, 167, .35); }

.energy-panel { height: 270px; }
.energy-kpis { height: 80px; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 10px; border-bottom: 1px solid rgba(66, 157, 164, .13); }
.energy-kpis > div { display: grid; align-content: center; gap: 3px; padding: 0 8px; border-right: 1px solid rgba(71, 158, 164, .14); }
.energy-kpis > div:last-child { border: 0; }
.energy-kpis span { color: #899da1; font-size: 11px; }
.energy-kpis strong { color: #4bd8b6; font-size: 20px; white-space: nowrap; }
.energy-kpis small { margin-left: 4px; color: #9bb0b4; font-size: 9px; }
.energy-kpis em { color: #47d9a8; font-size: 10px; font-style: normal; }
.energy-legend { height: 25px; justify-content: flex-end; padding-right: 20px; }
.line-key { width: 16px; height: 3px; border-radius: 2px; }
.line-key.power { background: var(--mint); }.line-key.consumption { background: var(--blue); }
.energy-wrap { height: 125px; margin: 0 8px; }

.maintenance-panel { height: 164px; }
.maintenance-content { height: calc(100% - 37px); display: grid; grid-template-columns: 116px 1fr 136px; align-items: center; padding: 7px 14px; }
.workorder { width: 94px; aspect-ratio: 1; background: conic-gradient(var(--warning) 0 calc(var(--progress) * 21.1%), var(--blue) 0 calc(var(--progress) * 33.4%), var(--mint) 0 calc(var(--progress) * 100%), #17313a 0); }
.workorder::before { inset: 13px; }
.workorder strong { font-size: 24px; text-align: center; line-height: 1.1; }
.workorder span { font-size: 11px; }
.workorder-list { margin: 0; padding: 0; list-style: none; }
.workorder-list li { display: grid; grid-template-columns: 10px 1fr 24px 52px; align-items: center; gap: 5px; height: 27px; color: #92a8ac; font-size: 11px; }
.workorder-list b { color: #d9eef0; font-size: 13px; text-align: right; }
.workorder-list em { color: #71898e; font-style: normal; }
.maintenance-metrics { height: 90px; display: grid; align-content: space-around; padding-left: 12px; border-left: 1px solid rgba(70, 164, 171, .24); }
.maintenance-metrics > span { color: #84999e; font-size: 11px; }
.maintenance-metrics strong { display: block; color: #50d9da; font-size: 22px; }
.maintenance-metrics small { margin-left: 4px; font-size: 10px; color: #96aeb1; }
.maintenance-metrics em { margin-left: 7px; font-size: 9px; font-style: normal; color: var(--mint); }
.maintenance-metrics em.up { color: var(--danger); }

.health-panel { flex: 1; min-height: 0; }
.health-wrap { height: calc(100% - 37px); margin: 0 8px; }

.statusbar { height: 46px; display: grid; grid-template-columns: 150px 165px 150px 1fr 1fr 1fr 1fr 370px; align-items: center; border-top: 1px solid rgba(54, 182, 188, .3); background: #06171d; color: #7f969b; font-size: 12px; }
.statusbar > div { height: 23px; display: flex; align-items: center; justify-content: center; gap: 7px; border-right: 1px solid rgba(68, 143, 150, .16); white-space: nowrap; }
.statusbar select { height: 26px; color: #90a7ab; border: 1px solid rgba(72, 163, 171, .25); background: #0b2931; border-radius: 3px; }
.toggle { width: 47px; height: 23px; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 4px 0 6px; border: 1px solid rgba(61, 205, 185, .5); border-radius: 12px; background: rgba(36, 184, 156, .26); color: #7cf0d7; font-size: 10px; }
.toggle i { width: 16px; height: 16px; border-radius: 50%; background: #82eed9; box-shadow: 0 0 7px rgba(67, 218, 185, .6); }
.toggle:not(.on) { background: #10282e; color: #688087; border-color: #264149; flex-direction: row-reverse; }
.toggle:not(.on) i { background: #60767c; box-shadow: none; }
.footer-health { gap: 34px !important; border: 0 !important; }
.footer-health span { display: inline-flex; align-items: center; gap: 7px; }
.footer-health svg { color: var(--mint); font-size: 14px; }

.device-drawer { position: absolute; z-index: 20; top: 72px; right: 0; bottom: 46px; width: 390px; padding: 20px; background: rgba(4, 23, 29, .98); border-left: 1px solid rgba(77, 222, 218, .5); box-shadow: -20px 0 50px rgba(0, 0, 0, .45); transform: translateX(105%); transition: transform .26s ease; }
.device-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: start; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(75, 177, 183, .18); }
.drawer-head span { color: var(--cyan); font-size: 12px; }
.drawer-head h3 { margin: 6px 0 0; color: #dcf8fa; font-size: 21px; }
.drawer-status { height: 52px; display: flex; align-items: center; gap: 8px; }
.drawer-status em { margin-left: auto; color: #6f878c; font-size: 11px; font-style: normal; }
.status-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); animation: pulse-dot 1.6s infinite; }
.drawer-equipment { display: grid; grid-template-columns: 50px 1fr 1fr; align-items: center; gap: 10px; padding: 16px; background: #09242c; border: 1px solid rgba(64, 181, 185, .18); }
.drawer-equipment > svg { width: 34px; height: 34px; color: var(--mint); }
.drawer-equipment span { display: block; color: #718c92; font-size: 11px; }
.drawer-equipment strong { display: block; margin-top: 5px; font-size: 14px; }
.device-data { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0; border-top: 1px solid rgba(76, 158, 165, .18); border-left: 1px solid rgba(76, 158, 165, .18); }
.device-data div { display: flex; justify-content: space-between; padding: 11px; border-right: 1px solid rgba(76, 158, 165, .18); border-bottom: 1px solid rgba(76, 158, 165, .18); }
.device-data dt { color: #768e94; font-size: 12px; }.device-data dd { margin: 0; font-size: 13px; }
.drawer-section-title { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }.drawer-section-title span { color: #6f878d; font-size: 11px; }
.drawer-trend canvas { width: 100%; height: 132px; display: block; background: rgba(3, 15, 20, .56); }
.maintenance-info { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; padding: 14px; border: 1px solid rgba(67, 163, 171, .2); }
.maintenance-info span { color: #71898f; font-size: 11px; }.maintenance-info strong { font-size: 12px; text-align: right; }.maintenance-info em { grid-column: 1 / -1; color: var(--mint); font-size: 11px; font-style: normal; }
.drawer-actions { position: absolute; left: 20px; right: 20px; bottom: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-actions button { height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(65, 183, 188, .38); background: #0a2b34; color: #8fb8be; border-radius: 4px; }
.drawer-actions .primary { color: #04231e; background: var(--mint); border-color: var(--mint); font-weight: 800; }

.toast { position: absolute; z-index: 40; top: 90px; left: 50%; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(66, 215, 183, .42); border-radius: 4px; background: rgba(5, 34, 38, .96); color: #aaf6e4; box-shadow: 0 10px 34px rgba(0, 0, 0, .35); opacity: 0; transform: translate(-50%, -10px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes scan { 0%, 100% { top: 16%; opacity: 0; } 15%, 85% { opacity: .7; } 50% { top: 78%; } }
@keyframes pulse { from { transform: scale(.7); opacity: .4; } to { transform: scale(1.25); opacity: 0; } }
@keyframes pulse-dot { 50% { opacity: .45; box-shadow: 0 0 2px var(--mint); } }
@keyframes spin { to { transform: rotate(360deg); } }

.dashboard.is-entering .kpi-card,
.dashboard.is-entering .panel,
.dashboard.is-entering .device-marker { animation: data-enter .62s cubic-bezier(.16, 1, .3, 1) both; }
.dashboard.is-entering .panel:nth-child(2), .dashboard.is-entering .kpi-card:nth-child(2) { animation-delay: .06s; }
.dashboard.is-entering .panel:nth-child(3), .dashboard.is-entering .kpi-card:nth-child(3) { animation-delay: .12s; }
.dashboard.is-entering .panel:nth-child(4), .dashboard.is-entering .kpi-card:nth-child(4) { animation-delay: .18s; }
.dashboard.is-entering .kpi-icon svg,
.dashboard.is-entering .panel-heading svg,
.dashboard.is-entering .alarm-filter svg { animation: icon-grow .72s cubic-bezier(.16, 1, .3, 1) both; }
.dashboard.is-entering .device-marker:nth-of-type(2) { animation-delay: .12s; }.dashboard.is-entering .device-marker:nth-of-type(3) { animation-delay: .2s; }.dashboard.is-entering .device-marker:nth-of-type(4) { animation-delay: .28s; }.dashboard.is-entering .device-marker:nth-of-type(5) { animation-delay: .36s; }
@keyframes data-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes icon-grow { from { opacity: 0; transform: scale(.35) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}