body{
background:#f4f7fb;
font-family:Arial,sans-serif;
}

.generator-wrapper{
max-width:1400px;
margin:auto;
padding:40px 15px;
}

.generator-box{
background:#ffffff;
border-radius:22px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.generator-grid{
display:grid;
grid-template-columns:420px 1fr;
gap:35px;
align-items:start;
}

.template-preview{
border-radius:18px;
overflow:hidden;
background:#ffffff;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.template-preview img{
width:100%;
display:block;
}

.preview-content{
padding:20px;
font-size:15px;
line-height:1.8;
color:#555;
}

.page-title{
font-size:38px;
font-weight:700;
color:#01377f;
margin-bottom:12px;
line-height:1.3;
}

.page-subtitle{
color:#666666;
margin-bottom:30px;
line-height:1.8;
font-size:17px;
}

.form-label{
font-size:15px;
font-weight:700;
color:#222222;
margin-bottom:8px;
}

.form-control{
height:56px;
border-radius:14px;
border:1px solid #d9d9d9;
box-shadow:none !important;
font-size:16px;
}

.form-control:focus{
border-color:#01377f;
}

.crop-box{
width:100%;
max-width:400px;
height:320px;
border:1px solid #cccccc;
overflow:hidden;
border-radius:14px;
background:#f8f8f8;
}

.crop-box img{
max-width:100%;
}

.btn-crop{
background:#222222;
border:0;
border-radius:10px;
color:#ffffff;
font-size:16px;
font-weight:700;
min-height:48px;
padding:10px 22px;
}

.btn-crop:disabled{
cursor:not-allowed;
opacity:.55;
}

.cropped-photo-preview{
align-items:center;
background:#f8f8f8;
border:1px solid #d9d9d9;
border-radius:12px;
display:flex;
gap:18px;
padding:12px;
}

.cropped-photo-preview[hidden]{
display:none;
}

.cropped-photo-preview span{
font-size:14px;
font-weight:700;
}

.cropped-photo-preview img{
border-radius:8px;
height:112px;
object-fit:cover;
width:100px;
}

.btn-preview{
width:100%;
height:62px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#01377f,#0a56b5);
color:#ffffff;
font-size:19px;
font-weight:700;
}

.seo-content{
margin-top:40px;
line-height:1.9;
color:#555555;
font-size:16px;
}

.seo-content h2{
color:#01377f;
font-size:28px;
margin-bottom:15px;
}

.policy-box{
background:#fff8e1;
border:1px solid #ffe08a;
border-radius:12px;
color:#5c4100;
line-height:1.8;
margin-bottom:25px;
padding:16px 18px;
}

@media(max-width:992px){

.generator-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.generator-box{
padding:18px;
}

.page-title{
font-size:30px;
}

.crop-box{
height:260px;
}

}