body{
    background: linear-gradient(135deg,#f5f7fa,#e4ecf7);
    font-family: 'Segoe UI', sans-serif;
}

.preview-wrapper{
    background: white;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.preview-box{
    width: 200px;
    height: 200px;
    margin: auto;
    background: white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    border: 5px solid #6a85f1;
    border-radius: 20px;
    transition: 0.3s ease;
}

.code-box{
    background:#f8f9fc;
    padding:15px;
    border-radius:12px;
    font-family: monospace;
    font-size:14px;
    border:1px solid #e0e6f1;
    white-space: pre-line;
}

.btn-gradient{
    background: linear-gradient(145deg,#6a85f1,#8e54e9);
    border:none;
    color:white;
    padding:12px;
    border-radius:12px;
    font-weight:600;
    transition:0.3s;
}

.btn-gradient:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(106,133,241,0.4);
}