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

/* Reset & body */
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  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 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:12%; left:78%; width:480px; height:480px; background:#2d6a4f; animation: float1 14s ease-in-out infinite; }
.b2{ top:88%; left:15%; 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);} }

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

/* Glass card */
.card{
  width:100%; max-width:500px;
  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 */
.brand{
  text-align:center; margin-bottom:20px;
}
.brand h1{ font-size:24px; font-weight:600; }
.brand p{ margin-top:6px; font-size:14px; color:var(--muted); }

/* Form styles */
label{ display:block; font-weight:600; font-size:13px; margin:10px 0 8px; color:#cbd5e1; }
.input, select{
  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, select:focus{
  border-color: var(--accent); background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}

/* Button */
.btn{
  width:100%; margin-top:16px; padding:12px 16px;
  background: linear-gradient(135deg, var(--brand), #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 */
.foot{ margin-top:14px; text-align:center; font-size:12px; color:#a7b0ba; }

@media (max-width:480px){
  .card{ padding:28px 20px; }
}
.card{
  max-height: calc(100svh - 64px);
  overflow: auto;
}