:root{

    --void:#0a0a0b;
    --panel:#151517;
    --panel2:#1d1d20;

    --bone:#ece8e0;
    --amber:#e2261c;
    --line:#313135;

}



*{

    box-sizing:border-box;
    margin:0;
    padding:0;

}



body{

    background:var(--void);
    color:var(--bone);

    font-family:'Inter',sans-serif;

}



a{

    color:inherit;
    text-decoration:none;

}



.mono{

    font-family:'JetBrains Mono', monospace;

}



.display{

    font-family:'Anton', sans-serif;
    text-transform:uppercase;

    letter-spacing:.02em;

}





.container{

    max-width:1100px;

    margin:80px auto;

    padding:0 30px;

}





.header-page{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}





.tag{

    color:var(--amber);

    font-size:12px;

    margin-bottom:10px;

}





h1{

    font-size:48px;

}





.subtitle{

    margin-top:10px;

    color:#aaa;

}





.btn-back{


    padding:12px 25px;

    border:1px solid var(--line);

    border-radius:8px;

    transition:.3s;

}



.btn-back:hover{

    border-color:var(--amber);

    color:var(--amber);

}







.form-card{


    background:var(--panel);

    border:1px solid var(--line);

    border-radius:18px;

    padding:40px;

}







.grid{


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}





.input-group{


    display:flex;

    flex-direction:column;

    gap:10px;

}





label{

    font-size:14px;

    color:#b7b7b7;

}





input{


    background:var(--panel2);

    border:1px solid var(--line);

    color:var(--bone);

    padding:15px;

    border-radius:8px;

    font-size:15px;

}



input:focus{

    outline:none;

    border-color:var(--amber);

}







.actions{


    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:40px;

}






.cancel,
.generate{


    padding:14px 30px;

    border-radius:8px;

    font-weight:600;

    cursor:pointer;

}





.cancel{

    border:1px solid var(--line);

    background:transparent;

}





.generate{

    background:var(--amber);

    color:white;

    border:none;

}






.generate:hover{

    filter:brightness(1.1);

}







@media(max-width:700px){


.grid{

    grid-template-columns:1fr;

}


.header-page{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}



.actions{

    flex-direction:column;

}



.cancel,
.generate{

    text-align:center;

    width:100%;

}


}