:root {
  --bg: #eef3f6;
  --surface: #ffffff;
  --surface-soft: #f6f9fb;
  --ink: #142434;
  --muted: #687789;
  --line: #d9e2ea;
  --blue: #1267b3;
  --cyan: #12a7b8;
  --green: #1f9d68;
  --orange: #de7b19;
  --red: #d64545;
  --shadow: 0 16px 40px rgba(26, 54, 83, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 1180px;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  background: #123248;
  color: #e9f5fb;
}

.brand {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  align-items: center;
  padding: 8px 6px 24px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #17a6bf;
  font-weight: 800;
  font-size: 22px;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 3px;
  color: #9fc4d7;
  font-size: 12px;
}

.nav-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
}

.nav-list::-webkit-scrollbar {
  width: 6px;
}

.nav-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.nav-group {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.nav-group[open] {
  background: rgba(255, 255, 255, 0.055);
}

.nav-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
  color: #f3f9fc;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::after {
  content: "+";
  color: #8fb7cb;
  font-size: 16px;
  font-weight: 700;
}

.nav-group[open] summary::after {
  content: "-";
}

.nav-sublist {
  display: grid;
  gap: 4px;
  padding: 0 6px 8px;
}

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 9px 12px 9px 18px;
  background: transparent;
  color: #c7dcea;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
  background: #1e4b68;
  color: #fff;
}

.nav-item.disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.sidebar-status {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-status strong,
.sidebar-status span {
  display: block;
}

.sidebar-status strong {
  font-size: 13px;
}

.sidebar-status span {
  margin-top: 2px;
  color: #9fc4d7;
  font-size: 12px;
}

.status-dot,
.mini-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(31, 157, 104, 0.18);
}

.mini-dot.danger {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.16);
}

.main-area {
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  letter-spacing: 0;
}

h2 {
  font-size: 17px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-card {
  min-width: 152px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--surface);
}

.user-card strong,
.user-card span {
  display: block;
}

.user-card strong {
  font-size: 13px;
}

.user-card span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.primary-button,
.ghost-button,
.icon-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.primary-button {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.icon-button {
  width: 42px;
  padding: 0;
  font-size: 19px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.metric-card,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric-card {
  padding: 18px;
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
}

.metric-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 32px;
}

.metric-card.warn strong {
  color: var(--orange);
}

.metric-card.good strong {
  color: var(--green);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 14px;
}

.command-screen {
  display: grid;
  gap: 14px;
}

.command-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 172px;
  border-radius: 8px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(18, 50, 72, 0.95), rgba(18, 103, 179, 0.88)),
    linear-gradient(90deg, #123248, #1267b3);
  color: #fff;
  box-shadow: var(--shadow);
}

.command-hero p,
.command-hero h2,
.command-hero span {
  margin: 0;
}

.command-hero p,
.command-hero span {
  color: #bfe1ef;
}

.command-hero h2 {
  margin: 8px 0;
  font-size: 30px;
  letter-spacing: 0;
}

.command-hero strong {
  display: grid;
  width: 106px;
  height: 106px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 42px;
}

.command-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr;
  gap: 14px;
  align-items: start;
}

.command-map {
  min-height: 520px;
}

.command-risk-list,
.command-timeline {
  display: grid;
  gap: 10px;
}

.command-risk {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.command-risk.danger {
  border-color: rgba(214, 69, 69, 0.38);
  background: #fff4f4;
}

.command-risk strong,
.command-risk span,
.command-risk p {
  display: block;
}

.command-risk span,
.command-risk p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.command-risk p {
  margin-bottom: 0;
}

.command-risk em {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #fff0ef;
  color: var(--red);
  font-style: normal;
  font-weight: 800;
}

.command-timeline article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.command-timeline span {
  color: var(--blue);
  font-weight: 800;
}

.command-timeline strong,
.command-timeline small {
  display: block;
}

.command-timeline small {
  margin-top: 4px;
  color: var(--muted);
}

.panel {
  padding: 18px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: #e8f2fa;
  color: var(--blue);
  font-size: 12px;
  white-space: nowrap;
}

.tag.danger {
  background: #ffeded;
  color: var(--red);
}

.tag.success {
  background: #e8f6ef;
  color: var(--green);
}

.water-map {
  position: relative;
  overflow: hidden;
  border: 1px solid #cbdbe6;
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 36%, rgba(18, 167, 184, 0.22), transparent 18%),
    radial-gradient(circle at 70% 64%, rgba(31, 157, 104, 0.18), transparent 20%),
    linear-gradient(135deg, #dfeef4 0%, #f7fbfd 54%, #e8f4f0 100%);
}

.compact-map {
  height: 332px;
}

.full-map {
  height: calc(100vh - 190px);
  min-height: 560px;
}

.river {
  position: absolute;
  height: 28px;
  border-radius: 999px;
  background: rgba(18, 103, 179, 0.22);
  transform-origin: left center;
}

.river.one {
  width: 72%;
  left: 8%;
  top: 44%;
  transform: rotate(-12deg);
}

.river.two {
  width: 52%;
  left: 36%;
  top: 60%;
  transform: rotate(18deg);
}

.map-point {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 8px 20px rgba(15, 55, 90, 0.28);
  cursor: pointer;
}

.map-point.quality {
  background: var(--cyan);
}

.map-point.video {
  background: #6f62d9;
}

.map-point.alarm {
  background: var(--red);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.36); }
  100% { box-shadow: 0 0 0 16px rgba(214, 69, 69, 0); }
}

