:root{--primary:#7c3aed;--primary-dark:#6d28d9;--primary-light:#8b5cf6;--accent:#f59e0b;--accent-dark:#d97706;--background:#fff;--surface:#f9fafb;--border:#e5e7eb;--text:#111827;--text-secondary:#6b7280;--text-inverse:#fff;--success:#10b981;--error:#ef4444;--warning:#f59e0b}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text);background:var(--background);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit}.app{flex-direction:column;min-height:100vh;display:flex}.header{background:var(--primary);color:var(--text-inverse);align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex;box-shadow:0 2px 4px #0000001a}.header-title{flex:1;font-size:1.25rem;font-weight:600}.header-nav{gap:.5rem;display:flex}.nav-button{color:var(--text-inverse);background:#ffffff1a;border-radius:6px;padding:.5rem 1rem;font-weight:500;transition:background .2s}.nav-button:hover{background:#fff3}.nav-button.active{background:#ffffff40}.screen{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1.5rem}.form-filler{flex-direction:column;gap:1.5rem;height:calc(100vh - 5rem);display:flex}.controls{background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;align-items:flex-end;gap:1rem;padding:1.5rem;display:flex}.form-group{flex-direction:column;flex:1;gap:.5rem;min-width:200px;display:flex}.label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.input,.select,.textarea{border:1px solid var(--border);background:var(--background);color:var(--text);border-radius:6px;padding:.625rem .875rem;font-size:.875rem;transition:border-color .2s}.textarea{resize:vertical;min-height:80px}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #7c3aed1a}.button{white-space:nowrap;border-radius:6px;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .2s}.button-primary{background:var(--primary);color:var(--text-inverse)}.button-primary:hover{background:var(--primary-dark)}.button-primary:disabled{opacity:.5;cursor:not-allowed}.button-accent{background:var(--accent);color:var(--text-inverse)}.button-accent:hover{background:var(--accent-dark)}.button-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.button-secondary:hover{background:var(--border)}.content{flex:1;grid-template-columns:1fr 300px;gap:1.5rem;min-height:0;display:grid}.iframe-container{background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-direction:column;display:flex;overflow:hidden}.iframe-header{border-bottom:1px solid var(--border);background:var(--background);color:var(--text-secondary);padding:1rem 1.5rem;font-size:.875rem;font-weight:500}.iframe{background:#fff;border:none;flex:1;width:100%}.log-container{background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-direction:column;display:flex;overflow:hidden}.log-header{border-bottom:1px solid var(--border);background:var(--background);padding:1rem 1.5rem;font-size:.875rem;font-weight:600}.log-content{flex-direction:column;flex:1;gap:.5rem;padding:1rem;display:flex;overflow-y:auto}.log-entry{background:var(--background);border-left:3px solid var(--primary);border-radius:6px;padding:.75rem;font-size:.75rem;line-height:1.4}.log-entry-timestamp{color:var(--text-secondary);margin-bottom:.25rem;font-weight:500}.log-entry-field{color:var(--primary);font-weight:600}.log-entry-value{color:var(--text);word-break:break-word;margin-top:.25rem}.log-empty{text-align:center;color:var(--text-secondary);padding:2rem;font-size:.875rem}.proxy-dev-message{text-align:center;background:var(--background);flex-direction:column;justify-content:center;align-items:center;height:100%;padding:3rem 2rem;display:flex}.proxy-dev-icon{margin-bottom:1rem;font-size:3rem}.proxy-dev-title{color:var(--text);margin-bottom:.75rem;font-size:1.125rem;font-weight:600}.proxy-dev-text{color:var(--text-secondary);max-width:400px;font-size:.875rem;line-height:1.6}.review-panel{background:var(--background);border:2px solid var(--primary);border-radius:8px;max-width:400px;padding:1.5rem;animation:.3s ease-out slideIn;position:fixed;bottom:2rem;right:2rem;box-shadow:0 4px 12px #00000026}@keyframes slideIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.review-title{color:var(--primary);margin-bottom:.5rem;font-weight:600}.review-message{color:var(--text-secondary);margin-bottom:1rem;font-size:.875rem}.review-actions{gap:.75rem;display:flex}.settings-screen{max-width:600px}.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:1.5rem;padding:1.5rem}.settings-title{margin-bottom:1rem;font-size:1.125rem;font-weight:600}.settings-actions{gap:.75rem;margin-top:1rem;display:flex}.connection-status{border-radius:6px;margin-top:1rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500}.connection-success{color:var(--success);border:1px solid var(--success);background:#10b9811a}.connection-error{color:var(--error);border:1px solid var(--error);background:#ef44441a}.status-indicator{margin-right:.5rem;display:inline-block}@media (width<=768px){.content{grid-template-columns:1fr}.log-container{height:300px}.controls{flex-direction:column;align-items:stretch}.review-panel{bottom:1rem;left:1rem;right:1rem}}