body {
  background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 45%, #ffffff 100%);
  color: #1f2937;
  font-family: Arial, Helvetica, sans-serif;
}

.app-card {
  border-radius: 1.25rem;
}

.info-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1rem;
  height: 100%;
}

.info-label {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

.info-value {
  font-size: 1rem;
  font-weight: 600;
  word-break: break-word;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.status-neutral {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #4b5563;
}

.status-reliable {
  background: #e7f6ea;
  border-color: #c9e8d1;
  color: #3f6b4f;
}

.status-doubtful {
  background: #fff6dd;
  border-color: #f2e5b5;
  color: #8a7440;
}

.status-far {
  background: #fdecec;
  border-color: #f3cfcf;
  color: #946161;
}

.app-shell {
  padding-left: 1rem;
  padding-right: 1rem;
}

.gps-loading {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
}

.gps-loading-spinner {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 4px solid #bfdbfe;
  border-top-color: #2563eb;
  animation: gps-spin 0.9s linear infinite;
  flex: 0 0 auto;
}

@keyframes gps-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}