:root {
  --design-width: 1672;
  --design-height: 941;
  --bg: #061628;
  --panel: rgba(6, 38, 66, 0.82);
  --panel-strong: rgba(7, 54, 90, 0.88);
  --panel-soft: rgba(10, 82, 132, 0.48);
  --line: rgba(42, 169, 255, 0.34);
  --line-soft: rgba(72, 188, 255, 0.18);
  --cyan: #2de8ff;
  --blue: #248dff;
  --green: #2de8ff;
  --orange: #f1a341;
  --jade: #248dff;
  --amber: #f1a341;
  --purple: #8f78ff;
  --text: #eaf7ff;
  --muted: #93b8cd;
  --shadow: 0 18px 36px rgba(0, 8, 20, 0.24), inset 0 0 18px rgba(45, 184, 255, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050b14;
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
}

button {
  font: inherit;
  color: inherit;
}

.viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #071827, #030a12);
}

.screen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1672px;
  height: 941px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 16, 31, 0.96), rgba(5, 20, 35, 0.96)),
    linear-gradient(90deg, rgba(20, 76, 116, 0.18), transparent 34%, transparent 66%, rgba(20, 76, 116, 0.18));
  border: 1px solid rgba(48, 169, 255, 0.3);
}

.screen:not(.work-screen)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("./assets/main-map.jpg") center / cover no-repeat;
}

.panel,
.map-card {
  position: absolute;
  border: 1px solid rgba(133, 205, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(8, 46, 76, 0.34), rgba(4, 22, 38, 0.2)),
    rgba(2, 16, 30, 0.18);
  box-shadow:
    0 18px 36px rgba(0, 8, 20, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

.panel::before,
.map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(45, 184, 255, 0.04), transparent 28%, transparent 72%, rgba(45, 184, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 36%);
  border-radius: inherit;
}

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 54px;
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(720px, 820px) minmax(390px, 1fr);
  column-gap: 14px;
  align-items: flex-start;
  padding: 6px 18px 0;
  background:
    radial-gradient(ellipse at center top, rgba(63, 189, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(5, 20, 37, 0.98), rgba(3, 14, 26, 0.88));
  border-bottom: 1px solid rgba(68, 178, 255, 0.42);
  box-shadow:
    0 10px 28px rgba(0, 9, 21, 0.28),
    inset 0 -1px 0 rgba(110, 221, 255, 0.18);
  z-index: 5;
}

.topbar::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 195, 255, 0.52), transparent);
}

.topbar::after {
  content: "";
  position: absolute;
  left: 430px;
  right: 430px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(51, 212, 255, 0.92), transparent);
  box-shadow: 0 0 16px rgba(45, 195, 255, 0.55);
}

.weather-strip,
.sys-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #d8edf8;
  font-size: 13px;
  white-space: nowrap;
}

.sys-strip {
  justify-content: flex-end;
}

.weather-item,
.sys-strip span {
  min-width: 0;
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(99, 189, 255, 0.18);
  border-radius: 999px;
  background: rgba(7, 38, 66, 0.42);
  box-shadow: inset 0 0 12px rgba(41, 149, 228, 0.08);
  color: #cfe6f2;
}

.title-wrap {
  position: relative;
  height: 54px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 82px;
  gap: 12px;
  align-items: center;
  justify-self: center;
  width: 100%;
  min-width: 0;
}

.title-wrap h1 {
  position: relative;
  min-width: 0;
  height: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid rgba(96, 197, 255, 0.35);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(24, 100, 155, 0.28), rgba(13, 59, 102, 0.48) 28%, rgba(13, 59, 102, 0.48) 72%, rgba(24, 100, 155, 0.28)),
    linear-gradient(180deg, rgba(74, 177, 255, 0.18), rgba(5, 23, 42, 0.24));
  color: #edfaff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 13px rgba(111, 205, 255, 0.7);
  box-shadow:
    inset 0 0 18px rgba(56, 176, 255, 0.12),
    0 0 22px rgba(45, 169, 255, 0.14);
}

.title-wrap h1::before,
.title-wrap h1::after {
  content: "";
  position: absolute;
  top: 11px;
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: rgba(45, 232, 255, 0.74);
  box-shadow: 0 0 10px rgba(45, 232, 255, 0.7);
}

.title-wrap h1::before {
  left: 10px;
}

.title-wrap h1::after {
  right: 10px;
}

.title-wrap h1 span {
  color: #c7e4f3;
  font-size: 22px;
  font-weight: 700;
}

.title-wing {
  width: 100%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(76, 196, 255, 0.78));
  box-shadow: 0 0 10px rgba(47, 193, 255, 0.4);
}

.title-wing.left {
  transform: none;
}

.title-wing.right {
  transform: rotate(180deg);
}

.icon-only {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

i[data-icon] {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: currentColor;
}

i[data-icon] svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.left-column,
.right-column,
.map-shell {
  position: absolute;
  z-index: 2;
}

.left-column {
  left: 11px;
  top: 63px;
  width: 330px;
  height: 850px;
}

.right-column {
  right: 12px;
  top: 63px;
  width: 330px;
  height: 850px;
}

.panel-title {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(79, 216, 203, 0.16);
  background:
    linear-gradient(90deg, rgba(42, 199, 165, 0.14), rgba(45, 184, 255, 0.035) 56%, transparent);
  color: #e9f7ff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(68, 190, 255, 0.4);
}

.panel-title::before {
  content: "";
  width: 3px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, #8df5d6, rgba(42, 199, 165, 0.58));
  box-shadow: 0 0 8px rgba(68, 190, 255, 0.42);
}

.panel-title.with-more {
  justify-content: flex-start;
}

.panel-title.with-more span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title a {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: #9fc8df;
  text-decoration: none;
}

.panel-title.compact {
  height: 32px;
  border-bottom: 0;
}

.project-panel {
  left: 0;
  top: 0;
  width: 330px;
  height: 246px;
}

.project-main,
.situation-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 13px;
  padding: 11px 12px 8px;
}

.project-main img,
.situation-main img {
  width: 135px;
  height: 84px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(120, 204, 255, 0.48);
}

.situation-score {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 4px;
}

.situation-score span {
  color: #9fc4d6;
  font-size: 12px;
}

.situation-score strong {
  margin-top: 2px;
  color: var(--cyan);
  font-size: 42px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(45, 232, 255, 0.85);
}

.situation-score em {
  margin-top: 5px;
  color: #d7edf8;
  font-size: 12px;
  font-style: normal;
}

.priority-ribbon {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0 10px;
}

.priority-ribbon span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(72, 188, 255, 0.25);
  border-radius: 4px;
  background: rgba(5, 46, 78, 0.34);
  color: #b9d8e7;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.priority-ribbon b {
  flex: 0 0 auto;
  color: #f1a341;
  font-size: 12px;
}

.project-copy strong {
  display: block;
  margin: 3px 0 8px;
  font-size: 16px;
}

.project-copy p {
  margin: 5px 0;
  color: #a9c6d7;
  font-size: 12px;
}

.metric-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 8px 10px 0;
  border: 1px solid rgba(42, 154, 224, 0.33);
  background: rgba(7, 48, 80, 0.42);
}

.metric-strip article {
  min-width: 0;
  height: 52px;
  padding: 6px 5px;
  text-align: center;
  border-right: 1px solid rgba(42, 154, 224, 0.24);
}

.metric-strip article:last-child {
  border-right: 0;
}

.metric-strip span {
  display: block;
  margin-top: 2px;
  color: #a9c6d7;
  font-size: 11px;
}

.metric-strip b {
  display: block;
  margin-top: 5px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 500;
}

.ledger-panel {
  left: 0;
  top: 260px;
  width: 330px;
  height: 206px;
}

.resource-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 10px 8px;
}

.resource-card {
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-right: 1px solid rgba(56, 161, 225, 0.25);
  border-bottom: 1px solid rgba(56, 161, 225, 0.14);
}

.resource-card:nth-child(4n) {
  border-right: 0;
}

.resource-card:nth-child(n + 5) {
  border-bottom: 0;
}

.resource-card i {
  color: #48b9ff;
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 0 6px rgba(49, 187, 255, 0.75));
}

.resource-card span {
  color: #bbd7e6;
  font-size: 12px;
}

.resource-card b {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 500;
}

.asset-panel {
  left: 0;
  top: 480px;
  width: 330px;
  height: 370px;
}

