/* Small custom styles on top of Tailwind */
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

.card { animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 16px+ inputs stop iOS Safari from zooming on focus */
.field { outline: none; transition: border-color .15s, box-shadow .15s; }
.field:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); background: #fff; }

.swap { transition: transform .3s, background-color .15s; }
.swap:active { transform: rotate(180deg) scale(.92); }

.chip {
  border-radius: 9999px; background: #eef2ff; color: #4338ca;
  padding: .4rem .8rem; font-size: .75rem; font-weight: 600;
  transition: background-color .15s;
}
.chip:hover { background: #e0e7ff; }

.loading #resultValue { opacity: .4; }
#resultValue { transition: opacity .2s; }

/* Remove number input arrows */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }