:root {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  color: #f5fbfa;
  background: #0b171b;
}

* { box-sizing: border-box; }
html, body, .viewer-shell, #cesiumContainer { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; }
.viewer-shell { position: relative; background: #9aabad; }

.topbar {
  position: absolute;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}

.brand, .status-panel {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 24, 28, 0.88);
  box-shadow: 0 10px 28px rgba(3, 14, 17, 0.22);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 8px 13px 8px 8px;
  border-radius: 7px;
}

.brand img { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; }
.brand div, .status-panel div { display: grid; min-width: 0; gap: 2px; }
.brand strong { font-size: 16px; }
.brand span, .status-panel span { color: #b7c8c8; font-size: 12px; }

button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 6px;
  color: #fff;
  background: rgba(8, 130, 111, 0.94);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}

.status-panel {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(300px, calc(100% - 32px));
  padding: 11px 14px;
  border-radius: 7px;
}

.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #efb342; box-shadow: 0 0 0 4px rgba(239, 179, 66, 0.16); }
.status-dot.ready { background: #55d7a8; box-shadow: 0 0 0 4px rgba(85, 215, 168, 0.16); }
.status-dot.error { background: #ef6d5f; box-shadow: 0 0 0 4px rgba(239, 109, 95, 0.16); }
.status-panel strong { font-size: 14px; }

.loading {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #243b3d;
  background: #afbec0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.loading.hidden { opacity: 0; }
.loading span { width: 30px; height: 30px; border: 3px solid rgba(7, 134, 111, 0.22); border-top-color: #07866f; border-radius: 50%; animation: spin 700ms linear infinite; }
.loading p { margin: 0; font-size: 14px; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }

.cesium-viewer-bottom, .cesium-viewer-toolbar { display: none !important; }
.cesium-widget-credits { display: none !important; }

@media (max-width: 560px) {
  .topbar { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; }
  .brand { padding: 6px 9px 6px 6px; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 14px; }
  button { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .status-panel { left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); min-width: calc(100% - 20px); }
}

.icp-footer {
  position: absolute;
  z-index: 6;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  padding: 7px 10px;
  border-radius: 5px;
  background: rgba(10, 24, 28, 0.78);
  backdrop-filter: blur(8px);
}

.icp-footer a {
  color: #d7e4e4;
  font-size: 12px;
  text-decoration: none;
}

.icp-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 560px) {
  .icp-footer {
    right: 10px;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px);
  }
}