.asset-chart-row {
  position: relative;
  z-index: 1;
  height: 118px;
  display: flex;
  align-items: center;
  padding: 10px 16px 0;
}

.asset-chart {
  width: 112px;
  height: 104px;
}

.asset-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 14px;
}

.asset-summary span,
.asset-summary em {
  color: #93b8cd;
  font-size: 12px;
  font-style: normal;
}

.asset-summary strong {
  color: var(--cyan);
  font-size: 34px;
  line-height: 1;
}

.asset-list {
  position: relative;
  z-index: 1;
  padding: 14px 14px 0;
}

.asset-row {
  height: 42px;
  display: grid;
  grid-template-columns: 22px 78px 1fr 50px;
  align-items: center;
  gap: 7px;
  color: #b7d5e4;
  font-size: 12px;
  border-top: 1px solid rgba(63, 174, 255, 0.13);
}

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

.asset-row em {
  color: #83aabd;
  font-style: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.asset-footprint {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.asset-footprint span {
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(50, 165, 244, 0.28);
  border-radius: 4px;
  background: rgba(5, 45, 76, 0.42);
  color: #9fc4d6;
  font-size: 11px;
}

.asset-footprint b {
  color: var(--cyan);
  font-size: 15px;
  line-height: 1;
}

.status {
  justify-self: end;
  min-width: 48px;
  padding: 3px 7px;
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
  border: 1px solid currentColor;
}

.status.good {
  color: #48df9d;
  background: rgba(39, 151, 98, 0.22);
}

.status.base {
  color: #47b5ff;
  background: rgba(35, 115, 185, 0.22);
}

.status.warn {
  color: #f1a341;
  background: rgba(198, 120, 38, 0.22);
}

.map-shell {
  left: 378px;
  top: 63px;
  width: 914px;
  height: 850px;
}

.map-card {
  inset: 0;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.map-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  opacity: 0;
  transform: none;
  transform-origin: center;
}

.map-card::before,
.map-card::after,
.work-map::before,
.work-map::after {
  display: none;
}

.map-tabs,
.dimension-toggle,
.map-toolbar,
.map-legend,
.compass {
  position: absolute;
  z-index: 3;
}

.map-tabs,
.dimension-toggle,
.map-toolbar,
.map-legend,
.compass {
  display: none;
}

.map-tabs {
  left: 16px;
  top: 10px;
  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.08);
}

.map-tabs button,
.dimension-toggle 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;
}

.map-tabs button:last-child,
.dimension-toggle button:last-child {
  border-right-color: rgba(91, 184, 255, 0.14);
}

.map-tabs button.active,
.dimension-toggle button.active {
  min-width: 142px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(45, 184, 255, 0.56), rgba(18, 86, 150, 0.62)),
    rgba(15, 65, 111, 0.48);
  box-shadow: inset 0 -2px 12px rgba(45, 184, 255, 0.28);
}

.dimension-toggle {
  right: 126px;
  top: 10px;
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(91, 184, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(8, 50, 82, 0.46), rgba(3, 28, 52, 0.34)),
    rgba(4, 30, 55, 0.32);
  border-radius: 4px;
}

.dimension-toggle button {
  min-width: 66px;
  padding: 0 13px;
}

.dimension-toggle button.active {
  min-width: 82px;
}

.compass {
  right: 38px;
  top: 20px;
  width: 60px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #dff4ff;
  font-size: 12px;
}

.compass::before {
  content: "";
  width: 50px;
  height: 50px;
  border: 2px solid rgba(188, 218, 238, 0.45);
  border-radius: 50%;
  position: absolute;
}

.compass::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 40px solid rgba(232, 247, 255, 0.9);
  filter: drop-shadow(0 0 8px rgba(104, 203, 255, 0.8));
}

.map-toolbar {
  right: 147px;
  bottom: 76px;
  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;
}

.map-toolbar button {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #dff4ff;
  cursor: pointer;
}

.map-toolbar button::after,
.icon-only::after {
  content: attr(aria-label);
  position: absolute;
  right: 42px;
  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::after {
  right: 34px;
}

.map-toolbar button:hover::after,
.map-toolbar button:focus-visible::after,
.icon-only:hover::after,
.icon-only:focus-visible::after {
  opacity: 1;
}

.screen button:focus-visible,
.screen a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(45, 232, 255, 0.18);
}

.map-tabs button:hover,
.dimension-toggle button:hover,
.map-toolbar button:hover {
  color: #fff;
  background: rgba(45, 156, 238, 0.16);
}

.map-legend {
  right: 18px;
  top: 148px;
  width: 108px;
  padding: 10px 10px 8px;
  border: 1px solid rgba(91, 184, 255, 0.18);
  background: rgba(4, 32, 58, 0.42);
  border-radius: 4px;
}

.map-legend strong {
  display: block;
  margin-bottom: 7px;
  color: #e8f7ff;
  font-size: 13px;
  text-align: center;
}

.map-legend ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.map-legend li {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bdd8e6;
  font-size: 12px;
}

.legend-dot {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 10px;
  box-shadow: 0 0 8px currentColor;
}

.overview-command {
  position: absolute;
  left: 22px;
  bottom: 28px;
  z-index: 3;
  width: 330px;
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(91, 184, 255, 0.2);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(12, 58, 58, 0.62), rgba(3, 28, 52, 0.36)),
    rgba(3, 25, 45, 0.38);
  box-shadow:
    0 14px 32px rgba(0, 7, 18, 0.24),
    inset 0 0 18px rgba(45, 184, 255, 0.08);
  backdrop-filter: blur(8px);
}

.overview-command small,
.overview-command span {
  display: block;
  color: #a9cde0;
  font-size: 12px;
  line-height: 16px;
}

.overview-command strong {
  display: block;
  margin: 5px 0;
  color: #f4fbff;
  font-size: 20px;
  line-height: 24px;
  text-shadow: 0 0 12px rgba(45, 184, 255, 0.38);
}

.overview-command div {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(53, 223, 155, 0.28);
  border-radius: 50%;
  background:
    linear-gradient(rgba(4, 30, 52, 0.8), rgba(4, 30, 52, 0.8)) padding-box,
    conic-gradient(#2de8ff 0 86%, rgba(82, 160, 206, 0.16) 86% 100%) border-box;
}

.overview-command b {
  color: var(--cyan);
  font-size: 28px;
  line-height: 28px;
}

.map-priority-stack {
  position: absolute;
  right: 22px;
  bottom: 28px;
  z-index: 3;
  width: 248px;
  display: grid;
  gap: 8px;
}

.map-priority-stack article {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid rgba(79, 216, 203, 0.2);
  border-radius: 4px;
  background: rgba(4, 31, 43, 0.42);
  backdrop-filter: blur(8px);
}

.map-priority-stack article.warn {
  border-color: rgba(241, 163, 65, 0.48);
}

.map-priority-stack article.hot {
  border-color: rgba(240, 98, 93, 0.48);
}

.map-priority-stack b {
  color: var(--cyan);
  font-size: 12px;
}

.map-priority-stack span {
  min-width: 0;
  color: #d6edf8;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-priority-stack em {
  color: #f1a341;
  font-size: 12px;
  font-style: normal;
}

.today-panel {
  left: 0;
  top: 0;
  width: 330px;
  height: 244px;
}

.task-list {
  position: relative;
  z-index: 1;
  padding: 5px 11px 0;
}

.task-row {
  height: 37px;
  display: grid;
  grid-template-columns: 38px 1fr 54px;
  align-items: center;
  border-top: 1px solid rgba(57, 158, 228, 0.16);
  color: #c7dfeb;
  font-size: 13px;
}

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

.task-row time {
  width: 28px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 163, 65, 0.42);
  border-radius: 4px;
  color: #f1a341;
  background: rgba(142, 86, 22, 0.18);
  font-size: 11px;
}

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

.task-state {
  justify-self: end;
  min-width: 50px;
  padding: 4px 7px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
}

.task-state.running {
  color: #57b5ff;
  border: 1px solid rgba(80, 171, 255, 0.7);
  background: rgba(20, 94, 159, 0.24);
}

.task-state.done {
  color: #54df9a;
  border: 1px solid rgba(73, 205, 141, 0.66);
  background: rgba(34, 130, 84, 0.22);
}

.task-state.pending {
  color: #f0a43f;
  border: 1px solid rgba(229, 147, 49, 0.66);
  background: rgba(142, 86, 22, 0.22);
}

