.viewport {
  background: linear-gradient(180deg, #061522, #030a12);
}

.work-screen {
  --side-w: 304px;
  --page-accent: #4eabff;
  --page-accent-2: #2de8ff;
  --page-alert: #f1a341;
  background:
    linear-gradient(180deg, rgba(4, 17, 31, 0.74), rgba(3, 14, 25, 0.88));
}

.work-screen[data-page="02"] {
  --side-w: 330px;
  --page-accent: #00D2FF;
  --page-accent-2: #5a9fd4;
  --page-alert: #FF9F43;
  --core-blue: #00D2FF;
  --aux-blue: #1C3F6E;
  --bg-deep: #050A15;
  --card-bg: rgba(20, 35, 60, 0.6);
  --text-primary: #E0E6ED;
  --text-secondary: #B0C0CC;
}

.work-screen[data-page="02"] .viewport,
.work-screen[data-page="02"] {
  background: 
    linear-gradient(180deg, #050A15 0%, #091525 100%);
}

.work-screen[data-page="03"] {
  --side-w: 330px;
}

.work-screen[data-page="04"] {
  --side-w: 330px;
  --page-accent: #00D2FF;
  --page-accent-2: #5a9fd4;
  --page-alert: #FF9F43;
}

.work-screen[data-page="05"] {
  --side-w: 330px;
  --page-accent: #00D2FF;
  --page-accent-2: #5a9fd4;
  --page-alert: #FF9F43;
}

.work-screen[data-page="06"] {
  --side-w: 330px;
  --page-accent: #6ea8c8;
  --page-accent-2: #7fc7dd;
  --page-alert: #c99a5c;
  --tour-green: #7fc7dd;
  --tour-violet: #86a7c4;
  --tour-amber: #c99a5c;
  --tour-blue: #6ea8c8;
}

.work-screen[data-page="06"]::before {
  opacity: 1;
  filter: none;
  transform: none;
}

.work-screen[data-page="06"]::after {
  display: none;
}

.work-screen[data-page="02"]::before,
.work-screen[data-page="03"]::before,
.work-screen[data-page="04"]::before,
.work-screen[data-page="05"]::before {
  opacity: 1;
  transform: none;
}

.work-screen[data-page="02"]::after,
.work-screen[data-page="03"]::after,
.work-screen[data-page="04"]::after,
.work-screen[data-page="05"]::after {
  display: none;
}

.work-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--screen-map);
  background-size: cover;
  background-position: center;
  opacity: 1;
  filter: none;
  transform: none;
  transform-origin: center;
}

.work-screen::after {
  display: none;
}

.work-screen .topbar {
  z-index: 4;
  backdrop-filter: blur(8px);
}

.work-layout {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 63px;
  bottom: 21px;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.work-stack {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.work-stack:first-child {
  grid-column: 1;
  grid-row: 1;
}

.work-stack:last-child {
  grid-column: 3;
  grid-row: 1;
}

.work-panel,
.work-map {
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(133, 205, 255, 0.1);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(8, 46, 76, 0.28), rgba(4, 22, 38, 0.16)),
    rgba(2, 16, 30, 0.14);
  box-shadow:
    0 18px 36px rgba(0, 7, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}

.work-panel::before,
.work-map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(45, 184, 255, 0.03), transparent 30%, transparent 70%, rgba(45, 184, 255, 0.03)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 38%);
  border-radius: inherit;
}

.work-panel {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.008) 2px,
      rgba(255,255,255,0.008) 3px
    ),
    radial-gradient(ellipse at 50% 40%, rgba(90,210,160,0.03), transparent 55%),
    linear-gradient(180deg, rgba(7, 46, 76, 0.24), rgba(3, 22, 38, 0.14)),
    rgba(2, 18, 34, 0.12);
}

.work-panel[data-side="left"] {
  box-shadow:
    12px 0 34px rgba(0, 5, 14, 0.16),
    inset -1px 0 0 rgba(91, 184, 255, 0.08),
    inset 0 0 22px rgba(45, 184, 255, 0.06);
}

.work-panel[data-side="right"] {
  box-shadow:
    -12px 0 34px rgba(0, 5, 14, 0.16),
    inset 1px 0 0 rgba(91, 184, 255, 0.08),
    inset 0 0 22px rgba(45, 184, 255, 0.06);
}

.work-panel-title {
  position: relative;
  z-index: 1;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--page-accent) 30%, transparent) 30%, color-mix(in srgb, var(--page-accent) 30%, transparent) 70%, transparent) 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 14%, transparent), color-mix(in srgb, var(--page-accent) 4%, transparent) 52%, transparent);
  color: #e9f7ff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(68, 190, 255, 0.38);
}

.work-panel-title::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6ee8ff, color-mix(in srgb, var(--page-accent) 68%, transparent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--page-accent) 46%, transparent);
}

.work-screen[data-page="02"] .work-panel-title {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(0,210,255,0.2) 30%, rgba(0,210,255,0.2) 70%, transparent) 1;
  background:
    linear-gradient(90deg, rgba(0, 210, 255, 0.08), transparent 72%);
  color: #E0E6ED;
  text-shadow: none;
}

.work-screen[data-page="02"] .work-panel-title::before {
  background: linear-gradient(180deg, #00D2FF, #1C3F6E);
}

.work-panel-title span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="04"] .work-panel-title::before {
  display: none;
}

.work-badge {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 50px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--page-accent-2) 62%, transparent);
  border-radius: 4px;
  background: rgba(34, 130, 84, 0.22);
  color: var(--page-accent-2);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.work-badge.warn {
  border-color: rgba(229, 147, 49, 0.66);
  background: rgba(142, 86, 22, 0.22);
  color: #f1a341;
}

.panel-body {
  position: relative;
  z-index: 1;
  height: calc(100% - 36px);
  padding: 10px 12px;
}

.work-screen[data-page="06"] .work-layout {
  left: 18px;
  right: 18px;
  top: 66px;
  bottom: 24px;
  gap: 18px;
}

.work-screen[data-page="02"] .work-layout,
.work-screen[data-page="03"] .work-layout,
.work-screen[data-page="04"] .work-layout,
.work-screen[data-page="05"] .work-layout {
  left: 18px;
  right: 18px;
  top: 66px;
  bottom: 26px;
  gap: 18px;
}

.work-screen[data-page="02"] .work-stack,
.work-screen[data-page="03"] .work-stack,
.work-screen[data-page="04"] .work-stack,
.work-screen[data-page="05"] .work-stack {
  gap: 14px;
}

.work-screen[data-page="02"] .work-panel {
  border-color: rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(20, 35, 60, 0.6), rgba(15, 25, 45, 0.4)),
    rgba(10, 18, 35, 0.3);
  box-shadow:
    0 18px 36px rgba(0, 7, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}

.work-screen[data-page="02"] .work-panel::before {
  background:
    linear-gradient(90deg, rgba(0, 210, 255, 0.03), transparent 34%, transparent 66%, rgba(0, 210, 255, 0.03)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 38%);
}

.work-screen[data-page="03"] .work-panel,
.work-screen[data-page="04"] .work-panel,
.work-screen[data-page="05"] .work-panel {
  border-color: rgba(133, 205, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(7, 46, 76, 0.2), rgba(3, 24, 40, 0.12)),
    rgba(2, 18, 34, 0.1);
  box-shadow:
    0 18px 36px rgba(0, 7, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}

.work-screen[data-page="03"] .work-panel::before,
.work-screen[data-page="04"] .work-panel::before,
.work-screen[data-page="05"] .work-panel::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 5%, transparent), transparent 34%, transparent 66%, color-mix(in srgb, var(--page-accent) 5%, transparent)),
    linear-gradient(180deg, rgba(75, 191, 255, 0.02), transparent 38%);
}

.work-screen[data-page="02"] .work-map img,
.work-screen[data-page="03"] .work-map img,
.work-screen[data-page="04"] .work-map img,
.work-screen[data-page="05"] .work-map img {
  transform: none;
}

.work-screen[data-page="06"] .work-stack {
  gap: 14px;
}

.work-screen[data-page="06"] .work-panel {
  border-color: rgba(133, 205, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(7, 46, 76, 0.18), rgba(3, 24, 40, 0.11)),
    rgba(2, 18, 34, 0.08);
  box-shadow:
    0 16px 32px rgba(0, 7, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}

.work-screen[data-page="06"] .work-panel::before {
  background:
    linear-gradient(90deg, rgba(45, 184, 255, 0.035), transparent 34%, transparent 66%, rgba(45, 184, 255, 0.035)),
    linear-gradient(180deg, rgba(75, 191, 255, 0.025), transparent 36%);
}

.work-screen[data-page="06"] .work-panel-title {
  height: 36px;
  padding: 0 10px;
  border-bottom-color: color-mix(in srgb, var(--page-accent) 24%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 14%, transparent), transparent 72%);
  font-size: 15px;
}

.work-screen[data-page="06"] .panel-body {
  height: calc(100% - 36px);
  padding: 10px;
}

.hero-panel {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  height: 100%;
}

.hero-chart {
  width: 86px;
  height: 86px;
}

.work-panel[data-kind="donut"]:first-child .hero-panel {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 7px;
}

.work-panel[data-kind="donut"]:first-child .hero-chart {
  width: 78px;
  height: 78px;
}

.work-panel[data-kind="donut"]:first-child .hero-metric strong {
  font-size: 29px;
}

.work-panel[data-kind="donut"]:first-child .hero-metric em {
  margin-top: 4px;
}

.work-panel[data-kind="donut"]:first-child .legend-list {
  gap: 1px;
  margin-top: 4px;
}

.work-panel[data-kind="donut"]:first-child .legend-row {
  font-size: 11px;
  line-height: 14px;
}

.hero-metric small,
.summary-card small {
  display: block;
  color: #9fc4d6;
  font-size: 12px;
}

.hero-metric strong {
  display: block;
  margin-top: 4px;
  color: var(--page-accent);
  font-size: 31px;
  line-height: 1;
}

.hero-metric em {
  display: block;
  margin-top: 6px;
  color: #d7edf8;
  font-size: 12px;
  font-style: normal;
}

.legend-list {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.legend-row,
.info-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 7px;
  color: #c7dfeb;
  font-size: 12px;
  line-height: 15px;
}

.legend-dot-small {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.metric-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: start;
}

.metric-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.metric-grid.four,
.card-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.metric-grid.five,
.card-grid.five {
  grid-template-columns: repeat(5, 1fr);
}

.metric-card,
.work-card {
  min-width: 0;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(45, 156, 238, 0.36);
  border-radius: 4px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 48%),
    rgba(5, 46, 78, 0.52);
  text-align: center;
}

.metric-card i,
.work-card i {
  width: 24px;
  height: 24px;
  color: var(--page-accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--page-accent) 68%, transparent));
}

.metric-card span,
.work-card span {
  color: #b8d4e3;
  font-size: 12px;
  line-height: 15px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card b {
  max-width: 100%;
  color: var(--page-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-grid.five {
  gap: 6px;
  position: relative;
  padding-top: 8px;
}

.metric-grid.five::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--page-accent) 55%, transparent), transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--page-accent) 36%, transparent);
}

.metric-grid.five .metric-card {
  position: relative;
  height: 58px;
  padding: 4px 2px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 18%, transparent), transparent 46%),
    rgba(5, 46, 78, 0.42);
}

.metric-grid.five .metric-card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--page-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--page-accent) 85%, transparent);
  transform: translateX(-50%);
}

.metric-grid.five .metric-card i {
  width: 21px;
  height: 21px;
}

.metric-grid.five .metric-card span {
  font-size: 11px;
  line-height: 13px;
}

.metric-grid.five .metric-card b {
  font-size: 12px;
}

.metric-cloud {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 7px;
  align-content: start;
}

.metric-cloud-core {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(47, 216, 255, 0.36);
  border-radius: 50%;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--page-accent) 32%, rgba(5, 34, 59, 0.2)), rgba(5, 34, 59, 0.2));
  box-shadow:
    0 0 20px color-mix(in srgb, var(--page-accent) 26%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--page-accent) 14%, transparent);
  aspect-ratio: 1;
}

.metric-cloud-core small,
.metric-cloud-core span {
  color: #9fc4d6;
  font-size: 10px;
  line-height: 12px;
}

.metric-cloud-core strong {
  display: block;
  color: var(--page-accent);
  font-size: 21px;
  line-height: 23px;
}

.metric-cloud-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.metric-cloud-featured article {
  min-width: 0;
  min-height: 51px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(72, 188, 255, 0.28);
  border-radius: 4px;
  background: rgba(4, 44, 75, 0.44);
}

.work-screen[data-page="06"] .metric-cloud-featured article:nth-child(1),
.work-screen[data-page="06"] .metric-cloud-chips span:nth-child(3n + 1) {
  --page-accent: var(--tour-green);
}

.work-screen[data-page="06"] .metric-cloud-featured article:nth-child(2),
.work-screen[data-page="06"] .metric-cloud-chips span:nth-child(3n + 2) {
  --page-accent: var(--tour-violet);
}

.work-screen[data-page="06"] .metric-cloud-chips span:nth-child(3n) {
  --page-accent: var(--tour-amber);
}

.metric-cloud-featured i {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  color: var(--page-accent);
}

.metric-cloud-featured span,
.metric-cloud-chips span {
  min-width: 0;
  color: #b8d4e3;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-cloud-featured b,
.metric-cloud-chips b {
  color: var(--page-accent);
  font-weight: 600;
}

.metric-cloud-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.metric-cloud-chips span {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 999px;
  background: rgba(5, 46, 78, 0.36);
}

.metric-cloud-chips i {
  width: 14px;
  height: 14px;
  color: var(--page-accent);
}

.metric-grid.two {
  gap: 6px;
}

.metric-grid.two .metric-card {
  height: 39px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 8px;
  text-align: left;
}

.metric-grid.two .metric-card i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.metric-grid.two .metric-card span {
  flex: 1 1 auto;
}

.work-screen[data-page="02"] .metric-grid {
  gap: 4px;
  align-content: stretch;
}

.work-screen[data-page="02"] .metric-card {
  height: auto;
  min-height: 52px;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  gap: 1px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 210, 255, 0.13);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.5);
}

.work-screen[data-page="02"] .metric-card i,
.work-screen[data-page="02"] .work-card i {
  width: 22px;
  height: 22px;
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
  color: #00D2FF;
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.4));
}

.work-screen[data-page="02"] .metric-card span,
.work-screen[data-page="02"] .work-card span {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  color: #B0C0CC;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

.work-screen[data-page="02"] .metric-card b {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGrid"] .panel-body {
  display: flex;
  flex-direction: column;
}

/* ===== metricGridV2 分层模块 ===== */
.metric-grid-v2 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.mgv2-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 210, 255, 0.1);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.35);
  flex-shrink: 0;
}

.mgv2-label {
  color: #00D2FF;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  margin: 0 0 2px 0;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.1);
}

.mgv2-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 6px;
  padding: 2px 0;
  min-height: 20px;
}

.mgv2-row--combined {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 2px 5px;
}

.mgv2-row--combined i {
  width: 15px;
  height: 15px;
  color: rgba(0, 210, 255, 0.45);
}

