:root{
  --d3-black:#0d0d0d;
  --d3-gold:#c5a367;
  --d3-gold-2:#d8b26a;
  --d3-cream:#fff8f1;
  --d3-line:#eadfce;
}

html,body{
  min-height:100%;
}

body.auth-page{
  margin:0 !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:28px 16px !important;
  background:
    linear-gradient(90deg,rgba(13,13,13,.94),rgba(13,13,13,.74)),
    url('/frontend/assets/image/banner.png') center/cover no-repeat fixed !important;
  font-family:'Poppins','Montserrat',Arial,sans-serif !important;
  color:#111827 !important;
}

.auth-card{
  width:min(430px,100%) !important;
  margin:0 auto !important;
  background:rgba(255,255,255,.97) !important;
  border:1px solid rgba(197,163,103,.32) !important;
  border-radius:28px !important;
  box-shadow:0 28px 90px rgba(0,0,0,.42) !important;
  padding:30px !important;
  display:grid !important;
  gap:14px !important;
}

.auth-card > img{
  width:86px !important;
  height:86px !important;
  object-fit:contain !important;
  margin:0 auto 4px !important;
  border-radius:50% !important;
  background:#111 !important;
  padding:10px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
}

.auth-card h1{
  margin:0 0 6px !important;
  text-align:center !important;
  color:#111827 !important;
  font-size:30px !important;
  font-weight:900 !important;
  letter-spacing:-.5px !important;
}

.auth-card label{
  display:grid !important;
  gap:7px !important;
  color:#374151 !important;
  font-size:13px !important;
  font-weight:800 !important;
}

.auth-card input{
  width:100% !important;
  height:50px !important;
  border:1px solid #d8dde7 !important;
  border-radius:15px !important;
  padding:0 15px !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:14px !important;
  outline:none !important;
  box-sizing:border-box !important;
}

.auth-card input:focus{
  border-color:var(--d3-gold) !important;
  box-shadow:0 0 0 4px rgba(197,163,103,.16) !important;
}

.auth-card button[type="submit"]{
  width:100% !important;
  height:52px !important;
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,var(--d3-gold),#8b642e) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 14px 30px rgba(197,163,103,.28) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.google-auth-btn{
  width:100% !important;
  height:52px !important;
  border-radius:16px !important;
  border:1px solid #d8dde7 !important;
  background:#fff !important;
  color:#111827 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  text-decoration:none !important;
  font-size:14px !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.07) !important;
  box-sizing:border-box !important;
}

.google-auth-btn i{
  color:#4285f4 !important;
  font-size:18px !important;
}

.auth-card p{
  margin:4px 0 0 !important;
  color:#4b5563 !important;
  text-align:center !important;
  font-size:14px !important;
}

.auth-card a{
  color:#8b642e !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

.auth-card > a:last-child{
  display:flex !important;
  justify-content:center !important;
  margin-top:2px !important;
  color:#6b7280 !important;
  font-size:13px !important;
}

.form-error{
  background:#fef2f2 !important;
  color:#b91c1c !important;
  border:1px solid #fecaca !important;
  padding:12px !important;
  border-radius:14px !important;
  font-size:13px !important;
  font-weight:800 !important;
}

@media(max-width:520px){
  body.auth-page{
    padding:18px 14px !important;
    background:
      linear-gradient(180deg,rgba(13,13,13,.88),rgba(13,13,13,.78)),
      url('/frontend/assets/image/banner-home-mobile.png') center top/cover no-repeat fixed !important;
  }

  .auth-card{
    padding:24px !important;
    border-radius:24px !important;
  }

  .auth-card h1{
    font-size:26px !important;
  }
}