.topic-panel {
  left: 0;
  top: 258px;
  width: 330px;
  height: 228px;
}

.forecast-panel {
  left: 0;
  top: 510px;
  width: 330px;
  height: 348px;
}

.forecast-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 11px 12px 5px;
}

.forecast-metrics article {
  height: 54px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px solid rgba(50, 165, 244, 0.36);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(16, 85, 136, 0.38), rgba(6, 45, 76, 0.36)),
    rgba(6, 43, 72, 0.55);
}

.forecast-metrics span {
  color: #9fc4d6;
  font-size: 12px;
}

.forecast-metrics b {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 600;
}

.forecast-chart {
  position: relative;
  z-index: 1;
  width: calc(100% - 24px);
  height: 120px;
  margin: 12px 12px 0;
}

.forecast-list {
  position: relative;
  z-index: 1;
  padding: 2px 12px 0;
}

.forecast-row {
  height: 31px;
  display: grid;
  grid-template-columns: 60px 1fr 42px;
  align-items: center;
  gap: 7px;
  border-top: 1px solid rgba(58, 174, 255, 0.14);
  color: #c5deeb;
  font-size: 12px;
}

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

.forecast-row time {
  color: #88abc0;
}

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

.forecast-row b {
  justify-self: end;
  color: #52d7ff;
  font-size: 12px;
  font-weight: 500;
}

.topic-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 12px 0;
}

.topic-card {
  height: 73px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(45, 156, 238, 0.46);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(51, 190, 255, 0.12), transparent 58%),
    rgba(5, 46, 78, 0.62);
}

.topic-card i {
  width: 27px;
  height: 27px;
  color: #4ec3ff;
  filter: drop-shadow(0 0 8px rgba(69, 197, 255, 0.82));
}

.topic-card span {
  color: #d8edf8;
  font-size: 12px;
}

.selected-panel {
  left: 0;
  top: 443px;
  width: 330px;
  height: 235px;
  overflow: visible;
}

.selected-head {
  position: relative;
  z-index: 1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 0;
}

.selected-head strong {
  font-size: 14px;
}

.selected-head span {
  margin-left: 10px;
  padding: 2px 8px;
  color: #8fc9ff;
  border: 1px solid rgba(84, 165, 255, 0.54);
  border-radius: 4px;
  background: rgba(24, 87, 151, 0.3);
  font-size: 12px;
}

.selected-head button {
  border: 0;
  background: transparent;
  color: #8caec0;
  font-size: 18px;
}

.selected-head .ghost-link {
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(82, 170, 255, 0.48);
  border-radius: 3px;
  background: rgba(7, 50, 86, 0.52);
  color: #bfe6fb;
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
}

.selected-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 2px 12px 0;
}

.selected-body img {
  width: 140px;
  height: 112px;
  object-fit: cover;
  border: 1px solid rgba(100, 187, 255, 0.45);
  border-radius: 3px;
}

.selected-body dl {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1px 6px;
  margin: 0;
}

.selected-body dl div {
  display: contents;
}

.selected-body dt,
.selected-body dd {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
}

.selected-body dt {
  color: #9cb9ca;
}

.selected-body dd {
  color: #d7edf8;
}

.focus-summary {
  min-width: 0;
  padding-top: 2px;
}

.focus-summary p {
  margin: 0;
  color: #d8edf8;
  font-size: 12px;
  line-height: 20px;
}

.focus-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 9px;
}

.focus-kpis span {
  min-width: 0;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(54, 165, 244, 0.34);
  border-radius: 3px;
  background: rgba(4, 38, 70, 0.58);
  color: #a9cadc;
  font-size: 11px;
  text-align: center;
}

.focus-kpis b {
  color: var(--cyan);
  font-size: 15px;
  line-height: 1;
}

.dot.good {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.selected-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 0;
}

.selected-actions button {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(65, 156, 232, 0.55);
  border-radius: 3px;
  background: rgba(7, 48, 84, 0.7);
  color: #cfe7f3;
  font-size: 12px;
  cursor: pointer;
}

.selected-actions button:hover,
.selected-head .ghost-link:hover {
  border-color: rgba(85, 214, 255, 0.8);
  color: #fff;
  box-shadow: 0 0 10px rgba(45, 168, 255, 0.28);
}

.layer-popover {
  position: absolute;
  z-index: 4;
  top: 72px;
  right: 12px;
  bottom: auto;
  width: 337px;
  padding: 11px 12px 12px;
  border: 1px solid rgba(75, 183, 255, 0.72);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(7, 52, 88, 0.96), rgba(4, 32, 59, 0.96)),
    rgba(5, 31, 54, 0.96);
  box-shadow: 0 0 18px rgba(43, 172, 255, 0.36), inset 0 0 14px rgba(43, 172, 255, 0.14);
}

.layer-popover[hidden] {
  display: none;
}

.layer-popover-title {
  margin-bottom: 9px;
  color: #eaf7ff;
  font-size: 13px;
  font-weight: 700;
}

.layer-popover .layer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 11px;
  width: 100%;
  height: auto;
  overflow: visible;
}

.route-panel {
  left: 11px;
  bottom: 25px;
  width: 1649px;
  height: 118px;
}

.route-title {
  position: absolute;
  left: 14px;
  top: 9px;
  color: #eaf7ff;
  font-size: 18px;
  font-weight: 700;
}

.route-axis {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 0 116px;
}

.axis-line {
  position: absolute;
  left: 132px;
  right: 88px;
  top: 70px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px var(--cyan);
}

.axis-start,
.axis-end {
  position: absolute;
  top: 53px;
  min-width: 96px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #dffdf3;
  font-size: 13px;
}

.axis-start {
  left: 13px;
  background: rgba(42, 151, 94, 0.56);
  border: 1px solid rgba(70, 218, 151, 0.72);
}

.axis-end {
  right: 13px;
  background: rgba(120, 54, 54, 0.52);
  border: 1px solid rgba(235, 101, 101, 0.72);
}

.axis-node {
  position: absolute;
  top: 36px;
  transform: translateX(-50%);
  min-width: 86px;
  text-align: center;
}

.axis-node .node-name {
  display: block;
  color: #d8edf8;
  font-size: 12px;
  margin-bottom: 4px;
}

.axis-node .node-dot {
  width: 30px;
  height: 30px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(36, 141, 255, 0.82);
  border: 2px solid rgba(203, 239, 255, 0.85);
  box-shadow: 0 0 12px rgba(45, 232, 255, 0.8);
  color: #fff;
}

.axis-node .mileage {
  display: block;
  margin-top: 4px;
  color: #8fb0c4;
  font-size: 11px;
}

.layer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 11px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.layer-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c7e2ee;
  font-size: 12px;
  white-space: nowrap;
}

.checkbox {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: #168be8;
  color: #fff;
  font-size: 11px;
  box-shadow: 0 0 8px rgba(45, 168, 255, 0.72);
}

.object-dialog {
  width: min(720px, calc(100vw - 80px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.object-dialog::backdrop {
  background: rgba(1, 8, 18, 0.72);
  backdrop-filter: blur(4px);
}

.dialog-card {
  border: 1px solid rgba(82, 188, 255, 0.78);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(8, 48, 82, 0.98), rgba(4, 25, 45, 0.98)),
    rgba(5, 28, 49, 0.98);
  box-shadow: 0 0 18px rgba(39, 168, 255, 0.28), inset 0 0 14px rgba(47, 179, 255, 0.12);
  overflow: hidden;
}

.dialog-card header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(78, 181, 255, 0.34);
}

.dialog-card header strong {
  font-size: 17px;
}

.dialog-card header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(92, 170, 230, 0.45);
  border-radius: 3px;
  background: rgba(8, 50, 84, 0.58);
  color: #bfe6fb;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.dialog-content {
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 18px;
  padding: 17px 18px 19px;
}

.dialog-content img {
  width: 245px;
  height: 170px;
  object-fit: cover;
  border: 1px solid rgba(100, 187, 255, 0.5);
  border-radius: 4px;
}

.dialog-content dl {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px 11px;
  margin: 0;
}

.dialog-content dl div {
  display: contents;
}

.dialog-content dt,
.dialog-content dd {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
}

.dialog-content dt {
  color: #91b9cc;
}

.dialog-content dd {
  color: #e5f5ff;
}

@media (max-aspect-ratio: 1672/941) {
  .screen {
    transform: translate(-50%, -50%) scale(calc(100vw / 1672));
  }
}

