/* =====================================================
INI TO PDF - Professional Layout
===================================================== */

.editor-layout{
max-width:1200px;
margin:25px auto;
}

/* =====================================================
File Box
===================================================== */

.file-box{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:16px;
padding:14px 20px;
margin-bottom:18px;
box-shadow:0 2px 10px rgba(15,23,42,.04);
transition:.25s ease;
}

.file-box:hover{
border-color:#cbd5e1;
box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.file-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
width:100%;
}

.file-name{
flex:1;
min-width:0;
font-size:15px;
font-weight:600;
color:#0f172a;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.file-name::before{
content:"📄";
margin-left:8px;
}

.file-size{
font-size:13px;
font-weight:500;
color:#64748b;
white-space:nowrap;
padding:4px 10px;
background:#f8fafc;
border-radius:999px;
}

.remove-file{
width:34px;
height:34px;
border:none;
border-radius:10px;
background:#fef2f2;
color:#dc2626;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
flex-shrink:0;
}

.remove-file:hover{
background:#fee2e2;
transform:scale(1.05);
}

/* =====================================================
Editor Area
===================================================== */

.content-area{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 20px rgba(15,23,42,.05);
}

.ini-textarea{
width:100%;
min-height:520px;
padding:24px;
border:none;
resize:vertical;
background:#ffffff;
color:#0f172a;
font-family:Consolas, Monaco, "Courier New", monospace;
font-size:14px;
line-height:1.8;
}

.ini-textarea:focus{
outline:none;
}

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

.action-buttons{
display:flex;
justify-content:center;
gap:14px;
margin-top:20px;
flex-wrap:wrap;
}

.action-buttons .btn{
min-width:180px;
height:48px;
border:none;
border-radius:999px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.25s;
}

.action-buttons .btn-primary{
background:linear-gradient(135deg,#1d4ed8,#2563eb);
color:#ffffff;
box-shadow:0 8px 20px rgba(37,99,235,.25);
}

.action-buttons .btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(37,99,235,.35);
}

.action-buttons .btn-secondary{
background:#ffffff;
color:#334155;
border:1px solid #cbd5e1;
}

.action-buttons .btn-secondary:hover

/* =====================================================
Mobile
===================================================== */

@media (max-width:768px){

```
.editor-layout{
    margin:15px auto;
}

.file-box{
    padding:12px 14px;
}

.file-row{
    gap:10px;
}

.file-name{
    font-size:14px;
}

.file-size{
    font-size:12px;
}

.ini-textarea{
    min-height:350px;
    padding:16px;
    font-size:13px;
}

.action-buttons{
    flex-direction:column;
}

.action-buttons .btn{
    width:100%;
}
```

}