
:root {
  --nav-bg:        #2C1F0E;
  --primary:       #2C1F0E;
  --olive:         #B8860B;
  --dark-olive:    #8B6508;
  --gold-bright:   #D4A017;
  --gold-muted:    #C49A1A;
  --gold-light:    #E8C96A;
  --gold-pale:     #F5DFA0;
  --section-dark:  #F7EDD8;
  --section-mid:   #F2E4C4;
  --section-warm:  #EDD9A8;
  --section-cream: #FBF5E6;
  --beige:         #F2E4C4;
  --cream:         #FBF5E6;
  --cream-dark:    #EDD9A8;
  --border:        rgba(184,134,11,.35);
  --border-bright: rgba(212,160,23,.60);
  --border-dark:   rgba(184,134,11,.18);
  --text:          #2C1F0E;
  --text-light:    #FBF5E6;
  --text-muted:    rgba(44,31,14,.60);
  --muted:         rgba(44,31,14,.60);
  --shadow:        0 20px 60px rgba(44,31,14,.12);
  --shadow-lg:     0 32px 80px rgba(44,31,14,.20);
  --shadow-card:   0 8px 32px rgba(44,31,14,.10);
  --fd:            'Cormorant Garamond', Georgia, serif;
  --fb:            'Jost', sans-serif;
  --ease:          cubic-bezier(.165,.84,.44,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--fb); background:var(--cream);
  color:var(--text); -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a      { text-decoration:none; color:inherit; }
button { font-family:var(--fb); cursor:pointer; }
input  { font-family:var(--fb); }

.login-page {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}

.login-left {
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  background:var(--nav-bg);
}

.login-left.no-sticky { position:relative; }

.login-left-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(160deg,rgba(44,31,14,.08) 0%,rgba(44,31,14,.82) 100%),
    url('../Images/Banner.png') center/cover no-repeat;
}
.login-left-bg::after {
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events:none;
}
.login-left-content {
  position:relative; z-index:1;
  height:100%; min-height:100vh;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:52px 56px;
  animation:fadeUp .9s var(--ease) both;
}

.ll-logo {
  font-family:var(--fd); font-size:1.4rem; font-weight:500;
  letter-spacing:5px; text-transform:uppercase; color:var(--cream);
  display:flex; align-items:center; gap:10px;
}
.ll-logo span { color:var(--olive); }
.ll-logo-gem  { font-size:.85rem; color:var(--olive); opacity:.7; }

.ll-body { margin:auto 0; padding:40px 0; }
.ll-eyebrow {
  display:block; font-size:.63rem; letter-spacing:5px;
  text-transform:uppercase; color:var(--olive); margin-bottom:20px;
}
.ll-headline {
  font-family:var(--fd); font-weight:300;
  font-size:clamp(40px,4.2vw,64px);
  line-height:1.1; color:var(--cream); margin-bottom:20px;
}
.ll-headline em { color:var(--olive); font-style:italic; }
.ll-desc {
  font-size:.87rem; color:rgba(251,245,230,.52);
  line-height:1.85; max-width:310px; margin-bottom:32px;
}

