:root {
  color-scheme: dark;
  font-family: "Open Sans", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  background: #020710;
  color: #eaf5ff;
  font-synthesis: none;
  --numeric-font: "Open Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020710; }
button { font: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(9, 58, 91, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(9, 58, 91, .08) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .4;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center;
  overflow: hidden;
  background: #030b15;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(0, 87, 151, .13), transparent 58%);
}

.topbar {
  position: absolute;
  inset: 0 18px auto 18px;
  height: 82px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(28, 130, 198, .45);
  z-index: 5;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, #00b9ff, rgba(0, 185, 255, .08) 38%, rgba(0, 185, 255, 0));
}

.brand { display: flex; align-items: center; gap: 18px; min-width: 690px; }
.brand h1 { margin: 0 0 5px; font-size: 31px; line-height: 1; letter-spacing: 0; font-weight: 700; text-shadow: 0 0 16px rgba(120, 207, 255, .2); }
.brand-subtitle { display: flex; align-items: center; gap: 11px; color: #25b8f2; font-size: 14px; }
.brand-subtitle i { width: 3px; height: 3px; border-radius: 50%; background: #25b8f2; box-shadow: 0 0 5px #25b8f2; }

.brand-mark { position: relative; width: 48px; height: 48px; border-radius: 15px 24px 15px 24px; transform: rotate(45deg); background: linear-gradient(145deg, #27c8ff 0 44%, #126ce2 45% 100%); box-shadow: 0 0 18px rgba(35, 172, 255, .35); }
.brand-mark::before, .brand-mark::after, .brand-mark span::before, .brand-mark span::after { content: ""; position: absolute; width: 16px; height: 16px; background: #03101d; border-radius: 50% 50% 50% 0; }
.brand-mark::before { left: -2px; top: -2px; }
.brand-mark::after { right: -2px; bottom: -2px; transform: rotate(180deg); }
.brand-mark span::before { right: -2px; top: -2px; transform: rotate(90deg); }
.brand-mark span::after { left: -2px; bottom: -2px; transform: rotate(-90deg); }

.level-switch { margin-left: auto; display: flex; height: 48px; border: 1px solid #16324a; border-radius: 6px; overflow: hidden; background: rgba(6, 21, 35, .88); }
.level-button { min-width: 154px; border: 0; border-right: 1px solid #17364e; color: #aab8c9; background: transparent; font-size: 18px; cursor: pointer; }
.level-button:last-child { border-right: 0; }
.level-button b { margin-right: 10px; color: #7d8ea3; }
.level-button.is-active { color: #f0f8ff; border: 1px solid #00b9ff; background: linear-gradient(180deg, rgba(0, 131, 211, .25), rgba(0, 73, 125, .16)); box-shadow: inset 0 0 16px rgba(0, 164, 255, .28), 0 0 12px rgba(0, 164, 255, .18); }
.level-button.is-active b { color: #31ccff; }

.operator { height: 46px; margin-left: 40px; padding-left: 20px; border-left: 1px solid #273b50; display: flex; align-items: center; gap: 10px; font-size: 17px; color: #d8e3ed; }
.operator-avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #7d8a99; border-radius: 50%; color: #e4ecf4; font-size: 12px; }
.operator-caret { margin-left: 4px; color: #9fb0c0; }

.panel {
  border: 1px solid rgba(0, 147, 222, .62);
  border-radius: 8px;
  background: rgba(3, 19, 33, .88);
  box-shadow: inset 0 0 26px rgba(0, 83, 133, .11), 0 0 16px rgba(0, 83, 133, .08);
}

.metrics { position: absolute; left: 18px; top: 99px; width: 1426px; height: 98px; display: grid; grid-template-columns: 1.07fr 1.1fr 1fr .78fr; gap: 18px; z-index: 4; }
.metric-card { position: relative; display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 13px 14px 13px 18px; border: 1px solid var(--card-border); border-radius: 9px; background: linear-gradient(105deg, var(--card-fill), rgba(5, 17, 29, .94) 75%); box-shadow: inset 0 0 24px var(--card-shadow); }
.metric-card::after { content: ""; position: absolute; inset: auto 8px 4px 48%; height: 1px; background: linear-gradient(90deg, transparent, var(--card-accent), transparent); opacity: .35; }
.metric-card--blue { --card-accent:#2bbcff; --card-border:rgba(0,151,227,.58); --card-fill:rgba(0,80,139,.28); --card-shadow:rgba(0,119,190,.13); }
.metric-card--red { --card-accent:#ff4848; --card-border:rgba(182,51,61,.55); --card-fill:rgba(91,18,31,.31); --card-shadow:rgba(193,35,45,.15); }
.metric-card--amber { --card-accent:#f5a915; --card-border:rgba(161,111,31,.54); --card-fill:rgba(83,57,13,.26); --card-shadow:rgba(180,112,18,.13); }
.metric-card--green { --card-accent:#38d7af; --card-border:rgba(18,132,111,.55); --card-fill:rgba(6,74,65,.3); --card-shadow:rgba(16,149,120,.13); }
.metric-icon { flex: 0 0 62px; height: 62px; display: grid; place-items: center; margin-right: 17px; border-radius: 7px; font-size: 36px; color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 13%, transparent); text-shadow: 0 0 12px var(--card-accent); }
.metric-content { display: flex; min-width: 130px; flex-direction: column; align-self: stretch; justify-content: center; }
.metric-content span { font-size: 18px; font-weight: 600; white-space: nowrap; }
.metric-content strong { margin-top: 4px; color: var(--card-accent); font-family: var(--numeric-font); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-content small { color: #a9b7c7; font-size: 21px; font-weight: 500; }
.sparkline { align-self: flex-end; width: 100px; min-width: 70px; height: 35px; margin-left: auto; overflow: visible; }
.sparkline polyline { fill: none; stroke: var(--card-accent); stroke-width: 1.35; filter: drop-shadow(0 0 3px var(--card-accent)); }

.map-panel { position: absolute; left: 18px; top: 210px; width: 1426px; height: 650px; overflow: hidden; z-index: 2; background: #061522; }
.map-reference { position: absolute; inset: 0; background-image: url("./reference-dashboard.png"); background-repeat: no-repeat; background-size: 1920px 1080px; background-position: -18px -210px; }
.map-reference::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 12, 23, .08), rgba(1, 10, 18, .02) 70%, rgba(1, 12, 23, .35)); }
.map-title { position: absolute; left: 18px; top: 15px; z-index: 2; font-size: 22px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.map-title span { margin-right: 10px; color: #1ec8ff; }
.map-tools { position: absolute; top: 13px; left: 694px; z-index: 3; display: flex; gap: 8px; }
.tool-button { height: 43px; padding: 0 18px; color: #bdd0e3; border: 1px solid rgba(54, 111, 155, .5); border-radius: 5px; background: rgba(5, 25, 43, .85); box-shadow: inset 0 0 13px rgba(0, 83, 139, .12); }
.tool-button:first-letter { color: #31baff; }
.tool-button--active { background: rgba(43, 74, 103, .86); }
.tool-button span { margin-left: 8px; }
.layer-button { position: absolute; right: 15px; top: 15px; z-index: 3; width: 50px; height: 42px; border: 1px solid rgba(53, 104, 145, .5); border-radius: 5px; color: #c4d2df; background: rgba(3, 18, 32, .86); font-size: 24px; }
.map-scan { position: absolute; left: 592px; top: 300px; z-index: 2; width: 70px; height: 70px; border: 2px solid rgba(38, 210, 255, .75); border-radius: 50%; box-shadow: 0 0 20px #17c6ff, inset 0 0 18px rgba(32, 210, 255, .45); animation: breathe 2.6s ease-in-out infinite; }
.map-scan::before, .map-scan::after { content: ""; position: absolute; inset: 11px; border: 2px solid #2bd1ff; border-radius: 50%; }
.map-scan::after { inset: 25px; background: rgba(52, 215, 255, .5); }
.map-panel.is-reference .map-title,
.map-panel.is-reference .map-tools,
.map-panel.is-reference .layer-button,
.map-panel.is-reference .map-scan { display: none; }

.sidebar { position: absolute; left: 1458px; top: 98px; width: 445px; height: 760px; display: grid; grid-template-rows: 400px 1fr; gap: 18px; z-index: 4; }
.incident-card { position: relative; padding: 18px 22px 19px; border-color: #02aefe; background: linear-gradient(140deg, rgba(7, 37, 58, .93), rgba(2, 13, 25, .96)); }
.incident-card::before, .incident-card::after { content: ""; position: absolute; width: 54px; height: 2px; background: #06c7ff; box-shadow: 0 0 8px #06c7ff; }
.incident-card::before { left: 0; top: -1px; }
.incident-card::after { right: 0; bottom: -1px; }
.incident-main { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.incident-photo { align-self: start; height: 174px; margin-top: 11px; border: 1px solid rgba(47, 149, 205, .45); border-radius: 6px; background-color: #07101a; background-image: url("./assets/incident-photo-original.png?v=20260820-2"); background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: inset 0 0 12px rgba(0, 0, 0, .35); }
.incident-summary h2 { margin: 8px 0 12px; font-size: 21px; line-height: 1.3; white-space: nowrap; }
.incident-level { display: flex; align-items: center; justify-content: space-between; }
.incident-level strong { padding: 5px 8px; border-radius: 4px; color: #171004; background: #f6b910; font-size: 17px; }
.incident-level time { font-size: 17px; color: #e8edf4; }
.divider { height: 1px; margin: 12px 0 10px; background: rgba(64, 118, 158, .34); }
.incident-summary p { margin: 0 0 12px; color: #b6c4d3; font-size: 15px; white-space: nowrap; }
.incident-summary em { font-style: normal; color: #e8eef6; }
.incident-summary .danger { color: #ff4b52; }
.incident-summary .handling { color: #2ed7a9; font-size: 16px; }
.command-button { position: absolute; left: 22px; right: 22px; bottom: 20px; height: 58px; border: 1px solid #0d9ff3; border-radius: 5px; color: #eef8ff; background: linear-gradient(180deg, #0868cd, #04479c); box-shadow: inset 0 0 15px rgba(48, 176, 255, .22), 0 0 11px rgba(0, 115, 230, .22); font-size: 20px; cursor: pointer; }
.command-button span { position: absolute; right: 18px; font-size: 30px; line-height: 20px; }

.alarm-panel { padding: 14px 12px 11px; background: rgba(2, 15, 27, .94); }
.panel-heading { height: 36px; padding: 0 8px 7px; display: flex; align-items: center; justify-content: space-between; }
.panel-heading h2 { margin: 0; font-size: 21px; }
.panel-heading button { color: #a4b3c3; border: 0; background: transparent; font-size: 15px; }
.alarm-list { display: grid; gap: 4px; }
.alarm-row { position: relative; height: 65px; display: grid; grid-template-columns: 50px 1fr auto 48px; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid rgba(26, 74, 109, .46); border-radius: 6px; background: rgba(8, 31, 51, .76); }
.alarm-row.is-selected::before { content: ""; position: absolute; left: -16px; width: 8px; height: 8px; border-radius: 50%; background: #ff6738; box-shadow: 0 0 7px #ff6738; }
.alarm-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; font-weight: 700; }
.alarm-icon--red { color: #ff5057; background: rgba(168, 40, 48, .22); }
.alarm-icon--amber { color: #ffc029; background: rgba(169, 112, 16, .22); }
.alarm-icon--yellow { color: #ffc936; background: rgba(168, 121, 21, .2); }
.alarm-row div { min-width: 0; }
.alarm-row strong, .alarm-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-row strong { font-size: 16px; }
.alarm-row small { margin-top: 4px; color: #91a7bb; font-size: 13px; }
.alarm-row b { font-size: 13px; white-space: nowrap; }
.alarm-row time { color: #a8b5c3; font-size: 15px; text-align: right; }
.alarm-red { color: #ff4048; }
.alarm-amber { color: #ffb718; }
.alarm-blue { color: #18b9ff; }

.district-panel { position: absolute; left: 17px; top: 830px; width: 1886px; height: 238px; z-index: 5; padding: 42px 12px 10px; background: rgba(2, 18, 31, .96); }
.district-title { position: absolute; left: 22px; top: 10px; font-size: 20px; font-weight: 700; }
.district-title span { margin-right: 12px; color: #15c3ff; }
.district-table { height: 184px; overflow: hidden; border: 1px solid rgba(23, 79, 117, .55); border-radius: 6px; }
.table-row { display: grid; grid-template-columns: 145px 194px 235px 170px 275px 210px 130px 130px 130px 1fr; height: 37px; align-items: center; border-bottom: 1px solid rgba(27, 74, 108, .52); color: #d0dae4; font-size: 16px; }
.table-row:last-child { border-bottom: 0; }
.table-row > span { align-self: stretch; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(27, 74, 108, .52); min-width: 0; }
.table-row > span:first-child, .table-row > span:nth-child(5) { justify-content: flex-start; padding-left: 20px; }
.table-row > span:last-child { border-right: 0; }
.table-header { height: 34px; color: #afc1d1; background: linear-gradient(180deg, rgba(16, 55, 84, .82), rgba(8, 36, 58, .82)); }
.coverage { gap: 12px; }
.coverage i { width: 92px; height: 7px; border-radius: 4px; overflow: hidden; background: #102d48; }
.coverage b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #275fe1, #1ccaff); box-shadow: 0 0 5px rgba(20, 177, 255, .45); }
.risk--mid { color: #ffc124; }
.risk--high { color: #ff8d19; }
.event--red { color: #ff3f48; }
.event--amber { color: #ffb815; }
.event--blue, .monitoring { color: #18bfff; }
.status { color: #35d3aa; }

@keyframes breathe {
  0%, 100% { transform: scale(.92); opacity: .7; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}