.lg-body{
  --lg-bg:#f9f9f9;
  --lg-panel:#f9f9f9;
  --lg-gold:#92774a;
  --lg-gold-dark:#7d6440;
  --lg-ink:#111;
  --lg-label:#1c1c1c;
  --lg-muted:#8a8a8a;
  --lg-err:#e0104a;
  --lg-err-bg:#fdf2f5;
  --lg-border:#e4e4e4;
  --lg-field-radius:8px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--lg-label);
  background:var(--lg-bg);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
input{font:inherit}

.lg-wrap{
  min-height:100dvh;
  display:flex;
}

.lg-media{display:none}

.lg-panel{
  flex:1;
  min-width:0;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 20px;
  background:var(--lg-panel);
}

.lg-card{
  width:100%;
  max-width:360px;
}

.lg-logo{
  display:block;
  width:150px;
  margin:0 auto 16px;
}
.lg-logo img{width:100%;height:auto}

.lg-title{
  text-align:center;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--lg-ink);
  margin-bottom:6px;
}

.lg-sub{
  text-align:center;
  font-size:15px;
  color:var(--lg-muted);
  margin-bottom:28px;
}

.lg-link{
  color:var(--lg-gold);
  font-weight:500;
  transition:color .15s ease;
}
.lg-link:hover{color:var(--lg-gold-dark);text-decoration:underline}

.lg-field{margin-bottom:18px}

.lg-label{
  display:block;
  font-size:14px;
  font-weight:500;
  color:var(--lg-label);
  margin-bottom:8px;
}
.lg-req{
  color:var(--lg-err);
  font-size:11px;
  vertical-align:super;
  margin-left:1px;
}

.lg-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.lg-row .lg-label{margin-bottom:0}
.lg-row .lg-link{font-size:14px}

.lg-input{
  width:100%;
  height:46px;
  padding:0 14px;
  border:1px solid var(--lg-border);
  border-radius:var(--lg-field-radius);
  background:#fff;
  color:var(--lg-label);
  font-size:15px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.lg-input::placeholder{color:#b6b6b6}
.lg-input:focus{
  border-color:var(--lg-gold);
  box-shadow:0 0 0 3px rgba(146,119,74,.14);
}

.lg-inputgroup{
  display:flex;
  gap:8px;
}
.lg-inputgroup .lg-input{flex:1}

.lg-eye{
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--lg-border);
  border-radius:var(--lg-field-radius);
  background:#fff;
  color:#565656;
  transition:border-color .15s ease,color .15s ease;
}
.lg-eye:hover{color:var(--lg-gold);border-color:#d6d6d6}
.lg-eye svg{grid-area:1/1;pointer-events:none}
.lg-eye .lg-eye-hide{display:none}
.lg-eye.is-reveal .lg-eye-show{display:none}
.lg-eye.is-reveal .lg-eye-hide{display:block}

.lg-error{
  display:none;
  color:var(--lg-err);
  font-size:13px;
  line-height:1.4;
  margin-top:7px;
}
.lg-field.has-error .lg-input{
  border-color:var(--lg-err);
  background:var(--lg-err-bg);
}
.lg-field.has-error .lg-error{display:block}

.lg-remember{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--lg-label);
  cursor:pointer;
  margin:18px 0 22px;
  user-select:none;
}
.lg-remember input{
  width:17px;
  height:17px;
  accent-color:var(--lg-gold);
  cursor:pointer;
}

.lg-submit{
  width:100%;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:var(--lg-field-radius);
  background:var(--lg-gold);
  color:#fff;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  transition:background .15s ease,transform .12s ease;
}
.lg-submit:hover{background:var(--lg-gold-dark)}
.lg-submit:active{transform:translateY(1px)}
.lg-submit:disabled{cursor:default}
.lg-submit.is-loading::before{
  content:"";
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:lg-spin .6s linear infinite;
}
@keyframes lg-spin{to{transform:rotate(360deg)}}

.lg-back{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:24px;
  font-size:14px;
  color:#6b6b6b;
  transition:color .15s ease;
}
.lg-back:hover{color:var(--lg-label)}

@media (min-width:1025px){
  .lg-media{
    display:block;
    flex:0 0 64%;
    max-width:64%;
    height:100dvh;
  }
  .lg-media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .lg-panel{padding:40px}
  .lg-card{max-width:400px}
  .lg-logo{margin-bottom:20px}
}