:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;--bg-primary: #282a36;--bg-secondary: #44475a;--bg-tertiary: #3b4048;--fg-primary: #f8f8f2;--fg-secondary: #8be9fd;--fg-muted: #bd93f9;--accent-purple: #bd93f9;--accent-pink: #ff79c6;--accent-cyan: #8be9fd;--accent-green: #50fa7b;--accent-orange: #ffb86c;--accent-red: #ff5555;--accent-yellow: #f1fa8c;--border-color: #44475a;--border-subtle: #383a59;background-color:var(--bg-primary);color:var(--fg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:var(--bg-primary);color:var(--fg-primary)}#root{min-height:100vh}a{font-weight:500;color:var(--accent-purple);text-decoration:inherit}a:hover{color:var(--accent-pink)}button{border-radius:8px;border:1px solid var(--border-color);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg-secondary);color:var(--fg-primary);cursor:pointer;transition:all .2s ease}button:hover{background-color:var(--bg-tertiary);border-color:var(--accent-purple)}button:focus,button:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px}input,textarea{background-color:var(--bg-secondary);color:var(--fg-primary);border:1px solid var(--border-color);border-radius:6px;padding:.5rem;font-family:inherit;transition:all .2s ease}input:focus,textarea:focus{outline:none;border-color:var(--accent-purple);box-shadow:0 0 0 2px #bd93f933}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-color)}.app{height:100vh;display:flex;flex-direction:column;background-color:var(--bg-primary)}.app-header{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);color:var(--fg-primary);padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);box-shadow:0 2px 12px #0000004d}.header-controls{display:flex;align-items:center;gap:1.5rem}.app-header h1{margin:0;font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent-purple) 0%,var(--accent-pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:.75rem}.app-header h1 .logo{height:2.5rem;width:auto;display:inline-block;vertical-align:middle}.connection-status{font-size:.9rem;display:flex;align-items:center;gap:.5rem}.connection-status:before{content:"";width:8px;height:8px;border-radius:50%;background-color:var(--accent-red);animation:pulse 2s infinite}.connected:before{background-color:var(--accent-green)}.disconnected:before{background-color:var(--accent-red)}.connected{color:var(--accent-green);font-weight:600}.disconnected{color:var(--accent-red);font-weight:600}.app-main{flex:1;display:flex;overflow:hidden}.sidebar{width:400px;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);padding:1.5rem;overflow-y:auto}.content{flex:1;display:flex;overflow:hidden}.requests-panel{width:450px;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);padding:1.5rem;overflow-y:auto}.details-panel{flex:1;background-color:var(--bg-primary);padding:1.5rem;overflow-y:auto}.create-endpoint{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-subtle)}.create-endpoint h2{margin-bottom:1rem;font-size:1.2rem;color:var(--accent-purple);font-weight:600}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--fg-primary);font-size:.9rem}.form-group input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:6px;font-size:.9rem;background-color:var(--bg-primary);color:var(--fg-primary);transition:all .2s ease}.form-group input:focus{outline:none;border-color:var(--accent-purple);box-shadow:0 0 0 2px #bd93f933}.create-endpoint button{width:100%;padding:.75rem;background:linear-gradient(135deg,var(--accent-purple) 0%,var(--accent-pink) 100%);color:var(--fg-primary);border:none;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.create-endpoint button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #bd93f966}.create-endpoint button:disabled{background:var(--bg-tertiary);cursor:not-allowed;transform:none;box-shadow:none}.endpoint-list h2,.request-list h2,.request-details h2{margin-bottom:1rem;font-size:1.2rem;color:var(--accent-cyan);font-weight:600}.endpoint-list ul,.request-list ul{list-style:none;padding:0;margin:0}.endpoint-list li,.request-list li{padding:1rem;border:1px solid var(--border-subtle);border-radius:8px;margin-bottom:.75rem;cursor:pointer;transition:all .3s ease;background-color:var(--bg-primary)}.endpoint-list li:hover,.request-list li:hover{background-color:var(--bg-tertiary);border-color:var(--accent-purple);transform:translateY(-1px)}.endpoint-list li.selected,.request-list li.selected{background-color:var(--bg-tertiary);border-color:var(--accent-purple);box-shadow:0 0 0 2px #bd93f966;transform:scale(1.02)}.endpoint-list li.selected .endpoint-name{color:var(--accent-purple);font-weight:600}.endpoint-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.endpoint-info{display:flex;flex-direction:column;gap:.5rem}.endpoint-name{font-weight:600;color:var(--fg-primary);font-size:1rem}.endpoint-url{font-family:JetBrains Mono,Fira Code,monospace;color:var(--accent-cyan);font-size:.75rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background-color:var(--bg-secondary);padding:.5rem;border-radius:4px;border:1px solid var(--border-subtle);cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.endpoint-url:hover{background-color:var(--bg-tertiary);border-color:var(--accent-purple);transform:translateY(-1px)}.endpoint-url.copied{background-color:var(--accent-green);color:var(--bg-primary);border-color:var(--accent-green)}.copied-indicator{font-size:.7rem;font-weight:600;color:var(--bg-primary);animation:fadeIn .3s ease;white-space:nowrap;flex-shrink:0}@keyframes fadeIn{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes newEndpointPulse{0%{background-color:var(--bg-primary);border-color:var(--border-subtle);transform:scale(1)}25%{background-color:#bd93f933;border-color:var(--accent-purple);transform:scale(1.03)}50%{background-color:#bd93f966;border-color:var(--accent-purple);transform:scale(1.05);box-shadow:0 0 20px #bd93f94d}75%{background-color:#bd93f933;border-color:var(--accent-purple);transform:scale(1.03)}to{background-color:var(--bg-primary);border-color:var(--border-subtle);transform:scale(1);box-shadow:none}}@keyframes newRequestFlash{0%{background-color:var(--bg-primary);border-color:var(--border-subtle);transform:scale(1)}20%{background-color:#8be9fd4d;border-color:var(--accent-cyan);transform:scale(1.02)}40%{background-color:#8be9fd80;border-color:var(--accent-cyan);transform:scale(1.04);box-shadow:0 0 15px #8be9fd66}60%{background-color:#8be9fd4d;border-color:var(--accent-cyan);transform:scale(1.02)}80%{background-color:#8be9fd1a;border-color:var(--accent-cyan);transform:scale(1.01)}to{background-color:var(--bg-primary);border-color:var(--border-subtle);transform:scale(1);box-shadow:none}}@keyframes endpointRequestPulse{0%{background-color:var(--bg-primary);border-color:var(--border-subtle);transform:scale(1)}30%{background-color:#50fa7b33;border-color:var(--accent-green);transform:scale(1.02);box-shadow:0 0 12px #50fa7b66}to{background-color:var(--bg-primary);border-color:var(--border-subtle);transform:scale(1)}}.endpoint-new{animation:newEndpointPulse .8s ease-out!important}.endpoint-request{animation:endpointRequestPulse .6s ease-out!important}.request-new{animation:newRequestFlash 1.2s ease-out!important}.copy-btn{padding:.25rem .5rem;background-color:var(--accent-purple);color:var(--fg-primary);border:none;border-radius:4px;cursor:pointer;font-size:.7rem;font-weight:500;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.copy-btn:hover{background-color:var(--accent-pink);transform:scale(1.05)}.copy-btn.copied{background-color:var(--accent-green)}.endpoint-meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}.request-count{font-size:.8rem;color:var(--fg-muted);font-weight:500}.creation-date{font-size:.75rem;color:var(--fg-muted);font-weight:400;font-style:italic}.delete-btn{margin-top:.75rem;padding:.5rem 1rem;background-color:var(--accent-red);color:var(--fg-primary);border:none;border-radius:4px;cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.delete-btn:hover{background-color:#ff6b6b;transform:translateY(-1px)}.delete-btn-icon{background:none;border:none;cursor:pointer;font-size:1.2rem;padding:.25rem;border-radius:4px;transition:all .2s ease;color:var(--fg-muted);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}.delete-btn-icon:hover{background-color:var(--accent-red);color:var(--fg-primary);transform:scale(1.1)}.request-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.request-info{display:flex;align-items:flex-start;gap:.75rem;flex-direction:column}@media (min-width: 768px){.request-info{flex-direction:row;align-items:center}}.method{padding:.3rem .6rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.method.get{background-color:var(--accent-green);color:var(--bg-primary)}.method.post{background-color:var(--accent-cyan);color:var(--bg-primary)}.method.put{background-color:var(--accent-orange);color:var(--bg-primary)}.method.delete{background-color:var(--accent-red);color:var(--fg-primary)}.method.patch{background-color:var(--accent-purple);color:var(--fg-primary)}.url{font-family:JetBrains Mono,Fira Code,monospace;color:var(--fg-primary);flex:1;font-size:.9rem}.url-container{flex:1;min-width:0}.url-with-subpath{font-family:JetBrains Mono,Fira Code,monospace;font-size:.9rem;display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}.base-path{color:var(--fg-muted);font-size:.8rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.subpath-separator{color:var(--accent-cyan);font-weight:700;font-size:.9rem}.sub-path{color:var(--accent-cyan);font-weight:600;background-color:#8be9fd1a;padding:.2rem .4rem;border-radius:4px;font-size:.85rem;word-break:break-all}.url-details-with-subpath{font-family:JetBrains Mono,Fira Code,monospace;font-size:.9rem;display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-left:.5rem}.base-path-details{color:var(--fg-muted);font-size:.85rem;opacity:.8;word-break:break-all}.subpath-separator-details{color:var(--accent-cyan);font-weight:700;font-size:1rem}.sub-path-details{color:var(--accent-cyan);font-weight:600;background-color:#8be9fd26;padding:.3rem .6rem;border-radius:6px;font-size:.9rem;word-break:break-all;box-shadow:0 2px 4px #8be9fd33}.timestamp{font-size:.8rem;color:var(--fg-muted);font-weight:500}.request-details{height:100%}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.section-header h3{margin:0}.copy-btn-icon{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:.4rem;border-radius:4px;transition:all .2s ease;color:var(--fg-muted);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}.copy-btn-icon:hover{background-color:var(--accent-cyan);color:var(--bg-primary);transform:scale(1.1)}.copy-btn-icon.copied{background-color:var(--accent-green);color:var(--bg-primary)}.request-meta{margin-bottom:1.5rem}.meta-item{margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem}.meta-item strong{color:var(--accent-purple);min-width:100px;font-weight:600}.headers-section,.body-section{margin-bottom:1.5rem}.headers-section h3,.body-section h3{margin-bottom:.8rem;color:var(--accent-orange);font-size:1.1rem;font-weight:600}.headers-list{background-color:var(--bg-secondary);padding:1rem;border-radius:8px;border:1px solid var(--border-color)}.header-item{display:flex;margin-bottom:.5rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.9rem}.header-key{font-weight:600;color:var(--accent-purple);margin-right:.5rem}.header-value{color:var(--fg-primary)}.body-content{background-color:var(--bg-secondary);padding:1rem;border-radius:8px;border:1px solid var(--border-color);font-family:JetBrains Mono,Fira Code,monospace;font-size:.9rem;white-space:pre-wrap;word-wrap:break-word;color:var(--fg-primary);margin:0}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.login-btn{display:flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--accent-purple) 0%,var(--accent-pink) 100%);color:var(--fg-primary);border:none;border-radius:6px;padding:.75rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.login-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #bd93f966}.github-icon{font-size:1.1rem}.user-button{position:relative}.user-button.loading{color:var(--fg-muted);font-size:.9rem}.user-avatar{display:flex;align-items:center;gap:.5rem;background:var(--bg-tertiary);color:var(--fg-primary);border:1px solid var(--border-color);border-radius:6px;padding:.5rem .75rem;font-size:.9rem;cursor:pointer;transition:all .2s ease}.user-avatar:hover{background:var(--bg-secondary);border-color:var(--accent-purple)}.user-avatar img{width:24px;height:24px;border-radius:50%}.dropdown-arrow{font-size:.7rem;color:var(--fg-muted);transition:transform .2s ease}.user-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 12px #0000004d;min-width:220px;z-index:1000;animation:fadeIn .2s ease}.user-info{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid var(--border-subtle)}.user-info img{width:40px;height:40px;border-radius:50%}.user-name{font-weight:600;color:var(--fg-primary);font-size:.9rem}.user-username{color:var(--fg-muted);font-size:.8rem}.logout-btn{width:100%;background:none;border:none;color:var(--accent-red);padding:.75rem 1rem;text-align:left;cursor:pointer;font-size:.9rem;transition:all .2s ease}.logout-btn:hover{background:var(--bg-tertiary);color:var(--fg-primary)}