:root {
  --bg: #020812;
  --panel: rgba(4, 22, 39, 0.72);
  --cyan: #55e7ff;
  --cyan-soft: rgba(85, 231, 255, 0.36);
  --blue: #1677ff;
  --green: #27ffc4;
  --warning: #ffd166;
  --danger: #ff4d6d;
  --text: #d9f7ff;
  --muted: #6fa7ba;
  --line: rgba(85, 231, 255, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at 20% 20%, rgba(32, 145, 255, 0.16), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(39, 255, 196, 0.10), transparent 30%),
    linear-gradient(135deg, #020812 0%, #04111e 45%, #01040a 100%);
  color: var(--text);
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(85, 231, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 231, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
  z-index: 0;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 330px 1fr 330px;
  grid-template-rows: 82px 1fr 130px;
  gap: 16px;
  padding: 16px;
  z-index: 1;
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(4, 21, 38, 0.76), rgba(3, 10, 20, 0.50));
  box-shadow: 0 0 32px rgba(36, 197, 255, 0.10), inset 0 0 28px rgba(85, 231, 255, 0.035);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 10;
}

.panel::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.panel::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
}

header {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}

.brand { display: flex; align-items: center; gap: 16px; }

.brand-mark {
  width: 48px;
  height: 48px;
  border: 1px solid var(--cyan);
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--green);
  background: radial-gradient(circle, rgba(39, 255, 196, 0.22), rgba(39, 255, 196, 0.02));
  box-shadow: 0 0 22px rgba(39, 255, 196, 0.32);
  transform: rotate(45deg);
}

.brand-mark span { transform: rotate(-45deg); }

h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #effcff;
  text-shadow: 0 0 16px rgba(85, 231, 255, 0.42);
}

.subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.header-stats { display: flex; gap: 12px; }

.stat-pill {
  min-width: 128px;
  border: 1px solid rgba(85, 231, 255, 0.26);
  background: rgba(2, 12, 22, 0.60);
  padding: 10px 12px;
}

.stat-pill small, .metric small, .system-card small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.stat-pill strong {
  display: block;
  margin-top: 5px;
  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
}

#leftPanel,
#rightPanel {
  padding: 18px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

#leftPanel { grid-column: 1; grid-row: 2; }
#rightPanel { grid-column: 3; grid-row: 2; }

#viewportPanel {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  min-width: 0;
  min-height: 0;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}

#terrainCanvas, #map2d {
  width: 100%;
  height: 100%;
  display: block;
}

#terrainCanvas { cursor: grab; }
#terrainCanvas:active { cursor: grabbing; }
#map2d { display: none; z-index: 2; position: absolute; inset: 0; }

.hud-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(85, 231, 255, 0.035), transparent 13%, transparent 87%, rgba(85, 231, 255, 0.035)),
    linear-gradient(0deg, rgba(85, 231, 255, 0.035), transparent 13%, transparent 87%, rgba(85, 231, 255, 0.035));
  z-index: 3;
}

.map-title {
  position: absolute;
  top: 18px;
  left: 20px;
  padding: 12px 14px;
  border-left: 2px solid var(--green);
  background: rgba(1, 10, 18, 0.68);
  pointer-events: none;
  z-index: 4;
}

.map-title strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
}

.map-title span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.view-help, #loadingOverlay {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(85, 231, 255, 0.24);
  background: rgba(1, 10, 18, 0.68);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 4;
}

#loadingOverlay {
  display: none;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  color: #ffffff;
  border-color: rgba(39, 255, 196, 0.5);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
  color: #f2fdff;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-title.gap { margin-top: 20px; }

.section-title::after {
  content: "";
  height: 1px;
  flex: 1;
  margin-left: 12px;
  background: linear-gradient(90deg, var(--cyan-soft), transparent);
}

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }

.metric {
  border: 1px solid rgba(85, 231, 255, 0.18);
  background: rgba(4, 19, 32, 0.55);
  padding: 12px;
}

.metric strong {
  display: block;
  margin-top: 8px;
  color: var(--cyan);
  font-size: 22px;
  line-height: 1;
}

.feed { display: grid; gap: 9px; }

.feed-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(85, 231, 255, 0.14);
  background: rgba(2, 11, 20, 0.48);
  font-size: 12px;
}

.feed-row .time { color: var(--muted); font-variant-numeric: tabular-nums; }
.feed-row .name { color: #eaffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .status { color: var(--green); font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status.warn { color: var(--warning); }
.status.danger { color: var(--danger); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

input {
  width: 100%;
  margin-top: 6px;
  border: 1px solid rgba(85, 231, 255, 0.24);
  background: rgba(2, 12, 22, 0.82);
  color: var(--text);
  padding: 10px;
  outline: none;
}

input:focus { border-color: var(--green); box-shadow: 0 0 16px rgba(39, 255, 196, 0.16); }

.controls { display: grid; gap: 10px; margin-top: 16px; }

button {
  border: 1px solid rgba(85, 231, 255, 0.34);
  background: rgba(5, 28, 48, 0.74);
  color: var(--text);
  padding: 12px 14px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 160ms ease;
}

button:hover {
  border-color: var(--green);
  color: #ffffff;
  box-shadow: 0 0 22px rgba(39, 255, 196, 0.25);
  transform: translateY(-1px);
}

.bottomPanel {
  grid-column: 1 / 4;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

.system-card {
  padding: 16px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.system-card strong {
  display: block;
  margin-top: 10px;
  color: #ffffff;
  font-size: 20px;
}

.system-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
  animation: dotPulse 1.4s infinite ease-in-out;
}

.leaflet-container { background: #061424; }
.leaflet-control-attribution { font-size: 10px; }

@keyframes dotPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.35); opacity: 1; }
}

@media (max-width: 1100px) {
  body { overflow: auto; }
  #app {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 620px auto auto auto;
  }
  header, #viewportPanel, #leftPanel, #rightPanel, .bottomPanel { grid-column: 1; }
  header { grid-row: 1; align-items: flex-start; gap: 14px; flex-direction: column; }
  #viewportPanel { grid-row: 2; }
  #leftPanel { grid-row: 3; }
  #rightPanel { grid-row: 4; }
  .bottomPanel { grid-row: 5; grid-template-columns: 1fr; }
  .header-stats { flex-wrap: wrap; }
}

#dashboardView {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 28px;
  overflow: auto;
  background: radial-gradient(circle at 50% 0%, rgba(85, 231, 255, 0.12), rgba(2, 8, 18, 0.88) 42%, rgba(1, 4, 10, 0.96) 100%);
}

.dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(85, 231, 255, 0.24);
  background: rgba(2, 12, 22, 0.72);
}

.dashboard-head strong {
  display: block;
  color: #fff;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dashboard-head span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

#containerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.container-tile {
  position: relative;
  min-height: 170px;
  border: 1px solid rgba(85, 231, 255, 0.22);
  background: linear-gradient(145deg, rgba(5, 30, 52, 0.82), rgba(2, 9, 18, 0.72));
  padding: 16px;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.container-tile:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 0 26px rgba(39, 255, 196, 0.20);
}

.container-tile::after {
  content: '';
  position: absolute;
  width: 118px;
  height: 118px;
  right: -34px;
  bottom: -34px;
  border: 2px solid var(--tile-colour, #55e7ff);
  border-radius: 50%;
  box-shadow: 0 0 34px var(--tile-colour-soft, rgba(85, 231, 255, 0.32)), inset 0 0 34px var(--tile-colour-soft, rgba(85, 231, 255, 0.12));
  opacity: 0.72;
}

.container-tile small {
  display: block;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
}

.container-tile strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 17px;
  line-height: 1.25;
}

.tile-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
  position: relative;
  z-index: 1;
}

.tile-meta div {
  border: 1px solid rgba(85, 231, 255, 0.14);
  background: rgba(1, 8, 16, 0.44);
  padding: 8px;
  font-size: 12px;
  color: var(--cyan);
}

.device-panel {
  border: 1px solid rgba(85, 231, 255, 0.16);
  background: rgba(2, 11, 20, 0.48);
  padding: 12px;
  min-height: 150px;
}

.muted-block { color: var(--muted); font-size: 12px; line-height: 1.55; }

.device-title { color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.device-subtitle { color: var(--muted); margin-top: 5px; font-size: 12px; }
.device-data { margin-top: 12px; display: grid; gap: 8px; }
.device-data-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; border-bottom: 1px solid rgba(85, 231, 255, 0.10); padding-bottom: 6px; }
.device-data-row span:first-child { color: var(--muted); }
.device-data-row span:last-child { color: var(--cyan); text-align: right; overflow-wrap: anywhere; }