@media (min-aspect-ratio: 1672/941) {
  .screen {
    transform: translate(-50%, -50%) scale(calc(100vh / 941));
  }
}

/* Index HUD visual refresh */
.screen:not(.work-screen) {
  --hud-cyan: #5df4ff;
  --hud-blue: #2a93ff;
  --hud-deep: rgba(4, 18, 36, 0.72);
  --hud-glass: rgba(9, 31, 58, 0.48);
  --hud-line: rgba(113, 216, 255, 0.34);
  background: #061424;
  border: 0;
  box-shadow: inset 0 0 80px rgba(16, 87, 150, 0.22);
}

.screen:not(.work-screen)::before {
  background:
    linear-gradient(180deg, rgba(2, 10, 22, 0.14), rgba(2, 9, 18, 0.24)),
    url("./assets/main-map--0.jpg") center / cover no-repeat;
  filter: saturate(1.18) contrast(1.08) brightness(0.9);
  transform: scale(1.018);
}

.screen:not(.work-screen)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 43%, rgba(86, 244, 255, 0.18), transparent 21%),
    radial-gradient(circle at 65% 18%, rgba(88, 158, 255, 0.22), transparent 18%),
    radial-gradient(circle at 18% 14%, rgba(55, 181, 255, 0.2), transparent 18%),
    linear-gradient(90deg, rgba(2, 9, 20, 0.74), rgba(3, 14, 28, 0.1) 24%, rgba(3, 14, 28, 0.05) 74%, rgba(2, 9, 20, 0.76)),
    linear-gradient(180deg, rgba(2, 8, 18, 0.72), transparent 20%, transparent 72%, rgba(2, 8, 18, 0.54)),
    radial-gradient(circle, rgba(130, 224, 255, 0.2) 0 1px, transparent 1.5px) 0 0 / 38px 38px;
  mix-blend-mode: normal;
}

.screen:not(.work-screen) .topbar {
  height: 70px;
  grid-template-columns: minmax(420px, 1fr) minmax(700px, 820px) minmax(420px, 1fr);
  padding: 0 24px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  z-index: 8;
}

.screen:not(.work-screen) .topbar::before {
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
  background:
    linear-gradient(90deg, rgba(70, 178, 255, 0.3), transparent 27%, transparent 73%, rgba(70, 178, 255, 0.3)),
    linear-gradient(180deg, rgba(2, 13, 28, 0.92), rgba(2, 13, 28, 0.18) 76%, transparent);
  box-shadow: none;
  clip-path: polygon(0 0, 31% 0, 36% 100%, 64% 100%, 69% 0, 100% 0, 100% 32%, 72% 34%, 66% 88%, 64% 100%, 36% 100%, 34% 88%, 28% 34%, 0 32%);
}

.screen:not(.work-screen) .topbar::after {
  left: 320px;
  right: 320px;
  bottom: 0;
  height: 34px;
  border: 1px solid rgba(116, 218, 255, 0.28);
  border-top: 0;
  border-radius: 0 0 34px 34px;
  background:
    radial-gradient(ellipse at center top, rgba(101, 238, 255, 0.34), transparent 62%),
    linear-gradient(90deg, transparent, rgba(93, 244, 255, 0.76), transparent);
  box-shadow:
    0 10px 32px rgba(45, 184, 255, 0.22),
    inset 0 -1px 0 rgba(181, 246, 255, 0.24);
}

.screen:not(.work-screen) .weather-strip,
.screen:not(.work-screen) .sys-strip {
  position: relative;
  z-index: 2;
  color: rgba(221, 240, 252, 0.82);
  font-size: 13px;
}

.screen:not(.work-screen) .weather-item,
.screen:not(.work-screen) .sys-strip span {
  height: 30px;
  border-color: rgba(114, 202, 255, 0.12);
  background: rgba(4, 19, 38, 0.3);
  box-shadow: inset 0 0 16px rgba(87, 194, 255, 0.08);
  color: rgba(226, 243, 255, 0.82);
  backdrop-filter: blur(14px);
}

.screen:not(.work-screen) .title-wrap {
  z-index: 2;
  height: 66px;
  grid-template-columns: 100px minmax(0, 1fr) 100px;
  gap: 18px;
}

.screen:not(.work-screen) .title-wrap h1 {
  height: 54px;
  padding: 0 34px;
  border: 1px solid rgba(128, 226, 255, 0.42);
  border-top: 0;
  border-radius: 0 0 26px 26px;
  background:
    linear-gradient(90deg, rgba(12, 47, 82, 0.46), rgba(18, 75, 118, 0.68) 28%, rgba(18, 75, 118, 0.68) 72%, rgba(12, 47, 82, 0.46)),
    radial-gradient(ellipse at center bottom, rgba(93, 244, 255, 0.22), transparent 64%);
  color: #dffbff;
  font-size: 28px;
  font-weight: 800;
  clip-path: polygon(0 0, 15% 0, 21% 100%, 79% 100%, 85% 0, 100% 0, 94% 58%, 82% 96%, 18% 96%, 6% 58%);
  text-shadow:
    0 0 10px rgba(139, 237, 255, 0.9),
    0 0 24px rgba(40, 165, 255, 0.5);
  box-shadow:
    inset 0 -10px 28px rgba(93, 244, 255, 0.14),
    0 12px 34px rgba(17, 117, 196, 0.26);
}

.screen:not(.work-screen) .title-wrap h1 span {
  color: rgba(211, 239, 255, 0.86);
  font-size: 22px;
  font-weight: 600;
}

.screen:not(.work-screen) .title-wrap h1::before,
.screen:not(.work-screen) .title-wrap h1::after {
  top: 14px;
  width: 5px;
  height: 25px;
  border-radius: 8px;
  background: var(--hud-cyan);
  box-shadow:
    0 0 12px rgba(93, 244, 255, 0.9),
    0 0 26px rgba(42, 147, 255, 0.62);
}

.screen:not(.work-screen) .title-wrap h1::before {
  left: 22px;
}

.screen:not(.work-screen) .title-wrap h1::after {
  right: 22px;
}

.screen:not(.work-screen) .title-wing {
  height: 34px;
  border-top: 1px solid rgba(98, 205, 255, 0.34);
  border-radius: 0 18px 0 0;
  background:
    linear-gradient(90deg, transparent, rgba(93, 244, 255, 0.72)),
    radial-gradient(circle at right top, rgba(93, 244, 255, 0.54), transparent 26%);
  box-shadow: 0 -3px 16px rgba(79, 188, 255, 0.18);
}

.screen:not(.work-screen) .title-wing.left {
  transform: skewX(20deg);
}

.screen:not(.work-screen) .title-wing.right {
  transform: rotate(180deg) skewX(20deg);
}

.screen:not(.work-screen) .left-column {
  left: 14px;
  top: 76px;
  width: 330px;
  height: 842px;
  z-index: 4;
}

.screen:not(.work-screen) .right-column {
  right: 14px;
  top: 76px;
  width: 330px;
  height: 842px;
  z-index: 4;
}

.screen:not(.work-screen) .panel {
  border-color: rgba(134, 219, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(97, 210, 255, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(17, 52, 88, 0.62), rgba(7, 28, 54, 0.5)),
    rgba(5, 20, 40, 0.42);
  box-shadow:
    0 18px 42px rgba(0, 9, 23, 0.34),
    inset 0 1px 0 rgba(218, 250, 255, 0.08),
    inset 0 0 30px rgba(68, 185, 255, 0.08);
  backdrop-filter: blur(20px) saturate(1.35);
}

.screen:not(.work-screen) .panel::before {
  display: block;
  background:
    linear-gradient(90deg, rgba(93, 244, 255, 0.14), transparent 42%, transparent 70%, rgba(93, 244, 255, 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%);
}

.screen:not(.work-screen) .panel::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(153, 235, 255, 0.82), transparent);
  box-shadow: 0 0 14px rgba(93, 244, 255, 0.46);
  pointer-events: none;
}

.screen:not(.work-screen) .project-panel {
  width: 330px;
  height: 246px;
}

.screen:not(.work-screen) .ledger-panel {
  top: 260px;
  width: 330px;
  height: 206px;
}

.screen:not(.work-screen) .asset-panel {
  top: 480px;
  width: 330px;
  height: 362px;
}

.screen:not(.work-screen) .today-panel {
  width: 330px;
  height: 244px;
}

.screen:not(.work-screen) .topic-panel {
  top: 258px;
  width: 330px;
  height: 228px;
}

.screen:not(.work-screen) .forecast-panel {
  top: 510px;
  width: 330px;
  height: 340px;
}

.screen:not(.work-screen) .panel-title {
  height: 38px;
  padding: 0 14px;
  border-bottom-color: rgba(111, 217, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(93, 244, 255, 0.16), rgba(42, 147, 255, 0.06) 56%, transparent),
    rgba(7, 28, 52, 0.16);
  color: #effcff;
  font-size: 16px;
  text-shadow:
    0 0 8px rgba(93, 244, 255, 0.52),
    0 0 18px rgba(42, 147, 255, 0.26);
}

.screen:not(.work-screen) .panel-title::before {
  width: 3px;
  height: 20px;
  background: linear-gradient(180deg, #8effff, #2a93ff);
  box-shadow:
    0 0 8px rgba(93, 244, 255, 0.92),
    0 0 18px rgba(42, 147, 255, 0.62);
}

.screen:not(.work-screen) .panel-title a {
  color: rgba(196, 231, 247, 0.78);
}

.screen:not(.work-screen) .situation-main img {
  border-color: rgba(128, 226, 255, 0.56);
  border-radius: 6px;
  box-shadow: 0 0 22px rgba(45, 184, 255, 0.22);
}

.screen:not(.work-screen) .situation-score strong,
.screen:not(.work-screen) .asset-summary strong,
.screen:not(.work-screen) .resource-card b,
.screen:not(.work-screen) .metric-strip b,
.screen:not(.work-screen) .forecast-metrics b {
  color: var(--hud-cyan);
  text-shadow:
    0 0 10px rgba(93, 244, 255, 0.82),
    0 0 24px rgba(42, 147, 255, 0.38);
}

.screen:not(.work-screen) .priority-ribbon span,
.screen:not(.work-screen) .metric-strip,
.screen:not(.work-screen) .asset-footprint span,
.screen:not(.work-screen) .forecast-metrics article,
.screen:not(.work-screen) .topic-card {
  border-color: rgba(98, 205, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(55, 157, 255, 0.14), rgba(5, 31, 58, 0.34)),
    rgba(6, 31, 57, 0.3);
  box-shadow: inset 0 0 18px rgba(93, 244, 255, 0.06);
}

.screen:not(.work-screen) .resource-card,
.screen:not(.work-screen) .task-row,
.screen:not(.work-screen) .forecast-row,
.screen:not(.work-screen) .asset-row {
  border-color: rgba(98, 205, 255, 0.14);
}

.screen:not(.work-screen) .topic-card i,
.screen:not(.work-screen) .resource-card i,
.screen:not(.work-screen) .asset-row i {
  color: #73dcff;
  filter: drop-shadow(0 0 10px rgba(93, 244, 255, 0.72));
}

.screen:not(.work-screen) .task-row time,
.screen:not(.work-screen) .priority-ribbon b {
  color: #ffd18a;
}

.screen:not(.work-screen) .task-state.pending,
.screen:not(.work-screen) .status.warn {
  color: #ffd18a;
  background: rgba(170, 107, 30, 0.24);
}

.screen:not(.work-screen) .map-shell {
  left: 374px;
  top: 76px;
  width: 924px;
  height: 842px;
  z-index: 3;
  pointer-events: none;
}

.screen:not(.work-screen) .map-card {
  background: transparent;
  overflow: visible;
}

.screen:not(.work-screen) .map-bg {
  opacity: 0;
}

.screen:not(.work-screen) .map-card::before {
  display: block;
  content: "";
  position: absolute;
  inset: 40px 18px 70px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 49% 44%, rgba(93, 244, 255, 0.18), transparent 16%),
    radial-gradient(ellipse at 52% 57%, rgba(241, 163, 65, 0.13), transparent 20%),
    linear-gradient(108deg, transparent 36%, rgba(93, 244, 255, 0.11) 48%, rgba(93, 244, 255, 0.03) 58%, transparent 68%);
  filter: blur(0.2px);
  mix-blend-mode: screen;
}

.screen:not(.work-screen) .map-card::after {
  display: block;
  content: "";
  position: absolute;
  left: 226px;
  right: 230px;
  top: 120px;
  height: 600px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(93, 244, 255, 0.42), transparent),
    radial-gradient(circle, rgba(93, 244, 255, 0.74) 0 2px, transparent 3px) center / 42px 78px;
  border-radius: 50%;
  filter: blur(9px);
  opacity: 0.22;
  transform: rotate(-9deg);
  mix-blend-mode: screen;
}

.screen:not(.work-screen) .map-tabs,
.screen:not(.work-screen) .dimension-toggle,
.screen:not(.work-screen) .map-toolbar,
.screen:not(.work-screen) .map-legend,
.screen:not(.work-screen) .compass,
.screen:not(.work-screen) .overview-command,
.screen:not(.work-screen) .map-priority-stack {
  pointer-events: auto;
}

.screen:not(.work-screen) .map-tabs {
  left: 190px;
  top: 16px;
  gap: 10px;
  padding: 8px 14px;
  border-color: rgba(161, 231, 255, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center top, rgba(222, 251, 255, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(38, 83, 115, 0.74), rgba(13, 42, 73, 0.58));
  box-shadow:
    0 14px 34px rgba(0, 12, 30, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 26px rgba(93, 244, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.3);
}

.screen:not(.work-screen) .map-tabs button,
.screen:not(.work-screen) .dimension-toggle button {
  height: 40px;
  min-width: 136px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(223, 243, 255, 0.78);
  font-size: 20px;
  font-weight: 500;
}

.screen:not(.work-screen) .map-tabs button.active,
.screen:not(.work-screen) .dimension-toggle button.active {
  min-width: 146px;
  color: var(--hud-cyan);
  background:
    radial-gradient(ellipse at center bottom, rgba(93, 244, 255, 0.28), transparent 70%),
    rgba(25, 86, 122, 0.42);
  box-shadow:
    inset 0 -3px 0 rgba(93, 244, 255, 0.78),
    0 0 24px rgba(93, 244, 255, 0.26);
}

.screen:not(.work-screen) .dimension-toggle {
  right: 16px;
  top: 122px;
  display: grid;
  gap: 0;
  padding: 10px 8px;
  border-color: rgba(136, 224, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(29, 70, 105, 0.66), rgba(9, 36, 66, 0.5)),
    rgba(7, 28, 52, 0.32);
  box-shadow:
    0 14px 32px rgba(0, 9, 23, 0.3),
    inset 0 0 22px rgba(93, 244, 255, 0.08);
  backdrop-filter: blur(18px);
}

.screen:not(.work-screen) .dimension-toggle button {
  width: 82px;
  min-width: 82px;
  border-radius: 6px;
  font-size: 16px;
}

.screen:not(.work-screen) .dimension-toggle button.active {
  width: 94px;
  min-width: 94px;
  border-radius: 6px;
}

.screen:not(.work-screen) .compass {
  right: 24px;
  top: 30px;
  color: rgba(235, 250, 255, 0.92);
}

.screen:not(.work-screen) .compass::before {
  border-color: rgba(180, 235, 255, 0.4);
  background: rgba(7, 34, 58, 0.2);
  box-shadow:
    0 0 24px rgba(93, 244, 255, 0.22),
    inset 0 0 18px rgba(93, 244, 255, 0.1);
}

.screen:not(.work-screen) .compass::after {
  border-bottom-color: rgba(229, 250, 255, 0.94);
}

.screen:not(.work-screen) .map-toolbar {
  right: 88px;
  bottom: 142px;
  width: 58px;
  gap: 6px;
  padding: 10px 0;
  border-color: rgba(136, 224, 255, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(25, 67, 105, 0.62), rgba(7, 30, 58, 0.48)),
    rgba(5, 20, 40, 0.36);
  box-shadow:
    0 16px 34px rgba(0, 9, 23, 0.34),
    inset 0 0 20px rgba(93, 244, 255, 0.08);
  backdrop-filter: blur(18px);
}

.screen:not(.work-screen) .map-toolbar button {
  width: 42px;
  height: 42px;
  border-bottom: 1px solid rgba(136, 224, 255, 0.12);
  color: rgba(218, 244, 255, 0.92);
}

.screen:not(.work-screen) .map-toolbar button:last-child {
  border-bottom: 0;
}

.screen:not(.work-screen) .map-legend {
  right: 18px;
  top: 238px;
  width: 118px;
  border-color: rgba(136, 224, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14, 49, 82, 0.56), rgba(6, 27, 52, 0.42)),
    rgba(5, 20, 40, 0.32);
  box-shadow: inset 0 0 22px rgba(93, 244, 255, 0.08);
  backdrop-filter: blur(18px);
}

.screen:not(.work-screen) .overview-command {
  left: 112px;
  bottom: 30px;
  width: 330px;
  min-height: 88px;
  border-color: rgba(136, 224, 255, 0.3);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(14, 49, 82, 0.68), rgba(8, 35, 66, 0.5)),
    rgba(5, 20, 40, 0.4);
  box-shadow:
    0 20px 42px rgba(0, 9, 23, 0.34),
    inset 0 0 24px rgba(93, 244, 255, 0.08);
  backdrop-filter: blur(20px);
}

.screen:not(.work-screen) .overview-command div {
  border-color: rgba(93, 244, 255, 0.42);
  background:
    linear-gradient(rgba(6, 31, 58, 0.84), rgba(6, 31, 58, 0.84)) padding-box,
    conic-gradient(var(--hud-cyan) 0 86%, rgba(82, 160, 206, 0.16) 86% 100%) border-box;
  box-shadow: 0 0 24px rgba(93, 244, 255, 0.26);
}

.screen:not(.work-screen) .overview-command b {
  color: var(--hud-cyan);
}

.screen:not(.work-screen) .map-priority-stack {
  right: 90px;
  bottom: 28px;
  width: 270px;
}

.screen:not(.work-screen) .map-priority-stack article {
  border-color: rgba(136, 224, 255, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(9, 50, 88, 0.68), rgba(5, 26, 50, 0.48)),
    rgba(5, 20, 40, 0.36);
  box-shadow: inset 0 0 18px rgba(93, 244, 255, 0.06);
  backdrop-filter: blur(18px);
}

.screen:not(.work-screen) .map-priority-stack b {
  color: var(--hud-cyan);
}

/* Index header correction: keep the sci-fi shell, never clip the title text. */
.screen:not(.work-screen) .topbar {
  grid-template-columns: minmax(360px, 1fr) 820px minmax(360px, 1fr);
  column-gap: 14px;
}

.screen:not(.work-screen) .title-wrap {
  position: relative;
  width: 820px;
  height: 70px;
  display: block;
  justify-self: center;
  isolation: isolate;
}

.screen:not(.work-screen) .title-wrap::before {
  content: "";
  position: absolute;
  left: 58px;
  right: 58px;
  top: 8px;
  height: 56px;
  z-index: 0;
  border: 1px solid rgba(128, 226, 255, 0.42);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background:
    radial-gradient(ellipse at center bottom, rgba(93, 244, 255, 0.28), transparent 66%),
    linear-gradient(90deg, rgba(11, 45, 80, 0.46), rgba(18, 76, 122, 0.72) 30%, rgba(18, 76, 122, 0.72) 70%, rgba(11, 45, 80, 0.46));
  clip-path: polygon(0 0, 14% 0, 20% 100%, 80% 100%, 86% 0, 100% 0, 94% 58%, 82% 96%, 18% 96%, 6% 58%);
  box-shadow:
    0 16px 34px rgba(17, 117, 196, 0.24),
    inset 0 -10px 28px rgba(93, 244, 255, 0.14);
}

.screen:not(.work-screen) .title-wrap::after {
  content: "";
  position: absolute;
  left: 178px;
  right: 178px;
  bottom: 5px;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(93, 244, 255, 0.9), transparent);
  box-shadow: 0 0 18px rgba(93, 244, 255, 0.7);
}

.screen:not(.work-screen) .title-wrap h1 {
  position: relative;
  z-index: 3;
  width: 760px;
  height: 58px;
  margin: 0 auto;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  box-shadow: none;
}

.screen:not(.work-screen) .title-wrap h1 span {
  flex: 0 0 auto;
}

.screen:not(.work-screen) .title-wing {
  position: absolute;
  top: 34px;
  z-index: 1;
  width: 168px;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(93, 244, 255, 0.72));
  box-shadow: 0 0 12px rgba(93, 244, 255, 0.32);
}

.screen:not(.work-screen) .title-wing.left {
  left: 0;
  transform: none;
}

.screen:not(.work-screen) .title-wing.right {
  right: 0;
  transform: rotate(180deg);
}

/* Stable top header material based on the approved reference. */
.screen:not(.work-screen) .topbar {
  height: 86px;
  grid-template-columns: minmax(360px, 1fr) 820px minmax(360px, 1fr);
  align-items: start;
  padding: 0 34px;
  column-gap: 14px;
}

.screen:not(.work-screen) .topbar::before {
  left: 0;
  right: 0;
  top: 0;
  height: 86px;
  background:
    linear-gradient(180deg, rgba(1, 8, 18, 0.18) 0%, rgba(1, 8, 18, 0) 68%),
    url("./assets/hud-header-material-v2.png") center top / 100% 64px no-repeat,
    linear-gradient(180deg, rgba(2, 9, 22, 0.88) 0%, rgba(3, 18, 38, 0.56) 64px, rgba(3, 18, 38, 0) 100%);
  clip-path: none;
  box-shadow: none;
}

.screen:not(.work-screen) .topbar::after {
  left: 520px;
  right: 520px;
  top: 64px;
  bottom: auto;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(93, 244, 255, 0.92), transparent);
  box-shadow:
    0 0 14px rgba(93, 244, 255, 0.7),
    0 10px 24px rgba(30, 145, 255, 0.24);
}

.screen:not(.work-screen) .weather-strip,
.screen:not(.work-screen) .sys-strip {
  margin-top: 6px;
}

.screen:not(.work-screen) .weather-item,
.screen:not(.work-screen) .sys-strip span {
  height: 28px;
  border-color: rgba(105, 197, 255, 0.16);
  background: rgba(5, 19, 38, 0.44);
}

.screen:not(.work-screen) .title-wrap {
  width: 820px;
  height: 74px;
}

.screen:not(.work-screen) .title-wrap::before,
.screen:not(.work-screen) .title-wrap::after {
  display: none;
}

.screen:not(.work-screen) .title-wrap h1 {
  width: 820px;
  height: 64px;
  padding: 0 32px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: visible;
  color: #dff8ff;
  font-size: 30px;
  line-height: 1;
  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);
}

.screen:not(.work-screen) .title-wrap h1 span {
  color: rgba(216, 239, 255, 0.9);
  font-size: 22px;
  text-shadow:
    0 0 8px rgba(142, 224, 255, 0.54),
    0 0 20px rgba(37, 139, 255, 0.28);
}

.screen:not(.work-screen) .title-wrap h1::before,
.screen:not(.work-screen) .title-wrap h1::after {
  display: none;
}

.screen:not(.work-screen) .title-wing {
  display: none;
}

/* Index V2: smoke-blue glass panels matched to the visual reference. */
.screen:not(.work-screen) {
  --hud-cyan: #68d8e8;
  --hud-blue: #68aedd;
  --hud-mint: #55d8b3;
  --hud-amber: #d69a4c;
  --hud-amber-soft: rgba(214, 154, 76, 0.3);
  --hud-red-soft: #c86f5e;
  --hud-panel-face: rgba(34, 55, 76, 0.58);
  --hud-panel-deep: rgba(9, 25, 43, 0.48);
  --hud-panel-line: rgba(176, 215, 238, 0.26);
  --hud-panel-line-soft: rgba(156, 206, 235, 0.14);
  background: #071426;
  box-shadow: inset 0 0 90px rgba(11, 28, 49, 0.42);
}

.screen:not(.work-screen)::before {
  filter: saturate(0.94) contrast(1.04) brightness(0.98);
}

.screen:not(.work-screen)::after {
  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;
}

.screen:not(.work-screen) .weather-item,
.screen:not(.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);
}

.screen:not(.work-screen) .panel {
  overflow: hidden;
  border-color: var(--hud-panel-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);
}

.screen:not(.work-screen) .panel::before {
  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%);
}

.screen:not(.work-screen) .panel::after {
  left: 12px;
  right: 12px;
  background: linear-gradient(90deg, transparent, rgba(204, 232, 246, 0.64), transparent);
  box-shadow: 0 0 13px rgba(142, 199, 230, 0.34);
}

