:root{
  --bg: #f3f7f2;
  --panel: #ffffff;
  --panel-soft: #f8fcf7;
  --primary-dark: #16352B;
  --primary: #1F8A4D;
  --primary-2: #2FAE66;
  --accent: #A6D94E;
  --border: #d9e6da;
  --text: #1F2A24;
  --muted: #65756d;
  --shadow: 0 25px 60px rgba(22,53,43,.13);
  --danger-bg: #fde8e7;
  --danger-text: #a33d3d;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(47,174,102,.18), transparent 22%),
    radial-gradient(circle at 85% 15%, rgba(166,217,78,.22), transparent 18%),
    linear-gradient(135deg, #eef5ee 0%, #f7faf6 55%, #edf6f0 100%);
}
.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
}
.login-showcase{
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.brand{
  display:flex;align-items:center;gap:16px;
}
.brand img{width:68px;height:68px;object-fit:contain}
.brand-copy h1{margin:0;font-size:2rem;font-weight:900;letter-spacing:.3px}
.brand-copy p{margin:6px 0 0;color:var(--muted)}

.showcase-panel{
  max-width:760px;
}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  background: rgba(166,217,78,.22);
  color:#355227;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
}
.kicker-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.showcase-panel h2{
  margin:18px 0 10px;
  font-size:3rem;
  line-height:1.05;
  font-weight:900;
}
.showcase-panel p{
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
  max-width:640px;
}
.showcase-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:30px;
}
.mini-card{
  background:rgba(255,255,255,.72);
  border:1px solid var(--border);
  border-radius:24px;
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.mini-card small{display:block;color:var(--muted);font-weight:700}
.mini-card strong{display:block;font-size:1.65rem;margin-top:8px}
.login-panel{
  display:grid;
  place-items:center;
  padding:36px;
}
.login-card{
  width:100%;
  max-width:520px;
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius:32px;
  padding:30px;
}
.login-card-head{
  display:flex;align-items:center;gap:14px;margin-bottom:10px;
}
.login-card-head img{
  width:62px;height:62px;border-radius:18px;object-fit:contain;
  box-shadow:0 14px 26px rgba(31,138,77,.16)
}
.login-card h3{
  margin:0;font-size:1.7rem;font-weight:900;
}
.login-card p{margin:6px 0 0;color:var(--muted)}
.alert-danger{
  margin:18px 0 0;
  background: var(--danger-bg);
  color: var(--danger-text);
  border:1px solid #f6cbc7;
  border-radius:18px;
  padding:14px 16px;
  font-weight:700;
}
.form-grid{margin-top:20px;display:grid;gap:16px}
.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
}
.form-control{
  width:100%;
  height:54px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  padding:0 16px;
  font-size:1rem;
  color:var(--text);
  outline:none;
  transition:.2s ease;
}
.form-control:focus{
  border-color: rgba(31,138,77,.55);
  box-shadow: 0 0 0 4px rgba(47,174,102,.12);
}
.btn-login{
  width:100%;
  height:56px;
  border:none;
  border-radius:18px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color:#fff;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 18px 28px rgba(31,138,77,.24);
}
.login-foot{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
  font-size:.92rem;
}

@media (max-width: 1080px){
  .login-shell{grid-template-columns:1fr}
  .login-showcase{padding-bottom:0}
  .showcase-panel h2{font-size:2.35rem}
}
@media (max-width: 700px){
  .login-showcase{padding:24px}
  .login-panel{padding:20px}
  .login-card{padding:22px;border-radius:24px}
  .showcase-cards{grid-template-columns:1fr}
  .showcase-panel h2{font-size:2rem}
}