.map-label {
  position: absolute;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(28, 58, 82, 0.12);
  pointer-events: none;
}

.alarm-list,
.workorder-list,
.station-table,
.sensor-grid,
.alarm-board {
  display: grid;
  gap: 10px;
}

.alarm-item,
.order-item,
.station-row,
.sensor-card,
.alarm-row {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.alarm-item strong,
.order-item strong,
.station-row strong,
.sensor-card strong,
.alarm-row strong {
  font-size: 14px;
}

.alarm-item span,
.order-item span,
.station-row span,
.sensor-card span,
.alarm-row span {
  color: var(--muted);
  font-size: 12px;
}

.bar-chart {
  display: flex;
  align-items: end;
  gap: 12px;
  height: 220px;
  padding-top: 18px;
}

.bar {
  flex: 1;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}

.bar-wrap {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.weather-mini {
  display: grid;
  gap: 10px;
}

.weather-mini article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.weather-mini span,
.weather-mini small {
  color: var(--muted);
  font-size: 12px;
}

.weather-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 14px;
  align-items: start;
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.forecast-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  min-height: 220px;
}

.forecast-card span,
.forecast-card small,
.forecast-card em {
  color: var(--muted);
  font-size: 12px;
}

.forecast-card strong {
  font-size: 18px;
}

.forecast-card div {
  color: var(--blue);
  font-weight: 700;
}

.forecast-card p {
  font-size: 22px;
  font-weight: 800;
}

.forecast-card em {
  align-self: end;
  font-style: normal;
  line-height: 1.45;
}

.weather-risk {
  min-height: 360px;
}

.weather-alert-list {
  display: grid;
  gap: 10px;
}

.weather-alert {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.weather-alert span,
.weather-alert p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.water-level-ai-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.water-level-ai-card {
  display: grid;
  gap: 12px;
  border: 1px solid #c9ddeb;
  border-radius: 8px;
  padding: 14px;
  background: #f6fbfd;
}

.ai-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.ai-card-head strong,
.ai-card-head span {
  display: block;
}

.ai-card-head span,
.water-level-ai-card p,
.water-level-ai-card em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-card-head b {
  color: var(--blue);
  font-size: 20px;
}

.level-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.level-steps span {
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  text-align: center;
}

.water-level-ai-card em {
  border-left: 4px solid var(--blue);
  padding-left: 10px;
  font-style: normal;
}

.map-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
}

.map-full-panel {
  min-width: 0;
}

.point-detail {
  min-height: 520px;
}

.point-detail h2 {
  margin-bottom: 10px;
}

.detail-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.detail-stat span {
  color: var(--muted);
}

.archive-layout {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 14px;
  align-items: start;
}

.archive-list {
  display: grid;
  gap: 10px;
}

.archive-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.archive-item:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.archive-item strong,
.archive-item span {
  display: block;
}

.archive-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.archive-detail {
  min-height: 620px;
}

.archive-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.archive-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.archive-meta-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.archive-meta-grid span,
.archive-meta-grid strong {
  display: block;
}

.archive-meta-grid span {
  color: var(--muted);
  font-size: 12px;
}

.archive-meta-grid strong {
  margin-top: 6px;
}

.archive-section {
  margin-top: 18px;
}

.archive-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.archive-section p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.archive-risk-list,
.archive-action-list {
  display: grid;
  gap: 8px;
}

.archive-risk-list div,
.archive-action-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.archive-risk-list div {
  border-left: 4px solid var(--orange);
}

.archive-action-list div {
  border-left: 4px solid var(--green);
}

.responsibility-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.responsibility-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.responsibility-stat,
.responsibility-item,
.responsibility-card,
.responsibility-duty-list div,
.responsibility-alert-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.responsibility-stat {
  padding: 14px;
}

.responsibility-stat span,
.responsibility-stat small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.responsibility-stat strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 26px;
}

