.legacy{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;background-color:var(--bg-color);color:var(--text-main);}
.legacy .container{background-color:var(--card-bg);border-radius:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);border:1px solid var(--border-color);}
.legacy header{
            text-align:center;
            margin-bottom:35px;
            padding-bottom:20px;
            border-bottom:2px solid var(--border-color);
        }
.legacy h1{
            color:var(--text-main);
            font-size:2em;
            font-weight:600;
            margin-bottom:8px;
        }
.legacy .subtitle{
            color:var(--text-secondary);
            font-size:0.95em;
            font-weight:400;
        }
.legacy .controls{
            display:flex;
            justify-content:center;
            gap:10px;
            margin-bottom:25px;
            flex-wrap:nowrap;
            overflow-x:auto;
            padding:5px;
        }
.legacy button{
            padding:10px 20px;
            font-size:0.9em;
            border:none;
            border-radius:6px;
            cursor:pointer;
            transition:all 0.2s ease;
            font-weight:500;
            white-space:nowrap;
        }
.legacy .btn-convert{
            background:#3498db;
            color:white;
        }
.legacy .btn-convert:hover{
            background:#2980b9;
        }
.legacy .btn-clear{
            background:#95a5a6;
            color:white;
        }
.legacy .btn-copy{
            background:#16a085;
            color:white;
        }
.legacy .btn-swap{
            background:#34495e;
            color:white;
        }
.legacy .btn-download{
            background:#9b59b6;
            color:white;
        }
.legacy .editor-container{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:15px;
            margin-bottom:20px;
        }
@media (max-width: 968px){.legacy .editor-container{
                grid-template-columns:1fr;
            }}
.legacy .editor-section{
            display:flex;
            flex-direction:column;
        }
.legacy .editor-header{
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:12px 16px;
            background:var(--header-bg);
            color:white;
            border-radius:6px 6px 0 0;
            font-weight:500;
            font-size:0.95em;
        }
.legacy textarea{
            flex:1;
            min-height:400px;
            padding:20px;
            border:2px solid var(--border-color);
            border-top:none;
            border-radius:0 0 10px 10px;
            font-family:"Courier New", monospace;
            font-size:14px;
            line-height:1.6;
            resize:vertical;
            background-color:var(--bg-color);
            color:var(--text-main);
            transition:border-color 0.3s ease;
        }
.legacy textarea:focus{
            outline:none;
            border-color:var(--accent-color);
        }
.legacy .stats{
            display:flex;
            justify-content:space-around;
            flex-wrap:wrap;
            gap:15px;
            padding:20px;
            background-color:var(--alt-bg);
            border-radius:6px;
            margin-bottom:20px;
        }
.legacy .stat-value{
            font-size:1.8em;
            font-weight:bold;
            color:var(--accent-color);
        }
.legacy .stat-label{
            color:var(--text-secondary);
            font-size:0.9em;
            margin-top:5px;
        }
.legacy .examples{
            padding:20px;
            background-color:var(--alt-bg);
            border-radius:6px;
        }
.legacy .examples h3{
            color:var(--text-main);
            margin-bottom:12px;
            font-size:1em;
            font-weight:500;
        }
.legacy .upload-section{
            margin-bottom:20px;
            padding:20px;
            background-color:var(--alt-bg);
            border-radius:6px;
            text-align:center;
        }
.legacy .upload-section h3{
            color:var(--text-main);
            margin-bottom:15px;
            font-size:1em;
            font-weight:500;
        }
.legacy .file-name{
            margin-top:10px;
            color:var(--text-secondary);
            font-size:0.9em;
        }
.legacy footer{
            text-align:center;
            margin-top:25px;
            padding-top:20px;
            color:var(--text-secondary);
            font-size:0.85em;
            border-top:1px solid var(--border-color);
        }
/* extra: json-yaml */
/* botões com texto branco: fundos escurecidos para contraste AA */
.legacy .btn-convert { background: #1F618D; }
.legacy .btn-convert:hover { background: #1A5276; }
.legacy .btn-clear { background: #5B6168; }
.legacy .btn-copy { background: #0E6655; }
.legacy .btn-download { background: #7D3C98; }