.ll-divider { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.ll-divider span { height:1px; background:rgba(184,134,11,.22); flex:1; }
.ll-divider i    { color:var(--olive); font-size:.78rem; opacity:.6; }

.ll-features { display:flex; flex-direction:column; gap:16px; }
.ll-feature  { display:flex; align-items:flex-start; gap:14px; }
.ll-feature-icon {
  width:38px; height:38px; flex-shrink:0;
  background:rgba(184,134,11,.1);
  border:1px solid rgba(184,134,11,.18);
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:var(--olive); font-size:.8rem;
  transition:background .25s;
}
.ll-feature:hover .ll-feature-icon { background:rgba(184,134,11,.18); }
.ll-feature p        { font-size:.82rem; color:rgba(251,245,230,.5); line-height:1.5; padding-top:2px; }
.ll-feature p strong { color:rgba(251,245,230,.82); font-weight:500; display:block; margin-bottom:2px; }

.ll-bottom {
  font-size:.65rem; letter-spacing:1px;
  color:rgba(251,245,230,.18); text-transform:uppercase;
}

.login-right {
  display:flex; align-items:center; justify-content:center;
  padding:48px 44px; background:var(--cream);
  position:relative; overflow:hidden;
}

.login-right.top-align { align-items:flex-start; padding:64px 44px; }

.login-right::before {
  content:'MH';
  position:absolute;
  font-family:var(--fd); font-size:28vw; font-weight:600;
  color:rgba(44,31,14,.028); line-height:1;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; white-space:nowrap; user-select:none;
}

.login-right.top-align::before { position:fixed; left:75%; }

.login-form-wrap {
  width:100%; max-width:430px;
  position:relative; z-index:1;
  animation:fadeUp .8s .12s var(--ease) both;
}

.lf-header { margin-bottom:32px; }
.lf-eyebrow {
  display:block; font-size:.62rem; letter-spacing:4px;
  text-transform:uppercase; color:var(--dark-olive); margin-bottom:12px;
}
.lf-title {
  font-family:var(--fd); font-size:clamp(30px,3.2vw,46px);
  font-weight:400; color:var(--text); line-height:1.1; margin-bottom:10px;
}
.lf-title em { color:var(--dark-olive); font-style:italic; }
.lf-sub      { font-size:.85rem; color:var(--muted); line-height:1.65; }

.lf-tabs {
  display:flex;
  border-bottom:1px solid var(--border);
  margin-bottom:30px;
}
.lf-tab {
  flex:1; padding:12px 0;
  background:none; border:none;
  font-size:.71rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); position:relative; transition:color .25s;
}
.lf-tab::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:2px; background:var(--primary);
  transform:scaleX(0); transition:transform .35s var(--ease);
}
.lf-tab.active        { color:var(--text); }
.lf-tab.active::after { transform:scaleX(1); }
.lf-tab:hover:not(.active) { color:rgba(44,31,14,.72); }

.lf-panel        { display:none; }
.lf-panel.active { display:block; animation:fadeUp .35s var(--ease) both; }

.lf-group { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.lf-group label {
  font-size:.64rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--dark-olive); font-weight:600;
}
.lf-input-wrap { position:relative; display:flex; align-items:center; }
.lf-input-wrap > i.field-icon {
  position:absolute; left:14px;
  color:rgba(44,31,14,.25); font-size:.8rem; pointer-events:none;
  transition:color .25s; z-index:1; flex-shrink:0;
}
.lf-group input {
  flex:1; width:100%; padding:13px 14px 13px 40px;
  border:1.5px solid var(--border); border-radius:10px;
  background:#fff; font-size:.88rem; color:var(--text);
  outline:none; min-width:0;
  transition:border-color .25s,box-shadow .25s;
}
.lf-group input:focus {
  border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(184,134,11,.15);
}
.lf-group input:focus ~ .field-icon { color:var(--olive); }
.lf-group input::placeholder { color:rgba(44,31,14,.22); }
.lf-group.has-toggle input { padding-right:44px; }

.pw-toggle {
  position:absolute; right:12px; top:0; bottom:0; margin:auto;
  height:28px; width:28px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:rgba(44,31,14,.28);
  font-size:.83rem; transition:color .2s; flex-shrink:0; cursor:pointer;
}
.pw-toggle:hover { color:var(--text); }

