/* ==========================================================================
   LOGIN SCREEN
   ========================================================================== */

#login-screen{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  background:#f2f4f6;
}
.login-visual{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#0a1a12 0%,#123020 42%,#1d5230 68%,#2f7a3c 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:56px 40px 0;
  color:#fff;
}
/* Painterly farm scene, drawn with CSS/SVG rather than a bitmap */
.scene{position:absolute;inset:0;z-index:0;}
.scene svg{width:100%;height:100%;display:block;}
.login-visual__inner{position:relative;z-index:2;text-align:center;max-width:420px;}
.brand-mark{width:190px;height:120px;margin:0 auto 4px;display:block;}
.login-visual h1{
  font-size:44px;line-height:1.18;font-weight:700;margin:0;
  text-shadow:0 3px 18px rgba(0,0,0,.55);
}
.brand-rule{
  display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 0;
}
.brand-rule span{font-size:19px;font-weight:600;color:#cfe6d2;white-space:nowrap;}
.brand-rule i{display:block;height:1px;width:52px;background:rgba(255,255,255,.55);}
.login-visual p.tagline{
  margin:20px auto 0;font-size:16px;line-height:1.75;font-weight:500;color:#e8f2e8;max-width:330px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.scene-glow{
  position:absolute;left:0;right:0;bottom:0;height:45%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,26,18,0) 0%,rgba(10,26,18,.18) 100%);
}

/* Right panel */
.login-panel{
  display:flex;align-items:center;justify-content:center;padding:40px 48px;
}
.login-card{
  width:100%;max-width:560px;background:#fff;border-radius:22px;
  box-shadow:0 18px 60px rgba(16,24,40,.10);
  padding:44px 48px 30px;
}
.login-card__shield{width:66px;height:74px;margin:0 auto 20px;display:block;}
.login-card h2{
  text-align:center;font-size:27px;font-weight:600;margin:0 0 10px;color:#16281d;
}
.login-card .sub{
  text-align:center;font-size:15.5px;color:#6f7c74;margin:0 0 26px;
}
.field{position:relative;margin-bottom:14px;}
.field__icon{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  color:#8d9a92;pointer-events:none;display:flex;
}
.field input{
  width:100%;height:58px;border:1px solid #dfe4e0;border-radius:12px;
  background:#fbfcfb;padding:0 52px 0 54px;font-size:16px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.field input::placeholder{color:#98a49c;}
.field input:hover{border-color:#cfd6d1;}
.field input:focus{
  outline:none;border-color:var(--green-500);background:#fff;
  box-shadow:0 0 0 3px rgba(24,144,72,.13);
}
.field.invalid input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(224,69,59,.12);}
.eye-btn{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#7e8c84;
}
.eye-btn:hover{background:#f0f3f1;color:var(--green-600);}
.login-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 0 22px;flex-wrap:wrap;
}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:15.5px;color:#3b473f;}
.check input{position:absolute;opacity:0;width:0;height:0;}
.check__box{
  width:22px;height:22px;border-radius:6px;border:1.5px solid #c9d2cb;background:#fff;
  display:grid;place-items:center;transition:.15s;flex:none;
}
.check__box svg{opacity:0;transform:scale(.6);transition:.15s;}
.check input:checked + .check__box{background:var(--green-500);border-color:var(--green-500);}
.check input:checked + .check__box svg{opacity:1;transform:scale(1);}
.check input:focus-visible + .check__box{box-shadow:0 0 0 3px rgba(24,144,72,.25);}
.link-green{color:var(--green-600);font-size:15.5px;font-weight:500;background:none;}
.link-green:hover{text-decoration:underline;}
.btn-login{
  width:100%;height:62px;border-radius:12px;background:var(--green-700);
  color:#fff;font-size:18px;font-weight:600;display:flex;align-items:center;
  justify-content:center;gap:10px;transition:background .16s,transform .06s,box-shadow .16s;
  box-shadow:0 6px 18px rgba(21,82,44,.22);
}
.btn-login:hover{background:#124726;}
.btn-login:active{transform:translateY(1px);}
.btn-login[disabled]{opacity:.75;cursor:progress;}
.or-sep{display:flex;align-items:center;gap:16px;margin:22px 0;color:#8b968f;font-size:15px;}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:#e6eae7;}
.btn-key{
  width:100%;height:58px;border-radius:12px;background:#f1f8f2;border:1px solid #dceade;
  color:var(--green-700);font-size:17px;font-weight:600;display:flex;align-items:center;
  justify-content:center;gap:10px;transition:.16s;
}
.btn-key:hover{background:#e6f3e9;border-color:#c8e0cd;}
.support-line{
  text-align:center;margin:24px 0 0;font-size:14.5px;color:#7c8880;
}
.support-line button{color:var(--green-600);font-weight:600;}
.support-line button:hover{text-decoration:underline;}
.login-error{
  display:none;align-items:center;gap:10px;background:var(--danger-bg);
  border:1px solid #f7c8c4;color:#b3312a;border-radius:10px;padding:12px 14px;
  font-size:15px;margin-bottom:16px;
}
.login-error.show{display:flex;animation:shake .38s;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.demo-hint{
  text-align:center;font-size:13.5px;color:#93a09a;margin:14px 0 0;
}
.demo-hint code{
  font-family:var(--font-en);background:#f2f5f3;border:1px solid #e4e9e5;
  padding:2px 7px;border-radius:6px;color:#4c5a52;font-size:12.5px;
}
@media(max-width:1000px){
  #login-screen{grid-template-columns:1fr;}
  .login-visual{padding:38px 24px 46px;}
  .login-visual h1{font-size:34px;}
  .brand-mark{width:150px;height:96px;}
  .login-panel{padding:28px 18px 44px;}
  .login-card{padding:32px 24px 24px;box-shadow:0 8px 30px rgba(16,24,40,.09);}
}
@media(max-width:480px){
  .login-card h2{font-size:22px;}
  .field input{height:52px;font-size:15px;}
  .btn-login{height:54px;font-size:16px;}
  .btn-key{height:52px;font-size:15px;}
}