*{
    box-sizing:border-box;
}

:root{

    --primary:#2563eb;
    --dark:#111827;
    --gray:#6b7280;
    --light:#f3f4f6;
    --border:#e5e7eb;

}

body{

    margin:0;

    font-family:'Inter',sans-serif;

    background:#f1f5f9;

    color:#111827;

}


/* ===============================
TOP BAR
================================ */

.topbar{

    height:60px;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    position:sticky;

    top:0;

    z-index:100;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo-icon{

    width:45px;

    height:45px;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    font-size:20px;

}

.logo h1{

    margin:0;

    font-size:21px;

}

.logo h1 span{

    color:#2563eb;

}

.logo p{

    margin:2px 0 0;

    font-size:11px;

    color:#6b7280;

}

.top-actions{

    display:flex;

    gap:10px;

}

.top-btn{

    border:1px solid #e5e7eb;

    background:white;

    padding:9px 14px;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

}

.top-btn:hover{

    background:#f8fafc;

}

.danger{

    color:#dc2626;

}


/* ===============================
APP
================================ */

.app{

    display:grid;

    grid-template-columns:230px 1fr 1.25fr;

    min-height:calc(100vh - 75px);

}


/* ===============================
SIDEBAR
================================ */

.sidebar{

    background:#111827;

    color:white;

    padding:22px 14px;

}

.sidebar-title{

    padding:0 10px 20px;

}

.sidebar-title h3{

    margin:0;

    font-size:16px;

}

.sidebar-title span{

    font-size:11px;

    color:#9ca3af;

}

.nav-item{

    width:100%;

    border:none;

    background:transparent;

    color:#cbd5e1;

    text-align:left;

    padding:13px;

    margin-bottom:4px;

    border-radius:8px;

    cursor:pointer;

    font-size:13px;

}

.nav-item i{

    width:24px;

}

.nav-item:hover{

    background:#1f2937;

}

.nav-item.active{

    background:#2563eb;

    color:white;

}

.sidebar-footer{

    margin-top:30px;

    padding:10px;

}

.resume-score{

    background:#1f2937;

    padding:14px;

    border-radius:10px;

}

.resume-score div:first-child{

    display:flex;

    justify-content:space-between;

    font-size:11px;

}

.resume-score strong{

    color:#60a5fa;

}

.progress{

    margin-top:10px;

    height:6px;

    background:#374151;

    border-radius:10px;

    overflow:hidden;

}

.progress div{

    height:100%;

    background:#22c55e;

    width:0%;

    transition:.3s;

}


/* ===============================
EDITOR
================================ */

.editor{

    background:white;

    padding:35px;

    overflow-y:auto;

}

.form-section{

    display:none;

}

.form-section.active{

    display:block;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.section-header h2{

    margin:0;

    font-size:22px;

}

.section-header p{

    margin:5px 0;

    font-size:13px;

    color:#6b7280;

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.field{

    margin-bottom:18px;

}

.field.full{

    grid-column:1/-1;

}

label{

    display:block;

    font-size:12px;

    font-weight:600;

    margin-bottom:7px;

}

input,
textarea,
select{

    width:100%;

    border:1px solid #d1d5db;

    border-radius:8px;

    padding:11px;

    font-family:inherit;

    outline:none;

    font-size:13px;

}

input:focus,
textarea:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.08);

}

textarea{

    min-height:130px;

    resize:vertical;

}

.hint{

    font-size:11px;

    color:#6b7280;

}

.photo-section{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.photo-preview{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#f1f5f9;

    border:2px dashed #cbd5e1;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    font-size:28px;

    color:#94a3b8;

}

.photo-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:none;

}

.upload-btn{

    display:inline-flex;

    gap:8px;

    align-items:center;

    background:#2563eb;

    color:white;

    padding:10px 15px;

    border-radius:7px;

    cursor:pointer;

}

.upload-btn input{

    display:none;

}

.add-btn{

    background:#2563eb;

    color:white;

    border:none;

    padding:10px 14px;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

}

.add-btn:hover{

    background:#1d4ed8;

}


/* ===============================
CARDS
================================ */

.entry-card{

    border:1px solid #e5e7eb;

    padding:20px;

    border-radius:10px;

    margin-bottom:20px;

    background:#fafafa;

}

.entry-card-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

}