#terrainCanvas.gs-hidden, #map2d.gs-hidden { display: none !important; }

.scene-state {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  border: 1px solid rgba(85, 231, 255, 0.28);
  background: rgba(3, 15, 26, 0.58);
}

.scene-ready { color: var(--green); box-shadow: 0 0 14px rgba(39, 255, 196, 0.28); }
.scene-processing { color: var(--warning); box-shadow: 0 0 14px rgba(255, 209, 102, 0.24); }
.scene-queued { color: var(--cyan); }
.scene-failed { color: var(--danger); box-shadow: 0 0 14px rgba(255, 77, 109, 0.24); }
.scene-not_queued { color: var(--muted); }

.container-tile[data-scene-state="ready"]::before {
  content: "READY";
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--green);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-shadow: 0 0 12px rgba(39, 255, 196, 0.55);
}

.container-tile[data-scene-state="processing"]::before {
  content: "BUILDING";
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--warning);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.5);
}

.container-tile[data-scene-state="queued"]::before {
  content: "QUEUED";
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.form-grid.single { grid-template-columns: 1fr; }
.controls.two-col { grid-template-columns: 1fr 1fr; }

.scene-summary-card {
  margin-top: 16px;
  border: 1px solid rgba(85, 231, 255, 0.22);
  background: radial-gradient(circle at top left, rgba(39, 255, 196, 0.12), rgba(2, 11, 20, 0.48));
  padding: 14px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.scene-summary-card small { display:block; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.scene-summary-card strong { display:block; margin-top:8px; color:#fff; font-size:15px; line-height:1.35; }
.scene-summary-card span { display:block; margin-top:7px; color: var(--muted); font-size:12px; line-height:1.45; }

.scene-container-list { display: grid; gap: 9px; max-height: 34vh; overflow: auto; padding-right: 4px; }
.scene-container-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(85, 231, 255, 0.15);
  background: linear-gradient(135deg, rgba(2, 14, 26, 0.72), rgba(1, 8, 16, 0.46));
}
.scene-container-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--item-colour, var(--cyan));
  box-shadow: 0 0 16px var(--item-colour, var(--cyan));
}
.scene-container-item.active { border-color: rgba(39, 255, 196, 0.52); box-shadow: inset 0 0 24px rgba(39, 255, 196, 0.06); }
.scene-container-item.hidden { opacity: .52; }
.visibility-toggle { grid-column: 1 / 3; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.visibility-toggle input { width: auto; margin: 0; accent-color: var(--green); }
.container-nav-main {
  all: unset;
  cursor: pointer;
  min-width: 0;
}
.container-nav-main strong { display: block; color: #fff; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.container-nav-main span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-action {
  align-self: end;
  padding: 7px 9px;
  font-size: 10px;
  letter-spacing: .1em;
}
.collision-chip {
  display: inline-block !important;
  margin-top: 6px !important;
  color: var(--warning) !important;
  font-size: 10px !important;
  white-space: normal !important;
}

.advanced-box {
  margin-top: 18px;
  border: 1px solid rgba(85, 231, 255, 0.15);
  background: rgba(2, 11, 20, 0.38);
  padding: 10px;
}
.advanced-box summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.advanced-box[open] summary { margin-bottom: 12px; color: var(--cyan); }

.chart-grid { display: grid; gap: 10px; margin-top: 10px; }
.chart-card {
  border: 1px solid rgba(85, 231, 255, 0.16);
  background: rgba(1, 8, 16, 0.54);
  padding: 10px;
}
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.chart-head span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-head strong { color: var(--green); font-size: 14px; }
.sparkline { display: block; width: 100%; height: 76px; margin-top: 8px; overflow: visible; }
.sparkline line { stroke: rgba(85, 231, 255, 0.12); stroke-width: 1; }
.sparkline polyline { fill: none; stroke: var(--cyan); stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(85,231,255,.65)); }
.chart-range { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 4px; }

.chart-placeholder .muted-block { margin-top: 10px; }

/* v0.3.1 product dashboard refinements */
#leftPanel, #rightPanel { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(85,231,255,.36) rgba(2,11,20,.35); }
#rightPanel { display: flex; flex-direction: column; min-height: 0; }
#rightPanel::-webkit-scrollbar, #leftPanel::-webkit-scrollbar, .device-panel::-webkit-scrollbar, .scene-container-list::-webkit-scrollbar { width: 8px; }
#rightPanel::-webkit-scrollbar-thumb, #leftPanel::-webkit-scrollbar-thumb, .device-panel::-webkit-scrollbar-thumb, .scene-container-list::-webkit-scrollbar-thumb { background: rgba(85,231,255,.32); border-radius: 20px; }
.device-panel { flex: 1; min-height: 0; max-height: calc(100vh - 250px); overflow-y: auto; padding: 14px; }

.map-legend {
  position: absolute;
  left: 20px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 4;
  pointer-events: none;
}
.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(85,231,255,.22);
  background: rgba(1,10,18,.70);
  color: #c9f8ff;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.map-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.legend-area { border: 2px solid var(--cyan); box-shadow: 0 0 13px var(--cyan); background: rgba(85,231,255,.16); }
.legend-device { width: 8px !important; height: 18px !important; border-radius: 99px !important; background: var(--green); box-shadow: 0 0 13px var(--green); }
.legend-alert { background: var(--danger); box-shadow: 0 0 13px var(--danger); }
.view-help { display: none; }

.empty-device-state {
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px;
  color: var(--muted);
}
.empty-device-state .empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(85,231,255,.32);
  color: var(--cyan);
  font-size: 30px;
  box-shadow: inset 0 0 26px rgba(85,231,255,.10), 0 0 24px rgba(85,231,255,.10);
}
.empty-device-state strong { color: #fff; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }
.empty-device-state span { font-size: 12px; line-height: 1.55; }

.area-summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.area-summary-strip div { border: 1px solid rgba(85,231,255,.14); background: rgba(1,8,16,.48); padding: 8px; }
.area-summary-strip small { color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.area-summary-strip strong { display: block; margin-top: 5px; color: #fff; font-size: 15px; }

.container-tile { min-height: 190px; }
.container-tile .tile-type { color: var(--green); }
.tile-status-line { position: relative; z-index: 1; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #eaffff; font-size: 12px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tile-colour, var(--cyan)); box-shadow: 0 0 14px var(--tile-colour, var(--cyan)); }
.tile-meta { grid-template-columns: repeat(3, 1fr); }
.tile-meta div { text-align: center; }
.tile-meta strong { margin: 3px 0 0; color: #fff; font-size: 16px; }

.scene-container-item { grid-template-columns: 30px 1fr auto; align-items: center; padding: 11px 10px; }
.visibility-toggle { grid-column: auto; justify-content: center; }
.visibility-toggle span { display: none; }
.container-nav-main strong::before { content: 'AREA '; color: var(--item-colour, var(--cyan)); font-size: 9px; letter-spacing: .12em; margin-right: 6px; }
.container-nav-main span { white-space: normal; line-height: 1.35; }
.mini-action { align-self: center; }
.collision-chip { padding: 3px 6px; border: 1px solid rgba(255,209,102,.25); background: rgba(255,209,102,.08); }

.device-hero {
  border: 1px solid rgba(85,231,255,.18);
  background: radial-gradient(circle at top left, rgba(39,255,196,.12), rgba(1,8,16,.56));
  padding: 14px;
  margin-bottom: 12px;
}
.device-hero-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.device-health-pill { padding: 5px 9px; border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; }
.device-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.device-metric-card { border: 1px solid rgba(85,231,255,.15); background: rgba(1,8,16,.50); padding: 10px; min-width: 0; }
.device-metric-card small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.device-metric-card strong { display: block; color: #fff; font-size: 17px; margin-top: 5px; overflow-wrap: anywhere; }
.device-action-copy { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 10px; }
.telemetry-section-title { margin: 15px 0 8px; color: #fff; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.telemetry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.telemetry-value { border: 1px solid rgba(85,231,255,.14); background: rgba(1,8,16,.46); padding: 9px; }
.telemetry-value span { display:block; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.telemetry-value strong { display:block; margin-top: 5px; color: var(--cyan); font-size: 14px; overflow-wrap: anywhere; }
.chart-card { background: linear-gradient(145deg, rgba(3,18,32,.72), rgba(1,8,16,.50)); }
.chart-head span { color: #dffbff; }
.chart-range { opacity: .86; }

/* v0.3.2 customer dashboard interaction refinements */
.marquee-wrap {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-text {
  display: inline-block;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.marquee-wrap:hover .marquee-text,
.scene-container-item.active .marquee-text {
  overflow: visible;
  text-overflow: clip;
  animation: gs-marquee 8s linear infinite;
}
@keyframes gs-marquee {
  0%, 14% { transform: translateX(0); }
  86%, 100% { transform: translateX(calc(-100% + 100px)); }
}

#rightPanel {
  transition: width .24s ease, transform .24s ease, box-shadow .24s ease;
  z-index: 12;
}
.panel-expand-btn {
  position: absolute;
  top: 14px;
  left: -14px;
  width: 28px;
  height: 54px;
  z-index: 30;
  border: 1px solid rgba(85,231,255,.42);
  background: rgba(1, 10, 18, .92);
  color: var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 18px rgba(85,231,255,.20);
  clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 calc(100% - 12px));
}
body.device-panel-expanded #app { grid-template-columns: 330px minmax(420px, 1fr) 560px; }
body.device-panel-expanded #rightPanel { box-shadow: 0 0 44px rgba(85,231,255,.18), inset 0 0 34px rgba(85,231,255,.05); }
body.device-panel-expanded .device-panel { max-height: calc(100vh - 220px); }
body.device-panel-expanded .device-metric-grid.key-grid { grid-template-columns: repeat(3, 1fr); }
body.device-panel-expanded .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.device-panel-expanded .sparkline { height: 105px; }

.scene-container-list { max-height: 47vh; }
.scene-container-item {
  grid-template-columns: 28px 26px minmax(0, 1fr) auto;
  row-gap: 8px;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.area-expand-toggle {
  all: unset;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--cyan);
  border: 1px solid rgba(85,231,255,.18);
  background: rgba(85,231,255,.04);
}
.container-nav-main { min-width: 0; }
.container-nav-main strong { min-width: 0; }
.container-nav-main strong::before { display: inline-block; }
.area-device-drawer {
  grid-column: 1 / 5;
  display: grid;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .24s ease, opacity .18s ease, transform .24s ease;
}
.area-device-drawer.open {
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
  padding-top: 4px;
}
.area-device-row {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(85,231,255,.12);
  background: rgba(1,8,16,.46);
  color: #eaffff;
}
.area-device-row:hover,
.area-device-row.selected {
  border-color: var(--device-colour, var(--cyan));
  background: radial-gradient(circle at left, color-mix(in srgb, var(--device-colour, var(--cyan)) 18%, transparent), rgba(1,8,16,.54));
  box-shadow: inset 0 0 18px rgba(85,231,255,.06);
}
.device-beam-dot {
  width: 7px;
  height: 18px;
  border-radius: 99px;
  background: var(--device-colour, var(--green));
  box-shadow: 0 0 12px var(--device-colour, var(--green));
}
.device-row-main { min-width: 0; font-size: 11px; color: #fff; }
.device-row-status { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--device-colour, var(--green)); }
.area-device-empty { padding: 8px; color: var(--muted); font-size: 11px; border: 1px dashed rgba(85,231,255,.14); }

.device-panel { scroll-behavior: smooth; }
.device-identity { min-width: 0; }
.device-title .marquee-wrap { color: inherit; }
.device-subtitle .marquee-wrap { color: var(--muted); }
.device-state-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.device-state-strip div {
  border: 1px solid rgba(85,231,255,.14);
  background: rgba(1,8,16,.48);
  padding: 10px;
}
.device-state-strip small { display:block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.device-state-strip strong { display:block; margin-top: 5px; color: #fff; font-size: 15px; }
.device-metric-grid.key-grid { grid-template-columns: 1fr 1fr; }
.more-telemetry {
  margin-top: 10px;
  border: 1px solid rgba(85,231,255,.12);
  background: rgba(1,8,16,.34);
  padding: 8px;
}
.more-telemetry summary {
  cursor: pointer;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.more-telemetry .telemetry-grid { margin-top: 8px; }

.help-button {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 8;
  padding: 10px 13px;
  border: 1px solid rgba(85,231,255,.36);
  background: rgba(1,10,18,.76);
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(85,231,255,.14);
}
.help-button:hover { background: rgba(39,255,196,.10); color: #fff; }
.help-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
}
.help-modal.open { display: flex; }
.help-card {
  width: min(760px, calc(100% - 56px));
  border: 1px solid rgba(85,231,255,.34);
  background: linear-gradient(145deg, rgba(3,18,32,.94), rgba(1,8,16,.88));
  box-shadow: 0 0 52px rgba(85,231,255,.18);
  padding: 24px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
.help-card h2 { margin: 0 0 8px; letter-spacing: .16em; text-transform: uppercase; }
.help-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-grid div { border: 1px solid rgba(85,231,255,.14); background: rgba(1,8,16,.45); padding: 13px; }
.help-grid strong { display: block; color: #fff; margin-bottom: 6px; }
.help-grid span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.help-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(85,231,255,.24);
  background: rgba(1,8,16,.65);
  color: var(--cyan);
  cursor: pointer;
  font-size: 22px;
}

@media (max-width: 1300px) {
  body.device-panel-expanded #app { grid-template-columns: 300px minmax(360px, 1fr) 500px; }
  .help-grid { grid-template-columns: 1fr; }
}

/* v0.3.3 polish: customer navigation, per-element marquee, overlay drawer */
.marquee-wrap {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-text {
  display: inline-block;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  vertical-align: bottom;
  transform: translateX(0);
  will-change: transform;
}
.marquee-wrap:not(.is-overflow) .marquee-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marquee-wrap.is-overflow .marquee-text {
  animation: gs-marquee-bounce var(--marquee-duration, 7s) ease-in-out infinite;
}
@keyframes gs-marquee-bounce {
  0%, 7% { transform: translateX(0); }
  45%, 56% { transform: translateX(calc(var(--marquee-distance, 60px) * -1)); }
  94%, 100% { transform: translateX(0); }
}

#leftPanel { display: flex; flex-direction: column; min-height: 0; }
#leftPanel .scene-container-list {
  flex: 1 1 auto;
  min-height: 170px;
  max-height: none;
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
}

.scene-container-item {
  display: block;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(3,18,32,.72), rgba(1,8,16,.48));
}
.scene-container-item::before { opacity: .5; }
.scene-container-item.active {
  border-color: var(--item-colour, var(--green));
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--item-colour, var(--green)) 12%, transparent), 0 0 18px rgba(85,231,255,.05);
}
.area-topline {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 9px;
  padding: 10px;
}
.visibility-toggle {
  display: grid;
  place-items: center;
  align-self: stretch;
  border: 1px solid rgba(85,231,255,.16);
  background: rgba(1,8,16,.46);
  cursor: pointer;
}
.visibility-toggle input {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(85,231,255,.45);
  border-radius: 3px;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 0 8px rgba(85,231,255,.08);
}
.visibility-toggle input:checked {
  background: var(--item-colour, var(--green));
  box-shadow: 0 0 13px var(--item-colour, var(--green));
}
.visibility-toggle span { display: none !important; }
.container-nav-main {
  all: unset;
  cursor: pointer;
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 2px 0;
}
.container-nav-main strong {
  display: block;
  min-width: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.container-nav-main strong::before { content: none !important; }
.container-nav-main span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.area-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: 72px;
}
.mini-action,
.area-expand-toggle {
  all: unset;
  cursor: pointer;
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(85,231,255,.20);
  background: rgba(85,231,255,.045);
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.area-expand-toggle b { color: #fff; font-size: 10px; line-height: 1; }
.mini-action:hover,
.area-expand-toggle:hover { border-color: rgba(39,255,196,.42); background: rgba(39,255,196,.08); color: #fff; }
.collision-chip {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  margin-top: 5px;
}
.area-device-drawer {
  margin: 0 10px 10px;
  display: grid;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height .28s ease, opacity .18s ease, transform .24s ease, padding .24s ease;
}
.area-device-drawer.open {
  max-height: 260px;
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  padding: 6px 3px 2px 0;
}
.area-device-drawer::-webkit-scrollbar { width: 7px; }
.area-device-drawer::-webkit-scrollbar-thumb { background: rgba(85,231,255,.30); border-radius: 20px; }
.area-device-row {
  border-radius: 0;
  min-width: 0;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.area-device-row:hover { transform: translateX(2px); }
.device-row-main { min-width: 0; overflow: hidden; }
.device-row-status { white-space: nowrap; }

#rightPanel {
  transition: transform .24s ease, width .24s ease, box-shadow .24s ease;
}
body.device-panel-expanded #app {
  grid-template-columns: 330px minmax(420px, 1fr) 360px !important;
}
body.device-panel-expanded #rightPanel {
  position: fixed;
  top: 96px;
  right: 18px;
  bottom: 88px;
  width: min(760px, calc(100vw - 390px));
  z-index: 70;
  box-shadow: 0 0 68px rgba(85,231,255,.22), inset 0 0 34px rgba(85,231,255,.05);
  backdrop-filter: blur(10px);
}
body.device-panel-expanded .panel-expand-btn { left: -16px; }
body.device-panel-expanded .device-panel { max-height: none; height: 100%; }
body.device-panel-expanded .device-metric-grid.key-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.device-panel-expanded .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.device-panel-expanded .sparkline { height: 116px; }
.device-panel { overflow-y: auto; overflow-x: hidden; }
.device-title, .device-subtitle, .device-metric-card small, .telemetry-value span { min-width: 0; }
.device-identity { min-width: 0; max-width: 100%; overflow: hidden; }

@media (max-width: 1300px) {
  body.device-panel-expanded #app { grid-template-columns: 300px minmax(360px, 1fr) 340px !important; }
  body.device-panel-expanded #rightPanel { width: min(660px, calc(100vw - 330px)); right: 12px; }
}

/* v0.3.3 final override: expanding panel must overlay, not resize the map grid */
body.device-panel-expanded #app { grid-template-columns: 330px 1fr 330px !important; }
@media (max-width: 1300px) {
  body.device-panel-expanded #app { grid-template-columns: 1fr !important; }
}

/* v0.3.4 refinement: stable product navigation, per-element bounce marquee, usable area/device panel */
.brand-button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  min-width: 0;
}
.brand-button:hover .brand-mark { box-shadow: 0 0 24px rgba(39,255,196,.25), inset 0 0 18px rgba(39,255,196,.08); }
.hidden-home-button { display: none !important; }
.controls.single-action { grid-template-columns: 1fr !important; }
.home-action {
  min-height: 42px;
  font-size: 12px;
  letter-spacing: .16em;
}

.marquee-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  position: relative !important;
}
.marquee-text {
  display: inline-block !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.marquee-wrap:not(.is-overflow) .marquee-text {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translate3d(0,0,0) !important;
  animation: none !important;
}
.marquee-wrap.is-overflow .marquee-text {
  animation-name: gs-marquee-bounce-v034 !important;
  animation-duration: var(--marquee-duration, 7s) !important;
  animation-timing-function: cubic-bezier(.45,0,.25,1) !important;
  animation-iteration-count: infinite !important;
}
@keyframes gs-marquee-bounce-v034 {
  0%, 5% { transform: translate3d(0,0,0); }
  46%, 58% { transform: translate3d(calc(var(--marquee-distance, 60px) * -1),0,0); }
  96%, 100% { transform: translate3d(0,0,0); }
}

#leftPanel { overflow-y: auto !important; }
#leftPanel .scene-container-list {
  flex: 1 1 auto;
  min-height: 250px;
  max-height: none !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 3px 7px 14px 2px !important;
}
.scene-container-item {
  position: relative !important;
  display: block !important;
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid rgba(85,231,255,.20) !important;
  background: linear-gradient(145deg, rgba(4,22,38,.84), rgba(1,9,18,.70)) !important;
  box-shadow: inset 0 0 18px rgba(85,231,255,.035);
  clip-path: none !important;
}
.scene-container-item::before {
  width: 4px !important;
  opacity: 1 !important;
}
.scene-container-item.hidden { opacity: .62; }
.scene-container-item.active {
  border-color: var(--item-colour, var(--green)) !important;
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--item-colour, var(--green)) 12%, transparent), 0 0 18px rgba(85,231,255,.06) !important;
}
.area-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 78px;
  align-items: stretch;
  gap: 10px;
  padding: 11px 10px 8px 12px;
  min-height: 68px;
}
.visibility-toggle {
  grid-column: auto !important;
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  border: 1px solid rgba(85,231,255,.18) !important;
  background: rgba(1,8,16,.50) !important;
  cursor: pointer !important;
}
.visibility-toggle input {
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(85,231,255,.45) !important;
  border-radius: 4px !important;
  background: rgba(0,0,0,.34) !important;
}
.visibility-toggle input:checked {
  background: var(--item-colour, var(--green)) !important;
  box-shadow: 0 0 13px var(--item-colour, var(--green));
}
.visibility-toggle span { display: none !important; }
.container-nav-main {
  all: unset !important;
  cursor: pointer !important;
  display: grid !important;
  min-width: 0 !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 2px 0 !important;
}
.container-nav-main strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
}
.container-nav-main span {
  display: block !important;
  min-width: 0 !important;
  color: var(--muted) !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.area-expand-toggle {
  all: unset !important;
  cursor: pointer !important;
  height: auto !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid rgba(85,231,255,.22) !important;
  background: rgba(85,231,255,.055) !important;
  color: var(--cyan) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.area-expand-toggle:hover { border-color: rgba(39,255,196,.45) !important; background: rgba(39,255,196,.09) !important; color: #fff !important; }
.area-expand-toggle b { font-size: 13px !important; color: #fff !important; }
.area-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 10px 10px 56px;
}
.mini-action.open-action {
  all: unset !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 26px !important;
  border: 1px solid rgba(85,231,255,.16) !important;
  background: rgba(1,8,16,.42) !important;
  color: var(--cyan) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}
.mini-action.open-action:hover { background: rgba(39,255,196,.08) !important; color: #fff !important; border-color: rgba(39,255,196,.36) !important; }
.area-device-drawer {
  margin: 0 10px 10px 56px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: max-height .28s ease, opacity .18s ease, transform .24s ease, padding .22s ease !important;
}
.area-device-drawer.open {
  max-height: min(320px, 42vh) !important;
  overflow-y: auto !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  padding: 6px 4px 4px 0 !important;
}
.area-device-row {
  all: unset !important;
  cursor: pointer !important;
  display: grid !important;
  grid-template-columns: 13px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 34px !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(85,231,255,.14) !important;
  background: rgba(1,8,16,.48) !important;
  color: #eaffff !important;
}
.area-device-row:hover,
.area-device-row.selected {
  border-color: var(--device-colour, var(--cyan)) !important;
  background: radial-gradient(circle at left, color-mix(in srgb, var(--device-colour, var(--cyan)) 18%, transparent), rgba(1,8,16,.62)) !important;
  transform: translateX(2px);
}
.device-row-main { min-width: 0 !important; overflow: hidden !important; }
.device-row-status { white-space: nowrap !important; font-size: 9px !important; color: var(--muted) !important; }
.collision-chip { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

#containerGrid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important; align-items: stretch !important; }
.container-tile {
  min-height: 208px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 20px 44px 34px 32px 1fr !important;
  gap: 9px !important;
  padding: 16px !important;
}
.container-tile small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.container-tile .tile-name {
  display: block !important;
  min-height: 38px !important;
  align-self: center !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
}
.container-tile .tile-description {
  min-height: 28px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.container-tile .tile-status-line { align-self: center !important; min-height: 28px !important; }
.container-tile .tile-meta { align-self: end !important; margin-top: 0 !important; }

.device-title, .device-subtitle, .device-metric-card small, .telemetry-value span, .chart-head span { min-width: 0 !important; max-width: 100% !important; }
.device-panel { scrollbar-gutter: stable; }

/* v0.3.5: compact area navigation, corrected marquee, dashboard scrollbar */
@keyframes gs-marquee-bounce-v035 {
  0%, 7% { transform: translate3d(0,0,0); }
  47%, 59% { transform: translate3d(calc(var(--marquee-distance, 60px) * -1),0,0); }
  94%, 100% { transform: translate3d(0,0,0); }
}
.marquee-wrap.is-overflow .marquee-text {
  animation-name: gs-marquee-bounce-v035 !important;
  animation-duration: var(--marquee-duration, 7s) !important;
  animation-timing-function: cubic-bezier(.42,0,.18,1) !important;
  animation-iteration-count: infinite !important;
}

#dashboardView, #containerGrid {
  scrollbar-color: rgba(85,231,255,.38) rgba(2,12,22,.86);
  scrollbar-width: thin;
}
#dashboardView::-webkit-scrollbar, #containerGrid::-webkit-scrollbar { width: 9px; height: 9px; }
#dashboardView::-webkit-scrollbar-track, #containerGrid::-webkit-scrollbar-track { background: rgba(2,12,22,.86); border-left: 1px solid rgba(85,231,255,.10); }
#dashboardView::-webkit-scrollbar-thumb, #containerGrid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(85,231,255,.46), rgba(39,255,196,.22)); border-radius: 999px; border: 2px solid rgba(2,12,22,.88); }

#sceneContainerList.scene-container-list {
  gap: 9px !important;
  padding-right: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-color: rgba(85,231,255,.34) rgba(2,12,22,.78) !important;
}
.scene-container-item {
  padding: 0 !important;
  overflow: hidden !important;
  border-color: rgba(85,231,255,.16) !important;
  background: linear-gradient(135deg, rgba(4,18,32,.88), rgba(1,8,17,.76)) !important;
}
.scene-container-item::before { width: 3px !important; }
.scene-container-item.active { background: linear-gradient(135deg, color-mix(in srgb, var(--item-colour, var(--green)) 10%, rgba(4,18,32,.90)), rgba(1,8,17,.78)) !important; }
.scene-container-item.hidden .container-nav-main { opacity: .56; }
.area-card-head { display: contents !important; }
.container-nav-main {
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 4px !important;
  padding: 12px 12px 8px 16px !important;
  min-height: 62px !important;
  text-align: left !important;
  border: 0 !important;
  background: transparent !important;
}
.container-nav-main:hover { background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--item-colour, var(--green)) 14%, transparent), transparent 65%) !important; }
.container-nav-main strong {
  font-size: 11.5px !important;
  letter-spacing: .075em !important;
  line-height: 1.2 !important;
}
.container-nav-main span { font-size: 10px !important; }
.collision-chip { font-size: 9px !important; width: max-content !important; max-width: 100% !important; padding: 3px 6px !important; border-radius: 999px !important; border: 1px solid rgba(85,231,255,.16) !important; background: rgba(85,231,255,.055) !important; }
.area-card-actions {
  display: grid !important;
  grid-template-columns: 34px 1fr 34px !important;
  align-items: center !important;
  padding: 0 10px 7px 10px !important;
  min-height: 26px !important;
}
.area-eye-toggle {
  all: unset !important;
  grid-column: 1 !important;
  cursor: pointer !important;
  width: 26px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--item-colour, var(--cyan)) !important;
  border: 1px solid rgba(85,231,255,.18) !important;
  background: rgba(1,8,16,.50) !important;
  box-shadow: inset 0 0 10px rgba(85,231,255,.035) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.area-eye-toggle.off { color: rgba(123,143,163,.78) !important; opacity: .82 !important; }
.area-eye-toggle:hover { border-color: rgba(39,255,196,.40) !important; color: #fff !important; background: rgba(39,255,196,.08) !important; }
.area-expand-toggle {
  all: unset !important;
  grid-column: 2 !important;
  justify-self: center !important;
  cursor: pointer !important;
  width: 42px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(85,231,255,.18) !important;
  background: linear-gradient(180deg, rgba(85,231,255,.08), rgba(1,8,16,.50)) !important;
  color: var(--cyan) !important;
  border-radius: 0 0 10px 10px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  min-height: 0 !important;
}
.area-expand-toggle:hover { color: #fff !important; border-color: rgba(39,255,196,.42) !important; background: rgba(39,255,196,.08) !important; }
.area-expand-toggle b { font-size: 15px !important; line-height: 1 !important; transform: translateY(-1px); }
.visibility-toggle, .area-quick-actions, .mini-action.open-action { display: none !important; }
.area-device-drawer {
  margin: 0 10px 8px 10px !important;
  max-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-5px) !important;
}
.area-device-drawer.open {
  max-height: min(310px, 42vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 2px 6px 2px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  scrollbar-color: rgba(85,231,255,.34) rgba(2,12,22,.78) !important;
  scrollbar-width: thin !important;
}
.area-device-row { min-height: 32px !important; padding: 7px 8px !important; }

.container-tile {
  grid-template-rows: 20px 46px 34px 32px 1fr !important;
  min-height: 210px !important;
}
.container-tile .tile-name { min-height: 46px !important; display: flex !important; align-items: center !important; }
.container-tile .tile-description { min-height: 34px !important; }
.container-tile .tile-status-line { min-height: 32px !important; }

/* v0.3.6: clean compact area rows, true disabled build states, clearer map labels */
@keyframes gs-marquee-bounce-v036 {
  0%, 8% { transform: translate3d(0,0,0); }
  44%, 56% { transform: translate3d(calc(var(--marquee-distance, 60px) * -1),0,0); }
  92%, 100% { transform: translate3d(0,0,0); }
}
.marquee-wrap.is-overflow .marquee-text {
  animation-name: gs-marquee-bounce-v036 !important;
  animation-duration: var(--marquee-duration, 7s) !important;
  animation-timing-function: cubic-bezier(.44,0,.16,1) !important;
  animation-iteration-count: infinite !important;
  will-change: transform !important;
}
.scene-container-list { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
#sceneContainerList.scene-container-list {
  gap: 10px !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 8px 10px 0 !important;
  min-height: 310px !important;
}
.scene-container-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 28px !important;
  grid-template-rows: minmax(58px, auto) auto !important;
  align-items: stretch !important;
  min-height: 72px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid rgba(85,231,255,.17) !important;
  background: linear-gradient(135deg, rgba(4,18,32,.92), rgba(1,8,17,.78)) !important;
  transition: opacity .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.scene-container-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--item-colour, var(--cyan)) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--item-colour, var(--cyan)) 70%, transparent) !important;
}
.scene-container-item.active { border-color: var(--item-colour, var(--green)) !important; box-shadow: inset 0 0 26px color-mix(in srgb, var(--item-colour, var(--green)) 10%, transparent), 0 0 20px color-mix(in srgb, var(--item-colour, var(--green)) 12%, transparent) !important; }
.scene-container-item.scene-building { opacity: .45 !important; filter: grayscale(.7) saturate(.55) !important; }
.scene-container-item.scene-building .container-nav-main { cursor: default !important; }
.scene-container-item.scene-building .container-nav-main:hover { background: transparent !important; }
.container-nav-main {
  grid-column: 1 / 4 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 30px !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 8px !important;
  row-gap: 3px !important;
  align-content: center !important;
  min-height: 66px !important;
  padding: 10px 8px 18px 38px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
}
.container-nav-main strong,
.container-nav-main > span,
.container-nav-main > em,
.container-nav-main .collision-chip {
  grid-column: 2 / 4 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.container-nav-main strong { font-size: 11px !important; letter-spacing: .075em !important; line-height: 1.25 !important; color: #d7fbff !important; }
.container-nav-main > span { font-size: 10px !important; color: var(--muted) !important; line-height: 1.25 !important; }
.container-nav-main > em { font-style: normal !important; font-size: 9px !important; color: color-mix(in srgb, var(--item-colour, var(--cyan)) 78%, #d7fbff) !important; opacity: .95 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
.container-nav-main:hover { background: radial-gradient(circle at 24px 50%, color-mix(in srgb, var(--item-colour, var(--green)) 16%, transparent), transparent 68%) !important; }
.area-eye-toggle {
  all: unset !important;
  position: absolute !important;
  left: 12px !important;
  bottom: 8px !important;
  width: 20px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: var(--item-colour, var(--green)) !important;
  border: 1px solid rgba(85,231,255,.24) !important;
  background: rgba(1,8,16,.78) !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  z-index: 4 !important;
}
.area-eye-toggle.off { color: rgba(123,143,163,.84) !important; opacity: .75 !important; }
.area-eye-toggle:hover { color: #fff !important; border-color: rgba(39,255,196,.45) !important; background: rgba(39,255,196,.10) !important; }
.area-expand-toggle {
  all: unset !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -1px !important;
  transform: translateX(-50%) !important;
  width: 36px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(85,231,255,.22) !important;
  border-bottom-color: rgba(85,231,255,.12) !important;
  border-radius: 8px 8px 0 0 !important;
  background: linear-gradient(180deg, rgba(85,231,255,.12), rgba(1,8,16,.92)) !important;
  color: var(--cyan) !important;
  z-index: 4 !important;
}
.area-expand-toggle b { font-size: 13px !important; line-height: 1 !important; transform: translateY(-1px) !important; }
.area-expand-toggle:hover { color: #fff !important; border-color: rgba(39,255,196,.42) !important; background: rgba(39,255,196,.10) !important; }
.area-card-actions, .visibility-toggle, .area-quick-actions, .mini-action.open-action { display: none !important; }
.collision-chip { justify-self: start !important; width: auto !important; max-width: 100% !important; margin-top: 2px !important; font-size: 8.5px !important; padding: 2px 5px !important; border-radius: 999px !important; border: 1px solid rgba(85,231,255,.18) !important; background: rgba(85,231,255,.055) !important; }
.area-device-drawer {
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
  max-height: 0 !important;
  margin: 0 8px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-5px) !important;
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease, padding .18s ease, margin .18s ease !important;
  border-top: 1px solid transparent !important;
}
.area-device-drawer.open {
  max-height: min(340px, 43vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin: 4px 8px 12px 8px !important;
  padding: 7px 4px 8px 4px !important;
  border-top-color: rgba(85,231,255,.12) !important;
  scrollbar-color: rgba(85,231,255,.34) rgba(2,12,22,.78) !important;
  scrollbar-width: thin !important;
}
.area-device-row { min-height: 33px !important; padding: 7px 8px !important; display: grid !important; grid-template-columns: 13px minmax(0, 1fr) auto !important; gap: 7px !important; align-items: center !important; }
.area-device-row .device-row-main { min-width: 0 !important; overflow: hidden !important; }
.area-device-row .device-row-status { font-size: 8.5px !important; opacity: .9 !important; }
.container-tile.not-ready { opacity: .54 !important; filter: grayscale(.45) saturate(.65) !important; cursor: default !important; }
.container-tile.not-ready:hover { transform: none !important; box-shadow: none !important; }
.container-tile.ready { cursor: pointer !important; }

/* Final isolated Areas In View layout */
#sceneContainerList {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 220px !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 8px 18px 0 !important;
  scrollbar-color: rgba(85,231,255,.34) rgba(2,12,22,.78) !important;
  scrollbar-width: thin !important;
}

#sceneContainerList::-webkit-scrollbar {
  width: 8px;
}

#sceneContainerList::-webkit-scrollbar-thumb {
  background: rgba(85,231,255,.32);
  border-radius: 20px;
}

.gsAreaCard {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  grid-template-rows: minmax(70px, auto) auto;
  min-height: 78px;
  height: auto;
  overflow: visible;
  border: 1px solid rgba(85,231,255,.18);
  background: linear-gradient(135deg, rgba(4,18,32,.94), rgba(1,8,17,.80));
  box-shadow: inset 0 0 22px rgba(85,231,255,.025);
}

.gsAreaCard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--area-colour, var(--cyan));
  box-shadow: 0 0 14px var(--area-colour, var(--cyan));
}

.gsAreaCard.active {
  border-color: var(--area-colour, var(--green));
  box-shadow:
    inset 0 0 26px color-mix(in srgb, var(--area-colour, var(--green)) 12%, transparent),
    0 0 18px color-mix(in srgb, var(--area-colour, var(--green)) 14%, transparent);
}

.gsAreaCard.hidden .gsAreaMain {
  opacity: .52;
}

.gsAreaCard.building {
  opacity: .42;
  filter: grayscale(.7) saturate(.55);
}

.gsAreaCard.building .gsAreaMain {
  cursor: default;
}

.gsAreaMain {
  all: unset;
  grid-column: 1 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  column-gap: 8px;
  row-gap: 4px;
  min-width: 0;
  min-height: 70px;
  padding: 10px 8px 20px 38px;
  cursor: pointer;
  box-sizing: border-box;
}

.gsAreaMain:hover {
  background: radial-gradient(circle at 26px 50%, color-mix(in srgb, var(--area-colour, var(--green)) 16%, transparent), transparent 68%);
}

.gsAreaName,
.gsAreaMeta,
.gsAreaChip,
.gsAreaBuild {
  grid-column: 2 / 4;
  min-width: 0;
  max-width: 100%;
}

.gsAreaName {
  color: #d7fbff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .075em;
  line-height: 1.25;
  text-transform: uppercase;
}

.gsAreaMeta {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.gsAreaChip,
.gsAreaBuild {
  justify-self: start;
  width: auto;
  max-width: 100%;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(85,231,255,.18);
  background: rgba(85,231,255,.055);
  color: color-mix(in srgb, var(--area-colour, var(--cyan)) 78%, #d7fbff);
  font-size: 8.5px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gsAreaBuild {
  color: var(--warning);
  border-color: rgba(255,209,102,.25);
  background: rgba(255,209,102,.07);
}

.gsAreaEye {
  all: unset;
  position: absolute;
  left: 12px;
  bottom: 8px;
  width: 20px;
  height: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--area-colour, var(--green));
  border: 1px solid rgba(85,231,255,.24);
  background: rgba(1,8,16,.78);
  border-radius: 7px;
  font-size: 11px;
  line-height: 1;
  z-index: 5;
}

.gsAreaEye.off {
  color: rgba(123,143,163,.84);
  opacity: .75;
}

.gsAreaEye:hover {
  color: #fff;
  border-color: rgba(39,255,196,.45);
  background: rgba(39,255,196,.10);
}

.gsAreaDrop {
  all: unset;
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 36px;
  height: 17px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(85,231,255,.22);
  border-bottom-color: rgba(85,231,255,.12);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(85,231,255,.12), rgba(1,8,16,.92));
  color: var(--cyan);
  font-size: 13px;
  line-height: 1;
  z-index: 5;
}

.gsAreaDrop:hover {
  color: #fff;
  border-color: rgba(39,255,196,.42);
  background: rgba(39,255,196,.10);
}

.gsAreaDeviceDrawer {
  grid-column: 1 / 4;
  grid-row: 2;
  max-height: 0;
  margin: 0 8px;
  padding: 0 4px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease, padding .18s ease, margin .18s ease;
  border-top: 1px solid transparent;
}

.gsAreaDeviceDrawer.open {
  max-height: min(340px, 43vh);
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1;
  transform: translateY(0);
  margin: 4px 8px 12px 8px;
  padding: 7px 4px 8px 4px;
  border-top-color: rgba(85,231,255,.12);
  scrollbar-color: rgba(85,231,255,.34) rgba(2,12,22,.78);
  scrollbar-width: thin;
}

.gsAreaDeviceDrawer::-webkit-scrollbar {
  width: 7px;
}

.gsAreaDeviceDrawer::-webkit-scrollbar-thumb {
  background: rgba(85,231,255,.30);
  border-radius: 20px;
}

.gsAreaDevice {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 7px 8px;
  border: 1px solid rgba(85,231,255,.13);
  background: rgba(2,12,22,.52);
  box-sizing: border-box;
}

.gsAreaDevice:hover,
.gsAreaDevice.selected {
  border-color: color-mix(in srgb, var(--device-colour, var(--green)) 52%, rgba(85,231,255,.18));
  background: color-mix(in srgb, var(--device-colour, var(--green)) 9%, rgba(2,12,22,.72));
}

.gsAreaDeviceDot {
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: var(--device-colour, var(--green));
  box-shadow: 0 0 12px var(--device-colour, var(--green));
}

.gsAreaDeviceName {
  min-width: 0;
  overflow: hidden;
}

.gsAreaDeviceStatus {
  color: var(--muted);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gsAreaEmpty {
  padding: 8px;
  color: var(--muted);
  font-size: 11px;
  border: 1px dashed rgba(85,231,255,.14);
}

/* FINAL FIX: stop global button hover from breaking area controls */
#sceneContainerList .gsAreaDrop,
#sceneContainerList .gsAreaEye,
#sceneContainerList .gsAreaDevice,
#sceneContainerList .gsAreaMain {
  transform: none !important;
  box-shadow: none !important;
}

#sceneContainerList .gsAreaDrop:hover,
#sceneContainerList .gsAreaEye:hover,
#sceneContainerList .gsAreaDevice:hover,
#sceneContainerList .gsAreaMain:hover {
  transform: none !important;
}

/* Make the area cards behave as stable vertical cards */
#sceneContainerList {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 8px 18px 0 !important;
}

/* Kill accidental old layout behaviour inside this component */
#sceneContainerList .scene-container-item,
#sceneContainerList .container-nav-main,
#sceneContainerList .mini-action,
#sceneContainerList .visibility-toggle,
#sceneContainerList .area-device-drawer,
#sceneContainerList .area-device-row,
#sceneContainerList .area-device-toggle {
  display: none !important;
}

/* Area tile */
#sceneContainerList .gsAreaCard {
  position: relative !important;
  display: block !important;
  min-height: 82px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 1px solid rgba(85,231,255,.18) !important;
  background: linear-gradient(135deg, rgba(4,18,32,.94), rgba(1,8,17,.80)) !important;
  box-shadow: inset 0 0 22px rgba(85,231,255,.025) !important;
}

#sceneContainerList .gsAreaCard::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--area-colour, var(--cyan)) !important;
  box-shadow: 0 0 14px var(--area-colour, var(--cyan)) !important;
  pointer-events: none !important;
}

#sceneContainerList .gsAreaCard.active {
  border-color: var(--area-colour, var(--green)) !important;
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--area-colour, var(--green)) 10%, transparent) !important;
}

