/* body{

font-family:Arial;

width:600px;

margin:auto;

margin-top:40px;

}

input,select{

display:block;

width:100%;

padding:10px;

margin-bottom:12px;

}

button{

padding:12px;

background:#1976d2;

color:white;

border:none;

cursor:pointer;

width:100%;

}

pre{

background:#efefef;

padding:20px;

margin-top:20px;

} */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Poppins,sans-serif;
}

body{

    background:#f5f5f5;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}

.container{

    width:1100px;

    height:700px;

    background:white;

    border-radius:20px;

    overflow:hidden;

    display:flex;

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

}

.left-panel{

    flex:1;

    background:linear-gradient(160deg,#d6001c,#ff4d4d);

    color:white;

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position: relative;

}

.back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 10;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateX(-2px);
}

.back-button svg {
    width: 20px;
    height: 20px;
}

.back-button span {
    font-size: 14px;
    font-weight: 500;
}

.left-panel h1{

    font-size:46px;

    margin-bottom:20px;

}

.left-panel p{

    font-size:18px;

    opacity:.9;

    margin-bottom:40px;

}

.banner{

    width:100%;

    border-radius:15px;

}

.right-panel{

    flex:1;

    padding:50px;

}

.right-panel h2{

    margin-bottom:30px;

    color:#d6001c;

}

label{

    display:block;

    margin-top:15px;

    margin-bottom:6px;

    font-weight:600;

}

input,select{

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    transition:.3s;

}

input:focus,
select:focus{

    outline:none;

    border-color:#d6001c;

    box-shadow:0 0 10px rgba(214,0,28,.25);

}

button{

    width:100%;

    margin-top:30px;

    padding:16px;

    border:none;

    border-radius:10px;

    background:#d6001c;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#b50017;

    transform:translateY(-2px);

}

#result{

    margin-top:25px;

}

pre{

    background:#f7f7f7;

    border-radius:10px;

    padding:15px;

    overflow:auto;

}

/* Toast */

.toast{

    position:fixed;

    top:30px;

    right:30px;

    background:#18a558;

    color:white;

    padding:16px 24px;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    box-shadow:0 12px 25px rgba(0,0,0,.25);

    opacity:0;

    transform:translateY(-30px);

    transition:.4s ease;

    z-index:9999;

}

.toast.show{

    opacity:1;

    transform:translateY(0);

}