*{

  box-sizing:border-box;

}



:root{

  --auth-bg:#070706;

  --auth-card:#101112;

  --auth-card-soft:#15140f;

  --auth-gold:#d4af37;

  --auth-gold-dark:#b8860b;

  --auth-gold-soft:#e8c964;

  --auth-text:#f7f7f7;

  --auth-muted:#a9a9a9;

  --auth-border:rgba(212,175,55,.34);

  --auth-input:#0c0d0e;

  --auth-danger:#ef4444;

}



html,

body{

  min-height:100%;

}



body.auth-page{

  margin:0;

  min-height:100vh;

  display:grid;

  place-items:center;

  padding:28px;

  color:var(--auth-text);

  font-family:Inter,Segoe UI,Arial,sans-serif;

  background:

    radial-gradient(circle at 50% 20%,rgba(212,175,55,.08),transparent 32%),

    radial-gradient(circle at 12% 88%,rgba(184,134,11,.06),transparent 28%),

    var(--auth-bg);

}



.auth-shell{

  width:min(700px,100%);

}



.auth-card{

  position:relative;

  overflow:hidden;

  padding:48px 52px 34px;

  border:1px solid var(--auth-border);

  border-radius:24px;

  background:

    linear-gradient(145deg,rgba(255,255,255,.018),transparent 40%),

    var(--auth-card);

  box-shadow:

    0 28px 80px rgba(0,0,0,.58),

    0 0 38px rgba(184,134,11,.08);

}



.auth-card::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:linear-gradient(120deg,transparent,rgba(212,175,55,.025),transparent);

}



.auth-brand{

  position:relative;

  text-align:center;

}



.auth-brand-icon{

  width:82px;

  height:82px;

  display:grid;

  place-items:center;

  margin:0 auto 15px;

  border:1px solid rgba(212,175,55,.4);

  border-radius:24px;

  font-size:43px;

  background:

    radial-gradient(circle,rgba(212,175,55,.18),rgba(184,134,11,.05) 60%,transparent);

  box-shadow:0 0 32px rgba(212,175,55,.13);

}



.auth-brand h1{

  margin:0;

  font-size:42px;

  letter-spacing:-1px;

  line-height:1.1;

}



.auth-brand p{

  margin:13px 0 0;

  color:#cbb98d;

  font-size:17px;

}



.auth-divider{

  display:flex;

  align-items:center;

  gap:15px;

  margin:32px 0;

  color:var(--auth-gold);

}



.auth-divider::before,

.auth-divider::after{

  content:"";

  flex:1;

  height:1px;

  background:linear-gradient(90deg,transparent,var(--auth-border));

}



.auth-divider::after{

  background:linear-gradient(90deg,var(--auth-border),transparent);

}



.auth-form{

  display:grid;

  gap:16px;

}



.auth-field{

  position:relative;

}



.auth-field-icon{

  position:absolute;

  left:17px;

  top:50%;

  transform:translateY(-50%);

  color:#8f8f8f;

  font-size:19px;

  pointer-events:none;

}



.auth-input{

  width:100%;

  height:60px;

  padding:0 52px;

  border:1px solid rgba(255,255,255,.15);

  border-radius:14px;

  outline:none;

  background:var(--auth-input);

  color:var(--auth-text);

  font-size:17px;

  transition:.2s ease;

}



.auth-input::placeholder{

  color:#737373;

}



.auth-input:focus{

  border-color:var(--auth-gold);

  box-shadow:0 0 0 4px rgba(212,175,55,.09);

}



.auth-toggle-password{

  position:absolute;

  right:12px;

  top:50%;

  transform:translateY(-50%);

  width:38px;

  height:38px;

  padding:0;

  border:0;

  border-radius:10px;

  background:transparent;

  color:#999;

  cursor:pointer;

  font-size:17px;

}



.auth-primary{

  width:100%;

  min-height:60px;

  margin-top:4px;

  border:0;

  border-radius:14px;

  cursor:pointer;

  color:#151000;

  font-weight:800;

  font-size:17px;

  background:linear-gradient(135deg,#e3bd46,#c99509);

  box-shadow:0 14px 34px rgba(184,134,11,.2);

  transition:.18s ease;

}



.auth-primary:hover{

  transform:translateY(-1px);

  filter:brightness(1.06);

}



.auth-primary:active{

  transform:translateY(0);

}



.auth-error{

  position:relative;

  margin:20px 0 0;

  padding:13px 15px;

  border:1px solid rgba(239,68,68,.52);

  border-radius:12px;

  background:rgba(127,29,29,.22);

  color:#fecaca;

}



.auth-footer{

  position:relative;

  margin:34px -52px -34px;

  padding:20px 25px;

  border-top:1px solid rgba(255,255,255,.07);

  text-align:center;

  color:#777;

  font-size:13px;

}



.auth-footer span{

  color:var(--auth-gold);

  margin-right:6px;

}



.auth-heading{

  text-align:center;

  margin-bottom:25px;

}



.auth-heading-icon{

  width:72px;

  height:72px;

  display:grid;

  place-items:center;

  margin:0 auto 15px;

  border:1px solid var(--auth-border);

  border-radius:50%;

  font-size:34px;

  color:var(--auth-gold);

  background:radial-gradient(circle,rgba(212,175,55,.13),transparent 67%);

}



.auth-heading h1{

  margin:0;

  font-size:36px;

}



.auth-heading p{

  margin:12px 0 0;

  color:#c0c0c0;

  font-size:16px;

}



.auth-tabs{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:4px;

  margin:26px 0 30px;

  padding:4px;

  border:1px solid var(--auth-border);

  border-radius:14px;

  background:#0a0b0c;

}



.auth-tab{

  min-height:52px;

  border:0;

  border-radius:10px;

  cursor:pointer;

  background:transparent;

  color:#aaa;

  font-weight:700;

  font-size:15px;

  transition:.2s ease;

}



.auth-tab.active{

  color:#181100;

  background:linear-gradient(135deg,#e3bd46,#c99509);

  box-shadow:0 8px 20px rgba(184,134,11,.17);

}



.auth-code-field{

  position:relative;

}



.auth-code-field .auth-input{

  height:68px;

  padding-left:58px;

  text-align:center;

  letter-spacing:.38em;

  font-size:26px;

  font-variant-numeric:tabular-nums;

}



.auth-recovery-field .auth-input{

  height:68px;

  padding-left:58px;

  text-align:center;

  letter-spacing:.13em;

  font-size:21px;

  text-transform:uppercase;

}



.auth-cancel{

  display:block;

  margin-top:28px;

  padding-top:22px;

  border-top:1px solid rgba(255,255,255,.07);

  text-align:center;

  color:#888;

  text-decoration:none;

  transition:.2s ease;

}



.auth-cancel:hover{

  color:var(--auth-gold-soft);

}



.auth-panel[hidden]{

  display:none !important;

}



@media(max-width:650px){

  body.auth-page{

    padding:15px;

  }



  .auth-card{

    padding:34px 22px 24px;

    border-radius:20px;

  }



  .auth-brand h1{

    font-size:35px;

  }



  .auth-heading h1{

    font-size:30px;

  }



  .auth-footer{

    margin:28px -22px -24px;

  }



  .auth-tabs{

    grid-template-columns:1fr;

  }

}