:root {
  --ui-bg: rgba(255, 255, 255, 0.96);
  --ui-border: rgba(20, 20, 20, 0.12);
  --ui-text: #151515;
  --ui-muted: #6f6f6f;
  --ui-accent: #111111;
  --ui-accent-text: #ffffff;
  --radius: 18px;
  --shadow: 0 12px 35px rgba(0, 0, 0, 0.14);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ui-text);
  background: #ececec;
}

button { font: inherit; }

.app-shell,
#map { position: fixed; inset: 0; }

#map { background: #e9e9e9; }

.topbar {
  position: fixed;
  z-index: 5;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 15px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius);
  background: var(--ui-bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand strong { font-size: 16px; line-height: 1.15; }
.brand span { color: var(--ui-muted); font-size: 12px; }

.actions {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  transform: translateX(-50%);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: var(--ui-accent-text);
  background: var(--ui-accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  touch-action: manipulation;
}

.primary-button:disabled { opacity: 0.65; cursor: wait; }
.locate-icon { font-size: 22px; line-height: 1; }

.status-panel {
  position: fixed;
  z-index: 5;
  right: 16px;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 84px));
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 13px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.status-panel strong { font-size: 13px; }
.status-panel span { color: var(--ui-muted); font-size: 12px; line-height: 1.35; }

.kebab-marker {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  font-size: 17px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.user-marker {
  width: 20px;
  height: 20px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: #1877f2;
  box-shadow: 0 0 0 7px rgba(24, 119, 242, 0.18), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.maplibregl-popup-content {
  padding: 12px 14px;
  border-radius: 14px;
  font-family: inherit;
}

.popup-title { margin: 0 0 5px; font-size: 14px; font-weight: 750; }
.popup-address { margin: 0; color: #666666; font-size: 12px; line-height: 1.35; }

@media (max-width: 640px) {
  .status-panel {
    left: 16px;
    right: 16px;
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 80px));
    max-width: none;
  }
  .primary-button { min-width: min(260px, calc(100vw - 32px)); }
}