:root{
  --paper:#F7FAF8;
  --ink:#0F2A1D;
  --ink-soft:#3C5347;
  --green:#127A49;
  --green-deep:#0B5C37;
  --green-pale:#E4F1EA;
  --line:#D7E4DD;
  --serif: Georgia, 'Cambria', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;font-family:var(--sans);color:var(--ink);}

.auth-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; border-bottom:1px solid var(--line);
}
.auth-topbar .brand{font-family:var(--serif); font-size:22px; color:var(--ink);}
.auth-topbar .brand-sub{
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-soft);
  margin-left:10px; padding-left:12px; border-left:1px solid var(--line);
}
.auth-topbar .switch{font-size:14px; color:var(--ink-soft);}
.auth-topbar .switch a{color:var(--green-deep); font-weight:600; text-decoration:none;}
.auth-topbar .switch a:hover{text-decoration:underline;}

.auth-wrap{display:flex; min-height:calc(100vh - 73px);}

.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--green-deep), var(--ink));
  color:#fff; padding:48px 60px 90px; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
.auth-visual::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
}
.auth-visual-images{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:70% center;
  opacity:0; filter:saturate(.85) brightness(.92); mix-blend-mode:multiply;
  animation:heroFloat 7s ease-in-out infinite;
}
/* 20s total loop: each photo holds fully visible for 9s, with a 1s fade
   in/out on each side of the swap — a clean "photo A for 10s, then photo B
   for 10s, forever" cycle, not a fast blend. */
.hero-img-1{ animation:heroFloat 7s ease-in-out infinite, heroCrossfadeA 20s ease-in-out infinite; }
.hero-img-2{ animation:heroFloat 7s ease-in-out infinite, heroCrossfadeB 20s ease-in-out infinite; }
@keyframes heroCrossfadeA{
  0%, 45%   { opacity:.55; }
  50%, 95%  { opacity:0; }
  100%      { opacity:.55; }
}
@keyframes heroCrossfadeB{
  0%, 45%   { opacity:0; }
  50%, 95%  { opacity:.55; }
  100%      { opacity:0; }
}
@keyframes heroFloat{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .hero-img{ animation:none; opacity:.4; }
  .hero-img-2{ opacity:0; }
}
.auth-visual-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
  background:linear-gradient(100deg, var(--green-deep) 0%, rgba(11,92,55,.75) 32%, rgba(11,92,55,.15) 60%, transparent 78%),
             linear-gradient(to top, var(--ink) 0%, rgba(15,42,29,.2) 45%, transparent 70%);
}
.auth-visual .card, .auth-visual h2, .auth-visual p{ position:relative; z-index:2; }
.auth-visual-logos{
  position:absolute; z-index:2; top:32px; left:clamp(24px, 4vw, 60px);
  display:flex; align-items:center; gap:clamp(12px, 2vw, 22px);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:18px 24px;
  width:min(430px, calc(100% - 48px)); overflow:hidden;
  backdrop-filter:blur(2px);
}
.auth-visual-logos img{ display:block; height:auto; min-width:0; object-fit:contain; }
.auth-visual-logos .logo-gmc{ width:62%; max-width:240px; }
.auth-visual-logos .logo-omnicell{ width:35%; max-width:135px; }
.auth-visual .card{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:22px; max-width:320px; margin-bottom:36px; backdrop-filter:blur(2px);
}
.auth-visual .card .stat{font-family:var(--serif); font-size:34px; margin-top:6px;}
.auth-visual .card .label{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#B7CFC3;}
.auth-visual h2{
  font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.25; margin:0 0 14px; max-width:460px;
}
.auth-visual p{font-size:14.5px; color:#C9DED4; max-width:420px; line-height:1.6; margin:0;}

.auth-panel{
  flex:1; max-width:520px; display:flex; align-items:center; justify-content:center; padding:40px;
}
.auth-form{width:100%; max-width:360px;}
.auth-form h1{font-family:var(--serif); font-weight:400; font-size:30px; margin:0 0 6px;}
.auth-form .sub{color:var(--ink-soft); font-size:14.5px; margin:0 0 28px;}

.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px;}
.field input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  font-size:14.5px; font-family:var(--sans); color:var(--ink); background:var(--paper);
}
.field input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale);}

.submit-btn{
  width:100%; padding:13px; border:none; border-radius:999px; margin-top:6px;
  background:var(--green); color:#fff; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .15s ease;
}
.submit-btn:hover{background:var(--green-deep);}

.msg{min-height:18px; font-size:13.5px; color:#B3261E; margin-top:14px;}

@media (max-width:860px){
  .auth-visual{display:none;}
  .auth-panel{max-width:none;}
}