.App{text-align:center;min-height:100vh;background-color:#282c34;color:#fff}.App-header{padding:20px;margin-bottom:20px}.App-header h1{margin:0;font-size:2em}.App-header p{margin:10px 0 0;font-size:1.2em;color:#61dafb}.App-main{padding:0 20px 40px;max-width:1200px;margin:0 auto}.view-toggle{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.toggle-button{padding:8px 16px;background-color:#1e1e1e;color:#d4d4d4;border:1px solid #404040;border-radius:4px;cursor:pointer;transition:all .2s}.toggle-button:hover{background-color:#2a2a2a}.toggle-button.active{background-color:#61dafb;color:#282c34;border-color:#61dafb}.credentials-section{display:flex;gap:10px;margin-bottom:20px}.credentials-section input{flex:1;padding:10px;background-color:#1e1e1e;color:#d4d4d4;border:1px solid #404040;border-radius:4px;font-size:14px}.credentials-section input:focus{outline:none;border-color:#61dafb}.code-container{display:flex;gap:20px;margin-bottom:20px}.code-box{flex:1;text-align:left;display:flex;flex-direction:column;gap:10px}.code-box h2{margin:0;color:#61dafb}textarea{width:100%;height:300px;background-color:#1e1e1e;color:#d4d4d4;border:1px solid #404040;border-radius:4px;padding:10px;font-family:Courier New,Courier,monospace;font-size:14px;resize:vertical}textarea:focus{outline:none;border-color:#61dafb}.submit-button{width:100%;padding:12px 24px;font-size:16px;background-color:#61dafb;color:#282c34;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s,transform .1s;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:30px}.submit-button:hover:not(:disabled){background-color:#4fa8d5;transform:translateY(-1px)}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{background-color:#4a4a4a;cursor:not-allowed;opacity:.7}.loading-spinner{width:16px;height:16px;border:2px solid #282c34;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.summary-section{text-align:left;background-color:#1e1e1e;border-radius:4px;padding:20px}.summary-section h2{margin:0 0 15px;color:#61dafb}pre{margin:0;white-space:pre-wrap;font-family:Courier New,Courier,monospace;color:#d4d4d4}.error-message{background-color:#f44;color:#fff;padding:10px;border-radius:4px;margin:20px 0;text-align:left}.error-section,.result-section{text-align:left;background-color:#1e1e1e;border-radius:4px;padding:20px;margin-bottom:20px}.error-section h2,.result-section h2{margin:0 0 15px;color:#ff6b6b}.result-section h2{color:#61dafb}.error-content{color:#ff6b6b;white-space:pre-wrap;word-break:break-word;font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5;background-color:#2a2a2a;padding:15px;border-radius:4px;overflow-x:auto}.result-content{background-color:#2a2a2a;padding:15px;border-radius:4px}.result-content h3{margin:0 0 10px;color:#61dafb;font-size:16px}.result-content pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5;color:#d4d4d4;overflow-x:auto}.execution-columns{display:flex;gap:20px;margin-top:15px}.js-result,.ts-result{flex:1;margin-bottom:0;padding:15px;border-radius:4px;border-left:4px solid}.js-result{background-color:#1a1a2e;border-left-color:gold}.ts-result{background-color:#1a2e1a;border-left-color:#007acc}.js-result h3,.ts-result h3{margin:0 0 10px;font-size:16px}.js-result h3{color:gold}.ts-result h3{color:#007acc}.error{color:#ff6b6b}.success{color:#4ecdc4}.error pre,.success pre{background-color:#2a2a2a;padding:10px;border-radius:4px;margin-top:5px;font-size:13px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}