*{padding:0;margin:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;min-height:100vh;height:100vh;color:#333;background:linear-gradient(135deg,#0a0a0a,#1f1f1f 45%,silver);overflow:hidden}#root{height:100%}.app{max-width:500px;margin:0 auto;padding:3rem 1rem;height:100%;display:flex;flex-direction:column;overflow:hidden}.app h1{text-align:center;margin-bottom:2rem;color:#fff}form{display:flex;flex-direction:column;gap:.75rem;padding:2rem;background-color:#fff;border-radius:1rem;margin-bottom:2rem}form input,form button{padding:.8rem;border:1px solid #eee;border-radius:.7rem;font-size:1rem}form button{background:linear-gradient(135deg,#111,#8f8f8f);border-color:#2a2a2a;color:#fff;cursor:pointer;font-weight:600;transition:background .3s ease}form button:hover{opacity:.8}.user-list{display:flex;flex-direction:column;gap:1rem;flex:1;min-height:0;overflow-y:auto;padding-right:.35rem}@media(max-width:768px){.app{padding:2rem .85rem}.app h1{margin-bottom:1.4rem;font-size:1.55rem}form{padding:1.35rem;margin-bottom:1.4rem;border-radius:.85rem}form input,form button{padding:.7rem;font-size:.93rem}form button{background:linear-gradient(135deg,#111,#8f8f8f);border-color:#2a2a2a}.user-list{padding-right:.2rem}}.user-card{display:flex;align-items:center;gap:1.25rem;padding:1rem 1.25rem;background-color:#fff;border-radius:.8rem;border:1px solid #ececff;box-shadow:0 8px 22px #34437a1f}.user-card-avatar{width:4rem;height:4rem;border-radius:50%;object-fit:cover;border:2px solid #e5e9ff;flex-shrink:0}.user-card-info{display:flex;flex-direction:column;gap:.55rem;flex:1;min-width:0}.user-card-info p{margin:0;padding:.6rem .75rem;border-radius:.65rem;border:1px solid #e2e7ff;background:linear-gradient(135deg,#f8f9ff,#eef1ff);color:#2b3458;font-size:.95rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-card-info p:first-child{border-color:#ccd7ff;background:linear-gradient(135deg,#eef2ff,#e4ebff);font-weight:600;color:#1f294d}@media(max-width:768px){.user-card{gap:.9rem;padding:.8rem .9rem;border-radius:.7rem}.user-card-avatar{width:3.2rem;height:3.2rem}.user-card-info{gap:.45rem}.user-card-info p{padding:.5rem .62rem;font-size:.88rem}}