:root{--primary:#2563eb;--bg-color:#f8fafc;--panel-bg:#fff;--border-color:#e2e8f0;--text-main:#0f172a;--text-muted:#64748b;--valid-color:#16a34a;--invalid-color:#dc2626}*{box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif}body{background-color:var(--bg-color);color:var(--text-main);margin:0}.container{flex-direction:column;max-width:1400px;height:100vh;margin:0 auto;padding:1rem 2rem;display:flex}header{border-bottom:1px solid var(--border-color);margin-bottom:2rem;padding-bottom:1rem}header h1{margin:0 0 .5rem;font-size:1.5rem}header p{color:var(--text-muted);margin:0}.layout{flex:1;gap:2rem;min-height:0;display:flex}.controls-panel{flex-direction:column;gap:1.5rem;width:350px;display:flex;overflow-y:auto}.control-group{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem}.control-group h3{margin:0 0 1rem;font-size:1rem}.button-row{gap:.5rem;display:flex}button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:4px;flex:1;padding:.5rem 1rem;font-weight:500}button:hover{opacity:.9}button:disabled{background:var(--text-muted);cursor:not-allowed}button.outline{color:var(--primary);border:1px solid var(--primary);background:0 0}button.full-width{width:100%}label{flex-direction:column;gap:.5rem;margin-bottom:1rem;font-size:.875rem;font-weight:500;display:flex}select{border:1px solid var(--border-color);border-radius:4px;padding:.5rem}.validation-panel{flex-direction:column;gap:.5rem;display:flex}.status{border-radius:4px;padding:.5rem;font-size:.875rem}.status.valid{color:var(--valid-color);background:#dcfce7}.status.invalid{color:var(--invalid-color);background:#fee2e2}.notes-panel ul{color:var(--text-muted);margin:0;padding-left:1.5rem;font-size:.875rem}.notes-panel li{margin-bottom:.25rem}.error-text{color:var(--invalid-color)}.preview-panel{flex-direction:column;flex:1;gap:1rem;display:flex}.code-split{gap:1rem;height:100%;display:flex}.code-block{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:8px;flex-direction:column;flex:1;display:flex;overflow:hidden}.code-header{border-bottom:1px solid var(--border-color);background:#f1f5f9;justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.875rem;font-weight:500;display:flex}.code-header button{flex:0;padding:.25rem .75rem;font-size:.75rem}.json-textarea{resize:none;width:100%;color:var(--text-main);background:0 0;border:none;outline:none;flex:1;padding:1rem;font-family:monospace;font-size:.875rem}.json-textarea.read-only{background:#fafafa}