html, body { height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.bg-aurora{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(700px 500px at 40% 120%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, #070708, #0b0b0c 40%, #0f0f11);
}

.grain:before{
  content:"";
  position: fixed; inset: 0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  opacity: .10;
  mix-blend-mode: overlay;
}

.glass{
  background: rgba(23,23,27,.72);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}

.focus-ring:focus{ outline:none; box-shadow: 0 0 0 4px rgba(255,255,255,.12); }

.swap{ animation: fadeSlide .22s ease-out; }
@keyframes fadeSlide { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.safeBottom{ padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }