/* =====================================================
JSON 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);
}

/* =====================================================
Settings Panel
===================================================== */

.tool-settings{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:16px 16px 0 0;
padding:20px;
border-bottom:none;
}

.tool-settings h3{
margin:0 0 20px;
font-size:22px;
font-weight:700;
color:#1e293b;
}

.settings-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}

.settings-grid label{
display:block;
margin-bottom:6px;
font-size:14px;
font-weight:600;
color:#475569;
}

.settings-grid input,
.settings-grid select{
width:100%;
height:46px;
border:1px solid #dbe2ea;
border-radius:10px;
padding:0 14px;
background:#ffffff;
}

.settings-grid input:focus,
.settings-grid select:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

/* =====================================================
JSON Editor
===================================================== */

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

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

.json-textarea:focus{
outline:none;
box-shadow: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

/* =====================================================
Toast
===================================================== */

.toast{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#0f172a;
color:#ffffff;
padding:12px 22px;
border-radius:999px;
opacity:0;
transition:.3s;
z-index:1000;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.toast.show{
opacity:1;
}

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

@media (max-width:768px){

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

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

.tool-settings{
    padding:16px;
}

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

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

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

}