*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}


body{

    font-family:'Cairo',sans-serif;
    background:
    linear-gradient(135deg,#0f172a,#2563eb);

    min-height:100vh;
    color:#222;

}



header{

    text-align:center;
    color:white;
    padding:35px 15px;

}


header h1{

    font-size:38px;
    font-weight:700;
    margin-bottom:8px;

}


header p{

    opacity:.85;
    font-size:16px;

}



.container{

    width:95%;
    max-width:900px;
    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:20px;

}



.panel{

    background:white;

    border-radius:20px;

    padding:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.18);

}



label{

    display:block;

    margin-top:12px;

    margin-bottom:6px;

    font-weight:600;

    color:#1e40af;

}



textarea,
input,
select{

    width:100%;

    padding:13px;

    border-radius:12px;

    border:1px solid #d1d5db;

    font-size:15px;

    outline:none;

    background:#f8fafc;

    transition:.3s;

}



textarea{

    height:130px;

    resize:none;

}



textarea:focus,
input:focus,
select:focus{

    border-color:#2563eb;

    background:white;

}



input[type="file"]{

    margin-top:12px;

    background:white;

}



button{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:0;

    border-radius:12px;

    background:
    linear-gradient(135deg,#2563eb,#1d4ed8);

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



button:hover{

    transform:translateY(-2px);

    opacity:.9;

}



.preview{

    text-align:center;

}



.preview h2{

    color:#2563eb;

    margin-bottom:20px;

}



#qrcode{

    min-height:260px;

    display:flex;

    justify-content:center;

    align-items:center;

}



#qrcode canvas,
#qrcode img{

    border-radius:12px;

}



#download{

    display:none;

    margin-top:20px;

    background:#16a34a;

    color:white;

    padding:12px 25px;

    border-radius:12px;

    text-decoration:none;

    font-weight:bold;

}



#download:hover{

    background:#15803d;

}



footer{

    text-align:center;

    color:white;

    padding:25px;

    margin-top:40px;

    opacity:.8;

}




@media(max-width:600px){


header h1{

    font-size:30px;

}


.container{

    width:92%;

}


.panel{

    padding:18px;

}


}