.mgv2-row span {
  color: #B0C0CC;
  font-size: 11px;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgv2-val {
  color: #E0E6ED;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
}

.mgv2-val.good { color: #5ad2a0; }
.mgv2-val.warn { color: #FF9F43; }
.mgv2-val.danger { color: #f0625d; }

.mgv2-inline {
  color: #B0C0CC;
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}

.mgv2-split {
  display: flex;
  align-items: center;
  gap: 2px 4px;
  white-space: nowrap;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mgv2-sep {
  color: #667788;
  font-style: normal;
  font-size: 10px;
}

/* ===== 横向甘特图工期进度 ===== */
.wf-timeline {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}

.wf-timeline-head strong {
  display: block;
  color: #E0E6ED;
  font-size: 14px;
  line-height: 18px;
  padding: 6px 8px;
  border-left: 3px solid #FF9F43;
  background: rgba(255, 159, 67, 0.08);
  border-radius: 0 4px 4px 0;
}

.wf-timeline-track {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}

.wf-tl-node {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.3);
}

.wf-tl-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wf-tl-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.wf-tl-badge i {
  width: 16px;
  height: 16px;
  color: rgba(0, 210, 255, 0.5);
  flex-shrink: 0;
}

.wf-tl-badge span {
  color: #BCCDD8;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-tl-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.wf-tl-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.6s;
}

.wf-tl-fill--active { background: linear-gradient(90deg, #5ad2a0, #3da88a); }
.wf-tl-fill--mid { background: linear-gradient(90deg, #FF9F43, #cc8028); }
.wf-tl-fill--low { background: linear-gradient(90deg, #f0625d, #c04040); }

.wf-tl-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.wf-tl-meta b {
  color: #E0E6ED;
  font-size: 15px;
  font-weight: 700;
  line-height: 17px;
}

.wf-tl-meta span {
  color: #8899AA;
  font-size: 10px;
  line-height: 13px;
}

/* 中列：今日动作 + 剩余工期 */
.wf-tl-mid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wf-tl-action {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wf-tl-action i {
  width: 14px;
  height: 14px;
  color: rgba(0, 210, 255, 0.4);
  flex-shrink: 0;
}

.wf-tl-action span {
  color: #B0C0CC;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-tl-remain {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.wf-tl-remain em {
  color: #8899AA;
  font-size: 10px;
  font-style: normal;
  line-height: 13px;
}

.wf-tl-remain b {
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}

.wf-tl-remain--base { color: #5ad2a0; }
.wf-tl-remain--warn { color: #FF9F43; }

/* 右列：额外信息 */
.wf-tl-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-self: center;
}

/* 环形小图 */
.wf-tl-ring {
  position: relative;
  width: 40px;
  height: 40px;
}

.wf-tl-ring-svg {
  width: 100%;
  height: 100%;
}

.wf-tl-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wf-tl-ring-text b {
  color: #E0E6ED;
  font-size: 11px;
  font-weight: 700;
  line-height: 13px;
}

.wf-tl-ring-text span {
  color: #8899AA;
  font-size: 7px;
  line-height: 9px;
}

.wf-tl-extra-label {
  color: #8899AA;
  font-size: 9px;
  line-height: 12px;
}

/* 标签样式 */
.wf-tl-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wf-tl-tag--warn {
  color: #d4975a;
  border-color: rgba(200, 140, 80, 0.2);
  background: rgba(200, 140, 80, 0.08);
}

.wf-tl-tag--good {
  color: #5ad2a0;
  border-color: rgba(90, 210, 160, 0.2);
  background: rgba(90, 210, 160, 0.08);
}

/* 统计数字样式 */
.wf-tl-stat {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.wf-tl-stat b {
  color: #E0E6ED;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}

.wf-tl-stat span {
  color: #8899AA;
  font-size: 10px;
  line-height: 13px;
}

/* ===== 横向物资供应链长条 ===== */
.supply-bars {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sb-bar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 210, 255, 0.1);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.35);
}

.sb-bar-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-bar-name {
  color: #BCCDD8;
  font-size: 13px;
  font-weight: 600;
  min-width: 36px;
}

.sb-bar-stock {
  color: #B0C0CC;
  font-size: 11px;
}

.sb-bar-stock b {
  color: #E0E6ED;
  font-weight: 600;
}

.sb-bar-daily {
  color: #8899AA;
  font-size: 10px;
}

.sb-bar-days {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

.sb-bar-days em {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
}

.sb-bar-days.good { color: #5ad2a0; }
.sb-bar-days.good em { color: #5ad2a0; }
.sb-bar-days.warn { color: #FF9F43; }
.sb-bar-days.warn em { color: #FF9F43; }
.sb-bar-days.danger { color: #e05555; }
.sb-bar-days.danger em { color: #e05555; }

.sb-bar-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.sb-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s;
}

.sb-bar-fill.good { background: linear-gradient(90deg, #5ad2a0, #3da88a); }
.sb-bar-fill.warn { background: linear-gradient(90deg, #FF9F43, #cc8028); }
.sb-bar-fill.danger { background: linear-gradient(90deg, #e05555, #a03030); }

.work-screen[data-page="02"] .metric-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 4px;
  flex-shrink: 0;
}

.work-screen[data-page="02"] .metric-summary-item {
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 1px;
  padding: 6px 4px;
  border: 1px solid rgba(0, 210, 255, 0.13);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.5);
}

.work-screen[data-page="02"] .metric-summary-item span {
  color: #B0C0CC;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
}

.work-screen[data-page="02"] .metric-summary-val {
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
}

.work-screen[data-page="02"] .metric-summary-val.good { color: #5ad2a0; }
.work-screen[data-page="02"] .metric-summary-val.warn { color: #FF9F43; }
.work-screen[data-page="02"] .metric-summary-val.danger { color: #f0625d; }

.work-screen[data-page="02"] .metric-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px 8px;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 210, 255, 0.08);
  border-radius: 4px;
  flex: 1 1 auto;
}

.work-screen[data-page="02"] .metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.06);
}

.work-screen[data-page="02"] .metric-row:last-child,
.work-screen[data-page="02"] .metric-row:nth-last-child(2) { border-bottom: none; }

.work-screen[data-page="02"] .metric-row span {
  color: #8899AA;
  font-size: 11px;
}

.work-screen[data-page="02"] .metric-row b {
  color: #BCCDD8;
  font-size: 11px;
  font-weight: 600;
}

.work-screen[data-page="02"] .info-row {
  border-top-color: rgba(255, 255, 255, 0.05);
  color: #B0C0CC;
}

.work-screen[data-page="02"] .info-row i {
  color: #5a9fd4;
}

.work-screen[data-page="02"] .table-row {
  border-top-color: rgba(255, 255, 255, 0.05);
  color: #B0C0CC;
}

/* ===== 工程概况 / 关键指标仪表盘 ===== */
.project-facts {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 0;
}

/* ===== 数据网格 (2x6 完美矩阵) ===== */
.pf-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  flex: 1;
  min-height: 0;
}

/* ===== 圆环卡片（网格第一项） ===== */
.pf-ring-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 3px;
  background: rgba(20, 35, 60, 0.3);
  border-left: 2px solid rgba(255, 159, 67, 0.35);
}

.pf-ring-card .pf-ring-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.pf-ring-card .pf-ring {
  width: 28px;
  height: 28px;
}

.pf-ring-card .pf-ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF9F43;
  font-size: 10px;
  font-weight: 700;
}

.pf-ring-card .pf-ring-val em {
  font-size: 6px;
  font-style: normal;
  font-weight: 600;
  opacity: 0.7;
}

.pf-ring-card .pf-ring-text {
  min-width: 0;
}

.pf-ring-card .pf-ring-text strong {
  display: block;
  color: #E8EEF4;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}

.pf-ring-card .pf-ring-text small {
  display: block;
  color: #8899AA;
  font-size: 10px;
  line-height: 12px;
  margin-top: 2px;
}

/* ===== 单个数据块 ===== */
.project-facts .pf-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 3px;
  background: rgba(20, 35, 60, 0.3);
  border-left: 2px solid rgba(0, 210, 255, 0.18);
  min-height: 0;
}

.project-facts .pf-item i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #00D2FF;
  opacity: 0.85;
}

.project-facts .pf-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.project-facts .pf-value {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.project-facts .pf-label {
  color: #889AAA;
  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-facts .pf-desc {
  color: #6A7A8A;
  font-size: 10px;
  line-height: 12px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-screen[data-page="02"] .work-map {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.work-screen[data-page="02"] .work-map::before {
  display: none;
}

.work-screen[data-page="02"] .work-map img {
  opacity: 1;
}

.work-screen[data-page="02"] .stage-track b,
.work-screen[data-page="02"] .stage-track em {
  color: #B0C0CC;
}

.work-screen[data-page="02"] .photo-card {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(20, 35, 60, 0.35);
}

.work-screen[data-page="02"] .hero-metric small {
  color: #B0C0CC;
}

.work-screen[data-page="02"] .hero-metric strong {
  color: #00D2FF;
}

.work-screen[data-page="02"] .hero-metric em {
  color: #B0C0CC;
}

.work-screen[data-page="02"] .legend-row {
  color: #B0C0CC;
}

.info-list,
.table-list {
  display: grid;
  gap: 0;
}

.info-row {
  min-height: 28px;
  grid-template-columns: 22px 1fr 54px;
  border-top: 1px solid rgba(63, 174, 255, 0.13);
}

.table-row {
  min-height: 28px;
  display: grid;
  grid-template-columns: minmax(78px, 1fr) minmax(0, 1.3fr) minmax(40px, auto);
  align-items: center;
  gap: 5px;
  border-top: 1px solid rgba(63, 174, 255, 0.13);
  color: #c7dfeb;
  font-size: 11px;
}

.info-row:first-child,
.table-row:first-child {
  border-top: 0;
}

.info-row i {
  color: #48b9ff;
}

.info-row span,
.table-row span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table-row b:empty {
  display: none;
}

.status-pill {
  justify-self: end;
  min-width: 40px;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
}

.status-pill.good {
  color: #7ab8a8;
  background: rgba(90, 140, 120, 0.2);
}

.status-pill.warn {
  color: #c4945a;
  background: rgba(160, 120, 60, 0.2);
}

.status-pill.base {
  color: #5a8ab8;
  background: rgba(50, 90, 130, 0.2);
}

.status-pill.danger {
  color: #FF9F43;
  background: rgba(255, 159, 67, 0.18);
  border-color: rgba(255, 159, 67, 0.45);
}

.summary-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.summary-card article {
  min-height: 56px;
  padding: 8px 9px;
  border: 1px solid rgba(50, 165, 244, 0.32);
  border-radius: 4px;
  background: rgba(5, 45, 76, 0.44);
}

.summary-card strong {
  display: block;
  margin-top: 6px;
  color: var(--page-accent);
  font-size: 17px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-meter {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(86, 170, 214, 0.18);
}

.summary-meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 62%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--page-accent) 42%, transparent);
}

.summary-card:has(article:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-card:has(article:nth-child(4)) article {
  min-height: 48px;
  padding: 7px 6px;
}

.summary-card:has(article:nth-child(4)) small {
  font-size: 11px;
  line-height: 13px;
}

.summary-card:has(article:nth-child(4)) strong {
  margin-top: 4px;
  font-size: 14px;
  line-height: 16px;
}

.coverage-board {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 112px minmax(0, 1fr);
  gap: 10px;
}

.coverage-head {
  min-height: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
}

.coverage-ring {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 42%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(rgba(5, 34, 59, 0.72), rgba(5, 34, 59, 0.72)) padding-box,
    conic-gradient(var(--page-accent-2) 0 var(--gauge), rgba(82, 160, 206, 0.15) var(--gauge) 100%) border-box;
  box-shadow:
    inset 0 0 18px rgba(7, 31, 52, 0.8),
    0 0 18px color-mix(in srgb, var(--page-accent) 20%, transparent);
}

.coverage-ring small,
.coverage-ring span {
  max-width: 76px;
  color: #9fc4d6;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}

.coverage-ring strong {
  max-width: 82px;
  color: var(--page-accent);
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-stats {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 6px;
}

.coverage-stats article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 3px;
  gap: 4px 6px;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid rgba(72, 188, 255, 0.24);
  border-radius: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 70%),
    rgba(5, 46, 78, 0.3);
}

.coverage-stats small,
.coverage-bars span {
  min-width: 0;
  color: #b8d4e3;
  font-size: 11px;
  line-height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-stats strong {
  color: var(--page-accent);
  font-size: 12px;
  font-weight: 600;
}

.coverage-stats em,
.coverage-bars em {
  grid-column: 1 / -1;
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(86, 170, 214, 0.15);
}

.coverage-stats em::before,
.coverage-bars em::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 62%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--page-accent) 32%, transparent);
}

.coverage-bars {
  min-height: 0;
  display: grid;
  gap: 7px;
}

.coverage-bars article {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto 3px;
  align-items: center;
  gap: 4px 7px;
  padding: 6px 7px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.26);
}

.coverage-bars article.good {
  --page-accent: var(--page-accent-2);
}

.coverage-bars article.warn {
  --page-accent: var(--page-alert);
}

.coverage-bars i {
  width: 18px;
  height: 18px;
  color: var(--page-accent);
}

.coverage-bars .status-pill {
  min-width: 38px;
  padding: 1px 4px;
  font-size: 10px;
  line-height: 13px;
}

.work-screen[data-page="05"] .coverage-board {
  grid-template-rows: 106px minmax(0, 1fr);
}

.work-screen[data-page="02"] .coverage-board {
  grid-template-rows: 84px minmax(0, 1fr);
  gap: 6px;
}

.work-screen[data-page="02"] .coverage-ring {
  border-color: rgba(0, 210, 255, 0.3);
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.12);
}

.work-screen[data-page="02"] .coverage-ring strong {
  color: #00D2FF;
}

.work-screen[data-page="02"] .coverage-ring small,
.work-screen[data-page="02"] .coverage-ring span {
  color: #7A8C9E;
}

.work-screen[data-page="02"] .coverage-stats article {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(20, 35, 60, 0.35);
}

.work-screen[data-page="02"] .coverage-stats small,
.work-screen[data-page="02"] .coverage-stats span {
  color: #7A8C9E;
}

.work-screen[data-page="02"] .coverage-stats strong {
  color: #E0E6ED;
}

.work-screen[data-page="02"] .coverage-bars article {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(20, 35, 60, 0.35);
}

.work-screen[data-page="02"] .coverage-bars strong {
  color: #E0E6ED;
}

.work-screen[data-page="02"] .coverage-bars span {
  color: #7A8C9E;
}

.work-screen[data-page="02"] .coverage-bars i {
  color: #00D2FF;
}

.work-screen[data-page="02"] .coverage-bars em {
  background: #1C3F6E;
}

.work-screen[data-page="02"] .coverage-bars em::before {
  background: linear-gradient(90deg, #00D2FF, #1C3F6E);
}

.work-screen[data-page="02"] .work-panel[data-side="left"],
.work-screen[data-page="02"] .work-panel[data-side="right"] {
  box-shadow:
    0 18px 36px rgba(0, 7, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.work-screen[data-page="02"] .summary-card strong {
  color: #E0E6ED;
}

.work-screen[data-page="02"] .summary-card small {
  color: #7A8C9E;
}

.work-screen[data-page="02"] .summary-meter {
  background: #1C3F6E;
}

.work-screen[data-page="02"] .summary-meter::before {
  background: linear-gradient(90deg, #00D2FF, #1C3F6E);
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.3);
}

.work-screen[data-page="02"] .coverage-head {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 6px;
}

.work-screen[data-page="02"] .coverage-ring {
  gap: 2px;
}

.work-screen[data-page="02"] .coverage-ring small,
.work-screen[data-page="02"] .coverage-ring span {
  max-width: 62px;
  font-size: 9px;
  line-height: 11px;
}

.work-screen[data-page="02"] .stage-hero small,
.work-screen[data-page="02"] .stage-hero span {
  color: #B0C0CC;
  font-size: 13px;
  line-height: 16px;
}

.work-screen[data-page="02"] .stage-hero strong {
  color: #00D2FF;
}

.work-screen[data-page="02"] .workfront-focus small,
.work-screen[data-page="02"] .workfront-focus span {
  color: #B0C0CC;
  font-size: 12px;
  line-height: 15px;
}

.work-screen[data-page="02"] .workfront-focus strong {
  color: #E0E6ED;
  font-size: 15px;
  line-height: 17px;
}

.work-screen[data-page="02"] .workfront-list strong {
  color: #E0E6ED;
  font-size: 13px;
}

.work-screen[data-page="02"] .workfront-list span {
  color: #B0C0CC;
  font-size: 12px;
}

.work-screen[data-page="02"] .workfront-list em {
  background: #1C3F6E;
}

.work-screen[data-page="02"] .workfront-list em::before {
  background: linear-gradient(90deg, #00D2FF, #1C3F6E);
}

.work-screen[data-page="02"] .photo-card strong {
  color: #E0E6ED;
}

.work-screen[data-page="02"] .photo-card span {
  color: #B0C0CC;
}

.work-screen[data-page="02"] .control-board strong {
  color: #E0E6ED;
}

.work-screen[data-page="02"] .control-board span {
  color: #B0C0CC;
}

.work-screen[data-page="02"] .control-board em {
  background: #1C3F6E;
}

.work-screen[data-page="02"] .control-board em::before {
  background: linear-gradient(90deg, #00D2FF, #1C3F6E);
}

.work-screen[data-page="02"] .work-badge {
  border-color: rgba(0, 210, 255, 0.4);
  background: rgba(0, 210, 255, 0.12);
  color: #00D2FF;
}

.work-screen[data-page="02"] .work-badge.warn {
  border-color: rgba(255, 159, 67, 0.5);
  background: rgba(255, 159, 67, 0.15);
  color: #FF9F43;
}

.work-screen[data-page="02"] .stage-summary span {
  background: rgba(20, 35, 60, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
  color: #7A8C9E;
}

.work-screen[data-page="02"] .stage-summary b {
  color: #E0E6ED;
}

.work-screen[data-page="02"] .stage-hero {
  border-color: rgba(0, 210, 255, 0.2);
  background:
    linear-gradient(90deg, rgba(0, 210, 255, 0.08), transparent 72%),
    rgba(20, 35, 60, 0.4);
}

.work-screen[data-page="02"] .workfront-focus {
  border-color: rgba(0, 210, 255, 0.15);
  background:
    linear-gradient(90deg, rgba(0, 210, 255, 0.06), transparent 70%),
    rgba(20, 35, 60, 0.3);
}

.work-screen[data-page="02"] .workfront-list article {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(20, 35, 60, 0.3);
  padding: 8px 10px;
}

.work-screen[data-page="02"] .workfront-list article.warn {
  border-color: rgba(255, 159, 67, 0.25);
}

.work-screen[data-page="02"] .workfront-list article.good {
  border-color: rgba(90, 180, 150, 0.25);
}

.work-screen[data-page="02"] .control-board article {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(0, 210, 255, 0.04), transparent),
    rgba(20, 35, 60, 0.3);
}

.work-screen[data-page="02"] .control-board article.warn {
  border-color: rgba(255, 159, 67, 0.25);
}

.work-screen[data-page="02"] .control-board article.good {
  border-color: rgba(90, 180, 150, 0.25);
}

.work-screen[data-page="02"] .coverage-ring strong {
  max-width: 68px;
  font-size: 13px;
  line-height: 15px;
}

.work-screen[data-page="02"] .coverage-stats {
  gap: 4px;
}

.work-screen[data-page="02"] .coverage-stats article {
  padding: 3px 6px;
}

.work-screen[data-page="02"] .coverage-bars {
  gap: 4px;
}

.work-screen[data-page="02"] .coverage-bars article {
  min-height: 28px;
  gap: 2px 6px;
  padding: 3px 6px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
}

.work-screen[data-page="02"] .coverage-bars i {
  width: 15px;
  height: 15px;
}

.work-panel[data-kind="summaryRows"] .info-list {
  margin-top: 8px !important;
}

.work-panel[data-kind="summaryRows"] .info-row {
  min-height: 23px;
}

.stage-rail {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 44px;
  gap: 8px;
}

.stage-hero {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3px 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 36%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 20%, transparent), transparent 72%),
    rgba(5, 43, 70, 0.36);
}

.stage-hero small,
.stage-hero span {
  min-width: 0;
  color: #b7d6e4;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-hero strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--page-accent);
  font-size: 29px;
  line-height: 29px;
  text-shadow: 0 0 15px color-mix(in srgb, var(--page-accent) 42%, transparent);
}

.stage-track {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.stage-track::before,
.stage-track::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 17px;
  height: 3px;
  border-radius: 999px;
  background: #1C3F6E;
}

.stage-track::after {
  right: auto;
  width: var(--active, 44%);
  background: linear-gradient(90deg, #00D2FF, #1C3F6E);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.38);
}

.stage-track article {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 36px auto auto auto;
  gap: 3px;
  justify-items: center;
  padding: 0 3px;
}

.stage-track i {
  width: 22px;
  height: 22px;
  align-self: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(4, 24, 43, 0.92);
  box-shadow: 0 0 12px currentColor;
}

.stage-track article.good {
  color: #00D2FF;
}

.stage-track article.warn {
  color: #5a9fd4;
  animation: breathe 2s ease-in-out infinite;
}

.stage-track article.base {
  color: #5a9fd4;
}

.stage-track article.base i {
  background: rgba(4, 24, 43, 0.92);
  box-shadow: none;
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(90, 159, 212, 0.3); }
  50% { box-shadow: 0 0 16px rgba(90, 159, 212, 0.6); }
}

.stage-track span,
.stage-track b,
.stage-track em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.stage-track span {
  color: #B0C0CC;
  font-size: 12px;
  font-weight: 700;
}

.stage-track b,
.stage-track em {
  color: #C0D4E0;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.stage-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.stage-summary span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.28);
  color: #a9cde0;
  font-size: 11px;
}

.stage-summary b {
  display: inline;
  flex: 0 0 auto;
  margin-top: 0;
  color: var(--page-accent);
  font-size: 12px;
}

.workfront-board {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  gap: 7px;
}

.workfront-focus {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 32%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 18%, transparent), transparent 70%),
    rgba(5, 46, 78, 0.3);
}

.workfront-focus small,
.workfront-focus span {
  display: block;
  color: #a9cde0;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workfront-focus strong {
  display: block;
  margin: 2px 0;
  color: #f5fbff;
  font-size: 14px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workfront-list {
  min-height: 0;
  display: grid;
  gap: 6px;
}

.workfront-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-rows: auto 3px;
  gap: 4px 7px;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid rgba(72, 188, 255, 0.24);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.25);
}

.workfront-list article.warn {
  border-color: rgba(241, 163, 65, 0.38);
}

.workfront-list article.good {
  border-color: rgba(53, 223, 155, 0.34);
}

.workfront-list i {
  width: 20px;
  height: 20px;
  color: #7A8C9E;
}

.workfront-list strong,
.workfront-list span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workfront-list strong {
  color: #eaf7ff;
  font-size: 11px;
  line-height: 14px;
}

.workfront-list span {
  color: #9fc4d6;
  font-size: 10px;
  line-height: 12px;
}

.workfront-list em {
  grid-column: 1 / -1;
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(86, 170, 214, 0.15);
}

.workfront-list em::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 60%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
}

.road-bands {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  gap: 6px;
}

.road-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--page-accent-2) 34%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 14%, transparent), color-mix(in srgb, var(--page-accent-2) 6%, transparent)),
    rgba(5, 46, 78, 0.28);
}

.road-score small,
.road-score span {
  color: #acd2e3;
  font-size: 11px;
  line-height: 14px;
}

.road-score strong {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--page-accent-2);
  font-size: 30px;
  line-height: 30px;
}

.road-band-list {
  min-height: 0;
  display: grid;
  gap: 5px;
}

.road-band-list article {
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.24);
}

.road-band-list article.warn {
  border-color: rgba(241, 163, 65, 0.36);
}

.road-band-list header,
.road-band-list div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.road-band-list strong,
.road-band-list span,
.road-band-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.road-band-list strong {
  color: #edf8ff;
  font-size: 11px;
  line-height: 13px;
}

.road-band-list span,
.road-band-list em {
  color: #9fc4d6;
  font-size: 10px;
  font-style: normal;
  line-height: 12px;
}

.road-band-list i {
  position: relative;
  display: block;
  height: 4px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(86, 170, 214, 0.15);
}

.road-band-list i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 70%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-alert), var(--page-accent));
  box-shadow: 0 0 10px rgba(78, 171, 255, 0.28);
}

.control-board {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.control-board article {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto 4px;
  gap: 5px 8px;
  padding: 9px 8px;
  border: 1px solid rgba(72, 188, 255, 0.24);
  border-radius: 5px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 9%, transparent), transparent),
    rgba(5, 46, 78, 0.24);
}

.control-board article.warn {
  border-color: rgba(241, 163, 65, 0.4);
}

.control-board article.good {
  border-color: rgba(53, 223, 155, 0.36);
}

.control-board i {
  width: 20px;
  height: 20px;
  color: var(--page-accent);
}

.control-board div,
.control-board strong,
.control-board span {
  min-width: 0;
}

.control-board strong,
.control-board span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-board strong {
  color: color-mix(in srgb, var(--page-accent-2) 78%, #ffffff);
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}

.control-board span {
  color: color-mix(in srgb, var(--page-accent-2) 54%, #ffffff);
  font-size: 11px;
  line-height: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.control-board b {
  grid-column: 1 / -1;
  color: #E0E6ED;
  font-size: 18px;
  line-height: 20px;
}

.control-board em {
  grid-column: 1 / -1;
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--page-accent-2) 16%, transparent);
}

.control-board em::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 68%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
}

.incident-command {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 72px 58px minmax(0, 1fr);
  gap: 8px;
}

.incident-core {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 42%, transparent);
  border-radius: 5px;
  background:
    radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--page-accent) 28%, transparent), transparent 36%),
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 22%, transparent), rgba(7, 35, 62, 0.34));
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--page-accent) 12%, transparent);
}

.incident-core small,
.incident-core span {
  display: block;
  color: color-mix(in srgb, var(--page-accent) 72%, #ffffff);
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-core strong {
  display: block;
  margin: 4px 0 3px;
  color: #fff;
  font-size: 18px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.incident-meta article {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 28%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--page-accent) 12%, rgba(10, 22, 38, 0.7));
  text-align: center;
}

.incident-meta span,
.incident-meta b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-meta span {
  color: color-mix(in srgb, var(--page-accent) 64%, #ffffff);
  font-size: 10px;
}

.incident-meta b {
  margin-top: 3px;
  color: var(--page-accent);
  font-size: 13px;
}

.incident-actions {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.incident-actions article {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto 3px;
  gap: 3px 7px;
  padding: 7px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.24);
}

.incident-actions article.warn {
  border-color: color-mix(in srgb, var(--page-alert) 38%, transparent);
}

.incident-actions article.good {
  border-color: rgba(53, 223, 155, 0.32);
}

.incident-actions i {
  width: 18px;
  height: 18px;
  color: var(--page-accent);
}

.incident-actions span,
.incident-actions b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-actions span {
  color: #eef9ff;
  font-size: 11px;
  font-weight: 700;
}

.incident-actions b {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--page-accent-2) 64%, #ffffff);
  font-size: 10px;
  font-weight: 500;
}

.incident-actions em {
  grid-column: 1 / -1;
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--page-accent) 15%, transparent);
}

.incident-actions em::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 60%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent), var(--page-alert));
}

.condition-matrix {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr);
  gap: 8px;
}

.condition-score {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--page-accent-2) 34%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 18%, transparent), rgba(143, 120, 255, 0.07)),
    rgba(5, 46, 78, 0.26);
}

.condition-score small,
.condition-score span {
  color: #b4d6e4;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.condition-score strong {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--page-accent);
  font-size: 34px;
  line-height: 34px;
}

.condition-cells {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.condition-cells article {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 4px;
  gap: 5px 7px;
  padding: 8px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 5px;
  background: rgba(5, 46, 78, 0.24);
}

.condition-cells article.warn {
  border-color: rgba(241, 163, 65, 0.42);
}

.condition-cells article.good {
  border-color: rgba(53, 223, 155, 0.34);
}

.condition-cells i {
  width: 19px;
  height: 19px;
  color: var(--page-accent);
}

.condition-cells span,
.condition-cells strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.condition-cells span {
  color: #dff3fc;
  font-size: 12px;
  font-weight: 700;
}

.condition-cells strong {
  justify-self: end;
  color: var(--page-accent);
  font-size: 18px;
  line-height: 20px;
}

.condition-cells .status-pill {
  grid-column: 1 / 4;
  justify-self: start;
}

.condition-cells em {
  grid-column: 1 / 4;
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(86, 170, 214, 0.15);
}

.condition-cells em::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 72%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
}

.flow-line {
  display: flex;
  align-items: stretch;
  height: 68px;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

.flow-step {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  position: relative;
  background: rgba(10, 25, 45, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-right: -1px;
}

.flow-step + .flow-step {
  border-left: none;
}

.flow-node {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--page-accent-2) 32%, transparent);
  color: #5a6d7e;
  background: rgba(10, 22, 38, 0.7);
  position: relative;
  z-index: 1;
  transition: all 0.3s;
}

.flow-step.done .flow-node {
  background: color-mix(in srgb, var(--page-accent) 22%, rgba(5, 20, 38, 0.8));
  border-color: color-mix(in srgb, var(--page-accent) 60%, transparent);
  color: var(--page-accent);
}

.flow-step.current .flow-node {
  background: color-mix(in srgb, var(--page-accent) 30%, rgba(5, 20, 38, 0.9));
  border-color: var(--page-accent);
  color: var(--page-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--page-accent) 32%, transparent);
  width: 30px;
  height: 30px;
}

.flow-step span {
  color: #5a6d7e;
  font-size: 10px;
  font-weight: 500;
  transition: color 0.3s;
}

.flow-step.done span,
.flow-step.current span {
  color: color-mix(in srgb, var(--page-accent-2) 74%, #ffffff);
}

.flow-step.current span {
  font-weight: 700;
}

.flow-connector {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  width: calc(100% + 2px);
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent-2) 28%, transparent), color-mix(in srgb, var(--page-accent-2) 28%, transparent));
  z-index: 0;
}

.flow-step.done .flow-connector {
  background: linear-gradient(90deg, var(--page-accent), color-mix(in srgb, var(--page-accent) 40%, transparent));
}

.flow-step.done + .flow-step.current .flow-connector {
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 50%, transparent), color-mix(in srgb, var(--page-accent-2) 28%, transparent));
}

.flow-step.current .flow-connector {
  background: color-mix(in srgb, var(--page-accent-2) 28%, transparent);
}

.flow-step:last-child .flow-connector {
  display: none;
}

.photo-list,
.route-list {
  display: grid;
  gap: 7px;
}

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

.photo-card,
.route-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  min-height: 64px;
  padding: 6px;
  border: 1px solid rgba(50, 165, 244, 0.28);
  border-radius: 4px;
  background: rgba(5, 45, 76, 0.42);
}

.photo-card {
  display: block;
  min-height: 0;
  padding: 5px;
}

.photo-card img,
.route-card img,
.spotlight img {
  width: 100%;
  height: 54px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.photo-card strong,
.route-card strong,
.spotlight strong {
  display: block;
  color: #e9f7ff;
  font-size: 13px;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card strong {
  margin-top: 4px;
  font-size: 11px;
  line-height: 14px;
  white-space: normal;
}

.photo-card span,
.route-card span,
.spotlight p {
  display: block;
  margin: 3px 0 0;
  color: #9fc4d6;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-card span {
  display: none;
}

/* ===== 时光轴滑块 ===== */
/* ===== 工程演变轴 ===== */
.evolution-timeline {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 5px;
}

.evo-compare {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  cursor: col-resize;
  user-select: none;
}

.evo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evo-after {
  position: absolute;
  inset: 0;
}

.evo-before-wrap {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  border-right: 2px solid rgba(255, 255, 255, 0.55);
  z-index: 2;
}

.evo-before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--compare-w, 100%);
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) saturate(0.45);
}

.evo-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 30px;
  margin-left: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: col-resize;
}

.evo-arrow {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid #00D2FF;
  border-right: 9px solid #00D2FF;
}

.evo-data-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.evo-data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 4px;
  border: 1px solid rgba(0, 210, 255, 0.09);
  border-radius: 4px;
  background: rgba(0, 210, 255, 0.04);
}

.evo-data-item span {
  color: #5C6E7E;
  font-size: 10px;
  line-height: 12px;
}

.evo-data-item b {
  color: #00D2FF;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
}

.evo-timeline {
  min-height: 0;
  padding: 0 4px;
}

.evo-rail {
  position: relative;
  height: 42px;
  display: flex;
  align-items: flex-end;
}

.evo-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.evo-progress {
  position: absolute;
  left: 0;
  top: 8px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #00D2FF, rgba(0, 210, 255, 0.4));
  pointer-events: none;
}

.evo-node {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  z-index: 1;
}

.evo-node-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0, 210, 255, 0.3);
  background: #0A1A2E;
  transition: all 0.25s;
}

.evo-node.active .evo-node-dot {
  border-color: #00D2FF;
  background: #00D2FF;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
  width: 14px;
  height: 14px;
}

.evo-node.done .evo-node-dot {
  border-color: rgba(0, 210, 255, 0.5);
  background: rgba(0, 210, 255, 0.3);
}

.evo-node-label {
  color: rgba(180, 210, 225, 0.45);
  font-size: 9px;
  line-height: 11px;
  white-space: nowrap;
  transition: color 0.25s;
}

.evo-node.active .evo-node-label {
  color: #00D2FF;
}

.evo-node.done .evo-node-label {
  color: rgba(180, 210, 225, 0.65);
}

.evo-node-date {
  color: rgba(120, 150, 170, 0.3);
  font-size: 8px;
  line-height: 10px;
  white-space: nowrap;
  transition: color 0.25s;
}

.evo-node.active .evo-node-date {
  color: rgba(0, 210, 255, 0.7);
}

/* ===== 施工影像对比（保留旧版兼容） ===== */
.timeline-slider {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 40px;
  gap: 6px;
}

.timeline-compare {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  cursor: col-resize;
  user-select: none;
}

.timeline-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-after {
  position: absolute;
  inset: 0;
}

.timeline-before-wrap {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  z-index: 2;
}

.timeline-before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--compare-w, 100%);
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(0.5);
}

.timeline-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 32px;
  margin-left: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: col-resize;
}

.timeline-arrow {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #00D2FF;
  border-right: 10px solid #00D2FF;
}

.timeline-controls {
  display: grid;
  grid-template-rows: 6px 1fr;
  gap: 6px;
  align-content: center;
}

.timeline-rail {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #1C3F6E;
  overflow: hidden;
}

.timeline-progress {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1C3F6E, #00D2FF);
  pointer-events: none;
}

.timeline-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}

.timeline-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00D2FF;
  border: 2px solid #fff;
  cursor: pointer;
}

.timeline-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00D2FF;
  border: 2px solid #fff;
  cursor: pointer;
}

.timeline-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.timeline-label {
  color: #5a6d80;
  font-size: 10px;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}

.timeline-label.active {
  color: #00D2FF;
  font-weight: 600;
}

/* ===== 生态环境监测 ===== */
.eco-monitor {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
  padding: 2px 0;
}

.eco-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(90, 210, 160, 0.15);
  border-radius: 4px;
  background: rgba(90, 210, 160, 0.05);
  min-height: 0;
}

.eco-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 4px;
  position: relative;
  flex-shrink: 0;
}

.eco-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(5, 10, 21, 0.9);
}

.eco-ring strong,
.eco-ring small {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
}

.eco-ring strong {
  color: #5ad2a0;
  font-size: 15px;
  line-height: 15px;
  white-space: nowrap;
  align-self: start;
  margin-top: 6px;
}

.eco-ring small {
  color: #7A8C9E;
  font-size: 7px;
  line-height: 9px;
  text-align: center;
  max-width: 36px;
  align-self: end;
  margin-bottom: 4px;
}

.eco-hero-text span,
.eco-hero-text em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eco-hero-text span {
  color: #E0E6ED;
  font-size: 11px;
  line-height: 15px;
}

.eco-hero-text em {
  margin-top: 2px;
  font-size: 10px;
  font-style: normal;
}

.eco-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
}

.eco-metric {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 6px;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.25);
}

.eco-metric i {
  width: 18px;
  height: 18px;
  color: #00D2FF;
}

