/* ─────────────────────────────────────────────
   CITY DETAIL — interactions overlay styles
   ───────────────────────────────────────────── */

/* Entrance animation */
.city-detail-root { animation: cityFadeIn 180ms ease-out; }
@keyframes cityFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Subtle crossfade for panel swap */
.panel-swap-enter { animation: panelFade 180ms ease-out; }
@keyframes panelFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Layer marker stagger */
.city-wh, .city-vh, .city-restriction-pin { animation: markerIn 240ms ease-out both; }
@keyframes markerIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

/* Selection ring pulse on marker */
.sel-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--teal);
  animation: selPulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes selPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Route hover highlight */
.city-route-hover { filter: drop-shadow(0 0 8px currentColor) brightness(1.2); }

/* Route floating label */
.route-float-label {
  background: rgba(16,21,29,0.96); border: 1px solid var(--border);
  padding: 6px 10px; font-family: var(--mono); font-size: 10px;
  color: var(--text); border-radius: 3px; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6); white-space: nowrap;
  line-height: 1.5;
}
.route-float-label .rfl-row { display: flex; gap: 6px; }
.route-float-label .rfl-k { color: var(--text-faint); }
.route-float-label .rfl-v { color: var(--text); }
.route-float-label .rfl-id { color: var(--teal); font-weight: 700; letter-spacing: 0.06em; }

/* Context menu */
.ctx-menu {
  position: fixed; z-index: 3000;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 4px; min-width: 200px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.75);
  padding: 4px 0;
  font-family: var(--mono); font-size: 11px;
  animation: ctxIn 100ms ease-out;
}
@keyframes ctxIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.ctx-item {
  padding: 7px 12px; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.ctx-item:hover { background: var(--panel-2); color: var(--text); }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover { background: rgba(255,93,93,0.08); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
.ctx-head {
  padding: 6px 12px; color: var(--text-faint); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* Tooltip */
.tt {
  position: fixed; z-index: 3100; pointer-events: none;
  background: rgba(7,9,12,0.96); border: 1px solid var(--border-2);
  padding: 6px 10px; font-family: var(--mono); font-size: 10px;
  color: var(--text); border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7);
  max-width: 240px; line-height: 1.5;
}
.tt-hint { color: var(--text-faint); margin-left: 6px; }

/* Marker hover popup tooltip */
.marker-tt {
  position: fixed; z-index: 3100; pointer-events: none;
  background: var(--panel); border: 1px solid var(--border-2);
  padding: 8px 10px; font-family: var(--mono); font-size: 10px;
  color: var(--text); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  min-width: 180px;
  animation: ctxIn 100ms ease-out;
}
.marker-tt .mtt-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; padding-bottom: 5px;
  border-bottom: 1px dashed var(--border);
}
.marker-tt .mtt-name { color: var(--teal); font-weight: 700; letter-spacing: 0.05em; font-size: 11px; }
.marker-tt .mtt-tag { color: var(--text-faint); font-size: 9px; letter-spacing: 0.08em; }
.marker-tt .mtt-row { display: flex; justify-content: space-between; padding: 2px 0; }
.marker-tt .mtt-row .k { color: var(--text-faint); }
.marker-tt .mtt-row .v { color: var(--text); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(4,6,10,0.72);
  z-index: 2500; backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: cityFadeIn 160ms ease-out;
}
.modal {
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 6px; min-width: 420px; max-width: 92vw;
  max-height: 84vh; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
  display: flex; flex-direction: column;
  animation: modalIn 200ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel-2);
}
.modal-head .title { font-size: 13px; font-weight: 600; }
.modal-head .sub { font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-top: 3px; letter-spacing: 0.05em; }
.modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--panel-2);
}

/* Map control cluster (bottom-left floating) */
.city-mapctrl {
  position: absolute; z-index: 530; left: 308px; bottom: 112px;
  display: flex; flex-direction: column; gap: 6px;
}

