nodewarden/webapp/src/styles/auth.css

.loading-screen {
  @apply grid h-full place-items-center text-lg text-muted;
}

.auth-page {
  @apply relative grid min-h-full place-items-center bg-transparent p-6;
}

.public-send-page {
  @apply min-h-[80vh] items-center;
  justify-items: center;
}

.public-send-title {
  @apply mt-2;
}

.public-send-card {
  @apply mt-2.5;
}

.public-send-card-head {
  @apply mb-2 flex items-center justify-between gap-2 text-sm font-bold;
  color: var(--muted);
}

.public-send-copy-btn {
  @apply h-8 shrink-0 px-3 text-sm;
}

.not-found-page {
  @apply relative grid min-h-full place-items-center overflow-hidden p-6 text-center;
  background:
    radial-gradient(circle at 50% 42%, rgba(28, 118, 255, 0.24), transparent 27rem),
    radial-gradient(circle at 16% 84%, rgba(22, 163, 255, 0.10), transparent 22rem),
    linear-gradient(180deg, #020b1a 0%, #061328 48%, #0a1730 100%);
}

.not-found-shell {
  @apply relative z-20 grid w-full max-w-[620px] justify-items-center gap-5 px-4 py-7 text-center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.not-found-space {
  @apply pointer-events-none absolute inset-0 overflow-hidden;
  height: 100%;
  min-height: 100%;
}

@keyframes not-found-star-fall {
  0% {
    opacity: 0;
    transform: translateY(-100vh);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(100vh);
  }
}

@keyframes not-found-astronaut-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.not-found-star-box {
  @apply absolute left-0 top-0 z-10 h-full w-full;
}

.not-found-star-box-1 {
  animation: not-found-star-fall 9s linear infinite;
}

.not-found-star-box-2 {
  animation: not-found-star-fall 9s -2.1s linear infinite;
}

.not-found-star-box-3 {
  animation: not-found-star-fall 9s -4.3s linear infinite;
}

.not-found-star-box-4 {
  animation: not-found-star-fall 9s -6.4s linear infinite;
}

.not-found-star {
  @apply absolute h-[3px] w-[3px] rounded-full;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.82);
  opacity: 0.72;
}

.not-found-star::before,
.not-found-star::after {
  @apply absolute rounded-full;
  content: "";
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

.not-found-star::before {
  @apply h-[5px] w-[5px];
  top: 72px;
  left: 78px;
  opacity: 0.65;
}

.not-found-star::after {
  @apply h-[7px] w-[7px];
  top: 10px;
  left: 168px;
  opacity: 0.88;
}

.not-found-star-position-1 {
  top: 5vh;
  left: 8%;
}

.not-found-star-position-2 {
  top: 23vh;
  left: 21%;
}

.not-found-star-position-3 {
  top: 42vh;
  left: 38%;
}

.not-found-star-position-4 {
  top: 61vh;
  left: 56%;
}

.not-found-star-position-5 {
  top: 15vh;
  left: 70%;
}

.not-found-star-position-6 {
  top: 34vh;
  left: 82%;
}

.not-found-star-position-7 {
  top: 72vh;
  left: 93%;
}

.not-found-astronaut {
  @apply relative z-10;
  width: 220px;
  height: 264px;
  animation: not-found-astronaut-spin 5s linear infinite;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.28));
}

.not-found-astro-stage {
  @apply relative grid place-items-center;
  height: 280px;
}

.not-found-astro-pack {
  @apply absolute z-[1];
  top: 57px;
  left: 66px;
  width: 88px;
  height: 132px;
  background: #8db0c7;
  border-radius: 44px 44px 0 0 / 27px 27px 0 0;
}