.screen:not(.work-screen) .panel-title {
  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);
}

.screen:not(.work-screen) .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);
}

.screen:not(.work-screen) .panel-title a {
  color: rgba(213, 231, 240, 0.66);
}

.screen:not(.work-screen) .situation-main img {
  border-color: rgba(184, 216, 236, 0.38);
  box-shadow:
    0 0 20px rgba(104, 174, 221, 0.15),
    inset 0 0 12px rgba(255, 255, 255, 0.08);
}

.screen:not(.work-screen) .situation-score span,
.screen:not(.work-screen) .asset-summary span,
.screen:not(.work-screen) .asset-summary em,
.screen:not(.work-screen) .resource-card span,
.screen:not(.work-screen) .metric-strip span,
.screen:not(.work-screen) .forecast-metrics span,
.screen:not(.work-screen) .forecast-row time,
.screen:not(.work-screen) .asset-row em {
  color: rgba(198, 217, 228, 0.66);
}

.screen:not(.work-screen) .situation-score em,
.screen:not(.work-screen) .task-row,
.screen:not(.work-screen) .forecast-row,
.screen:not(.work-screen) .asset-row,
.screen:not(.work-screen) .topic-card span {
  color: rgba(231, 241, 246, 0.82);
}

.screen:not(.work-screen) .situation-score strong,
.screen:not(.work-screen) .asset-summary strong,
.screen:not(.work-screen) .resource-card b,
.screen:not(.work-screen) .metric-strip b,
.screen:not(.work-screen) .forecast-metrics b,
.screen:not(.work-screen) .overview-command b {
  color: var(--hud-cyan);
  text-shadow:
    0 0 9px rgba(104, 216, 232, 0.58),
    0 0 22px rgba(104, 174, 221, 0.28);
}

.screen:not(.work-screen) .priority-ribbon span,
.screen:not(.work-screen) .metric-strip,
.screen:not(.work-screen) .asset-footprint span,
.screen:not(.work-screen) .forecast-metrics article,
.screen:not(.work-screen) .topic-card {
  border-color: rgba(178, 214, 236, 0.18);
  background:
    radial-gradient(ellipse at center top, rgba(230, 242, 249, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(69, 94, 116, 0.38), rgba(19, 40, 61, 0.34)),
    rgba(11, 31, 51, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 18px rgba(104, 174, 221, 0.045);
}

.screen:not(.work-screen) .resource-card,
.screen:not(.work-screen) .asset-row,
.screen:not(.work-screen) .forecast-row {
  border-color: rgba(184, 218, 238, 0.12);
}

.screen:not(.work-screen) .resource-card i,
.screen:not(.work-screen) .topic-card i,
.screen:not(.work-screen) .asset-row i,
.screen:not(.work-screen) .panel-title i {
  color: #8ed7ee;
  filter: drop-shadow(0 0 8px rgba(104, 216, 232, 0.46));
}

.screen:not(.work-screen) .priority-ribbon b,
.screen:not(.work-screen) .task-row time,
.screen:not(.work-screen) .map-priority-stack em {
  color: var(--hud-amber);
  text-shadow: 0 0 10px rgba(214, 154, 76, 0.34);
}

.screen:not(.work-screen) .priority-ribbon span {
  background:
    linear-gradient(90deg, rgba(170, 111, 48, 0.24), rgba(44, 59, 73, 0.24)),
    rgba(12, 32, 52, 0.26);
  border-color: rgba(214, 154, 76, 0.22);
}

.screen:not(.work-screen) .task-list {
  padding-top: 8px;
}

.screen:not(.work-screen) .task-row {
  height: 32px;
  margin-bottom: 7px;
  padding: 0 7px;
  border: 1px solid rgba(214, 154, 76, 0.16);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(183, 124, 55, 0.26), rgba(45, 59, 73, 0.34) 42%, rgba(21, 39, 58, 0.22)),
    rgba(10, 27, 47, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 234, 198, 0.06),
    0 0 12px rgba(214, 154, 76, 0.06);
}

.screen:not(.work-screen) .task-row:first-child {
  border-top: 1px solid rgba(214, 154, 76, 0.26);
  background:
    linear-gradient(90deg, rgba(214, 154, 76, 0.42), rgba(82, 75, 67, 0.38) 46%, rgba(24, 42, 60, 0.24)),
    rgba(10, 27, 47, 0.2);
}

.screen:not(.work-screen) .task-row time {
  border-color: rgba(234, 181, 99, 0.5);
  background: rgba(145, 91, 36, 0.3);
}

.screen:not(.work-screen) .task-state {
  border: 1px solid currentColor;
  background: rgba(16, 35, 55, 0.28);
}

.screen:not(.work-screen) .task-state.running,
.screen:not(.work-screen) .status.base {
  color: #8dc5ed;
  background: rgba(67, 111, 148, 0.22);
}

.screen:not(.work-screen) .task-state.pending,
.screen:not(.work-screen) .status.warn {
  color: #d9a458;
  background: rgba(154, 100, 39, 0.24);
}

.screen:not(.work-screen) .task-state.done,
.screen:not(.work-screen) .status.good {
  color: #62ddb3;
  background: rgba(45, 140, 102, 0.2);
}

.screen:not(.work-screen) .asset-footprint b {
  color: var(--hud-cyan);
}

.screen:not(.work-screen) .forecast-chart {
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 58% 70%, rgba(85, 216, 179, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(41, 67, 86, 0.24), rgba(12, 29, 48, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -28px 44px rgba(85, 216, 179, 0.05);
}

.screen:not(.work-screen) .forecast-row b {
  color: #77d6e6;
}

.screen:not(.work-screen) .forecast-row:first-child b {
  color: #55d8b3;
}

.screen:not(.work-screen) .map-tabs,
.screen:not(.work-screen) .dimension-toggle,
.screen:not(.work-screen) .map-toolbar,
.screen:not(.work-screen) .map-legend,
.screen:not(.work-screen) .overview-command,
.screen:not(.work-screen) .map-priority-stack article {
  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);
}

.screen:not(.work-screen) .map-tabs button,
.screen:not(.work-screen) .dimension-toggle button {
  color: rgba(226, 238, 246, 0.72);
}

.screen:not(.work-screen) .map-tabs button.active,
.screen:not(.work-screen) .dimension-toggle button.active {
  color: #8ff4ee;
  background:
    radial-gradient(ellipse at center bottom, rgba(85, 216, 179, 0.24), 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);
}

.screen:not(.work-screen) .dimension-toggle button.active {
  color: var(--hud-cyan);
}

.screen:not(.work-screen) .map-toolbar button {
  color: rgba(224, 239, 247, 0.88);
  border-bottom-color: rgba(184, 218, 238, 0.1);
}

.screen:not(.work-screen) .overview-command {
  background:
    radial-gradient(ellipse at 80% 42%, rgba(104, 216, 232, 0.12), transparent 42%),
    linear-gradient(120deg, rgba(41, 69, 92, 0.66), rgba(10, 28, 48, 0.44)),
    rgba(10, 27, 47, 0.28);
}

.screen:not(.work-screen) .overview-command div {
  border-color: rgba(104, 216, 232, 0.38);
  background:
    linear-gradient(rgba(18, 38, 56, 0.82), rgba(18, 38, 56, 0.82)) padding-box,
    conic-gradient(var(--hud-cyan) 0 86%, rgba(114, 151, 178, 0.18) 86% 100%) border-box;
  box-shadow: 0 0 22px rgba(104, 216, 232, 0.2);
}

.screen:not(.work-screen) .map-priority-stack article.warn {
  border-color: rgba(214, 154, 76, 0.38);
}

.screen:not(.work-screen) .map-priority-stack article.hot {
  border-color: rgba(200, 111, 94, 0.34);
}

.screen:not(.work-screen) .map-priority-stack b {
  color: #77d6e6;
}

/* Index V2.1: clean map test backgrounds, with central controls removed. */
.screen:not(.work-screen) {
  --index-map-bg: url("./assets/map-bg-overview.png");
  --index-map-position: center center;
  --index-map-filter: saturate(0.94) contrast(1.04) brightness(0.95);
}

.screen:not(.work-screen)[data-map-bg="overview"] {
  --index-map-bg: url("./assets/map-bg-overview.png");
  --index-map-position: center center;
  --index-map-filter: saturate(0.92) contrast(1.05) brightness(0.9);
}

.screen:not(.work-screen)[data-map-bg="perspective"] {
  --index-map-bg: url("./assets/map-bg-perspective.png");
  --index-map-position: center center;
  --index-map-filter: saturate(0.9) contrast(1.05) brightness(0.96);
}

.screen:not(.work-screen)::before {
  background: var(--index-map-bg) var(--index-map-position) / cover no-repeat;
  filter: var(--index-map-filter);
  transform: scale(1.006);
}

.screen:not(.work-screen)::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 18, 0.48), transparent 12%, transparent 88%, rgba(2, 8, 18, 0.48)),
    linear-gradient(180deg, rgba(2, 8, 18, 0.34), transparent 14%, transparent 78%, rgba(2, 8, 18, 0.36)),
    radial-gradient(circle, rgba(190, 225, 238, 0.12) 0 1px, transparent 1.6px) 0 0 / 38px 38px;
  opacity: 0.62;
}

