/* ==========================
   Main Container
========================== */

.nji-tool-container{

    max-width:900px;

    margin:40px auto;

    background:#ffffff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

/* ==========================
Header
========================== */

.nji-tool-header{

    text-align:center;

    margin-bottom:35px;

}

.nji-tool-header h1{

    font-size:34px;

    color:#1f2937;

    margin-bottom:10px;

    font-weight:700;

}

.nji-tool-header p{

    color:#6b7280;

    font-size:16px;

}

/* ==========================
Upload Box
========================== */

.nji-upload-area{

    border:3px dashed #3b82f6;

    border-radius:18px;

    padding:45px;

    text-align:center;

    background:#f8fbff;

    transition:.3s;

}

.nji-upload-area:hover{

    background:#eef6ff;

}

.nji-upload-icon{

    font-size:65px;

    margin-bottom:15px;

}

.nji-upload-area h2{

    margin-bottom:18px;

}

#njiConvertBrowseBtn{

    background:#2563eb;

    color:#fff;

    border:none;

    padding:14px 32px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

#njiConvertBrowseBtn:hover{

    background:#1d4ed8;

}

/* ==========================
Preview
========================== */

.nji-preview-wrapper{

    margin-top:35px;

}

.nji-preview-box{

    text-align:center;

}

.nji-preview-box img{

    max-width:320px;

    width:100%;

    border-radius:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

/* ==========================
Info Cards
========================== */

.nji-info-box{

    display:grid;

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

    gap:20px;

    margin:25px 0;

}

.nji-info-item{

    background:#f9fafb;

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:20px;

    text-align:center;

}

.nji-info-item span{

    display:block;

    color:#6b7280;

    margin-bottom:8px;

}

.nji-info-item strong{

    font-size:20px;

    color:#111827;

}

/* ==========================
Convert Box
========================== */

.nji-target-box{

    margin:25px 0;

}

.nji-target-box label{

    display:block;

    font-weight:600;

    margin-bottom:10px;

}

#njiConvertFormat{

   #njiConvertFormat{

    width:100%;

    height:56px;

    padding:0 18px;

    border:1px solid #d1d5db;

    border-radius:10px;

    background:#fff;

    font-size:17px;

    font-weight:600;

    color:#111827;

    line-height:56px;

    appearance:auto;

    -webkit-appearance:menulist;

    -moz-appearance:menulist;

    box-sizing:border-box;

}

/* ==========================
Buttons
========================== */

.nji-buttons{

    display:flex;

    gap:15px;

    justify-content:center;

    margin-top:25px;

}

#njiConvertBtn{

    background:#16a34a;

    color:#fff;

    border:none;

    padding:14px 30px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

}

#njiConvertBtn:hover{

    background:#15803d;

}

#njiConvertDownloadBtn{

    background:#7c3aed;

    color:#fff;

    border:none;

    padding:14px 30px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

}

#njiConvertDownloadBtn:hover{

    background:#6d28d9;

}

/* ==========================
Responsive
========================== */

@media(max-width:768px){

.nji-tool-container{

padding:20px;

}

.nji-info-box{

grid-template-columns:1fr;

}

.nji-buttons{

flex-direction:column;

}

#njiConvertBtn,
#njiConvertDownloadBtn{

width:100%;

}

}