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}*{margin:0;padding:0;box-sizing:border-box}body{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}.app{min-height:100vh;background:linear-gradient(135deg,#e0f2fe,#ddd6fe)}.header{background:#fff;box-shadow:0 1px 3px #0000001a;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo-section{display:flex;align-items:center;gap:1rem}.logo{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:2.5rem}.api-icon{width:32px;height:32px;margin-right:.5rem;color:#4f46e5}.header h1{font-size:1.5rem;font-weight:700;color:#1f2937}.api-link{padding:.5rem 1rem;color:#4f46e5;text-decoration:none;font-size:large;font-weight:500;transition:color .2s;display:flex;align-items:center}.api-link:hover{color:#4338ca}.content{display:flex;gap:2rem;max-width:1200px;margin:3rem auto;padding:0 2rem}.container{flex:1;max-width:448px;padding:2rem;background:#fff;border-radius:1rem;box-shadow:0 10px 25px #0000001a}.container h2{text-align:center;font-size:1.5rem;font-weight:700;color:#1f2937;margin-bottom:.5rem}.subtitle{text-align:center;color:#6b7280;margin-bottom:1.5rem}.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}.tab{flex:1;padding:.5rem 1rem;border:none;border-radius:.5rem;font-weight:500;cursor:pointer;transition:all .2s;background:#f3f4f6;color:#6b7280}.tab:hover{background:#e5e7eb}.tab.active{background:#4f46e5;color:#fff}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}.form-group input{width:100%;padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:1rem;transition:all .2s}.form-group input:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}button[type=submit]{width:100%;padding:.75rem;background:#4f46e5;color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}button[type=submit]:hover{background:#4338ca}.message{margin-top:1rem;padding:.75rem;border-radius:.5rem;text-align:center;font-weight:500}.message.success{background:#d1fae5;color:#065f46}.message.error{background:#fee2e2;color:#991b1b}.users-list-container{flex:1;max-width:400px;padding:2rem;background:#fff;border-radius:1rem;box-shadow:0 10px 25px #0000001a}.users-list-container h2{font-size:1.5rem;font-weight:700;color:#1f2937;margin-bottom:1.5rem;text-align:center}.users-list{display:flex;flex-direction:column;gap:.75rem}.user-item{padding:1rem;background:#f9fafb;border-radius:.5rem;color:#374151;font-weight:500;transition:all .2s}.user-item:hover{background:#f3f4f6;transform:translate(4px)}.users-list p{text-align:center;color:#9ca3af;padding:2rem}footer{text-align:center;padding:2rem;color:#6b7280;font-size:.875rem}@media(max-width:1024px){.content{flex-direction:column;align-items:center}.container,.users-list-container{max-width:100%;width:100%}}@media(max-width:640px){.header{padding:1rem}.header h1{font-size:1.25rem}.logo{width:48px;height:48px;font-size:1.5rem}.content{margin:1.5rem auto;padding:0 1rem}.container,.users-list-container{padding:1.5rem}}