:root{
  --bg:#0e1117;
  --card: rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.18);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#2d6a4f;   /* site green */
  --accent:#3498db;  /* subtle blue */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Reset */
*{ box-sizing:border-box }
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family: 'Poppins', sans-serif; overflow:hidden;
  background: radial-gradient(1200px 800px at 80% -10%, #1f6f51 0%, transparent 60%),
              radial-gradient(900px 700px at -10% 110%, #2563eb 0%, transparent 60%),
              #0b0f16;
}

/* Animated soft blobs */
.blob{
  position: fixed; filter: blur(60px); opacity:.65; z-index:0; pointer-events:none;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
}
.b1{ top:10%; left:80%; width:480px; height:480px; background:#2d6a4f; animation: float1 14s ease-in-out infinite; }
.b2{ top:85%; left:10%; width:520px; height:520px; background:#2563eb; animation: float2 18s ease-in-out infinite; }

@keyframes float1 { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-52%,-48%) scale(1.08);} }
@keyframes float2 { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-48%,-52%) scale(1.06);} }

/* Center wrapper */
.wrap{
  position:relative; z-index:1;
  min-height:100vh; display:grid; place-items:center; padding:24px;
}

/* Glass card */
.card{
  width:100%; max-width:420px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 34px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Header/branding */
.brand{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.logo{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, #2d6a4f, #34d399);
  color:white; font-weight:700; letter-spacing:1px;
  box-shadow: 0 8px 20px rgba(45,106,79,.45);
}
.title{ margin:0; font-size:22px; font-weight:600; line-height:1.2; }
.subtitle{ margin:4px 0 22px; color:var(--muted); font-size:14px; }

/* Form */
label{ display:block; font-weight:600; font-size:13px; margin:10px 0 8px; color:#cbd5e1; }
.input{
  width:100%; padding:12px 14px; font-size:15px; color:#e8eaed;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px; outline:none; transition: .2s border, .2s background;
}
.input::placeholder{ color:#9aa1aa; }
.input:focus{
  border-color: #60a5fa; background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}

.pass-wrap{ position:relative; }
.toggle{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; color:#cbd5e1; cursor:pointer; font-size:13px;
}

/* Button */
.btn{
  width:100%; margin-top:16px; padding:12px 16px;
  background: linear-gradient(135deg, #2d6a4f, #34d399);
  border:none; color:white; font-weight:700; letter-spacing:.3px;
  border-radius:12px; cursor:pointer; transition: transform .08s ease, filter .2s ease;
  box-shadow: 0 10px 22px rgba(45,106,79,.35);
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }

/* Footer note */
.foot{ margin-top:14px; text-align:center; font-size:12px; color:#a7b0ba; }

/* Small screens */
@media (max-width:420px){
  .card{ padding:28px 20px; }
}