.create-page{
padding:130px 40px;
background:#050814;
min-height:100vh;
}


.create-header{
text-align:center;
margin-bottom:50px;
}


.create-header h1{
font-family:"Orbitron";
font-size:70px;
font-weight:1000;
background:linear-gradient(90deg,#fff,#64dcff,#9b7bff);
-webkit-background-clip:text;
color:transparent;
}


.create-header p{
color:#bcc7e5;
}



.creator-layout{
max-width:1500px;
margin:auto;
display:grid;
grid-template-columns:450px 1fr;
gap:40px;
}



.editor,
.preview{
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.04)
);
border:1px solid rgba(255,255,255,.15);
border-radius:30px;
padding:30px;
}



.box{
margin-bottom:25px;
}



label{
display:block;
color:#64dcff;
font-family:"Orbitron";
margin:15px 0 8px;
}



input,
textarea{
width:100%;
box-sizing:border-box;
padding:15px;
border-radius:15px;
border:none;
outline:none;
background:#0b1022;
color:white;
}



textarea{
height:120px;
resize:none;
}



button{
padding:12px 18px;
border-radius:15px;
border:none;
background:#101a35;
color:#64dcff;
cursor:pointer;
margin:5px;
transition:.3s;
}



button:hover{
background:#64dcff;
color:#050814;
}



.save{
width:100%;
background:#64dcff;
color:#050814;
font-weight:900;
}



.preview h2{
color:white;
font-family:"Orbitron";
}



.guide-preview{
overflow:hidden;
border-radius:30px;
background:#050814;
}



.preview-cover img{
width:100%;
height:300px;
object-fit:cover;
}



.preview-head{
text-align:center;
padding:35px;
}



.preview-head span{
color:#64dcff;
font-family:"Orbitron";
}



.preview-head h1{
font-family:"Orbitron";
font-size:40px;
color:white;
}



.preview-head p{
color:#bcc7e5;
}



.preview-meta{
color:#8793b5;
margin-top:20px;
}



#previewContent{
padding:0 35px 35px;
}



.preview-embed{
display:flex;
background:#0b1022;
border-radius:20px;
overflow:hidden;
margin-top:20px;
}



.preview-color{
width:6px;
}



.preview-body{
padding:25px;
}



.preview-body h3{
color:white;
font-family:"Orbitron";
}



.preview-body p{
color:#bcc7e5;
line-height:1.7;
}



.preview-image{
width:100%;
border-radius:20px;
margin-top:20px;
}



@media(max-width:1000px){

.creator-layout{
grid-template-columns:1fr;
}

}