#sceneContainerList .gsAreaCard.building {
  opacity: .42 !important;
  filter: grayscale(.7) saturate(.55) !important;
}

/* Main clickable area */
#sceneContainerList .gsAreaMain {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 14px 42px 24px 48px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  color: var(--text) !important;
}

#sceneContainerList .gsAreaCard.building .gsAreaMain {
  cursor: default !important;
}

#sceneContainerList .gsAreaMain:hover {
  background: radial-gradient(circle at 24px 50%, color-mix(in srgb, var(--area-colour, var(--green)) 15%, transparent), transparent 68%) !important;
}

#sceneContainerList .gsAreaName,
#sceneContainerList .gsAreaMeta,
#sceneContainerList .gsAreaChip,
#sceneContainerList .gsAreaBuild {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#sceneContainerList .gsAreaName {
  color: #d7fbff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

#sceneContainerList .gsAreaMeta {
  margin-top: 6px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

#sceneContainerList .gsAreaChip,
#sceneContainerList .gsAreaBuild {
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(85,231,255,.18) !important;
  background: rgba(85,231,255,.055) !important;
  color: color-mix(in srgb, var(--area-colour, var(--cyan)) 78%, #d7fbff) !important;
  font-size: 8.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

#sceneContainerList .gsAreaBuild {
  color: var(--warning) !important;
  border-color: rgba(255,209,102,.25) !important;
  background: rgba(255,209,102,.07) !important;
}