.not-found-astro-head {
  @apply absolute z-[3] rounded-full;
  top: 30px;
  left: 68px;
  width: 85px;
  height: 70px;
  background: linear-gradient(90deg, #e4ebef 0%, #e4ebef 50%, #fbfdfa 50%, #fbfdfa 100%);
}

.not-found-astro-head::after {
  @apply absolute rounded-[13px];
  content: "";
  top: 13px;
  left: 16px;
  width: 53px;
  height: 44px;
  background: linear-gradient(180deg, #28c4df 0%, #28c4df 50%, #078dbb 50%, #078dbb 100%);
}

.not-found-astro-head::before {
  @apply absolute rounded-[5px];
  content: "";
  top: 23px;
  left: -4px;
  width: 11px;
  height: 22px;
  background: #587789;
  box-shadow: 81px 0 0 #587789;
}

.not-found-astro-body {
  @apply absolute z-[2];
  top: 92px;
  left: 73px;
  width: 75px;
  height: 88px;
  border-radius: 36px / 18px;
  background: linear-gradient(90deg, #e4ebef 0%, #e4ebef 50%, #fbfdfa 50%, #fbfdfa 100%);
}

.not-found-astro-panel {
  @apply absolute;
  top: 18px;
  left: 11px;
  width: 53px;
  height: 36px;
  background: #b8cdec;
}

.not-found-astro-panel::before {
  @apply absolute;
  content: "";
  top: 8px;
  left: 6px;
  width: 27px;
  height: 5px;
  background: #fbfdfa;
  box-shadow: 0 8px 0 #fbfdfa, 0 16px 0 #fbfdfa;
}

.not-found-astro-panel::after {
  @apply absolute rounded-full;
  content: "";
  top: 8px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #fbfdfa;
  box-shadow: 0 13px 0 2px #fbfdfa;
}

.not-found-astro-arm {
  @apply absolute z-[2];
  top: 107px;
  width: 70px;
  height: 26px;
}

.not-found-astro-arm-left {
  left: 28px;
  background: #e4ebef;
  border-radius: 0 0 0 34px;
}

.not-found-astro-arm-right {
  right: 28px;
  background: #fbfdfa;
  border-radius: 0 0 34px 0;
}

.not-found-astro-arm::before {
  @apply absolute;
  content: "";
  top: -35px;
  width: 26px;
  height: 62px;
}

.not-found-astro-arm-left::before {
  left: 0;
  background: #e4ebef;
  border-radius: 44px 44px 0 105px / 44px 44px 0 96px;
}

.not-found-astro-arm-right::before {
  right: 0;
  background: #fbfdfa;
  border-radius: 44px 44px 105px 0 / 44px 44px 96px 0;
}

.not-found-astro-arm::after {
  @apply absolute;
  content: "";
  top: -21px;
  width: 26px;
  height: 9px;
}

.not-found-astro-arm-left::after {
  left: 0;
  background: #6e91a4;
}

.not-found-astro-arm-right::after {
  right: 0;
  background: #b6d2e0;
}

.not-found-astro-leg {
  @apply absolute z-[2];
  bottom: 62px;
  width: 26px;
  height: 36px;
}

.not-found-astro-leg-left {
  left: 67px;
  background: #e4ebef;
  transform: rotate(20deg);
}

.not-found-astro-leg-right {
  right: 64px;
  background: #fbfdfa;
  transform: rotate(-20deg);
}

.not-found-astro-leg::before {
  @apply absolute;
  content: "";
  bottom: -23px;
  width: 44px;
  height: 22px;
}

.not-found-astro-leg-left::before {
  left: -18px;
  background: #e4ebef;
  border-bottom: 9px solid #6d96ac;
  border-radius: 27px 0 0 0;
}

.not-found-astro-leg-right::before {
  right: -18px;
  background: #fbfdfa;
  border-bottom: 9px solid #b0cfe4;
  border-radius: 0 27px 0 0;
}

.not-found-brand {
  @apply inline-flex max-w-full items-center justify-center gap-3.5;
}

.not-found-logo {
  @apply h-14 w-[70px] flex-shrink-0 object-contain;
  filter: drop-shadow(0 8px 18px rgba(43, 102, 217, 0.22));
}

.not-found-wordmark {
  @apply block max-w-full;
  width: clamp(200px, 38vw, 330px);
  aspect-ratio: 862 / 102;
  background: #116ff9;
  mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
  -webkit-mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
}

.not-found-code {
  @apply rounded-full px-3 py-1 text-sm font-extrabold;
  background: #eef4ff;
  color: #1d4ed8;
}

.not-found-copy {
  @apply grid justify-items-center gap-3;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.not-found-shell h1 {
  @apply m-0 text-3xl font-extrabold leading-tight;
  color: #f8fbff;
}

.not-found-shell p {
  @apply m-0 max-w-[420px] text-sm leading-relaxed;
  color: rgba(220, 232, 251, 0.82);
}

.not-found-action {
  @apply mt-1;
}

@media (max-width: 520px) {
  .not-found-page {
    background:
      radial-gradient(circle at 50% 36%, rgba(28, 118, 255, 0.24), transparent 18rem),
      radial-gradient(circle at 18% 82%, rgba(22, 163, 255, 0.10), transparent 16rem),
      linear-gradient(180deg, #020b1a 0%, #061328 48%, #0a1730 100%);
  }

  .not-found-shell {
    @apply gap-4 px-5 py-8;
  }

  .not-found-brand {
    @apply gap-2.5;
  }

  .not-found-logo {
    @apply h-12 w-[60px];
  }

  .not-found-wordmark {
    width: clamp(170px, 52vw, 230px);
  }

  .not-found-space {
    height: 100%;
    min-height: 100%;
  }

  .not-found-astronaut {
    width: 176px;
    height: 211px;
  }

  .not-found-astro-stage {
    height: 224px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .not-found-star-box,
  .not-found-astronaut {
    animation: none;
  }
}

.inline-status-icon {
  @apply align-text-bottom;
}

.auth-card {
  @apply relative w-full overflow-hidden border bg-panel p-[30px] shadow-elevated;
  border-color: var(--line);
  @apply rounded-[22px];
}

.auth-card h1 {
  @apply m-0 mb-1 text-center;
}

.standalone-eyebrow {
  @apply mb-1 text-center text-xs font-extrabold uppercase tracking-[0.12em];
  color: var(--muted);
}

.standalone-shell {
  @apply grid w-[min(640px,100%)] gap-3.5;
}

.standalone-brand {
  @apply mb-3 inline-flex items-center gap-3.5;
}

.standalone-brand-outside {
  @apply mb-0.5 w-full justify-center;
}

.standalone-brand-logo {
  @apply h-14 w-[70px] flex-shrink-0 object-contain;
  filter: drop-shadow(0 8px 18px rgba(43, 102, 217, 0.22));
}

.standalone-brand-wordmark {
  @apply block max-w-full;
  width: clamp(200px, 30vw, 340px);
  aspect-ratio: 862 / 102;
  background: #116ff9;
  mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
  -webkit-mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
}

.standalone-title {
  @apply m-0 mb-1 text-left text-3xl font-bold leading-tight tracking-normal;
}

.standalone-muted {
  @apply text-left;
}

.jwt-warning-head {
  @apply mb-2.5 flex items-center justify-center gap-2.5 text-center;
  color: #b45309;
}

.jwt-warning-box {
  @apply rounded-xl border border-amber-200 bg-amber-50 px-3.5 py-3;
}

.jwt-warning-label {
  @apply mb-1.5 text-[13px] font-bold;
  color: #92400e;
}

.jwt-warning-copy {
  @apply m-0 mb-3.5 leading-[1.6];
  color: #475569;
}

.jwt-warning-list {
  @apply m-0 pl-[18px] leading-[1.55];
  color: #334155;
}

.jwt-inline-link {
  @apply font-bold no-underline;
  color: #1d4ed8;
}

.jwt-inline-link:hover {
  text-decoration: underline;
}

.jwt-secret-fields {
  @apply mt-2 grid gap-1.5;
}

.jwt-secret-row {
  @apply grid items-start gap-2;
  grid-template-columns: 88px minmax(0, 1fr);
}

.jwt-secret-row > span {
  color: #64748b;
}

.jwt-generator {
  @apply mt-3.5;
}

.jwt-generator-actions {
  @apply mt-2.5 flex flex-wrap items-center gap-2.5;
}

.jwt-copy-hint {
  @apply text-[13px] font-bold;
  color: #15803d;
}

.standalone-footer {
  @apply w-full text-center text-[13px] text-slate-500;
}

.standalone-footer a {
  @apply font-bold no-underline;
  color: #1d4ed8;
}

.standalone-footer a:hover {
  text-decoration: underline;
}

.standalone-version {
  @apply font-bold;
  color: #1d4ed8;
}