.responsibility-list {
  display: grid;
  gap: 10px;
}

.responsibility-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
}

.responsibility-item:hover {
  border-color: var(--green);
  background: #f2fbf7;
}

.responsibility-item strong,
.responsibility-item span {
  display: block;
}

.responsibility-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.responsibility-score {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.responsibility-score em {
  color: var(--ink);
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
}

.responsibility-detail {
  min-height: 620px;
}

.responsibility-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.responsibility-card {
  margin: 14px 0;
  padding: 16px;
}

.responsibility-card span,
.responsibility-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.responsibility-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 40px;
}

.responsibility-duty-list,
.responsibility-alert-list {
  display: grid;
  gap: 8px;
}

.responsibility-duty-list div,
.responsibility-alert-list div {
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.responsibility-duty-list div {
  border-left: 4px solid var(--green);
}

.responsibility-alert-list div {
  border-left: 4px solid var(--orange);
  background: #fff8ef;
}

.health-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.health-list {
  display: grid;
  gap: 10px;
}

.health-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.health-item:hover {
  border-color: var(--green);
  background: #f2fbf7;
}

.health-item strong,
.health-item span {
  display: block;
}

.health-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.health-item b {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 999px;
  background: #fff6eb;
  color: var(--orange);
  font-size: 22px;
}

.health-item b.good {
  background: #e8f6ef;
  color: var(--green);
}

.health-item b.risk {
  background: #fff0ef;
  color: var(--red);
}

.health-detail {
  min-height: 620px;
}

.health-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.health-detail h3 {
  margin: 18px 0 10px;
  font-size: 14px;
}

.project-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.project-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.project-stat,
.project-item,
.project-score-card,
.project-chip-list div,
.project-risk-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.project-stat {
  padding: 14px;
}

.project-stat span,
.project-stat small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.project-stat strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 26px;
}

.project-list {
  display: grid;
  gap: 10px;
}

.project-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
}

.project-item:hover {
  border-color: var(--green);
  background: #f2fbf7;
}

.project-item strong,
.project-item span {
  display: block;
}

.project-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.project-progress {
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  background: #e7edf0;
  overflow: hidden;
}

.project-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.project-side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.project-side em {
  color: var(--ink);
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
}

.project-detail {
  min-height: 620px;
}

.project-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.project-score-card {
  margin: 14px 0;
  padding: 16px;
}

.project-score-card span,
.project-score-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.project-score-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 40px;
}

.project-chip-list,
.project-risk-list {
  display: grid;
  gap: 8px;
}

.project-chip-list div,
.project-risk-list div {
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.project-chip-list div {
  border-left: 4px solid var(--green);
}

.project-risk-list div {
  border-left: 4px solid var(--orange);
}

.health-score {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  border: 1px solid #cfe5d9;
  border-radius: 8px;
  padding: 16px;
  background: #f2fbf7;
}

.health-score span {
  color: var(--muted);
  font-size: 12px;
}

.health-score strong {
  color: var(--green);
  font-size: 42px;
}

.health-dimension-list {
  display: grid;
  gap: 10px;
}

.health-dimension-list div {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  overflow: hidden;
}

.health-dimension-list span,
.health-dimension-list strong {
  position: relative;
  z-index: 1;
  display: block;
}

.health-dimension-list span {
  color: var(--muted);
  font-size: 12px;
}

.health-dimension-list strong {
  margin-top: 5px;
}

.health-dimension-list i {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.segmented {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.segmented button {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.segmented button.active {
  background: var(--blue);
  color: #fff;
}

.monitor-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

.station-row {
  grid-template-columns: 1fr auto auto;
  align-items: center;
}

.sensor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sensor-card strong {
  font-size: 24px;
  color: var(--blue);
}

.device-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  align-items: start;
}

.device-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.device-summary article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.device-summary span,
.device-summary strong {
  display: block;
}

.device-summary span {
  color: var(--muted);
  font-size: 12px;
}

.device-summary strong {
  margin-top: 4px;
  color: var(--blue);
  font-size: 24px;
}

.device-list {
  display: grid;
  gap: 10px;
}

.device-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.device-item:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.device-item strong,
.device-item span {
  display: block;
}

.device-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.device-detail {
  min-height: 560px;
}

.device-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.device-detail h3 {
  margin: 18px 0 10px;
  font-size: 14px;
}

.resource-center-layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 14px;
  align-items: start;
}

.resource-center-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.resource-center-stat,
.resource-center-row,
.resource-dispatch-card,
.resource-dispatch-items div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.resource-center-stat {
  padding: 12px;
}

.resource-center-stat span,
.resource-center-stat small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.resource-center-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--blue);
  font-size: 24px;
}

