:root {
  --green: #74F495;
  --blue: #0E296E;
  --yellow-green: #D4E157;
  --yellow-green-hover: #C0CA33;
}




.spin-animate {
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

html {
  scrollbar-gutter: stable;  /* Prevent layout shift when scrollbar appears */
}
form.htmx-request .normal-btn { display: none; }
form.htmx-request .loading-btn { display: inline-block; }
.loading-btn .loader {
  border: 2px solid #fff;
  border-top: 2px solid #f59e42; /* orange */
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}



#modal-root {
  transition: opacity 100ms ease-out;
}

#modal-root.is-closing {
  opacity: 0;
  pointer-events: none;
}

.navbar-item-selected {
  border-bottom: 4px solid var(--green);
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

body {
  font-family: 'Ubuntu', sans-serif;
}




/* scroll new page snapping */
.page-transition {
  opacity: 0;
  transition: opacity 120ms ease-out;
}
/* subtle flash effect */
.page-flash {
  animation: pageFlash 180ms ease-out;
}

@keyframes pageFlash {
  from { opacity: 0.85; }
  to { opacity: 1; }
}