/* National/Twin zoom cluster — bottom-left */
.twin-zoom-ctrl {
  position: absolute; z-index: 550; left: 16px; bottom: 72px;
  display: flex; flex-direction: column; gap: 6px;
}
.twin-zoom-btn {
  width: 34px; height: 34px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  transition: all 100ms ease;
}
.twin-zoom-btn:hover { color: var(--teal); border-color: var(--teal); }
.city-mapctrl-btn {
  width: 32px; height: 32px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  transition: all 100ms ease;
}
.city-mapctrl-btn:hover { color: var(--teal); border-color: var(--teal); }
.city-mapctrl-btn.active { color: var(--teal); border-color: rgba(45,212,191,0.5); background: rgba(45,212,191,0.08); }

/* Breadcrumb enhancements */
.crumb-btn {
  background: none; padding: 3px 6px; border-radius: 3px;
  color: var(--text-faint); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.crumb-btn:hover { color: var(--text); background: var(--panel-2); }
.crumb-btn.current { color: var(--teal); font-weight: 600; }
.crumb-caret { opacity: 0.6; transition: transform 120ms; }
.crumb-btn.open .crumb-caret { transform: rotate(180deg); }

.pill.teal.clickable { cursor: pointer; }
.pill.teal.clickable:hover { background: rgba(45,212,191,0.16); }

.crumb-menu {
  position: absolute; top: 34px;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 4px; min-width: 200px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7);
  z-index: 900; padding: 4px 0;
}
.crumb-menu-item {
  padding: 8px 12px; font-family: var(--mono); font-size: 11px;
  color: var(--text); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.crumb-menu-item:hover { background: var(--panel-2); }
.crumb-menu-item.active { color: var(--teal); }
.crumb-menu-item.disabled { color: var(--text-faint); cursor: not-allowed; }
.crumb-menu-item.disabled:hover { background: transparent; }

/* Admin/lock indicator */
.admin-lock {
  display: inline-flex; padding: 1px 5px; border-radius: 2px;
  background: rgba(91,156,255,0.12); color: var(--blue);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  border: 1px solid rgba(91,156,255,0.25);
  margin-left: 6px;
}

/* Inline-edit title */
.city-info-title.editable { cursor: text; border-bottom: 1px dashed transparent; }
.city-info-title.editable:hover { border-bottom-color: var(--border-2); }
.city-info-title.editable:focus {
  outline: none; background: var(--bg-2); padding: 0 4px;
  border-radius: 2px; border-bottom-color: var(--teal);
}

/* Status pill clickable */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 3px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  border: 1px solid transparent;
  transition: all 120ms;
}
.status-pill.op { color: var(--green); background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.3); }
.status-pill.al { color: var(--amber); background: rgba(245,177,58,0.08); border-color: rgba(245,177,58,0.3); }
.status-pill.mt { color: var(--blue); background: rgba(91,156,255,0.08); border-color: rgba(91,156,255,0.3); }
.status-pill:hover { filter: brightness(1.3); }