/* Eye toggle */
#sceneContainerList .gsAreaEye {
  all: unset !important;
  position: absolute !important;
  left: 13px !important;
  bottom: 10px !important;
  width: 22px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: var(--area-colour, var(--green)) !important;
  border: 1px solid rgba(85,231,255,.24) !important;
  background: rgba(1,8,16,.78) !important;
  border-radius: 7px !important;
  font-size: 0 !important;
  z-index: 20 !important;
}

#sceneContainerList .gsAreaEye::before {
  content: '◉' !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#sceneContainerList .gsAreaEye.off::before {
  content: '◎' !important;
}

#sceneContainerList .gsAreaEye.off {
  color: rgba(123,143,163,.84) !important;
}

#sceneContainerList .gsAreaEye:hover {
  color: #fff !important;
  border-color: rgba(39,255,196,.45) !important;
  background: rgba(39,255,196,.10) !important;
}

/* Single CSS-only dropdown arrow */
#sceneContainerList .gsAreaDrop {
  all: unset !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -1px !important;
  transform: translateX(-50%) !important;
  width: 42px !important;
  height: 19px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(85,231,255,.22) !important;
  border-bottom-color: rgba(85,231,255,.12) !important;
  border-radius: 9px 9px 0 0 !important;
  background: linear-gradient(180deg, rgba(85,231,255,.12), rgba(1,8,16,.96)) !important;
  color: var(--cyan) !important;
  z-index: 25 !important;
}

#sceneContainerList .gsAreaDrop::before {
  content: '⌄' !important;
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

#sceneContainerList .gsAreaDrop.open::before {
  content: '⌃' !important;
}

#sceneContainerList .gsAreaDrop:hover {
  transform: translateX(-50%) !important;
  color: #fff !important;
  border-color: rgba(39,255,196,.42) !important;
  background: rgba(39,255,196,.10) !important;
}

/* Drawer */
#sceneContainerList .gsAreaDeviceDrawer {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  max-height: 0 !important;
  height: auto !important;
  margin: 0 8px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-5px) !important;
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease, padding .18s ease, margin .18s ease !important;
  border-top: 1px solid transparent !important;
  box-sizing: border-box !important;
}

#sceneContainerList .gsAreaDeviceDrawer.open {
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin: 6px 8px 14px 8px !important;
  padding: 8px 4px 10px 4px !important;
  border-top-color: rgba(85,231,255,.12) !important;
}

#sceneContainerList .gsAreaDeviceDrawer::-webkit-scrollbar {
  width: 7px !important;
}

#sceneContainerList .gsAreaDeviceDrawer::-webkit-scrollbar-thumb {
  background: rgba(85,231,255,.30) !important;
  border-radius: 20px !important;
}

/* Device rows */
#sceneContainerList .gsAreaDevice {
  all: unset !important;
  cursor: pointer !important;
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(85,231,255,.13) !important;
  background: rgba(2,12,22,.58) !important;
  box-sizing: border-box !important;
}