.entry-card-header h4{

    margin:0;

}

.remove-btn{

    background:#fee2e2;

    color:#dc2626;

    border:none;

    padding:7px 10px;

    border-radius:6px;

    cursor:pointer;

}

.character-count{

    font-size:11px;

    text-align:right;

    color:#6b7280;

    margin-top:5px;

}

.tips{

    background:#eff6ff;

    border-left:4px solid #2563eb;

    padding:15px;

    border-radius:6px;

}

.tips h4{

    margin:0 0 6px;

    color:#1d4ed8;

}

.tips p{

    margin:0;

    font-size:12px;

    color:#475569;

}


/* ===============================
SKILLS
================================ */

.skill-input{

    display:flex;

    gap:10px;

}

.skill-input button{

    border:none;

    background:#2563eb;

    color:white;

    padding:0 22px;

    border-radius:8px;

    cursor:pointer;

}

.tag-list{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:18px;

}

.tag{

    background:#eff6ff;

    color:#1d4ed8;

    padding:8px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.tag button{

    border:none;

    background:transparent;

    color:#dc2626;

    margin-left:6px;

    cursor:pointer;

}

.suggestions{

    margin-top:30px;

}

.suggestions h4{

    font-size:13px;

}

.suggestions button{

    margin:4px;

    border:1px solid #d1d5db;

    background:white;

    padding:7px 10px;

    border-radius:20px;

    cursor:pointer;

    font-size:11px;

}


/* ===============================
PREVIEW
================================ */

.preview-area{

    background:#e2e8f0;

    padding:25px;

    overflow:auto;

}

.preview-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.preview-toolbar h3{

    margin:0;

}

.preview-toolbar span{

    font-size:11px;

    color:#16a34a;

}

.toolbar-actions{

    display:flex;

    gap:8px;

}

.toolbar-actions select{

    width:auto;

}

.toolbar-actions input{

    width:40px;

    height:38px;

    padding:2px;

}

.paper-wrapper{

    display:flex;

    justify-content:center;

}

#resumePreview{

    width:210mm;

    min-height:297mm;

    background:white;

    padding:18mm;

    box-shadow:0 8px 30px rgba(0,0,0,.15);

    font-size:11px;

    color:#111827;

}

