:root{
        --bg:#0b0f17; --panel:#0f172a; --border:#1f2a44;
        --text:#e5e7eb; --muted:#94a3b8; --accent:#498FCE; --danger:#ef4444;
      }
      *{box-sizing:border-box}
      body{
        margin:0; min-height:100vh; display:grid; place-items:center;
        background: radial-gradient(1000px 500px at 50% -20%, rgba(34,197,94,0.18), transparent 60%),
                    radial-gradient(900px 450px at 90% 20%, rgba(59,130,246,0.16), transparent 55%),
                    var(--bg);
        color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      }
      .card{
        width:min(420px, 92vw);
        background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
        border:1px solid rgba(255,255,255,0.08);
        border-radius:16px;
        padding:24px;
        backdrop-filter: blur(10px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.45);
      }
      h1{margin:0 0 4px 0; font-size:20px}
      p{margin:0 0 16px 0; color:var(--muted); font-size:13px}
      label{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px}
      input{
        width:100%; padding:12px 12px;
        border-radius:10px; border:1px solid rgba(255,255,255,0.10);
        background: rgba(15,23,42,0.65); color:var(--text);
        outline:none;
      }
      input:focus{border-color: rgba(34,197,94,0.45)}
      .btn{
        width:100%; margin-top:14px;
        border:none; border-radius:10px; padding:12px;
        background: linear-gradient(90deg, #168ba3, #498FCE);
        color:#052e12; font-weight:800; cursor:pointer;
      }
      .error{
        display:none;
        background: rgba(239,68,68,0.10);
        border:1px solid rgba(239,68,68,0.25);
        color:#fecaca;
        padding:10px;
        border-radius:10px;
        font-size:13px;
        margin: 8px 0 0;
      }