#layer-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  background: rgba(12, 12, 12, 0.78);
  border: 1px solid rgba(126, 207, 255, 0.30);
  border-radius: 4px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.85);
  font: 13px/1.6 sans-serif;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

#flight-info {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  background: rgba(12, 12, 12, 0.78);
  border: 1px solid rgba(126, 207, 255, 0.30);
  border-radius: 4px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.85);
  font: 13px/1.6 sans-serif;
}

#flight-info .flight-route {
  display: flex;
  align-items: center;
  gap: 6px;
}

#flight-info .flight-airport {
  color: #fff;
}

#flight-info .flight-arrow {
  color: rgba(126, 207, 255, 0.75);
  font-size: 14px;
  margin-left: 2px;
}

#flight-info .flight-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

#flight-info .flight-dot-airport {
  background: #ff9900;
  box-shadow: 0 0 4px rgba(255, 153, 0, 0.6);
}

#flight-info .flight-dot-jet {
  background: #ff0000;
  box-shadow: 0 0 4px rgba(255, 0, 0, 0.6);
}

#layer-panel label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.panel-buttons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.panel-nav-btn {
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(126, 207, 255, 0.30);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.65);
  font: 11px/1 sans-serif;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
}

.panel-nav-btn:hover {
  background: rgba(126, 207, 255, 0.22);
  color: #fff;
}

#btn-install-pwa {
  background: rgba(126, 207, 255, 0.16);
  color: #fff;
  justify-content: center;
}

#btn-install-pwa:hover {
  background: rgba(126, 207, 255, 0.32);
}

#pwa-ios-hint {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  font: 14px/1.5 sans-serif;
  padding: 16px;
}

#pwa-ios-hint .hint-box {
  background: rgba(12, 12, 12, 0.95);
  border: 1px solid rgba(126, 207, 255, 0.30);
  border-radius: 6px;
  padding: 16px 20px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 320px;
}

#pwa-ios-hint .hint-close {
  margin-top: 12px;
}

#titlebar-drag {
  display: none;
}

@media (display-mode: window-controls-overlay) {
  #titlebar-drag {
    display: block;
    position: fixed;
    top: 0;
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 33px);
    -webkit-app-region: drag;
    app-region: drag;
    z-index: 1000;
    background: rgba(12, 12, 12, 0.55);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(126, 207, 255, 0.18);
  }

  #titlebar-drag::after {
    content: 'Jet Globe · VN Immersive';
    display: block;
    padding: 9px 14px;
    color: rgba(255, 255, 255, 0.75);
    font: 12px/1 sans-serif;
    letter-spacing: 0.5px;
    -webkit-app-region: drag;
    app-region: drag;
  }

  #layer-panel {
    top: calc(env(titlebar-area-height, 33px) + 8px);
    right: 8px;
  }

  #flight-info {
    top: calc(env(titlebar-area-height, 33px) + 8px);
    left: 8px;
  }
}