#sceneContainerList .gsAreaDevice:hover,
#sceneContainerList .gsAreaDevice.selected {
  transform: none !important;
  border-color: color-mix(in srgb, var(--device-colour, var(--green)) 52%, rgba(85,231,255,.18)) !important;
  background: color-mix(in srgb, var(--device-colour, var(--green)) 9%, rgba(2,12,22,.72)) !important;
}

#sceneContainerList .gsAreaDeviceDot {
  width: 8px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: var(--device-colour, var(--green)) !important;
  box-shadow: 0 0 12px var(--device-colour, var(--green)) !important;
}

#sceneContainerList .gsAreaDeviceName {
  min-width: 0 !important;
  overflow: hidden !important;
}

#sceneContainerList .gsAreaDeviceStatus {
  color: var(--muted) !important;
  font-size: 8.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#sceneContainerList .gsAreaEmpty {
  padding: 9px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  border: 1px dashed rgba(85,231,255,.14) !important;
}

/* FINAL LEFT PANEL REBUILD - isolated from old gsArea/scene-container rules */
#leftPanel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

#sceneContainerList {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 8px 22px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(85,231,255,.34) rgba(2,12,22,.78) !important;
}

#sceneContainerList::-webkit-scrollbar {
  width: 8px !important;
}

#sceneContainerList::-webkit-scrollbar-thumb {
  background: rgba(85,231,255,.32) !important;
  border-radius: 20px !important;
}

