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

html,
body{

    height:100%;

}

body{

    font-family:Segoe UI,sans-serif;

}
.wrapper{

    height:100vh;

    display:flex;

    flex-direction:column;

}
.topbar{

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    border-bottom:1px solid #2c3342;

}
.logo{

    font-size:22px;

    font-weight:700;

}
.main-content{

    flex:1;

    display:flex;

    overflow:hidden;

}
.sidebar{

    width:360px;

    border-right:1px solid #2c3342;

    padding:20px;

}
.workspace{

    flex:1;

    padding:25px;
    display:flex;

    flex-direction:column;    

}
.history{

    height:350px;

    border-top:1px solid #2c3342;

    padding:20px;

}
.card-panel{
    background:#1b2230;
    border:1px solid #2c3445;
    border-radius:12px;
    margin-bottom:20px;
}

.card-header-custom{
    padding:15px 20px;
    border-bottom:1px solid #2c3445;
    font-weight:600;
    font-size:15px;
}

.card-body-custom{
    padding:20px;
}
.form-control,
.form-select{

    background:#111722;
    color:#ffffff;

    border:1px solid #313c4f;

}

.form-control:focus,
.form-select:focus{

    background:#111722;

    color:#fff;

    border-color:#4b84ff;

    box-shadow:none;

}
.btn-generate{

    width:100%;

    height:52px;

    font-size:18px;

    font-weight:600;

    border-radius:10px;

}