:root{
  --or:#E2781A;--or-d:#C06515;
  --or-lt:rgba(226,120,26,.11);--or-brd:rgba(226,120,26,.22);
  --bg:#F2F0ED;--sur:#fff;--sur2:#F8F7F4;--sur3:#EFECE8;
  --t1:#18150F;--t2:#4A433A;--t3:#968E82;--t4:#C4BDB6;
  --ln:rgba(0,0,0,.07);--ln2:rgba(0,0,0,.13);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Google Sans","Roboto",Arial,sans-serif;
  font-optical-sizing:auto;
  font-weight:400;
  font-variation-settings:"wdth" 95;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 20%,rgba(226,120,26,.13) 0%,transparent 60%),
    radial-gradient(ellipse 60% 55% at 85% 75%,rgba(226,120,26,.10) 0%,transparent 55%),
    radial-gradient(ellipse 40% 35% at 60% 10%,rgba(242,211,180,.25) 0%,transparent 50%);
  color:var(--t1);
  line-height:1.6;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.auth-page{
  width:100%;max-width:400px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;
}

.inactive-auth-method{display:none}

.back-link{
  position:fixed;top:1.25rem;left:1.25rem;
  display:inline-flex;align-items:center;gap:5px;
  font-size:.76rem;font-weight:600;color:var(--t3);
  text-decoration:none;padding:.35rem .7rem;border-radius:8px;
  border:1px solid var(--ln2);background:var(--sur2);
  transition:color .15s,border-color .15s;
  z-index:10;
}
.back-link:hover{color:var(--or);border-color:var(--or-brd)}
.back-link svg{width:11px;height:11px}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.form-wrap{
  width:100%;
  background:var(--sur);
  border-radius:18px;
  border:1px solid var(--ln2);
  padding:2.25rem 2rem;
  box-shadow:0 4px 24px rgba(0,0,0,.07),0 1px 0 rgba(255,255,255,.9) inset;
  animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both;
  position:relative;
  z-index:1;
}

.form-logo{display:flex;justify-content:center;margin-bottom:1.25rem}
.form-logo img{height:34px;width:auto;cursor:pointer;transition:opacity .2s}
.form-logo img:hover{opacity:.65}

.auth-logo{display:block;height:34px;width:auto;margin:0 auto 1rem auto;cursor:pointer;transition:opacity .2s}
.auth-logo:hover{opacity:.65}

.form-hd{margin-bottom:1.25rem;text-align:center;display:flex;flex-direction:column;align-items:center}

.login-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  padding:.27rem .75rem;border-radius:99px;
  background:var(--or-lt);border:1px solid var(--or-brd);
  font-size:.71rem;font-weight:700;color:var(--or);
  text-transform:uppercase;letter-spacing:.08em;
  width:fit-content;margin:0 auto .85rem;
  user-select:none;
}
.login-eyebrow svg{width:11px;height:11px}

.form-title{
  font-size:1.25rem;font-weight:700;
  color:var(--t1);letter-spacing:-.02em;
  line-height:1.3;margin-bottom:.25rem;
}

.form-sub{font-size:.82rem;color:var(--t3);margin-top:.2rem}

.warning{
  display:block;
  color:#db4a39;
  font-size:.8rem;
  font-weight:500;
  background:rgba(219,74,57,.06);
  padding:.5rem .75rem;
  border-radius:.5rem;
  margin-bottom:.75rem;
  text-align:center;
}
.warning:empty{display:none}

.field{margin-bottom:.9rem}
.field label{
  display:block;font-size:.76rem;font-weight:600;
  color:var(--t2);margin-bottom:.38rem;
  user-select:none;
}
.field-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.38rem}
.field-head label{margin-bottom:0}

.forgot{
  font-size:.74rem;font-weight:600;color:var(--or);
  cursor:pointer;user-select:none;transition:color .15s;
}
.forgot:hover{color:var(--or-d)}

.input-wrap{position:relative}

.field input{
  width:100%;padding:.65rem 1rem;border-radius:10px;
  border:1.5px solid var(--ln2);background:var(--sur2);
  color:var(--t1);font-size:.88rem;font-family:inherit;
  font-variation-settings:"wdth" 95;
  outline:none;transition:border-color .18s,background .18s,box-shadow .18s;
}
.field input::placeholder{color:var(--t4)}
.field input:focus{
  border-color:var(--or);background:var(--sur);
  box-shadow:0 0 0 3px var(--or-lt);
}
.input-wrap input{padding-right:2.6rem}

.twofa-input{text-align:center;font-size:1.4rem !important;letter-spacing:.4rem;font-weight:700}

.pwd-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--t4);
  transition:color .15s;padding:4px;display:flex;
}
.pwd-toggle:hover{color:var(--t2)}
.pwd-toggle svg{width:15px;height:15px}

.btn-login{
  display:block;width:100%;padding:.75rem;border-radius:10px;margin-top:.5rem;
  background:var(--or);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:700;letter-spacing:.01em;
  text-align:center;user-select:none;
  box-shadow:0 2px 8px rgba(226,120,26,.28),0 6px 20px rgba(226,120,26,.18);
  transition:background .15s,box-shadow .15s,transform .1s;
}
.btn-login:hover{background:var(--or-d);box-shadow:0 4px 14px rgba(226,120,26,.38),0 8px 28px rgba(226,120,26,.22)}
.btn-login:active{transform:scale(.98)}

.sep{display:flex;align-items:center;gap:.75rem;margin:1.1rem 0}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--ln2)}
.sep span{font-size:.73rem;color:var(--t4);font-weight:500;white-space:nowrap;user-select:none}

.btn-google{
  width:100%;padding:.68rem;border-radius:10px;
  background:var(--sur);border:1.5px solid var(--ln2);cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--t2);
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.btn-google:hover{border-color:rgba(0,0,0,.2);background:var(--sur2);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.btn-google svg{width:17px;height:17px;flex-shrink:0}

.form-footer{
  text-align:center;margin-top:1.25rem;
  font-size:.78rem;color:var(--t3);user-select:none;
}
.form-footer span{color:var(--or);font-weight:600;cursor:pointer;transition:color .15s}
.form-footer span:hover{color:var(--or-d);text-decoration:underline}

.form-row{display:flex;gap:.75rem}
.form-row .field{flex:1;min-width:0}

@media(max-width:480px){
  body{padding:1.5rem 1rem;background-image:none}

  .back-link{position:absolute;top:-2.5rem;left:0}

  .form-wrap{
    padding:1.75rem 1.25rem;
    border-radius:16px;
  }

  .form-title{font-size:1.15rem}
  .form-sub{font-size:.8rem}

  .field input{font-size:.95rem;padding:.72rem 1rem}
  .twofa-input{font-size:1.3rem !important}

  .btn-login{font-size:.95rem;padding:.8rem}

  .btn-google{padding:.72rem;font-size:.88rem}

  .form-row{flex-direction:column;gap:0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}