.hmAreaCard,
.hmAreaCard * {
  box-sizing: border-box !important;
}

.hmAreaCard {
  position: relative !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 92px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid rgba(85,231,255,.18) !important;
  background: linear-gradient(135deg, rgba(4,18,32,.94), rgba(1,8,17,.82)) !important;
  box-shadow: inset 0 0 22px rgba(85,231,255,.035) !important;
}

.hmAreaCard::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--area-colour, var(--cyan)) !important;
  box-shadow: 0 0 16px var(--area-colour, var(--cyan)) !important;
  pointer-events: none !important;
}

.hmAreaCard.active {
  border-color: var(--area-colour, var(--green)) !important;
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--area-colour, var(--green)) 12%, transparent),
    0 0 16px color-mix(in srgb, var(--area-colour, var(--green)) 16%, transparent) !important;
}

.hmAreaCard.hidden .hmAreaMain {
  opacity: .5 !important;
}

.hmAreaCard.building {
  opacity: .42 !important;
  filter: grayscale(.75) saturate(.55) !important;
}

.hmAreaTop {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 92px !important;
  padding: 12px 12px 24px 12px !important;
}

.hmAreaEye,
.hmAreaMain,
.hmAreaDrop,
.hmAreaDevice {
  all: unset !important;
  transform: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
}

.hmAreaEye:hover,
.hmAreaMain:hover,
.hmAreaDrop:hover,
.hmAreaDevice:hover {
  transform: none !important;
}

.hmAreaEye {
  grid-column: 1 !important;
  justify-self: center !important;
  width: 23px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: var(--area-colour, var(--green)) !important;
  border: 1px solid rgba(85,231,255,.24) !important;
  background: rgba(1,8,16,.78) !important;
  border-radius: 7px !important;
  z-index: 5 !important;
}