.resource-center-list h3 {
  margin: 18px 0 10px;
  font-size: 14px;
}

.resource-center-list h3:first-child {
  margin-top: 0;
}

.resource-center-stack,
.resource-dispatch-list,
.resource-dispatch-items {
  display: grid;
  gap: 10px;
}

.resource-center-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.resource-center-row.compact {
  padding: 12px;
}

.resource-center-row strong,
.resource-center-row span,
.resource-center-row p {
  display: block;
}

.resource-center-row span,
.resource-center-row p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.resource-center-row p {
  margin-bottom: 0;
}

.resource-dispatch-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.resource-dispatch-card strong,
.resource-dispatch-card span {
  display: block;
}

.resource-dispatch-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.resource-dispatch-items div {
  padding: 9px 10px;
  border-left: 4px solid var(--green);
  color: var(--ink);
  font-size: 13px;
}

.analytics-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  align-items: start;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.analytics-kpi {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
}

.analytics-kpi span,
.analytics-kpi small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.analytics-kpi strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 28px;
}

.analytics-kpi.warn strong {
  color: var(--orange);
}

.analytics-bars {
  display: flex;
  align-items: end;
  gap: 14px;
  height: 260px;
  padding-top: 16px;
}

.analytics-bar-item {
  display: grid;
  flex: 1;
  height: 100%;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.analytics-bar {
  align-self: end;
  min-height: 18px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--green), var(--blue));
}

.region-ranking {
  display: grid;
  gap: 10px;
}

.region-rank-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.region-rank-item b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
}

.region-rank-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.region-rank-item em {
  color: var(--green);
  font-style: normal;
  font-size: 22px;
  font-weight: 800;
}

.supervision-layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 14px;
  align-items: start;
}

.supervision-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.supervision-stat,
.supervision-item,
.supervision-score-card,
.supervision-deduction-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.supervision-stat {
  padding: 14px;
}

.supervision-stat span,
.supervision-stat small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.supervision-stat strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 26px;
}

.supervision-list {
  display: grid;
  gap: 10px;
}

.supervision-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
}

.supervision-item:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.supervision-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.supervision-score {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.supervision-score em {
  color: var(--ink);
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
}

.supervision-score-card {
  margin: 14px 0;
  padding: 16px;
}

.supervision-score-card span,
.supervision-score-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.supervision-score-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 42px;
}

.supervision-deduction-list {
  display: grid;
  gap: 8px;
}

.supervision-deduction-list div {
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.report-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.report-list {
  display: grid;
  gap: 10px;
}

.report-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.report-item:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.report-item strong,
.report-item span {
  display: block;
}

.report-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.report-detail {
  min-height: 560px;
}

.report-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.report-section {
  margin-top: 16px;
}

.report-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.report-section p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.65;
}

.report-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.report-metric-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.report-metric-grid span,
.report-metric-grid strong {
  display: block;
}

.report-metric-grid span {
  color: var(--muted);
  font-size: 12px;
}

.report-metric-grid strong {
  margin-top: 6px;
  color: var(--blue);
  font-size: 24px;
}

.report-follow-list {
  display: grid;
  gap: 8px;
}

.report-follow-list div {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.review-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.review-list {
  display: grid;
  gap: 10px;
}

.review-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.review-item:hover {
  border-color: var(--orange);
  background: #fff7ec;
}

.review-item strong,
.review-item span {
  display: block;
}

.review-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.review-detail {
  min-height: 520px;
}

.review-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.review-summary {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  border: 1px solid rgba(222, 123, 25, 0.3);
  border-radius: 8px;
  padding: 14px;
  background: #fff8ef;
}

.review-summary span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
}

.review-summary p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.notification-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.notification-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.notification-filter button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.notification-filter button.active,
.notification-filter button:hover {
  border-color: var(--blue);
  background: #edf6fb;
  color: var(--blue);
}

