.converter-main{max-width:1500px;padding-top:34px}.converter-title{display:flex;justify-content:space-between;gap:22px;align-items:flex-end}.converter-title h1{margin:.2rem 0 .3rem}.converter-title p{max-width:900px}.title-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.format-badge,.state-badge{display:inline-block;padding:5px 8px;border:1px solid var(--border);border-radius:5px;font:800 .64rem/1.2 "SFMono-Regular",Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.format-badge{color:var(--accent)}.state-badge.idle{color:var(--muted)}.state-badge.ok{color:var(--accent-2);border-color:rgba(255,216,77,.35)}.state-badge.warn{color:var(--gold);border-color:rgba(203,183,129,.38)}.state-badge.err{color:var(--danger);border-color:rgba(213,141,141,.38)}
.converter-grid{display:grid;grid-template-columns:minmax(370px,.82fr) minmax(520px,1.18fr);gap:16px;align-items:start}.converter-column{display:grid;gap:16px}.output-column{position:sticky;top:84px}.tool-panel{border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,rgba(18,26,34,.96),rgba(11,17,23,.96));overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.02)}.tool-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border-bottom:1px solid var(--border);background:#0d141a}.tool-panel-head>div{display:grid;gap:3px}.tool-panel-head strong{font-size:.9rem}.tool-panel-head>span:not(.state-badge){color:var(--muted);font-size:.7rem}.tool-panel-body{padding:13px}
.drop-zone{min-height:190px;display:grid;place-items:center;align-content:center;gap:5px;padding:22px;border:1px dashed rgba(170,124,255,.38);border-radius:7px;background:radial-gradient(circle at 50% 30%,rgba(170,124,255,.07),transparent 45%),#091016;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}.drop-zone:hover,.drop-zone.drag{border-color:var(--accent);background:radial-gradient(circle at 50% 30%,rgba(170,124,255,.12),transparent 48%),#0b1319}.drop-zone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.drop-icon{font-size:2.3rem;color:var(--accent);line-height:1}.drop-zone>span:not(.drop-icon),.drop-zone small{color:var(--muted)}.drop-zone small{margin-top:5px;font: .66rem "SFMono-Regular",Consolas,monospace}.source-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;color:var(--muted);font-size:.75rem}.source-meta span{padding:4px 6px;border:1px solid var(--border);border-radius:4px;background:#090e13}.input-tabs{display:flex;gap:4px;margin-top:12px;border-bottom:1px solid var(--border)}.input-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:7px 10px;cursor:pointer}.input-tab.active{color:var(--text);border-bottom-color:var(--accent)}.code-input{width:100%;min-height:220px;margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:6px;background:#070b0f;color:#dce9ed;font:.74rem/1.5 "SFMono-Regular",Consolas,monospace;resize:vertical}.inline-actions,.action-row,.output-toolbar,.preview-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.inline-actions{margin-top:8px}.action-row{padding-top:0}.form-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.form-layout label:not(.check-field){display:grid;gap:4px}.form-layout label>span{color:#8797a2;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}.form-layout input,.form-layout select{width:100%;border:1px solid var(--border);border-radius:5px;background:#080d12;color:var(--text);padding:8px}.check-field{display:flex;gap:8px;align-items:center;min-height:38px;padding:7px 8px;border:1px solid var(--border);border-radius:5px;background:#090f14}.check-field input{width:auto}.check-field span{text-transform:none!important;letter-spacing:0!important;color:var(--muted)!important;font-size:.76rem!important}
.report{display:grid;gap:6px}.report-row{display:grid;grid-template-columns:18px 1fr;gap:7px;padding:7px 8px;border-left:3px solid var(--border);background:#090f14;font-size:.76rem}.report-row.ok{border-left-color:var(--accent-2)}.report-row.warn{border-left-color:var(--gold)}.report-row.err{border-left-color:var(--danger)}.report-row.muted{color:var(--muted)}.report-row b{font-family:monospace}.report-row.ok b{color:var(--accent-2)}.report-row.warn b{color:var(--gold)}.report-row.err b{color:var(--danger)}
.preview-wrap{position:relative;min-height:380px;background:linear-gradient(rgba(170,124,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(170,124,255,.025) 1px,transparent 1px),#070b0f;background-size:28px 28px;overflow:hidden}#previewCanvas{display:block;width:100%;height:auto;min-height:380px;cursor:grab}#previewCanvas.dragging{cursor:grabbing}.preview-empty{position:absolute;inset:0;display:grid;place-items:center;color:#52616a;font:800 .7rem "SFMono-Regular",Consolas,monospace;letter-spacing:.15em;pointer-events:none}.preview-controls{justify-content:space-between;padding:8px 10px;border-top:1px solid var(--border);color:var(--muted);font-size:.7rem}.output-toolbar{padding:9px 10px;border-bottom:1px solid var(--border)}.output-json{max-height:560px;overflow:auto;margin:0;padding:13px;background:#06090c;color:#cfe1e4;font:.72rem/1.5 "SFMono-Regular",Consolas,monospace;white-space:pre;tab-size:2}.format-notes{display:grid;gap:8px}.format-notes>div{display:grid;grid-template-columns:160px 1fr;gap:10px;padding:8px;border:1px solid var(--border);border-radius:5px;background:#090f14}.format-notes strong{font-size:.78rem}.format-notes span{color:var(--muted);font-size:.75rem}.warning-note{border-color:rgba(203,183,129,.28)!important}.warning-note strong{color:var(--gold)}
@media(max-width:1050px){.converter-grid{grid-template-columns:1fr}.output-column{position:static}.converter-title{align-items:flex-start;flex-direction:column}.title-actions{justify-content:flex-start}.preview-wrap,#previewCanvas{min-height:320px}}@media(max-width:620px){.form-layout{grid-template-columns:1fr}.format-notes>div{grid-template-columns:1fr}.converter-main{padding-left:14px;padding-right:14px}.drop-zone{min-height:160px}}

.preview-empty[hidden]{display:none!important}