*{
    box-sizing:border-box;
    font-family:"Segoe UI",Tahoma,sans-serif;
}


body{

    margin:0;

    min-height:100vh;

    background:
    linear-gradient(
    135deg,
    #f8f1e7,
    #ead7c0
    );

    color:#3b2f2f;

    display:flex;
    flex-direction:column;

}



/* HEADER */

header{

    background:#fffaf3;

    padding:20px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:
    0 5px 20px rgba(90,60,30,.12);

    border-bottom:
    1px solid #e7d3b8;

}


header h1{

    margin:0;

    color:#8b5e34;

    font-size:28px;

}



/* BUTTON */

button{

    background:
    linear-gradient(
    135deg,
    #b7793b,
    #8b5e34
    );

    color:white;

    border:0;

    padding:12px 22px;

    border-radius:25px;

    cursor:pointer;

    transition:.3s;

}


button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 8px 20px #8b5e3455;

}




main{

    width:100%;

    max-width:1500px;

    margin:auto;

    padding:30px;

}



/* الثلاث خانات جنب بعض */

.editors{

    display:grid;

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

    gap:25px;

}



.box{

    background:
    rgba(255,250,243,.85);

    border-radius:25px;

    padding:18px;


    border:
    1px solid #dfc6a5;


    box-shadow:

    0 15px 35px rgba(120,80,40,.15);


    transition:.3s;

}


.box:hover{

    transform:translateY(-6px);

}



.box h3{

    text-align:center;

    color:#8b5e34;

    margin-top:0;

}



/* محرر الأكواد بيج */

textarea{

    width:100%;

    height:300px;

    resize:none;


    background:#f5eadb;


    color:#4a3525;


    border:

    1px solid #d6b98c;


    border-radius:18px;


    padding:18px;


    outline:none;


    font-size:15px;


    line-height:1.7;


    direction:ltr;

}



textarea:focus{

    border-color:#b7793b;

    box-shadow:
    0 0 15px #b7793b55;

}




/* المعاينة */


.preview{

    margin-top:35px;

    background:#fffaf3;

    padding:25px;

    border-radius:25px;

    border:

    1px solid #dfc6a5;


    box-shadow:
    0 15px 35px rgba(120,80,40,.15);

}


.preview h2{

    text-align:center;

    color:#8b5e34;

}




iframe{

    width:100%;

    height:520px;


    background:white;


    border:0;


    border-radius:18px;


    box-shadow:

    inset 0 0 0 1px #ddd;

}




footer{

    margin-top:auto;

    text-align:center;

    padding:18px;

    background:#8b5e34;

    color:#fffaf3;

}



/* للجوال */

@media(max-width:1000px){


.editors{

    grid-template-columns:1fr;

}


header{

    flex-direction:column;

    gap:15px;

}


textarea{

    height:230px;

}


iframe{

    height:380px;

}


}