.notification-filter span {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 800;
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.notification-item.unread {
  border-color: rgba(18, 103, 179, 0.4);
  background: #f0f7fc;
}

.notification-item:hover {
  border-color: var(--blue);
}

.notification-item strong,
.notification-item span {
  display: block;
}

.notification-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.notification-detail {
  min-height: 520px;
}

.notification-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.notification-content {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  border: 1px solid #c9ddeb;
  border-radius: 8px;
  padding: 14px;
  background: #f1f8fc;
}

.notification-content span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.notification-content p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.ops-layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 14px;
  align-items: start;
}

.ops-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ops-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.ops-stat span,
.ops-stat strong {
  display: block;
}

.ops-stat span {
  color: var(--muted);
  font-size: 12px;
}

.ops-stat strong {
  margin-top: 6px;
  color: var(--green);
  font-size: 24px;
}

.ops-stat.warn strong {
  color: var(--orange);
}

.ops-service-list,
.ops-job-list,
.ops-security-list {
  display: grid;
  gap: 10px;
}

.ops-security-list {
  margin-top: 16px;
}

.ops-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.ops-row.warning {
  border-color: rgba(222, 123, 25, 0.4);
  background: #fff8ef;
}

.ops-row strong,
.ops-row span,
.ops-row p,
.ops-mini-row strong,
.ops-mini-row span {
  display: block;
}

.ops-row span,
.ops-row p,
.ops-mini-row span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ops-row p {
  margin-bottom: 0;
}

.ops-mini-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.ops-mini-row.warning {
  border-left: 4px solid var(--orange);
  background: #fff8ef;
}

.data-net-layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 14px;
  align-items: start;
}

.data-net-panel {
  min-height: 620px;
}

.data-network {
  display: grid;
  gap: 18px;
}

.network-node-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.network-node {
  position: relative;
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  overflow: hidden;
}

.network-node::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--blue);
}

.network-node.source::before {
  background: var(--cyan);
}

.network-node.ai::before {
  background: var(--orange);
}

.network-node.business::before {
  background: var(--green);
}

.network-node.app::before {
  background: #6f65d8;
}

.network-node strong,
.network-node span {
  display: block;
}

.network-node span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.network-link-list {
  display: grid;
  gap: 10px;
}

.network-link {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.network-link span {
  border-radius: 999px;
  padding: 6px 10px;
  background: #e8f4f8;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.integration-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.integration-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.integration-stat span,
.integration-stat strong {
  display: block;
}

.integration-stat strong {
  margin-top: 6px;
  color: var(--green);
  font-size: 24px;
}

.integration-stat.warning strong {
  color: var(--orange);
}

.integration-list {
  display: grid;
  gap: 10px;
}

.integration-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.integration-row.warning {
  border-color: rgba(222, 123, 25, 0.42);
  background: #fff8ef;
}

.integration-row strong,
.integration-row span {
  display: block;
}

.integration-row span,
.integration-row p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.integration-row p {
  margin-bottom: 0;
}

.quality-pill {
  border-radius: 999px;
  padding: 7px 10px;
  background: #eaf7f1;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.integration-row .ghost-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.governance-layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 14px;
  align-items: start;
}

.governance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.governance-stat,
.governance-quality-row,
.governance-mini-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.governance-stat {
  padding: 14px;
}

.governance-stat span,
.governance-stat small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.governance-stat strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 26px;
}

.governance-quality-list,
.governance-standard-list,
.governance-catalog-list {
  display: grid;
  gap: 10px;
}

.governance-catalog-list {
  margin-top: 14px;
}

.governance-quality-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.governance-quality-row.critical {
  border-color: rgba(203, 69, 59, 0.42);
  background: #fff4f4;
}

.quality-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.governance-quality-row strong,
.governance-quality-row span,
.governance-quality-row small {
  display: block;
}

.governance-quality-row > div > span,
.governance-quality-row p,
.governance-quality-row small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.governance-quality-row p {
  margin-bottom: 0;
}

.governance-quality-row .ghost-button {
  white-space: nowrap;
}

.governance-mini-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.governance-mini-row strong,
.governance-mini-row span {
  display: block;
}

.governance-mini-row div span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.system-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.system-section {
  margin-top: 20px;
}

.system-section.first {
  margin-top: 0;
}

.system-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.system-list {
  display: grid;
  gap: 10px;
}

.system-row,
.system-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.system-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.system-row strong,
.system-row span,
.system-row small,
.system-card strong,
.system-card span {
  display: block;
}

.system-row span,
.system-row small,
.system-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.permission-matrix {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.matrix-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(56px, .6fr));
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.matrix-row:first-child {
  border-top: 0;
}

.matrix-head {
  color: var(--muted);
  background: var(--surface-soft);
  font-weight: 700;
}

.matrix-row strong {
  font-size: 13px;
}

.matrix-row span {
  min-width: 0;
  color: var(--muted);
}

.matrix-row span.allowed {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: #0f7b55;
  background: #e5f7ef;
  font-weight: 700;
}

.maintenance-list {
  display: grid;
  gap: 8px;
}

.maintenance-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
}

