* { box-sizing: border-box; }
:root {
  --green-950:#0b241a;
  --green-900:#103326;
  --green-700:#1f5e43;
  --green-600:#287a55;
  --green-500:#359968;
  --green-100:#e8f5ed;
  --line:#dfe7e2;
  --text:#1f2b26;
  --muted:#718078;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(16,51,38,.97), rgba(31,94,67,.93)),
    #103326;
}
.login-shell {
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(3,18,12,.28);
}
.login-brand {
  position: relative;
  min-height: 540px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(155deg, var(--green-950), var(--green-700));
}
.login-brand::after {
  content:'';
  position:absolute;
  right:-70px;
  bottom:-70px;
  width:240px;
  height:240px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.03), 0 0 0 96px rgba(255,255,255,.018);
}
.brand-lockup { position: relative; z-index: 1; }
.brand-mark {
  width: 56px;
  height: 56px;
  display:grid;
  place-items:center;
  margin-bottom: 28px;
  border-radius: 15px;
  color: var(--green-950);
  background:#f3fff7;
  font-weight:800;
  letter-spacing:-.05em;
}
.login-brand h1 { margin:0 0 12px; font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.02; }
.login-brand p { max-width: 390px; margin:0; color:rgba(255,255,255,.68); line-height:1.6; }
.brand-meta { position: relative; z-index: 1; color:rgba(255,255,255,.45); font-size:.78rem; }
.login-panel { padding: 48px; display:flex; flex-direction:column; justify-content:center; }
.login-kicker { color:var(--green-600); font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.login-panel h2 { margin:9px 0 7px; font-size:1.7rem; }
.login-subtitle { margin:0 0 28px; color:var(--muted); line-height:1.5; }
.message { margin:0 0 18px; padding:11px 12px; border:1px solid #f0cece; border-radius:10px; color:#8d3434; background:#fff6f6; font-size:.86rem; }
.form-group { margin-bottom:16px; }
label { display:block; margin-bottom:7px; color:#405047; font-size:.8rem; font-weight:700; }
.input-with-icon { position:relative; }
.input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#839188; font-size:15px; }
.input-with-icon input {
  width:100%;
  height:46px;
  padding:0 42px 0 38px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  color:var(--text);
  background:#fff;
  font-size:.93rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.input-with-icon input:focus { border-color:#8dc5a6; box-shadow:0 0 0 3px rgba(53,153,104,.11); }
.password-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; color:#65746b; user-select:none; }
.login-button {
  width:100%;
  min-height:46px;
  margin-top:6px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:var(--green-600);
  font-weight:750;
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease;
}
.login-button:hover { background:var(--green-700); box-shadow:0 7px 18px rgba(40,122,85,.18); }
.login-note { margin-top:20px; color:#8a978f; font-size:.74rem; text-align:center; }
@media (max-width: 760px) {
  body { padding:14px; }
  .login-shell { grid-template-columns:1fr; border-radius:16px; }
  .login-brand { min-height:auto; padding:30px 26px; }
  .login-brand h1 { font-size:2rem; }
  .login-brand p { font-size:.88rem; }
  .brand-meta { margin-top:30px; }
  .login-panel { padding:30px 24px; }
}