:root {
  --bg:     #0d292d;
  --s1:     #0a2125;
  --s2:     #0e4e4e;
  --border: #1c5e5e;
  --bhi:    #2d8080;
  --ac:     #e2ff00;
  --ok:     #22c45e;
  --err:    #ef4444;
  --txt:    #ffffff;
  --tm:     #6ba3aa;
  --r:      10px;
  --rsm:    7px;
  --ease:   cubic-bezier(.4,0,.2,1);
  --t:      .22s;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Figtree',sans-serif;
  background:var(--bg);color:var(--txt);
  min-height:100vh;display:flex;
  align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
  padding:20px;
}

/* BG */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url('../img/bg-fire.jpg');
  background-size:cover;background-position:center 20%;background-repeat:no-repeat;
  opacity:.38;filter:saturate(.75);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(13,41,45,.55) 0%,rgba(13,41,45,.72) 50%,rgba(13,41,45,.92) 100%),
    radial-gradient(ellipse 70% 50% at 50% -10%,rgba(226,255,0,.07) 0%,transparent 60%);
}

/* CARD */
.card{
  position:relative;z-index:2;
  width:100%;max-width:400px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:18px;
  padding:40px 36px;
  box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;
  animation:fadeUp .45s var(--ease) both;
}

/* TOP */
.logo-wrap{text-align:center;margin-bottom:32px;}
.logo-script{
  font-family:'Figtree',sans-serif;
  font-size:.72rem;font-weight:600;color:var(--tm);
  letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:1px;
}
.logo-bold{
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.4rem;font-weight:900;line-height:.92;letter-spacing:-.01em;
  background:linear-gradient(140deg,#fff 0%,var(--ac) 55%,#fff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(226,255,0,.3));
  display:block;
}
.logo-mono{
  font-family:'Source Code Pro',monospace;
  font-size:.56rem;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(255,255,255,.28);display:block;margin-top:4px;
}
.login-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.2rem;font-weight:800;color:var(--txt);margin-top:18px;
}
.login-sub{font-size:.8rem;color:var(--tm);margin-top:3px;}

/* GOOGLE BTN */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 20px;
  background:var(--s2);border:1.5px solid var(--border);
  border-radius:var(--r);color:var(--txt);
  font-family:'Figtree',sans-serif;font-weight:700;font-size:.92rem;
  cursor:pointer;transition:all var(--t);
  animation:fadeUp .45s .08s var(--ease) both;
}
.btn-google:hover{border-color:var(--bhi);background:#0c3a3a;transform:translateY(-1px);}
.btn-google:active{transform:none;}

/* DIVIDER */
.divider{
  display:flex;align-items:center;gap:10px;
  margin:20px 0;
  animation:fadeUp .45s .14s var(--ease) both;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.divider span{font-size:.7rem;font-weight:600;color:var(--tm);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}

/* FIELDS */
.field{margin-bottom:16px;animation:fadeUp .45s var(--ease) both;}
.field:nth-child(1){animation-delay:.18s;}
.field:nth-child(2){animation-delay:.23s;}
.f-label{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tm);margin-bottom:6px;display:block;transition:color var(--t);
}
.field.focused .f-label,.field.valid .f-label{color:var(--ac);}
.field.error   .f-label{color:var(--err);}
.f-wrap{position:relative;display:flex;align-items:center;}
.f-ico{
  position:absolute;left:12px;color:var(--tm);
  display:flex;align-items:center;pointer-events:none;transition:color var(--t);
}
.field.focused .f-ico,.field.valid .f-ico{color:var(--ac);}
.field.error   .f-ico{color:var(--err);}
.f-status{position:absolute;right:12px;display:flex;align-items:center;opacity:0;transition:opacity .2s;}
.field.valid .f-status{opacity:1;color:var(--ok);}
.field.error .f-status{opacity:1;color:var(--err);}
.pw-toggle{
  position:absolute;right:12px;background:none;border:none;
  cursor:pointer;color:var(--tm);display:flex;align-items:center;
  padding:4px;transition:color var(--t);
}
.pw-toggle:hover{color:var(--txt);}
input[type="email"],input[type="password"],input[type="text"],input[type="tel"],input[type="date"],input[type="number"]{
  width:100%;background:var(--s2);border:1.5px solid var(--border);
  border-radius:var(--r);color:var(--txt);
  font-family:'Figtree',sans-serif;font-size:.92rem;
  padding:11px 42px;outline:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
  -webkit-appearance:none;
}
input[type="date"]{color-scheme:dark;padding-right:14px;}
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:brightness(0) invert(1);opacity:.4;cursor:pointer;
  transition:opacity .18s;margin-left:4px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:.85;}
