/* ================= LOGIN PAGE ================= */
:root{
  --green:#1f7a3f;
  --green-dark:#155c30;
  --green-light:#e9f6ef;
  --text:#1f2937;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#e9f6ef,#f7fbf9);
  color:var(--text);
}

/* ================= CARD ================= */
.card{
  max-width:360px;
  margin:90px auto;
  background:#fff;
  padding:30px 26px;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* ================= TITLE ================= */
.card h2{
  text-align:center;
  margin-bottom:22px;
  color:var(--green);
  font-size:24px;
  font-weight:700;
}

/* ================= INPUT ================= */
.card input{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  font-size:15px;
  transition:.2s;
}

.card input:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(31,122,63,.15);
}

/* ================= BUTTON ================= */
.card button{
  width:100%;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  border:none;
  padding:12px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.card button:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}

/* ================= MESSAGE ================= */
.card p{
  text-align:center;
  margin-top:14px;
  font-size:14px;
  color:#dc2626;
}

/* ================= MOBILE ================= */
@media(max-width:480px){
  .card{
    margin:60px 14px;
    padding:26px 22px;
  }
}