*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{color:#1a1a1a;background:#f0f2f5;font-family:system-ui,-apple-system,sans-serif}.overlay{z-index:9999;cursor:default;background-image:url(https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80);background-position:50%;background-size:cover;position:fixed;inset:0}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}header{color:#fff;background:#1a1a2e;flex-shrink:0;padding:1rem 1.5rem;box-shadow:0 2px 6px #0000004d}h1{letter-spacing:.02em;font-size:1.2rem;font-weight:600}.layout{flex:1;display:flex;overflow:hidden}.panel.left{background:#fff;border-right:1px solid #e0e0e0;flex:1;min-width:0;overflow-y:auto}.left-body{flex-direction:column;display:flex}.controls-header{cursor:pointer;-webkit-user-select:none;user-select:none;color:#555;text-transform:uppercase;letter-spacing:.04em;background:#f5f5f5;border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;font-size:.8rem;font-weight:600;display:flex}.controls-header:hover{background:#ebebeb}.chevron{font-size:1rem;transition:transform .25s;display:inline-block}.chevron.up{transform:rotate(-180deg)}.controls-body{max-height:4000px;transition:max-height .35s;overflow:hidden}.controls-body.collapsed{max-height:0}.controls-inner{flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.punchout-frame{border:none;border-top:1px solid #ddd;width:100%;height:560px;display:block}.panel.right{background:#fafafa;flex-direction:column;flex:1;min-width:0;transition:flex .35s;display:flex;overflow:hidden}.panel.right.collapsed{flex:0;min-width:0;max-width:0;overflow:hidden}.right-toggle{color:#666;cursor:pointer;z-index:1;background:#e0e0e0;border:none;border-left:1px solid #ccc;border-right:1px solid #ccc;flex-shrink:0;justify-content:center;align-items:center;width:28px;padding:0;font-size:.65rem;transition:background .15s;display:flex}.right-toggle:hover{color:#333;background:#d0d0d0}.right-section{flex-direction:column;flex:1;min-height:0;display:flex}.right-top{border-bottom:1px solid #e0e0e0}.section-body{flex-direction:column;flex:1;gap:1rem;padding:1.5rem;display:flex;overflow-y:auto}.right-bottom{background:#141414}.debug-header{background:#1e1e1e;border-bottom:1px solid #333;flex-shrink:0;justify-content:space-between;align-items:center;padding:.5rem 1rem;display:flex}.debug-header span{text-transform:uppercase;letter-spacing:.06em;color:#888;font-size:.75rem;font-weight:600}.btn-clear{color:#888;cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;padding:.2rem .6rem;font-size:.75rem}.btn-clear:hover{color:#ccc;border-color:#888}.debug-log{resize:none;color:#a8c7a8;background:#141414;border:none;outline:none;flex:1;width:100%;padding:1rem;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.78rem;line-height:1.6;overflow-y:auto}.field-row{gap:1rem;display:flex}.field-row .field{flex:1}.field{flex-direction:column;gap:.3rem;display:flex}label{color:#555;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:600}input,select{background:#fff;border:1px solid #ccc;border-radius:6px;width:100%;padding:.55rem .75rem;font-size:.95rem;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:#4a90e2;outline:none;box-shadow:0 0 0 3px #4a90e22e}.xml-editor{color:#d4d4d4;resize:vertical;background:#1e1e1e;border:1px solid #333;border-radius:6px;width:100%;padding:.75rem;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.8rem;line-height:1.5}.xml-editor:focus{border-color:#4a90e2;outline:none}.btn-primary{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:6px;align-self:flex-start;padding:.65rem 2rem;font-size:1rem;font-weight:600;transition:background .15s}.btn-primary:hover:not(:disabled){background:#357abd}.btn-primary:active:not(:disabled){background:#2868a0}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.errors{background:#fff5f5;border:1px solid #f5b7b7;border-radius:6px;flex-direction:column;gap:.25rem;padding:.75rem 1rem;display:flex}.errors p{color:#c0392b;white-space:pre-wrap;font-size:.85rem}.response-pre{color:#d4d4d4;white-space:pre;background:#1e1e1e;border-radius:6px;max-height:400px;padding:1rem;font-size:.85rem;line-height:1.5;overflow:auto}