*{box-sizing:border-box;}
body{
font-family:Georgia,serif;
background:#e5e7eb;
padding:20px;
}

.container{
max-width:1200px;
margin:auto;
background:#fff;
padding:20px;
}

.layout{
display:flex;
gap:30px;
align-items:flex-start;
}

.form-box{width:45%;}
.preview-box{width:55%;display:none;}

input,select,textarea{
width:100%;
padding:8px;
margin-bottom:12px;
}

button{
background:#1d4ed8;
color:#fff;
border:none;
padding:8px;
cursor:pointer;
}

.resume{
width:210mm;
min-height:297mm;
margin:auto;
background:#fff;
padding:25px;
color:#000;
}

.resume-header{
display:flex;
gap:20px;
align-items:center;
border-bottom:2px solid #000;
padding-bottom:10px;
}

.photo{
width:120px;
height:120px;
object-fit:cover;
border:1px solid #000;
}

h1{margin:0;}
h2{
margin-top:20px;
border-bottom:1px solid #000;
font-size:16px;
}

ul{padding-left:18px;}

.resume-footer{
margin-top:30px;
display:flex;
justify-content:space-between;
}

.preview-actions{text-align:center;margin-top:20px;}

@media(max-width:900px){
.layout{flex-direction:column;}
.form-box,.preview-box{width:100%;}
}

@media print{
body{background:#fff;padding:0;}
.form-box,.preview-actions{display:none;}
.preview-box{display:block;}
}
.artistic{
border-left:6px solid #6366f1;
background:linear-gradient(to right,#eef2ff,#fff);
}

.edit-btn{
display:inline-block;
margin-top:20px;
padding:8px 14px;
background:#16a34a;
color:#fff;
text-decoration:none;
}
.resume{
width:210mm;
min-height:297mm;
background:#fff;
padding:25px;
color:#111;
font-family:Georgia,serif;
}

.artistic{
border-left:8px solid #4f46e5;
background:linear-gradient(to right,#eef2ff,#fff);
}

.resume-top{
display:flex;
gap:20px;
border-bottom:2px solid #000;
padding-bottom:10px;
}

.photo{
width:110px;
height:130px;
object-fit:cover;
border:1px solid #000;
}

.sub{font-size:13px;color:#333;}

.two-col{
display:flex;
gap:30px;
margin-top:20px;
}

.left{width:30%;}
.right{width:70%;}

h2{
font-size:16px;
border-bottom:1px solid #000;
margin-top:15px;
}

.footer{
margin-top:30px;
display:flex;
justify-content:space-between;
font-size:13px;
}

.small{font-size:11px;color:#555;}
.resume.modern{
width:210mm;
min-height:297mm;
background:#fff url("assets/images/cv.png") no-repeat top center;
background-size:100% auto;
font-family:Arial, sans-serif;
color:#111;
position:relative;
padding:160px 30px 30px 30px;
}

/* HEADER AREA TEXT */
.resume-header{
display:flex;
align-items:center;
gap:20px;
margin-bottom:20px;
}

.resume-header img{
width:110px;
height:130px;
object-fit:cover;
border:4px solid #fff;
background:#fff;
}

.resume-header h1{
margin:0;
font-size:28px;
color:#0f2a44;
}

.resume-header h3{
margin:5px 0 0;
font-weight:normal;
color:#333;
}

/* CONTENT */
.resume-body{
display:flex;
gap:25px;
}

.left{
width:30%;
}

.right{
width:70%;
}

.section{
margin-bottom:18px;
}

.section h2{
font-size:15px;
border-bottom:2px solid #0f2a44;
padding-bottom:4px;
margin-bottom:8px;
color:#0f2a44;
}

.skill{
margin-bottom:8px;
}

.bar{
height:6px;
background:#ddd;
margin-top:4px;
}

.bar div{
height:6px;
background:#0f2a44;
}

.block{
margin-bottom:12px;
}

.footer{
margin-top:25px;
font-size:12px;
border-top:1px solid #ccc;
padding-top:8px;
text-align:center;
}