/* Operations stats grid */
.ops-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; padding: 0 14px 12px;
}
.ops-tile {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 3px; padding: 8px 10px;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms;
}
.ops-tile:hover { border-color: var(--border-2); }
.ops-tile .ot-k { font-family: var(--mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.ops-tile .ot-v { font-family: var(--mono); font-size: 18px; color: var(--text); font-weight: 600; margin-top: 2px; }
.ops-tile .ot-d {
  font-family: var(--mono); font-size: 9px; margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.ops-tile .ot-d.up { color: var(--green); }
.ops-tile .ot-d.down { color: var(--red); }
.ops-tile .ot-d.flat { color: var(--text-faint); }
.ops-tile .ot-spark { position: absolute; right: 6px; top: 6px; opacity: 0; transition: opacity 120ms; }
.ops-tile:hover .ot-spark { opacity: 1; }

/* Restrictions list */
.restr-sec { padding: 0 14px 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.restr-sec-head { font-family: var(--mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.restr-add { font-family: var(--mono); font-size: 9px; color: var(--teal); cursor: pointer; }
.restr-add:hover { text-decoration: underline; }
.restr-row {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 3px; padding: 7px 9px; margin-bottom: 5px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.restr-row:hover { border-color: var(--border-2); }
.restr-row.expanded { border-color: var(--amber); background: rgba(245,177,58,0.04); }
.restr-row-body { flex: 1; min-width: 0; }
.restr-row-title { color: var(--text); font-size: 11px; }
.restr-row-sub { font-family: var(--mono); font-size: 9px; color: var(--text-faint); margin-top: 2px; }
.restr-row-actions { display: flex; gap: 4px; }
.restr-iconbtn {
  width: 20px; height: 20px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); border: 1px solid transparent;
}
.restr-iconbtn:hover { color: var(--teal); border-color: var(--border-2); }
.restr-iconbtn.on { color: var(--teal); background: rgba(45,212,191,0.1); border-color: rgba(45,212,191,0.3); }
.restr-expand {
  padding: 9px 10px; background: var(--bg-2);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 3px 3px;
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  margin: -5px 0 5px;
  animation: panelFade 200ms ease-out;
}
.restr-expand .ex-row { padding: 3px 0; display: flex; justify-content: space-between; gap: 8px; }
.restr-expand .ex-row .k { color: var(--text-faint); }

/* Right panel additions */
.right-sort {
  display: flex; gap: 4px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 9px;
  overflow-x: auto;
}
.right-sort-btn {
  padding: 3px 7px; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.right-sort-btn.active { color: var(--teal); border-color: rgba(45,212,191,0.4); background: rgba(45,212,191,0.08); }
.right-sort-btn:hover { color: var(--text); }

.row-menu-btn {
  width: 18px; height: 18px; color: var(--text-faint); margin-left: 4px;
  border-radius: 3px;
}
.row-menu-btn:hover { color: var(--text); background: var(--panel); }

.dist-toggle {
  cursor: pointer;
  padding: 1px 4px; border-radius: 2px;
  border: 1px dashed transparent;
}
.dist-toggle:hover { border-color: var(--border-2); }

.city-list-row.highlight { background: rgba(45,212,191,0.08); }
.city-list-row.selected { background: rgba(45,212,191,0.14); border-left: 2px solid var(--teal); padding-left: 10px; }

/* Ecopilot card */
.ecopilot-card {
  background: linear-gradient(180deg, rgba(45,212,191,0.04), rgba(91,156,255,0.03));
  border: 1px solid rgba(45,212,191,0.25);
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 10px;
  position: relative;
}
.ecopilot-card .ec-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; color: var(--teal);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 6px;
}
.ecopilot-card .ec-title { font-size: 12px; color: var(--text); line-height: 1.4; }
.ecopilot-card .ec-sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
.ecopilot-card .ec-reason {
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg-2); border: 1px dashed var(--border);
  border-radius: 3px;
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  animation: panelFade 200ms ease-out;
}
.ecopilot-card .ec-reason .step { display: flex; gap: 6px; padding: 2px 0; }
.ecopilot-card .ec-reason .step .idx { color: var(--teal); min-width: 14px; }
.ecopilot-card .ec-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ec-btn {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 3px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); background: var(--panel);
  display: inline-flex; align-items: center; gap: 4px;
}
.ec-btn:hover { color: var(--text); border-color: var(--border-2); }
.ec-btn.primary { color: var(--teal); border-color: rgba(45,212,191,0.4); background: rgba(45,212,191,0.08); }
.ec-btn.primary:hover { background: rgba(45,212,191,0.16); }
.ec-btn.ghost { color: var(--text-faint); }
.ecopilot-card .ec-pagination {
  position: absolute; bottom: 6px; right: 10px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; color: var(--text-faint);
}
.ec-pag-arrow {
  width: 16px; height: 16px; border-radius: 2px;
  color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center;
}
.ec-pag-arrow:hover { color: var(--teal); background: var(--panel-2); }

/* Legend bar — clickable items */
.clb-item.clickable { cursor: pointer; padding: 2px 4px; border-radius: 2px; transition: opacity 120ms; }
.clb-item.clickable:hover { background: var(--panel-2); }
.clb-item.off { opacity: 0.35; }
.clb-item.off .clb-dot, .clb-item.off .clb-line { filter: grayscale(1); }
.clb-title.clickable { cursor: pointer; }

/* Time scrubber */
.time-scrubber {
  position: absolute; z-index: 530;
  bottom: 44px; left: 308px; right: 620px;
  background: rgba(16,21,29,0.94); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.ts-btn {
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); display: flex; align-items: center; justify-content: center;
}
.ts-btn:hover { border-color: var(--teal); color: var(--teal); }
.ts-btn.playing { background: var(--teal); color: #000; border-color: var(--teal); }
.ts-time { font-family: var(--mono); font-size: 11px; color: var(--teal); min-width: 52px; letter-spacing: 0.06em; }
.ts-slider { flex: 1; position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; }
.ts-track { position: absolute; left: 0; right: 0; height: 4px; background: var(--bg-2); border-radius: 2px; border: 1px solid var(--border); }
.ts-fill { position: absolute; left: 0; height: 4px; background: linear-gradient(90deg, var(--teal-dim), var(--teal)); border-radius: 2px; }
.ts-thumb {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--teal); border: 2px solid var(--panel);
  box-shadow: 0 0 8px rgba(45,212,191,0.6);
  transform: translateX(-50%);
}
.ts-ticks { position: absolute; top: 10px; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.ts-tick { width: 1px; height: 6px; background: var(--border-2); }
.ts-label { font-family: var(--mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.06em; }

/* Time-of-day dim overlay */
.tod-dim {
  position: absolute; inset: 0; pointer-events: none; z-index: 515;
  background: rgba(4,10,20,0); transition: background 300ms;
}

/* Vehicle drawer */
.vh-drawer {
  position: absolute; top: 12px; right: 12px; bottom: 60px; width: 300px;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 4px; z-index: 700;
  display: flex; flex-direction: column;
  box-shadow: -6px 0 30px rgba(0,0,0,0.6);
  animation: drawerSlide 220ms cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
@keyframes drawerSlide { from { transform: translateX(8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.vh-drawer .drawer-head { background: var(--panel-2); }
.vh-drawer .drawer-body { overflow-y: auto; flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.telemetry-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-family: var(--mono); font-size: 11px;
  border-bottom: 1px dashed var(--border);
}
.telemetry-row:last-child { border-bottom: none; }
.telemetry-row .k { color: var(--text-faint); }
.telemetry-row .v { color: var(--text); }
.telemetry-bar { margin-top: 4px; }
.telemetry-bar-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-bottom: 4px; }
.telemetry-bar .progress-fill.blue { background: linear-gradient(90deg, #2563eb, var(--blue)); }
.stop-list {
  padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 3px;
  font-family: var(--mono); font-size: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.stop-item {
  display: flex; gap: 8px; align-items: flex-start;
}
.stop-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0; margin-top: 3px;
  box-shadow: 0 0 6px rgba(45,212,191,0.5);
}
.stop-dot.done { background: var(--text-faint); box-shadow: none; }
.stop-dot.next { background: var(--amber); box-shadow: 0 0 6px rgba(245,177,58,0.5); }
.stop-body { flex: 1; }
.stop-name { color: var(--text); }
.stop-time { color: var(--text-faint); font-size: 9px; }
.follow-btn {
  width: 100%; padding: 8px; margin-top: 6px;
  border: 1px solid var(--border); background: var(--panel-2);
  border-radius: 3px; color: var(--text-dim);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.follow-btn:hover { color: var(--teal); border-color: var(--teal); }
.follow-btn.active { color: #000; background: var(--teal); border-color: var(--teal); }

/* Route detail panel */
.route-panel {
  position: absolute; top: 12px; right: 12px; bottom: 60px; width: 320px;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 4px; z-index: 700;
  display: flex; flex-direction: column;
  box-shadow: -6px 0 30px rgba(0,0,0,0.6);
  animation: drawerSlide 220ms cubic-bezier(0.4,0,0.2,1);
}
.route-panel .drawer-body { overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.route-compare {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 3px;
}
.route-compare-btn {
  flex: 1; padding: 6px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); border-radius: 2px;
}
.route-compare-btn.active { background: var(--panel); color: var(--teal); }

/* Pinned incident */
.pinned-incident {
  margin: 10px 14px 0; padding: 9px 10px;
  background: rgba(255,93,93,0.06); border: 1px solid rgba(255,93,93,0.3);
  border-radius: 3px;
  font-size: 11px; color: var(--text);
  animation: panelFade 220ms ease-out;
}
.pinned-incident .pi-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 9px; color: var(--red);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px;
}
.pinned-incident .pi-close {
  width: 16px; height: 16px; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pinned-incident .pi-close:hover { color: var(--text); }

/* Restriction polygon overlay (drawn in SVG layer) */
.city-restriction-polygon {
  fill: rgba(255,93,93,0.18);
  stroke: var(--red);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  animation: restrPulse 2.4s ease-in-out infinite;
}
@keyframes restrPulse {
  0%, 100% { fill-opacity: 0.2; }
  50% { fill-opacity: 0.45; }
}

/* Fullscreen mode */
.city-stage.fullscreen .city-overlay.left,
.city-stage.fullscreen .city-overlay.right,
.city-stage.fullscreen .city-overlay.bottom-right-legend,
.city-stage.fullscreen .city-overlay.bottom-legend {
  display: none;
}

/* Confirm-toast w/ undo */
.toast.toast-undo { cursor: default; }
.toast .undo-btn {
  margin-left: 6px; color: var(--teal); cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px; border: 1px solid rgba(45,212,191,0.4); border-radius: 2px;
}
.toast .undo-btn:hover { background: rgba(45,212,191,0.1); }

/* ─────────────────────────────────────────────
   WAREHOUSE 3D DETAIL — full overlay
   ───────────────────────────────────────────── */
.wh3d-overlay {
  position: absolute; inset: 0;
  background: var(--bg);
  z-index: 900;
  display: flex; flex-direction: column;
  animation: cityFadeIn 180ms ease-out;
}
.wh3d-crumb {
  height: 44px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wh3d-crumb .back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--text);
  padding: 5px 10px; border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel); cursor: pointer;
}
.wh3d-crumb .back:hover { border-color: var(--border-2); }
.wh3d-crumb .path {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.06em;
}
.wh3d-crumb .path strong { color: var(--text); margin: 0 6px; }
.wh3d-crumb .path .now { color: var(--teal); }
.wh3d-crumb .live {
  font-family: var(--mono); font-size: 10px; color: var(--green);
  display: inline-flex; align-items: center; gap: 6px;
}
.wh3d-crumb .live .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px rgba(74,222,128,0.6);
  animation: selPulse 1.6s infinite;
}

.wh3d-stage {
  position: relative; flex: 1; overflow: hidden; background: #0a0c10;
}
.wh3d-bg {
  position: absolute; inset: 0;
  background-image: url('../assets/warehouse.png');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.wh3d-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,12,0.25), transparent 30%, transparent 70%, rgba(7,9,12,0.45));
  pointer-events: none;
}

.wh3d-kpi-strip {
  position: absolute; top: 18px; left: 20px; right: 20px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; z-index: 5;
}
.wh3d-kpi {
  background: rgba(16,21,29,0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-height: 78px;
}
.wh3d-kpi .lbl { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
.wh3d-kpi .val {
  font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 6px;
}
.wh3d-kpi .val .unit { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.wh3d-kpi .sub {
  font-family: var(--mono); font-size: 10.5px; margin-top: 2px;
  display: flex; align-items: center; gap: 5px;
}
.wh3d-kpi .sub .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.wh3d-kpi .sub.green { color: var(--green); }
.wh3d-kpi .sub.blue { color: var(--blue); }
.wh3d-kpi .sub.red { color: var(--red); }

.wh3d-info {
  position: absolute; left: 20px; top: 122px; bottom: 28px; width: 220px;
  background: rgba(16,21,29,0.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 6px;
  z-index: 5; display: flex; flex-direction: column; overflow: hidden;
}
.wh3d-info-head {
  padding: 12px 14px 10px; border-bottom: 1px solid var(--border);
}
.wh3d-info-head .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wh3d-info-head .name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.wh3d-info-pill {
  font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 100px;
  color: var(--green); background: rgba(74,222,128,0.12);
  letter-spacing: 0.06em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.wh3d-info-pill .d { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.6); }
.wh3d-info-addr { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }
.wh3d-info-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.wh3d-info-label { font-weight: 700; font-size: 12px; color: var(--text); margin: 12px 0 6px; }
.wh3d-info-label:first-child { margin-top: 0; }
.wh3d-info-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 11.5px; line-height: 1.6; }
.wh3d-info-row .k { color: var(--text-dim); }
.wh3d-info-row .v { color: var(--text); font-family: var(--mono); font-size: 11px; }
.wh3d-inv-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.wh3d-inv-row .label { font-size: 11px; color: var(--text-dim); }
.wh3d-inv-bar-track { flex: 1; height: 5px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.wh3d-inv-bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal), #0E7C6F); border-radius: 3px; }
.wh3d-inv-pct { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--teal); }
.wh3d-inv-foot { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); margin: 2px 0; }
.wh3d-info-link {
  font-size: 11px; color: var(--teal);
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; cursor: pointer;
}
.wh3d-info-link:hover { color: #5BE5D2; }

table.wh3d-table { font-size: 10px; margin-bottom: 4px; }
table.wh3d-table th { padding: 5px 6px; font-size: 9px; background: rgba(16,21,29,0.7); }
table.wh3d-table td { padding: 4px 6px; font-size: 10px; }

.wh3d-layers {
  position: absolute; right: 20px; top: 122px; width: 170px;
  background: rgba(16,21,29,0.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 6px; z-index: 5; overflow: hidden;
}
.wh3d-layers-head {
  padding: 10px 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.wh3d-layers-head svg { color: var(--teal); }
.wh3d-layer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-family: var(--mono); font-size: 11.5px;
  cursor: pointer; transition: background .12s ease;
}
.wh3d-layer-row:hover { background: var(--panel-2); }
.wh3d-layer-row.active { color: var(--text); }
.wh3d-layer-row.muted { color: var(--text-faint); }
.wh3d-layer-row .lbl { display: inline-flex; align-items: center; gap: 8px; }
.wh3d-layer-row .lbl svg { width: 12px; height: 12px; color: var(--text-dim); }
.wh3d-layer-row.active .lbl svg { color: var(--teal); }
.wh3d-layer-row .eye {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.wh3d-layer-row.active .eye { color: var(--teal); }
.wh3d-layer-row.muted .eye { color: var(--text-faint); }

.wh3d-viewmode {
  position: absolute; right: 20px; top: 360px; width: 170px;
  background: rgba(16,21,29,0.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 6px; z-index: 5;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.wh3d-viewmode .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-dim); text-transform: uppercase;
}
.wh3d-viewmode .seg { display: flex; flex-direction: column; gap: 4px; }
.wh3d-viewmode .seg button {
  padding: 6px 10px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); text-align: left;
  cursor: pointer; transition: all .12s ease;
}
.wh3d-viewmode .seg button:hover { background: var(--panel-2); color: var(--text); }
.wh3d-viewmode .seg button.active {
  color: var(--teal); border-color: rgba(45,212,191,0.4); background: rgba(45,212,191,0.08);
}

.wh3d-hotspot {
  position: absolute; z-index: 4;
  background: rgba(16,21,29,0.94); backdrop-filter: blur(8px);
  border: 1px solid var(--border-2); border-radius: 5px;
  padding: 8px 12px; min-width: 180px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.wh3d-hotspot::before {
  content: ''; position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 12px rgba(45,212,191,0.7);
  bottom: -22px; left: 18px;
  animation: wh3dPulse 1.8s ease-in-out infinite;
}
.wh3d-hotspot::after {
  content: ''; position: absolute;
  left: 22px; bottom: -16px; width: 1px; height: 16px;
  background: linear-gradient(to bottom, transparent, var(--teal));
}
@keyframes wh3dPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
.wh3d-hs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wh3d-hs-title { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text); }
.wh3d-hs-x {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint); border-radius: 3px;
  font-size: 14px; line-height: 1; font-family: var(--mono); cursor: pointer;
}
.wh3d-hs-x:hover { color: var(--text); background: var(--panel-2); }
.wh3d-hs-body {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  margin-top: 4px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px;
}
.wh3d-hs-body .ok { color: var(--green); }
.wh3d-hs-body .blue { color: var(--blue); }
.wh3d-hs-body .amber { color: var(--amber); }
.wh3d-hs-body .row { display: flex; align-items: center; gap: 6px; }
.wh3d-hs-body .row svg { width: 11px; height: 11px; flex-shrink: 0; }

.wh3d-legend {
  position: absolute; left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 18px;
  background: rgba(16,21,29,0.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 16px; z-index: 5;
}
.wh3d-legend .item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--text);
}
.wh3d-legend .dot { width: 8px; height: 8px; border-radius: 50%; }

.wh3d-actions {
  position: absolute; right: 20px; bottom: 20px;
  display: flex; gap: 8px; z-index: 5;
}
.wh3d-act-btn {
  width: 40px; height: 40px;
  background: rgba(16,21,29,0.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s ease;
}
.wh3d-act-btn:hover { color: var(--text); border-color: var(--border-2); }

.wh3d-2d-plan {
  position: absolute; inset: 0; display: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(45,212,191,0.04), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 40px),
    #0a0d12;
  padding: 60px;
}
.wh3d-2d-plan.visible { display: block; }
.wh3d-plan {
  position: relative; width: 100%; height: 100%;
  border: 1px dashed var(--border-2);
  display: grid; grid-template-columns: 1fr 1.4fr 1fr; grid-template-rows: 1fr 0.5fr 1fr;
  gap: 14px; padding: 14px;
}
.wh3d-zone {
  border: 1px solid var(--border-2); border-radius: 4px;
  background: rgba(16,21,29,0.6); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); position: relative; cursor: pointer; transition: border-color .15s;
}
.wh3d-zone:hover { border-color: var(--teal); }
.wh3d-zone .zname { font-size: 11px; font-weight: 600; color: var(--text); }
.wh3d-zone .zdesc { font-size: 10.5px; color: var(--text-dim); }
.wh3d-zone .znum {
  position: absolute; top: 8px; right: 10px;
  font-size: 9px; color: var(--text-faint); letter-spacing: 0.08em;
}
.wh3d-zone.storage { grid-column: 1 / 3; grid-row: 1; border-color: rgba(74,222,128,0.45); background: rgba(74,222,128,0.05); }
.wh3d-zone.picking { grid-column: 3; grid-row: 1; border-color: rgba(245,177,58,0.4); background: rgba(245,177,58,0.04); }
.wh3d-zone.pack    { grid-column: 2; grid-row: 2; border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.05); }
.wh3d-zone.load    { grid-column: 1; grid-row: 2 / 4; border-color: rgba(91,156,255,0.4); background: rgba(91,156,255,0.05); }
.wh3d-zone.unload  { grid-column: 2; grid-row: 3; border-color: rgba(245,177,58,0.4); background: rgba(245,177,58,0.04); }
.wh3d-zone.aux     { grid-column: 3; grid-row: 2 / 4; border-color: var(--border-2); }