/**
 * JavaScript Formatter Tool Specific Styling
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#4f46e5;--bg:transparent;--card:#fff;--shadow:0 4px 20px rgba(0,0,0,.06);--text:#0f172a;--secondary:#64748b;--radius:12px;--radius-sm:8px;--transition:all 0.2s ease}
[data-theme="dark"]{--card:#1e293b;--shadow:0 4px 20px rgba(0,0,0,.3);--text:#f1f5f9;--secondary:#94a3b8;--primary:#818cf8}
.jf-wrap{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);max-width:720px;margin:0 auto;padding:4px}
.jf-card{background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);padding:24px;transition:var(--transition)}
.jf-title{font-size:20px;font-weight:700;margin-bottom:20px;color:var(--text)}
.jf-group{margin-bottom:16px}
.jf-label{display:block;font-size:13px;font-weight:600;color:var(--secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.jf-textarea{width:100%;min-height:200px;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:var(--radius-sm);font-family:monospace;font-size:13px;color:var(--text);background:var(--card);outline:none;resize:vertical;transition:var(--transition);line-height:1.6}
.jf-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.jf-row{display:flex;gap:10px;flex-wrap:wrap}
.jf-btn{height:40px;padding:0 20px;border:none;border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:6px}
.jf-btn-primary{background:var(--primary);color:#fff}
.jf-btn-primary:hover{opacity:.88}
.jf-btn-secondary{background:#f1f5f9;color:var(--text);border:1.5px solid #e2e8f0}
.jf-btn-secondary:hover{background:#e2e8f0}
[data-theme="dark"] .jf-btn-secondary{background:#334155;color:#f1f5f9;border-color:#475569}
.jf-msg{margin-top:8px}
.jf-success{background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:var(--radius-sm);padding:10px 14px;color:#16a34a;font-size:13px;font-weight:500}
[data-theme="dark"] .jf-success{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.3);color:#4ade80}
.jf-error{background:#fef2f2;border:1.5px solid #fecaca;border-radius:var(--radius-sm);padding:10px 14px;color:#dc2626;font-size:13px}
[data-theme="dark"] .jf-error{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);color:#fca5a5}
@media(max-width:600px){.jf-row{flex-direction:column}.jf-btn{width:100%}}