.hmAreaEye::before {
  content: '◉' !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.hmAreaEye.off {
  color: rgba(123,143,163,.86) !important;
}

.hmAreaEye.off::before {
  content: '◎' !important;
}

.hmAreaEye:hover {
  color: #fff !important;
  border-color: rgba(39,255,196,.45) !important;
  background: rgba(39,255,196,.10) !important;
}

.hmAreaMain {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 64px !important;
  cursor: pointer !important;
}

.hmAreaMain:disabled {
  cursor: default !important;
}

.hmAreaMain:hover:not(:disabled) .hmAreaName {
  color: #fff !important;
}

.hmAreaName,
.hmAreaMeta,
.hmAreaChip,
.hmAreaBuild {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.hmAreaName {
  color: #d7fbff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.hmAreaMeta {
  margin-top: 7px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.hmAreaChip,
.hmAreaBuild {
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(85,231,255,.18) !important;
  background: rgba(85,231,255,.055) !important;
  color: color-mix(in srgb, var(--area-colour, var(--cyan)) 78%, #d7fbff) !important;
  font-size: 8.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.hmAreaBuild {
  color: var(--warning) !important;
  border-color: rgba(255,209,102,.25) !important;
  background: rgba(255,209,102,.07) !important;
}

.hmAreaDrop {
  position: absolute !important;
  left: 50% !important;
  bottom: -1px !important;
  transform: translateX(-50%) !important;
  width: 44px !important;
  height: 19px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(85,231,255,.24) !important;
  border-bottom-color: rgba(85,231,255,.12) !important;
  border-radius: 9px 9px 0 0 !important;
  background: linear-gradient(180deg, rgba(85,231,255,.12), rgba(1,8,16,.96)) !important;
  color: var(--cyan) !important;
  z-index: 10 !important;
}

.hmAreaDrop::before {
  content: '⌄' !important;
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.hmAreaDrop.open::before {
  content: '⌃' !important;
}

.hmAreaDrop:hover {
  transform: translateX(-50%) !important;
  color: #fff !important;
  border-color: rgba(39,255,196,.42) !important;
  background: rgba(39,255,196,.10) !important;
}

.hmAreaDrawer {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 0 !important;
  height: auto !important;
  margin: 0 10px !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-5px) !important;
  transition:
    max-height .24s ease,
    opacity .18s ease,
    transform .18s ease,
    padding .18s ease,
    margin .18s ease !important;
  border-top: 1px solid transparent !important;
}

.hmAreaDrawer.open {
  max-height: 340px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin: 4px 10px 16px 10px !important;
  padding: 9px 5px 12px 5px !important;
  border-top-color: rgba(85,231,255,.14) !important;
}

.hmAreaDrawer::-webkit-scrollbar {
  width: 7px !important;
}

.hmAreaDrawer::-webkit-scrollbar-thumb {
  background: rgba(85,231,255,.30) !important;
  border-radius: 20px !important;
}

.hmAreaDevice {
  cursor: pointer !important;
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(85,231,255,.13) !important;
  background: rgba(2,12,22,.58) !important;
}

.hmAreaDevice:hover,
.hmAreaDevice.selected {
  border-color: color-mix(in srgb, var(--device-colour, var(--green)) 52%, rgba(85,231,255,.18)) !important;
  background: color-mix(in srgb, var(--device-colour, var(--green)) 9%, rgba(2,12,22,.72)) !important;
}

.hmAreaDeviceBeam {
  width: 8px !important;
  height: 25px !important;
  border-radius: 999px !important;
  background: var(--device-colour, var(--green)) !important;
  box-shadow: 0 0 13px var(--device-colour, var(--green)) !important;
}

.hmAreaDeviceText {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 4px !important;
}

.hmAreaDeviceText strong {
  display: block !important;
  min-width: 0 !important;
  color: #eaffff !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.hmAreaDeviceText small {
  display: block !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.hmAreaEmpty {
  padding: 10px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  border: 1px dashed rgba(85,231,255,.14) !important;
}

.help-close {
  all: unset !important;
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(85,231,255,.24) !important;
  border-top: none !important;
  border-right: none !important;
  background: rgba(1,8,16,.65) !important;
  color: var(--cyan) !important;
  cursor: pointer !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
  box-shadow: none !important;
}

.help-close:hover {
  transform: none !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
  background: rgba(39,255,196,.10) !important;
}
/* v0.4 login and company selection */
.login-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 430px);
  align-items: center;
  gap: 42px;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 68% 48%, rgba(85,231,255,.10), transparent 34%),
    linear-gradient(90deg, rgba(1,5,12,.32), rgba(1,5,12,.72));
  backdrop-filter: blur(2px);
}

.login-view.hidden {
  display: none !important;
}

.login-copy {
  max-width: 720px;
  padding: 22px 0;
  color: #effcff;
  text-shadow: 0 0 24px rgba(85,231,255,.28);
}

.login-copy span {
  display: block;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.login-copy h2 {
  margin: 16px 0 14px;
  font-size: clamp(34px, 6vw, 76px);
  line-height: .92;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-copy p {
  max-width: 520px;
  color: #a9dced;
  font-size: 15px;
  line-height: 1.7;
}

.login-card {
  position: relative;
  padding: 30px;
  border: 1px solid rgba(85,231,255,.32);
  background: linear-gradient(145deg, rgba(2,15,28,.70), rgba(1,7,16,.48));
  box-shadow: 0 0 48px rgba(85,231,255,.14), inset 0 0 36px rgba(85,231,255,.06);
  backdrop-filter: blur(18px);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

.login-card::before,
.login-card::after {
  content: '';
  position: absolute;
  width: 52px;
  height: 52px;
  pointer-events: none;
}

.login-card::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.login-card::after {
  right: 0;
  bottom: 0;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
}

.login-card-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid var(--cyan);
  color: var(--green);
  font-weight: 900;
  letter-spacing: .08em;
  background: radial-gradient(circle, rgba(39,255,196,.20), rgba(39,255,196,.03));
  box-shadow: 0 0 24px rgba(39,255,196,.24);
}

.login-card h2 {
  margin: 0;
  color: #fff;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.login-card p {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.login-card label {
  display: block;
  margin-top: 14px;
}

.login-card input {
  padding: 13px 12px;
  background: rgba(1,8,16,.74);
}

.login-card button {
  width: 100%;
  margin-top: 20px;
}

.login-card button:disabled {
  cursor: wait;
  opacity: .55;
}

.login-error {
  min-height: 20px;
  margin-top: 12px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.45;
}

.logout-button {
  min-width: 106px;
  padding: 10px 12px;
  font-size: 10px;
}

.company-tile .tile-meta strong {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#containerGrid::-webkit-scrollbar,
#dashboardView::-webkit-scrollbar {
  width: 9px;
}

#containerGrid::-webkit-scrollbar-thumb,
#dashboardView::-webkit-scrollbar-thumb {
  background: rgba(85,231,255,.32);
  border-radius: 20px;
}

#dashboardView {
  scrollbar-width: thin;
  scrollbar-color: rgba(85,231,255,.34) rgba(2,12,22,.78);
}

@media (max-width: 920px) {
  .login-view {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .login-copy {
    display: none;
  }
}


/* v0.4.1: login screen uses the 3D scene as a true full-screen background */
body.login-active {
  overflow: hidden !important;
}

body.login-active #app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
  background: #020812 !important;
}

body.login-active header,
body.login-active #leftPanel,
body.login-active #rightPanel,
body.login-active .bottomPanel,
body.login-active #dashboardView,
body.login-active #map2d,
body.login-active .hud-overlay,
body.login-active .map-title,
body.login-active .map-legend,
body.login-active #helpBtn,
body.login-active #helpModal,
body.login-active #loadingOverlay {
  display: none !important;
}

body.login-active #viewportPanel {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  z-index: 1 !important;
  border: 0 !important;
  clip-path: none !important;
  background: #020812 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.login-active #viewportPanel::before,
body.login-active #viewportPanel::after {
  display: none !important;
}

body.login-active #terrainCanvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: block !important;
  cursor: default !important;
}

body.login-active .login-view {
  z-index: 20 !important;
  background:
    radial-gradient(circle at 62% 50%, rgba(85,231,255,.08), transparent 34%),
    radial-gradient(circle at 18% 18%, rgba(39,255,196,.08), transparent 28%),
    linear-gradient(90deg, rgba(1,5,12,.28), rgba(1,5,12,.50) 42%, rgba(1,5,12,.66));
  backdrop-filter: none !important;
}

body.login-active .login-view::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(rgba(85,231,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,231,255,.026) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 0%, rgba(1,5,12,.38) 78%, rgba(1,5,12,.68) 100%);
  background-size: 52px 52px, 52px 52px, auto;
}


/* v0.4.2 login background polish: no app flash, cached-scene fallback ambience */
body.login-active:not(.app-ready) header,
body.login-active:not(.app-ready) #leftPanel,
body.login-active:not(.app-ready) #rightPanel,
body.login-active:not(.app-ready) .bottomPanel,
body.login-active:not(.app-ready) #dashboardView,
body.login-active:not(.app-ready) #map2d,
body.login-active:not(.app-ready) .hud-overlay,
body.login-active:not(.app-ready) .map-title,
body.login-active:not(.app-ready) .map-legend,
body.login-active:not(.app-ready) #helpBtn,
body.login-active:not(.app-ready) #helpModal,
body.login-active:not(.app-ready) #loadingOverlay {
  display: none !important;
}

body.login-active::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle, rgba(85,231,255,.75) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(39,255,196,.50) 0 1px, transparent 1.6px);
  background-size: 72px 72px, 116px 116px;
  background-position: 0 0, 33px 41px;
  animation: loginParticleDrift 22s linear infinite;
}

body.login-active.login-scene-ready::after {
  opacity: .22;
}

@keyframes loginParticleDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-72px, -72px, 0); }
}

body.login-active .login-view {
  z-index: 20 !important;
}

body.login-active #viewportPanel {
  background:
    radial-gradient(circle at 48% 46%, rgba(85,231,255,.08), transparent 36%),
    linear-gradient(135deg, #020812, #030f1e 48%, #01040a) !important;
}