/* Local Tailwind replacement for ar-webxr-v1 HUD styling */
/* Minimal CSS needed for AR overlay panels - replaces cdn.tailwindcss.com */

.ar-hud-panel {
  backdrop-filter: blur(10px);
  background: rgba(2, 6, 23, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Base text and button styles */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-[0.35em] {
  letter-spacing: 0.35em;
}

.text-emerald-300 {
  color: #6ee7b7;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-semibold {
  font-weight: 600;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.leading-relaxed {
  line-height: 1.625;
}

.text-slate-300 {
  color: #cbd5e1;
}

.mt-4 {
  margin-top: 1rem;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-3 {
  gap: 0.75rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.bg-emerald-400 {
  background-color: #4ade80;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.font-semibold {
  font-weight: 600;
}

.text-slate-900 {
  color: #0f172a;
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:bg-emerald-300:hover {
  background-color: #86efac;
}

.bg-slate-700 {
  background-color: #334155;
}

.text-slate-100 {
  color: #f1f5f9;
}

.hover\:bg-slate-600:hover {
  background-color: #475569;
}

.pointer-events-auto {
  pointer-events: auto;
}

.w-full {
  width: 100%;
}

.max-w-md {
  max-width: 18rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.p-4 {
  padding: 1rem;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.md\:max-w-sm {
  @media (min-width: 768px) {
    max-width: 14rem;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .md\:items-start {
    align-items: flex-start;
  }
  
  .md\:justify-between {
    justify-content: space-between;
  }
}