.screen:not(.work-screen) .map-card::before,
.screen:not(.work-screen) .map-card::after {
  display: none;
}

.screen:not(.work-screen) .map-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.screen:not(.work-screen) .map-tabs,
.screen:not(.work-screen) .dimension-toggle,
.screen:not(.work-screen) .compass,
.screen:not(.work-screen) .map-toolbar,
.screen:not(.work-screen) .overview-command,
.screen:not(.work-screen) .map-priority-stack {
  display: none !important;
  pointer-events: none;
}

/* Index V2.2: keep the risk panel list clear of the bottom footprint. */
.screen:not(.work-screen) .asset-chart-row {
  height: 104px;
  padding: 8px 16px 0;
}

.screen:not(.work-screen) .asset-chart {
  width: 104px;
  height: 98px;
}

.screen:not(.work-screen) .asset-list {
  padding: 8px 14px 58px;
}

.screen:not(.work-screen) .asset-row {
  height: 37px;
}

.screen:not(.work-screen) .asset-footprint {
  bottom: 12px;
}

.screen:not(.work-screen) .asset-footprint span {
  height: 42px;
  gap: 2px;
}

/* Index V2.3: make the cockpit metric tray cleaner and less see-through. */
.screen:not(.work-screen) .project-panel {
  height: 252px;
}

.screen:not(.work-screen) .ledger-panel {
  top: 266px;
}

.screen:not(.work-screen) .asset-panel {
  top: 486px;
}

.screen:not(.work-screen) .metric-strip {
  margin: 10px 12px 0;
  overflow: hidden;
  border-radius: 6px;
  border-color: rgba(160, 217, 243, 0.28);
  background:
    radial-gradient(ellipse at center top, rgba(222, 242, 250, 0.1), transparent 68%),
    linear-gradient(180deg, rgba(43, 70, 92, 0.88), rgba(10, 31, 52, 0.82)),
    rgba(7, 24, 43, 0.9);
  box-shadow:
    0 8px 18px rgba(0, 8, 20, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -16px 22px rgba(4, 15, 29, 0.16);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.screen:not(.work-screen) .metric-strip article {
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 4px 3px;
  border-right-color: rgba(180, 221, 243, 0.16);
  background:
    linear-gradient(180deg, rgba(153, 201, 228, 0.08), rgba(16, 39, 61, 0.03));
}

.screen:not(.work-screen) .metric-strip i {
  height: 14px;
  line-height: 1;
  color: #a4e6f4;
  filter: drop-shadow(0 0 8px rgba(104, 216, 232, 0.42));
}

.screen:not(.work-screen) .metric-strip span {
  margin-top: 0;
  line-height: 1.15;
}

.screen:not(.work-screen) .metric-strip b {
  margin-top: 0;
  line-height: 1.1;
}

/* Unified V3: top6 header and restrained blue glass, shared with work pages. */
.screen:not(.work-screen) {
  --hud-cyan: #2de8ff;
  --hud-blue: #4eabff;
  --hud-amber: #f1a341;
}

.screen:not(.work-screen) .topbar {
  height: 52px;
  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;
}

.screen:not(.work-screen) .topbar::before,
.screen:not(.work-screen) .topbar::after {
  display: none;
}

.screen:not(.work-screen) .weather-strip,
.screen:not(.work-screen) .sys-strip {
  height: 28px;
  align-items: center;
  gap: 8px;
  padding-top: 0;
  transform: translateY(-4px);
  color: rgba(226, 245, 255, 0.9);
  font-size: 13px;
}

.screen:not(.work-screen) .sys-strip {
  justify-content: flex-end;
}

.screen:not(.work-screen) .weather-item,
.screen:not(.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);
}

.screen:not(.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;
}

.screen:not(.work-screen) .title-wing,
.screen:not(.work-screen) .title-wrap::before,
.screen:not(.work-screen) .title-wrap::after {
  display: none;
}

.screen:not(.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);
}

.screen:not(.work-screen) .title-wrap h1::before,
.screen:not(.work-screen) .title-wrap h1::after {
  display: none;
}

.screen:not(.work-screen) .title-wrap h1 span {
  color: rgba(216, 239, 255, 0.92);
  font-size: 18px;
}

.screen:not(.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);
}

/* Page switcher: shared navigation for the overview and all topic screens. */
.page-switcher {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 18px;
  width: 36%;
  max-width: 660px;
  min-width: 500px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
  backdrop-filter: blur(26px) saturate(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(1.08);
}

.page-switcher::before,
.page-switcher::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-switcher::before {
  inset: 0;
  z-index: -2;
  border: 1px solid var(--hud-panel-line);
  border-radius: 8px;
  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);
  animation: navGlow 3.2s ease-in-out infinite;
}

.page-switcher::after {
  left: 50%;
  bottom: -10px;
  z-index: -1;
  width: 46px;
  height: 12px;
  border-radius: 0 0 6px 6px;
  background:
    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);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 4px 7px rgba(7, 18, 32, 0.46));
  transform: translateX(-50%);
}

.page-switch {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 0 12px 2px;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(222, 239, 247, 0.74);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  clip-path: none;
  box-shadow: none;
  transition:
    color 0.16s ease,
    font-size 0.16s ease,
    text-shadow 0.16s ease;
}

.page-switch::before,
.page-switch::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-switch::before {
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(178, 212, 232, 0.16), transparent);
  opacity: 0.52;
}

.page-switch::after {
  left: 50%;
  bottom: 7px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(70, 209, 232, 0), rgba(132, 235, 246, 0.8), rgba(213, 251, 255, 0.78), rgba(70, 209, 232, 0));
  box-shadow: 0 0 8px rgba(100, 219, 232, 0);
  transform: translateX(-50%);
  transition:
    width 0.16s ease,
    box-shadow 0.16s ease;
}

.page-switch:first-child::before {
  opacity: 0;
}

.page-switch:hover,
.page-switch:focus-visible {
  color: rgba(238, 250, 255, 0.94);
  text-shadow:
    0 0 7px rgba(180, 242, 255, 0.28),
    0 0 10px rgba(70, 170, 190, 0.16);
}

.page-switch.active {
  z-index: 1;
  background: transparent;
  color: #eefcff;
  font-size: 16px;
  font-weight: 900;
  text-shadow:
    0 0 5px rgba(235, 255, 255, 0.56),
    0 0 12px rgba(97, 221, 238, 0.34);
}

.page-switch.active::after {
  width: 60px;
  box-shadow:
    0 0 8px rgba(124, 231, 244, 0.38),
    0 0 13px rgba(78, 172, 190, 0.24);
}

@keyframes navGlow {
  0%,
  100% {
    opacity: 0.92;
  }
  50% {
    opacity: 1;
  }
}

.screen:not(.work-screen) .left-column,
.screen:not(.work-screen) .right-column {
  top: 64px;
  height: 854px;
}

.screen:not(.work-screen) .map-shell {
  top: 82px;
  height: 836px;
}

.screen:not(.work-screen) .project-panel {
  height: 246px;
}

.screen:not(.work-screen) .ledger-panel {
  top: 260px;
  height: 204px;
}

.screen:not(.work-screen) .asset-panel {
  top: 478px;
  height: 376px;
}

.screen:not(.work-screen) .today-panel {
  height: 244px;
}

.screen:not(.work-screen) .topic-panel {
  top: 258px;
  height: 220px;
}

.screen:not(.work-screen) .forecast-panel {
  top: 492px;
  height: 362px;
}

.screen:not(.work-screen) .panel-title::before {
  display: none;
}