.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 1023px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── Karma ────────────────────────────────────────────────── */

@keyframes karmaCelebrate {
  0% { opacity: 0; transform: scale(0.8); }
  20% { opacity: 1; transform: scale(1.05); }
  40% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.karma-celebrate { animation: karmaCelebrate 2.5s ease-out forwards; }
.karma-ring-progress { transition: stroke-dashoffset 0.6s ease-out; }

/* ── Google Places PlaceAutocompleteElement ─────────────── */

.cyber-autocomplete {
  display: block;
  width: 100%;
  --gmpx-color-surface: var(--color-cyber-dark);
  --gmpx-color-on-surface: var(--color-cyber-light);
  --gmpx-color-on-surface-variant: var(--color-cyber-muted);
  --gmpx-color-primary: var(--color-neon-cyan);
  --gmpx-color-outline: var(--color-cyber-border);
  --background-color: var(--color-cyber-dark);
  --border: 1px solid var(--color-cyber-border);
  --border-radius: 8px;
  --color: var(--color-cyber-light);
  --color-scheme: dark;
  --font-family: 'JetBrains Mono', monospace;
  --font-size: 0.875rem;
  transition: all 0.2s;
}
.cyber-autocomplete::part(input) { padding: 0.75rem; }
.cyber-autocomplete::part(icon), .cyber-autocomplete::part(prediction-item-icon) { display: none; }
.cyber-autocomplete:focus-within {
  --border: 1px solid var(--color-neon-cyan);
  box-shadow: 0 0 0 1px var(--color-neon-cyan),
              0 0 15px color-mix(in srgb, var(--color-neon-cyan) 15%, transparent);
  border-radius: 8px;
}
.cyber-autocomplete::part(prediction-list) { background: var(--color-cyber-dark); border: 1px solid var(--color-cyber-border); border-radius: 8px; margin-top: 4px; }
.cyber-autocomplete::part(prediction-item) { color: var(--color-cyber-text); font-size: 0.8125rem; padding: 0.5rem 0.75rem; }
.cyber-autocomplete::part(prediction-item-selected) { background: color-mix(in srgb, var(--color-neon-cyan) 8%, transparent); }
.cyber-autocomplete::part(prediction-item-main-text) { color: var(--color-cyber-light); }
.cyber-autocomplete::part(prediction-item-match) { color: var(--color-neon-cyan); font-weight: 600; }