.lf-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.lf-util-row {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:24px;
}
.lf-check { display:flex; align-items:center; gap:8px; cursor:pointer; }
.lf-check input[type=checkbox] { width:15px; height:15px; padding:0; accent-color:var(--primary); cursor:pointer; }
.lf-check span { font-size:.8rem; color:var(--muted); }
.lf-forgot {
  font-size:.8rem; color:var(--dark-olive);
  text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
.lf-forgot:hover { color:var(--primary); }

.save-chk { display:flex; align-items:center; gap:8px; margin-top:4px; }
.save-chk input[type=checkbox] { accent-color:var(--dark-olive); width:15px; height:15px; }
.save-chk label { font-size:.78rem; color:var(--muted); cursor:pointer; font-weight:500; }

.lf-submit {
  width:100%; padding:14.5px;
  background:var(--primary); color:var(--cream);
  border:none; border-radius:10px;
  font-weight:600; font-size:.74rem;
  letter-spacing:2.5px; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background .25s,transform .2s,box-shadow .25s;
}
.lf-submit:hover {
  background:var(--dark-olive);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(44,31,14,.2);
}
.lf-submit:active { transform:translateY(0); box-shadow:none; }
.lf-submit:disabled { opacity:.7; cursor:not-allowed; transform:none; box-shadow:none; }

.lf-or {
  display:flex; align-items:center; gap:12px;
  margin:20px 0; color:var(--muted); font-size:.75rem;
}
.lf-or::before,.lf-or::after { content:''; flex:1; height:1px; background:var(--border); }

.lf-socials { display:flex; gap:10px; margin-bottom:4px; }
.lf-social-btn {
  flex:1; padding:11px 10px;
  background:#fff; border:1.5px solid var(--border); border-radius:10px;
  font-size:.78rem; color:var(--text);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .22s,border-color .22s,transform .2s;
}
.lf-social-btn:hover { background:var(--cream-dark); border-color:rgba(44,31,14,.28); transform:translateY(-1px); }
.lf-social-btn img { width:15px; height:15px; object-fit:contain; }

.lf-switch { text-align:center; margin-top:22px; font-size:.82rem; color:var(--muted); }
.lf-switch a { color:var(--dark-olive); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.lf-switch a:hover { color:var(--primary); }

.pw-strength { margin-top:8px; }
.pw-strength-bar { height:3px; background:var(--cream-dark); border-radius:3px; overflow:hidden; margin-bottom:5px; }
.pw-strength-fill { height:100%; width:0; border-radius:3px; transition:width .4s var(--ease),background .4s ease; }
.pw-strength-label { font-size:.68rem; color:var(--muted); }

.lf-success {
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 24px;
  animation:fadeUp .5s var(--ease) both;
}
.lf-success-icon {
  width:80px; height:80px; background:var(--primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 28px; font-size:1.8rem; color:var(--olive);
  box-shadow:0 8px 32px rgba(44,31,14,.18);
  animation:popIn .5s var(--ease) both;
}
@keyframes popIn {
  from { transform:scale(.6); opacity:0; }
  to   { transform:scale(1);  opacity:1; }
}
.lf-success h3 { font-family:var(--fd); font-size:2.4rem; font-weight:400; color:var(--text); line-height:1.1; margin-bottom:12px; }
.lf-success p  { font-size:.9rem; color:var(--muted); line-height:1.75; max-width:320px; margin:0 auto 28px; }
.lf-success-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 40px; background:var(--primary); color:var(--cream);
  border-radius:50px; font-size:.74rem; letter-spacing:2px;
  text-transform:uppercase; font-weight:600;
  transition:background .25s,transform .2s,box-shadow .25s;
  box-shadow:0 6px 24px rgba(44,31,14,.15);
}
.lf-success-btn:hover { background:var(--dark-olive); transform:translateY(-2px); box-shadow:0 10px 28px rgba(44,31,14,.2); color:var(--cream); }

.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--primary); color:var(--cream);
  padding:11px 26px; border-radius:50px;
  font-size:.8rem; opacity:0; visibility:hidden;
  transition:all .35s var(--ease);
  z-index:9999; white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.toast.show        { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.toast.toast-error { background:#c0392b; }

.lf-group input.error { border-color:#c0392b; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}

@media (max-width:960px) {
  .login-page            { grid-template-columns:1fr; }
  .login-left            { position:relative; height:auto; min-height:260px; }
  .login-left-content    { padding:36px 32px; min-height:260px; }
  .ll-features,.ll-desc,.ll-divider { display:none; }
  .ll-body               { padding:16px 0; }
  .ll-headline           { font-size:clamp(32px,6vw,48px); }
  .login-right           { padding:44px 28px; align-items:flex-start; min-height:unset; }
  .login-right::before   { display:none; }
}
@media (max-width:480px) {
  .lf-row-2    { grid-template-columns:1fr; gap:0; }
  .lf-socials  { flex-direction:column; }
  .login-right { padding:36px 20px; }
  .login-left-content { padding:28px 24px; }
}