.eco-metric div span {
  display: block;
  color: #7A8C9E;
  font-size: 10px;
  line-height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-metric div strong {
  display: block;
  font-size: 14px;
  line-height: 16px;
}

.eco-metric div strong small {
  font-size: 10px;
  font-weight: 400;
  margin-left: 2px;
  color: #7A8C9E;
}

.eco-alerts {
  display: grid;
  gap: 3px;
  min-height: 0;
}

.eco-alerts-list {
  display: grid;
  gap: 3px;
  min-height: 0;
}

.eco-alerts-head {
  display: flex;
  align-items: center;
  gap: 5px;
}

.eco-alerts-head i {
  width: 14px;
  height: 14px;
  color: #FF9F43;
}

.eco-alerts-head span {
  color: #7A8C9E;
  font-size: 10px;
  font-weight: 600;
}

.eco-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border-radius: 3px;
  min-height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.eco-alert strong {
  color: #E0E6ED;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-alert span {
  color: #7A8C9E;
  font-size: 10px;
  white-space: nowrap;
}

.eco-alert b {
  min-width: 44px;
  font-size: 9px;
  padding: 1px 3px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

/* ===== 物资供应链动态 ===== */
.supply-chain {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  padding: 2px 0;
}

.sc-materials {
  display: grid;
  gap: 6px;
}

.sc-material {
  padding: 8px 10px;
  border: 1px solid rgba(0, 210, 255, 0.1);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.3);
}

.sc-material-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.sc-material-head span {
  color: #BCCDD8;
  font-size: 13px;
  font-weight: 600;
}

.sc-days {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.sc-days em {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
}

.sc-days.good { color: #5ad2a0; }
.sc-days.good em { color: #5ad2a0; }
.sc-days.warn { color: #FF9F43; }
.sc-days.warn em { color: #FF9F43; }
.sc-days.danger { color: #e05555; }
.sc-days.danger em { color: #e05555; }

.sc-material-bar {
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: 5px;
}

.sc-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.sc-bar-fill.good { background: linear-gradient(90deg, #5ad2a0, #2de8c0); }
.sc-bar-fill.warn { background: linear-gradient(90deg, #FF9F43, #f1a341); }
.sc-bar-fill.danger { background: linear-gradient(90deg, #e05555, #f0625d); }

.sc-material-vals {
  display: flex;
  justify-content: space-between;
}

.sc-material-vals em {
  font-size: 12px;
  color: #B0C0CC;
  font-style: normal;
}

.sc-material-vals em b {
  color: #E0E6ED;
  font-weight: 600;
  font-size: 13px;
}

.sc-mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  min-height: 0;
}

.sc-logistics,
.sc-stations {
  border: 1px solid rgba(0, 210, 255, 0.08);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.25);
  padding: 5px 7px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
}

.sc-logi-head {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sc-logi-head i {
  width: 14px;
  height: 14px;
  color: #00D2FF;
}

.sc-logi-head span {
  color: #B0C0CC;
  font-size: 10px;
  font-weight: 500;
}

.sc-logi-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  align-content: center;
}

.sc-logi-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid rgba(0, 210, 255, 0.05);
}

.sc-logi-item:last-child { border-bottom: none; }

.sc-logi-item b {
  color: #E0E6ED;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}

.sc-logi-item span {
  color: #5C6E7E;
  font-size: 10px;
}

.sc-station-list {
  display: grid;
  gap: 4px;
  align-content: center;
}

.sc-station {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
}

.sc-station span {
  color: #7A8C9E;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-station-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.sc-station-fill {
  height: 100%;
  border-radius: 3px;
}

.sc-station-fill.good { background: linear-gradient(90deg, #5ad2a0, #2de8c0); }
.sc-station-fill.warn { background: linear-gradient(90deg, #FF9F43, #f1a341); }
.sc-station-fill.danger { background: linear-gradient(90deg, #e05555, #f0625d); }

.sc-station b {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* ===== 设备监管信息 ===== */
.device-monitor {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 3px;
  padding: 0;
  overflow: hidden;
}

.device-hero {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(90, 180, 210, 0.15);
  border-radius: 4px;
  background: rgba(90, 180, 210, 0.05);
  min-height: 0;
}

.device-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 3px;
  position: relative;
  flex-shrink: 0;
}

.device-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(5, 10, 21, 0.9);
}

.device-ring strong,
.device-ring small {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
}

.device-ring strong {
  color: #5ad2a0;
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  align-self: start;
  margin-top: 3px;
}

.device-ring small {
  color: #7A8C9E;
  font-size: 5px;
  line-height: 7px;
  text-align: center;
  max-width: 28px;
  align-self: end;
  margin-bottom: 2px;
}

.device-hero-text span,
.device-hero-text em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-hero-text span {
  color: #E0E6ED;
  font-size: 9px;
  line-height: 13px;
}

.device-hero-text em {
  margin-top: 0;
  font-size: 8px;
  font-style: normal;
}

.device-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

.device-cat {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(20, 35, 60, 0.3);
}

.device-cat i {
  width: 28px;
  height: 28px;
  color: #00D2FF;
}

.device-cat div span {
  display: block;
  color: #7A8C9E;
  font-size: 11px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-cat div strong {
  display: block;
  font-size: 18px;
  line-height: 22px;
}

.device-cat div strong small {
  font-size: 11px;
  font-weight: 400;
  margin-left: 2px;
  color: #7A8C9E;
}

.device-alerts {
  display: grid;
  gap: 3px;
  min-height: 0;
}

.device-alerts-list {
  display: grid;
  gap: 3px;
  min-height: 0;
}

.device-alerts-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.device-alerts-head i {
  width: 14px;
  height: 14px;
  color: #FF9F43;
}

.device-alerts-head span {
  color: #7A8C9E;
  font-size: 11px;
  font-weight: 600;
}

.device-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 0;
  min-height: 32px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
}

.device-alert:last-child {
  border-bottom: none;
}

.da-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.da-left strong {
  color: #E0E6ED;
  font-size: 11px;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.da-status {
  color: #7A8C9E;
  font-size: 11px;
  white-space: nowrap;
}

.da-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* 状态胶囊 */
.da-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.da-pill--warn {
  color: #FF9F43;
  border: 1px solid rgba(255, 159, 67, 0.3);
  background: rgba(255, 159, 67, 0.08);
}

.da-pill--danger {
  color: #e05555;
  border: 1px solid rgba(224, 85, 85, 0.3);
  background: rgba(224, 85, 85, 0.08);
}

.da-pill--good {
  color: #5ad2a0;
  border: 1px solid rgba(90, 210, 160, 0.25);
  background: rgba(90, 210, 160, 0.06);
}

/* 时间标签 */
.da-time {
  color: #5a6d7e;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

/* ===== 实时路况事件列表 ===== */
.traffic-events {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.te-page {
  position: absolute;
  inset: 0 0 26px 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.te-page.active {
  opacity: 1;
  z-index: 1;
}

.te-card-big {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.te-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.5);
}

.te-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.58) contrast(1.08) saturate(0.9);
  transform: translateZ(0);
}

.te-card-big::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 20, 36, 0.08), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.35;
}

.te-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.te-overlay strong {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
}

.te-overlay time {
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  font-weight: 500;
  line-height: 11px;
}

.te-overlay .te-tag {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  margin-bottom: 2px;
}

.te-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}

.te-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.3s;
}

.te-dots i.active {
  background: #FF9F43;
  box-shadow: 0 0 4px rgba(255, 159, 67, 0.5);
}

.te-tag { white-space: nowrap; }
.te-tag.warn { background: rgba(255, 159, 67, 0.2); color: #FF9F43; }
.te-tag.good { background: rgba(90, 210, 160, 0.18); color: #5ad2a0; }
.te-tag.base { background: rgba(0, 210, 255, 0.15); color: #00D2FF; }
.te-tag.danger { background: rgba(240, 98, 93, 0.2); color: #f0625d; }

/* ===== 监控画面 ===== */
.monitor-feed {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 5px;
}

.monitor-main {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
}

.monitor-main-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.monitor-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--page-alert);
  animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.monitor-main-meta strong {
  color: #E0E6ED;
  font-size: 11px;
}

.monitor-main-meta small {
  color: #7A8C9E;
  font-size: 10px;
  margin-left: auto;
}

.monitor-main-canvas {
  min-height: 0;
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 4px;
  background: rgba(5, 10, 21, 0.6);
  overflow: hidden;
  position: relative;
}

.monitor-main-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.monitor-thumb {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  justify-items: center;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  background: rgba(20, 35, 60, 0.3);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.monitor-thumb.active {
  border-color: rgba(0, 210, 255, 0.35);
  background: rgba(0, 210, 255, 0.08);
}

.monitor-thumb-inner {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 2px;
  background: rgba(5, 10, 21, 0.5);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.monitor-thumb-inner i {
  width: 14px;
  height: 14px;
  color: #3A5A7A;
  opacity: 0.6;
}

.monitor-thumb-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monitor-thumb span {
  color: #E0E6ED;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.monitor-thumb small {
  color: #7A8C9E;
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.monitor-alerts {
  display: grid;
  gap: 3px;
}

.monitor-alerts-head {
  display: flex;
  align-items: center;
  gap: 5px;
}

.monitor-alerts-head i {
  width: 12px;
  height: 12px;
  color: #FF9F43;
}

.monitor-alerts-head span {
  color: #7A8C9E;
  font-size: 9px;
  font-weight: 600;
}

.monitor-alerts-list {
  display: grid;
  gap: 3px;
}

.monitor-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  min-height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 35, 60, 0.15);
}

.monitor-alert strong {
  color: #E0E6ED;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-alert span {
  color: #7A8C9E;
  font-size: 9px;
  white-space: nowrap;
}

.monitor-alert b {
  min-width: 38px;
  font-size: 8px;
  padding: 1px 2px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}

/* ===== 拥堵点趋势 ===== */
.congestion-trend {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
}

.congestion-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--page-accent-2) 24%, transparent);
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 8%, transparent), transparent 60%);
}

.congestion-hero-left {
  min-width: 0;
}

.congestion-hero-left small {
  display: block;
  color: var(--page-accent-2);
  font-size: 9px;
  line-height: 12px;
}

.congestion-hero-left strong {
  display: block;
  color: #E0E6ED;
  font-size: 13px;
  line-height: 16px;
}

.congestion-hero-left span {
  display: block;
  margin-top: 1px;
  color: #7A8C9E;
  font-size: 9px;
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.congestion-hero-right {
  text-align: right;
  flex-shrink: 0;
}

.congestion-hero-right em {
  display: block;
  color: var(--page-accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
}

.congestion-hero-right b {
  display: block;
  color: #7A8C9E;
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
}

.congestion-list {
  display: grid;
  gap: 3px;
  min-height: 0;
}

.congestion-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-left: 2px solid rgba(90, 159, 212, 0.35);
  border-radius: 0 4px 4px 0;
  background: rgba(20, 35, 60, 0.16);
}

.congestion-item-info {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}

.congestion-item-info span {
  color: #E0E6ED;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.congestion-item-info strong {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #5a9fd4;
}

.congestion-item:has(.danger) .congestion-item-info strong {
  color: var(--page-alert);
}

.congestion-bar-wrap {
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.congestion-bar {
  height: 100%;
  width: var(--meter);
  border-radius: inherit;
  background: #5a9fd4;
}

.congestion-item:has(.danger) .congestion-bar {
  background: var(--page-alert);
}

.congestion-item > small {
  min-width: 42px;
  text-align: right;
  color: #7A8C9E;
  font-size: 9px;
  white-space: nowrap;
}

.congestion-item > .status-pill {
  font-size: 8px;
  min-width: 34px;
  padding: 1px 5px;
}

.route-card {
  grid-template-columns: 70px minmax(0, 1fr);
  min-height: 64px;
  padding: 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 15%, transparent), rgba(5, 45, 76, 0.36)),
    rgba(5, 45, 76, 0.32);
}

.work-screen[data-page="06"] .route-card:nth-child(1) {
  --page-accent: #7fc7dd;
  --page-accent-2: #6ea8c8;
}

.work-screen[data-page="06"] .route-card:nth-child(2) {
  --page-accent: #8eb0c5;
  --page-accent-2: #6ea8c8;
}

.work-screen[data-page="06"] .route-card:nth-child(3) {
  --page-accent: #91a6bd;
  --page-accent-2: #6ea8c8;
}

.route-card img {
  height: 52px;
}

.route-card > div {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 2px;
}

.route-card em {
  position: absolute;
  right: 0;
  top: 0;
  color: color-mix(in srgb, var(--page-accent) 62%, #ffffff);
  font-size: 10px;
  font-style: normal;
  opacity: 0.78;
}

.route-card strong,
.route-card span,
.route-stops,
.route-card .route-meter {
  grid-column: 1 / -1;
}

.route-stops {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 3px 46px 0 0;
  overflow: hidden;
}

.route-stops::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent-2) 70%, transparent), color-mix(in srgb, var(--page-accent) 48%, transparent));
}

.route-stops small {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 64px;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 38%, transparent);
  border-radius: 999px;
  background: rgba(4, 31, 54, 0.74);
  color: #cfeaf6;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-card b {
  position: absolute;
  right: 0;
  bottom: -1px;
  color: var(--page-accent);
  font-size: 11px;
  font-weight: 600;
}

.route-card .route-meter {
  position: relative;
  height: 4px;
  margin: 2px 42px 0 0;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(88, 166, 209, 0.18);
}

.route-card .route-meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--route-meter, 60%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--page-accent) 42%, transparent);
}

.route-card:first-child {
  min-height: 68px;
  grid-template-columns: 78px minmax(0, 1fr);
}

.route-card:first-child img {
  height: 58px;
}

.work-screen[data-page="06"] .route-list {
  height: 100%;
  gap: 6px;
}

.work-screen[data-page="06"] .route-card {
  min-height: 72px;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px;
  padding: 6px;
  border-color: color-mix(in srgb, var(--page-accent) 34%, transparent);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--page-accent) 16%, transparent), rgba(4, 32, 57, 0.24) 60%),
    rgba(4, 29, 51, 0.2);
}

.work-screen[data-page="06"] .route-card:first-child {
  min-height: 82px;
  grid-template-columns: 92px minmax(0, 1fr);
}

.work-screen[data-page="06"] .route-card img {
  height: 60px;
  opacity: 0.9;
}

.work-screen[data-page="06"] .route-card--project {
  grid-template-columns: 56px minmax(0, 1fr);
}

.work-screen[data-page="06"] .route-card--project .route-project-icon {
  width: 48px;
  height: 48px;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--page-accent) 36%, transparent);
  border-radius: 8px;
  color: var(--page-accent);
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--page-accent) 28%, transparent), transparent 58%),
    rgba(5, 46, 78, 0.32);
  box-shadow: inset 0 0 16px rgba(45, 232, 255, 0.08);
}

.work-screen[data-page="06"] .route-card--project .route-project-icon svg {
  width: 25px;
  height: 25px;
}

.work-screen[data-page="06"] .route-card:first-child img {
  height: 70px;
}

.work-screen[data-page="06"] .route-card--project:first-child {
  grid-template-columns: 62px minmax(0, 1fr);
}

.work-screen[data-page="06"] .route-card--project:first-child .route-project-icon {
  width: 54px;
  height: 54px;
}

.work-screen[data-page="06"] .route-card--project strong,
.work-screen[data-page="06"] .route-card--project span {
  font-size: 12px;
}

.work-screen[data-page="06"] .route-card strong {
  padding-right: 28px;
}

.spotlight {
  display: grid;
  grid-template-rows: auto auto minmax(0, auto);
  gap: 8px;
  height: 100%;
  align-content: start;
}

.spotlight img {
  height: 66px;
}

.spotlight p {
  max-height: 32px;
}

.work-panel[data-kind="spotlight"] .metric-grid {
  gap: 6px;
}

.work-panel[data-kind="spotlight"] .metric-card {
  height: 42px;
}

.work-screen[data-page="06"] .spotlight {
  grid-template-rows: 84px auto minmax(0, 42px);
  gap: 9px;
}

.work-screen[data-page="06"] .spotlight img {
  height: 84px;
  opacity: 0.92;
}

.work-screen[data-page="06"] .spotlight p {
  max-height: 34px;
}

.work-screen[data-page="06"] .work-panel[data-kind="spotlight"] .metric-grid {
  gap: 7px;
}

.work-screen[data-page="06"] .work-panel[data-kind="spotlight"] .metric-card {
  height: 42px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent-2) 9%, transparent), transparent),
    rgba(5, 46, 78, 0.22);
}

.service-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 84px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.service-gauge {
  justify-self: center;
  width: 82px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 42%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(rgba(5, 34, 59, 0.78), rgba(5, 34, 59, 0.78)) padding-box,
    conic-gradient(var(--page-accent-2) 0 var(--gauge), rgba(82, 160, 206, 0.18) var(--gauge) 100%) border-box;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--page-accent) 22%, transparent),
    inset 0 0 18px rgba(7, 31, 52, 0.84);
}

.service-gauge small,
.service-gauge span {
  color: #9fc4d6;
  font-size: 11px;
  line-height: 13px;
}

.service-gauge strong {
  display: block;
  color: var(--page-accent);
  font-size: 24px;
  line-height: 26px;
}

.service-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}

.service-tiles article {
  min-width: 0;
  min-height: 43px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 3px;
  column-gap: 6px;
  align-items: center;
  padding: 5px 6px;
  border: 1px solid rgba(72, 188, 255, 0.26);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.36);
}

.work-screen[data-page="06"] .service-tiles article:nth-child(4n + 1),
.work-screen[data-page="06"] .service-actions article:nth-child(4n + 1) {
  --page-accent: #7fc7dd;
  --page-accent-2: #6ea8c8;
}

.work-screen[data-page="06"] .service-tiles article:nth-child(4n + 2),
.work-screen[data-page="06"] .service-actions article:nth-child(4n + 2) {
  --page-accent: #6ea8c8;
  --page-accent-2: #86a7c4;
}

.work-screen[data-page="06"] .service-tiles article:nth-child(4n + 3),
.work-screen[data-page="06"] .service-actions article:nth-child(4n + 3) {
  --page-accent: #b89462;
  --page-accent-2: #6ea8c8;
}

.work-screen[data-page="06"] .service-tiles article:nth-child(4n),
.work-screen[data-page="06"] .service-actions article:nth-child(4n) {
  --page-accent: #86a7c4;
  --page-accent-2: #6ea8c8;
}

.service-tiles i {
  grid-row: 1 / 3;
  width: 19px;
  height: 19px;
  color: var(--page-accent);
}

.service-tiles span,
.service-actions span {
  min-width: 0;
  color: #d8edf8;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-tiles b {
  color: var(--page-accent);
  font-size: 12px;
  font-weight: 600;
}

.service-tiles em {
  grid-column: 2 / 4;
  min-width: 0;
  color: #9fc4d6;
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-tiles article::after {
  content: "";
  grid-column: 1 / 4;
  width: var(--bar, 68%);
  height: 3px;
  margin-top: 2px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--page-accent) 34%, transparent);
}

.service-matrix {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  gap: 8px;
}

.service-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.service-summary article {
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(72, 188, 255, 0.24);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.34);
}

.service-summary small {
  color: #9fc4d6;
  font-size: 11px;
}

.service-summary strong {
  color: var(--page-accent);
  font-size: 16px;
  line-height: 18px;
}

.service-actions {
  display: grid;
  gap: 6px;
  min-height: 0;
}

.service-actions article {
  position: relative;
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 3px;
  gap: 2px 7px;
  align-items: center;
  padding: 5px 6px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.3);
}

.service-actions i {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  color: var(--page-accent);
}

.service-actions p {
  min-width: 0;
  margin: 0;
  color: #9fc4d6;
  font-size: 11px;
  line-height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-actions .status-pill {
  grid-row: 1 / 3;
}

.service-actions em {
  grid-column: 1 / 4;
  width: var(--meter, 62%);
  height: 3px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--page-accent) 32%, transparent);
}

.work-screen[data-page="06"] .service-grid {
  grid-template-columns: 118px minmax(0, 1fr);
  grid-template-rows: 100px minmax(0, 1fr);
  gap: 8px;
}

.work-screen[data-page="06"] .service-gauge {
  grid-row: 1;
  grid-column: 1;
  width: 100px;
  align-self: center;
  justify-self: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(45, 232, 255, 0.14), transparent 56%) padding-box,
    linear-gradient(rgba(5, 34, 59, 0.72), rgba(5, 34, 59, 0.72)) padding-box,
    conic-gradient(var(--page-accent-2) 0 var(--gauge), rgba(82, 160, 206, 0.13) var(--gauge) 100%) border-box;
  box-shadow:
    0 0 22px rgba(45, 232, 255, 0.14),
    inset 0 0 22px rgba(4, 19, 34, 0.82);
}

.work-screen[data-page="06"] .service-gauge strong {
  font-size: 27px;
  line-height: 28px;
}

.work-screen[data-page="06"] .service-gauge small,
.work-screen[data-page="06"] .service-gauge span {
  max-width: 68px;
  text-align: center;
  color: #b8d7e8;
}

.work-screen[data-page="06"] .sg-resource-stats {
  grid-row: 1;
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-content: center;
}

.work-screen[data-page="06"] .sg-resource-stats span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1px;
  padding: 6px 9px;
  border: 1px solid rgba(74, 190, 255, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(45, 232, 255, 0.08), rgba(143, 120, 255, 0.04)),
    rgba(5, 34, 59, 0.24);
  font-size: 10px;
  color: #8fb6c8;
  line-height: 12px;
  box-shadow: inset 0 0 14px rgba(45, 232, 255, 0.04);
}

.work-screen[data-page="06"] .sg-resource-stats b {
  font-size: 15px;
  font-weight: 700;
  color: #d7edf7;
  font-variant-numeric: tabular-nums;
}

.work-screen[data-page="06"] .service-tiles {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 7px;
}

.work-screen[data-page="06"] .service-tiles article {
  position: relative;
  min-height: 82px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 20px 15px 17px 13px 4px;
  justify-items: center;
  align-items: center;
  row-gap: 1px;
  padding: 4px 6px 3px;
  text-align: center;
  border-color: color-mix(in srgb, var(--page-accent) 26%, transparent);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--page-accent) 22%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 48%),
    rgba(5, 46, 78, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 18px rgba(45, 232, 255, 0.03);
}

.work-screen[data-page="06"] .service-tiles i {
  grid-row: 1;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--page-accent) 40%, transparent));
}

.work-screen[data-page="06"] .service-tiles span,
.work-screen[data-page="06"] .service-tiles b,
.work-screen[data-page="06"] .service-tiles em {
  grid-column: 1;
}

.work-screen[data-page="06"] .service-tiles span {
  font-size: 11px;
  line-height: 13px;
  color: #e4f4fb;
}

.work-screen[data-page="06"] .service-tiles b {
  font-size: 15px;
  line-height: 16px;
  text-shadow: 0 0 8px color-mix(in srgb, var(--page-accent) 36%, transparent);
}

.work-screen[data-page="06"] .service-tiles em {
  font-size: 10px;
  max-width: 100%;
  color: #b5d2df;
}

.work-screen[data-page="06"] .service-tiles article::after {
  grid-column: 1;
  width: var(--bar, 68%);
  margin-top: 0;
  height: 4px;
  box-shadow: 0 0 9px color-mix(in srgb, var(--page-accent) 42%, transparent);
}

.work-screen[data-page="06"] .service-matrix {
  height: auto;
  grid-template-rows: 46px auto;
  gap: 7px;
}

.work-screen[data-page="06"] .service-summary article {
  background:
    linear-gradient(180deg, rgba(45, 232, 255, 0.08), transparent),
    rgba(5, 46, 78, 0.18);
}

.work-screen[data-page="06"] .service-summary small {
  font-size: 10px;
}

.work-screen[data-page="06"] .service-summary strong {
  font-size: 15px;
  line-height: 16px;
}

.work-screen[data-page="06"] .service-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}

.work-screen[data-page="06"] .service-actions article {
  min-height: 48px;
  grid-template-columns: 21px minmax(0, 1fr);
  grid-template-rows: auto auto 3px;
  align-content: center;
  gap: 1px 6px;
  padding: 4px 5px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 11%, transparent), transparent 58%),
    rgba(5, 46, 78, 0.2);
}

.work-screen[data-page="06"] .service-actions article:first-child {
  grid-column: auto;
  grid-template-columns: 21px minmax(0, 1fr);
  min-height: 48px;
}

.work-screen[data-page="06"] .service-actions i {
  grid-row: 1 / 3;
  width: 19px;
  height: 19px;
}

.work-screen[data-page="06"] .service-actions .status-pill {
  position: absolute;
  right: 5px;
  top: 2px;
  justify-self: auto;
  min-width: 34px;
  padding: 1px 4px;
  font-size: 10px;
  line-height: 13px;
}

.work-screen[data-page="06"] .service-actions article:first-child .status-pill {
  right: 5px;
  top: 2px;
}

.work-screen[data-page="06"] .service-actions em {
  grid-column: 1 / -1;
}

.work-screen[data-page="06"] .service-actions span {
  font-size: 11px;
  line-height: 13px;
  padding-right: 44px;
}

.work-screen[data-page="06"] .service-actions p {
  font-size: 10px;
  line-height: 12px;
  padding-right: 44px;
}

/* ===== 热门景点轮播 ===== */
.spot-carousel {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
}

.sc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

.sc-slide.active {
  opacity: 1;
  z-index: 1;
}

.sc-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45);
}

.sc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 60%);
}

.sc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sc-header strong {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}

.sc-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 159, 67, 0.85);
  color: #FFF;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
}

.sc-overlay p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 15px;
  margin: 0 0 6px;
}

.sc-meta {
  display: flex;
  gap: 16px;
}

.sc-meta span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  line-height: 13px;
}

.sc-meta em {
  color: #FF9F43;
  font-style: normal;
  font-weight: 700;
  margin-left: 3px;
}

.sc-dots {
  position: absolute;
  bottom: 8px;
  right: 14px;
  display: flex;
  gap: 5px;
  z-index: 2;
}

.sc-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.3s;
}

.sc-dots i.active {
  background: #FF9F43;
  box-shadow: 0 0 4px rgba(255, 159, 67, 0.5);
}

.work-screen[data-page="06"] .sc-meta em {
  color: #c99a5c;
}

.work-screen[data-page="06"] .sc-dots i.active {
  background: #c99a5c;
  box-shadow: 0 0 5px rgba(201, 154, 92, 0.32);
}

.work-screen[data-page="06"] .sc-tag,
.work-screen[data-page="06"] .work-badge.warn {
  color: #d9b77c;
  border-color: rgba(201, 154, 92, 0.52);
  background: rgba(79, 57, 30, 0.22);
}

.work-screen[data-page="06"] .work-badge {
  color: #b9cce0;
  border-color: rgba(134, 167, 196, 0.42);
  background: rgba(61, 82, 111, 0.22);
}

/* ===== 沿途业态分布 ===== */
.biz-brief {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 6px 0;
}

.bb-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px 108px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid rgba(74, 190, 255, 0.08);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(45, 232, 255, 0.07), transparent 42%),
    rgba(5, 34, 59, 0.16);
}

.bb-item i {
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, var(--page-accent) 78%, #2de8ff);
  opacity: 0.78;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--page-accent) 35%, transparent));
}

.bb-info {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.bb-info span {
  color: #9bb9c9;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-info b {
  color: #d8edf8;
  font-size: 15px;
  font-weight: 700;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.bb-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(74, 190, 255, 0.08);
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(1, 14, 24, 0.66);
}

.bb-bar em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7898b2, var(--page-accent), rgba(127, 199, 221, 0.52));
  box-shadow: 0 0 10px color-mix(in srgb, var(--page-accent) 42%, transparent);
  transition: width 0.6s ease;
}

/* ===== 金牌商户榜 ===== */
.merchant-rank {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}

.mr-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 210, 255, 0.06);
  background: rgba(20, 35, 60, 0.2);
}

.mr-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #FFF;
  background: var(--rank-color, #FF9F43);
  flex-shrink: 0;
}