.resume-header{

    border-bottom:3px solid var(--accent,#2563eb);

    padding-bottom:12px;

    margin-bottom:15px;

}

.resume-name{

    font-size:28px;

    font-weight:800;

    text-transform:uppercase;

}

.resume-title{

    color:var(--accent,#2563eb);

    font-size:14px;

    font-weight:600;

    margin-top:4px;

}

.contact{

    margin-top:9px;

    color:#4b5563;

    font-size:10px;

}

.resume-section{

    margin-top:18px;

}

.resume-section h2{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.7px;

    color:var(--accent,#2563eb);

    border-bottom:1px solid #d1d5db;

    padding-bottom:5px;

}

.resume-section p{

    line-height:1.6;

}

.resume-item{

    margin-bottom:12px;

}

.resume-item-title{

    display:flex;

    justify-content:space-between;

    font-weight:700;

}

.resume-company{

    color:var(--accent,#2563eb);

    margin-top:2px;

}

.resume-item ul{

    margin:6px 0;

    padding-left:18px;

}

.resume-skills{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}

.resume-skill{

    background:#f3f4f6;

    padding:5px 8px;

    border-radius:4px;

}

.resume-signature{

    margin-top:32px;

    text-align:right;

    padding-top:14px;

    border-top:1px solid #e5e7eb;

}

.resume-signature-name{

    font-weight:700;

    font-size:12px;

    color:#111827;

}

.resume-signature-date{

    font-size:10px;

    color:#6b7280;

    margin-top:2px;

}


/* ===============================
TEMPLATES
================================ */

.modern-template .resume-header{

    background:var(--accent,#2563eb);

    color:white;

    padding:20px;

    margin:-18mm -18mm 15px;

    border:none;

}

.modern-template .resume-title{

    color:#dbeafe;

}

.modern-template .contact{

    color:#e0e7ff;

}


.executive-template{

    font-family:'Playfair Display',serif;

}

.executive-template .resume-name{

    font-size:32px;

}

.executive-template .resume-section h2{

    color:#111827;

    border-bottom:2px solid var(--accent,#2563eb);

}


.minimal-template{

    padding:22mm !important;

}

.minimal-template .resume-header{

    text-align:center;

    border-bottom:1px solid #111827;

}

.minimal-template .resume-name{

    font-size:25px;

}


.creative-template{

    padding-left:60mm !important;

    position:relative;

}

.creative-template:before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:45mm;

    background:var(--accent,#2563eb);

}

.creative-template .resume-header{

    border:none;

}


.fresher-template .resume-header{

    text-align:center;

}

.fresher-template .resume-section h2{

    background:#f3f4f6;

    padding:7px;

    border:none;

}


/* ===============================
TEMPLATES PANEL
================================ */

.template-panel{

    margin-top:25px;

}

.template-panel h3{

    font-size:15px;

}

.template-grid{

    display:grid;

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

    gap:10px;

}

.template-card{

    background:white;

    padding:8px;

    border-radius:8px;

    cursor:pointer;

    border:2px solid transparent;

}

.template-card.selected{

    border-color:#2563eb;

}

.template-card p{

    margin:6px 0 0;

    font-size:10px;

    text-align:center;

}

.mini{

    height:100px;

    background:#f8fafc;

    padding:10px;

}

.mini div{

    height:15px;

    background:#2563eb;

    margin-bottom:8px;

}

.mini span{

    display:block;

    height:5px;

    background:#cbd5e1;

    margin:6px 0;

}

.modern-mini div{

    background:#111827;

}

.executive-mini div{

    background:#374151;

}

.minimal-mini div{

    background:#ffffff;

    border-bottom:2px solid #111827;

}

.creative-mini{

    border-left:15px solid #2563eb;

}

.fresher-mini div{

    background:#16a34a;

}


/* ===============================
DOWNLOAD
================================ */

.download-panel{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.download{

    flex:1;

    border:none;

    padding:12px;

    border-radius:8px;

    color:white;

    cursor:pointer;

    font-weight:600;

}

.word{

    background:#2563eb;

}

.pdf{

    background:#dc2626;

}

.print{

    background:#374151;

}


/* ===============================
FOOTER
================================ */

footer{

    text-align:center;

    padding:15px;

    background:white;

    border-top:1px solid #e5e7eb;

    font-size:12px;

    color:#6b7280;

}


/* ===============================
MOBILE
================================ */

@media(max-width:1200px){

    .app{

        grid-template-columns:200px 1fr;

    }

    .preview-area{

        grid-column:2;

    }

}


@media(max-width:800px){

    .app{

        display:block;

    }

    .sidebar{

        display:flex;

        overflow-x:auto;

        gap:5px;

    }

    .sidebar-title,
    .sidebar-footer{

        display:none;

    }

    .nav-item{

        min-width:150px;

    }

    .editor{

        padding:20px;

    }

    .preview-area{

        padding:10px;

    }

    #resumePreview{

        transform:scale(.65);

        transform-origin:top left;

        margin-bottom:-105mm;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .topbar{

        padding:0 15px;

    }

    .top-actions{

        display:none;

    }

}