:root {
  color-scheme: dark;
  --cyan: #43ffe8;
  --cyan-soft: rgba(67,255,232,.2);
  --panel: rgba(3,12,21,.82);
  --line: rgba(67,255,232,.55);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow-x: hidden;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eaffff;
  background: radial-gradient(circle at 50% 15%, #0d2a38 0, #030910 42%, #010306 100%);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell {
  min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: minmax(520px, 1fr);
  gap: 16px;
}
.globe-card {
  position: relative;
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(circle, rgba(20,60,80,.28), rgba(0,0,0,.72));
  box-shadow: 0 0 36px rgba(0,255,225,.2), inset 0 0 35px rgba(0,255,225,.06);
}
#container { position: absolute; inset: 0; touch-action: none; user-select: none; }
#container canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#container canvas:active { cursor: grabbing; }
.globe-help {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 5; white-space: nowrap; pointer-events: none;
  padding: 8px 12px; border: 1px solid rgba(67,255,232,.25); border-radius: 999px;
  background: rgba(0,0,0,.48); backdrop-filter: blur(8px); font-size: 12px; color: #bffef6;
}
.icon-btn {
  position: absolute; top: 14px; right: 14px; z-index: 6; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); color: var(--cyan); background: rgba(0,8,14,.72);
  box-shadow: 0 0 18px var(--cyan-soft); font-size: 24px; cursor: pointer;
}
#controlPanel {
  align-self: stretch; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 24px;
  background: var(--panel); backdrop-filter: blur(18px); box-shadow: 0 0 28px rgba(0,255,225,.16);
}
.panel-title { font-weight: 800; letter-spacing: .15em; color: var(--cyan); margin-bottom: 16px; }
#coordinates { padding: 12px; border-radius: 12px; background: rgba(67,255,232,.07); line-height: 1.5; }
#coordinates strong { display: block; color: #fff; }
#userCoordinates { display: grid; gap: 8px; margin-top: 18px; }
label { font-size: 13px; color: #bceee8; }
input {
  width: 100%; min-height: 48px; padding: 0 13px; border-radius: 12px; border: 1px solid rgba(67,255,232,.48);
  background: rgba(0,0,0,.42); color: white; outline: none;
}
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(67,255,232,.12); }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.button-row button {
  min-height: 50px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer;
  color: white; font-weight: 750; background: linear-gradient(135deg, rgba(0,255,225,.28), rgba(40,80,255,.2));
  box-shadow: 0 0 18px rgba(0,255,225,.14);
}
.button-row button:active, .icon-btn:active { transform: scale(.97); }
#map2dContainer {
  position: fixed; z-index: 20; left: 28px; top: 28px; width: min(220px, 22vw); aspect-ratio: 2 / 1;
  overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #021018;
  box-shadow: 0 0 22px rgba(0,255,225,.22); pointer-events: none;
}
#map2d { display: block; width: 100%; height: 100%; object-fit: cover; }
#marker2D { position: absolute; width: 10px; height: 10px; transform: translate(-50%,-50%); border: 2px solid white; border-radius: 50%; background: #ff304f; box-shadow: 0 0 10px #ff304f; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: minmax(58dvh, 650px) auto; }
  #controlPanel { align-self: auto; }
  #map2dContainer { width: 180px; }
}
@media (max-width: 600px) {
  .app-shell { padding: max(8px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)); gap: 10px; grid-template-rows: 58dvh auto; }
  .globe-card { min-height: 0; border-radius: 18px; }
  #controlPanel { padding: 14px; border-radius: 18px; }
  #map2dContainer { left: 16px; top: 16px; width: 116px; border-radius: 10px; }
  .globe-help { bottom: 9px; font-size: 10px; padding: 6px 9px; }
  .icon-btn { top: 9px; right: 9px; width: 40px; height: 40px; }
  .button-row { grid-template-columns: 1fr; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .app-shell { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: calc(100dvh - 16px); }
  .globe-card { min-height: 0; }
  #controlPanel { overflow-y: auto; padding: 12px; }
  #map2dContainer { width: 110px; }
}
.loading-message {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(88%, 420px);
  transform: translate(-50%, -50%);
  padding: 12px 16px;
  border: 1px solid rgba(67,255,232,.45);
  border-radius: 14px;
  background: rgba(0,8,14,.86);
  color: #dffffb;
  text-align: center;
  box-shadow: 0 0 24px rgba(0,255,225,.18);
}
.loading-message.is-error {
  border-color: rgba(255,80,100,.75);
  color: #ffdbe1;
}