.mr-rank.gold { background: linear-gradient(135deg, #FF9F43, #FF6B35); box-shadow: 0 0 8px rgba(255, 159, 67, 0.3); }
.mr-rank.silver { background: linear-gradient(135deg, #90A4AE, #78909C); }
.mr-rank.bronze { background: linear-gradient(135deg, #A1887F, #795548); }

.work-screen[data-page="06"] .mr-rank.gold {
  background: linear-gradient(135deg, #b98f5b, #9a7048);
  box-shadow: 0 0 8px rgba(185, 143, 91, 0.24);
}

.work-screen[data-page="06"] .mr-rank.silver {
  background: linear-gradient(135deg, #8ca2b2, #6f8798);
}

.work-screen[data-page="06"] .mr-rank.bronze {
  background: linear-gradient(135deg, #9a8170, #775f54);
}

.work-screen[data-page="06"] .mr-score {
  color: #d2a66a;
}

.mr-info {
  min-width: 0;
}

.mr-info-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mr-info-head strong {
  color: #D4DEE8;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr-tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 2px;
  background: rgba(0, 210, 255, 0.12);
  color: #5A9FD4;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  flex-shrink: 0;
}

.mr-info p {
  color: #5C6E7E;
  font-size: 10px;
  line-height: 12px;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr-score {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: #FF9F43;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mr-score em {
  color: #FF9F43;
  font-style: normal;
  font-size: 13px;
}

.resource-wheel {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 3px;
  margin: 0 -10px;
}

.resource-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 28%, transparent);
  border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 70%);
}

.resource-hero-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.resource-hero-left small {
  color: #5a7d8e;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.resource-hero-left strong {
  color: var(--page-accent);
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.resource-hero-left strong em {
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
  color: color-mix(in srgb, var(--page-accent) 58%, #ffffff);
}

.resource-hero-right {
  text-align: right;
  flex-shrink: 0;
}

.resource-hero-right > span {
  display: block;
  color: #4a6578;
  font-size: 8px;
  line-height: 12px;
}

.resource-summary {
  display: flex;
  gap: 6px;
  margin-top: 1px;
}

.resource-summary em {
  font-size: 12px;
  font-weight: 700;
  color: var(--page-accent);
  font-style: normal;
}

.resource-summary i {
  font-size: 8px;
  font-weight: 500;
  color: #5a6d7e;
  font-style: normal;
  align-self: end;
  margin-left: -5px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  min-height: 0;
}

.resource-spoke {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  row-gap: 2px;
  padding: 6px 7px;
  border-left: 2px solid rgba(72, 188, 255, 0.25);
  border-radius: 0 3px 3px 0;
  background: rgba(10, 25, 45, 0.2);
}

.resource-spoke i {
  width: 14px;
  height: 14px;
  color: var(--page-accent);
}

.resource-spoke.rs-ok {
  border-left-color: rgba(90, 210, 160, 0.45);
}

.resource-spoke.rs-warn {
  border-left-color: rgba(240, 160, 64, 0.45);
}

.resource-spoke.rs-base {
  border-left-color: rgba(72, 188, 255, 0.25);
}

.rs-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rs-info strong {
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--page-accent-2) 80%, #d0d8e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.rs-info small {
  font-size: 10px;
  color: #5a6d7e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.rs-status {
  justify-self: end;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
}

.resource-spoke.rs-ok .rs-status {
  color: #5ad2a0;
  background: rgba(90, 210, 160, 0.1);
  border: 1px solid rgba(90, 210, 160, 0.2);
}

.resource-spoke.rs-warn .rs-status {
  color: #f0a040;
  background: rgba(240, 160, 64, 0.1);
  border: 1px solid rgba(240, 160, 64, 0.2);
}

.resource-spoke.rs-base .rs-status {
  color: #6a8daa;
  background: rgba(106, 141, 170, 0.08);
  border: 1px solid rgba(106, 141, 170, 0.14);
}

.rs-meter {
  grid-column: 1 / -1;
  height: 2px;
  border-radius: 999px;
  background: rgba(72, 188, 255, 0.08);
  overflow: hidden;
}

.rs-meter::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--meter, 60%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
  box-shadow: 0 0 6px color-mix(in srgb, var(--page-accent) 32%, transparent);
  transition: width 0.6s ease;
}

.resource-spoke.rs-ok .rs-meter::before {
  background: linear-gradient(90deg, #5ad2a0, color-mix(in srgb, var(--page-accent) 70%, #5ad2a0));
}

.resource-spoke.rs-warn .rs-meter::before {
  background: linear-gradient(90deg, #f0a040, #f0c060);
}

.work-panel[data-kind="resourceWheel"] .panel-body {
  padding-bottom: 4px;
}

/* ===== 处置时间线 — 横向里程碑 ===== */
.event-timeline {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 4px;
  overflow: hidden;
  position: relative;
}

/* corner brackets */
.event-timeline::before,
.event-timeline::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 1;
}

.event-timeline::before {
  top: 2px;
  left: 2px;
  border-left: 2px solid rgba(255,159,67,0.3);
  border-top: 2px solid rgba(255,159,67,0.3);
  border-top-left-radius: 2px;
}

.event-timeline::after {
  bottom: 2px;
  right: 2px;
  border-right: 2px solid rgba(255,159,67,0.3);
  border-bottom: 2px solid rgba(255,159,67,0.3);
  border-bottom-right-radius: 2px;
}

/* pipe track */
.et-pipe-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.et-pipe-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(90,210,160,0.6), #5ad2a0, #5ad2a0);
  border-radius: inherit;
  transition: width 0.5s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.et-pipe-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #FF9F43;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 10px rgba(255,159,67,0.7);
  z-index: 3;
  animation: et-node-glow 1.8s ease-in-out infinite;
}

@keyframes et-node-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,159,67,0.5); }
  50% { box-shadow: 0 0 16px rgba(255,159,67,0.9); }
}

.et-pipe-pulse {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255,159,67,0.6);
  z-index: 2;
  animation: et-pulse-expand 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes et-pulse-expand {
  0% { width: 6px; height: 6px; opacity: 0.8; border-width: 3px; margin-top: 0; margin-left: 0; }
  100% { width: 30px; height: 30px; opacity: 0; border-width: 1px; margin-top: -12px; margin-left: -12px; }
}

.et-callout {
  position: absolute;
  top: -18px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

.et-callout span {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255,159,67,0.12);
  border: 1px solid rgba(255,159,67,0.3);
  border-radius: 3px;
  color: #FFB060;
  font-size: 7px;
  font-weight: 600;
  line-height: 13px;
  text-shadow: 0 0 4px rgba(255,159,67,0.3);
}

.et-pipe-rule {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 0;
   border-left: 1px dashed rgba(255,159,67,0.22);
   z-index: 0;
   pointer-events: none;
 }

/* milestones row */
.et-milestones {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  align-items: flex-start;
  padding: 0;
}

.et-ms {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  padding: 0 2px;
}

.et-ms-node {
  width: 100%;
  height: 12px;
  display: flex;
  align-items: center;
  position: relative;
}

.et-ms-line {
  flex: 1;
  height: 1.5px;
  background: transparent;
  border-top: 1.5px dashed;
}

.et-ms-line--good { border-color: rgba(90,210,160,0.3); }
.et-ms-line--warn { border-color: rgba(255,159,67,0.15); }
.et-ms-line--base { border-color: rgba(120,140,160,0.12); }

.et-ms:first-child .et-ms-node { justify-content: flex-start; }
.et-ms:last-child .et-ms-node { justify-content: flex-end; }
.et-ms:last-child .et-ms-line { display: none; }

.et-ms-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}

.et-ms-dot--good {
  background: #5ad2a0;
  border: 2px solid rgba(90,210,160,0.4);
  box-shadow: 0 0 5px rgba(90,210,160,0.3);
}

.et-ms-dot--warn {
  background: #FF9F43;
  border: 2px solid rgba(255,159,67,0.4);
  box-shadow: 0 0 6px rgba(255,159,67,0.3);
}

.et-ms--active .et-ms-dot--warn {
  animation: et-dot-breathe 1.8s ease-in-out infinite;
}

.et-ms-dot--base {
  background: transparent;
  border: 2px solid rgba(120,140,160,0.2);
}

@keyframes et-dot-breathe {
  0%, 100% { box-shadow: 0 0 4px rgba(255,159,67,0.2); }
  50% { box-shadow: 0 0 10px rgba(255,159,67,0.5); }
}

.et-ms-time {
  color: #8AB4D8;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
}

.et-ms--active .et-ms-time {
  color: #FFB060;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(255,159,67,0.4);
}

.et-ms--good .et-ms-time {
  color: #5a6d7e;
}

.et-ms-title {
  color: #BCCDD8;
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  text-align: center;
}

.et-ms--active .et-ms-title {
  color: #FFB060;
  font-size: 13px;
  text-shadow: 0 0 4px rgba(255,159,67,0.3);
}

.et-ms--good .et-ms-title {
  color: #667788;
  font-size: 10px;
}

/* active milestone — breathing border highlight */
.et-ms--active {
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  border: 1px solid transparent;
  animation: et-active-border 2s ease-in-out infinite;
  background: rgba(255,159,67,0.04);
}

@keyframes et-active-border {
  0%, 100% { border-color: rgba(255,159,67,0.2); box-shadow: 0 0 6px rgba(255,159,67,0.08); }
  50% { border-color: rgba(255,159,67,0.5); box-shadow: 0 0 14px rgba(255,159,67,0.15); }
}

/* next actions — card list */
.et-next-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 3px 3px;
  background: rgba(8,18,36,0.25);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.03);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.et-next-head {
  color: #667788;
  font-size: 8px;
  font-weight: 600;
  line-height: 11px;
  letter-spacing: 2px;
  padding: 0 5px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.et-next-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(14,28,52,0.5);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.025);
  position: relative;
}

/* dashed divider between cards */
.et-next-item + .et-next-item::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 8px;
  right: 8px;
  border-top: 1px dashed rgba(255,255,255,0.04);
}

.et-next-time {
  color: #FFB060;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  flex-shrink: 0;
  text-shadow: 0 0 4px rgba(255,159,67,0.3);
}

.et-next-desc {
  color: #BCCDD8;
  font-size: 11px;
  line-height: 14px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.et-next-tag {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #FF9F43;
  font-size: 6px;
  font-weight: 700;
  line-height: 12px;
  padding: 1px 6px;
  border: 1px solid rgba(255,159,67,0.25);
  border-radius: 8px;
  background: rgba(255,159,67,0.08);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.et-next-tag i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FF9F43;
  box-shadow: 0 0 4px rgba(255,159,67,0.6);
}

.et-next-tag--prep {
  background: rgba(255,179,71,0.12);
  border-color: rgba(255,179,71,0.25);
  color: #FFB347;
}

.et-next-tag--prep i {
  background: #FFB347;
  box-shadow: 0 0 4px rgba(255,179,71,0.6);
}

/* resource preset — card style */
.et-resources {
  display: flex;
  gap: 8px;
  padding: 3px 4px;
}

.et-res-card {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(10,20,35,0.4);
  border: 1px solid rgba(255,255,255,0.03);
  flex: 1;
  position: relative;
  overflow: hidden;
}

.et-res-card--good {
  border-color: rgba(90,210,160,0.12);
}

.et-res-card--warn {
  border-color: rgba(255,159,67,0.12);
}

.et-res-icon {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.et-res-card--good .et-res-icon {
  color: #5ad2a0;
}

.et-res-card--warn .et-res-icon {
  color: #FF9F43;
}

.et-res-name {
  font-size: 8px;
  color: #8899AA;
  font-weight: 500;
  flex-shrink: 0;
}

.et-res-detail {
  font-size: 8px;
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}

.et-res-card--good .et-res-detail {
  color: #5ad2a0;
}

.et-res-card--warn .et-res-detail {
  color: #FFB060;
}

.et-res-bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,159,67,0.08);
}

.et-res-bar {
  display: block;
  height: 100%;
  width: 60%;
  background: linear-gradient(90deg, #FF9F43, #FFB060);
  animation: et-res-progress 2s ease-in-out infinite;
}

@keyframes et-res-progress {
  0%, 100% { opacity: 0.6; width: 55%; }
  50% { opacity: 1; width: 70%; }
}

/* countdown — with SVG ring */
.et-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: rgba(6,16,32,0.55);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  flex-shrink: 0;
}

.et-cd-end {
  color: #5a6d7e;
  font-size: 8px;
  font-weight: 500;
  line-height: 12px;
  flex-shrink: 0;
}

.et-cd-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  padding: 2px 0;
}

.et-cd-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  pointer-events: none;
}

.et-cd-ring svg {
  width: 100%;
  height: 100%;
}

.et-cd-num {
  color: #FF9F43;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255,159,67,0.7), 0 0 28px rgba(255,159,67,0.3);
  letter-spacing: 1px;
}

.et-cd-unit {
  color: #b08050;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ===== 救援力量部署 ===== */
.deploy-status {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  padding: 0 2px;
  position: relative;
}

.deploy-status::before,
.deploy-status::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 1;
}

.deploy-status::before {
  top: 1px;
  left: 1px;
  border-left: 2px solid rgba(90,210,160,0.3);
  border-top: 2px solid rgba(90,210,160,0.3);
  border-top-left-radius: 2px;
}

.deploy-status::after {
  bottom: 1px;
  right: 1px;
  border-right: 2px solid rgba(90,210,160,0.3);
  border-bottom: 2px solid rgba(90,210,160,0.3);
  border-bottom-right-radius: 2px;
}