input[type="number"]{padding-right:14px;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input::placeholder{color:var(--tm);}
input:focus{border-color:var(--ac);background:#0c3a3a;box-shadow:0 0 0 3px rgba(226,255,0,.1);}
.field.error input{border-color:var(--err);box-shadow:0 0 0 3px rgba(239,68,68,.1);}
.field.valid input{border-color:rgba(34,196,94,.4);}
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 999px #0c3a3a inset!important;
  -webkit-text-fill-color:var(--txt)!important;
  border-color:var(--ac)!important;
  transition:background-color 9999s ease 9999s;
}
.f-hint{margin-top:4px;font-size:.73rem;min-height:15px;color:var(--tm);transition:color .18s;}
.f-hint.err{color:var(--err);}
.f-hint.ok{color:var(--ok);}

/* FORGOT */
.row-actions{
  display:flex;align-items:center;justify-content:flex-end;
  margin-bottom:20px;margin-top:-8px;
  animation:fadeUp .45s .28s var(--ease) both;
}
.forgot{
  font-size:.78rem;color:var(--tm);text-decoration:none;
  border-bottom:1px solid transparent;transition:all var(--t);cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:'Figtree',sans-serif;padding:0;
}
.forgot:hover{color:var(--ac);border-bottom-color:rgba(226,255,0,.35);}

/* SUBMIT */
.btn-login{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ac);color:#000;border:none;border-radius:var(--r);
  font-family:'Figtree',sans-serif;font-weight:800;font-size:.95rem;
  padding:13px 24px;cursor:pointer;
  transition:all var(--t);
  box-shadow:0 4px 18px rgba(226,255,0,.25);
  animation:fadeUp .45s .32s var(--ease) both;
  position:relative;overflow:hidden;
}
.btn-login::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%);pointer-events:none;}
.btn-login:hover{background:#d4f000;box-shadow:0 6px 24px rgba(226,255,0,.38);transform:translateY(-1px);}
.btn-login:active{transform:none;}
.btn-login:disabled{opacity:.45;pointer-events:none;}


/* FORGOT PANEL */
.forgot-panel{display:none;}
.forgot-panel.show{display:block;animation:fadeUp .3s var(--ease) both;}
.login-panel.hide{display:none;}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  color:var(--tm);font-family:'Figtree',sans-serif;
  font-size:.8rem;font-weight:600;padding:0;margin-bottom:22px;
  transition:color var(--t);
}
.back-link:hover{color:var(--ac);}

/* TOAST */
.toast-wrap{position:fixed;top:14px;right:14px;left:14px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none;}
.toast{display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-radius:9px;max-width:300px;width:100%;pointer-events:all;animation:toastIn .28s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 8px 26px rgba(0,0,0,.4);border:1px solid transparent;}
.toast.ok{background:rgba(10,40,20,.97);border-color:rgba(34,196,94,.28);}
.toast.err{background:rgba(40,10,10,.97);border-color:rgba(239,68,68,.28);}
.toast.warn{background:rgba(35,28,8,.97);border-color:rgba(226,255,0,.25);}
.toast.ok .ti{color:var(--ok);}.toast.err .ti{color:var(--err);}.toast.warn .ti{color:var(--ac);}
.toast .tb strong{display:block;font-size:.84rem;margin-bottom:2px;}
.toast .tb span{font-size:.75rem;color:var(--tm);}
.toast.out{animation:toastOut .2s var(--ease) forwards;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(12px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(12px) scale(.9)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

@media(max-width:600px){
  .logo-wrap{text-align:center;}
  .logo-script,.logo-bold,.logo-mono{display:block;text-align:center;}
  .login-title,.login-sub{text-align:center;}
  .back-link{justify-content:center;width:100%;}
}
@media(max-width:440px){
  .card{padding:28px 18px;border-radius:14px;}
  .logo-bold{font-size:2rem;}
}