.video-ai-layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 14px;
  align-items: start;
}

.video-ai-list {
  display: grid;
  gap: 10px;
}

.video-ai-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.video-ai-item:hover {
  border-color: var(--red);
  background: #fff4f4;
}

.video-ai-item strong,
.video-ai-item span {
  display: block;
}

.video-ai-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.video-ai-detail {
  min-height: 560px;
}

.video-ai-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.video-frame {
  display: grid;
  min-height: 190px;
  margin: 16px 0;
  place-items: center;
  border: 1px solid #293d4f;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(18, 103, 179, 0.22), rgba(214, 69, 69, 0.18)),
    #172b3c;
  color: #fff;
}

.video-frame span,
.video-frame strong {
  display: block;
}

.video-frame strong {
  font-size: 42px;
}

.alarm-row {
  grid-template-columns: 100px 1fr 120px 100px;
  align-items: center;
}

.level-high {
  color: var(--red);
  font-weight: 700;
}

.level-mid {
  color: var(--orange);
  font-weight: 700;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kanban-col {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.kanban-col h3 {
  margin: 0 0 12px;
  font-size: 14px;
}

.kanban-card {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.kanban-card strong {
  font-size: 14px;
}

.kanban-card span {
  color: var(--muted);
  font-size: 12px;
}

.dispatch-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.dispatch-list {
  display: grid;
  gap: 10px;
}

.dispatch-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.dispatch-item:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.dispatch-item strong,
.dispatch-item span {
  display: block;
}

.dispatch-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.dispatch-detail {
  min-height: 560px;
}

.dispatch-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.dispatch-detail h3 {
  margin: 18px 0 10px;
  font-size: 14px;
}

.ai-assistant-layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 14px;
  align-items: start;
}

.ai-brief article,
.ai-qa-card,
.ai-action-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.ai-brief article {
  margin-bottom: 14px;
  padding: 18px;
  background: #f1f8fc;
}

.ai-brief span,
.ai-brief strong,
.ai-brief p,
.ai-qa-card strong,
.ai-qa-card p,
.ai-action-card strong,
.ai-action-card span {
  display: block;
}

.ai-brief span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.ai-brief strong {
  margin-top: 8px;
  font-size: 24px;
}

.ai-brief p,
.ai-qa-card p,
.ai-action-card span {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-question-list,
.ai-action-list {
  display: grid;
  gap: 10px;
}

.ai-qa-card,
.ai-action-card {
  padding: 14px;
}

.ai-action-card {
  display: grid;
  gap: 12px;
}

.ai-action-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.dispatch-score {
  display: grid;
  gap: 5px;
  margin: 14px 0;
  border: 1px solid #c9ddeb;
  border-radius: 8px;
  padding: 14px;
  background: #f1f8fc;
}

.dispatch-score span {
  color: var(--muted);
  font-size: 12px;
}

.dispatch-score strong {
  color: var(--blue);
  font-size: 34px;
}

.dispatch-action-list {
  display: grid;
  gap: 8px;
}

.dispatch-action-list div {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
}

.patrol-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  align-items: start;
}

.patrol-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.patrol-summary article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.patrol-summary span,
.patrol-summary strong {
  display: block;
}

.patrol-summary span {
  color: var(--muted);
  font-size: 12px;
}

.patrol-summary strong {
  margin-top: 4px;
  color: var(--blue);
  font-size: 24px;
}

.patrol-list {
  display: grid;
  gap: 10px;
}

.patrol-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.patrol-item:hover {
  border-color: var(--green);
  background: #effaf4;
}

.patrol-item strong,
.patrol-item span {
  display: block;
}

.patrol-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.patrol-detail {
  min-height: 520px;
}

.patrol-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.patrol-detail h3 {
  margin: 18px 0 10px;
  font-size: 14px;
}

.track-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.track-list span {
  border-radius: 999px;
  padding: 7px 10px;
  background: #e8f6ef;
  color: var(--green);
  font-size: 12px;
}

.patrol-issue-list {
  display: grid;
  gap: 10px;
}

.patrol-issue-list article,
.empty-state {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.patrol-issue-list span,
.patrol-issue-list p,
.empty-state {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.consultation-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  align-items: start;
}

.consultation-list {
  display: grid;
  gap: 10px;
}

.consultation-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.consultation-item:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.consultation-item strong,
.consultation-item span {
  display: block;
}

.consultation-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.consultation-detail {
  min-height: 520px;
}

.consultation-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.evidence-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.evidence-list div {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.opinion-box {
  display: grid;
  gap: 8px;
}

.opinion-box span {
  color: var(--muted);
  font-size: 13px;
}

.opinion-box textarea {
  min-height: 138px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  font: inherit;
  line-height: 1.55;
}

.expert-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  align-items: start;
}

.expert-category-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.expert-category {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.expert-category.active,
.expert-category:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.expert-category span {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-weight: 800;
}

.expert-list {
  display: grid;
  gap: 10px;
}

.expert-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.expert-card strong,
.expert-card span {
  display: block;
}

.expert-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.expert-card > div > span,
.expert-meta span {
  color: var(--muted);
  font-size: 12px;
}

.expert-meta {
  display: grid;
  gap: 5px;
  min-width: 150px;
}

.expert-register {
  min-height: 560px;
}

.expert-form {
  display: grid;
  gap: 12px;
}

.expert-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.expert-form input,
.expert-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.emergency-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 14px;
  align-items: start;
}

.emergency-list {
  display: grid;
  gap: 10px;
}

.emergency-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.emergency-item:hover {
  border-color: var(--orange);
  background: #fff6eb;
}

.emergency-item strong,
.emergency-item span {
  display: block;
}

.emergency-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.emergency-detail {
  min-height: 560px;
}

.emergency-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.emergency-detail h3 {
  margin: 18px 0 10px;
  font-size: 14px;
}

.weather-context {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  border: 1px solid #c9ddeb;
  border-radius: 8px;
  padding: 12px;
  background: #f1f8fc;
}

.weather-context span,
.weather-context p,
.water-level-context span,
.water-level-context p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.water-level-context {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  border: 1px solid #cddfea;
  border-radius: 8px;
  padding: 12px;
  background: #f7fbf8;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-list span {
  border-radius: 999px;
  padding: 7px 10px;
  background: #e8f2fa;
  color: var(--blue);
  font-size: 12px;
}

.resource-list,
.timeline-list {
  display: grid;
  gap: 8px;
}

.resource-list div,
.timeline-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
}

.timeline-list div {
  border-left: 4px solid var(--orange);
}

.plan-layout {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 14px;
  align-items: start;
}

.plan-list {
  display: grid;
  gap: 10px;
}

.plan-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.plan-item:hover {
  border-color: var(--green);
  background: #f2fbf7;
}

.plan-item strong,
.plan-item span {
  display: block;
}

.plan-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.plan-detail {
  min-height: 620px;
}

.plan-detail > p {
  margin-top: 6px;
  color: var(--muted);
}

.plan-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.plan-meta-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.plan-meta-grid span,
.plan-meta-grid strong {
  display: block;
}

.plan-meta-grid span {
  color: var(--muted);
  font-size: 12px;
}

.plan-meta-grid strong {
  margin-top: 6px;
}

.plan-section {
  margin-top: 18px;
}

.plan-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.plan-section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.plan-step-list {
  display: grid;
  gap: 8px;
}

.plan-step-list div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.plan-step-list b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
}

.plan-step-list span {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.public-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  align-items: start;
}

.public-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.public-water-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
}

.public-water-card span,
.public-water-card small {
  color: var(--muted);
  font-size: 12px;
}

.public-water-card strong {
  font-size: 18px;
}

.quality-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  background: #e8f6ef;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

.public-section {
  margin-top: 20px;
}

.public-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.notice-list,
.complaint-list {
  display: grid;
  gap: 10px;
}

.notice-item,
.complaint-item {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.notice-item span,
.complaint-item span,
.complaint-item p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.public-complaints {
  min-height: 520px;
}

.ai-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border: 1px solid #b8d9e6;
  border-radius: 8px;
  padding: 14px;
  background: #f1f9fc;
}

.ai-panel-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

.ai-panel-head h3 {
  margin: 0 0 6px;
}

.ai-panel-head p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-panel-head > strong {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
}

.similar-case-list {
  display: grid;
  gap: 8px;
}

.similar-case-list article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.similar-case-list span,
.similar-case-list p,
.ai-recommendation span {
  color: var(--muted);
  font-size: 12px;
}

.similar-case-list p {
  line-height: 1.5;
}

.ai-recommendation {
  border: 1px solid #cddfea;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.ai-recommendation p {
  margin: 6px 0 8px;
  font-weight: 700;
  line-height: 1.55;
}

.ai-recommendation ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}

.mobile-layout {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 24px;
  align-items: start;
}

.mobile-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mobile-feature-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-soft);
}

.mobile-feature-list strong,
.mobile-feature-list b,
.mobile-feature-list span {
  display: block;
}

.mobile-feature-list b {
  margin-top: 8px;
  color: var(--blue);
  font-size: 26px;
  line-height: 1;
}

.mobile-feature-list span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.mobile-workflow {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.mobile-workflow h3 {
  margin-bottom: 12px;
}

.mobile-workflow div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-workflow span {
  border-radius: 999px;
  padding: 8px 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
}

.phone-frame {
  width: 338px;
  margin: 0 auto;
  border-radius: 32px;
  padding: 14px;
  background: #172b3c;
  box-shadow: var(--shadow);
}

.phone-screen {
  min-height: 650px;
  border-radius: 24px;
  padding: 18px;
  background: #f6f9fb;
}

.phone-top {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.phone-hero {
  display: grid;
  gap: 8px;
  margin: 22px 0 14px;
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(135deg, #1267b3, #12a7b8);
  color: #fff;
}

.phone-hero strong {
  font-size: 34px;
}

.phone-hero button {
  width: 96px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--blue);
}

.phone-risk-card {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  border: 1px solid rgba(217, 85, 73, 0.28);
  border-radius: 12px;
  padding: 14px;
  background: #fff7f5;
}

.phone-risk-card span {
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.phone-risk-card strong {
  color: var(--ink);
}

.phone-risk-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.phone-risk-card button {
  width: 86px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--danger);
  color: #fff;
}

.phone-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.phone-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 4px;
  background: #fff;
  color: var(--ink);
}

.phone-section-title {
  margin-top: 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.phone-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.phone-list article {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.phone-list p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  transform: translateY(20px);
  opacity: 0;
  border-radius: 8px;
  padding: 12px 16px;
  background: #123248;
  color: #fff;
  transition: 0.2s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 50, 72, 0.72);
  backdrop-filter: blur(10px);
}

.login-overlay.hidden {
  display: none;
}

.login-card {
  width: min(720px, 100%);
  border-radius: 12px;
  padding: 24px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(10, 30, 48, 0.28);
}

.login-brand {
  padding: 0 0 20px;
  color: var(--ink);
}

.login-brand span {
  color: var(--muted);
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.role-card {
  display: grid;
  gap: 7px;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.role-card:hover {
  border-color: var(--blue);
  background: #edf6fb;
}

.role-card span,
.role-card small {
  color: var(--muted);
}

.role-card small {
  line-height: 1.45;
}

@media (max-width: 900px) {
  body {
    min-width: 0;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-list {
    max-height: 320px;
  }

  .nav-sublist {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-item {
    padding: 9px 10px;
  }

  .main-area {
    padding: 16px;
  }

  .topbar,
  .panel-header,
  .mobile-layout {
    display: grid;
  }

  .metric-grid,
  .dashboard-grid,
  .command-grid,
  .command-hero,
  .map-layout,
  .archive-layout,
  .archive-meta-grid,
  .responsibility-layout,
  .responsibility-summary,
  .health-layout,
  .project-layout,
  .project-summary,
  .weather-layout,
  .forecast-grid,
  .water-level-ai-grid,
  .monitor-grid,
  .data-net-layout,
  .network-node-grid,
  .governance-layout,
  .governance-summary,
  .device-layout,
  .device-summary,
  .resource-center-layout,
  .resource-center-summary,
  .video-ai-layout,
  .analytics-layout,
  .analytics-kpi-grid,
  .supervision-layout,
  .supervision-summary,
  .report-layout,
  .report-metric-grid,
  .review-layout,
  .notification-layout,
  .ops-layout,
  .ops-summary,
  .system-layout,
  .kanban,
  .dispatch-layout,
  .ai-assistant-layout,
  .patrol-layout,
  .patrol-summary,
  .consultation-layout,
  .expert-layout,
  .expert-category-list,
  .expert-card,
  .emergency-layout,
  .plan-layout,
  .plan-meta-grid,
  .public-layout,
  .public-grid,
  .mobile-feature-list,
  .role-grid {
    grid-template-columns: 1fr;
  }

  .alarm-row,
  .station-row {
    grid-template-columns: 1fr;
  }

  .matrix-row {
    grid-template-columns: minmax(108px, 1.2fr) repeat(4, minmax(44px, .6fr));
    padding: 10px 8px;
  }

  .phone-frame {
    width: min(338px, 100%);
  }
}