.ds-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ds-head-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ds-head-dot--warn { background: #FF9F43; box-shadow: 0 0 6px rgba(255,159,67,0.5); animation: ds-dot-pulse 1.5s ease-in-out infinite; }
.ds-head-dot--good { background: #5ad2a0; box-shadow: 0 0 6px rgba(90,210,160,0.5); }
.ds-head-dot--danger { background: #e05555; box-shadow: 0 0 6px rgba(224,85,85,0.5); }

@keyframes ds-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ds-head b {
  color: #E0E6ED;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.ds-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-height: 0;
  justify-content: space-evenly;
}

.ds-bar-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 5px;
}

.ds-bar-label {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.ds-bar-label i {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.ds-bar-row--green .ds-bar-label i { color: #5ad2a0; }
.ds-bar-row--yellow .ds-bar-label i { color: #FF9F43; }
.ds-bar-row--gray .ds-bar-label i { color: #5a6d7e; }

.ds-bar-label span {
  color: #BCCDD8;
  font-size: 10px;
  font-weight: 600;
  line-height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ds-bar-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}

.ds-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s;
}

.ds-bar-fill--green { background: linear-gradient(90deg, #5ad2a0, #3da88a); }
.ds-bar-fill--yellow { background: linear-gradient(90deg, #FF9F43, #cc8028); }
.ds-bar-fill--gray { background: #3a4a58; }

.ds-bar-count {
  color: #8899AA;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.ds-bar-row--green .ds-bar-count { color: #5ad2a0; }
.ds-bar-row--yellow .ds-bar-count { color: #FF9F43; }

.ds-notice {
  color: #5a6d7e;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  flex-shrink: 0;
  padding: 2px 0;
  border-top: 1px solid rgba(255,255,255,0.03);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 现场实时感知 ===== */
.onsite-perception {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
}

.op-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.op-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.op-thumb-img {
  width: 100%;
  aspect-ratio: 16 / 11;
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 3px;
  background: rgba(0, 210, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-thumb-img i {
  width: 22px;
  height: 22px;
  color: rgba(0, 210, 255, 0.35);
}

.op-thumb-img video,
.op-thumb-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.op-thumb-img:has(video),
.op-thumb-img:has(img) {
  position: relative;
  overflow: hidden;
  background: rgba(4, 18, 32, 0.7);
  box-shadow: inset 0 0 18px rgba(0, 210, 255, 0.08);
}

.op-thumb-img:has(video)::after,
.op-thumb-img:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 18, 32, 0), rgba(4, 18, 32, 0.28)),
    linear-gradient(90deg, rgba(0, 210, 255, 0.18), transparent 18%, transparent 82%, rgba(0, 210, 255, 0.12));
}

.op-thumb span {
  color: #5C6E7E;
  font-size: 9px;
  line-height: 11px;
}

.op-weather {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.op-weather-item {
  padding: 6px 4px;
  border: 1px solid rgba(0, 210, 255, 0.08);
  border-radius: 3px;
  background: rgba(20, 35, 60, 0.25);
  text-align: center;
}

.op-weather-item span {
  color: #BCCDD8;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
}

.op-risks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.op-risk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 5px;
  border-radius: 3px;
  background: rgba(20, 35, 60, 0.25);
}

.op-risk.danger { border: 1px solid rgba(224, 85, 85, 0.25); background: rgba(224, 85, 85, 0.06); }
.op-risk.warn { border: 1px solid rgba(255, 159, 67, 0.2); background: rgba(255, 159, 67, 0.04); }
.op-risk.base { border: 1px solid rgba(0, 210, 255, 0.1); }

.op-risk span {
  color: #7A8C9E;
  font-size: 10px;
}

.op-risk b {
  font-size: 10px;
  font-weight: 700;
}

.op-risk.danger b { color: #e05555; }
.op-risk.warn b { color: #FF9F43; }
.op-risk.base b { color: #00D2FF; }

.work-screen[data-page="03"] .incident-command {
  grid-template-rows: 64px 48px minmax(0, 1fr);
  gap: 6px;
}

.work-screen[data-page="03"] .incident-core {
  padding: 8px 10px;
}

.work-screen[data-page="03"] .incident-core strong {
  margin: 2px 0;
  font-size: 16px;
  line-height: 19px;
}

.work-screen[data-page="03"] .incident-meta article {
  padding: 5px 4px;
}

.work-screen[data-page="03"] .incident-actions {
  gap: 5px;
}

.work-screen[data-page="03"] .incident-actions article {
  padding: 5px 6px;
}

.work-screen[data-page="03"] .resource-wheel {
  gap: 5px;
}

.work-screen[data-page="03"] .resource-hero {
  padding: 8px 10px;
}

.work-screen[data-page="03"] .resource-hero-left strong {
  font-size: 24px;
  line-height: 26px;
}

.work-screen[data-page="03"] .resource-hero-left small {
  font-size: 12px;
}

.work-screen[data-page="03"] .resource-hero-right > span {
  font-size: 10px;
}

.work-screen[data-page="03"] .resource-summary em {
  font-size: 16px;
}

.work-screen[data-page="03"] .resource-summary i {
  font-size: 10px;
}

.work-screen[data-page="03"] .resource-grid {
  gap: 5px;
}

.work-screen[data-page="03"] .resource-spoke {
  padding: 8px 9px;
  column-gap: 6px;
}

.work-screen[data-page="03"] .resource-spoke i {
  width: 16px;
  height: 16px;
}

.work-screen[data-page="03"] .rs-info strong {
  font-size: 13px;
}

.work-screen[data-page="03"] .rs-info small {
  font-size: 12px;
}

.work-screen[data-page="03"] .rs-status {
  font-size: 12px;
  padding: 2px 8px;
}

.work-screen[data-page="03"] .control-board article,
.work-screen[data-page="04"] .control-board article {
  gap: 4px 7px;
  padding: 6px 7px;
}

.work-screen[data-page="03"] .control-board {
  gap: 6px;
}

.work-screen[data-page="03"] .control-board span {
  font-size: 10px;
  line-height: 12px;
}

.work-screen[data-page="03"] .control-board b,
.work-screen[data-page="04"] .control-board b {
  font-size: 18px;
  line-height: 20px;
}

.work-screen[data-page="04"] .control-board {
  gap: 6px;
}

.work-screen[data-page="04"] .control-board article {
  padding: 10px 12px;
  gap: 5px 8px;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto 3px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(20, 35, 60, 0.35);
}

.work-screen[data-page="04"] .control-board i {
  width: 20px;
  height: 20px;
  grid-row: 1 / 3;
  align-self: center;
}

.work-screen[data-page="04"] .control-board strong {
  font-size: 14px;
  line-height: 17px;
  color: #E0E6ED;
}

.work-screen[data-page="04"] .control-board span {
  font-size: 12px;
  line-height: 16px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.work-screen[data-page="04"] .control-board b {
  font-size: 16px;
  line-height: 18px;
  grid-column: 2;
}

.work-screen[data-page="04"] .control-board em {
  height: 3px;
  grid-column: 1 / -1;
  background: #1C3F6E;
}

/* ---- inspect-table tabs ---- */
.inspect-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  padding: 4px;
  border: 1px solid rgba(91, 184, 255, 0.14);
  border-radius: 4px;
  background: rgba(4, 30, 55, 0.34);
}

.inspect-tabs button {
  flex: 1;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #7eaec4;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.inspect-tabs button.active {
  border-color: rgba(91, 184, 255, 0.25);
  background: rgba(45, 184, 255, 0.14);
  color: #b6d4e4;
}

.inspect-tabs button:hover:not(.active) {
  color: #96c8d6;
}

.work-screen[data-page="03"] .event-timeline {
  gap: 1px;
}

.work-screen[data-page="03"] .et-countdown {
  padding: 4px 10px;
}

.work-screen[data-page="04"] .condition-matrix {
  grid-template-rows: 62px minmax(0, 1fr);
  gap: 8px;
}

.work-screen[data-page="04"] .condition-score {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-color: rgba(0, 210, 255, 0.15);
  background:
    linear-gradient(90deg, rgba(0, 210, 255, 0.08), transparent 72%),
    rgba(20, 35, 60, 0.4);
}

.cm-score-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cm-score-left small {
  color: #B0C0CC;
  font-size: 13px;
  line-height: 16px;
}

.cm-score-left strong {
  font-size: 34px;
  line-height: 34px;
  color: #00D2FF;
}

.cm-score-left span {
  color: #8899AA;
  font-size: 11px;
  line-height: 14px;
}

.cm-score-trend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.cm-trend-svg {
  display: block;
}

.cm-trend-label {
  color: #667788;
  font-size: 8px;
  line-height: 10px;
}

.work-screen[data-page="04"] .condition-cells {
  gap: 6px;
}

.work-screen[data-page="04"] .condition-cells article {
  gap: 5px 8px;
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(20, 35, 60, 0.15);
}

.work-screen[data-page="04"] .condition-cells article.warn {
  border-color: rgba(255, 159, 67, 0.1);
}

.work-screen[data-page="04"] .condition-cells article.good {
  border-color: rgba(90, 210, 160, 0.1);
}

.work-screen[data-page="04"] .condition-cells span {
  color: #8899AA;
  font-size: 12px;
}

.work-screen[data-page="04"] .condition-cells strong {
  color: #8899AA;
  font-size: 20px;
}

.work-screen[data-page="04"] .condition-cells .status-pill {
  color: #8899AA;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(20, 35, 60, 0.3);
  font-size: 10px;
  min-width: 34px;
  padding: 1px 5px;
}

.work-screen[data-page="04"] .condition-cells .status-pill.good {
  color: #5ad2a0;
  border-color: rgba(90, 210, 160, 0.32);
  background: rgba(90, 210, 160, 0.1);
}

.work-screen[data-page="04"] .condition-cells .status-pill.warn {
  color: #d9a458;
  border-color: rgba(255, 159, 67, 0.32);
  background: rgba(255, 159, 67, 0.1);
}

/* ===== Page-04 面板与文字配色统一 ===== */
.work-screen[data-page="04"] .work-panel {
  border-color: rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(20, 35, 60, 0.6), rgba(15, 25, 45, 0.4)),
    rgba(10, 18, 35, 0.3);
  box-shadow:
    0 18px 36px rgba(0, 7, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.work-screen[data-page="04"] .work-panel::before {
  background:
    linear-gradient(90deg, rgba(0, 210, 255, 0.03), transparent 34%, transparent 66%, rgba(0, 210, 255, 0.03)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 38%);
}

.work-screen[data-page="04"] .work-panel-title {
  border-bottom-color: rgba(0, 210, 255, 0.15);
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.08), transparent 72%);
  color: #E0E6ED;
  text-shadow: none;
}

.work-screen[data-page="04"] .work-panel-title::before {
  background: linear-gradient(180deg, #00D2FF, #1C3F6E);
}

.work-screen[data-page="04"] .work-badge {
  border-color: rgba(0, 210, 255, 0.4);
  background: rgba(0, 210, 255, 0.12);
  color: #00D2FF;
}

.work-screen[data-page="04"] .work-badge.warn {
  border-color: rgba(255, 159, 67, 0.5);
  background: rgba(255, 159, 67, 0.15);
  color: #FF9F43;
}

/* Page-04 文字层级：次要文字更淡 */
.work-screen[data-page="04"] .device-hero-text span,
.work-screen[data-page="04"] .device-cat div span,
.work-screen[data-page="04"] .device-alerts-head span,
.work-screen[data-page="04"] .table-row span,
.work-screen[data-page="04"] .info-row span,
.work-screen[data-page="04"] .workfront-focus small,
.work-screen[data-page="04"] .workfront-focus span,
.work-screen[data-page="04"] .workfront-list span,
.work-screen[data-page="04"] .control-board span,
.work-screen[data-page="04"] .stage-summary span,
.work-screen[data-page="04"] .metric-card span {
  color: #B0C0CC;
}

.work-screen[data-page="04"] .device-hero-text span {
  font-size: 13px;
  line-height: 16px;
  color: #E0E6ED;
}

.work-screen[data-page="04"] .device-hero-text em {
  font-size: 10px;
  color: #8899AA;
}

.work-screen[data-page="04"] .device-ring strong {
  color: #5ad2a0;
  font-size: 13px;
}

.work-screen[data-page="04"] .device-ring small {
  color: #8899AA;
  font-size: 7px;
}

.work-screen[data-page="04"] .device-cat {
  background: rgba(20, 35, 60, 0.5);
  padding: 10px 12px;
}

.work-screen[data-page="04"] .device-cat div span {
  color: #B0C0CC;
  font-size: 12px;
}

.work-screen[data-page="04"] .device-cat div strong {
  font-size: 20px;
  line-height: 24px;
}

.work-screen[data-page="04"] .device-cat i {
  color: #00D2FF;
}

.work-screen[data-page="04"] .da-left strong {
  color: #E0E6ED;
  font-size: 11px;
  line-height: 15px;
}

.work-screen[data-page="04"] .device-alerts-head i {
  color: #FF9F43;
}

.work-screen[data-page="04"] .device-alerts-head span {
  color: #B0C0CC;
  font-size: 12px;
}

.work-screen[data-page="04"] .device-alerts-list {
  gap: 0;
}

.device-alerts-footer {
  flex-shrink: 0;
  margin-top: 2px;
}

.work-screen[data-page="04"] .device-alerts-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 4px;
}

.work-screen[data-page="04"] .inspect-tabs {
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px;
}

.work-screen[data-page="04"] .work-panel[data-kind="inspectTable"] .panel-body {
  padding: 10px 16px;
}

.work-screen[data-page="04"] .inspect-tabs button {
  color: #8899AA;
  font-size: 13px;
  height: 30px;
}

.work-screen[data-page="04"] .inspect-tabs button.active {
  color: #00D2FF;
  border-color: rgba(0, 210, 255, 0.4);
  font-size: 13px;
}

.work-screen[data-page="04"] .table-row {
  color: #B0C0CC;
  border-top-color: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  line-height: 20px;
  min-height: 32px;
}

.work-screen[data-page="04"] .status-pill {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(20, 35, 60, 0.35);
  color: #8899AA;
  font-size: 12px;
  padding: 3px 7px;
}

.work-screen[data-page="04"] .status-pill.good {
  border-color: rgba(90, 210, 160, 0.32);
  background: rgba(90, 210, 160, 0.12);
  color: #5ad2a0;
}

.work-screen[data-page="04"] .status-pill.warn,
.work-screen[data-page="04"] .status-pill.alert {
  border-color: rgba(255, 159, 67, 0.32);
  background: rgba(255, 159, 67, 0.1);
  color: #d9a458;
}

/* Page-04 工点卡片样式 */
.work-screen[data-page="04"] .workfront-focus {
  border-color: rgba(0, 210, 255, 0.15);
  background:
    linear-gradient(90deg, rgba(0, 210, 255, 0.06), transparent 70%),
    rgba(20, 35, 60, 0.35);
}

.work-screen[data-page="04"] .workfront-list article {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(20, 35, 60, 0.35);
  padding: 10px 12px;
}

.work-screen[data-page="04"] .workfront-list article.warn {
  border-color: rgba(255, 159, 67, 0.25);
}

.work-screen[data-page="04"] .workfront-list article.good {
  border-color: rgba(90, 210, 160, 0.25);
}

.work-screen[data-page="04"] .workfront-list em {
  background: #1C3F6E;
}

.work-screen[data-page="04"] .workfront-list em::before {
  background: linear-gradient(90deg, #00D2FF, #1C3F6E);
}

.work-screen[data-page="04"] .workfront-focus strong {
  color: #E0E6ED;
  font-size: 15px;
  line-height: 18px;
}

.work-screen[data-page="04"] .workfront-list strong {
  color: #E0E6ED;
  font-size: 14px;
}

.work-screen[data-page="04"] .workfront-focus small,
.work-screen[data-page="04"] .workfront-focus span {
  color: #B0C0CC;
  font-size: 12px;
  line-height: 15px;
}

.work-screen[data-page="04"] .workfront-list span {
  color: #B0C0CC;
  font-size: 12px;
}

/* ===== 智能决策闭环 ===== */
.decision-loop {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-alert {
  padding: 8px 10px;
  border: 1px solid rgba(255, 79, 79, 0.25);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(200, 50, 50, 0.1), rgba(200, 50, 50, 0.03));
  flex-shrink: 0;
}

.dl-alert-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.dl-alert-head i {
  width: 20px;
  height: 20px;
  color: #e05555;
  flex-shrink: 0;
  animation: dl-icon-pulse 1.6s ease-in-out infinite;
}

@keyframes dl-icon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.dl-alert-text {
  min-width: 0;
  flex: 1;
}

.dl-alert-text strong {
  display: block;
  color: #E0E6ED;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  margin-bottom: 2px;
}

.dl-alert-text span {
  display: block;
  color: #B0C0CC;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-alert-badge {
  padding: 3px 8px;
  border: 1px solid rgba(224, 85, 85, 0.4);
  border-radius: 3px;
  background: rgba(224, 85, 85, 0.15);
  color: #e05555;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  flex-shrink: 0;
  animation: dl-badge-blink 2s ease-in-out infinite;
}

@keyframes dl-badge-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.dl-alert-ai {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 210, 255, 0.1);
  border-radius: 3px;
  background: rgba(0, 210, 255, 0.04);
}

.dl-alert-ai i {
  width: 14px;
  height: 14px;
  color: rgba(0, 210, 255, 0.5);
  flex-shrink: 0;
}

.dl-alert-ai span {
  color: #8899AA;
  font-size: 11px;
  line-height: 15px;
  font-style: italic;
}

.dl-section-label {
  color: #00D2FF;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  margin: 0 0 3px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.15);
}

.dl-table-section {
  flex-shrink: 0;
  padding: 2px 0 0;
}

.dl-table {
  display: flex;
  flex-direction: column;
}

.dl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  min-height: 32px;
}

.dl-row:last-child {
  border-bottom: none;
}

/* 养护决策行 — 更高更宽 */
.dl-table--decisions .dl-row--decision {
  grid-template-rows: auto auto auto;
  gap: 0 10px;
  padding: 4px 10px;
  min-height: 42px;
}

.dl-row-header {
  grid-row: 1;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.dl-row-meta {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.dl-row-left {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.dl-row-left i {
  width: 16px;
  height: 16px;
  color: rgba(0, 210, 255, 0.5);
  flex-shrink: 0;
}

.dl-row-name {
  color: #BCCDD8;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-row-desc {
  grid-row: 2;
  grid-column: 1;
  color: #8899AA;
  font-size: 10px;
  line-height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* decision row overrides — use flex inside header/meta */
.dl-row--decision .dl-row-left {
  grid-row: unset;
  grid-column: unset;
}

.dl-row--decision .dl-row-desc {
  grid-row: unset;
  grid-column: unset;
}

.dl-row-right {
  grid-row: 1 / 3;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  justify-self: end;
}

/* 状态胶囊统一 */
.dl-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dl-pill--warn {
  color: #d9a458;
  border: 1px solid rgba(255, 159, 67, 0.35);
  background: rgba(255, 159, 67, 0.1);
}

.dl-pill--base {
  color: #5a9fd4;
  border: 1px solid rgba(90, 159, 212, 0.3);
  background: rgba(90, 159, 212, 0.08);
}

.dl-pill--good {
  color: #5ad2a0;
  border: 1px solid rgba(90, 210, 160, 0.3);
  background: rgba(90, 210, 160, 0.1);
}

/* 额外信息胶囊 */
.dl-extra-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dl-extra-capsule--countdown {
  color: #FF9F43;
  border: 1px solid rgba(255, 159, 67, 0.2);
  background: rgba(255, 159, 67, 0.06);
}

.dl-extra-capsule--dist {
  color: #5a9fd4;
  border: 1px solid rgba(90, 159, 212, 0.2);
  background: rgba(90, 159, 212, 0.06);
}

.dl-extra-capsule--warn {
  color: #e05555;
  border: 1px solid rgba(224, 85, 85, 0.2);
  background: rgba(224, 85, 85, 0.06);
}

/* 进度条 - 跨全宽 */
.dl-row-bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  margin-top: 3px;
}

/* 决策行进度条加粗 */
.dl-row--decision .dl-row-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: 3px;
}

.dl-row-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s;
}

.dl-row-bar-fill--warn { background: linear-gradient(90deg, #FF9F43, #cc8028); }
.dl-row-bar-fill--base { background: linear-gradient(90deg, #5a9fd4, #3a6e9e); }
.dl-row-bar-fill--good { background: linear-gradient(90deg, #5ad2a0, #3da88a); }

.work-screen[data-page="04"] .work-panel[data-kind="decisionLoop"] .panel-body {
  padding-bottom: 7px;
}

.work-screen[data-page="04"] .decision-loop {
  justify-content: space-between;
  gap: 12px;
}

.work-screen[data-page="04"] .decision-loop .dl-alert {
  padding: 9px 10px;
}

.work-screen[data-page="04"] .decision-loop .dl-alert-ai {
  margin-top: 7px;
  padding-block: 7px;
}

.work-screen[data-page="04"] .decision-loop .dl-section-label {
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.work-screen[data-page="04"] .decision-loop .dl-row {
  min-height: 38px;
  padding: 6px 10px;
}

.work-screen[data-page="04"] .decision-loop .dl-table--decisions {
  gap: 2px;
}

.work-screen[data-page="04"] .decision-loop .dl-table--decisions .dl-row--decision {
  min-height: 48px;
  padding-block: 6px;
}

/* ===== 巡检卡片流 ===== */
.inspect-cards {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ic-tab-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ic-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  background: rgba(20, 35, 60, 0.22);
  min-height: 38px;
}

.ic-card-left {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0, 210, 255, 0.08);
  flex-shrink: 0;
}

.ic-card-left i {
  width: 16px;
  height: 16px;
  color: rgba(0, 210, 255, 0.55);
}

.ic-card-body {
  min-width: 0;
}

.ic-card-body strong {
  display: block;
  color: #BCCDD8;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-card-body span {
  display: block;
  color: #8899AA;
  font-size: 10px;
  line-height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.ic-card-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 13px;
  flex-shrink: 0;
}

.ic-card-bar span {
  color: inherit;
}

.ic-card-bar--good {
  border: 1px solid rgba(90, 210, 160, 0.25);
  background: rgba(90, 210, 160, 0.08);
  color: #5ad2a0;
}

.ic-card-bar--warn {
  border: 1px solid rgba(255, 159, 67, 0.25);
  background: rgba(255, 159, 67, 0.08);
  color: #FF9F43;
}

.ic-card-bar--base {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(127, 140, 157, 0.06);
  color: #7A8C9E;
}

/* ===== 设备异常预警 ===== */
.da-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.da-dot.good { background: #5ad2a0; }
.da-dot.warn {
  background: #FF9F43;
  animation: da-breath 1.4s ease-in-out infinite;
}
.da-dot.danger {
  background: #e05555;
  animation: da-breath 1s ease-in-out infinite;
}

@keyframes da-breath {
  0%, 100% { opacity: 1; box-shadow: 0 0 2px currentColor; }
  50% { opacity: 0.25; box-shadow: 0 0 8px currentColor; }
}

.device-alert--pulse {
  animation: da-pulse-border 2s ease-in-out infinite;
}

@keyframes da-pulse-border {
  0%, 100% { border-left-color: rgba(224, 85, 85, 0.3); }
  50% { border-left-color: rgba(224, 85, 85, 0.7); }
}

.risk-proximity {
  height: 100%;
  min-height: 0;
  display: grid;
  gap: 5px;
}

.risk-proximity article {
  min-width: 0;
  min-height: 30px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto 3px;
  align-items: center;
  gap: 3px 7px;
  padding: 4px 7px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-alert) 8%, transparent), transparent),
    rgba(5, 46, 78, 0.26);
}

.risk-proximity i {
  width: 18px;
  height: 18px;
  color: var(--page-accent);
}

.risk-proximity div {
  min-width: 0;
}

.risk-proximity strong,
.risk-proximity span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-proximity strong {
  color: color-mix(in srgb, var(--page-accent-2) 78%, #ffffff);
  font-size: 12px;
  line-height: 14px;
}

.risk-proximity span {
  color: color-mix(in srgb, var(--page-accent-2) 54%, #ffffff);
  font-size: 11px;
  line-height: 12px;
}

.risk-proximity em {
  grid-column: 1 / 4;
  width: var(--meter, 60%);
  height: 3px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--page-alert), var(--page-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--page-alert) 32%, transparent);
}

/* ---- 灾害事故监测 ---- */
.monitor-table-wrap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.monitor-table {
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.8fr 0.7fr 0.6fr;
  gap: 0;
  height: 100%;
  align-content: start;
}

.monitor-thead {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 4px 6px 3px;
  border-bottom: 1px solid rgba(72, 188, 255, 0.22);
  margin-bottom: 2px;
}

.monitor-thead span {
  font-size: 9px;
  font-weight: 600;
  color: #5a7d8e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 5px 6px;
  border-top: 1px solid rgba(72, 188, 255, 0.08);
  align-items: center;
  transition: background 0.2s;
}

.monitor-row:hover {
  background: rgba(72, 188, 255, 0.04);
}

.monitor-row:first-of-type {
  border-top: none;
}

.monitor-row span {
  font-size: 10px;
  color: #bcccd6;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.monitor-row span:first-child {
  font-weight: 600;
  color: color-mix(in srgb, var(--page-accent-2) 78%, #d0d8e0);
}

.monitor-row span:nth-child(3) {
  color: var(--page-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.monitor-row span:nth-child(4) {
  color: #6a7d8e;
  font-size: 9px;
}

.monitor-status {
  justify-self: center;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px !important;
  font-weight: 600 !important;
  border: 1px solid transparent;
}

.monitor-status.s-ok {
  color: #5ad2a0;
  border-color: rgba(90, 210, 160, 0.3);
  background: rgba(90, 210, 160, 0.08);
}

.monitor-status.s-watch {
  color: #f0a040;
  border-color: rgba(240, 160, 64, 0.35);
  background: rgba(240, 160, 64, 0.1);
}

.monitor-status.s-warn {
  color: #f05a5a;
  border-color: rgba(240, 90, 90, 0.35);
  background: rgba(240, 90, 90, 0.1);
}

/* ===== 交通组织方案 — 卡片堆叠 ===== */
.plan-compare-stack {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

/* main card */
.pcs-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  grid-template-rows: 1fr;
  gap: 4px;
  padding: 6px;
  border-radius: 5px;
  border: 1px solid rgba(90, 210, 160, 0.3);
  background:
    radial-gradient(ellipse at 60% 50%, rgba(90,210,160,0.04), transparent 60%),
    linear-gradient(180deg, rgba(90,210,160,0.08), rgba(5,46,78,0.3));
  overflow: hidden;
  position: relative;
}

/* ===== LEFT: topology zone ===== */
.pcs-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(4,14,28,0.4);
  border-radius: 4px;
  padding: 5px 4px;
  min-width: 0;
}

.pcs-left-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcs-topo-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 0;
}

.pcs-topo {
  width: 100%;
  max-width: 110px;
  height: auto;
}

.pcs-left-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
}

/* ===== RIGHT: data zone ===== */
.pcs-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pcs-right-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.pcs-right-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
}

/* corner brackets */
.pcs-main::before,
.pcs-main::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 1;
}

.pcs-main::before {
  top: 3px;
  left: 3px;
  border-left: 2px solid rgba(90,210,160,0.35);
  border-top: 2px solid rgba(90,210,160,0.35);
  border-top-left-radius: 2px;
}

.pcs-main::after {
  bottom: 3px;
  right: 3px;
  border-right: 2px solid rgba(90,210,160,0.35);
  border-bottom: 2px solid rgba(90,210,160,0.35);
  border-bottom-right-radius: 2px;
}

.pcs-score-ring {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pcs-score-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pcs-score-ring b {
  position: relative;
  z-index: 1;
  color: #5ad2a0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 6px rgba(90,210,160,0.3);
}

.pcs-main-title {
  color: #E0E6ED;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcs-ai-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
  color: #5ad2a0;
  border: 1px solid rgba(90,210,160,0.35);
  background: rgba(90,210,160,0.12);
  white-space: nowrap;
}

.pcs-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 18px;
  font-weight: 500;
  color: #B0C0CC;
  border: 1px solid rgba(90,210,160,0.2);
  background: rgba(90,210,160,0.06);
}

.pcs-action-chip b {
  font-size: 10px;
  font-weight: 700;
  color: #5ad2a0;
  background: rgba(90,210,160,0.15);
  border-radius: 2px;
  padding: 0 3px;
  line-height: 14px;
}

.pcs-action-chip--dim {
  color: #667788;
  border-color: rgba(100,120,140,0.15);
  background: rgba(100,120,140,0.04);
}

.pcs-action-chip--dim b {
  color: #667788;
  background: rgba(100,120,140,0.1);
}

/* collision data layout */
.pcs-collide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-height: 0;
  padding: 4px 4px;
}

.pcs-collide-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 4px;
  min-width: 58px;
}

.pcs-collide-block--red {
  background: radial-gradient(ellipse at center, rgba(224,85,85,0.1), transparent 70%);
  border: 1px solid rgba(224,85,85,0.15);
}

.pcs-collide-block--green {
  background: radial-gradient(ellipse at center, rgba(90,210,160,0.1), transparent 70%);
  border: 1px solid rgba(90,210,160,0.15);
}

.pcs-collide-block b {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}

.pcs-collide-block--red b {
  color: #e05555;
  text-shadow: 0 0 10px rgba(224,85,85,0.5);
}

.pcs-collide-block--green b {
  color: #5ad2a0;
  text-shadow: 0 0 10px rgba(90,210,160,0.5);
}

.pcs-collide-block b small {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.6;
  margin-left: 2px;
  letter-spacing: 0;
}

.pcs-collide-block span {
  color: #667788;
  font-size: 7px;
  font-weight: 500;
  line-height: 9px;
}

.pcs-collide-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.pcs-collide-arrow-shaft {
  color: #5ad2a0;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 6px rgba(90,210,160,0.5);
}

.pcs-collide-pct {
  color: #5ad2a0;
  font-size: 8px;
  font-weight: 600;
  line-height: 10px;
  white-space: nowrap;
  text-align: center;
}

.pcs-collide-pct b {
  color: #5ad2a0;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(90,210,160,0.4);
}

.pcs-main-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(90,210,160,0.3);
  background: rgba(90,210,160,0.08);
  color: #5ad2a0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: default;
  transition: border-color 0.3s;
  animation: pcs-btn-glow 2s ease-in-out infinite;
  flex-shrink: 0;
  position: relative;
}

.pcs-btn-bracket {
  color: rgba(90,210,160,0.5);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
}

.pcs-btn-bracket--l { margin-right: -2px; }
.pcs-btn-bracket--r { margin-left: -2px; }

@keyframes pcs-btn-glow {
  0%, 100% { border-color: rgba(90,210,160,0.3); box-shadow: 0 0 4px rgba(90,210,160,0.08), inset 0 0 4px rgba(90,210,160,0.04); }
  50% { border-color: rgba(90,210,160,0.7); box-shadow: 0 0 14px rgba(90,210,160,0.2), inset 0 0 8px rgba(90,210,160,0.08); }
}

.pcs-main-btn:hover {
  background: rgba(90,210,160,0.2);
}

/* alt card */
.pcs-alt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(100,130,160,0.1);
  background: rgba(5, 46, 78, 0.2);
  opacity: 0.65;
  flex-shrink: 0;
}

.pcs-alt-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  color: #5a6d7e;
  border: 1px solid rgba(100,120,140,0.2);
  background: rgba(100,120,140,0.06);
  flex-shrink: 0;
}

.pcs-alt-title {
  color: #7A8C9E;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pcs-alt-score {
  color: #5a6d7e;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: auto;
}

.pcs-alt-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.structure-monitor {
  height: 100%;
  min-height: 0;
  display: grid;
  gap: 5px;
}

.structure-monitor article {
  min-width: 0;
  min-height: 35px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto 3px 3px;
  align-items: center;
  gap: 2px 7px;
  padding: 4px 7px;
  border: 1px solid rgba(72, 188, 255, 0.22);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.28);
}

.structure-monitor i {
  width: 19px;
  height: 19px;
  color: var(--page-accent);
}

.structure-monitor div {
  min-width: 0;
}

.structure-monitor strong,
.structure-monitor span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.structure-monitor strong {
  color: #e9f7ff;
  font-size: 12px;
  line-height: 15px;
}

.structure-monitor span {
  color: #9fc4d6;
  font-size: 11px;
  line-height: 13px;
}

.structure-monitor em {
  grid-column: 1 / 4;
  height: 3px;
  border-radius: 6px;
  background: rgba(86, 170, 214, 0.16);
  position: relative;
  overflow: hidden;
}

.structure-monitor em::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.structure-monitor em.health::before {
  width: var(--health, 72%);
  background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent));
}

.structure-monitor em.impact::before {
  width: var(--impact, 36%);
  background: linear-gradient(90deg, var(--page-alert), rgba(241, 163, 65, 0.2));
}

.trend-chart {
  width: 100%;
  height: 118px;
}

.trend-chart.compact-trend {
  height: 64px;
}

.work-panel[data-kind="trend"] .table-list {
  margin-top: 6px !important;
}

/* Page 03 emergency right panels: refined command widgets. */
.work-screen[data-page="03"] .work-panel[data-kind="planCompare"] .panel-body,
.work-screen[data-page="03"] .work-panel[data-kind="eventTimeline"] .panel-body {
  padding: 10px 12px 12px;
}

.work-screen[data-page="03"] .plan-compare-stack {
  gap: 8px;
}

.work-screen[data-page="03"] .pcs-main {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 7px;
  border-color: rgba(90, 210, 160, 0.28);
  background:
    linear-gradient(135deg, rgba(91, 184, 255, 0.12), transparent 42%),
    radial-gradient(circle at 75% 35%, rgba(90, 210, 160, 0.12), transparent 42%),
    rgba(8, 28, 48, 0.62);
}

.work-screen[data-page="03"] .pcs-left {
  padding: 8px;
  border: 1px solid rgba(91, 184, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(14, 50, 78, 0.62), rgba(4, 18, 32, 0.72));
}

.work-screen[data-page="03"] .pcs-topo {
  max-width: none;
  filter: drop-shadow(0 0 10px rgba(45, 184, 255, 0.14));
}

.work-screen[data-page="03"] .pcs-right {
  gap: 9px;
}

.work-screen[data-page="03"] .pcs-title-block {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.work-screen[data-page="03"] .pcs-main-title {
  font-size: 19px;
  line-height: 22px;
  color: #eef8ff;
  text-shadow: 0 0 12px rgba(91, 184, 255, 0.25);
}

.work-screen[data-page="03"] .pcs-main-desc {
  display: block;
  color: #9fc4d6;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .pcs-score-ring {
  width: 50px;
  height: 50px;
}

.work-screen[data-page="03"] .pcs-score-ring b {
  font-size: 15px;
}

.work-screen[data-page="03"] .pcs-impact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.work-screen[data-page="03"] .pcs-impact-card {
  min-width: 0;
  padding: 9px 6px 8px;
  border-radius: 5px;
  border: 1px solid rgba(91, 184, 255, 0.12);
  background: rgba(5, 20, 36, 0.48);
  text-align: center;
}

.work-screen[data-page="03"] .pcs-impact-card small {
  display: block;
  color: #86a9bd;
  font-size: 9px;
  line-height: 12px;
}

.work-screen[data-page="03"] .pcs-impact-card b {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 0;
}

.work-screen[data-page="03"] .pcs-impact-card em {
  margin-left: 2px;
  font-size: 9px;
  font-style: normal;
  opacity: 0.72;
}

.work-screen[data-page="03"] .pcs-impact-card--danger b {
  color: #ff6262;
  text-shadow: 0 0 14px rgba(255, 98, 98, 0.44);
}

.work-screen[data-page="03"] .pcs-impact-card--good b,
.work-screen[data-page="03"] .pcs-impact-card--lift b {
  color: #5ad2a0;
  text-shadow: 0 0 14px rgba(90, 210, 160, 0.36);
}

.work-screen[data-page="03"] .pcs-action-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.work-screen[data-page="03"] .pcs-action-flow .pcs-action-chip {
  height: 22px;
  justify-content: center;
  padding: 0 4px;
  font-size: 10px;
}

.work-screen[data-page="03"] .pcs-main-btn {
  height: 32px;
  border-radius: 18px;
  font-size: 13px;
  letter-spacing: 3px;
  background:
    linear-gradient(90deg, rgba(90, 210, 160, 0.08), rgba(90, 210, 160, 0.2), rgba(90, 210, 160, 0.08));
}

.work-screen[data-page="03"] .pcs-alt {
  min-height: 36px;
  padding: 6px 10px;
  opacity: 0.78;
  border-color: rgba(91, 184, 255, 0.12);
  background: rgba(8, 28, 48, 0.42);
}

.work-screen[data-page="03"] .event-timeline {
  gap: 8px;
  padding: 0;
}

.work-screen[data-page="03"] .event-timeline::before,
.work-screen[data-page="03"] .event-timeline::after {
  display: none;
}

.work-screen[data-page="03"] .et-stage-board {
  position: relative;
  padding: 8px 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(91, 184, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(21, 58, 86, 0.44), rgba(7, 24, 44, 0.5));
}

.work-screen[data-page="03"] .et-pipe-track {
  height: 9px;
  margin: 0 2px 9px;
}

.work-screen[data-page="03"] .et-milestones {
  flex: none;
  align-items: stretch;
  gap: 5px;
}

.work-screen[data-page="03"] .et-ms {
  align-items: flex-start;
  gap: 2px;
  padding: 6px 6px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
}

.work-screen[data-page="03"] .et-ms--active {
  margin: 0;
  background: rgba(255, 159, 67, 0.13);
  border-color: rgba(255, 159, 67, 0.42);
}

.work-screen[data-page="03"] .et-ms-dot {
  width: 7px;
  height: 7px;
}

.work-screen[data-page="03"] .et-ms-time {
  font-size: 11px;
  line-height: 13px;
}

.work-screen[data-page="03"] .et-ms-title {
  width: 100%;
  text-align: left;
  font-size: 11px;
  line-height: 14px;
  color: #d5e9f5;
}

.work-screen[data-page="03"] .et-ms small {
  color: #6f93a9;
  font-size: 8px;
  line-height: 10px;
  white-space: nowrap;
}

.work-screen[data-page="03"] .et-callout {
  position: static;
  transform: none;
  margin-top: 8px;
}

.work-screen[data-page="03"] .et-callout span {
  display: block;
  width: 100%;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 13px;
}

.work-screen[data-page="03"] .et-next-actions {
  flex: 1;
  gap: 5px;
  padding: 7px;
  border-color: rgba(91, 184, 255, 0.08);
  background: rgba(5, 20, 36, 0.44);
}

.work-screen[data-page="03"] .et-next-head {
  padding: 0 2px 3px;
  font-size: 9px;
  letter-spacing: 1px;
}

.work-screen[data-page="03"] .et-next-item {
  padding: 7px 9px;
  border-color: rgba(91, 184, 255, 0.07);
  background: rgba(14, 38, 64, 0.55);
}

.work-screen[data-page="03"] .et-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: stretch;
}

.work-screen[data-page="03"] .et-resources {
  padding: 0;
  gap: 6px;
  min-width: 0;
}

.work-screen[data-page="03"] .et-res-card {
  min-width: 0;
  padding: 7px 8px;
  background: rgba(8, 28, 48, 0.54);
}

.work-screen[data-page="03"] .et-countdown {
  display: grid;
  justify-items: center;
  padding: 7px 4px;
  border-color: rgba(255, 159, 67, 0.18);
  background: rgba(24, 22, 24, 0.42);
}

.work-screen[data-page="03"] .et-cd-end {
  width: 100%;
  text-align: center;
  font-size: 8px;
}

.work-screen[data-page="03"] .et-cd-num {
  font-size: 34px;
  line-height: 36px;
}

.work-panel[data-kind="trend"] .table-row {
  min-height: 22px;
}

.work-screen[data-page="05"] .work-panel[data-side="right"][data-kind="trend"] .panel-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 7px;
}

.work-screen[data-page="05"] .work-panel[data-side="right"][data-kind="trend"] .trend-chart.compact-trend {
  height: 100%;
  min-height: 86px;
}

.work-screen[data-page="05"] .work-panel[data-side="right"][data-kind="trend"] .table-list {
  margin-top: 0 !important;
}

/* ===== 未来态势研判 ===== */
.forecast-panel {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.fp-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  flex: 0 0 auto;
}

.fp-metrics article {
  min-width: 0;
  padding: 7px 5px 6px;
  border-radius: 5px;
  border: 1px solid rgba(0, 210, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(42, 105, 144, 0.22), rgba(5, 25, 43, 0.16)),
    rgba(0, 210, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  text-align: center;
}

.fp-metrics article.warn {
  border-color: rgba(255, 159, 67, 0.22);
  background: rgba(255, 159, 67, 0.055);
}

.fp-metrics article.danger {
  border-color: rgba(240, 98, 93, 0.22);
  background: rgba(240, 98, 93, 0.055);
}

.fp-metrics span {
  display: block;
  color: #6f91a5;
  font-size: 9px;
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-metrics b {
  display: block;
  margin-top: 3px;
  color: #dff7ff;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(45, 232, 255, 0.18);
}

.fp-metrics article.warn b { color: #ffb65d; }
.fp-metrics article.danger b { color: #ff706c; }

/* 三个时间阶段横向排列 */
.fp-phases {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  padding: 7px 4px 5px;
}

.fp-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 4px;
}

.fp-phase.green .fp-ring-wrap svg circle:last-child { filter: drop-shadow(0 0 4px rgba(90, 210, 160, 0.35)); }
.fp-phase.yellow .fp-ring-wrap svg circle:last-child { filter: drop-shadow(0 0 4px rgba(255, 159, 67, 0.35)); }
.fp-phase.red .fp-ring-wrap svg circle:last-child { filter: drop-shadow(0 0 6px rgba(240, 98, 93, 0.5)); animation: fp-breathe 2.4s ease-in-out infinite; }

@keyframes fp-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(240, 98, 93, 0.3)); }
  50% { filter: drop-shadow(0 0 10px rgba(240, 98, 93, 0.7)); }
}

.fp-ring-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.fp-ring-wrap svg {
  width: 58px;
  height: 58px;
}

.fp-ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #BCCDD8;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  text-align: center;
  line-height: 13px;
  white-space: normal;
  word-break: keep-all;
}

.fp-ring-val.warn { color: #FF9F43; }
.fp-ring-val.good { color: #5ad2a0; }
.fp-ring-val.danger { color: #f0625d; }

.fp-phase-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
}

.fp-phase-label strong {
  color: #7A8C9E;
  font-size: 9px;
  font-weight: 500;
  line-height: 11px;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-phase-label em {
  color: #BCCDD8;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* 虚线箭头连接 */
.fp-arrow {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 1px;
  border-top: 1px dashed rgba(0, 210, 255, 0.2);
}

.fp-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 210, 255, 0.25);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

/* 结论区 */
.fp-factors {
  display: grid;
  gap: 5px;
  flex: 1 1 auto;
  min-height: 0;
}

.fp-factors article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid rgba(0, 210, 255, 0.08);
  background: rgba(4, 28, 48, 0.24);
}

.fp-factors div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fp-factors span {
  min-width: 0;
  color: #8eb0c2;
  font-size: 10px;
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-factors b {
  flex: 0 0 auto;
  color: #d5edf7;
  font-size: 10px;
  line-height: 12px;
}

.fp-factors em {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(122, 140, 158, 0.12);
}

.fp-factors em::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.32), rgba(0, 210, 255, 0.72));
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.2);
}

.fp-factors article.warn em::before {
  background: linear-gradient(90deg, rgba(255, 159, 67, 0.36), rgba(255, 159, 67, 0.82));
  box-shadow: 0 0 8px rgba(255, 159, 67, 0.22);
}

.fp-factors article.danger em::before {
  background: linear-gradient(90deg, rgba(240, 98, 93, 0.38), rgba(240, 98, 93, 0.86));
  box-shadow: 0 0 8px rgba(240, 98, 93, 0.24);
}

.fp-conclusion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 6px;
  border: 1px solid rgba(0, 210, 255, 0.1);
  background: rgba(0, 210, 255, 0.04);
  flex-shrink: 0;
}

.fp-conclusion b {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.fp-conclusion span {
  color: #5A7D8E;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
  max-width: 100%;
  word-break: keep-all;
}

.fp-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 2px;
}

.fp-actions i {
  min-width: 0;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  border: 1px solid rgba(0, 210, 255, 0.14);
  background: rgba(0, 210, 255, 0.055);
  color: #9fdff0;
  font-size: 9px;
  line-height: 1;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-panel[data-kind="detail"] .summary-card article {
  min-height: 42px;
  padding: 6px 8px;
}

.work-panel[data-kind="detail"] .summary-card strong {
  margin-top: 3px;
  font-size: 15px;
  line-height: 17px;
}

.work-panel[data-kind="detail"] .table-list {
  margin-top: 7px !important;
}

.work-panel[data-kind="detail"] .table-row {
  min-height: 20px;
}

.work-screen[data-page="05"] .work-panel[data-side="left"] {
  border-color: rgba(128, 205, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(20, 54, 80, 0.28), rgba(4, 20, 36, 0.2)),
    rgba(3, 18, 34, 0.3);
  box-shadow:
    0 18px 34px rgba(0, 8, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.work-screen[data-page="05"] .work-panel[data-side="left"] .work-panel-title {
  min-height: 39px;
  background: linear-gradient(90deg, rgba(78, 171, 255, 0.11), rgba(6, 28, 48, 0.06) 66%, transparent);
  text-shadow: none;
}

.work-screen[data-page="05"] .road-score {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 5px 9px;
  border-color: rgba(89, 202, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(45, 232, 255, 0.09), rgba(78, 171, 255, 0.035)),
    rgba(5, 28, 50, 0.22);
}

.work-screen[data-page="05"] .road-score strong {
  color: #77eaff;
  font-size: 26px;
  line-height: 28px;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(45, 232, 255, 0.28);
}

.work-screen[data-page="05"] .road-band-list {
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.work-screen[data-page="05"] .road-band-list article {
  min-height: 0;
  padding: 4px 8px;
  border-color: rgba(128, 205, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(125, 205, 255, 0.055), transparent 72%),
    rgba(5, 25, 45, 0.2);
  box-shadow: none;
}

.work-screen[data-page="05"] .road-band-list i {
  height: 2px;
  margin-top: 2px;
  background: rgba(130, 164, 188, 0.14);
}

.work-screen[data-page="05"] .road-band-list i::before {
  background: linear-gradient(90deg, #66c7ff, #46e7ed);
  box-shadow: 0 0 8px rgba(70, 231, 237, 0.22);
}

.work-screen[data-page="05"] .congestion-hero {
  padding: 7px 9px;
  border-color: rgba(128, 205, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(45, 232, 255, 0.08), transparent 68%),
    rgba(5, 25, 45, 0.18);
}

.work-screen[data-page="05"] .congestion-hero-right em {
  color: #22d6ff;
  font-size: 22px;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(34, 214, 255, 0.24);
}

.work-screen[data-page="05"] .congestion-item {
  min-height: 28px;
  padding: 4px 7px;
  border-left-color: rgba(94, 173, 222, 0.42);
  background: transparent;
  border-bottom: 1px solid rgba(120, 180, 220, 0.055);
}

.work-screen[data-page="05"] .congestion-bar-wrap {
  background: rgba(130, 164, 188, 0.12);
}

.work-screen[data-page="05"] .summary-card {
  gap: 7px;
}

.work-screen[data-page="05"] .summary-card article {
  border-color: rgba(128, 205, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(78, 171, 255, 0.08), rgba(4, 20, 36, 0.08)),
    rgba(5, 25, 45, 0.22);
  box-shadow: none;
}

.work-screen[data-page="05"] .summary-card strong {
  color: #67e6f5;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(45, 232, 255, 0.2);
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .info-row {
  min-height: 25px;
  border-color: rgba(128, 205, 255, 0.08);
  background:
    linear-gradient(90deg, rgba(125, 205, 255, 0.06), transparent 72%),
    rgba(5, 25, 45, 0.16);
  box-shadow: none;
}

/* Page 05 typography system: title, subtitle, data, meta and status colors stay consistent across cards. */
.work-screen[data-page="05"] {
  --p05-font: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  --p05-num-font: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  --p05-title: rgba(238, 249, 255, 0.96);
  --p05-text: rgba(211, 231, 242, 0.86);
  --p05-sub: rgba(151, 182, 199, 0.74);
  --p05-muted: rgba(113, 145, 164, 0.68);
  --p05-cyan: #79dff0;
  --p05-blue: #6bb9e8;
  --p05-good: #67d8ad;
  --p05-warn: #dda75b;
  --p05-danger: #df716b;
  font-family: var(--p05-font);
  color: var(--p05-text);
}

.work-screen[data-page="05"] .title-wrap h1 {
  color: var(--p05-title);
  font-family: var(--p05-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

.work-screen[data-page="05"] .title-wrap h1 span {
  color: rgba(213, 232, 242, 0.82);
  font-size: 17px;
  font-weight: 600;
}

.work-screen[data-page="05"] .work-panel-title span {
  color: var(--p05-title);
  font-family: var(--p05-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 20px;
}

.work-screen[data-page="05"] .work-badge,
.work-screen[data-page="05"] .status-pill {
  min-width: auto;
  height: 20px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--p05-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.work-screen[data-page="05"] .status-pill.base {
  border-color: rgba(107, 185, 232, 0.32);
  background: rgba(107, 185, 232, 0.12);
  color: var(--p05-blue);
}

.work-screen[data-page="05"] .status-pill.good {
  border-color: rgba(103, 216, 173, 0.34);
  background: rgba(103, 216, 173, 0.12);
  color: var(--p05-good);
}

.work-screen[data-page="05"] .status-pill.warn,
.work-screen[data-page="05"] .status-pill.alert {
  border-color: rgba(221, 167, 91, 0.36);
  background: rgba(221, 167, 91, 0.13);
  color: var(--p05-warn);
}

.work-screen[data-page="05"] .status-pill.danger {
  border-color: rgba(223, 113, 107, 0.36);
  background: rgba(223, 113, 107, 0.13);
  color: var(--p05-danger);
}

.work-screen[data-page="05"] :is(
  .road-score small,
  .congestion-hero-left small,
  .summary-card small,
  .fp-metrics span,
  .fp-phase-label strong,
  .fp-factors span,
  .te-overlay time
) {
  color: var(--p05-sub);
  font-family: var(--p05-font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 13px;
}

.work-screen[data-page="05"] :is(
  .road-score span,
  .road-band-list span,
  .road-band-list em,
  .congestion-hero-left span,
  .congestion-item > small,
  .info-row span,
  .fp-conclusion span
) {
  color: var(--p05-muted);
  font-family: var(--p05-font);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 13px;
}

.work-screen[data-page="05"] :is(
  .road-band-list strong,
  .congestion-hero-left strong,
  .congestion-item-info span,
  .te-overlay strong,
  .fp-conclusion b
) {
  color: var(--p05-title);
  font-family: var(--p05-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 15px;
  text-shadow: none;
}

.work-screen[data-page="05"] :is(
  .road-score strong,
  .summary-card strong,
  .fp-metrics b,
  .fp-phase-label em,
  .congestion-hero-right em,
  .congestion-item-info strong,
  .fp-factors b
) {
  color: var(--p05-cyan);
  font-family: var(--p05-num-font);
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(121, 223, 240, 0.24);
}

.work-screen[data-page="05"] .road-score strong {
  font-size: 27px;
  line-height: 29px;
}

.work-screen[data-page="05"] .road-score small,
.work-screen[data-page="05"] .road-score span {
  font-size: 9px !important;
  line-height: 12px !important;
}

.work-screen[data-page="05"] .road-band-list strong {
  font-size: 11px !important;
  line-height: 13px !important;
}

.work-screen[data-page="05"] .road-band-list span,
.work-screen[data-page="05"] .road-band-list em {
  font-size: 9px !important;
  line-height: 11px !important;
}

.work-screen[data-page="05"] .road-band-list .status-pill {
  height: 18px;
  padding: 0 7px;
  font-size: 9px;
}

.work-screen[data-page="05"] .summary-card strong,
.work-screen[data-page="05"] .fp-metrics b {
  font-size: 18px;
  line-height: 20px;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .panel-body {
  padding: 12px 14px 13px;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .summary-card {
  gap: 8px;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .summary-card article {
  min-height: 60px;
  padding: 8px 6px 7px;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .summary-card strong {
  margin-top: 5px;
  font-size: 16px;
  line-height: 18px;
  text-overflow: clip;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .summary-meter {
  margin-top: 7px;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .info-list {
  gap: 5px;
  margin-top: 12px !important;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .info-row {
  min-height: 30px;
  grid-template-columns: 24px minmax(0, 1fr) minmax(78px, auto);
  gap: 10px;
  padding: 0 8px;
  border: 1px solid rgba(128, 205, 255, 0.1);
  border-radius: 4px;
}

.work-screen[data-page="05"] .work-panel[data-kind="summaryRows"] .status-pill {
  min-width: 72px;
  height: 22px;
  padding: 0 8px;
  white-space: nowrap;
}

.work-screen[data-page="05"] .congestion-hero-right em {
  font-size: 22px;
  line-height: 24px;
}

.work-screen[data-page="05"] .congestion-item-info strong,
.work-screen[data-page="05"] .fp-phase-label em {
  font-size: 13px;
  line-height: 15px;
}

.work-screen[data-page="05"] .fp-factors b {
  font-size: 10px;
  line-height: 12px;
}

.work-screen[data-page="05"] :is(.fp-metrics article.warn b, .congestion-item:has(.warn) .congestion-item-info strong) {
  color: var(--p05-warn);
  text-shadow: 0 0 10px rgba(221, 167, 91, 0.2);
}

.work-screen[data-page="05"] :is(.fp-metrics article.danger b, .congestion-item:has(.danger) .congestion-item-info strong) {
  color: var(--p05-danger);
  text-shadow: 0 0 10px rgba(223, 113, 107, 0.2);
}

.work-screen[data-page="05"] .fp-ring-val {
  font-family: var(--p05-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.work-screen[data-page="05"] .fp-ring-val.good { color: var(--p05-good); }
.work-screen[data-page="05"] .fp-ring-val.warn { color: var(--p05-warn); }
.work-screen[data-page="05"] .fp-ring-val.danger { color: var(--p05-danger); }

.work-screen[data-page="05"] .fp-actions i {
  color: var(--p05-blue);
  font-family: var(--p05-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

.work-screen[data-page="05"] .te-overlay .te-tag {
  border-radius: 3px;
  font-family: var(--p05-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.work-screen[data-page="05"] .te-tag.warn { color: var(--p05-warn); background: rgba(221, 167, 91, 0.18); }
.work-screen[data-page="05"] .te-tag.good { color: var(--p05-good); background: rgba(103, 216, 173, 0.16); }
.work-screen[data-page="05"] .te-tag.base { color: var(--p05-blue); background: rgba(107, 185, 232, 0.14); }
.work-screen[data-page="05"] .te-tag.danger { color: var(--p05-danger); background: rgba(223, 113, 107, 0.16); }

/* Same hierarchy, same color: tone is shown by pills, rings and bars, not by text color. */
.work-screen[data-page="05"] :is(
  .work-panel-title span,
  .road-band-list strong,
  .congestion-hero-left strong,
  .congestion-item-info span,
  .te-overlay strong,
  .fp-conclusion b
) {
  color: var(--p05-title) !important;
}

.work-screen[data-page="05"] :is(
  .road-score small,
  .congestion-hero-left small,
  .summary-card small,
  .fp-metrics span,
  .fp-phase-label strong,
  .fp-factors span,
  .te-overlay time
) {
  color: var(--p05-sub) !important;
}

.work-screen[data-page="05"] :is(
  .road-score span,
  .road-band-list span,
  .road-band-list em,
  .congestion-hero-left span,
  .congestion-item > small,
  .info-row span,
  .fp-conclusion span
) {
  color: var(--p05-muted) !important;
}

.work-screen[data-page="05"] :is(
  .road-score strong,
  .summary-card strong,
  .fp-metrics b,
  .fp-phase-label em,
  .congestion-hero-right em,
  .congestion-item-info strong,
  .fp-factors b
) {
  color: var(--p05-cyan) !important;
  text-shadow: 0 0 10px rgba(121, 223, 240, 0.24) !important;
}

.work-screen[data-page="05"] :is(
  .fp-metrics article.warn b,
  .fp-metrics article.danger b,
  .congestion-item:has(.warn) .congestion-item-info strong,
  .congestion-item:has(.danger) .congestion-item-info strong
) {
  color: var(--p05-cyan) !important;
  text-shadow: 0 0 10px rgba(121, 223, 240, 0.24) !important;
}

.work-map {
  height: auto;
  align-self: stretch;
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 1;
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.work-map img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: none;
  opacity: 0;
  transform: none;
  transform-origin: center;
}

.work-screen[data-page="06"] .work-map {
  border-color: transparent;
  background: transparent;
}

.work-screen[data-page="06"] .work-map img {
  filter: none;
  transform: none;
}

.work-map-tabs,
.work-map-actions,
.work-map-tools,
.work-map-legend {
  position: absolute;
  z-index: 3;
}

.work-map-tabs,
.work-map-actions {
  top: 14px;
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(91, 184, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(8, 50, 82, 0.5), rgba(3, 28, 52, 0.38)),
    rgba(4, 30, 55, 0.34);
  border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(45, 184, 255, 0.12);
}

.work-map-tabs {
  left: calc(var(--side-w) + 28px);
}

.work-map-actions {
  right: calc(var(--side-w) + 92px);
}

.work-map-tabs button,
.work-map-actions button {
  min-width: 96px;
  height: 32px;
  padding: 0 16px;
  border: 1px solid rgba(91, 184, 255, 0.14);
  border-radius: 3px;
  background: transparent;
  color: #b6d4e4;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.work-map-tabs button:last-child,
.work-map-actions button:last-child {
  border-right-color: rgba(77, 166, 255, 0.22);
}

.work-map-tabs button.active,
.work-map-actions button.active {
  min-width: 142px;
  color: #fff;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 54%, rgba(31, 126, 196, 0.72)), rgba(18, 86, 150, 0.62)),
    rgba(15, 65, 111, 0.48);
  box-shadow: inset 0 -2px 12px color-mix(in srgb, var(--page-accent) 30%, transparent);
}

.work-map-actions button {
  min-width: 66px;
  padding: 0 13px;
}

.work-map-actions button.active {
  min-width: 82px;
}

.work-map-tools {
  right: calc(var(--side-w) + 72px);
  bottom: 82px;
  width: 50px;
  padding: 8px 0;
  display: grid;
  gap: 5px;
  place-items: center;
  border: 1px solid rgba(91, 184, 255, 0.18);
  background: rgba(4, 32, 58, 0.42);
  border-radius: 4px;
}

.work-map-tools button {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #dff4ff;
  cursor: pointer;
}

.work-map-tools button::after,
.icon-only::after {
  content: attr(aria-label);
  position: absolute;
  right: 40px;
  top: 50%;
  width: max-content;
  max-width: 88px;
  padding: 5px 8px;
  border: 1px solid rgba(93, 188, 255, 0.42);
  border-radius: 4px;
  background: rgba(4, 25, 45, 0.88);
  color: #e8f7ff;
  font-size: 11px;
  line-height: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.15s ease;
}

.icon-only {
  position: relative;
}

.icon-only::after {
  right: 34px;
}

.work-map-tools button:hover::after,
.work-map-tools button:focus-visible::after,
.icon-only:hover::after,
.icon-only:focus-visible::after {
  opacity: 1;
}

.work-screen button:focus-visible,
.work-screen a:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--page-accent) 22%, transparent);
}

.work-map-tabs button:hover,
.work-map-actions button:hover,
.work-map-tools button:hover {
  color: #fff;
  background: color-mix(in srgb, var(--page-accent) 16%, transparent);
}

.work-map-legend {
  right: calc(var(--side-w) + 18px);
  top: 160px;
  width: 110px;
  padding: 10px 10px 8px;
  border: 1px solid rgba(91, 184, 255, 0.18);
  background: rgba(4, 32, 58, 0.42);
  border-radius: 4px;
}

.work-map-legend strong {
  display: block;
  margin-bottom: 7px;
  color: #e8f7ff;
  font-size: 13px;
  text-align: center;
}

.work-map-legend div {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #bdd8e6;
  font-size: 12px;
}

.work-map-legend span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 8px currentColor;
}

.work-screen[data-page="06"] .work-map-tabs {
  left: calc(var(--side-w) + 46px);
}

.work-screen[data-page="06"] .work-map-actions {
  right: calc(var(--side-w) + 118px);
}

.work-screen[data-page="06"] .work-map-tabs,
.work-screen[data-page="06"] .work-map-actions,
.work-screen[data-page="06"] .work-map-tools,
.work-screen[data-page="06"] .work-map-legend {
  background: rgba(4, 30, 55, 0.58);
}

.work-screen[data-page="06"] .work-map-tools {
  right: calc(var(--side-w) + 78px);
  bottom: 92px;
}

.work-screen[data-page="06"] .work-map-legend {
  right: calc(var(--side-w) + 24px);
  top: 178px;
}

.work-nav {
  display: inline-flex;
  gap: 8px;
  margin-left: 10px;
}

.work-nav a {
  color: #9fc8df;
  text-decoration: none;
}

.work-nav a.active {
  color: #fff;
}

/* Unified V3: 02-06 inherit the index header and lighter blue glass system. */
.work-screen {
  --page-accent: #4eabff;
  --page-accent-2: #2de8ff;
  --page-alert: #f1a341;
  background: linear-gradient(180deg, rgba(3, 13, 25, 0.18), rgba(2, 9, 18, 0.34));
}

.work-screen[data-page="02"] {
  --page-accent: #f1a341;
  --page-accent-2: #4eabff;
  --page-alert: #f1a341;
}

.work-screen[data-page="03"] {
  --page-accent: #00D2FF;
  --page-accent-2: #5a9fd4;
  --page-alert: #FF9F43;
}

.work-screen[data-page="04"] {
  --page-accent: #00D2FF;
  --page-accent-2: #5a9fd4;
  --page-alert: #FF9F43;
}

.work-screen[data-page="06"] {
  --page-accent: #6ea8c8;
  --page-accent-2: #7fc7dd;
  --page-alert: #c99a5c;
  --tour-green: #7fc7dd;
  --tour-violet: #86a7c4;
  --tour-amber: #c99a5c;
  --tour-blue: #6ea8c8;
}

.work-screen::before {
  inset: 0;
  background-image: var(--screen-map);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: none;
  opacity: 1;
  transform: none;
}

.work-screen::after {
  display: none;
}

.work-screen .topbar {
  height: 52px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(520px, 720px) minmax(360px, 1fr);
  align-items: start;
  column-gap: 14px;
  padding: 0 18px;
  border: 0;
  background: url("./assets/top6.png") center top / 100% 52px no-repeat;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 8;
}

.work-screen .topbar::before,
.work-screen .topbar::after {
  display: none;
}

.work-screen .weather-strip,
.work-screen .sys-strip {
  height: 28px;
  align-items: center;
  gap: 8px;
  padding-top: 0;
  transform: translateY(2px);
  color: rgba(226, 245, 255, 0.9);
  font-size: 13px;
}

.work-screen .weather-item,
.work-screen .sys-strip span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid rgba(117, 206, 255, 0.2);
  border-radius: 4px;
  background: rgba(2, 20, 43, 0.36);
  box-shadow: inset 0 0 10px rgba(76, 184, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.work-screen .title-wrap {
  width: min(720px, 100%);
  height: 38px;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  justify-self: center;
  padding-top: 0;
}

.work-screen .title-wing,
.work-screen .title-wrap::before,
.work-screen .title-wrap::after {
  display: none;
}

.work-screen .title-wrap h1 {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  justify-content: center;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #e5fbff;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(203, 247, 255, 0.82),
    0 0 18px rgba(80, 202, 255, 0.62),
    0 0 32px rgba(28, 120, 255, 0.34);
}

.work-screen .title-wrap h1::before,
.work-screen .title-wrap h1::after {
  display: none;  
}

.work-screen .title-wrap h1 span {
  color: rgba(216, 239, 255, 0.92);
  font-size: 18px;
}

.work-screen .icon-only {
  width: 24px;
  height: 24px;
  margin-top: -4px;
  border-color: rgba(117, 206, 255, 0.18);
  background: rgba(2, 20, 43, 0.3);
  color: rgba(226, 245, 255, 0.88);
}

.work-layout {
  top: 64px;
  bottom: 18px;
  gap: 14px;
}

.work-stack {
  gap: 12px;
}

.work-panel {
  border: 1px solid rgba(133, 205, 255, 0.11);
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--page-accent-2) 11%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(8, 46, 76, 0.28), rgba(4, 22, 38, 0.13)),
    rgba(2, 16, 30, 0.16);
  box-shadow:
    0 20px 42px rgba(0, 7, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 24px rgba(45, 184, 255, 0.035);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.work-panel[data-side="left"],
.work-panel[data-side="right"] {
  box-shadow:
    0 20px 42px rgba(0, 7, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 24px rgba(45, 184, 255, 0.035);
}

.work-panel::before {
  background:
    linear-gradient(90deg, rgba(45, 184, 255, 0.025), transparent 30%, transparent 70%, rgba(45, 184, 255, 0.025)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 38%);
}

.work-panel-title {
  min-height: 42px;
  border-bottom-color: color-mix(in srgb, var(--page-accent) 20%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 12%, transparent), rgba(3, 22, 38, 0.06) 58%, transparent);
  color: #e7f8ff;
  text-shadow: 0 0 12px rgba(45, 184, 255, 0.26);
}

.work-panel-title i {
  color: color-mix(in srgb, var(--page-accent) 70%, #eaf7ff);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--page-accent) 45%, transparent));
}

.work-badge {
  border-color: color-mix(in srgb, var(--page-accent) 42%, transparent);
  background: color-mix(in srgb, var(--page-accent) 12%, rgba(3, 22, 38, 0.26));
  color: color-mix(in srgb, var(--page-accent) 70%, #ffffff);
}

.metric-card,
.summary-card article,
.table-row,
.info-row,
.photo-card,
.route-card,
.work-card,
.service-tiles article,
.service-actions article,
.resource-spoke,
.event-timeline .et-step,
.plan-compare-stack .pcs-main,
.plan-compare-stack .pcs-alt,
.structure-monitor article,
.coverage-bars article,
.stage-track article,
.workfront-list article,
.road-band-list article,
.control-board article,
.incident-actions article,
.condition-cells article {
  border-color: rgba(133, 205, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(49, 112, 164, 0.11), rgba(4, 24, 43, 0.06)),
    rgba(4, 30, 55, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.metric-card b,
.summary-card strong,
.hero-metric strong,
.coverage-head strong,
.stage-hero strong,
.workfront-focus strong,
.road-score strong,
.incident-core strong,
.condition-score strong,
.service-summary strong,
.resource-hero-left strong,
.spotlight strong {
  color: color-mix(in srgb, var(--page-accent) 70%, #e9fbff);
  text-shadow: 0 0 14px color-mix(in srgb, var(--page-accent) 32%, transparent);
}

.status-pill {
  border-color: color-mix(in srgb, var(--page-accent-2) 34%, transparent);
  background: rgba(4, 35, 64, 0.28);
}

.status-pill.warn,
.status-pill.alert {
  border-color: rgba(241, 163, 65, 0.48);
  background: rgba(241, 163, 65, 0.12);
  color: #ffd48a;
}

.status-pill.danger {
  border-color: rgba(255, 159, 67, 0.48);
  background: rgba(255, 159, 67, 0.12);
  color: #ffbb77;
}

.status-pill.good {
  border-color: rgba(45, 232, 255, 0.44);
  background: rgba(45, 232, 255, 0.1);
  color: #9ff8ff;
}

.work-map {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.work-map::before {
  display: none;
}

.work-map img {
  opacity: 0;
  filter: none;
  transform: none;
}

.work-map-tabs,
.work-map-actions,
.work-map-tools,
.work-map-legend {
  border-color: rgba(133, 205, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(8, 46, 76, 0.32), rgba(4, 22, 38, 0.16)),
    rgba(2, 16, 30, 0.22);
  box-shadow: 0 14px 28px rgba(0, 8, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
}

.work-map-tabs button.active,
.work-map-actions button.active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 40%, rgba(31, 126, 196, 0.56)), rgba(18, 86, 150, 0.5)),
    rgba(4, 35, 64, 0.22);
  box-shadow: inset 0 -2px 12px color-mix(in srgb, var(--page-accent) 22%, transparent);
}

.trend-chart canvas,
.hero-chart canvas {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--page-accent) 20%, transparent));
}

/* Unified V4: match the 01 content-frame palette; keep theme color as small accents only. */
.work-screen {
  --frame-cyan: #68d8e8;
  --frame-blue: #68aedd;
  --frame-mint: #55d8b3;
  --frame-amber: #d69a4c;
  --frame-red: #c86f5e;
  --frame-face: rgba(34, 55, 76, 0.58);
  --frame-deep: rgba(9, 25, 43, 0.48);
  --frame-line: rgba(176, 215, 238, 0.26);
  --frame-line-soft: rgba(156, 206, 235, 0.14);
  --frame-text: rgba(231, 241, 246, 0.84);
  --frame-muted: rgba(198, 217, 228, 0.66);
}

.work-screen .weather-item,
.work-screen .sys-strip span {
  border-color: rgba(174, 214, 238, 0.12);
  background: rgba(10, 25, 44, 0.32);
  color: rgba(226, 238, 246, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 14px rgba(104, 174, 221, 0.07);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.work-panel {
  overflow: hidden;
  border-color: var(--frame-line);
  background:
    radial-gradient(ellipse at 32% 8%, rgba(218, 235, 246, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(94, 124, 149, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(45, 70, 92, 0.62), rgba(15, 34, 54, 0.52) 58%, rgba(7, 22, 39, 0.5)),
    rgba(12, 28, 47, 0.42);
  box-shadow:
    0 18px 46px rgba(0, 9, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 34px rgba(108, 174, 220, 0.08);
  backdrop-filter: blur(26px) saturate(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(1.08);
}

.work-panel[data-side="left"],
.work-panel[data-side="right"] {
  box-shadow:
    0 18px 46px rgba(0, 9, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 34px rgba(108, 174, 220, 0.08);
}

.work-panel::before {
  display: block;
  background:
    linear-gradient(90deg, rgba(202, 226, 242, 0.08), transparent 34%, transparent 72%, rgba(104, 174, 221, 0.06)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%);
}

.work-panel::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(204, 232, 246, 0.64), transparent);
  box-shadow: 0 0 13px rgba(142, 199, 230, 0.34);
}

.work-panel-title {
  height: 38px;
  min-height: 38px;
  border-bottom-color: rgba(185, 222, 242, 0.14);
  background:
    linear-gradient(90deg, rgba(91, 134, 164, 0.34), rgba(41, 69, 92, 0.2) 52%, transparent),
    rgba(10, 25, 43, 0.14);
  color: rgba(243, 249, 252, 0.95);
  text-shadow:
    0 0 7px rgba(184, 224, 244, 0.38),
    0 0 16px rgba(104, 174, 221, 0.18);
}

.work-panel-title::before {
  width: 3px;
  height: 19px;
  background: linear-gradient(180deg, #9eeefa, #55b9d4 56%, rgba(85, 216, 179, 0.74));
  box-shadow:
    0 0 8px rgba(104, 216, 232, 0.66),
    0 0 18px rgba(104, 174, 221, 0.32);
}

.work-panel-title i {
  color: #8ed7ee;
  filter: drop-shadow(0 0 8px rgba(104, 216, 232, 0.46));
}

.work-badge {
  border-color: color-mix(in srgb, var(--page-accent) 34%, var(--frame-line-soft));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent),
    rgba(10, 25, 43, 0.2);
  color: color-mix(in srgb, var(--page-accent) 58%, #ffffff);
}

.panel-body {
  height: calc(100% - 38px);
}

.work-screen :is(
  .metric-card,
  .summary-card article,
  .info-row,
  .table-row,
  .photo-card,
  .route-card,
  .work-card,
  .service-tiles article,
  .service-actions article,
  .resource-spoke,
  .event-timeline .et-step,
  .plan-compare-stack .pcs-main,
  .plan-compare-stack .pcs-alt,
  .structure-monitor article,
  .coverage-bars article,
  .stage-track article,
  .workfront-list article,
  .road-band-list article,
  .control-board article,
  .incident-actions article,
  .condition-cells article,
  .metric-cloud-featured article,
  .metric-cloud-chips span,
  .coverage-stats article
) {
  border-color: rgba(184, 218, 238, 0.14);
  background:
    radial-gradient(ellipse at center top, rgba(230, 242, 249, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(69, 94, 116, 0.32), rgba(19, 40, 61, 0.28)),
    rgba(11, 31, 51, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 18px rgba(104, 174, 221, 0.04);
}

.work-screen :is(.info-row, .table-row) {
  border-top-color: rgba(184, 218, 238, 0.11);
  color: var(--frame-text);
}

.work-screen :is(
  .metric-card span,
  .metric-card small,
  .summary-card small,
  .info-row span,
  .table-row span,
  .metric-cloud-core small,
  .metric-cloud-core span,
  .service-summary span,
  .resource-hero-right > span,
  .spotlight span
) {
  color: var(--frame-muted);
}

.work-screen :is(
  .metric-card b,
  .summary-card strong,
  .hero-metric strong,
  .coverage-head strong,
  .stage-hero strong,
  .workfront-focus strong,
  .road-score strong,
  .incident-core strong,
  .condition-score strong,
  .service-summary strong,
  .resource-hero-left strong,
  .spotlight strong,
  .metric-cloud-core strong
) {
  color: var(--frame-cyan);
  text-shadow:
    0 0 9px rgba(104, 216, 232, 0.58),
    0 0 22px rgba(104, 174, 221, 0.28);
}

.work-screen :is(
  .metric-card i,
  .info-row i,
  .flow-node,
  .metric-cloud-featured i,
  .service-tiles i,
  .resource-spoke i,
  .work-panel-title i
) {
  color: #8ed7ee;
  filter: drop-shadow(0 0 8px rgba(104, 216, 232, 0.46));
}

.status-pill {
  border-color: rgba(142, 199, 230, 0.34);
  background: rgba(16, 35, 55, 0.28);
  color: #8dc5ed;
}

.status-pill.base {
  color: #8dc5ed;
  background: rgba(67, 111, 148, 0.22);
}

.status-pill.good {
  border-color: rgba(104, 216, 232, 0.4);
  background: rgba(53, 130, 164, 0.2);
  color: #8ff4ee;
}

.status-pill.warn,
.status-pill.alert {
  border-color: rgba(214, 154, 76, 0.5);
  background: rgba(154, 100, 39, 0.24);
  color: #d9a458;
}

.status-pill.danger {
  border-color: rgba(255, 159, 67, 0.45);
  background: rgba(255, 159, 67, 0.16);
  color: #ffbb77;
}

.work-screen :is(.trend-chart, .hero-chart) {
  border: 1px solid rgba(178, 214, 236, 0.16);
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 58% 70%, rgba(104, 216, 232, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(41, 67, 86, 0.24), rgba(12, 29, 48, 0.14)),
    rgba(11, 31, 51, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -28px 44px rgba(104, 174, 221, 0.045);
}

.trend-chart canvas,
.hero-chart canvas {
  filter: drop-shadow(0 0 8px rgba(104, 216, 232, 0.18));
}

.metric-cloud-core,
.coverage-ring,
.service-gauge {
  border-color: rgba(184, 218, 238, 0.22);
  background:
    linear-gradient(rgba(18, 38, 56, 0.74), rgba(18, 38, 56, 0.74)) padding-box,
    conic-gradient(var(--frame-cyan) 0 var(--gauge, 72%), rgba(114, 151, 178, 0.18) var(--gauge, 72%) 100%) border-box;
  box-shadow:
    0 0 18px rgba(104, 216, 232, 0.14),
    inset 0 0 18px rgba(104, 174, 221, 0.06);
}

.summary-meter,
.route-meter,
.health,
.impact,
.service-actions article::after,
.coverage-bars article::after,
.stage-track article::after,
.workfront-list article::after,
.road-band-list article::after,
.control-board article::after,
.condition-cells article::after {
  background: linear-gradient(90deg, var(--frame-blue), var(--frame-cyan));
  box-shadow: 0 0 8px rgba(104, 216, 232, 0.28);
}

.work-map-tabs,
.work-map-actions,
.work-map-tools,
.work-map-legend {
  border-color: rgba(184, 218, 238, 0.2);
  background:
    radial-gradient(ellipse at center top, rgba(230, 242, 249, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(60, 86, 110, 0.54), rgba(13, 34, 56, 0.42)),
    rgba(10, 27, 47, 0.26);
  box-shadow:
    0 16px 36px rgba(0, 9, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(104, 174, 221, 0.06);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}

.work-map-tabs button,
.work-map-actions button,
.work-map-tools button {
  color: rgba(226, 238, 246, 0.76);
}

.work-map-tabs button.active,
.work-map-actions button.active {
  color: #8ff4ee;
  background:
    radial-gradient(ellipse at center bottom, rgba(85, 216, 179, 0.18), transparent 70%),
    rgba(56, 93, 111, 0.36);
  box-shadow:
    inset 0 -3px 0 rgba(104, 216, 232, 0.64),
    0 0 22px rgba(104, 216, 232, 0.18);
}

.work-map-tabs button:hover,
.work-map-actions button:hover,
.work-map-tools button:hover {
  color: #fff;
  background: rgba(104, 174, 221, 0.12);
}

.work-map-legend span {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 8px currentColor;
}

/* Unified V5: force 02-06 to use the same map base and content-frame skin as 01. */
.work-screen[data-page]::before {
  background-image: url("./assets/map-bg-overview.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  filter: saturate(0.92) contrast(1.05) brightness(0.9) !important;
  opacity: 1 !important;
  transform: scale(1.006) !important;
}

.work-screen[data-page]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(104, 216, 232, 0.12), transparent 20%),
    radial-gradient(circle at 65% 18%, rgba(122, 164, 210, 0.16), transparent 18%),
    radial-gradient(circle at 18% 14%, rgba(88, 149, 202, 0.16), transparent 18%),
    linear-gradient(90deg, rgba(2, 9, 20, 0.62), rgba(30, 48, 66, 0.12) 24%, rgba(30, 48, 66, 0.08) 74%, rgba(2, 9, 20, 0.66)),
    linear-gradient(180deg, rgba(2, 8, 18, 0.62), transparent 21%, transparent 72%, rgba(2, 8, 18, 0.5)),
    radial-gradient(circle, rgba(180, 220, 238, 0.18) 0 1px, transparent 1.6px) 0 0 / 38px 38px !important;
  opacity: 0.62 !important;
}

.work-screen[data-page] .work-panel {
  border-color: var(--frame-line) !important;
  background:
    radial-gradient(ellipse at 32% 8%, rgba(218, 235, 246, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(94, 124, 149, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(45, 70, 92, 0.62), rgba(15, 34, 54, 0.52) 58%, rgba(7, 22, 39, 0.5)),
    rgba(12, 28, 47, 0.42) !important;
  box-shadow:
    0 18px 46px rgba(0, 9, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 34px rgba(108, 174, 220, 0.08) !important;
  backdrop-filter: blur(26px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.08) !important;
}

.work-screen[data-page] .work-panel::before {
  display: block !important;
  background:
    linear-gradient(90deg, rgba(202, 226, 242, 0.08), transparent 34%, transparent 72%, rgba(104, 174, 221, 0.06)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%) !important;
}

.work-screen[data-page] .work-panel::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(204, 232, 246, 0.64), transparent) !important;
  box-shadow: 0 0 13px rgba(142, 199, 230, 0.34) !important;
}

.work-screen[data-page] .work-panel-title {
  border-bottom-color: rgba(185, 222, 242, 0.14) !important;
  background:
    linear-gradient(90deg, rgba(91, 134, 164, 0.34), rgba(41, 69, 92, 0.2) 52%, transparent),
    rgba(10, 25, 43, 0.14) !important;
  color: rgba(243, 249, 252, 0.95) !important;
  text-shadow:
    0 0 7px rgba(184, 224, 244, 0.38),
    0 0 16px rgba(104, 174, 221, 0.18) !important;
}

.work-screen[data-page] .work-panel-title::before {
  background: linear-gradient(180deg, #9eeefa, #55b9d4 56%, rgba(85, 216, 179, 0.74)) !important;
  box-shadow:
    0 0 8px rgba(104, 216, 232, 0.66),
    0 0 18px rgba(104, 174, 221, 0.32) !important;
}

.work-screen[data-page="05"] .work-panel-title::before {
  content: none !important;
  display: none !important;
}

/* Page 06 typography system: keep every card on one visual hierarchy. */
.work-screen[data-page="06"] {
  --text-title: #eef7fb;
  --text-primary: #d9e8f0;
  --text-secondary: #9eb8c8;
  --text-muted: #748b9c;
  --text-number: #8fd0df;
  --text-warn: #d2a66a;
}

.work-screen[data-page="06"] .work-panel-title {
  font-size: 15px !important;
  line-height: 36px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--text-title) !important;
}

.work-screen[data-page="06"] .work-panel-title span {
  gap: 8px !important;
}

.work-screen[data-page="06"] .work-panel-title i {
  color: var(--text-number) !important;
}

.work-screen[data-page="06"] :is(
  .sc-header strong,
  .route-card strong,
  .service-tiles span,
  .service-actions span,
  .mr-info-head strong
) {
  color: var(--text-primary) !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.work-screen[data-page="06"] :is(
  .bb-info span,
  .service-gauge small,
  .service-gauge span
) {
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.work-screen[data-page="06"] :is(
  .route-card span,
  .spotlight p,
  .sc-overlay p,
  .service-actions p,
  .mr-info p,
  .service-tiles em
) {
  color: var(--text-secondary) !important;
  font-size: 10px !important;
  line-height: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.work-screen[data-page="06"] :is(
  .sg-resource-stats span,
  .service-summary small,
  .sc-meta span,
  .route-stops small
) {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  line-height: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.work-screen[data-page="06"] :is(
  .service-gauge strong,
  .service-tiles b,
  .bb-info b,
  .service-summary strong,
  .mr-score,
  .sc-meta em
) {
  color: var(--text-number) !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
}

.work-screen[data-page="06"] .service-gauge strong {
  font-size: 27px !important;
  line-height: 29px !important;
}

.work-screen[data-page="06"] :is(.service-tiles b, .bb-info b, .service-summary strong, .mr-score) {
  font-size: 15px !important;
  line-height: 17px !important;
}

.work-screen[data-page="06"] .sg-resource-stats b {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  line-height: 17px !important;
  font-weight: 750 !important;
}

.work-screen[data-page="06"] :is(.work-badge, .status-pill, .mr-tag, .sc-tag) {
  min-height: 16px;
  color: #c4d6e2 !important;
  font-size: 10px !important;
  line-height: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.work-screen[data-page="06"] :is(.work-badge.warn, .sc-tag) {
  color: var(--text-warn) !important;
}

.work-screen[data-page="06"] .mr-score em {
  color: inherit !important;
}

.work-screen[data-page="06"] :is(
  .status-pill.warn,
  .status-pill.danger,
  .service-actions article:nth-child(4n + 3) .status-pill,
  .service-actions article:nth-child(4n) .status-pill
) {
  color: var(--text-warn) !important;
}

.work-screen[data-page] :is(
  .metric-card,
  .summary-card article,
  .info-row,
  .table-row,
  .photo-card,
  .route-card,
  .work-card,
  .service-tiles article,
  .service-actions article,
  .resource-spoke,
  .event-timeline .et-step,
  .plan-compare-stack .pcs-main,
  .plan-compare-stack .pcs-alt,
  .structure-monitor article,
  .coverage-bars article,
  .stage-track article,
  .workfront-list article,
  .road-band-list article,
  .control-board article,
  .incident-actions article,
  .condition-cells article,
  .metric-cloud-featured article,
  .metric-cloud-chips span,
  .coverage-stats article
) {
  border-color: rgba(184, 218, 238, 0.14) !important;
  background:
    radial-gradient(ellipse at center top, rgba(230, 242, 249, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(69, 94, 116, 0.32), rgba(19, 40, 61, 0.28)),
    rgba(11, 31, 51, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 18px rgba(104, 174, 221, 0.04) !important;
}

.work-screen[data-page] :is(.trend-chart, .hero-chart) {
  border-color: rgba(178, 214, 236, 0.16) !important;
  background:
    radial-gradient(ellipse at 58% 70%, rgba(104, 216, 232, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(41, 67, 86, 0.24), rgba(12, 29, 48, 0.14)),
    rgba(11, 31, 51, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -28px 44px rgba(104, 174, 221, 0.045) !important;
}

.work-screen[data-page] :is(.work-map-tabs, .work-map-actions, .work-map-tools, .work-map-legend) {
  border-color: rgba(184, 218, 238, 0.2) !important;
  background:
    radial-gradient(ellipse at center top, rgba(230, 242, 249, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(60, 86, 110, 0.54), rgba(13, 34, 56, 0.42)),
    rgba(10, 27, 47, 0.26) !important;
  box-shadow:
    0 16px 36px rgba(0, 9, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(104, 174, 221, 0.06) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
}

.work-screen[data-page] :is(.work-map-tabs button.active, .work-map-actions button.active) {
  color: #8ff4ee !important;
  background:
    radial-gradient(ellipse at center bottom, rgba(85, 216, 179, 0.18), transparent 70%),
    rgba(56, 93, 111, 0.36) !important;
  box-shadow:
    inset 0 -3px 0 rgba(104, 216, 232, 0.64),
    0 0 22px rgba(104, 216, 232, 0.18) !important;
}

/* Project facts override: compact engineering overview. */
.work-panel[data-kind="projectFacts"] .panel-body {
  padding: 7px 8px 9px;
}

.work-panel[data-kind="projectFacts"] .project-facts {
  height: 100%;
  min-height: 0;
  display: flex;
  padding: 0;
}

.work-panel[data-kind="projectFacts"] .pf-data-grid {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(72px, 1.12fr) repeat(6, minmax(50px, 1fr));
  grid-auto-rows: minmax(50px, 1fr);
  gap: 6px;
}

.work-panel[data-kind="projectFacts"] .pf-ring-card {
  position: relative;
  grid-column: 1 / -1;
  min-height: 72px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 177, 90, 0.28);
  border-left: 1px solid rgba(255, 177, 90, 0.28);
  border-radius: 6px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 159, 67, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(255, 159, 67, 0.12), rgba(21, 61, 88, 0.22) 46%, rgba(6, 22, 40, 0.18)),
    rgba(10, 28, 47, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 20px rgba(255, 159, 67, 0.07);
}

.work-panel[data-kind="projectFacts"] .pf-ring-card::after {
  content: "";
  position: absolute;
  left: 82px;
  right: 12px;
  bottom: 11px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 159, 67, 0.42), transparent);
}

.work-panel[data-kind="projectFacts"] .pf-ring-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255, 159, 67, 0.2));
}

.work-panel[data-kind="projectFacts"] .pf-ring {
  width: 54px;
  height: 54px;
}

.work-panel[data-kind="projectFacts"] .pf-ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFB35F;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.work-panel[data-kind="projectFacts"] .pf-ring-val em {
  margin-left: 1px;
  color: rgba(255, 220, 168, 0.86);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.work-panel[data-kind="projectFacts"] .pf-ring-text {
  min-width: 0;
}

.work-panel[data-kind="projectFacts"] .pf-ring-text strong {
  display: block;
  color: #F4FAFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

.work-panel[data-kind="projectFacts"] .pf-ring-text small {
  display: block;
  margin-top: 5px;
  color: rgba(217, 232, 242, 0.76);
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-panel[data-kind="projectFacts"] .pf-item {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  padding: 7px 8px;
  overflow: hidden;
  border: 1px solid rgba(125, 206, 244, 0.13);
  border-left: 1px solid rgba(125, 206, 244, 0.13);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(70, 132, 168, 0.11), rgba(4, 22, 38, 0.08)),
    rgba(7, 29, 48, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 3px 0 0 rgba(0, 210, 255, 0.24);
}

.work-panel[data-kind="projectFacts"] .pf-item::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 9px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.2), transparent);
  opacity: 0.6;
}

.work-panel[data-kind="projectFacts"] .pf-item i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-top: 0;
  color: #36E2FF;
  opacity: 0.95;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.28));
}

.work-panel[data-kind="projectFacts"] .pf-item i svg {
  width: 20px;
  height: 20px;
}

.work-panel[data-kind="projectFacts"] .pf-content {
  min-width: 0;
  display: grid;
  grid-template-areas:
    "value"
    "label"
    "desc";
  align-content: center;
  gap: 0;
}

.work-panel[data-kind="projectFacts"] .pf-value {
  grid-area: value;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(118, 220, 255, 0.18);
}

.work-panel[data-kind="projectFacts"] .pf-label {
  grid-area: label;
  margin-top: 2px;
  color: rgba(225, 239, 247, 0.84);
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-panel[data-kind="projectFacts"] .pf-desc {
  grid-area: desc;
  margin-top: 1px;
  color: rgba(176, 199, 213, 0.72);
  font-size: 11px;
  line-height: 14px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workfront timeline override: balanced progress/action/metric layout. */
.work-panel[data-kind="workfrontTimeline"] .panel-body {
  padding: 8px 9px 10px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-timeline {
  gap: 7px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-timeline-head strong {
  padding: 7px 10px;
  border-left: 4px solid #FFB35F;
  border-radius: 0 5px 5px 0;
  background:
    linear-gradient(90deg, rgba(255, 159, 67, 0.16), rgba(255, 159, 67, 0.05) 62%, rgba(255, 255, 255, 0.035)),
    rgba(32, 42, 51, 0.52);
  color: #F4FAFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.work-panel[data-kind="workfrontTimeline"] .wf-timeline-track {
  gap: 7px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-node {
  min-height: 78px;
  grid-template-columns: 102px minmax(0, 1fr) 76px;
  gap: 8px 10px;
  align-items: stretch;
  padding: 8px 10px 9px;
  border-color: rgba(136, 204, 232, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(54, 91, 119, 0.18), rgba(8, 28, 48, 0.18)),
    rgba(7, 29, 48, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 18px rgba(104, 174, 221, 0.04);
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-left,
.work-panel[data-kind="workfrontTimeline"] .wf-tl-mid,
.work-panel[data-kind="workfrontTimeline"] .wf-tl-right {
  min-width: 0;
  justify-content: center;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-left {
  gap: 4px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-mid,
.work-panel[data-kind="workfrontTimeline"] .wf-tl-right {
  border-left: 1px solid rgba(136, 204, 232, 0.12);
  padding-left: 9px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right {
  align-items: center;
  justify-self: stretch;
  text-align: center;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-badge {
  gap: 5px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-badge i {
  width: 18px;
  height: 18px;
  color: #36E2FF;
  opacity: 0.88;
  filter: drop-shadow(0 0 7px rgba(0, 210, 255, 0.24));
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-badge span {
  color: rgba(236, 246, 251, 0.92);
  font-size: 13px;
  line-height: 16px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-bar {
  height: 5px;
  background: rgba(17, 47, 70, 0.7);
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-meta {
  gap: 6px;
  white-space: nowrap;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-meta b {
  color: #F4FAFF;
  font-size: 18px;
  line-height: 20px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-meta span {
  color: rgba(190, 211, 222, 0.76);
  font-size: 11px;
  line-height: 13px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-mid {
  gap: 6px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-action {
  gap: 5px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-action i {
  width: 15px;
  height: 15px;
  color: rgba(54, 226, 255, 0.74);
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-action span {
  color: rgba(222, 238, 246, 0.88);
  font-size: 12px;
  line-height: 15px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-remain {
  gap: 5px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-remain em {
  color: rgba(176, 199, 213, 0.72);
  font-size: 11px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-remain b {
  font-size: 17px;
  line-height: 19px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-ring {
  width: 42px;
  height: 42px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-ring-text b {
  color: #F4FAFF;
  font-size: 13px;
  line-height: 14px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-ring-text span {
  color: rgba(199, 220, 230, 0.74);
  font-size: 8px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-extra-label {
  max-width: 100%;
  color: rgba(190, 211, 222, 0.74);
  font-size: 10px;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-tag {
  min-width: 66px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-stat {
  justify-content: center;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-stat b {
  color: #F4FAFF;
  font-size: 22px;
  line-height: 24px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-stat span {
  color: rgba(199, 220, 230, 0.76);
  font-size: 11px;
}

/* Workfront timeline V2: reduce hard columns and keep text readable. */
.work-panel[data-kind="workfrontTimeline"] .wf-tl-node {
  min-height: 84px;
  grid-template-columns: 136px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  padding: 10px 12px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-left {
  grid-column: 1;
  grid-row: 1 / 3;
  gap: 5px;
  align-self: stretch;
  justify-content: center;
  padding-right: 12px;
  border-right: 1px solid rgba(136, 204, 232, 0.12);
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-mid,
.work-panel[data-kind="workfrontTimeline"] .wf-tl-right {
  border-left: 0;
  padding-left: 0;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-mid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right {
  grid-column: 2;
  grid-row: 2;
  min-height: 34px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  justify-self: stretch;
  text-align: left;
  padding: 6px 9px;
  border: 1px solid rgba(136, 204, 232, 0.11);
  border-radius: 5px;
  background: rgba(5, 27, 47, 0.28);
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-action {
  min-width: 0;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(3, 31, 55, 0.34);
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-action span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-remain {
  flex: 0 0 auto;
  min-width: 88px;
  justify-content: flex-end;
  gap: 6px;
  padding: 3px 0;
  white-space: nowrap;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-remain em {
  white-space: nowrap;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-remain b {
  white-space: nowrap;
  font-size: 18px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-badge span {
  font-size: 15px;
  line-height: 18px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-meta b {
  font-size: 22px;
  line-height: 23px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-meta span {
  font-size: 12px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-ring {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-ring-text b {
  font-size: 12px;
  line-height: 12px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-ring-text span {
  font-size: 7px;
  line-height: 8px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-extra-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 15px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-tag {
  min-width: 88px;
  padding: 5px 10px;
  font-size: 13px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-stat {
  flex: 0 0 auto;
  min-width: 92px;
  justify-content: flex-start;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-stat b {
  font-size: 24px;
  line-height: 25px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 5px 10px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-stat {
  min-width: 0;
  width: 100%;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-stat b {
  font-size: 23px;
  line-height: 24px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-extra-label {
  width: 100%;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Workfront timeline V3: fit all three cards inside the panel cleanly. */
.work-panel[data-kind="workfrontTimeline"] .panel-body {
  padding: 6px 8px 8px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-timeline {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-timeline-head strong {
  padding: 6px 10px;
  line-height: 18px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-timeline-track {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-node {
  min-height: 0;
  height: 100%;
  grid-template-columns: 132px minmax(0, 1fr);
  row-gap: 5px;
  column-gap: 10px;
  padding: 7px 10px;
  overflow: hidden;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-left {
  gap: 4px;
  padding-right: 10px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right {
  min-height: 28px;
  padding: 4px 8px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-badge span {
  font-size: 14px;
  line-height: 17px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-meta b {
  font-size: 20px;
  line-height: 21px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-meta span {
  font-size: 11px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-remain b {
  font-size: 17px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-ring {
  width: 34px;
  height: 34px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-tag {
  min-width: 82px;
  padding: 4px 9px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat {
  min-height: 36px;
  padding: 3px 8px 4px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-stat b {
  font-size: 21px;
  line-height: 22px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-extra-label {
  font-size: 11px;
  line-height: 13px;
}

/* MetricGridV2 scale-up: make resource overview read like a dashboard card. */
.work-panel[data-kind="metricGridV2"] .panel-body {
  padding: 8px 10px 10px;
}

.work-panel[data-kind="metricGridV2"] .metric-grid-v2 {
  gap: 7px;
  overflow: hidden;
}

.work-panel[data-kind="metricGridV2"] .mgv2-section {
  gap: 4px;
  padding: 8px 10px;
  border-color: rgba(104, 216, 232, 0.16);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(51, 87, 116, 0.22), rgba(7, 29, 48, 0.14)),
    rgba(7, 29, 48, 0.34);
}

.work-panel[data-kind="metricGridV2"] .mgv2-label {
  margin-bottom: 3px;
  padding-bottom: 5px;
  color: #20E2FF;
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  border-bottom-color: rgba(104, 216, 232, 0.14);
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.24);
}

.work-panel[data-kind="metricGridV2"] .mgv2-row {
  min-height: 28px;
  gap: 4px 10px;
  padding: 2px 0;
}

.work-panel[data-kind="metricGridV2"] .mgv2-row--combined {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 4px 8px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-row--combined i {
  width: 18px;
  height: 18px;
  color: rgba(54, 226, 255, 0.7);
  filter: drop-shadow(0 0 7px rgba(0, 210, 255, 0.24));
}

.work-panel[data-kind="metricGridV2"] .mgv2-row span,
.work-panel[data-kind="metricGridV2"] .mgv2-inline {
  color: rgba(222, 238, 246, 0.84);
  font-size: 15px;
  line-height: 20px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-val {
  color: #F4FAFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  text-shadow: 0 0 10px rgba(118, 220, 255, 0.14);
}

.work-panel[data-kind="metricGridV2"] .mgv2-inline .mgv2-val {
  font-size: 17px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-val.good {
  color: #5BE1A9;
}

.work-panel[data-kind="metricGridV2"] .mgv2-val.warn {
  color: #FF9F43;
}

.work-panel[data-kind="metricGridV2"] .mgv2-split {
  gap: 2px 6px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-sep {
  font-size: 13px;
}

/* MetricGridV2 balanced size: larger than original, but no longer squeezes the stack. */
.work-panel[data-kind="metricGridV2"] .panel-body {
  padding: 7px 9px 8px;
}

.work-panel[data-kind="metricGridV2"] .metric-grid-v2 {
  gap: 5px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-section {
  gap: 2px;
  padding: 6px 8px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-label {
  margin-bottom: 1px;
  padding-bottom: 4px;
  font-size: 15px;
  line-height: 20px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-row {
  min-height: 23px;
  gap: 3px 8px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-row span,
.work-panel[data-kind="metricGridV2"] .mgv2-inline {
  font-size: 13px;
  line-height: 17px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-val {
  font-size: 16px;
  line-height: 19px;
}

.work-panel[data-kind="metricGridV2"] .mgv2-inline .mgv2-val {
  font-size: 15px;
}

/* Workfront stat metric: place label to the right of the number. */
.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 30px;
  padding: 4px 8px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-stat {
  flex: 0 0 auto;
  width: auto;
  min-width: 86px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-stat b {
  font-size: 21px;
  line-height: 22px;
}

.work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-extra-label {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Page 03 final fit pass: keep the emergency widgets readable in the narrow rail. */
.work-screen[data-page="03"] .pcs-main {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
}

.work-screen[data-page="03"] .pcs-left {
  padding: 7px;
}

.work-screen[data-page="03"] .pcs-ai-badge {
  max-width: 100%;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-screen[data-page="03"] .pcs-main-title {
  font-size: 16px;
  line-height: 20px;
}

.work-screen[data-page="03"] .pcs-main-desc {
  max-width: 112px;
  font-size: 10px;
  line-height: 13px;
}

.work-screen[data-page="03"] .pcs-score-ring {
  width: 46px;
  height: 46px;
}

.work-screen[data-page="03"] .pcs-impact-grid {
  grid-template-columns: 1fr;
  gap: 5px;
}

.work-screen[data-page="03"] .pcs-impact-card {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  text-align: left;
}

.work-screen[data-page="03"] .pcs-impact-card small {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 9px;
  line-height: 12px;
  white-space: nowrap;
}

.work-screen[data-page="03"] .pcs-impact-card b {
  margin-top: 0;
  flex: 0 0 auto;
  font-size: 25px;
  line-height: 26px;
}

.work-screen[data-page="03"] .pcs-action-flow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.work-screen[data-page="03"] .pcs-action-flow .pcs-action-chip {
  min-width: 0;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
}

.work-screen[data-page="03"] .pcs-action-flow .pcs-action-chip b {
  flex: 0 0 auto;
}

.work-screen[data-page="03"] .pcs-main-btn {
  height: 30px;
  font-size: 12px;
}

.work-screen[data-page="03"] .pcs-alt-actions {
  display: none;
}

.work-screen[data-page="03"] .et-stage-board {
  padding: 7px 8px 8px;
}

.work-screen[data-page="03"] .et-milestones {
  gap: 4px;
}

.work-screen[data-page="03"] .et-ms {
  padding: 5px 5px 4px;
}

.work-screen[data-page="03"] .et-ms-title {
  font-size: 10px;
  line-height: 12px;
}

.work-screen[data-page="03"] .et-callout {
  margin-top: 6px;
}

.work-screen[data-page="03"] .et-callout span {
  padding: 4px 7px;
  font-size: 9px;
  line-height: 12px;
}

.work-screen[data-page="03"] .et-next-actions {
  gap: 4px;
  padding: 6px;
}

.work-screen[data-page="03"] .et-next-item {
  padding: 6px 8px;
}

.work-screen[data-page="03"] .et-bottom-row {
  grid-template-columns: minmax(0, 1fr) 106px;
}

.work-screen[data-page="03"] .et-cd-num {
  font-size: 31px;
  line-height: 33px;
}

.work-screen[data-page="03"] .pcs-ai-badge {
  height: 20px;
  border-radius: 3px;
  color: #9ee7d5;
  border-color: rgba(90, 210, 160, 0.22);
  background: rgba(90, 210, 160, 0.08);
  font-size: 10px;
  letter-spacing: 0;
}

.work-screen[data-page="03"] .pcs-main {
  background:
    linear-gradient(180deg, rgba(31, 70, 96, 0.58), rgba(6, 24, 42, 0.68)),
    radial-gradient(circle at 74% 30%, rgba(91, 184, 255, 0.1), transparent 42%);
}

.work-screen[data-page="03"] .pcs-topo-wrap {
  align-items: flex-end;
}

.work-screen[data-page="03"] .pcs-plan-note {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(91, 184, 255, 0.12);
  border-left: 3px solid rgba(90, 210, 160, 0.62);
  border-radius: 4px;
  background: rgba(5, 20, 36, 0.44);
  color: #a9c8d7;
  font-size: 10px;
  line-height: 14px;
}

.work-screen[data-page="03"] .pcs-main-btn,
.work-screen[data-page="03"] .pcs-btn-bracket {
  display: none;
}

.work-screen[data-page="03"] .pcs-action-chip {
  border-color: rgba(90, 210, 160, 0.2);
  background: rgba(6, 30, 48, 0.58);
}

.work-screen[data-page="03"] .pcs-alt {
  min-height: 30px;
  padding: 5px 9px;
}

/* Page 03 right rail rebuild: static traffic plan + compact disposal timeline. */
.work-screen[data-page="03"] .work-panel[data-kind="planCompare"] .panel-body,
.work-screen[data-page="03"] .work-panel[data-kind="eventTimeline"] .panel-body {
  padding: 10px 12px 12px;
  overflow: hidden;
}

.work-screen[data-page="03"] .plan-slate {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(86px, 1fr) auto auto auto;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(90, 210, 160, 0.22);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(92, 166, 204, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(19, 54, 78, 0.64), rgba(5, 21, 38, 0.68));
  box-shadow: inset 0 0 24px rgba(91, 184, 255, 0.06);
}

.work-screen[data-page="03"] .ps-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
}

.work-screen[data-page="03"] .ps-head span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(90, 210, 160, 0.26);
  border-radius: 4px;
  color: #9ee7d5;
  background: rgba(90, 210, 160, 0.08);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.work-screen[data-page="03"] .ps-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eef8ff;
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(91, 184, 255, 0.22);
}

.work-screen[data-page="03"] .ps-head b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(90, 210, 160, 0.85);
  border-radius: 50%;
  color: #5be0a8;
  font-size: 17px;
  line-height: 18px;
  box-shadow: 0 0 14px rgba(90, 210, 160, 0.18);
}

.work-screen[data-page="03"] .ps-desc {
  margin: -3px 58px 0 73px;
  color: #a8c5d4;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .ps-route {
  min-height: 0;
  display: grid;
  place-items: stretch;
  padding: 4px;
  border: 1px solid rgba(91, 184, 255, 0.11);
  border-radius: 6px;
  background: rgba(4, 17, 31, 0.44);
}

.work-screen[data-page="03"] .ps-route-svg {
  width: 100%;
  height: 100%;
  min-height: 82px;
  display: block;
}

.work-screen[data-page="03"] .ps-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.work-screen[data-page="03"] .ps-impact-grid article {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid rgba(91, 184, 255, 0.1);
  border-radius: 5px;
  background: rgba(6, 25, 44, 0.64);
}

.work-screen[data-page="03"] .ps-impact-grid span {
  color: #90afc1;
  font-size: 9px;
  line-height: 11px;
  white-space: nowrap;
}

.work-screen[data-page="03"] .ps-impact-grid b {
  font-size: 25px;
  line-height: 26px;
  letter-spacing: 0;
}

.work-screen[data-page="03"] .ps-impact-grid em {
  margin-left: 2px;
  font-size: 8px;
  font-style: normal;
}

.work-screen[data-page="03"] .ps-impact-grid .danger b {
  color: #ff6262;
  text-shadow: 0 0 14px rgba(255, 98, 98, 0.4);
}

.work-screen[data-page="03"] .ps-impact-grid .good b,
.work-screen[data-page="03"] .ps-impact-grid .lift b {
  color: #5ad2a0;
  text-shadow: 0 0 14px rgba(90, 210, 160, 0.3);
}

.work-screen[data-page="03"] .ps-measures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.work-screen[data-page="03"] .ps-measures span {
  min-width: 0;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(90, 210, 160, 0.2);
  border-radius: 4px;
  background: rgba(6, 30, 48, 0.56);
  color: #b7d1dc;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.work-screen[data-page="03"] .ps-measures b {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border-radius: 3px;
  color: #5ad2a0;
  background: rgba(90, 210, 160, 0.12);
  font-size: 10px;
}

.work-screen[data-page="03"] .ps-note {
  padding: 6px 8px;
  border-left: 3px solid rgba(90, 210, 160, 0.68);
  border-radius: 4px;
  background: rgba(5, 20, 36, 0.45);
  color: #a9c8d7;
  font-size: 11px;
  line-height: 15px;
}

.work-screen[data-page="03"] .ps-alt {
  min-height: 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(91, 184, 255, 0.1);
  border-radius: 5px;
  background: rgba(7, 28, 48, 0.38);
  opacity: 0.74;
}

.work-screen[data-page="03"] .ps-alt span {
  height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 9px;
  color: #7896a8;
  border: 1px solid rgba(120, 150, 168, 0.18);
  font-size: 9px;
}

.work-screen[data-page="03"] .ps-alt b {
  min-width: 0;
  color: #8eaabc;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .ps-alt em {
  color: #7d94a6;
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
}

.work-screen[data-page="03"] .timeline-brief {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.work-screen[data-page="03"] .tb-progress,
.work-screen[data-page="03"] .tb-actions,
.work-screen[data-page="03"] .tb-side {
  border: 1px solid rgba(91, 184, 255, 0.11);
  border-radius: 6px;
  background: rgba(6, 25, 44, 0.54);
}

.work-screen[data-page="03"] .tb-progress {
  padding: 8px 10px 9px;
}

.work-screen[data-page="03"] .tb-progress-track {
  position: relative;
  height: 9px;
  margin: 0 2px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.work-screen[data-page="03"] .tb-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ad2a0, #6ce0b2);
}

.work-screen[data-page="03"] .tb-progress-track i {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #FF9F43;
  box-shadow: 0 0 12px rgba(255, 159, 67, 0.5);
}

.work-screen[data-page="03"] .tb-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.work-screen[data-page="03"] .tb-step {
  min-width: 0;
  padding: 5px 5px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
}

.work-screen[data-page="03"] .tb-step.active {
  border-color: rgba(255, 159, 67, 0.44);
  background: rgba(255, 159, 67, 0.12);
}

.work-screen[data-page="03"] .tb-step b,
.work-screen[data-page="03"] .tb-step strong,
.work-screen[data-page="03"] .tb-step small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .tb-step b {
  color: #88a9bd;
  font-size: 10px;
  line-height: 12px;
}

.work-screen[data-page="03"] .tb-step strong {
  color: #d5e9f5;
  font-size: 12px;
  line-height: 15px;
}

.work-screen[data-page="03"] .tb-step small {
  color: #6f93a9;
  font-size: 8px;
  line-height: 10px;
}

.work-screen[data-page="03"] .tb-step.active b,
.work-screen[data-page="03"] .tb-step.active strong {
  color: #ffb060;
}

.work-screen[data-page="03"] .tb-status {
  margin-top: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 159, 67, 0.28);
  border-radius: 4px;
  background: rgba(255, 159, 67, 0.08);
  color: #ffb060;
  font-size: 10px;
  line-height: 13px;
}

.work-screen[data-page="03"] .tb-main {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 86px;
  gap: 8px;
}

.work-screen[data-page="03"] .tb-actions {
  min-height: 0;
  display: grid;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
}

.work-screen[data-page="03"] .tb-section-label {
  color: #6f8ea2;
  font-size: 9px;
  line-height: 12px;
}

.work-screen[data-page="03"] .tb-action {
  min-height: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(91, 184, 255, 0.07);
  border-radius: 5px;
  background: rgba(14, 38, 64, 0.55);
}

.work-screen[data-page="03"] .tb-action b {
  color: #ffb060;
  font-size: 12px;
}

.work-screen[data-page="03"] .tb-action span {
  min-width: 0;
  color: #d4e5ee;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .tb-action em {
  justify-self: end;
  padding: 2px 7px;
  border: 1px solid rgba(255, 159, 67, 0.28);
  border-radius: 999px;
  color: #ffb060;
  background: rgba(255, 159, 67, 0.08);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.work-screen[data-page="03"] .tb-side {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px 8px;
  padding: 7px;
}

.work-screen[data-page="03"] .tb-side .tb-section-label {
  grid-column: 1 / -1;
}

.work-screen[data-page="03"] .tb-resources {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.work-screen[data-page="03"] .tb-resources article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 1px 5px;
  padding: 5px 6px;
  border: 1px solid rgba(91, 184, 255, 0.09);
  border-radius: 5px;
  background: rgba(4, 22, 39, 0.5);
}

.work-screen[data-page="03"] .tb-resources i {
  grid-row: 1 / 3;
  align-self: center;
  color: #5ad2a0;
  font-style: normal;
  font-size: 12px;
}

.work-screen[data-page="03"] .tb-resources span {
  min-width: 0;
  color: #91adbd;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .tb-resources b {
  min-width: 0;
  color: #5ad2a0;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .tb-resources .warn i,
.work-screen[data-page="03"] .tb-resources .warn b {
  color: #ffb060;
}

.work-screen[data-page="03"] .tb-countdown {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 159, 67, 0.24);
  border-radius: 6px;
  background: rgba(24, 22, 24, 0.42);
}

.work-screen[data-page="03"] .tb-countdown small {
  color: #7e96a7;
  font-size: 8px;
  line-height: 10px;
}

.work-screen[data-page="03"] .tb-countdown div {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.work-screen[data-page="03"] .tb-countdown strong {
  color: #ff9f43;
  font-size: 30px;
  line-height: 32px;
  text-shadow: 0 0 14px rgba(255, 159, 67, 0.42);
}

.work-screen[data-page="03"] .tb-countdown span {
  color: #ffc17a;
  font-size: 10px;
  font-weight: 800;
}

/* ===== Page-04 device monitor video wall ===== */
.work-screen[data-page="04"] .device-monitor {
  gap: 5px;
}

.device-video-grid {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.device-video-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 210, 255, 0.22);
  border-radius: 5px;
  background: #071c2e;
  box-shadow:
    inset 0 0 18px rgba(0, 210, 255, 0.08),
    0 8px 18px rgba(0, 6, 18, 0.18);
}

.device-video-card video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.86) contrast(1.08) brightness(0.78);
}

.device-video-card::before,
.device-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.device-video-card::before {
  background:
    linear-gradient(180deg, rgba(0, 210, 255, 0.1), transparent 24%, transparent 70%, rgba(4, 14, 26, 0.74)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.device-video-card::after {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.08);
}

.device-video-overlay {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  z-index: 2;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(0, 210, 255, 0.22);
  border-radius: 4px;
  background: rgba(4, 16, 28, 0.72);
  color: #E0E6ED;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.device-video-live {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #5ad2a0;
  box-shadow: 0 0 8px rgba(90, 210, 160, 0.9);
}

.device-video-overlay strong,
.device-video-overlay em,
.device-video-overlay small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  line-height: 1;
}

.device-video-overlay strong {
  font-size: 11px;
  font-weight: 800;
  color: #E9F4FF;
}

.device-video-overlay em {
  font-size: 10px;
  color: #5ad2a0;
}

.device-video-overlay small {
  font-size: 9px;
  letter-spacing: 0;
  color: rgba(176, 192, 204, 0.85);
}

/* Page 02 typography and color normalization.
   Keep this at the end so component-specific experiments above cannot drift apart. */
.work-screen[data-page="02"] {
  --p02-title: rgba(244, 250, 255, 0.96);
  --p02-heading: #36E2FF;
  --p02-value: #F4FAFF;
  --p02-text: rgba(222, 238, 246, 0.86);
  --p02-muted: rgba(176, 199, 213, 0.74);
  --p02-faint: rgba(137, 157, 176, 0.7);
  --p02-line: rgba(184, 218, 238, 0.14);
  --p02-card: rgba(7, 29, 48, 0.36);
  --p02-card-hi: rgba(54, 91, 119, 0.18);
  --p02-warn: #FFB35F;
  --p02-good: #5BE1A9;
  --p02-danger: #F06A63;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  color: var(--p02-text);
}

.work-screen[data-page="02"],
.work-screen[data-page="02"] * {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif !important;
}

.work-screen[data-page="02"] .work-panel-title {
  height: 38px;
  color: var(--p02-title) !important;
  font-size: 16px !important;
  font-weight: 800;
  line-height: 38px;
  letter-spacing: 0;
}

.work-screen[data-page="02"] .work-panel-title::before {
  content: none !important;
  display: none !important;
}

.work-screen[data-page="02"] .work-panel-title span {
  gap: 8px;
}

.work-screen[data-page="02"] .work-panel-title i,
.work-screen[data-page="02"] :is(.metric-card i, .work-card i, .pf-item i, .mgv2-row i, .wf-tl-badge i, .wf-tl-action i) {
  color: var(--p02-heading) !important;
  filter: drop-shadow(0 0 7px rgba(54, 226, 255, 0.28));
}

.work-screen[data-page="02"] .work-badge {
  height: 24px;
  padding: 0 10px;
  border-color: rgba(54, 226, 255, 0.34) !important;
  color: var(--p02-heading) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
}

.work-screen[data-page="02"] :is(
  .stage-hero,
  .stage-step,
  .stage-summary span,
  .metric-card,
  .work-card,
  .summary-card article,
  .pf-ring-card,
  .pf-item,
  .mgv2-section,
  .wf-tl-node,
  .wf-tl-right,
  .sb-bar
) {
  border-color: var(--p02-line) !important;
  background:
    linear-gradient(180deg, var(--p02-card-hi), rgba(7, 29, 48, 0.14)),
    var(--p02-card) !important;
}

.work-screen[data-page="02"] :is(
  .mgv2-label,
  .wf-timeline-head strong,
  .pf-ring-text strong,
  .stage-step b,
  .sb-bar-name
) {
  color: var(--p02-heading) !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(54, 226, 255, 0.18);
}

.work-screen[data-page="02"] :is(
  .stage-hero strong,
  .pf-ring-val,
  .stage-summary b,
  .metric-card b,
  .summary-card strong,
  .pf-value,
  .mgv2-val,
  .wf-tl-meta b,
  .wf-tl-stat b,
  .sb-bar-stock b
) {
  color: var(--p02-value) !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(118, 220, 255, 0.16);
}

.work-screen[data-page="02"] .stage-hero strong {
  font-size: 34px !important;
  line-height: 36px;
}

.work-screen[data-page="02"] .pf-ring-val {
  font-size: 18px !important;
}

.work-screen[data-page="02"] .pf-ring-val em {
  color: var(--p02-value) !important;
}

.work-screen[data-page="02"] .wf-tl-stat b {
  font-size: 22px !important;
}

.work-screen[data-page="02"] :is(
  .stage-hero small,
  .stage-hero span,
  .stage-step small,
  .stage-step em,
  .metric-card span,
  .summary-card small,
  .pf-label,
  .mgv2-row span,
  .mgv2-inline,
  .wf-tl-badge span,
  .wf-tl-action span,
  .sb-bar-stock
) {
  color: var(--p02-text) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
}

.work-screen[data-page="02"] :is(
  .pf-desc,
  .wf-tl-meta span,
  .wf-tl-remain em,
  .wf-tl-extra-label,
  .wf-tl-stat span,
  .sb-bar-daily,
  .stage-summary span
) {
  color: var(--p02-muted) !important;
  font-size: 11px !important;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
}

.work-screen[data-page="02"] :is(.mgv2-val.good, .mgv2-val.warn) {
  color: var(--p02-value) !important;
}

.work-screen[data-page="02"] :is(.wf-tl-remain--base, .sb-bar-days.good, .sb-bar-days.good em) {
  color: var(--p02-good) !important;
}

.work-screen[data-page="02"] :is(.wf-tl-remain--warn, .sb-bar-days.warn, .sb-bar-days.warn em, .work-badge.warn) {
  color: var(--p02-warn) !important;
}

.work-screen[data-page="02"] :is(.sb-bar-days.danger, .sb-bar-days.danger em) {
  color: var(--p02-danger) !important;
}

.work-screen[data-page="02"] .wf-timeline-head strong {
  display: block;
  padding: 7px 12px;
  border-left-color: var(--p02-warn);
  color: var(--p02-heading) !important;
  font-size: 16px !important;
  line-height: 20px;
}

.work-screen[data-page="02"] .mgv2-label {
  margin-bottom: 2px;
  padding-bottom: 5px;
  border-bottom-color: rgba(104, 216, 232, 0.14);
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .panel-body {
  padding: 6px 8px 8px;
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .metric-grid-v2 {
  height: 100%;
  display: grid;
  grid-template-rows: 0.88fr 1fr 1.18fr;
  gap: 6px;
  overflow: hidden;
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .mgv2-section {
  min-height: 0;
  justify-content: center;
  gap: 1px;
  padding: 5px 8px;
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .mgv2-label {
  margin-bottom: 0;
  padding-bottom: 3px;
  line-height: 17px;
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .mgv2-row {
  min-height: 20px;
  gap: 2px 8px;
  padding: 0;
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .mgv2-row span,
.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .mgv2-inline {
  font-size: 12px !important;
  line-height: 14px;
}

.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .mgv2-val,
.work-screen[data-page="02"] .work-panel[data-kind="metricGridV2"] .mgv2-inline .mgv2-val {
  font-size: 16px !important;
  line-height: 18px;
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat {
  gap: 6px;
  padding: 4px 6px;
  overflow: hidden;
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-stat {
  flex: 0 0 72px;
  min-width: 0;
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-stat b {
  font-size: 21px !important;
  line-height: 22px;
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-right--stat .wf-tl-extra-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-right {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-node--no-extra {
  grid-template-rows: minmax(0, 1fr);
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-node--no-extra .wf-tl-mid {
  grid-row: 1 / 3;
  align-self: stretch;
}

.work-screen[data-page="02"] .work-panel[data-kind="workfrontTimeline"] .wf-tl-node--no-extra .wf-tl-remain {
  min-width: 96px;
}

.work-screen[data-page="02"] .work-panel[data-kind="supplyBars"] .sb-bar-stock {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.work-screen[data-page="02"] .work-panel[data-kind="supplyBars"] .sb-bar-stock b {
  font-size: 18px !important;
  line-height: 20px;
}

.work-screen[data-page="02"] .work-panel[data-kind="supplyBars"] .sb-bar-stock em {
  color: var(--p02-text);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
}

.work-screen[data-page="02"] .work-panel[data-kind="supplyBars"] .sb-bar-daily {
  font-size: 11px !important;
  line-height: 14px;
}

.work-screen[data-page="02"] .work-panel[data-kind="supplyBars"] .sb-bar-days {
  font-size: 12px;
}

.work-screen[data-page="02"] .work-panel[data-kind="supplyBars"] .sb-bar-days em {
  font-size: 17px;
}

.work-screen[data-page="02"] .stage-summary b em {
  position: relative;
  top: -2px;
  margin-left: 2px;
  color: var(--p02-text);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
}

.work-screen[data-page="02"] .sb-bar-days,
.work-screen[data-page="02"] .sb-bar-days em {
  font-family: inherit !important;
  font-weight: 800;
  letter-spacing: 0;
}

/* Page 03 typography and color normalization.
   This final layer keeps equal hierarchy text consistent across all emergency cards. */
.work-screen[data-page="03"] {
  --p03-title: #F4FAFF;
  --p03-heading: #E7F6FF;
  --p03-label: #7FE8F5;
  --p03-body: #B8CEDA;
  --p03-muted: #7F98A8;
  --p03-faint: #5F788C;
  --p03-value: #F4FAFF;
  --p03-line: rgba(142, 204, 232, 0.15);
  --p03-surface: rgba(7, 29, 48, 0.38);
  --p03-surface-strong: rgba(14, 44, 68, 0.58);
  --p03-good: #5AD2A0;
  --p03-warn: #FFB060;
  --p03-danger: #FF6262;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  color: var(--p03-body);
}

.work-screen[data-page="03"] .work-panel-title {
  height: 38px;
  color: var(--p03-title) !important;
  font-size: 17px !important;
  font-weight: 800;
  line-height: 38px;
  letter-spacing: 0;
}

.work-screen[data-page="03"] .work-panel-title span {
  gap: 8px;
}

.work-screen[data-page="03"] .work-panel-title::before {
  content: none !important;
  display: none !important;
}

.work-screen[data-page="03"] .work-panel-title i,
.work-screen[data-page="03"] :is(
  .incident-actions i,
  .ds-bar-label i,
  .ps-measures b,
  .tb-resources i
) {
  color: var(--p03-label) !important;
  filter: drop-shadow(0 0 7px rgba(127, 232, 245, 0.28));
}

.work-screen[data-page="03"] .work-badge {
  height: 24px;
  padding: 0 10px;
  border-color: rgba(127, 232, 245, 0.32) !important;
  color: var(--p03-label) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
}

.work-screen[data-page="03"] .work-badge.warn {
  border-color: rgba(255, 176, 96, 0.46) !important;
  color: var(--p03-warn) !important;
}

.work-screen[data-page="03"] :is(
  .incident-core,
  .incident-meta article,
  .incident-actions article,
  .op-thumb-img,
  .op-weather-item,
  .op-risk,
  .deploy-status,
  .ds-bar-track,
  .plan-slate,
  .ps-route,
  .ps-impact-grid article,
  .ps-note,
  .ps-alt,
  .tb-progress,
  .tb-actions,
  .tb-side,
  .tb-action,
  .tb-resources article,
  .tb-countdown
) {
  border-color: var(--p03-line) !important;
}

.work-screen[data-page="03"] :is(
  .incident-core,
  .op-weather-item,
  .deploy-status,
  .plan-slate,
  .tb-progress,
  .tb-actions,
  .tb-side
) {
  background:
    linear-gradient(180deg, var(--p03-surface-strong), rgba(7, 29, 48, 0.18)),
    var(--p03-surface) !important;
}

.work-screen[data-page="03"] :is(
  .incident-core strong,
  .ds-head b,
  .ps-head strong
) {
  color: var(--p03-heading) !important;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(127, 232, 245, 0.18);
}

.work-screen[data-page="03"] .incident-core strong {
  font-size: 17px !important;
  line-height: 20px;
}

.work-screen[data-page="03"] .ds-head b {
  font-size: 15px !important;
  line-height: 18px;
}

.work-screen[data-page="03"] .ps-head strong {
  font-size: 20px !important;
  line-height: 24px;
}

.work-screen[data-page="03"] :is(
  .incident-core small,
  .ps-head span,
  .tb-section-label,
  .tb-status,
  .ps-route-svg text
) {
  color: var(--p03-label) !important;
  font-weight: 700;
  letter-spacing: 0;
}

.work-screen[data-page="03"] :is(
  .incident-core small,
  .ps-head span,
  .tb-section-label
) {
  font-size: 10px !important;
  line-height: 13px;
}

.work-screen[data-page="03"] :is(
  .incident-core span,
  .incident-actions span,
  .op-thumb span,
  .op-weather-item span,
  .op-risk span,
  .ds-bar-label span,
  .ps-desc,
  .ps-note,
  .tb-step strong,
  .tb-action span,
  .tb-status,
  .tb-resources span
) {
  color: var(--p03-body) !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0;
}

.work-screen[data-page="03"] :is(
  .op-thumb span,
  .op-risk span,
  .ds-notice,
  .ps-alt b,
  .tb-step b,
  .tb-step small,
  .tb-countdown small
) {
  color: var(--p03-muted) !important;
  font-size: 10px !important;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0;
}

.work-screen[data-page="03"] :is(
  .incident-core strong,
  .incident-meta b,
  .incident-actions b,
  .op-weather-item span,
  .ds-bar-count,
  .ps-head b,
  .ps-impact-grid b,
  .tb-action b,
  .tb-countdown strong,
  .tb-resources b
) {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.work-screen[data-page="03"] :is(.incident-meta b, .op-weather-item span) {
  color: var(--p03-value) !important;
  font-size: 14px !important;
  font-weight: 800;
}

.work-screen[data-page="03"] .incident-core strong {
  color: #6CE7FF !important;
}

.work-screen[data-page="03"] .ds-bar-count {
  color: var(--p03-body) !important;
  font-size: 11px !important;
}

.work-screen[data-page="03"] .ps-head b {
  color: var(--p03-good) !important;
  font-size: 17px !important;
}

.work-screen[data-page="03"] .ps-impact-grid b {
  font-size: 26px !important;
  line-height: 28px;
}

.work-screen[data-page="03"] .tb-countdown strong {
  color: var(--p03-warn) !important;
}

.work-screen[data-page="03"] :is(.ps-impact-grid .good b, .ps-impact-grid .lift b, .tb-resources .good b, .tb-resources .good i, .ds-bar-row--green .ds-bar-count) {
  color: var(--p03-good) !important;
}

.work-screen[data-page="03"] :is(.ps-impact-grid .danger b, .op-risk.danger b) {
  color: var(--p03-danger) !important;
}

.work-screen[data-page="03"] :is(.tb-action b, .tb-action em, .tb-step.active b, .tb-step.active strong, .tb-resources .warn b, .tb-resources .warn i, .op-risk.warn b, .ds-bar-row--yellow .ds-bar-count) {
  color: var(--p03-warn) !important;
}

.work-screen[data-page="03"] .op-risk.base b {
  color: var(--p03-label) !important;
}

.work-screen[data-page="03"] :is(.status-pill.good, .status-pill.base) {
  color: var(--p03-good) !important;
}

.work-screen[data-page="03"] :is(.status-pill.warn, .et-next-tag, .tb-action em) {
  color: var(--p03-warn) !important;
}

.work-screen[data-page="03"] .status-pill.danger {
  color: var(--p03-danger) !important;
}

.work-screen[data-page="03"] :is(
  .incident-actions article,
  .op-risk,
  .ps-impact-grid article,
  .tb-action,
  .tb-resources article,
  .tb-countdown
) {
  background: rgba(6, 25, 44, 0.58) !important;
}

.work-screen[data-page="03"] :is(
  .incident-core span,
  .incident-actions span,
  .op-thumb span,
  .op-risk span,
  .ds-bar-label span,
  .ps-desc,
  .ps-note,
  .ps-alt b,
  .tb-action span,
  .tb-resources span,
  .tb-resources b
) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-screen[data-page="03"] .ps-note,
.work-screen[data-page="03"] .tb-status {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.work-screen[data-page="03"] .op-weather-item span {
  color: var(--p03-body) !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 13px;
  white-space: nowrap;
}

/* Page 03 targeted polish: no clipped plan subtitle, rounded deploy shadow. */
.work-screen[data-page="03"] .ps-desc {
  margin: -2px 54px 0 73px;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}

.work-screen[data-page="03"] .work-panel[data-kind="deployStatus"] .panel-body {
  padding: 6px 10px 10px;
}

.work-screen[data-page="03"] .deploy-status {
  border: 1px solid var(--p03-line);
  border-radius: 7px;
  padding: 8px 10px 9px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14, 44, 68, 0.58), rgba(7, 29, 48, 0.18)),
    rgba(7, 29, 48, 0.38) !important;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 18px rgba(91, 184, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.work-screen[data-page="03"] .deploy-status::before {
  top: 5px;
  left: 5px;
  border-top-left-radius: 5px;
}

.work-screen[data-page="03"] .deploy-status::after {
  right: 5px;
  bottom: 5px;
  border-bottom-right-radius: 5px;
}

.work-screen[data-page="03"] .weather-strip .weather-item:nth-child(n + 4) {
  display: none !important;
}

/* Keep side cards close to the HUD title bar while the center switcher floats above the map. */
.work-screen .work-layout,
.work-screen[data-page="02"] .work-layout,
.work-screen[data-page="03"] .work-layout,
.work-screen[data-page="04"] .work-layout,
.work-screen[data-page="05"] .work-layout,
.work-screen[data-page="06"] .work-layout {
  top: 66px;
}

.work-screen[data-page="06"] .work-panel-title::before {
  content: none !important;
  display: none !important;
}