* {
    box-sizing: border-box;
    font-family: Tahoma, Arial, sans-serif;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
    radial-gradient(circle at top, #402080, #050510 60%);

    color: white;

}


.app {

    padding: 25px;

}


.header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}


.logo {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background:
    linear-gradient(135deg,#7b2cff,#00d4ff);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

}


h1 {

    margin:0;

    font-size:24px;

}


.header p {

    margin:5px 0;

    color:#aaa;

}



.card {

    background:

    rgba(255,255,255,0.08);

    border:

    1px solid rgba(255,255,255,0.15);

    backdrop-filter:

    blur(15px);


    border-radius:25px;

    padding:25px;

    box-shadow:

    0 0 40px rgba(100,50,255,.3);

}



h2 {

    margin-top:0;

}



.step {

    color:#aaa;

}



label {

    display:block;

    margin-top:18px;

    margin-bottom:8px;

}



input {

    width:100%;

    padding:15px;

    border-radius:15px;

    border:

    1px solid #444;

    background:

    rgba(0,0,0,.35);

    color:white;

    font-size:16px;

}



button {


    width:100%;

    margin-top:30px;

    padding:16px;


    border:none;

    border-radius:20px;


    background:

    linear-gradient(90deg,#7b2cff,#0066ff);


    color:white;

    font-size:18px;

    font-weight:bold;


    box-shadow:

    0 0 25px rgba(120,50,255,.6);

}