/* AlpenFin — Auth UI (Login/Register/Forgot)
   Clean, responsive, “super” tech glass
*/

:root{
  --af-bg0: #050812;
  --af-bg1: #070b14;
  --af-bg2: #0a1224;

  --af-card: rgba(255,255,255,.06);
  --af-border: rgba(255,255,255,.10);

  --af-text: rgba(255,255,255,.92);
  --af-muted: rgba(255,255,255,.66);

  --af-emerald: rgba(52,211,153,.98);
  --af-sky: rgba(56,189,248,.80);
  --af-amber: rgba(251,191,36,.25);

  --af-radius: 22px;
}

.af-auth-body{
  min-height: 100vh;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--af-text);

  background:
    radial-gradient(900px 460px at 15% 10%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(820px 460px at 85% 10%, rgba(249, 252, 251, 0.16), transparent 62%),
    radial-gradient(860px 460px at 50% 100%, rgba(251,191,36,.10), transparent 62%),
    linear-gradient(180deg, var(--af-bg0), var(--af-bg2));
}

.af-auth{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  position: relative;
  overflow: hidden;
}

/* subtle moving aurora */
.af-auth::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto -120px;
  height: 380px;
  background:
    radial-gradient(600px 140px at 18% 40%, rgba(56,189,248,.22), transparent 62%),
    radial-gradient(540px 140px at 55% 40%, rgba(52,211,153,.18), transparent 62%),
    radial-gradient(560px 140px at 88% 40%, rgba(251,191,36,.14), transparent 62%);
  filter: blur(12px);
  opacity: .9;
  pointer-events: none;
}

.af-card{
  width: min(560px, 100%);
  border-radius: var(--af-radius);
  border: 1px solid var(--af-border);
  background: var(--af-card);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.af-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(500px 160px at 18% 0%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(480px 160px at 55% 0%, rgba(52,211,153,.18), transparent 60%),
    radial-gradient(520px 160px at 92% 0%, rgba(251,191,36,.12), transparent 62%);
  opacity: .95;
  pointer-events:none;
}

.af-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  padding: 1px;
  border-radius: var(--af-radius);
  background: linear-gradient(90deg,
    rgba(56,189,248,.50),
    rgba(52,211,153,.46),
    rgba(251,191,36,.25),
    rgba(56,189,248,.50)
  );
  background-size: 260% 100%;
  animation: afBorder 8s ease-in-out infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .85;
}

@keyframes afBorder{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.af-card > *{ position: relative; z-index: 1; }

/* Header */
.af-header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 18px;
}

.af-logo{
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.af-title-wrap{ min-width: 0; }

.af-title{
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--af-text);
}

.af-subtitle{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--af-muted);
}

.af-status{
  margin: 0 6px 10px;
}

/* Form */
.af-form{
  display: grid;
  gap: 14px;
  padding: 0 6px 6px;
}

.af-field{ display: grid; gap: 8px; }

.af-label{
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

.af-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,26,.55);
  color: var(--af-text);
  padding: 12px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.af-input::placeholder{
  color: rgba(255,255,255,.35);
}

.af-input:focus{
  border-color: rgba(52,211,153,.40);
  box-shadow: 0 0 0 4px rgba(52,211,153,.16);
}

.af-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.af-remember{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.af-check{
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  accent-color: var(--af-emerald);
}

.af-link{
  font-size: 13px;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}

.af-link:hover{
  color: rgba(255,255,255,.96);
  border-color: rgba(52,211,153,.55);
}

.af-link.strong{ font-weight: 800; }

.af-btn{
  margin-top: 4px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  color: rgba(8,12,22,.98);
  background: linear-gradient(90deg, var(--af-emerald), var(--af-sky));
  box-shadow:
    0 18px 36px rgba(52,211,153,.18),
    0 10px 22px rgba(56,189,248,.10);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.af-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 24px 54px rgba(52,211,153,.22),
    0 14px 28px rgba(56,189,248,.12);
}

.af-btn:active{ transform: translateY(0px); }

.af-foot{
  margin: 10px 0 0;
  text-align:center;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

.af-trust{
  margin: 10px 0 0;
  text-align:center;
  color: rgba(255,255,255,.52);
  font-size: 12px;
}

.af-copy{
  margin: 16px 0 0;
  text-align:center;
  color: rgba(255,255,255,.48);
  font-size: 12px;
}

/* Ultra small screens */
@media (max-width: 420px){
  .af-card{ padding: 18px; border-radius: 18px; }
  .af-header{ gap: 12px; }
  .af-logo{ height: 56px; }
  .af-title{ font-size: 20px; }
}

/* Wide screens */
@media (min-width: 900px){
  .af-card{ padding: 26px; }
  .af-logo{ height: 70px; }
}
/* Back to Home — elegant, subtle */
.af-back{
  padding: 0 6px 14px;
}

.af-back-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  position: relative;
  transition: color .2s ease, transform .2s ease;
}

.af-back-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(52,211,153,.6), rgba(56,189,248,.5));
  opacity: .35;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease, opacity .25s ease;
}

.af-back-link:hover{
  color: rgba(255,255,255,.95);
  transform: translateX(-3px);
}

.af-back-link:hover::after{
  transform: scaleX(1);
  opacity: .8;
}